/* ==========================================================================
   TAMAGOTCHI HARDWARE SHELL
   Egg-shaped pink plastic with keychain loop, LCD, and three buttons below.
   ========================================================================== */

body.tamagotchi-active #player.has-hardware {
  position: relative;
  padding: 56px 36px 120px;
  background:
    radial-gradient(ellipse at 30% 20%, #ffd0e0 0%, #ff7eb3 40%, #d8407a 100%);
  border: 3px solid #aa2864;
  border-radius: 50% 50% 45% 45% / 35% 35% 55% 55%;
  box-shadow:
    inset 0 8px 16px #ffffff80,
    inset 0 -10px 20px #aa286460,
    inset 6px 0 12px #ffffff40,
    inset -6px 0 12px #aa286430,
    0 10px 40px #d8407a60;
  overflow: visible;
}

/* Keychain ring on top */
body.tamagotchi-active .hw-tama-keychain {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  pointer-events: none;
}
body.tamagotchi-active .hw-tama-ring {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border: 4px solid #c0c0c0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0%, #a0a0a0 60%, #505050 100%);
  background-clip: padding-box;
  box-shadow: 0 2px 4px #00000040;
}
body.tamagotchi-active .hw-tama-keychain::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 16px;
  background:
    radial-gradient(circle at 30% 30%, #ffe0e8 0%, #ff9ec4 60%, #d8407a 100%);
  border-radius: 3px 3px 4px 4px;
  border: 1px solid #aa2864;
}

/* Brand label above LCD */
body.tamagotchi-active .hw-tama-brand {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Brush Script MT', 'Comic Sans MS', cursive;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-shadow:
    0 1px 0 #aa2864,
    0 2px 3px #00000040;
  letter-spacing: 0.5px;
  z-index: 3;
}
body.tamagotchi-active .hw-tama-brand sup {
  font-size: 8px;
  vertical-align: super;
}

/* Inner bezel around LCD */
body.tamagotchi-active .hw-tama-inner-bezel {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: 64%;
  aspect-ratio: 1 / 1;
  max-width: 260px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffffff40 0%, transparent 40%),
    radial-gradient(ellipse at center, #4a1428 0%, #2a0818 100%);
  box-shadow:
    inset 0 4px 12px #000000a0,
    inset 0 -2px 4px #ffffff20;
  z-index: 1;
  pointer-events: none;
}

/* Hide title bar */
body.tamagotchi-active #player.has-hardware .title-bar {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* LCD placed inside the dark bezel */
body.tamagotchi-active #player.has-hardware .lcd-section {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 50%;
  background: #b8e0c4;
  border: 2px solid #0a1008;
  border-radius: 6px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 1px #6a8070,
    inset 0 0 8px #00000060;
}

body.tamagotchi-active #player.has-hardware .lcd-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, #0a101820 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, #0a101820 2px 3px);
  pointer-events: none;
  z-index: 5;
}

body.tamagotchi-active #player.has-hardware .lcd-time-digits,
body.tamagotchi-active #player.has-hardware .lcd-marquee,
body.tamagotchi-active #player.has-hardware .lcd-samplerate,
body.tamagotchi-active #player.has-hardware .lcd-bitrate {
  color: #111815;
  text-shadow: none;
  font-weight: bold;
}

/* Three big chunky buttons */
body.tamagotchi-active .hw-tama-buttons {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 22px;
  pointer-events: none;
  z-index: 3;
}
body.tamagotchi-active .hw-tama-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #ffffff 0%, #ffd74a 30%, #c8a820 80%, #8a7010 100%);
  border: 1px solid #6a4818;
  box-shadow:
    inset 0 2px 2px #ffffff,
    inset 0 -2px 2px #8a6818,
    0 4px 0 #6a5010,
    0 6px 10px #aa286460;
  display: grid;
  place-items: center;
  position: relative;
}
body.tamagotchi-active .hw-tama-btn em {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 13px;
  color: #4a3008;
  font-weight: bold;
  text-shadow: 0 1px 0 #ffe890;
}

/* Decorative plastic bumps around the egg */
body.tamagotchi-active .hw-tama-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0%, #ffc4d8 60%, #aa2864 100%);
  box-shadow: 0 1px 1px #00000040;
}
body.tamagotchi-active .hw-tama-dot-tl { top: 40%; left: 6%; }
body.tamagotchi-active .hw-tama-dot-tr { top: 40%; right: 6%; }
body.tamagotchi-active .hw-tama-dot-bl { bottom: 20%; left: 10%; }
body.tamagotchi-active .hw-tama-dot-br { bottom: 20%; right: 10%; }

/* Hide feature buttons to avoid clutter on the egg shape */
body.tamagotchi-active #player.has-hardware .controls-section,
body.tamagotchi-active #player.has-hardware .viz-container,
body.tamagotchi-active #player.has-hardware .seek-bar-container {
  max-width: 68%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  body.tamagotchi-active #player.has-hardware {
    padding: 44px 24px 100px;
    border-radius: 50% 50% 40% 40% / 30% 30% 55% 55%;
  }
  body.tamagotchi-active .hw-tama-btn { width: 32px; height: 32px; }
  body.tamagotchi-active #player.has-hardware .lcd-section { max-width: 60%; }
}