/* ==========================================================================
   MONKEY ENTERTAINMENT SYSTEM (MES) — shared theme
   8-bit home-console look: grey plastic chassis around an inset black CRT.
   NES-red accents, Press Start 2P. Used by every screen and game.

   Order: @import → tokens → reset → console chrome → screen + CRT
          → shared components (components.css) → responsive → reduced-motion
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import "components.css";

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* MES palette (matches the flow mockups) */
  --c-text:   #e8e8e0;
  --c-dim:    #6f6f72;
  --c-red:    #e60012;
  --c-green:  #21c95a;
  --c-cyan:   #4cc9ff;
  --c-amber:  #ffcc00;
  --c-screen: #07070a;

  /* console plastic shell */
  --c-shell:    #d6d6ce;
  --c-shell-hi: #e9e9e1;
  --c-shell-lo: #b3b3a8;
  --c-shell-edge: #7f7b70;
  --c-bezel:    #16161b;

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 18px;
  --sp-5: 28px;
  --sp-6: 44px;

  /* base pixel font size — everything scales off this */
  --px: clamp(7px, 1.4vw, 12px);

  --radius-shell:  14px;
  --radius-screen: 9px;

  --font: "Press Start 2P", monospace;
}

/* ---------------------------------------------------------------- reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; width: 100%; }

body {
  font-family: var(--font);
  background: #1c1c1f;
  color: var(--c-text);
  font-size: var(--px);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.6vmin, 16px);
  overflow: hidden;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: none;
}

/* ----------------------------------------------------- console chrome ---- */
/* The grey plastic shell. `.mes-console` is the canonical class; `.console`
   is kept because every flow mockup uses it. */
.mes-console,
.console {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg,
    var(--c-shell-hi) 0%, var(--c-shell) 42%, var(--c-shell-lo) 100%);
  border-radius: var(--radius-shell);
  border: 2px solid var(--c-shell-edge);
  padding: 3%;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1.1vmin, 11px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 14px 30px rgba(0,0,0,.55);
  position: relative;
}

/* top/bottom plastic strips: brand plate, speaker, power LED / vents, eject.
   `.strip` (mockups) + `.mes-top`/`.mes-bottom` (canonical) + `.bar`. */
.mes-top, .mes-bottom,
.strip, .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.4vw, 14px);
  flex: 0 0 auto;
  font-size: calc(var(--px) * .82);
}
.bar .l, .bar .r { display: flex; align-items: center; gap: clamp(5px, 1.1vw, 10px); }

/* red MES badge + model label */
.badge, .badge-wrap { display: flex; align-items: center; gap: clamp(5px, 1vw, 9px); }
.mes, .badge .mes {
  background: var(--c-red);
  color: #fff;
  padding: .5em .7em;
  border-radius: 3px;
  letter-spacing: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 3px rgba(0,0,0,.4);
}
.model { color: #55554e; letter-spacing: 1px; font-size: calc(var(--px) * .8); }

/* speaker slots */
.speaker { display: flex; gap: clamp(3px, .6vw, 6px); flex: 0 1 auto; justify-content: center; }
.speaker span, .speaker i {
  display: block;
  width: clamp(2px, .45vw, 4px);
  height: clamp(10px, 2.1vmin, 18px);
  background: linear-gradient(#9a9a90, #76766c);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 1px rgba(0,0,0,.3);
}

/* power LED */
.power { display: flex; align-items: center; gap: clamp(5px, 1vw, 9px); color: #55554e; letter-spacing: 1px; }
.led {
  width: clamp(7px, 1.5vmin, 11px);
  height: clamp(7px, 1.5vmin, 11px);
  border-radius: 50%;
  background: var(--c-red);
  box-shadow: 0 0 6px 1px rgba(230,0,18,.9), 0 0 12px 3px rgba(230,0,18,.45);
  animation: led-pulse 2.4s ease-in-out infinite;
}
@keyframes led-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* bottom strip details */
.vents { display: flex; align-items: center; gap: clamp(3px, .5vw, 5px); }
.vents span {
  width: clamp(8px, 1.6vw, 16px);
  height: clamp(3px, .6vh, 5px);
  background: #9a9a90;
  border-radius: 2px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
}
.brand, .footer-label { color: #4a4a50; letter-spacing: 1px; font-size: calc(var(--px) * .82); white-space: nowrap; }

.mes-eject, .eject {
  font-family: inherit;
  font-size: calc(var(--px) * .82);
  color: #3a3a40;
  letter-spacing: 1px;
  background: linear-gradient(180deg, var(--c-shell-hi), var(--c-shell-lo));
  padding: .55em .8em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 2px 3px rgba(0,0,0,.3);
}
.mes-eject:active, .eject:active { transform: translateY(1px); }

/* ---------------------------------------------------- screen + CRT ------- */
/* dark bezel framing the inset black CRT. `.mes-screen` is canonical; the
   mockups frame it with `.screen-bezel`/`.screen-wrap`/`.screen-frame`. */
.mes-screen,
.screen-bezel, .screen-wrap, .screen-frame {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--c-bezel);
  border-radius: 12px;
  padding: clamp(7px, 1.4vmin, 12px);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.9),
    inset 0 -1px 0 rgba(255,255,255,.2),
    0 1px 0 rgba(255,255,255,.35);
}

/* the lit CRT surface itself */
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 130% at 50% 40%,
    #0c0c12 0%, var(--c-screen) 70%, #030305 100%);
  border-radius: var(--radius-screen);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--c-text);
  box-shadow: 0 0 30px rgba(0,0,0,.7) inset;
}

/* CRT overlays scoped to the screen ONLY. Screens render explicit
   <div class="crt-scanlines"> / <div class="crt-vignette"> inside .screen. */
.crt-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.28) 3px,
    rgba(0,0,0,.28) 3px);
}
.crt-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  background: radial-gradient(125% 125% at 50% 50%,
    rgba(0,0,0,0) 55%, rgba(0,0,0,.7) 100%);
}
/* looping scan sweep + occasional flicker */
.crt-flicker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: rgba(76,201,255,.02);
  animation: crt-flick 6s steps(2) infinite;
}
@keyframes crt-flick { 0%,97% { opacity: 0; } 98% { opacity: 1; } 100% { opacity: 0; } }

.sweep {
  position: absolute;
  left: 0; right: 0;
  height: 14%;
  top: -15%;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(76,201,255,0) 0%, rgba(76,201,255,.07) 50%, rgba(76,201,255,0) 100%);
  animation: crt-sweep 4.5s linear infinite;
}
@keyframes crt-sweep { 0% { top: -15%; } 100% { top: 115%; } }

/* fallback: mockups that paint scanlines via ::after still work, but the
   real screens use the explicit overlay divs above. */
.screen-inner, .scr-content, .scr-in {
  position: relative;
  z-index: 10;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------- game host ------- */
/* In-game layout: a HUD strip with the playfield filling the rest above it.
   Column (not row) so square boards/canvas centre instead of being squeezed
   beside the HUD. */
.game-host {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.game-area {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2%, 18px);
  overflow: hidden;
}
.game-area canvas {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}

/* ----------------------------------------------------- utilities --------- */
.hidden { display: none !important; }

.blink { animation: mes-blink 1.05s steps(1, end) infinite; }
@keyframes mes-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ----------------------------------------------------- responsive -------- */
@media (max-width: 640px) {
  .mes-console, .console { padding: clamp(6px, 2.5%, 12px); }
  .game-host { flex-direction: column; }
}

@media (max-width: 560px) {
  /* layouts that sit side-by-side relax to a stack on small screens */
  .conn-main { flex-direction: column; gap: clamp(10px, 3vw, 20px); }
}

@media (max-width: 600px) {
  .hud { flex-wrap: wrap; gap: 6px; justify-content: center; }
  .scorebox { flex-direction: column; gap: 14px; }
  .actions { flex-direction: column; width: 100%; }
  .actions .btn { width: 100%; }
}

@media (max-width: 620px) {
  .cols { grid-template-columns: 1fr; }
}

/* ----------------------------------------------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .led, .crt-flicker, .sweep, .blink,
  .boot-logo, .boot-start, .start, .nb, .go-title,
  .tile.sel, .cat.on .mark, .pill.on, .pill.live::before,
  .slot.active, .play-btn {
    animation: none !important;
  }
  .blink, .start, .boot-start { opacity: 1; }
}