/* VAMPS theme: the vamps.wtf look (its tokens, fonts and neon edges) plus Codex's UI art kit (button plates,
   frame pieces, badges). Loaded after style.css and only restyles; game logic and input are untouched. */
@font-face{font-family:'Chakra Petch';font-weight:400;font-display:swap;src:url('./assets/fonts/chakra-petch-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:600;font-display:swap;src:url('./assets/fonts/chakra-petch-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'DM Serif Display';font-weight:400;font-display:swap;src:url('./assets/fonts/dm-serif-display-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Silkscreen';font-weight:400;font-display:swap;src:url('./assets/fonts/silkscreen-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Kaushan Script';font-weight:400;font-display:swap;src:url('./assets/fonts/kaushan-script-latin-400-normal.woff2') format('woff2')}
:root{
  --bg:#060508;--surface:#0e0b10;--surface-2:#16111a;--line:rgba(255,42,61,.28);--line-soft:rgba(255,255,255,.08);
  --ink:#f6f1ea;--ink-dim:#b9adb3;--crimson:#ff2a3d;--crimson-deep:#b0001a;--crimson-ink:#ff5a69;--moon:#ffd6d9;--prize:#eac47b;
  --font-display:'DM Serif Display',Georgia,serif;--font-body:'Chakra Petch',system-ui,sans-serif;--font-pixel:'Silkscreen',ui-monospace,monospace;--font-script:'Kaushan Script',cursive;
  --neon-text:0 0 6px rgba(255,42,61,.65),0 0 18px rgba(255,42,61,.45),0 0 42px rgba(255,42,61,.25);
  --neon-box:0 0 0 1px rgba(255,42,61,.55),0 0 18px rgba(255,42,61,.35),0 0 48px rgba(255,42,61,.18);
  --ease:cubic-bezier(.16,1,.3,1);
}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px}
body:before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#06050899 0,#060508e6 45%,#060508 80%),url('./assets/ui/midnight-backdrop.webp') center top/cover no-repeat;pointer-events:none}
main{max-width:1240px}
button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--moon);outline-offset:4px}

/* ---------- masthead ---------- */
.masthead{height:76px;border-bottom:1px solid var(--line)}
.wordmark{display:flex;align-items:center;gap:10px;transform:none;font-size:0}
.wordmark img{height:38px;width:auto;display:block;filter:drop-shadow(0 0 10px rgba(255,42,61,.35))}
.brand-mark{display:none}
.edition{font-family:var(--font-script);font-size:17px;color:var(--ink-dim)}
.local{font-family:var(--font-pixel);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}

/* ---------- type ---------- */
h1,h2,.campaign-banner h2,dialog h2,.intro-frame h2{font-family:var(--font-display);font-weight:400;letter-spacing:.005em;color:var(--ink)}
h1{font-size:clamp(40px,5vw,64px)}
.chapter,.intro-kicker,.hud-label,.preview-badge{font-family:var(--font-pixel);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--crimson)}
.hud-label{color:var(--ink-dim);letter-spacing:.16em;font-size:9px}
.tagline{font-family:var(--font-script);font-size:20px;line-height:1.35;color:var(--ink)}
.tagline span{color:var(--crimson-ink)}

/* ---------- buttons: the art kit's plates ---------- */
.primary,.tool,.text-button#restart,#refresh-board,#copy-wallet,.result-actions button{
  border-style:solid;border-width:0;border-image-repeat:stretch;background:none;color:var(--ink);font-family:var(--font-body);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;box-shadow:none;transition:transform .15s var(--ease),filter .2s}
.primary{border-image-source:url('./assets/ui/btn-primary.webp');border-image-slice:0 165 fill;border-image-width:0 44px;min-height:58px;min-width:250px;padding:0 54px;font-size:14px;text-shadow:0 1px 2px #000}
.primary:hover{border-image-source:url('./assets/ui/btn-primary-hover.webp');background:none;filter:brightness(1.06)}
.primary:active,.tool:active{transform:translateY(1px) scale(.98)}
.primary:disabled{border-image-source:url('./assets/ui/btn-disabled.webp');color:#a59aa3;cursor:wait}
.primary span{opacity:.75;margin-left:14px}
.tool,#refresh-board,#copy-wallet,.result-actions button:not(.primary){border-image-source:url('./assets/ui/btn-secondary.webp');border-image-slice:0 165 fill;border-image-width:0 28px;min-height:38px;padding:0 30px;font-size:11px;color:var(--ink);border-radius:0}
.tool:hover,#refresh-board:hover,#copy-wallet:hover,.result-actions button:not(.primary):hover{border-image-source:url('./assets/ui/btn-secondary-hover.webp');background:none;color:#fff}
/* small square controls stay round icon buttons, like the X link on vamps.wtf */
#help,#pause,#sound{border:1px solid var(--line);border-image:none;border-radius:999px;min-width:38px;min-height:38px;padding:0 12px;background:rgba(14,11,16,.85);letter-spacing:.06em}
#help:hover,#pause:hover,#sound:hover{background:rgba(255,42,61,.14);box-shadow:0 0 18px rgba(255,42,61,.35)}
#games-btn{letter-spacing:.14em}
.text-button{font-family:var(--font-pixel);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson-ink)}
.text-button:hover{color:#fff;text-shadow:var(--neon-text)}
#restart{font-family:var(--font-body);font-size:11px;min-height:36px;padding:0 28px;border-image-source:url('./assets/ui/btn-secondary.webp');border-image-slice:0 165 fill;border-image-width:0 26px;color:var(--ink)}
#restart:hover{border-image-source:url('./assets/ui/btn-secondary-hover.webp')}
kbd{font-family:var(--font-pixel);font-size:10px;background:var(--surface-2);border:1px solid var(--line);box-shadow:0 2px 0 #000;color:var(--ink);border-radius:4px}

/* ---------- campaign + entry ---------- */
.campaign-banner{border-bottom:1px solid var(--line)}
.campaign-banner h2{font-size:clamp(28px,3.4vw,40px)}
.campaign-banner img{border:2px solid var(--prize);border-radius:10px;box-shadow:0 0 24px rgba(234,196,123,.25)}
.preview-badge{border:1px solid rgba(234,196,123,.5);color:var(--prize);border-radius:999px;padding:4px 10px;letter-spacing:.14em}
.entry-card{position:relative;border-radius:14px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(22,17,26,.96),rgba(14,11,16,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px #0008;padding:22px 22px 22px 112px;min-height:128px;transition:box-shadow .25s,border-color .25s,transform .2s var(--ease)}
.entry-card:hover{transform:translateY(-2px);border-color:rgba(255,42,61,.6);box-shadow:var(--neon-box)}
.entry-card .entry-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:80px;height:80px;font-size:0;background:center/contain no-repeat;filter:drop-shadow(0 6px 14px #000a)}
#entry-gtd .entry-icon{background-image:url('./assets/ui/badge-gtd.webp')}
#entry-fcfs .entry-icon{background-image:url('./assets/ui/badge-fcfs.webp')}
.entry-card strong{font-family:var(--font-display);font-weight:400;font-size:28px;color:var(--ink)}
#entry-gtd strong{color:var(--prize)}
.entry-card span:not(.entry-icon){font-size:13px;color:var(--ink)}
.entry-card small{color:var(--ink-dim)}
#entry-gtd:hover,#entry-gtd.selected{border-color:var(--prize);box-shadow:0 0 0 1px rgba(234,196,123,.6),0 0 22px rgba(234,196,123,.28)}
#entry-fcfs.selected{border-color:var(--crimson);box-shadow:var(--neon-box)}
.entry-card.selected{background:linear-gradient(160deg,rgba(40,18,28,.97),rgba(14,11,16,.97))}
.entry-meta label{font-family:var(--font-pixel);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.entry-meta label small{font-family:var(--font-body);letter-spacing:0;text-transform:none}
.entry-meta input,select{font-family:var(--font-body);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;min-height:42px;padding:0 12px;transition:border-color .2s,box-shadow .2s}
.entry-meta input:focus,select:focus{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(255,42,61,.18);outline:none}
.handle-field b{color:var(--crimson)}
#entry-status{font-size:13px;color:var(--ink-dim)}

/* ---------- the game cabinet ---------- */
.cabinet{border:1px solid rgba(255,42,61,.45);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--neon-box),0 30px 70px #000a}
.cabinet:before,.cabinet:after{display:none}
.hud,.lower-hud{background:linear-gradient(90deg,#1a0f16,#0e0b10);border-color:var(--line)}
.vital #hearts{color:var(--crimson);text-shadow:var(--neon-text)}
.hud-middle{display:flex;align-items:center;gap:10px}
.hud-middle:before{content:'';width:22px;height:34px;background:url('./assets/ui/badge-timer.webp') center/contain no-repeat}
.hud-middle strong{font-family:var(--font-pixel);font-size:20px;color:var(--ink)}
.relic-count strong{font-family:var(--font-pixel)}
.toast{font-family:var(--font-body);background:rgba(14,11,16,.94);border:1px solid var(--line);border-radius:10px;color:var(--ink);box-shadow:var(--neon-box)}

/* ---------- framed panels: leaderboard, intro, rules, results ---------- */
.leaderboard,dialog,.intro-frame{position:relative;border:1px solid rgba(255,42,61,.55);border-radius:6px;background:linear-gradient(180deg,rgba(22,17,26,.97),rgba(10,8,12,.98));box-shadow:inset 0 0 0 4px rgba(6,5,8,.9),inset 0 0 0 5px rgba(255,42,61,.25),0 0 30px rgba(255,42,61,.18),0 24px 70px #000c;outline:none}
.leaderboard:before,dialog:before,.intro-frame:before{content:'';position:absolute;inset:-34px -22px -40px;pointer-events:none;z-index:2;
  background:url('./assets/ui/frame-crest.webp') center top/190px auto no-repeat,url('./assets/ui/frame-gem.webp') center bottom/120px auto no-repeat,
  url('./assets/ui/frame-tl.webp') left top/84px no-repeat,url('./assets/ui/frame-tr.webp') right top/84px no-repeat,
  url('./assets/ui/frame-bl.webp') left bottom/84px no-repeat,url('./assets/ui/frame-br.webp') right bottom/84px no-repeat}
dialog{overflow:visible;padding:48px 44px 46px;border-radius:6px}
dialog::backdrop{background:rgba(6,5,8,.82);backdrop-filter:blur(6px)}
dialog ol{font-size:14px;color:var(--ink-dim)}
dialog strong{color:var(--ink)}
.help-note{color:var(--ink-dim)}
.close{z-index:3;color:var(--ink-dim);top:14px;right:18px}
.close:hover{color:#fff;text-shadow:var(--neon-text)}
.intro-frame{padding:40px 34px 38px;width:520px}
.intro-frame .sigil{color:var(--crimson);text-shadow:var(--neon-text)}
.intro-copy{color:var(--ink-dim)}
.ritual span b{font-family:var(--font-pixel);color:var(--crimson)}
.result-stats b{font-family:var(--font-pixel);color:var(--ink)}
.result-stats span{font-family:var(--font-pixel);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}

.leaderboard{margin:70px 0 46px;padding:44px 40px 50px}
.leaderboard header h2{font-size:clamp(30px,3.6vw,44px)}
.leaderboard>p{color:var(--ink-dim);font-size:12px}
.leaderboard table{width:100%;border-collapse:collapse}
.leaderboard th{font-family:var(--font-pixel);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--crimson);border-bottom:1px solid var(--line);padding:12px 10px;text-align:left}
.leaderboard td{padding:12px 10px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.leaderboard tbody tr{transition:background .2s}
.leaderboard tbody tr:hover{background:rgba(255,42,61,.06)}
.leaderboard tbody tr:nth-child(-n+3) td:first-child{padding-left:46px;background:10px center/26px auto no-repeat;font-family:var(--font-pixel)}
.leaderboard tbody tr:nth-child(1) td:first-child{background-image:url('./assets/ui/badge-first.webp');color:var(--prize)}
.leaderboard tbody tr:nth-child(2) td:first-child{background-image:url('./assets/ui/badge-second.webp')}
.leaderboard tbody tr:nth-child(3) td:first-child{background-image:url('./assets/ui/badge-third.webp')}
.leaderboard tbody tr:nth-child(1){background:linear-gradient(90deg,rgba(234,196,123,.1),transparent 60%)}

/* ---------- footer + controls ---------- */
.controls{color:var(--ink-dim);font-size:12px}
footer{border-top:1px solid var(--line);color:var(--ink-dim);font-size:11px}
footer span:first-child{font-family:var(--font-script);font-size:16px;color:var(--ink)}
footer b{color:var(--crimson)}

@media (max-width:820px){
  .entry-card{padding:18px 18px 18px 92px;min-height:110px}.entry-card .entry-icon{width:64px;height:64px}
  .leaderboard{padding:36px 18px 42px}.leaderboard:before,dialog:before,.intro-frame:before{background-size:130px auto,90px auto,58px,58px,58px,58px;inset:-24px -12px -30px}
  .primary{min-width:200px;padding:0 40px}
}
@media (max-width:560px){
  .masthead{height:64px;gap:8px}.wordmark img{height:28px}.local{display:none}
  .tools{gap:6px;min-width:0}#games-btn{padding:0 18px;font-size:10px}
  #sound{padding:0 10px;font-size:10px}
  .entry-grid{grid-template-columns:minmax(0,1fr)}
  .hud{gap:14px;padding:0 10px}.hud .tool{flex:none}
  .leaderboard table{font-size:11px}.leaderboard th,.leaderboard td{padding:10px 4px}
}
@media (prefers-reduced-motion:reduce){.entry-card,.primary,.tool{transition:none}}
/* touch controls (phones) */
@media (max-width:700px){
  .touch button{border:1px solid rgba(255,42,61,.45);background:rgba(14,11,16,.9);color:var(--ink);border-radius:10px;font-family:var(--font-pixel);font-size:11px;letter-spacing:.08em;box-shadow:inset 0 0 12px rgba(255,42,61,.12)}
  .touch button:active{background:rgba(255,42,61,.22);box-shadow:0 0 14px rgba(255,42,61,.45)}
}

/* ---------- game overlays: never scroll; the cabinet grows to fit a tall panel instead of clipping it ---------- */
.intro-frame{max-height:none;overflow:visible}
/* .has-overlay is set by game.js (no :has() or overflow:clip, which older phone browsers such as X's in-app browser lack).
   The panel keeps the arena's shape but grows taller when its content needs it, and the page scrolls to it. */
.viewport.has-overlay{display:block;aspect-ratio:auto;overflow:visible;max-height:none}
.viewport.has-overlay>canvas{position:absolute;inset:0}
.viewport.has-overlay>.overlay{aspect-ratio:8/5}
@media (max-width:700px){.viewport.has-overlay>.overlay{aspect-ratio:8/6.5}}
/* full-screen play: a tall panel (results, pause) scrolls inside the screen instead of being cut off */
body.touch-play .viewport.has-overlay{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
body.touch-play .viewport.has-overlay>.overlay{aspect-ratio:auto;min-height:100%}
body.touch-play .viewport.has-overlay~.touch-pad,body.touch-play .viewport.has-overlay .touch-pad{display:none}
.viewport>.overlay{position:relative;inset:auto;grid-area:1/1;min-width:0;overflow:visible;padding:56px 36px 54px}
.intro-frame>*{position:relative;z-index:3}

/* result: the animated VAMP and stats on the left, words and buttons on the right */
.result-frame{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;gap:0 34px;width:720px;max-width:100%;padding:46px 58px 44px 46px;text-align:left}
.result-art{display:flex;flex-direction:column;align-items:center}
.result-frame .result-vamp{width:200px;height:145px;margin:0}
.result-frame .result-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:12px 0 0;text-align:center;width:100%}
.result-frame .result-stats span:first-child{grid-column:1/-1}
.result-frame .result-stats span:first-child b{font-size:28px;color:var(--prize);text-shadow:0 0 14px rgba(234,196,123,.35)}
.result-frame .result-stats b{font-size:20px;margin-bottom:4px}
.result-frame h2{font-size:34px;margin:0 0 8px}
.result-frame .intro-copy{margin:0 0 12px;font-size:13px;line-height:1.6}
.result-frame #result-status{margin:0 0 4px;font-size:12px;line-height:1.5}
.result-frame .result-actions{justify-content:flex-start;margin:10px 0 14px}
.result-frame .result-note{margin:12px 0 0;font-size:11px;line-height:1.5;color:var(--ink-dim)}
.result-frame .primary{min-width:220px}

@media (max-width:820px){
  .viewport>.overlay{padding:42px 22px 44px}
  .intro-frame{padding:34px 22px 32px}
  .result-frame{grid-template-columns:minmax(0,1fr);text-align:center;padding:34px 22px 32px;gap:10px}
  .result-frame .result-vamp{width:160px;height:116px}
  .result-frame .result-stats{grid-template-columns:repeat(3,1fr)}
  .result-frame .result-stats span:first-child{grid-column:auto}
  .result-frame .result-stats span:first-child b{font-size:22px}
  .result-frame h2{font-size:26px}
  .result-frame .result-actions{justify-content:center}
}
@media (max-width:420px){
  .viewport>.overlay{padding:36px 14px 40px}
  .intro-frame,.result-frame{padding:30px 16px 28px}
  .intro-frame h2{font-size:24px}
  .intro-copy{font-size:12px}
  .primary{min-width:0;width:100%;max-width:260px}
  .result-actions .tool{flex:1 1 auto;padding:0 18px}
}
/* the arena rule `.viewport canvas` must not catch the result VAMP, or it floats over the stats and buttons */
.viewport .intro-frame canvas.result-vamp{position:static;inset:auto;object-fit:contain}
.result-actions a.tool{display:inline-flex;align-items:center;justify-content:center;line-height:1}
@media (max-width:560px){
  .hud{gap:12px;height:54px}.hud .hud-label{font-size:8px;letter-spacing:.1em;white-space:nowrap}
  #hearts{white-space:nowrap;letter-spacing:2px;font-size:14px}
  .relic-count strong{white-space:nowrap;font-size:15px}
  .hud-middle{gap:6px}.hud-middle:before{display:none}.hud-middle strong{font-size:16px}
}
.preview-badge{white-space:nowrap;display:inline-block}

/* ---------- admin button + giveaway plaques ---------- */
a.tool{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:1}
.admin-link[hidden]{display:none}
.campaign-banner>.admin-link{align-self:center;flex:none;min-height:46px;padding:0 34px;font-size:12px;letter-spacing:.16em}
.hud-prize{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;margin-left:auto;justify-content:flex-end}
.hud-prize[hidden]{display:none}
.hud-prize img{width:38px;height:38px;object-fit:cover;border-radius:6px;border:1px solid var(--prize);box-shadow:0 0 12px rgba(234,196,123,.3);flex:none}
.hud-prize img[hidden]{display:none}
.hud-prize>div{min-width:0}
.hud-prize strong{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--prize)}
.hud .hud-middle{margin-left:18px}
.intro-prize{display:flex;align-items:center;gap:14px;margin:0 auto 16px;padding:10px 16px 10px 10px;max-width:100%;width:max-content;text-align:left;border:1px solid rgba(234,196,123,.45);border-radius:10px;background:rgba(234,196,123,.06)}
.intro-prize[hidden]{display:none}
.intro-prize img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--prize);flex:none}
.intro-prize img[hidden]{display:none}
.intro-prize span{display:block;font-family:var(--font-pixel);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px}
.intro-prize strong{display:block;font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.15;color:var(--prize);overflow-wrap:anywhere}
.intro-frame:has(.intro-prize:not([hidden]))>.sigil{display:none}
@media (max-width:560px){
  .hud-prize>div{display:none}.hud-prize img{width:30px;height:30px}
  .hud .hud-middle{margin-left:8px}
  .campaign-banner>.admin-link{min-height:40px;padding:0 24px;font-size:10px}
}
.local[hidden]{display:none}

/* ---------- vamps.wtf brand (same icon + brush logo as the main site; both lead home) ---------- */
.site-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.site-brand__icon{height:40px;width:auto;filter:drop-shadow(0 0 8px rgba(255,42,61,.35))}
.site-brand__word{height:34px;width:auto;filter:drop-shadow(0 0 10px rgba(255,42,61,.35))}
.home-pill{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:rgba(14,11,16,.85);color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.04em;text-decoration:none;white-space:nowrap;transition:background .2s,box-shadow .2s,border-color .2s}
.home-pill:hover{background:rgba(255,42,61,.14);border-color:var(--crimson);box-shadow:0 0 18px rgba(255,42,61,.35)}
.home-pill:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:560px){.site-brand__icon{height:30px}.site-brand__word{height:24px}.home-pill{min-height:34px;padding:0 12px;font-size:11px}.masthead .site-brand__word{display:none}}
.tools .tool,.tools .home-pill{white-space:nowrap;flex:none}
#games-btn{padding:0 26px}
@media (max-width:1100px){.edition{display:none}}
@media (max-width:900px){.local{display:none}}

/* ---------- phones and tablets ---------- */
.touch-pad,.touch-exit[hidden],.touch-only{display:none}
.is-touch .touch-only{display:block}
.is-touch .controls{display:none}
/* 16px fields stop iPhones from zooming the page when a field is tapped */
.is-touch input,.is-touch select{font-size:16px}
.is-touch button,.is-touch a{touch-action:manipulation}

/* full-screen play: the cabinet fills the screen; the arena sits at the top, the thumb controls below it */
body.touch-play{overflow:hidden;overscroll-behavior:none}
body.touch-play .cabinet{position:fixed;inset:0;z-index:60;margin:0;display:flex;flex-direction:column;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;background:#060508;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.touch-play .cabinet:before,body.touch-play .cabinet:after{display:none}
body.touch-play .hud{flex:none;border-radius:0}
body.touch-play .viewport{flex:1 1 auto;min-height:0;aspect-ratio:auto;max-height:none}
body.touch-play .viewport>canvas{object-fit:contain;object-position:center top}
body.touch-play .lower-hud{flex:none;height:auto;min-height:52px;padding:8px 14px}
/* in-game messages on phones: small, in the empty band under the arena (upright) or low between the thumbs (sideways), never over the play area */
body.touch-play .toast{top:calc(100vw * .625 + 14px);bottom:auto;max-width:86%;padding:7px 12px;font-size:12px;line-height:1.35;opacity:0}
body.touch-play .toast.show{opacity:.92}
body.touch-play .area-label{display:none}
.touch-exit{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;margin-right:4px;border:1px solid var(--line);border-radius:999px;background:rgba(14,11,16,.85);color:var(--ink);font-size:14px}
.touch-exit:active{background:rgba(255,42,61,.25)}

body.touch-play .touch-pad{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:4;height:min(320px,58%);align-items:flex-end;justify-content:space-between;pointer-events:none}
.stick-zone{position:relative;flex:1 1 auto;align-self:stretch;max-width:62%;pointer-events:auto;touch-action:none}
.stick{position:absolute;left:96px;top:calc(100% - 110px);width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;border:2px solid rgba(255,42,61,.45);background:radial-gradient(circle,rgba(255,42,61,.12),rgba(14,11,16,.35) 70%);box-shadow:0 0 18px rgba(255,42,61,.2);opacity:.55;transition:opacity .15s}
.stick.is-on{opacity:1;transition:none}
.stick i{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6a7a,#c4162a 60%,#5c0812);box-shadow:0 0 16px rgba(255,42,61,.6),inset 0 -4px 8px rgba(0,0,0,.4)}
.stick-hint{position:absolute;left:96px;bottom:12px;transform:translateX(-50%);font-family:var(--font-pixel);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;pointer-events:none}
.stick.is-on~.stick-hint{opacity:0}
.touch-actions{position:relative;flex:none;width:120px;height:120px;margin:0 18px 22px 0;pointer-events:none}
.touch-btn{position:absolute;display:grid;place-items:center;border-radius:50%;pointer-events:auto;touch-action:none;font-family:var(--font-pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);-webkit-tap-highlight-color:transparent}
.touch-btn--dash{right:0;bottom:0;width:104px;height:104px;font-size:14px;border:2px solid var(--crimson);
  background:conic-gradient(rgba(6,5,8,.75) calc(var(--cd,0)*360deg),transparent 0),radial-gradient(circle at 35% 30%,#ff5a6c,#b3142a 62%,#4c0710);box-shadow:0 0 22px rgba(255,42,61,.55),inset 0 -5px 10px rgba(0,0,0,.4)}
.touch-btn--dash.is-cooling{border-color:rgba(255,42,61,.45);box-shadow:0 0 10px rgba(255,42,61,.25)}
.touch-btn--dash span{position:relative}
.touch-btn--echo{left:6px;top:6px;width:76px;height:76px;font-size:11px;border:2px solid rgba(169,140,255,.7);background:radial-gradient(circle at 35% 30%,#8f6dff,#4b2a9e 62%,#1e0f44);box-shadow:0 0 18px rgba(143,109,255,.45),inset 0 -4px 8px rgba(0,0,0,.4)}
.touch-btn.is-down{transform:scale(.93);filter:brightness(1.2)}
/* sideways phone: the arena fills the height, the controls sit in the side margins */
@media (orientation:landscape) and (max-height:560px){
  body.touch-play .lower-hud{display:none}
  body.touch-play .hud{height:44px}
  body.touch-play .touch-pad{height:100%}
  .stick-zone{max-width:34%}
  .stick{left:84px;top:calc(100% - 96px)}.stick-hint{left:84px}
  .touch-actions{width:104px;height:104px;margin:0 10px 12px 0}
  .touch-btn--dash{width:92px;height:92px}.touch-btn--echo{width:68px;height:68px}
}
.hp-short{display:none}
@media (max-width:560px){
  .masthead .hp-long{display:none}.masthead .hp-short{display:inline}
  .masthead .home-pill{padding:0 10px;gap:5px}
  .tools{gap:5px}#games-btn{padding:0 14px}#sound{padding:0 8px}
  .hud{gap:8px;padding:0 8px}.hud-middle strong{font-size:15px}.hud-prize img{width:26px;height:26px}
  #hearts{letter-spacing:1px;font-size:12px}
}
body.touch-play .hud-prize{display:none}
.rotate-hint{display:none}
@media (orientation:portrait){
  body.touch-play .rotate-hint{display:block;position:absolute;left:0;top:-36px;width:calc(100vw - 24px);margin-left:12px;text-align:center;font-family:var(--font-pixel);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);opacity:.8;pointer-events:none}
}

/* X handle: the @ is a proper prefix, same size and baseline as the handle */
.handle-field{display:flex;align-items:center;min-height:46px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.handle-field:focus-within{border-color:var(--crimson);box-shadow:0 0 0 1px rgba(255,42,61,.5),0 0 14px rgba(255,42,61,.25)}
.handle-field b{display:flex;align-items:center;align-self:stretch;padding:0 4px 0 14px;font-family:var(--font-body);font-size:20px;font-weight:600;line-height:1;color:var(--crimson)}
.entry-meta .handle-field input{flex:1;min-width:0;min-height:44px;border:0;border-radius:0;background:transparent;padding:0 12px 0 2px;margin:0;box-shadow:none;outline:none}

/* rules box: the frame stays put and the words scroll inside it, on any screen height */
dialog#instructions{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:none;flex-direction:column;padding:0}
dialog#instructions[open]{display:flex}
.dialog-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:48px 44px 40px;min-height:0;overflow-wrap:anywhere}
.dialog-body h2{margin-top:0}
.dialog-body ol{margin:0 0 6px;padding-left:22px}
.dialog-body #help-done{display:flex;margin:6px auto 0}
@media (max-width:560px){
  dialog#instructions{width:calc(100% - 28px);max-width:none}
  .dialog-body{padding:40px 20px 30px}
  .dialog-body h2{font-size:26px;padding-right:28px}
  .dialog-body ol{font-size:13px;padding-left:18px}
  .dialog-body li{padding:6px 0 6px 2px}
  .help-note{font-size:12px}
  .hud-prize{display:none}
}
@media (orientation:landscape) and (max-height:560px){
  body.touch-play .toast{top:auto;bottom:10px;max-width:min(46%,420px);font-size:11px;padding:6px 10px}
}
/* score card preview (press and hold to save) */
.card-preview{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px 16px calc(20px + env(safe-area-inset-bottom));background:rgba(6,5,8,.94);text-align:center}
.card-preview p{margin:0;max-width:420px;color:var(--ink);font-size:15px;line-height:1.5}
.card-preview img{max-width:100%;max-height:70vh;border-radius:12px;border:1px solid var(--line);box-shadow:0 0 30px rgba(255,42,61,.3);-webkit-touch-callout:default;user-select:auto}
.card-preview .tool{min-height:46px;padding:0 34px}

/* ---------- route cards: the picked one is unmistakable (crimson, glowing, tagged) ---------- */
#entry-gtd.selected,#entry-fcfs.selected{border:2px solid var(--crimson);background:linear-gradient(160deg,rgba(70,10,22,.98),rgba(20,8,14,.98));box-shadow:0 0 0 1px rgba(255,42,61,.55),0 0 26px rgba(255,42,61,.45),inset 0 0 30px rgba(255,42,61,.12)}
.entry-card.selected:after{content:'Selected';position:absolute;top:12px;right:14px;padding:4px 10px;border-radius:999px;background:var(--crimson);color:#fff;font-family:var(--font-pixel);font-size:9px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 14px rgba(255,42,61,.6)}
#entry-gtd.selected strong,#entry-fcfs.selected strong{color:#fff}

/* ---------- GTD wallet panel ---------- */
.gtd-panel{margin:-4px 0 20px;padding:18px 20px;border:1px solid rgba(255,42,61,.55);border-radius:14px;background:linear-gradient(160deg,rgba(30,12,20,.96),rgba(12,9,14,.96));box-shadow:0 0 22px rgba(255,42,61,.18)}
.gtd-panel[hidden]{display:none}
.gtd-panel__head{display:flex;align-items:center;gap:14px}
.gtd-badge{width:56px;height:56px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 10px #000a)}
.gtd-panel__kicker{margin:0 0 4px;font-family:var(--font-pixel);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson)}
.gtd-panel__text{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.gtd-actions{margin-top:14px}
.gtd-actions .primary{min-width:220px}
.gtd-actions[hidden],.gtd-apps[hidden],.gtd-done[hidden]{display:none}
.gtd-apps{margin-top:14px}
.gtd-apps p{margin:0 0 10px;font-size:13px;color:var(--ink-dim)}
.gtd-apps__row{display:flex;flex-wrap:wrap;gap:10px}
.gtd-apps__row .tool{flex:1 1 140px;min-height:48px;justify-content:center}
.gtd-done{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.gtd-chip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 14px 8px 8px;border:1px solid rgba(124,228,168,.55);border-radius:999px;background:rgba(124,228,168,.08);font-size:13px}
.gtd-chip img{width:28px;height:28px;object-fit:contain}
.gtd-chip b{color:#9ff0bf;font-weight:600}
.gtd-chip span{color:var(--ink);font-family:var(--font-pixel);font-size:11px;letter-spacing:.06em}
@media (max-width:560px){
  .gtd-panel{padding:16px 14px}
  .gtd-actions .primary{width:100%;min-width:0}
  .entry-card.selected:after{top:8px;right:8px}
}
.gtd-apps__note{margin:12px 0 0;padding:10px 12px;border-left:2px solid var(--crimson);background:rgba(255,42,61,.08);font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.gtd-apps__note[hidden]{display:none}