/* Blue Fire arcade mode: one fixed cabinet (screen + two controls), scaled to fit. */
/* PS2P draws ▲▼▶ oddly: leave U+25A0–25FF to the system font */
@font-face { font-family: 'PS2P'; src: url('../working/fonts/PressStart2P-Regular.ttf') format('truetype'); font-display: block; unicode-range: U+0000-259F, U+2600-FFFF; }
@font-face { font-family: 'NunitoA'; src: url('../working/fonts/Nunito-wght.ttf') format('truetype'); font-weight: 200 900; font-display: block; }
:root {
  --ink: #f4f1e6; --dim: #a9b6d6; --navy: #10183d; --deep: #080d24; --line: #2a3a78;
  --gold: #ffd400; --cyan: #42e7ff; --amber: #ffb542; --pink: #ff73a5; --mint: #a5e7d6;
  --red: #ff5a5a; --good: #7fe0a0; --bezel: #1b2350;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #121a46 0%, #04061a 70%); }
body { position: fixed; inset: 0; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  font-family: NunitoA, system-ui, sans-serif; color: var(--ink); overscroll-behavior: none; }
#cab { position: absolute; left: 50%; top: 50%; width: 380px; height: 690px; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(var(--s, 1)); }
#screen { position: absolute; left: 10px; top: 10px; width: 360px; height: 480px; overflow: hidden; background: var(--deep);
  border: 4px solid var(--bezel); box-shadow: 0 0 0 3px #000, 0 0 0 6px #2f3a7a, 0 0 28px rgba(66, 231, 255, .25), inset 0 0 40px rgba(0,0,0,.6); border-radius: 10px; }
#screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); border-radius: 6px; }
html.jutz-golden-fork #screen { border-color: #ffd54a; box-shadow: 0 0 0 3px #000, 0 0 0 6px #ffd54a, 0 0 30px rgba(255, 190, 40, .55); }
#hud { position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 0 8px; background: #050920; border-bottom: 2px solid var(--line); font: 8px/1 PS2P, monospace; white-space: nowrap; z-index: 2; }
#hud[hidden] { display: none; }
#hud .h { position: relative; display: inline-flex; align-items: center; gap: 3px; transition: color .2s; }
#hud .h b { font-weight: normal; }
#hud .cash b { color: var(--mint); } #hud .ch b { color: var(--amber); } #hud .bo b { color: var(--cyan); } #hud .ab b { color: var(--pink); }
#hud .br b, #hud .roi b { color: var(--gold); } #hud .wa b { color: var(--red); }
#hud .h i { font-style: normal; color: var(--dim); }
#hud .h.up b { color: var(--good) !important; } #hud .h.down b { color: var(--red) !important; }
#hud .fl { position: absolute; top: 12px; left: 0; font: 8px PS2P, monospace; padding: 2px 3px; background: #000c; animation: fl 1.4s ease-out forwards; pointer-events: none; }
#hud .fl.up { color: var(--good); } #hud .fl.down { color: var(--red); }
@keyframes fl { from { transform: translateY(0); opacity: 1; } to { transform: translateY(18px); opacity: 0; } }
#view { position: absolute; left: 0; right: 0; top: 26px; bottom: 18px; overflow: hidden; }
#hud[hidden] + #view { top: 0; }
#keys { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; font: 7px/18px PS2P, monospace; color: #5d6aa0; text-align: center; letter-spacing: 1px; }

/* screens */
.scr { position: absolute; inset: 0; padding: 14px 16px; display: flex; flex-direction: column; animation: pop .16s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.blink { animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } }
.kicker { font: 8px/1.6 PS2P, monospace; color: var(--cyan); letter-spacing: 1px; }
.big { font: 18px/1.35 PS2P, monospace; color: var(--gold); text-shadow: 3px 3px 0 #000; }

/* title card */
.title-card { justify-content: center; align-items: center; text-align: center; gap: 18px; }
.title-card .big { font-size: 17px; max-height: 190px; overflow: hidden; }
.title-card .bar { width: 60%; height: 6px; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 16px); }

/* dialogue line */
.line { justify-content: flex-end; gap: 10px; cursor: pointer; }
.who { display: flex; align-items: center; gap: 10px; }
.face { width: 56px; height: 56px; flex: 0 0 56px; display: grid; place-items: center; font: 14px PS2P, monospace; color: #000;
  border: 3px solid #000; box-shadow: 0 0 0 2px var(--ink); image-rendering: pixelated; overflow: hidden; }
.face img { width: 100%; height: 100%; image-rendering: pixelated; }
.name { font: 11px/1.4 PS2P, monospace; text-shadow: 2px 2px 0 #000; }
.box { position: relative; height: 196px; padding: 12px 14px 22px; background: var(--navy); border: 3px solid var(--ink); box-shadow: 0 0 0 3px #000, 5px 5px 0 #000; }
.box .txt, .measure-line { font: 700 18px/1.42 NunitoA, system-ui, sans-serif; color: var(--ink); }
.box .more { position: absolute; right: 10px; bottom: 6px; font: 10px PS2P, monospace; color: var(--gold); }
.line.reply .box { border-color: var(--cyan); } .line.reply .txt { font-style: italic; }
.line.bad .box { border-color: var(--red); } .line.good .box { border-color: var(--good); } .line.warn .box { border-color: var(--amber); }
.scene-tag { font: 7px/1.5 PS2P, monospace; color: #6c7aa8; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.chip { font: 8px/1 PS2P, monospace; padding: 6px 7px; background: #000; border: 2px solid currentColor; }
.chip.up { color: var(--good); } .chip.down { color: var(--red); } .chip.s-HARD { color: var(--amber); } .chip.s-SMART { color: var(--cyan); }
.chip.s-GUTS { color: var(--pink); } .chip.s-LUCK { color: var(--mint); } .chip.odds { color: var(--gold); } .chip.quiz { color: var(--gold); } .chip.pick { color: var(--good); }

/* choice: exactly one option on screen */
.choice { gap: 8px; }
.prompt, .measure-prompt { font: 800 15px/1.35 NunitoA, system-ui, sans-serif; color: var(--dim); }
.prompt { max-height: 82px; overflow: hidden; }
.arrow { text-align: center; font: 14px/1 PS2P, monospace; color: var(--gold); height: 16px; cursor: pointer; }
.card { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 16px; cursor: pointer;
  background: linear-gradient(180deg, #1a2560, #10183d); border: 4px solid var(--gold); box-shadow: 0 0 0 3px #000, 6px 6px 0 #000; min-height: 0; overflow: hidden; }
.card.picked { border-color: var(--good); }
.card.confirm { border-color: var(--good); background: linear-gradient(180deg, #14402a, #0b2416); }
.card.danger { border-color: var(--red); background: linear-gradient(180deg, #3d1420, #200a10); }
.card .opt, .card-measure { font: 800 21px/1.3 NunitoA, system-ui, sans-serif; color: #fff; overflow: hidden; }
.card .meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.count { font: 9px PS2P, monospace; color: var(--dim); }
.card .count.big { font: 13px PS2P, monospace; color: #c9d2f5; }   /* the 1/3 counter: readable at a glance */
.subnote { font: 700 12px/1.35 NunitoA, system-ui, sans-serif; color: var(--mint); min-height: 16px; max-height: 34px; overflow: hidden; }

/* game over */
.over { justify-content: center; align-items: center; text-align: center; gap: 10px; background: radial-gradient(circle, #2a0610, #080d24 70%); }
.over .big { color: var(--red); font-size: 26px; line-height: 1.3; }
.over .ename { font: 11px/1.5 PS2P, monospace; color: var(--gold); }
.over .cause { font: 700 15px/1.35 NunitoA, system-ui, sans-serif; color: var(--ink); max-height: 62px; overflow: hidden; }
.over .better { font: 700 13px/1.35 NunitoA, system-ui, sans-serif; color: var(--mint); max-height: 72px; overflow: hidden; }
.over .card { flex: 0 0 auto; width: 100%; min-height: 64px; }

/* score card */
.score { gap: 10px; }
.score .big { font-size: 15px; }
.score .row { display: flex; justify-content: space-between; font: 9px/1.8 PS2P, monospace; }
.score .row b { font-weight: normal; color: var(--gold); }
.ladder { list-style: none; margin: 0; padding: 0; font: 8px/2.05 PS2P, monospace; color: var(--dim); }
.ladder li { display: flex; justify-content: space-between; gap: 6px; padding: 0 6px; }
.ladder li.on { background: #3a3200; color: var(--gold); }
.ladder li span:last-child { font: 700 11px/2 NunitoA, sans-serif; color: var(--mint); }
.notes, .measure-notes { font: 700 15px/1.4 NunitoA, system-ui, sans-serif; color: var(--ink); }
.small { font: 700 12px/1.4 NunitoA, system-ui, sans-serif; color: var(--dim); }
.nick { width: 100%; height: 46px; padding: 6px 10px; font: 700 18px NunitoA, system-ui, sans-serif; color: #fff; background: #050920; border: 3px solid var(--cyan); border-radius: 0; -webkit-user-select: text; user-select: text; }

/* attract */
.attract { padding: 0; }
.attract canvas { display: block; width: 360px; height: 270px; image-rendering: pixelated; }
.attract .under { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 6px; }
.attract .card { min-height: 70px; }
.attract .press { text-align: center; font: 12px PS2P, monospace; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.attract .disc { font: 600 10px/1.35 NunitoA, system-ui, sans-serif; color: #7d89b8; text-align: center; }

/* measuring sandbox (same widths as on screen) */
#measure { position: absolute; left: -9999px; top: 0; visibility: hidden; }

/* control deck */
#deck { position: absolute; left: 10px; top: 508px; width: 360px; height: 172px; border-radius: 14px;
  background: linear-gradient(180deg, #1b2350, #0d1233); border: 3px solid #000; box-shadow: inset 0 2px 0 #3a4a9a, 0 6px 0 #000;
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
#rocker { display: flex; flex-direction: column; width: 92px; height: 144px; border-radius: 46px; overflow: hidden; border: 4px solid #000; box-shadow: 0 5px 0 #000; }
#rocker button, #btn-go { -webkit-appearance: none; appearance: none; border: 0; margin: 0; cursor: pointer; touch-action: manipulation; color: #111; font: 22px PS2P, monospace; }
#rocker button { flex: 1; background: linear-gradient(180deg, #42e7ff, #1c8fb0); }
#rocker #btn-down { border-top: 4px solid #000; background: linear-gradient(180deg, #1c8fb0, #136b86); }
#rocker button:active, #rocker button.hit { filter: brightness(1.35); }
.deck-mid { font: 8px/1.6 PS2P, monospace; color: #4a5a9a; text-align: center; letter-spacing: 2px; }
#btn-go { width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe866, #ffd400 45%, #c79a00); border: 5px solid #000;
  box-shadow: 0 7px 0 #000, inset 0 -6px 0 rgba(0,0,0,.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 34px; }
#btn-go small { font: 10px PS2P, monospace; }
#btn-go:active, #btn-go.hit { transform: translateY(4px); box-shadow: 0 3px 0 #000, inset 0 -6px 0 rgba(0,0,0,.25); }

/* control glyphs drawn in CSS (no font fallback surprises) */
.tri { display: block; width: 0; height: 0; border-style: solid; border-color: transparent; }
.tri.up { border-width: 0 16px 22px; border-bottom-color: #0b1230; margin: 0 auto; }
.tri.down { border-width: 22px 16px 0; border-top-color: #0b1230; margin: 0 auto; }
.tri.go { border-width: 20px 0 20px 30px; border-left-color: #0b1230; margin-left: 8px; }

.arrow { font-size: 0; display: flex; justify-content: center; align-items: center; }
.arrow.up::before, .arrow.down::before { content: ''; border-style: solid; border-color: transparent; }
.arrow.up::before { border-width: 0 10px 13px; border-bottom-color: var(--gold); }
.arrow.down::before { border-width: 13px 10px 0; border-top-color: var(--gold); }
.deck-mid { width: 72px; letter-spacing: 1px; line-height: 2; }
.late { opacity: 0; animation: appear .01s 1.05s forwards; } @keyframes appear { to { opacity: 1; } }
#btn-sound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin: 8px auto 0;
  width: 66px; height: 46px; padding: 0; border-radius: 10px; border: 3px solid #000; background: #0b1230; box-shadow: 0 3px 0 #000;
  cursor: pointer; -webkit-appearance: none; appearance: none; position: relative; -webkit-tap-highlight-color: transparent; }
#btn-sound:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
#btn-sound .ico { font: 17px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif; }
#btn-sound .lbl { font: 6px/1 PS2P, monospace; letter-spacing: 0; color: #cfd6ff; white-space: nowrap; }
#btn-sound[data-mode="8bit"] { border-color: #000; background: #12304a; }
#btn-sound[data-mode="8bit"] .lbl { color: #9dff7a; }
#btn-sound[data-mode="forkashi"] .lbl { color: var(--gold); }
#btn-sound[data-mode="off"] { background: #1a1d2e; }
#btn-sound[data-mode="off"] .lbl { color: #7a86b8; }
/* PREVIOUSLY ON BLUE FIRE... recap */
.recap-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.recap-head .kicker { color: var(--gold); }
.recap-skip { font: 8px/1 PS2P, monospace; color: var(--ink); background: #000; border: 2px solid var(--cyan); padding: 7px 8px; cursor: pointer; }
.recap .who .count { margin-left: auto; font: 8px PS2P, monospace; color: #7a86b8; }
.recap .box { border-color: var(--gold); }
.chip.stat { color: var(--cyan); }

/* start screen with a save: CONTINUE and NEW RUN, same size, side by side */
.attract .save-pair { display: flex; gap: 8px; }
.attract .save-btn { flex: 1 1 0; min-height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 6px;
  font: 12px/1.4 PS2P, monospace; white-space: nowrap; color: #fff; background: #10163a; border: 3px solid #3a4680; border-radius: 6px; cursor: pointer; }
.attract .save-btn.sel { color: var(--gold); border-color: var(--gold); background: #1d2350; }
.attract .save-btn.over.sel { border-color: var(--good); color: var(--good); }
.attract .card.dimmed { min-height: 0; padding: 8px 12px; opacity: .75; }
.attract .card.dimmed .opt { font-size: 9px !important; color: var(--dim) !important; }

/* ---------- v2: animated cards (light, phone-safe; off for reduced motion) ---------- */
#view { perspective: 900px; }
.title-card .big, .title-card .bar { animation: flipIn .42s cubic-bezier(.2,.9,.3,1.2) both; transform-origin: 50% 50%; }
.title-card .bar:last-of-type { animation-delay: .06s; }
@keyframes flipIn { from { opacity: 0; transform: rotateX(80deg) scale(.9); } to { opacity: 1; transform: none; } }
.title-card.boot .big { color: var(--cyan); font-size: 26px; animation: bootIn .9s steps(6) both; }
@keyframes bootIn { 0% { opacity: 0; letter-spacing: 12px; } 60% { opacity: 1; } 100% { opacity: 1; letter-spacing: 1px; } }
.line .box { animation: slideUp .24s ease-out both; }
.line .who { animation: slideIn .24s ease-out both; }
@keyframes slideUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.choice .card { animation: dealIn .3s cubic-bezier(.2,.9,.3,1.15) both; transform-origin: 50% 100%; }
@keyframes dealIn { from { opacity: 0; transform: rotateX(-35deg) translateY(30px); } to { opacity: 1; transform: none; } }
.choice .card.in-down { animation: inDown .2s ease-out both; }
.choice .card.in-up { animation: inUp .2s ease-out both; }
@keyframes inDown { from { opacity: .2; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes inUp { from { opacity: .2; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
.sp-phone .face { animation: buzz .5s linear 2; }
@keyframes buzz { 0%, 100% { transform: none; } 20% { transform: translateX(-3px) rotate(-6deg); } 40% { transform: translateX(3px) rotate(6deg); } 60% { transform: translateX(-2px) rotate(-4deg); } 80% { transform: translateX(2px) rotate(4deg); } }
#screen.shake { animation: shake .42s linear; }
@keyframes shake { 0%, 100% { transform: none; } 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); } 45% { transform: translate(-4px, 2px); } 60% { transform: translate(3px, -2px); } 80% { transform: translate(-2px, 1px); } }

/* a line over an animation (cold open, the walk home, the dream) */
.stage .under { gap: 6px; padding: 6px 12px 6px; }
.stage .face.sm { width: 36px; height: 36px; flex: 0 0 36px; border-width: 2px; }
.stage .name { font-size: 9px; }
.stage .box.stagebox { height: auto; min-height: 112px; flex: 1 1 auto; padding: 10px 12px 20px; animation: slideUp .24s ease-out both; }
.stage.dream .box.stagebox { border-color: var(--cyan); background: #0a1440; }
.stage.dream .txt { font-style: italic; }

/* the vision */
.vision { justify-content: center; gap: 12px; }
.vision .vcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 18px 16px; min-height: 300px; justify-content: center;
  background: linear-gradient(180deg, #13306a, #0a1440); border: 4px solid var(--cyan); box-shadow: 0 0 0 3px #000, 6px 6px 0 #000; animation: visIn .38s cubic-bezier(.2,.9,.3,1.2) both; }
.vision .vicon { font: 52px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif; animation: pop2 .5s .15s cubic-bezier(.2,.9,.3,1.6) both; }
.vision .vhead { font: 12px/1.5 PS2P, monospace; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.vision .vtext { font: 700 19px/1.4 NunitoA, system-ui, sans-serif; color: var(--ink); }
.vision .vgo { text-align: right; }
@keyframes visIn { from { opacity: 0; transform: translateX(60px) rotateY(-25deg); } to { opacity: 1; transform: none; } }
@keyframes pop2 { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

/* ---------- Ch1 opening ---------- */
/* captions are small tags, not cards */
.cap { align-self: flex-start; font: 8px/1.5 PS2P, monospace; color: var(--cyan); background: #000c; border: 2px solid var(--cyan); padding: 5px 7px; letter-spacing: 1px; animation: slideIn .24s ease-out both; }
.line .cap { margin-bottom: auto; }
.stage .cap { position: absolute; left: 8px; top: 240px; z-index: 1; font-size: 7px; letter-spacing: 0; padding: 4px 6px; white-space: nowrap; }   /* bottom of the picture, clear of the AC */
/* the phone buzzes with one message */
.phone-note { display: flex; align-items: center; gap: 8px; align-self: stretch; margin-bottom: auto; padding: 8px 10px; background: #0b1230; border: 3px solid var(--cyan); border-radius: 10px;
  box-shadow: 0 0 0 2px #000, 4px 4px 0 #000; font: 800 16px/1.3 NunitoA, system-ui, sans-serif; color: #fff; animation: buzz .5s linear 2, slideUp .24s ease-out both; }
.phone-note img { width: 28px; height: 28px; image-rendering: pixelated; flex: 0 0 28px; }
.buzz .cap + .phone-note, .buzz .phone-note { margin-bottom: auto; }
/* 0 · the BONK caption appears on the hit frame (JS adds .on in the same animation frame) */
.attract .hit-cap { visibility: hidden; }
.attract .hit-cap.on { visibility: visible; }
/* 9 · catch-up: the cold-open frame (~1 s, silent), then black and one drip */
.drip canvas { display: none; position: absolute; left: 0; top: 0; width: 360px; height: 270px; image-rendering: pixelated; }
.drip.replay canvas { display: block; }
.drip.replay .drop, .drip.replay .dtext { display: none; }
.drip { background: #000; justify-content: center; align-items: center; gap: 14px; cursor: pointer; }
.drip .drop { width: 6px; height: 9px; background: var(--cyan); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0; animation: dropFall .55s .2s ease-in forwards; }
.drip .dtext { font: italic 700 18px/1 NunitoA, system-ui, sans-serif; color: #7d8aa8; letter-spacing: 2px; opacity: 0; animation: appear .01s .75s forwards; }
@keyframes dropFall { 0% { opacity: 0; transform: translateY(-120px); } 15% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scaleY(.6); } }

@media (prefers-reduced-motion: reduce) {
  .drip .drop, .drip .dtext { opacity: 1; }
  .scr, .scr *, #screen.shake { animation: none !important; }
}