/* Original red-and-white handheld shell. */
body.console-mode {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .96), rgba(245, 239, 237, .72) 38%, transparent 68%),
    linear-gradient(145deg, #d8d1d1, #eee9e6 54%, #cfc8c8);
}

body.console-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .24;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(91, 32, 45, .035) 3px 4px);
}

#console {
  position: relative;
  padding: 40px 30px 24px;
  overflow: visible;
  background: linear-gradient(160deg, #fff 0%, #f4f0ec 58%, #ded8d4 100%);
  border: 2px solid #8f1830;
  border-radius: 24px 24px 48px 24px;
  box-shadow:
    0 24px 64px rgba(63, 22, 31, .28),
    inset 0 2px 0 #fff,
    inset 0 -7px 16px rgba(107, 71, 76, .12);
}

#console::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 28px;
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: #a91f3d;
  box-shadow: 0 8px 0 #d7aeb7;
}

#console-bezel {
  padding: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, #b52443, #7f1429);
  border: 2px solid #641020;
  border-radius: 14px;
  box-shadow: inset 0 2px 8px rgba(78, 7, 25, .38), 0 2px 0 #fff;
}

#console-screen {
  position: relative;
  width: min(76vw, 1120px, calc((100vh - 150px) * 16 / 10));
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f6f5f2;
  border: 2px solid #e8dfe0;
  border-radius: 6px;
}

#console-screen .game-shell { position: absolute; inset: 0; }

#screen-glass {
  position: absolute;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.18) 0%, transparent 24%),
    radial-gradient(ellipse at center, transparent 68%, rgba(79, 22, 36, .08) 100%);
}

#screen-off {
  position: absolute;
  inset: 0;
  z-index: 56;
  pointer-events: none;
  background: #e5e0dc;
}

#screen-off.booting { animation: lcd-flicker .55s steps(4, end) forwards; }
#screen-off.off { opacity: 1; }

@keyframes lcd-flicker {
  0% { opacity: 1; }
  35% { opacity: .72; }
  50% { opacity: .9; }
  70% { opacity: .3; }
  100% { opacity: 0; }
}

#power-indicator {
  position: absolute;
  top: 13px;
  right: 30px;
  z-index: 2;
  min-width: 86px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #7a5960;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em;
  white-space: nowrap;
  user-select: none;
}

#power-led {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 1px solid #914458;
  border-radius: 50%;
  background: #d6bfc4;
  transition: background .12s, box-shadow .12s;
}

#power-led.on {
  background: #d62247;
  box-shadow: 0 0 0 2px rgba(214, 34, 71, .12), 0 0 9px rgba(214, 34, 71, .52);
}

/* The opening card is its own cinematic panel: no handheld chrome or power
   label competes with the centered Juno artwork. */
body.console-mode.intro-active {
  background: #111112;
}

body.intro-active #console {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.intro-active #console::before,
body.intro-active #power-indicator {
  display: none;
}

body.intro-active #console-bezel {
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
}

body.intro-active #console-screen {
  width: min(76vw, 980px, calc((100vh - 32px) * 16 / 10));
  background: #181819;
  border: 0;
  border-radius: 2px;
}

body.intro-active #screen-glass {
  background:
    linear-gradient(115deg, rgba(255,255,255,.025), transparent 24%),
    radial-gradient(ellipse at center, transparent 64%, rgba(0,0,0,.22) 100%);
}

body.intro-active #screen-off { background: #181819; }

@media (max-width: 760px) {
  #console {
    max-width: calc(100vw - 12px);
    padding: 40px 8px 12px;
    border-radius: 18px 18px 32px 18px;
  }
  #console::before { left: 15px; width: 52px; }
  #console-bezel { padding: 7px; border-radius: 10px; }
  #console-screen {
    width: min(calc(100vw - 50px), calc((100vh - 106px) * 3 / 4.6));
    aspect-ratio: 3 / 4.6;
  }
  #power-indicator { top: 12px; right: 14px; min-width: 80px; }
  body.intro-active #console-screen {
    width: min(94vw, calc((100vh - 24px) * 3 / 4.6));
  }
}

@media (max-width: 760px) and (max-height: 500px) {
  #console-screen {
    width: min(calc(100vw - 50px), calc((100vh - 94px) * 16 / 10));
    aspect-ratio: 16 / 10;
  }
}