/* RetroSite. Two wrappers around one game screen:
   - Desktop: an arcade cabinet on a fixed 1420 x 896 stage scaled to fit the window (cabinet 1216 wide, lever to its right).
     The screen hole is 840 x 472 at (170, 166); the 960 x 540 screen is shown inside it at 0.875.
     Cabinet art pixels are 2 CSS px; art inside the screen uses 1 px pixels. Controls sit in the cabinet's sockets.
   - Phones and tablets: a handheld console. Its art is a border-image, so the controls sit in the bottom border and the
     screen (540 px wide, any height) fills the middle. The skin can be hidden; the screen then fills the window.
   Palette and font are locked to style shoot B and Silkscreen. */
@font-face { font-family: "Silkscreen"; src: url(../fonts/silkscreen-400.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Silkscreen"; src: url(../fonts/silkscreen-700.woff2) format("woff2"); font-weight: 700; font-display: block; }

:root {
  --ink: #f4f1ff;
  --dim: #9aa6d8;
  --navy: #141a3a;
  --deep: #0b0f24;
  --sky: #6cc4ff;
  --gold: #ffd23f;
  --red: #ff4a4a;
  --green: #5be37d;
  --font: "Silkscreen", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: #120e26; color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Arcade hall behind the cabinet (ComfyUI art), dimmed so the cabinet stands out. */
#app::before { content: ""; position: absolute; inset: 0; background: url(../art/arcade-bg.png) center / cover no-repeat; image-rendering: pixelated; filter: brightness(0.45) saturate(0.85); }
img { image-rendering: pixelated; -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* manipulation: no double-tap zoom, but lists can still scroll. The handheld pads block all gestures themselves. */
#app { position: fixed; inset: 0; touch-action: manipulation; }

/* ---------- Corner controls (outside the cabinet) ---------- */
.corner { position: fixed; top: 10px; right: 12px; display: flex; gap: 8px; z-index: 10; }
.corner button { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; background: #0008; border: 2px solid #ffffff22; font-size: 12px; }
.corner img { width: 32px; height: 32px; image-rendering: pixelated; }
.corner button[hidden] { display: none; }

/* ---------- Desktop cabinet ---------- */
#cabinet { position: absolute; left: 0; top: 0; width: 1300px; height: 896px; transform-origin: 0 0; display: none; }
.cab #cabinet { display: block; }
#cabinet .body { position: absolute; left: 0; top: -256px; width: 1216px; height: 1152px; z-index: 2; pointer-events: none; }
#slot-cab { position: absolute; left: 170px; top: 166px; width: 840px; height: 472px; overflow: hidden; z-index: 1; background: #05060d; }
.marquee { position: absolute; left: 112px; top: 16px; width: 956px; height: 110px; z-index: 3; display: grid; place-items: center; pointer-events: none; } /* the name sits on the cabinet art's own lit marquee */
.marquee b { font: 700 48px/1 var(--font); color: #fff; letter-spacing: 4px; text-shadow: -3px 0 #1a0f2e, 3px 0 #1a0f2e, 0 -3px #1a0f2e, 0 3px #1a0f2e, 6px 6px 0 #c2185b, 0 0 24px #fff8; }
.ctl { position: absolute; z-index: 4; pointer-events: none; transform-origin: 50% 100%; }
.ctl img { display: block; }
.ctl .lbl { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; white-space: nowrap; font: 700 16px/1 var(--font); color: #fff; text-shadow: 2px 2px 0 #000; }
.ctl .lbl i { font-style: normal; color: var(--gold); }
/* Joystick: frames from a sprite sheet (joy-n/l/r/u/d), swapped by app.js, so the base and shadow never move. */


.btnc img { transition: transform 0.05s steps(1), filter 0.05s steps(1); }
#btn-b .lbl { top: auto; bottom: 100%; margin: 0 0 6px; }
.btnc.down img { transform: translateY(8px); filter: brightness(0.45) saturate(0.85); }
/* Mode switch: play controls spin down into the panel, category buttons pop up. */
.cat-btn { pointer-events: auto; cursor: pointer; transform: scaleY(0) translateY(40px); opacity: 0; }
.cab.select-mode .play-ctl { animation: spin-down 0.45s steps(9) forwards; }
.cab.select-mode .cat-btn { animation: pop-up 0.45s steps(9) 0.3s forwards; }
.cab.select-exit .play-ctl { animation: spin-down 0.45s steps(9) 0.3s reverse backwards; }
.cab.select-exit .cat-btn { animation: pop-up 0.45s steps(9) reverse forwards; }
@keyframes spin-down { 0% { transform: none; opacity: 1; } 60% { transform: rotateY(360deg) translateY(10px) scaleY(0.6); opacity: 1; } 100% { transform: rotateY(540deg) translateY(50px) scaleY(0); opacity: 0; } }
@keyframes pop-up { 0% { transform: scaleY(0) translateY(40px); opacity: 0; } 70% { transform: scaleY(1.2) translateY(-6px); opacity: 1; } 100% { transform: none; opacity: 1; } }
.cat-btn.on img { filter: brightness(1.25) drop-shadow(0 0 10px #fff8); }
.cat-btn.on .lbl { color: var(--gold); }

/* Coin lever: the only clickable part of the cabinet. */
#lever { position: absolute; z-index: 5; }
#lever .arm { position: absolute; transform-origin: 50% 100%; z-index: 0; }
#lever.pull .arm { animation: pull 0.7s steps(7); }
@keyframes pull { 0% { transform: none; } 40% { transform: rotate(30deg); } 65% { transform: rotate(30deg); } 100% { transform: none; } }
#lever .base { position: absolute; z-index: 1; }
#lever .sign { position: absolute; z-index: 1; }
#lever .sign-txt { position: absolute; z-index: 2; display: grid; place-content: center; text-align: center; white-space: nowrap; font: 700 22px/1.15 var(--font); color: #fff; text-shadow: 2px 2px 0 #7a0000; animation: blink 0.8s steps(1) infinite; }
#lever .bulb { position: absolute; z-index: 2; transform: translate(-50%, -50%); animation: bulb 0.9s steps(1) infinite; }
@keyframes bulb { 0%, 49% { filter: brightness(1.25) drop-shadow(0 0 6px #ffd23f); } 50%, 100% { filter: brightness(0.35); } }
#lever:hover .sign-txt, #lever:focus-visible .sign-txt { color: var(--gold); }
.coin-drop { position: absolute; z-index: 6; pointer-events: none; animation: coin-drop 0.6s steps(8) forwards; }
@keyframes coin-drop { 0% { transform: translateY(-160px) rotateY(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(0) rotateY(720deg); opacity: 0; } }

/* ---------- Handheld (phones and tablets) ---------- */
#handheld { position: absolute; left: 0; right: 0; bottom: 0; display: none; }
.hand #handheld { display: block; }
#handheld .frame { position: absolute; inset: 0; border-style: solid; border-image-source: url(../art/handheld.png); border-image-repeat: stretch; image-rendering: pixelated; }
#slot-hand { position: absolute; overflow: hidden; background: #05060d; }
/* The pad layer spans the console but must not block taps on the screen: only its buttons take input. */
#handheld .pads { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
#handheld .pads button { position: absolute; border-radius: 50%; touch-action: none; pointer-events: auto; }
#handheld .pads button.down { background: #0004; }
#handheld .pads .pill { border-radius: 0; }
#handheld .pads .plbl { position: absolute; transform: translate(-50%, 0); padding: 2px 5px; white-space: nowrap; pointer-events: none; font: 700 11px/1 var(--font); color: #fff; background: #0b0f24d9; border: 1px solid #ffffff33; }
*, *::before, *::after { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
#handheld .pads .pill img { width: 100%; height: 100%; opacity: 0; } /* the skins draw their own ME buttons */
.hand.skin-off #handheld .frame, .hand.skin-off #handheld .pads { display: none; }
.rotate { display: none; position: fixed; inset: 0; z-index: 20; place-items: center; text-align: center; padding: 24px; background: var(--deep); font-size: 20px; line-height: 1.5; }
@media (orientation: landscape) and (hover: none) { .hand .rotate { display: grid; } }

/* ---------- Screen ---------- */
#screen { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; background: #05060d; font: 400 16px/1.25 var(--font); }
#screen.wide { width: 960px; height: 540px; }
#screen.tall { width: 540px; }
.view { position: absolute; inset: 0; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hint { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 24px; font-size: 16px; color: var(--dim); text-shadow: 2px 2px 0 #000; }
.hint b { color: var(--gold); font-weight: 400; }
.panel { border: 12px solid; border-image: url(../art/frame.png) 12 stretch; image-rendering: pixelated; background: var(--navy); background-clip: padding-box; }
.panel.on { border-image-source: url(../art/frame-hi.png); }

/* CRT power-on: a bright line opens into the picture. */
.crt-on { animation: crt-on 0.55s steps(10) backwards; }
@keyframes crt-on { 0% { clip-path: inset(50% 50%); filter: brightness(4); } 30% { clip-path: inset(49.5% 0); filter: brightness(4); } 100% { clip-path: inset(0 0); filter: none; } }
.wipe-in { animation: wipe 0.3s steps(6) backwards; }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* Boot */
.boot-off { display: grid; place-items: center; background: radial-gradient(ellipse at 40% 30%, #1b2140, #05060d 70%); }
.boot-off p { margin: 0; font-size: 24px; color: #6f7bb8; text-align: center; line-height: 1.6; }
.boot-off .credits { font-size: 48px; color: var(--green); text-shadow: 0 0 12px #5be37d88; }
.boot-title img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.boot-title .logo { position: absolute; left: 0; right: 0; top: 18%; text-align: center; }
.logo h1 { margin: 0; font: 700 48px/1.1 var(--font); color: #fff; text-shadow: 4px 4px 0 #c2185b, 8px 8px 0 #2a0b3a; letter-spacing: 2px; }
.logo p { margin: 12px 0 0; font-size: 16px; color: #fff; text-shadow: 2px 2px 0 #000; }
.boot-title .start { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font-size: 32px; color: #fff; text-shadow: 3px 3px 0 #000; }
.tall .logo h1 { font-size: 40px; }

/* Main menu */
.menu .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.9); }
.menu .logo { position: absolute; left: 0; right: 0; top: 28px; text-align: center; }
.menu .logo h1 { font-size: 40px; }
.menu .big { position: absolute; left: 80px; right: 80px; top: 150px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.opt { position: relative; display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center; }
.opt.big-opt { height: 230px; }
.opt img { display: block; }
.opt b { font: 700 32px/1 var(--font); }
.opt span { font-size: 16px; color: var(--dim); }
.opt.on b { color: var(--gold); }
.menu .small { position: absolute; left: 0; right: 0; top: 410px; display: flex; justify-content: center; gap: 64px; }
.opt.small-opt { display: flex; align-items: center; gap: 12px; padding: 0 8px; font: 700 24px/1 var(--font); }
.opt.small-opt img { width: 48px; height: auto; }
.opt.small-opt.on { color: var(--gold); }
.cursor { position: absolute; width: 32px; pointer-events: none; animation: bob 0.5s steps(2) infinite; z-index: 2; }
@keyframes bob { 50% { transform: translateY(-4px); } }
/* Phones: the 540 px wide screen is shown at about half size, so type runs larger. */
.tall { font-size: 24px; }
.tall .hint { font-size: 24px; bottom: 20px; }
.tall .logo h1 { font-size: 48px; }
.tall .logo p { font-size: 24px; }
.tall .menu .logo { top: 48px; }
.tall .menu .big { left: 32px; right: 32px; top: 240px; grid-template-columns: 1fr; gap: 32px; }
.tall .opt.big-opt { height: 300px; }
.tall .opt b { font-size: 40px; }
.tall .opt span { font-size: 24px; }
.tall .menu .small { top: auto; bottom: 110px; gap: 48px; }
.tall .opt.small-opt { font-size: 32px; }
.tall .opt.small-opt img { width: 64px; }
.tall .cursor { width: 48px; }
.tall .stub .panel { font-size: 32px; }
.tall .boot-title .start { font-size: 48px; }

/* Placeholder screens for parts not built yet */
.stub { display: grid; place-items: center; background: var(--deep); }
.stub .panel { padding: 24px 32px; max-width: 80%; text-align: center; font-size: 24px; line-height: 1.5; }
.stub .panel b { display: block; color: var(--gold); margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .crt-on, .wipe-in, .cursor, .blink, #lever .bulb, #lever .sign-txt { animation: none !important; }
}

/* Attract screen (before the coin): the town pans, the logo drops in and bobs, the player walks across. */
.attract { background: #0b0f24; overflow: hidden; }
.attract .pan { position: absolute; inset: 0; background: url(../art/title.png) 0 50% / 130% auto no-repeat; image-rendering: pixelated; filter: brightness(0.85); animation: pan 40s steps(240) infinite alternate; }
@keyframes pan { to { background-position: 100% 50%; } }
.attract .hud { position: absolute; top: 12px; left: 24px; right: 24px; display: flex; justify-content: space-between; font-size: 16px; text-shadow: 2px 2px 0 #000; }
.attract .hud .up { color: var(--red); }
.attract .logo { position: absolute; left: 0; right: 0; top: 18%; text-align: center; }
.drop { animation: drop 0.9s steps(9) both; }
.drop h1 { animation: bob 1.6s steps(2) 0.9s infinite; }
@keyframes drop { 0% { transform: translateY(-260px); } 70% { transform: translateY(12px); } 100% { transform: none; } }
.walker { position: absolute; bottom: 52px; width: 48px; height: 146px; animation: walk 16s steps(320) infinite; }
.walker img { position: absolute; inset: 0; width: 100%; height: 100%; }
.walker img:last-child { animation: step 0.5s steps(1) infinite; }
@keyframes walk { from { left: 105%; } to { left: -12%; } }
@keyframes step { 50% { opacity: 0; } }
.attract .prompt { position: absolute; left: 0; right: 0; bottom: 34%; display: grid; gap: 8px; justify-items: center; text-shadow: 3px 3px 0 #000; }
.attract .prompt b { font: 700 32px/1 var(--font); color: #fff; }
.attract .prompt small { font-size: 16px; color: #e8ecff; }
.attract .copy, .attract .credit { position: absolute; bottom: 12px; font-size: 16px; text-shadow: 2px 2px 0 #000; }
.attract .copy { left: 24px; color: var(--dim); } .attract .credit { right: 24px; color: var(--gold); }
.tall .attract .hud, .tall .attract .copy, .tall .attract .credit { font-size: 24px; }
.tall .attract .logo { top: 14%; } .tall .attract .logo h1 { font-size: 40px; }
/* Phones: the town fills the whole (tall) screen and pans sideways across it. */
.tall .attract .pan { background-size: auto 100%; }
.tall .attract .prompt b { font-size: 40px; } .tall .attract .prompt small { font-size: 24px; }
.tall .walker { width: 72px; height: 219px; bottom: 90px; }
@media (prefers-reduced-motion: reduce) { .attract .pan, .drop, .drop h1, .walker, .walker img { animation: none !important; } .walker { left: 70%; } }

/* After the coin: the PULL LEVER sign and its bulbs flicker off. */
#lever.coined .sign, #lever.coined .sign-txt, #lever.coined .bulb { animation: lights-off 0.6s steps(6) forwards; }
@keyframes lights-off { 0%, 30%, 60% { opacity: 1; } 15%, 45%, 100% { opacity: 0; } }
#lever.coined { pointer-events: none; }
/* Arrow keycap icons (ComfyUI) in labels and hints. */
.key { width: 16px; height: 16px; vertical-align: -3px; margin-right: 1px; }
.tall .key { width: 24px; height: 24px; }
.lbl.keys img { width: 28px; height: 28px; margin: 0 1px; }
/* Light trails canvas sits under the views. */
#screen canvas.trails { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#screen canvas.trails[hidden] { display: none; }
/* Controls cast a small hard pixel shadow onto the panel so they read as sitting in their sockets. */
.ctl img { filter: drop-shadow(0 4px 0 #0007); }
/* Button labels (A, B, ME, category names) sit on a dark plate so they read over the printed panel. */
.ctl .lbl { padding: 4px 8px; background: #0b0f24e6; border: 2px solid #ffffff33; box-shadow: 2px 2px 0 #000; }
.btnc.down img { filter: brightness(0.8) drop-shadow(0 1px 0 #0007); }
.cat-btn.on img { filter: brightness(1.25) drop-shadow(0 4px 0 #0007); }

/* Phones: HIDE/SHOW BUTTONS and sound live in a strip above the skin (app.js BAR), never over the art or the UI. */
.hand .corner { left: 0; right: 0; top: 0; height: 44px; padding: 4px 8px; justify-content: flex-end; align-items: center; background: #05060d; border-bottom: 2px solid #ffffff14; }
.hand .corner button { height: 36px; min-width: 36px; }
.hand .corner img { width: 24px; height: 24px; }
/* Phone menu: one column that fits whatever height the skin's screen has. */
.tall .menu { display: flex; flex-direction: column; padding: 28px 28px 16px; gap: 18px; }
.tall .menu .logo, .tall .menu .big, .tall .menu .small, .tall .menu .hint { position: relative; inset: auto; }
.tall .menu .logo h1 { font-size: 44px; }
.tall .menu .big { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 18px; }
.tall .menu .opt.big-opt { height: auto; min-height: 0; overflow: hidden; gap: 8px; container-type: size; align-content: center; }
.tall .menu .opt.big-opt img { width: auto !important; height: min(130px, 42cqh); }
.tall .menu .opt b { font-size: 36px; }
.tall .menu .small { flex: none; justify-content: center; gap: 40px; }
.tall .menu .hint { flex: none; }
/* Desktop: the play controls take the mouse too (A / B / ME press while held, the joystick tilts toward the held side). */
#stick, #btn-a, #btn-b, #btn-me { pointer-events: auto; cursor: pointer; touch-action: none; }
#stick .lbl, .btnc .lbl { pointer-events: none; }
.btnc:hover img { filter: brightness(1.15) drop-shadow(0 4px 0 #0007); }
.no-character #btn-me, .no-character #handheld .pads .pill, .no-character #handheld .pads .plbl[data-for="me"] { visibility: hidden; pointer-events: none; }
.cab.select-mode .play-ctl { pointer-events: none; } /* spun away in Project Select */

/* Landing: two choices before the arcade boots */
#gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; overflow: auto; background: #120e26; }
#gate::before { content: ""; position: absolute; inset: 0; background: url(../art/title.png) center / cover no-repeat; image-rendering: pixelated; filter: brightness(0.3) saturate(0.8); }
#gate[hidden] { display: none; }
.gate-in { position: relative; width: min(820px, 100%); text-align: center; }
#gate h1 { margin: 0; font: 700 clamp(30px, 6vw, 56px)/1 var(--font); color: #fff; letter-spacing: 3px; text-shadow: 4px 4px 0 #c2185b; }
.gate-sub { margin: 10px 0 28px; font: 700 clamp(11px, 1.6vw, 15px)/1.3 var(--font); color: var(--gold); }
.gate-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gate-opt { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 14px 14px 18px; background: #0b0f24e6; border: 4px solid #2a3570; box-shadow: 6px 6px 0 #000; color: #fff; text-decoration: none; cursor: pointer; font-family: var(--font); }
.gate-opt img { width: 100%; aspect-ratio: 16 / 9; max-height: 30vh; object-fit: cover; border: 2px solid #000; }
.gate-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; max-height: 30vh; background: #f2efe6; border: 2px solid #000; }
.gate-pic img { width: auto; height: 40%; aspect-ratio: auto; max-height: none; border: 0; }
.gate-opt b { font: 700 clamp(16px, 2.4vw, 22px)/1.1 var(--font); }
.gate-opt > span:last-child { font: 400 clamp(11px, 1.5vw, 13px)/1.4 var(--font); color: var(--dim); }
/* one highlight only: the selected card (hover and the arrow keys both move the selection) */
.gate-opt.on { border-color: var(--gold); } .gate-opt:focus { outline: none; }
.gate-opt.on b { color: var(--gold); }
.gate-hint { margin: 20px 0 0; font: 700 12px/1 var(--font); color: var(--dim); }
@media (max-width: 640px) and (orientation: portrait) { .gate-opts { grid-template-columns: 1fr; } .gate-hint { display: none; } }
@media (max-height: 500px) { .gate-sub { margin-bottom: 14px; } .gate-opt { padding: 8px; gap: 6px; } .gate-hint { margin-top: 10px; } }