:root {
  --room: #121016;
  --room-glow: #2a1f3a;
  --ink: #d9d3c7;
  --muted: #8d8699;
  --neon: #ff4fa3;
  --neon-2: #4fd8ff;
  --console: #cfc9bd;
  --console-dark: #8f897d;
  --console-deep: #3a3833;
  --cart-w: 176px;
  --cart-h: 196px;
  --row-gap: 28px;
  --board: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, var(--room-glow), transparent 70%),
    var(--room);
  color: var(--ink);
  font-family: "VT323", ui-monospace, Menlo, monospace;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 32px;
  overflow-x: hidden;
}

/* ---------- Marquee ---------- */
.marquee { text-align: center; margin-bottom: 20px; }
.marquee h1 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(28px, 7vw, 56px);
  letter-spacing: .12em;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 6px var(--neon), 0 0 18px var(--neon), 4px 4px 0 #5a1840;
}
.marquee p { margin: 10px 0 0; color: var(--muted); }

/* ---------- TV + console ----------
   No transforms / opacity / z-index on .stage or .console: the flying cartridge is
   position:fixed on <body> and must interleave between .console-rear and .console-front. */
.stage { display: flex; flex-direction: column; align-items: center; }

.tv {
  /* Shrink on short viewports so the shelf stays in view. */
  width: clamp(260px, calc((100dvh - 500px) * 1.33 + 82px), min(92vw, 440px));
  background: linear-gradient(#3b3530, #241f1b);
  border-radius: 18px;
  padding: 18px 64px 18px 18px;
  position: relative;
  box-shadow: 0 20px 40px -18px #000, inset 0 2px 0 #574e46;
}
.tv-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0b1410;
  border-radius: 14px / 18px;
  overflow: hidden;
  box-shadow: inset 0 0 30px #000, 0 0 0 4px #15120f;
}
.tv-screen::before { /* glass glare, visible while the set is off */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 60% 40% at 30% 22%, rgba(255,255,255,.07), transparent 70%);
}
.tv-picture { position: absolute; inset: 0; visibility: hidden; }
/* Screensaver rain, shown for a moment after a minute with nothing plugged in. */
.tv-rain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.tv-rain.on { opacity: 1; transition-duration: .15s; }
.tv-screen.on .tv-picture { visibility: visible; }
.tv-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.25) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55));
}
.tv-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; text-align: center;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(9px, 2.6vw, 13px);
  line-height: 1.6;
  color: #7dff9b;
  text-shadow: 0 0 6px rgba(125,255,155,.6);
}
.tv-text .big { font-size: clamp(12px, 3.6vw, 18px); color: #fff; }
.tv-text .small { font-family: "VT323", monospace; font-size: clamp(16px, 4vw, 22px); color: #b9f5c8; }
.tv-static {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='120'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 120px;
}
.tv-static.on { opacity: .9; animation: static .12s steps(3) infinite; }
@keyframes static {
  0% { background-position: 0 0; } 33% { background-position: -40px 30px; }
  66% { background-position: 50px -20px; } 100% { background-position: -10px 60px; }
}
.tv-knobs {
  position: absolute; right: 18px; top: 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.tv-knobs i {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8a8077, #2a2521);
  box-shadow: 0 2px 0 #120f0d;
}
.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.console {
  position: relative;
  width: min(92vw, 400px);
  margin-top: -6px;
}
.console-rear {
  position: relative; z-index: 10;
  height: 26px;
  background: linear-gradient(var(--console-dark), var(--console));
  border-radius: 10px 10px 0 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.slot {
  width: calc(var(--cart-w) + 12px); max-width: 80%;
  height: 10px; margin-bottom: 2px;
  background: var(--console-deep);
  border-radius: 3px;
  box-shadow: inset 0 3px 3px #000;
}
/* Dust lid over the slot, hinged at the back edge (the top of .console-rear).
   Seen from the front, a lid lying flat is a short strip; standing up it's taller
   and shows its underside. arcade.js swings it with scaleY through 0. */
.lid {
  position: absolute; inset: 0;
  transform-origin: 50% 0;
  border-radius: 10px 10px 3px 3px;
  overflow: hidden;
}
.lid-face { position: absolute; inset: 0; }
.lid-outer {
  background: linear-gradient(#e4ded2, #bdb7aa);
  box-shadow: inset 0 -2px 0 #9a9488, inset 0 1px 0 #f3eee4;
}
.lid-outer::after { /* finger grip */
  content: ""; position: absolute; left: 50%; bottom: 5px;
  width: 44px; height: 4px; margin-left: -22px;
  border-radius: 2px; background: #9a9488; box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
}
.lid-inner {
  visibility: hidden;
  background:
    linear-gradient(rgba(0,0,0,.35), transparent 60%),
    repeating-linear-gradient(90deg, #4d4943 0 12px, #5a564e 12px 14px);
}
.lid.open .lid-outer { visibility: hidden; }
.lid.open .lid-inner { visibility: visible; }

.console-front {
  position: relative; z-index: 30;
  height: 96px;
  background: linear-gradient(var(--console), #b3ad9f);
  border-radius: 6px 6px 16px 16px;
  box-shadow: 0 22px 40px -16px #000, inset 0 2px 0 #eee8dc;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  padding: 0 22px;
}
.brand {
  font-family: "Press Start 2P", monospace; font-size: clamp(7px, 2.3vw, 11px);
  color: #6b1f3f; letter-spacing: .08em; white-space: nowrap;
}
.power { display: flex; align-items: center; gap: 12px; }
.power-btn {
  font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: .06em;
  color: #e9e4da;
  background: linear-gradient(#5b5750, #3e3b36);
  border: 0; border-radius: 4px;
  padding: 10px 12px 9px;
  box-shadow: 0 4px 0 #26241f, inset 0 1px 0 rgba(255,255,255,.18);
  cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.power-btn:active, .power-btn.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #26241f, inset 0 1px 0 rgba(255,255,255,.1); }
.power-btn:focus-visible { outline: 2px solid var(--neon-2); outline-offset: 3px; }
.power-btn.ready { animation: ready 1.2s ease-in-out infinite; }
@keyframes ready {
  50% { box-shadow: 0 4px 0 #26241f, inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 3px rgba(255,79,163,.45), 0 0 18px rgba(255,79,163,.5); }
}
.led {
  width: 10px; height: 10px; border-radius: 50%;
  background: #4a1212; box-shadow: inset 0 1px 1px #000;
  transition: background .1s, box-shadow .1s;
}
.led.on { background: #ff2e2e; box-shadow: 0 0 8px #ff2e2e, 0 0 16px #ff2e2e; }
.vents {
  grid-column: 1 / -1; height: 14px; align-self: start;
  background: repeating-linear-gradient(90deg, #8f897d 0 22px, transparent 22px 30px);
  border-radius: 3px; opacity: .6;
}

/* ---------- Shelf + cartridges ---------- */
.shelf { width: min(100%, 1000px); margin-top: 48px; }
.carts {
  list-style: none; margin: 0; padding: 0 8px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: var(--row-gap) 24px;
  /* A plank under every wrapped row; the last row rests on .shelf-board. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 var(--cart-h),
    #6b4a2f var(--cart-h),
    #3d2918 calc(var(--cart-h) + var(--board)),
    transparent calc(var(--cart-h) + var(--board)) calc(var(--cart-h) + var(--row-gap))
  );
}
.shelf-board {
  height: var(--board); margin-top: 0;
  background: linear-gradient(#6b4a2f, #3d2918);
  border-radius: 4px;
  box-shadow: 0 16px 24px -12px #000;
}

.cart {
  --shell: #5b5f6b;
  --label-a: #fff; --label-b: #ccc;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: var(--cart-w); height: var(--cart-h);
  padding: 30px 14px 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 18%, transparent 82%, rgba(0,0,0,.25)),
    var(--shell);
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 22px), calc(100% - 12px) calc(100% - 22px), calc(100% - 12px) 100%,
    12px 100%, 12px calc(100% - 22px), 0 calc(100% - 22px),
    0 8px
  );
  color: inherit; text-decoration: none; cursor: pointer;
  transition: transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.cart:hover, .cart:focus-visible { transform: translateY(-14px) rotate(-1.5deg); }
.cart:focus-visible { outline: none; }
li:has(.cart:focus-visible) { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 8px var(--neon-2)); }
.cart-ridges {
  position: absolute; top: 8px; left: 18px; right: 18px; height: 14px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 3px, transparent 3px 7px);
}
.cart-label {
  width: 100%; height: 132px;
  background: linear-gradient(var(--label-a), var(--label-b));
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 1px 0 rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 8px 8px; gap: 6px;
  overflow: hidden;
}
.cart-art {
  width: 60px; height: 60px;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.3));
}
.cart-title {
  font-family: "Press Start 2P", monospace; font-size: 10px; line-height: 1.3;
  text-align: center; color: #111;
  text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}
.cart-tagline {
  font-size: 15px; line-height: 1; text-align: center; color: rgba(0,0,0,.72);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* The copy that flies into the console. */
.cart.flying {
  position: fixed; margin: 0; z-index: 50;
  transition: none; pointer-events: none;
  transform-origin: 0 0;
}
.cart.flying.low { z-index: 20; } /* above .console-rear, below .console-front */
/* A cartridge sitting in the slot. Lives inside .console; click it to eject. */
.cart.seated {
  position: absolute; margin: 0; z-index: 20;
  transition: none; transform-origin: 0 0;
}
.cart.seated:hover, .cart.seated:focus-visible { transform: scale(var(--s)) translateY(-6px); }

/* Full-page power-on flash before handing the page to the game. */
.warp {
  position: fixed; z-index: 100; background: #000; pointer-events: none;
}

.fine { margin-top: 28px; color: var(--muted); font-size: 16px; text-align: center; }
.fine p { margin: 0 0 10px; }
.coffee {
  display: inline-block;
  color: var(--ink); text-decoration: none;
  border: 1px solid #3c3547; border-radius: 4px;
  padding: 6px 12px 4px;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.coffee:hover, .coffee:focus-visible {
  color: #fff; border-color: var(--neon);
  box-shadow: 0 0 10px rgba(255,79,163,.45);
  outline: none;
}

@media (max-width: 520px) {
  :root { --cart-w: 150px; --cart-h: 190px; --row-gap: 24px; }
  .cart-label { height: 134px; }
  .cart-art { width: 48px; height: 48px; }
  .cart-title { font-size: 8px; }
  .cart-tagline { font-size: 14px; }
  .carts { column-gap: 12px; }
  .tv { padding-right: 52px; }
  .tv-knobs i { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart:not(.seated), .cart:not(.seated):hover, .cart:not(.seated):focus-visible { transition: none; transform: none; }
  .cart.seated:hover, .cart.seated:focus-visible { transform: scale(var(--s)); }
  .blink, .power-btn.ready { animation: none; }
}