/* Shared cabinet frame for every game page.
   Layout: header bar (back to arcade, title, score) → screen (canvas keeps its aspect, fits the viewport) → touch pad on phones. */
:root{
  --bg:#0f0c1f; --bg2:#181331; --panel:#1f1940; --line:#342b5e;
  --ink:#f4effd; --muted:#a39bc4; --game:#ff4fa3;
  --f-marquee:"Bungee","Arial Black",system-ui,sans-serif;
  --f-pixel:"Silkscreen",ui-monospace,"Courier New",monospace;
  --f-body:"Rubik",ui-sans-serif,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--f-body);font-size:15px;line-height:1.45;display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 50% -10%,color-mix(in srgb,var(--game) 22%,var(--bg)) 0%,var(--bg) 55%);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
/* touch screens: taps and long-presses shouldn't select text, pop up the copy menu or double-tap zoom (inputs still type) */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
button:focus-visible,a:focus-visible{outline:2px solid var(--game);outline-offset:3px}

.bar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(15,12,31,.7);flex-wrap:wrap}
.back{font-family:var(--f-pixel);font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap}
.back:hover{color:var(--ink)}
.bar h1{font-family:var(--f-marquee);font-weight:400;font-size:20px;margin:0;color:var(--game);letter-spacing:.02em;
  text-shadow:0 0 14px color-mix(in srgb,var(--game) 60%,transparent);flex:1;min-width:min(17ch,100%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the score and the header buttons wrap onto a second row before the game's name gets squeezed */
.sc{flex-shrink:0}
.toggles{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.sc{display:flex;gap:16px;font-family:var(--f-pixel);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sc b{color:var(--ink);font-weight:400;font-size:15px;margin-left:4px}
.mute{border:1px solid var(--line);background:transparent;border-radius:8px;padding:4px 8px;font-family:var(--f-pixel);font-size:11px;color:var(--muted)}

.stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 16px 18px;min-height:0}
.screen{position:relative;width:min(100%,calc((100dvh - var(--chrome,190px)) * var(--ar,1)));
  border-radius:10px;overflow:hidden;border:2px solid color-mix(in srgb,var(--game) 45%,var(--line));
  box-shadow:0 0 0 6px var(--bg2),0 0 40px color-mix(in srgb,var(--game) 25%,transparent);background:#05040c}
.screen canvas{display:block;width:100%;height:auto;max-width:100%;touch-action:none}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;
  text-align:center;padding:20px;background:rgba(6,4,16,.78);backdrop-filter:blur(2px);overflow-y:auto}
/* auto margins centre the content but let a tall overlay (score table on a small screen) scroll from the top */
.overlay>:first-child{margin-top:auto}.overlay>:last-child{margin-bottom:auto}
.overlay h2{font-family:var(--f-marquee);font-weight:400;font-size:clamp(24px,7vw,40px);margin:0;color:var(--game);line-height:1.05;
  text-shadow:0 0 18px color-mix(in srgb,var(--game) 70%,transparent);text-wrap:balance}
.overlay p{margin:0;color:var(--muted);max-width:34ch;font-size:14px}
.overlay .big{font-family:var(--f-pixel);color:var(--ink);font-size:16px}
.go{border:0;border-radius:10px;padding:12px 24px;font-family:var(--f-pixel);font-size:15px;background:var(--game);color:#120a1c;
  box-shadow:0 4px 0 color-mix(in srgb,var(--game) 45%,#000)}
.go:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--game) 45%,#000)}
.btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.go2{border:2px solid var(--game);border-radius:10px;padding:10px 20px;font-family:var(--f-pixel);font-size:15px;background:transparent;color:var(--game)}

/* top-10 table and initials entry inside the overlay */
.hs{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--f-pixel)}
.hs:empty{display:none}
.hs-head{font-size:12px;color:var(--game);letter-spacing:.08em}
.hs-table{display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:2px 22px;font-size:12px;color:var(--muted)}
.hs-table .row{display:grid;grid-template-columns:2.6ch 3.6ch 7ch;gap:6px;text-align:left}
.hs-table .row span:last-child{text-align:right;color:var(--ink)}
.hs-table .me,.hs-table .me span:last-child{color:var(--game);text-shadow:0 0 8px color-mix(in srgb,var(--game) 60%,transparent)}
.hs-day,.hs-hint,.hs-note{font-size:11px;color:var(--muted)}
.weekly{font-family:var(--f-pixel);font-size:11px;letter-spacing:.12em;color:#1a0f00;background:linear-gradient(90deg,#ffd23d,#ff9a3d);padding:5px 12px;border-radius:999px;box-shadow:0 0 14px rgba(255,190,61,.5)}
.hs-tabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.hs-badges{display:flex;flex-direction:column;gap:5px;text-align:left;max-width:300px}
.badge{display:grid;grid-template-columns:auto 1fr;column-gap:8px;font-size:12px;color:var(--muted)}
.badge span{grid-row:span 2;font-size:15px;line-height:1.1}
.badge b{font-weight:400}
.badge small{font-family:var(--f-body);font-size:11px;opacity:.85}
.badge.got{color:#ffd23d}
.badge.got b{color:var(--ink)}
.share{border:0;background:transparent;color:var(--muted);font-family:var(--f-pixel);font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:4px 8px}
.share:hover{color:var(--ink)}
.hs-tabs button{border:1px solid var(--line);background:transparent;border-radius:6px;padding:3px 9px;font-family:var(--f-pixel);font-size:11px;color:var(--muted)}
.hs-tabs button.on{border-color:var(--game);color:var(--game)}
.ini{display:flex;gap:10px}
.slot{display:flex;flex-direction:column;align-items:center;gap:2px}
.slot button{border:0;background:transparent;color:var(--muted);font-size:14px;padding:2px 10px;font-family:var(--f-pixel)}
.slot .ch{font-size:30px;line-height:1;color:var(--ink);border-bottom:3px solid var(--line);padding:2px 8px}
.slot.cur .ch{color:var(--game);border-color:var(--game);animation:blink-ch 1s steps(2,start) infinite}
@keyframes blink-ch{50%{opacity:.45}}

.pad{display:none;width:100%;max-width:520px;justify-content:space-between;align-items:center;gap:12px;user-select:none;-webkit-user-select:none}
.pause{display:none}
@media (pointer:coarse){.pad{display:flex}.help{display:none}.pause{display:inline-block}}
.dp{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:4px}
.dp button,.ab button{touch-action:none;border:0;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:18px;border-radius:12px}
.dp button.on,.ab button.on{background:color-mix(in srgb,var(--game) 40%,var(--panel));border-color:var(--game)}
.dp .u{grid-column:2;grid-row:1}.dp .l{grid-column:1;grid-row:2}.dp .r{grid-column:3;grid-row:2}.dp .d{grid-column:2;grid-row:3}
.ab{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.ab button{width:70px;height:70px;border-radius:50%;font-family:var(--f-pixel);font-size:12px}
.ab button.sm{width:56px;height:56px;font-size:10px}
.help{margin:0;color:var(--muted);font-size:13px;text-align:center}
kbd{font-family:var(--f-pixel);font-size:11px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--ink);background:var(--panel)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* optional CRT look (the CRT button in the header): scanlines, rounded glass, vignette, a little glow and flicker */
.crt .screen{border-radius:22px}
.crt .screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 56%,rgba(0,0,0,.6) 100%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.65),inset 0 0 10px rgba(255,255,255,.1);animation:crt-flicker 5s steps(1) infinite}
.crt .screen canvas{filter:saturate(1.25) contrast(1.08) brightness(1.08)}
@keyframes crt-flicker{0%,100%{opacity:1}47%{opacity:.9}48%{opacity:1}81%{opacity:.95}82%{opacity:1}}
/* CRT LITE, the default: a hint of scanlines, soft glass corners and a little glow, no flicker */
.crt-lite .screen{border-radius:16px}
.crt-lite .screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 66%,rgba(0,0,0,.32) 100%);
  box-shadow:inset 0 0 36px rgba(0,0,0,.4),inset 0 0 6px rgba(255,255,255,.06)}
.crt-lite .screen canvas{filter:saturate(1.1) contrast(1.03) brightness(1.04)}

/* ---------- the cabinet (built around .screen by arcade.js): lit marquee, bezel, control panel ----------
   --sw is the screen width: it fits the window's width and its height minus everything around the screen
   (--cab-chrome: header, marquee, score strip, bezel and control panel, measured). */
.cab-on{--bz:16px;--cab-chrome:252px;
  --sw:min(calc(100vw - 32px - 2 * var(--bz)),calc((100dvh - var(--cab-chrome)) * var(--ar,1)));
  background:
    radial-gradient(ellipse at 50% -5%,color-mix(in srgb,var(--game) 20%,transparent) 0%,transparent 55%),
    radial-gradient(circle at 30% 30%,rgba(255,79,163,.08) 0 2px,transparent 3px) 0 0/44px 44px,
    radial-gradient(circle at 70% 70%,rgba(94,231,255,.07) 0 2px,transparent 3px) 0 0/36px 36px,
    radial-gradient(circle at 50% 50%,rgba(255,227,106,.06) 0 1.5px,transparent 2.5px) 11px 5px/58px 58px,
    #09070f}
.cab-on .bar{border-bottom:0;background:transparent;padding-top:6px;padding-bottom:6px}
.cab-on .bar h1{display:none}
.cab-on .stage{gap:0;padding-top:4px}
.cabinet{display:flex;flex-direction:column;align-items:center;width:calc(var(--sw) + 2 * var(--bz));max-width:100%;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
/* the backlit marquee */
.cabinet .marquee{position:relative;width:100%;height:52px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:14px 14px 0 0;background:linear-gradient(180deg,#221b40,#120e26);border:2px solid #2d2556;border-bottom:0}
.cabinet .marquee::before{content:"";position:absolute;inset:7px 9px;border-radius:7px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 46px),
    radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--game) 50%,#140a26) 0%,color-mix(in srgb,var(--game) 14%,#0a0716) 75%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.65),0 0 24px color-mix(in srgb,var(--game) 35%,transparent);animation:marquee-hum 7s steps(1) infinite}
.cabinet .marquee span{position:relative;max-width:96%;white-space:nowrap;/* no overflow clipping: it would box in the glow */
  font-family:var(--f-marquee);font-size:clamp(17px,3.6vw,30px);letter-spacing:.06em;color:#fff;
  text-shadow:0 0 4px #fff,0 0 12px var(--game),0 0 26px var(--game),0 2px 0 rgba(0,0,0,.45)}
@keyframes marquee-hum{0%,100%{opacity:1}41%{opacity:.82}42%{opacity:1}43%{opacity:.9}44%{opacity:1}}
/* the bezel around the screen, with side-art stripes and the score strip */
.bezel{width:100%;padding:0 var(--bz) var(--bz);border:2px solid #2d2556;border-top:0;border-bottom:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--game) 70%,#000) 0 4px,transparent 4px calc(100% - 4px),color-mix(in srgb,var(--game) 70%,#000) calc(100% - 4px)),
    radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1.5px) 0 0/7px 7px,linear-gradient(180deg,#16122e,#0f0c22)}
.bezel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 2px 8px;font-family:var(--f-pixel);font-size:11px;color:var(--muted)}
.bezel-top .sc{gap:20px}
.bezel-top .sc span{color:#ff4f6d}
.bezel-top .sc span:last-child{color:#ffe36a}
.bezel-top .sc b{color:#fff;font-size:14px}
.freeplay{color:#5ee7ff;letter-spacing:.08em;animation:boot-blink-k 1.4s steps(2,start) infinite}
@keyframes boot-blink-k{to{visibility:hidden}}
.cab-on .screen{width:var(--sw);border:3px solid #030207;border-radius:10px;
  box-shadow:0 0 0 2px #2d2556,0 0 28px color-mix(in srgb,var(--game) 22%,transparent)}
/* the control panel: joystick, instruction card, buttons */
.cpanel{position:relative;width:max(calc(100% + 28px),min(600px,calc(100vw - 24px)));flex:none;min-height:70px;display:flex;align-items:center;gap:18px;padding:10px 44px 12px;
  clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--game) 55%,#2d2556) 0 3px,#2a2350 3px,#191433 45%,#0f0b22 100%)}
.stick{position:relative;flex:none;width:50px;height:50px;margin-top:14px;border-radius:50%;background:radial-gradient(circle,#05040b 0 34%,#3a3266 36% 58%,#0d0a1c 60%)}
.stick::before{content:"";position:absolute;left:50%;bottom:22px;width:6px;height:24px;margin-left:-3px;border-radius:3px;background:linear-gradient(90deg,#6b6b78,#e6e6ee,#6b6b78)}
.stick::after{content:"";position:absolute;left:50%;bottom:40px;width:28px;height:28px;margin-left:-14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 9%,var(--game) 32%,color-mix(in srgb,var(--game) 45%,#000) 100%);box-shadow:0 3px 6px rgba(0,0,0,.6)}
.card{flex:1;min-width:0;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.card .help{font-size:11.5px;line-height:1.5}
.cp-buttons{display:flex;gap:12px;flex:none}
.cp-buttons i{width:34px;height:34px;border-radius:50%;--c:var(--game);
  background:radial-gradient(circle at 35% 30%,#fff 0 10%,var(--c) 36%,color-mix(in srgb,var(--c) 45%,#000) 100%);
  box-shadow:0 4px 0 color-mix(in srgb,var(--c) 35%,#000),0 7px 10px rgba(0,0,0,.5)}
.cp-buttons i:last-child{--c:#ffe36a}
/* phones and narrow windows: a slimmer cabinet, and the touch pad instead of the panel */
@media (pointer:coarse),(max-width:620px){
  .cab-on{--bz:8px;--cab-chrome:calc(var(--chrome,190px) + 80px)}
  .cabinet .marquee{height:44px}
  .cabinet .marquee::before{inset:5px 7px}
  .cpanel{display:none}
  .bezel{padding-bottom:var(--bz);border-bottom:2px solid #2d2556;border-radius:0 0 12px 12px}
  .cab-on .pad{margin-top:14px}
}
@media (pointer:fine) and (min-width:621px){.cab-on .help{display:block}}
/* phones: a slim frame round the screen so the game gets the room (arcade.js measures what's left and sets --sw) */
@media (pointer:coarse),(max-width:620px){
  .cab-on{--bz:5px}
  .cab-on .bar{padding:4px 6px;gap:6px;flex-wrap:nowrap}
  .cab-on .bar .back{font-size:10px}
  .cab-on .toggles{flex-wrap:nowrap;gap:3px}
  .cab-on .toggles .mute{padding:3px 4px;font-size:8.5px;letter-spacing:0;white-space:nowrap}
  .cab-on .stage{padding:2px 4px 6px}
  .cabinet .marquee{height:30px;border-radius:10px 10px 0 0}
  .cabinet .marquee::before{inset:4px 6px}
  .cabinet .marquee span{font-size:16px}
  .bezel-top{padding:3px 2px 4px;font-size:9px}
  .bezel-top .sc{gap:12px}
  .bezel-top .sc b{font-size:12px}
  .cab-on .pad{margin-top:8px}
  .pad > .ab:last-child{margin-left:auto}
}
/* phones held sideways: no marquee, and the pad's halves sit either side of the screen */
body.phone-land .cabinet .marquee{display:none}
body.phone-land .bezel{border-top:2px solid #2d2556;border-radius:10px;padding-top:0}
body.phone-land .freeplay{display:none}
body.phone-land .pad{position:fixed;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom,0px));max-width:none;margin:0;
  padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));pointer-events:none;z-index:5}
body.phone-land .pad > *{pointer-events:auto}

/* title screens and game over, arcade style */
.push{font-family:var(--f-pixel);font-size:14px;letter-spacing:.14em;color:#ffe36a;text-shadow:0 0 10px rgba(255,227,106,.7);animation:boot-blink-k 1s steps(2,start) infinite}
.credit{font-family:var(--f-pixel);font-size:10px;letter-spacing:.12em;color:var(--muted)}
.cont{font-family:var(--f-marquee);font-size:22px;color:#ff4f6d;letter-spacing:.04em;text-shadow:0 0 14px rgba(255,79,109,.7)}
.cont.done{font-family:var(--f-pixel);font-size:12px;color:var(--muted);text-shadow:none}
.hs-table .row{grid-template-columns:4.2ch 3.6ch 7ch}
.hs-table .r1 span:not(:last-child){color:#ffd23d}
.hs-table .r2 span:not(:last-child){color:#d6dbe6}
.hs-table .r3 span:not(:last-child){color:#e0915a}

/* ---------- tickets and prizes (bought at the lobby's prize counter, shared/prizes.js) ---------- */
.xpbar{display:flex;align-items:center;gap:8px;font-family:var(--f-pixel);font-size:11px;color:#5ee7ff;letter-spacing:.06em}
.xpbar span{color:#fff}
.xpbar i{display:block;width:120px;height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid rgba(94,231,255,.4)}
.xpbar b{display:block;height:100%;background:linear-gradient(90deg,#3dd6ff,#b86bff);transition:width 1.1s cubic-bezier(.2,.8,.2,1) .3s}
.xpbar em{font-style:normal}
.tix{font-family:var(--f-pixel);font-size:12px;letter-spacing:.08em;color:#1a0f00;background:repeating-linear-gradient(90deg,#ffd23d 0 10px,#ffc21a 10px 12px);
  padding:4px 12px;border-radius:4px;box-shadow:0 0 12px rgba(255,210,61,.45);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%)}
/* screen tints: one-colour phosphor looks */
body.tint-amber .screen canvas{filter:grayscale(1) sepia(1) saturate(4.5) hue-rotate(-12deg) brightness(1.08) contrast(1.1)}
body.tint-green .screen canvas{filter:grayscale(1) sepia(1) saturate(6) hue-rotate(68deg) brightness(1.05) contrast(1.15)}
body.tint-ice .screen canvas{filter:grayscale(1) sepia(1) saturate(3.5) hue-rotate(165deg) brightness(1.1) contrast(1.1)}
body.tint-sunset .screen canvas{filter:sepia(.45) saturate(1.6) hue-rotate(-25deg) contrast(1.05)}
/* cabinet finishes */
body.skin-wood .cabinet .marquee,body.skin-wood .bezel{border-color:#3a2412;
  background:repeating-linear-gradient(92deg,#5a3418 0 7px,#6b4020 7px 9px,#4e2c14 9px 15px,#61391b 15px 22px)}
body.skin-wood .cpanel{background:linear-gradient(180deg,#8a5a2a 0 3px,#4e2c14 3px,#3a2010 100%)}
body.skin-chrome .cabinet .marquee,body.skin-chrome .bezel{border-color:#9aa0b0;
  background:linear-gradient(90deg,#4a4e5c,#c8ccd8 18%,#6a6e7c 40%,#e8ecf4 62%,#5a5e6c 85%,#a8acb8)}
body.skin-chrome .cpanel{background:linear-gradient(180deg,#e8ecf4 0 3px,#8a8e9c 3px,#4a4e5c 100%)}
body.skin-chrome .bezel-top{color:#1a1830}
body.skin-platinum .cabinet .marquee,body.skin-platinum .bezel{border-color:#c8d4ec;
  background:linear-gradient(90deg,#8a9ab8,#f4f8ff 16%,#b8c4dc 38%,#ffffff 58%,#9aa8c4 82%,#dce4f4)}
body.skin-platinum .cpanel{background:linear-gradient(180deg,#ffffff 0 3px,#b8c4dc 3px,#6a7a98 100%)}
body.skin-platinum .bezel-top{color:#1a2240}
body.skin-platinum .cabinet{filter:drop-shadow(0 0 18px rgba(170,210,255,.45)) drop-shadow(0 18px 40px rgba(0,0,0,.6))}
body.skin-gold .cabinet .marquee,body.skin-gold .bezel{border-color:#c89a2a;
  background:linear-gradient(90deg,#7a5410,#ffd23d 20%,#b8860b 42%,#fff0a8 60%,#a07010 82%,#e8b830)}
body.skin-gold .cpanel{background:linear-gradient(180deg,#fff0a8 0 3px,#c89a2a 3px,#7a5410 100%)}
body.skin-gold .bezel-top{color:#2a1a00}
body.skin-neon .cabinet .marquee,body.skin-neon .bezel{border-color:#ff4fd1;background:#0a0716;
  box-shadow:inset 0 0 0 2px #22e0ff,0 0 18px rgba(255,79,209,.55),inset 0 0 22px rgba(34,224,255,.25)}
body.skin-neon .cpanel{background:linear-gradient(180deg,#22e0ff 0 3px,#140a26 3px,#0a0716 100%)}

/* ---------- easy mode, attract demos, and polish ---------- */
.tix.easy{color:#04161c;background:repeating-linear-gradient(90deg,#5ee7ff 0 10px,#3dd0f0 10px 12px);box-shadow:0 0 12px rgba(94,231,255,.4)}
.mute.easy[aria-pressed="true"]{color:#04161c;background:#5ee7ff;border-color:#5ee7ff}
.demo-tag{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:3;pointer-events:none;white-space:nowrap;
  font-family:var(--f-pixel);font-size:clamp(12px,2.4vw,18px);letter-spacing:.16em;color:#ffe36a;text-shadow:0 0 10px rgba(255,227,106,.8),0 2px 0 #000;
  animation:demo-blink 1.2s steps(1) infinite}
@keyframes demo-blink{0%,64%{visibility:visible}65%,100%{visibility:hidden}}
/* keyboard users can see where they are */
.overlay button:focus-visible,.bar button:focus-visible,.bar a:focus-visible,.pad button:focus-visible{outline:2px solid #ffe36a;outline-offset:2px}
/* reduced motion: no flicker, blinking or humming lights */
@media (prefers-reduced-motion:reduce){
  .push,.freeplay,.demo-tag,.cabinet .marquee::before{animation:none!important}
  body.crt .screen::before,body.crt .screen::after,body.crt-lite .screen::before,body.crt-lite .screen::after{animation:none!important}
}
/* phones: five header buttons on one row */
@media (max-width:440px){.toggles{gap:4px}.toggles .mute{padding:4px 5px;font-size:9.5px;letter-spacing:0}.bar .back{font-size:11px}}

/* ---------- title screens: an animated logo (drawn by arcade.js) over the game's own attract scene ---------- */
.overlay.title{background:linear-gradient(180deg,rgba(6,4,16,.25) 0%,rgba(6,4,16,.55) 30%,rgba(6,4,16,.84) 55%);backdrop-filter:none}
.overlay .logo{width:min(100%,560px);height:auto;flex:none;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- mastered: every badge earned, so the cabinet goes gold (body.mastered, set by arcade.js) ---------- */
body.mastered .cabinet .marquee{border-color:#c89a2a}
body.mastered .cabinet .marquee::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 2px,transparent 2px 46px),linear-gradient(100deg,#6a4808,#e0a820 22%,#ffe98a 42%,#fff6c8 50%,#e0a820 64%,#7a5410);
  box-shadow:inset 0 0 18px rgba(0,0,0,.45),0 0 32px rgba(255,210,61,.55)}
body.mastered .cabinet .marquee::after{content:"";position:absolute;inset:7px 9px;border-radius:7px;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%) -150% 0/250% 100% no-repeat;animation:gold-sweep 3.6s ease-in-out infinite}
@keyframes gold-sweep{0%{background-position:-150% 0}60%,100%{background-position:150% 0}}
body.mastered .cabinet .marquee span{z-index:1;color:#2a1800;text-shadow:0 1px 0 rgba(255,255,255,.6),0 0 16px rgba(255,240,180,.9)}
body.mastered .bezel{box-shadow:inset 5px 0 0 #ffd23d,inset -5px 0 0 #ffd23d,inset 7px 0 0 #8a6010,inset -7px 0 0 #8a6010}
.plaque{font-family:var(--f-pixel);font-size:11px;letter-spacing:.12em;color:#2a1800;white-space:nowrap;padding:2px 10px;border-radius:4px;
  background:linear-gradient(90deg,#b8860b,#ffd23d,#fff0a8,#ffd23d,#b8860b);box-shadow:0 0 10px rgba(255,210,61,.6)}
@media (prefers-reduced-motion:reduce){body.mastered .cabinet .marquee::after{animation:none}}

/* ---------- more prizes: screen tints and cabinet finishes ---------- */
body.tint-noir .screen canvas{filter:grayscale(1) contrast(1.35) brightness(1.05)}
body.tint-film .screen canvas{filter:sepia(.9) contrast(1.12) brightness(.95) saturate(1.1)}
body.tint-pocket .screen canvas{filter:grayscale(1) contrast(1.25) sepia(1) hue-rotate(38deg) saturate(1.4) brightness(.92)}
body.tint-vapor .screen canvas{filter:hue-rotate(-40deg) saturate(1.9) contrast(1.05)}
body.skin-retro .cabinet .marquee,body.skin-retro .bezel{border-color:#8a7a5a;background:linear-gradient(90deg,#b8a888,#ece2c8 18%,#d8cbb0 60%,#a89878)}
body.skin-retro .cpanel{background:linear-gradient(180deg,#f0e6cc 0 3px,#cbbd9e 3px,#9a8a6a 100%)}
body.skin-retro .bezel-top{color:#3a2a10}
body.skin-carbon .cabinet .marquee,body.skin-carbon .bezel{border-color:#4a4a58;
  background:repeating-linear-gradient(45deg,#1a1a20 0 4px,#2a2a34 4px 8px),repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 4px,transparent 4px 8px),#1a1a20}
body.skin-carbon .cpanel{background:linear-gradient(180deg,#5a5a68 0 3px,#22222a 3px,#121218 100%)}
body.skin-holo .cabinet .marquee,body.skin-holo .bezel,body.skin-holo .cpanel{border-color:#c8b0ff;
  background:linear-gradient(110deg,#ff9ad8,#9ad8ff,#c8ffb0,#ffe89a,#ff9ad8,#9ad8ff);background-size:300% 100%;animation:holo-shift 7s linear infinite}
body.skin-holo .bezel-top{color:#2a1a40}
@keyframes holo-shift{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){body.skin-holo .cabinet .marquee,body.skin-holo .bezel,body.skin-holo .cpanel{animation:none}}
/* Arcade Pass, Season 1: tints and finishes */
body.tint-cyber .screen canvas{filter:hue-rotate(150deg) saturate(1.6) contrast(1.08)}
body.tint-infrared .screen canvas{filter:grayscale(1) sepia(1) saturate(7) hue-rotate(-30deg) contrast(1.3) brightness(1.05)}
body.tint-prism .screen canvas{animation:prism 12s linear infinite}
@keyframes prism{from{filter:hue-rotate(0deg) saturate(1.3)}to{filter:hue-rotate(360deg) saturate(1.3)}}
@media (prefers-reduced-motion:reduce){body.tint-prism .screen canvas{animation:none;filter:hue-rotate(60deg) saturate(1.3)}}
body.skin-synth .cabinet .marquee,body.skin-synth .bezel{border-color:#ff9a5a;background:linear-gradient(180deg,#2a0a4a,#6a2ab8 45%,#ff4fa3 75%,#ff9a3d)}
body.skin-synth .cpanel{background:linear-gradient(180deg,#e8ecf4 0 3px,#6a2ab8 3px,#2a0a4a 100%)}
body.skin-midnight .cabinet .marquee,body.skin-midnight .bezel{border-color:#5a7ad8;
  background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 45% 80%,#c8d8ff,transparent),radial-gradient(1px 1px at 85% 20%,#fff,transparent),linear-gradient(90deg,#0a1030,#2a3a80 30%,#5a7ad8 50%,#2a3a80 70%,#0a1030);background-size:120px 90px,140px 110px,100px 130px,90px 70px,100% 100%}
body.skin-midnight .cpanel{background:linear-gradient(180deg,#a8c0ff 0 3px,#2a3a80 3px,#0a1030 100%)}
body.skin-arcadered .cabinet .marquee,body.skin-arcadered .bezel{border-color:#ff8080;background:linear-gradient(90deg,#5a0a10,#c8203a 20%,#ff5a5a 45%,#c8203a 70%,#5a0a10)}
body.skin-arcadered .cpanel{background:linear-gradient(180deg,#ffd0d0 0 3px,#a01828 3px,#4a0810 100%)}
body.skin-magma .cabinet .marquee,body.skin-magma .bezel,body.skin-magma .cpanel{border-color:#ff8a3d;
  background:radial-gradient(ellipse at 30% 40%,#ffb03d,transparent 30%),radial-gradient(ellipse at 70% 70%,#ff5a1a,transparent 35%),linear-gradient(160deg,#2a0804,#8a1a08,#2a0804);background-size:200% 200%;animation:magma 9s ease-in-out infinite alternate}
@keyframes magma{to{background-position:100% 100%}}
body.skin-diamond .cabinet .marquee,body.skin-diamond .bezel,body.skin-diamond .cpanel{border-color:#e8f8ff;
  background:linear-gradient(125deg,#ffffff,#bfe8ff 15%,#f4fbff 28%,#8ad0f0 42%,#ffffff 55%,#c8eeff 70%,#7ad8ff 85%,#ffffff);background-size:250% 250%;animation:holo-shift 10s linear infinite}
body.skin-diamond .cabinet{filter:drop-shadow(0 0 22px rgba(170,230,255,.55)) drop-shadow(0 18px 40px rgba(0,0,0,.6))}
@media (prefers-reduced-motion:reduce){body.skin-magma .cabinet .marquee,body.skin-magma .bezel,body.skin-magma .cpanel,body.skin-diamond .cabinet .marquee,body.skin-diamond .bezel,body.skin-diamond .cpanel{animation:none}}
:is(body.skin-diamond) .bezel-top .sc span,body.skin-diamond .freeplay{color:#1a2a40}
body.skin-diamond .bezel-top .sc b{color:#0a1020}
body.skin-diamond .card{background:rgba(10,6,18,.78);border-color:rgba(0,0,0,.4)}
/* light cabinet finishes: dark score-strip text, and a dark card behind the controls so both stay readable */
:is(body.skin-holo,body.skin-retro,body.skin-chrome,body.skin-gold,body.skin-platinum) .bezel-top .sc span,:is(body.skin-holo,body.skin-retro,body.skin-chrome,body.skin-gold,body.skin-platinum) .freeplay{color:#2a1a40}
:is(body.skin-holo,body.skin-retro,body.skin-chrome,body.skin-gold,body.skin-platinum) .bezel-top .sc b{color:#120a1c}
:is(body.skin-holo,body.skin-retro,body.skin-chrome,body.skin-gold,body.skin-platinum) .card{background:rgba(10,6,18,.78);border-color:rgba(0,0,0,.4)}

/* ---------- story mode (shared/story.js): the map, upgrades and cutscenes, over the game screen ---------- */
.story{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px;overflow-y:auto;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--game) 22%,transparent),transparent 60%),rgba(6,4,16,.9);backdrop-filter:blur(3px);font-family:var(--f-pixel)}
.story>:first-child{margin-top:auto}.story>:last-child{margin-bottom:auto}
.story button{font-family:var(--f-pixel);cursor:pointer}
.story button:focus-visible{outline:2px solid #ffe36a;outline-offset:2px}
.st-head{display:flex;flex-direction:column;align-items:center;gap:2px}
.st-head b{font-family:var(--f-marquee);font-weight:400;font-size:clamp(18px,4.6vw,28px);color:var(--game);text-shadow:0 0 16px color-mix(in srgb,var(--game) 60%,transparent);letter-spacing:.03em}
.st-bank{font-size:12px;letter-spacing:.08em}
.st-tabs{display:flex;gap:6px}
.st-tabs button{font-size:11px;letter-spacing:.06em;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.st-tabs button[aria-pressed="true"]{background:var(--game);border-color:var(--game);color:#120a1c}
.st-path{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 0;max-width:100%}
.st-path i{width:clamp(6px,2vw,18px);height:3px;background:color-mix(in srgb,var(--game) 45%,#2a2440);border-radius:2px}
.st-node{width:clamp(30px,6.5vw,40px);height:clamp(30px,6.5vw,40px);border-radius:50%;border:2px solid color-mix(in srgb,var(--game) 50%,#3a3456);background:#140f28;color:var(--ink);font-size:13px;display:grid;place-items:center;padding:0;transition:transform .12s}
.st-node.clear{background:color-mix(in srgb,var(--game) 35%,#140f28);border-color:var(--game)}
.st-node.on{transform:scale(1.18);background:var(--game);color:#120a1c;box-shadow:0 0 16px color-mix(in srgb,var(--game) 70%,transparent)}
.st-node:disabled{opacity:.45;cursor:default;font-size:11px}
.st-info{max-width:46ch}
.st-info h3{margin:0 0 4px;font-family:var(--f-marquee);font-weight:400;font-size:clamp(15px,3.6vw,20px);color:var(--ink)}
.st-info p{margin:0 0 4px;font-family:var(--f-body);font-size:13px;color:var(--muted);line-height:1.35}
.st-info small{font-size:10px;color:var(--game);letter-spacing:.06em}
.st-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.st-opt{font-size:11px;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.st-opt.on{border-color:#ff4f6d;color:#ff8a9a}
.st-opt.mode{border-color:#ffd23d;color:#ffd23d}
.st-lock{font-size:10px;color:var(--muted)}
.st-ups{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px;width:100%;max-width:560px}
.st-up{display:grid;grid-template-columns:1fr auto;gap:2px 8px;text-align:left;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.st-up b{font-weight:400;font-size:12px}.st-up .pips{color:var(--game);font-size:11px;letter-spacing:1px}
.st-up small{grid-column:1;font-family:var(--f-body);font-size:11.5px;color:var(--muted)}
.st-up em{grid-column:2;grid-row:2;font-style:normal;font-size:11px;color:#ffd23d;align-self:end}
.st-up:disabled{opacity:.6;cursor:default}.st-up:disabled em{color:var(--game)}
.st-note{margin:0;font-family:var(--f-body);font-size:11.5px;color:var(--muted);max-width:44ch}
.st-keys{font-size:9px;color:var(--muted);letter-spacing:.06em;opacity:.8}
@media (pointer:coarse){.st-keys{visibility:hidden;height:0;overflow:hidden}} /* still the last child, so the map stays centred */
.st-scene{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:48ch;margin:auto}
.st-kicker{font-size:12px;letter-spacing:.2em;color:var(--game)}
.st-lines p{margin:0 0 9px;font-family:var(--f-body);font-size:clamp(13px,3vw,15.5px);line-height:1.45;color:var(--ink);animation:st-in .6s ease both}
@keyframes st-in{from{opacity:0;transform:translateY(8px)}}
.st-credits{display:flex;flex-direction:column;gap:6px;animation:st-in 1s ease both}
.st-credits div{display:flex;flex-direction:column}.st-credits small{font-size:9px;color:var(--muted);letter-spacing:.14em}.st-credits span{font-size:13px;color:var(--ink)}
.st-end{font-family:var(--f-marquee);font-weight:400;font-size:clamp(26px,7vw,40px);color:var(--game);text-shadow:0 0 22px color-mix(in srgb,var(--game) 70%,transparent);margin-bottom:6px}
.st-thanks{font-weight:400;font-size:13px;color:#ffd23d;margin-top:6px;letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){.st-lines p,.st-credits{animation:none}}
/* on phones the game screen is too small for the map: it takes the whole screen instead */
@media (max-width:760px),(max-height:520px){.story{position:fixed;inset:0;z-index:60;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--game) 22%,transparent),transparent 60%),rgba(6,4,16,.97)}}
/* the header: one SETTINGS button (shared/settings.js), and an EASY tag while easy mode is on */
.mute.set-btn{color:#5ee7ff;border-color:color-mix(in srgb,#5ee7ff 45%,var(--line));cursor:pointer}
.mute.set-btn:hover{border-color:#5ee7ff;box-shadow:0 0 10px rgba(94,231,255,.3)}
.easy-tag{align-self:center;font-family:var(--f-pixel);font-size:10px;letter-spacing:.08em;color:#120a1c;background:#ffd23d;border-radius:6px;padding:3px 6px}

/* the screen warming up (warmUp in arcade.js): static and the game's name, fading into the picture */
.screen .warm{position:absolute;inset:0;z-index:6;pointer-events:none;background:#05040c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:opacity .45s ease,filter .45s ease}
.screen .warm canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:.45}
.screen .warm b{position:relative;font-family:var(--f-marquee);font-weight:400;font-size:clamp(20px,5vw,34px);color:#fff;text-shadow:0 0 18px var(--game),0 2px 0 #0a0612;padding:4px 14px;background:rgba(6,4,16,.55);border-radius:8px}
.screen .warm small{position:relative;font-family:var(--f-pixel);font-size:11px;letter-spacing:.24em;color:var(--game);background:rgba(6,4,16,.55);padding:2px 8px;border-radius:5px;animation:warm-blink .8s steps(2,start) infinite}
@keyframes warm-blink{to{visibility:hidden}}
.screen .warm.off{opacity:0;filter:brightness(2.4)}