/* ==========================================================================
   GAME BOY HARDWARE SHELL
   Decorative overlay that wraps the player to look like a DMG-01 Game Boy.
   Activates when body.gameboy-active + #player.has-hardware are both present.
   ========================================================================== */

/* ---- Case shape + room for hardware ---- */

body.gameboy-active #player.has-hardware {
  position: relative;
  /* Extend case around the real player */
  padding: 42px 20px 240px;
  background:
    radial-gradient(ellipse at 50% 0%, #dedede 0%, #c4c4c4 50%, #aeaeae 100%);
  border: 2px solid #6a6a6a;
  border-radius: 10px 10px 12px 60px;
  box-shadow:
    inset 0 3px 0 #ffffffa0,
    inset 0 -6px 12px #00000020,
    inset 4px 0 0 #00000015,
    inset -4px 0 0 #00000015,
    0 10px 0 #707070,
    0 14px 40px #00000080;
  overflow: visible;
}

/* Little bezel above the screen with brand text */
body.gameboy-active .hw-gb-brand {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Times New Roman', serif;
  color: #3a3a3a;
  user-select: none;
  white-space: nowrap;
}

body.gameboy-active .hw-gb-nintendo {
  font-style: italic;
  font-weight: bold;
  font-size: 14px;
  color: #2a2a4a;
}
body.gameboy-active .hw-gb-nintendo sup {
  font-size: 8px;
  vertical-align: super;
}

body.gameboy-active .hw-gb-gameboy {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #2a2a4a;
}
body.gameboy-active .hw-gb-tm {
  font-size: 7px;
  vertical-align: super;
  margin-left: 2px;
}

/* LCD bezel — dark recessed frame around lcd-section */
body.gameboy-active #player.has-hardware .lcd-section {
  position: relative;
  margin: 0 14px 8px;
  border-radius: 6px 6px 50px 6px;
  background: #8b8b6b;
  padding: 18px 12px 34px;
  box-shadow:
    inset 0 4px 12px #00000080,
    inset 0 -2px 4px #ffffff30;
  border: none;
}

/* Inner green LCD (the lcd-content block gets the DMG green) */
body.gameboy-active #player.has-hardware .lcd-section .lcd-content {
  background: #9bbc0f;
  border: 2px solid #306230;
  border-radius: 2px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1px #7a9c0a;
  position: relative;
  z-index: 2;
}

/* Dot-matrix grid */
body.gameboy-active #player.has-hardware .lcd-section .lcd-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, #0f380f15 2px 3px),
    repeating-linear-gradient(0deg, transparent 0 2px, #0f380f15 2px 3px);
  pointer-events: none;
  z-index: 3;
}

/* Power LED */
body.gameboy-active .hw-gb-power-led {
  position: absolute;
  top: 24px;
  left: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff4a4a, #c80a0a 70%, #500 100%);
  box-shadow: 0 0 8px #ff4a4a80, inset 0 1px 1px #ffd0d0;
  z-index: 3;
}
body.gameboy-active .hw-gb-power-label {
  position: absolute;
  top: 22px;
  left: 34px;
  font-family: 'Times New Roman', serif;
  font-size: 7px;
  letter-spacing: 0.1em;
  color: #3a3a3a;
  z-index: 3;
}

/* Bottom screen label */
body.gameboy-active .hw-gb-screen-label {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Times New Roman', serif;
  font-style: italic;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #2a2a4a;
  white-space: nowrap;
  z-index: 3;
}

/* ---- Bottom hardware pad ---- */
body.gameboy-active .hw-gb-controls {
  position: absolute;
  bottom: 60px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

/* D-pad: two perpendicular bars + center */
body.gameboy-active .hw-gb-dpad {
  position: relative;
  width: 72px;
  height: 72px;
}
body.gameboy-active .hw-gb-dpad-h,
body.gameboy-active .hw-gb-dpad-v {
  position: absolute;
  background: linear-gradient(180deg, #2a2a2a 0%, #141414 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 1px #505050,
    inset 0 -1px 1px #000,
    0 3px 0 #606060;
}
body.gameboy-active .hw-gb-dpad-h {
  top: 26px; left: 0;
  width: 72px; height: 20px;
}
body.gameboy-active .hw-gb-dpad-v {
  top: 0; left: 26px;
  width: 20px; height: 72px;
}
body.gameboy-active .hw-gb-dpad-center {
  position: absolute;
  top: 30px; left: 30px;
  width: 12px; height: 12px;
  background: #0a0a0a;
  border-radius: 50%;
  z-index: 3;
}

/* A/B buttons */
body.gameboy-active .hw-gb-ab {
  display: flex;
  gap: 14px;
  transform: rotate(-25deg);
  transform-origin: center;
}
body.gameboy-active .hw-gb-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d85a9a 0%, #9a2a6a 70%, #5a0a4a 100%);
  box-shadow:
    inset 0 2px 2px #ff9ac8,
    inset 0 -2px 2px #3a0a2a,
    0 3px 0 #4a0a3a,
    0 6px 8px #00000040;
  display: grid;
  place-items: center;
  color: #2a2a4a;
  font-family: 'Georgia', serif;
  font-style: italic;
  font-weight: bold;
  font-size: 11px;
  position: relative;
}
body.gameboy-active .hw-gb-btn em {
  position: absolute;
  top: 50px;
  font-style: italic;
  color: #2a2a4a;
  font-size: 11px;
  left: 50%;
  transform: translateX(-50%) rotate(25deg);
}

/* Start/Select pills */
body.gameboy-active .hw-gb-startsel {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) rotate(-25deg);
  display: flex;
  gap: 18px;
  pointer-events: none;
}
body.gameboy-active .hw-gb-pill {
  width: 28px;
  height: 8px;
  background: linear-gradient(180deg, #5a5a5a, #2a2a2a);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 #808080, 0 2px 0 #1a1a1a;
  position: relative;
}
body.gameboy-active .hw-gb-pill em {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Times New Roman', serif;
  font-size: 7px;
  letter-spacing: 0.1em;
  font-style: italic;
  color: #2a2a4a;
  white-space: nowrap;
}

/* Speaker grille (diagonal lines, bottom-right) */
body.gameboy-active .hw-gb-speaker {
  position: absolute;
  bottom: 18px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: rotate(-25deg);
  transform-origin: bottom right;
  pointer-events: none;
}
body.gameboy-active .hw-gb-speaker span {
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(180deg, #4a4a4a, #1a1a1a);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 #00000080;
}

/* Phones label on left edge */
body.gameboy-active .hw-gb-headphone {
  position: absolute;
  bottom: 30px;
  left: 14px;
  font-family: 'Times New Roman', serif;
  font-size: 7px;
  letter-spacing: 0.1em;
  color: #3a3a3a;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ---- Real controls stay, restyled to live inside the case ---- */

body.gameboy-active #player.has-hardware .controls-section,
body.gameboy-active #player.has-hardware .feature-bar,
body.gameboy-active #player.has-hardware .transport-row,
body.gameboy-active #player.has-hardware .slider-row {
  background: transparent;
}

body.gameboy-active #player.has-hardware .title-bar {
  background: linear-gradient(180deg, #c0c0c0, #a8a8a8);
  border-bottom: 1px solid #6a6a6a;
  color: #2a2a4a;
}
body.gameboy-active #player.has-hardware .title-bar-text,
body.gameboy-active #player.has-hardware .title-bar-logo,
body.gameboy-active #player.has-hardware .title-bar-version {
  color: #2a2a4a;
  font-family: 'Georgia', serif;
  font-style: italic;
}

/* Visualizer frame blends in */
body.gameboy-active #player.has-hardware .viz-container {
  background: #8b8b6b;
  border: 2px solid #306230;
  border-radius: 3px;
}

/* Mobile: reduce bottom hardware pad so it still fits */
@media (max-width: 560px) {
  body.gameboy-active #player.has-hardware {
    padding: 36px 14px 200px;
    border-radius: 10px 10px 12px 50px;
  }
  body.gameboy-active .hw-gb-controls {
    bottom: 54px;
    left: 14px;
    right: 14px;
  }
  body.gameboy-active .hw-gb-dpad { width: 60px; height: 60px; }
  body.gameboy-active .hw-gb-dpad-h { top: 22px; width: 60px; height: 16px; }
  body.gameboy-active .hw-gb-dpad-v { left: 22px; width: 16px; height: 60px; }
  body.gameboy-active .hw-gb-dpad-center { top: 24px; left: 24px; }
  body.gameboy-active .hw-gb-btn { width: 36px; height: 36px; font-size: 10px; }
}