/* =====================================================================
   NIKOMEDIA ARCADE – public page styles
   ===================================================================== */

@font-face { font-family: "Press Start 2P"; src: url(../fonts/press-start-2p-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bungee"; src: url(../fonts/bungee-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Monoton"; src: url(../fonts/monoton-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Mr Dafoe"; src: url(../fonts/mr-dafoe-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url(../fonts/vt323-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(../fonts/chakra-petch-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(../fonts/chakra-petch-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #07040f;
  --bg-2: #0d0820;
  --panel: #120c26;
  --ink: #f4f0ff;
  --dim: #b3abd6;
  --mute: #6f6894;
  --pink: #ff2bd6;
  --cyan: #22f3ff;
  --yellow: #ffe94a;
  --green: #39ff88;
  --orange: #ff8a1f;
  --purple: #a46bff;
  --red: #ff3b5c;
  --blue: #3d8bff;
  --px: "Press Start 2P", ui-monospace, monospace;
  --sign: "Bungee", Impact, "Arial Black", sans-serif;
  --tube: "Monoton", "Bungee", Impact, sans-serif;
  --script: "Mr Dafoe", "Brush Script MT", cursive;
  --term: "VT323", ui-monospace, monospace;
  --body: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --hud-h: 58px;
  --chrome: linear-gradient(180deg, #ffffff 0%, #d9ecff 16%, #8cb8ff 36%, #3a3fa8 48.5%, #140630 50%, #ff6fd3 51.5%, #ffb6ec 66%, #fff1fb 84%, #ffc9ee 100%);
}

/* per-colour accents for cabinets & cards */
[data-color="pink"]   { --c: #ff2bd6; --c-rgb: 255, 43, 214;  --c2: #6d0a5c; }
[data-color="cyan"]   { --c: #22f3ff; --c-rgb: 34, 243, 255;  --c2: #05596a; }
[data-color="yellow"] { --c: #ffe94a; --c-rgb: 255, 233, 74;  --c2: #6b5a00; }
[data-color="green"]  { --c: #39ff88; --c-rgb: 57, 255, 136;  --c2: #0b6332; }
[data-color="orange"] { --c: #ff8a1f; --c-rgb: 255, 138, 31;  --c2: #6e3300; }
[data-color="purple"] { --c: #a46bff; --c-rgb: 164, 107, 255; --c2: #3b1a78; }
[data-color="red"]    { --c: #ff3b5c; --c-rgb: 255, 59, 92;   --c2: #6e0b1d; }
[data-color="blue"]   { --c: #3d8bff; --c-rgb: 61, 139, 255;  --c2: #0c2f6e; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hud-h); }
body { margin: 0; min-height: 100vh; font-family: var(--body); color: var(--ink); background: var(--bg); overflow-x: hidden; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--cyan); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
::selection { background: var(--pink); color: #fff; }

.skip-link { position: fixed; left: 12px; top: -60px; z-index: 3000; background: var(--yellow); color: #000; font: 12px var(--px); padding: 12px 14px; text-decoration: none; }
.skip-link:focus { top: 12px; }

.blink { animation: blink 1.1s steps(2, jump-none) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* =====================================================================
   BOOT / POWER-ON
   ===================================================================== */
.boot { display: none; }
.booting .boot {
  display: block; position: fixed; inset: 0; z-index: 3000; background: #000; color: #e9e6ff; cursor: pointer;
  animation: boot-failsafe .4s 7s forwards;
}
.booting body { overflow: hidden; }
.boot-line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; background: #fff; box-shadow: 0 0 24px 6px rgba(200, 220, 255, .8); transform: scaleX(0); animation: boot-line .55s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes boot-line {
  0% { transform: scaleX(0); opacity: 1; }
  45% { transform: scaleX(1) scaleY(1); opacity: 1; }
  100% { transform: scaleX(1) scaleY(260); opacity: 0; }
}
.boot-text { position: absolute; left: max(24px, 9vw); top: 18vh; margin: 0; font: clamp(18px, 2.6vw, 30px)/1.35 var(--term); letter-spacing: .06em; white-space: pre-wrap; text-shadow: 0 0 6px rgba(160, 200, 255, .7); }
.boot-text .ok { color: var(--green); }
.boot-text .hl { color: var(--yellow); }
.boot-text::after { content: "█"; animation: blink .7s steps(2, jump-none) infinite; color: #fff; }
.boot-skip { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; margin: 0; font: 18px var(--term); color: #6f6894; letter-spacing: .1em; }
.boot.out { animation: boot-out .5s ease forwards; }
@keyframes boot-out { 0% { opacity: 1; filter: brightness(1); } 30% { opacity: 1; filter: brightness(3); } 100% { opacity: 0; visibility: hidden; } }
@keyframes boot-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* =====================================================================
   CRT OVERLAY (whole page)
   ===================================================================== */
.crt-overlay {
  position: fixed; inset: 0; z-index: 1500; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 62%, rgba(0, 0, 0, .45) 100%);
  animation: crt-flicker 4s steps(40) infinite;
  will-change: opacity;
}
@keyframes crt-flicker { 0%, 100% { opacity: .95; } 37% { opacity: 1; } 38% { opacity: .9; } 39% { opacity: 1; } 71% { opacity: .97; } }
.crt-off .crt-overlay, .playing .crt-overlay { display: none; }

/* =====================================================================
   HUD
   ===================================================================== */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800; height: calc(var(--hud-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, rgba(7, 4, 15, .82), rgba(7, 4, 15, 0));
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.hud.solid { background: rgba(7, 4, 15, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 43, 214, .45), 0 0 18px rgba(255, 43, 214, .18), 0 12px 30px rgba(0, 0, 0, .45); }
.hud-logo { display: inline-flex; align-items: baseline; gap: .1em; text-decoration: none; white-space: nowrap; flex: none; }
.hud-logo-a { font: 17px/1 var(--sign); background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1px var(--cyan)) drop-shadow(0 2px 0 #12042a); }
.hud-logo-b { font: 26px/1 var(--script); color: #ffe3f8; text-shadow: 0 0 3px #fff, 0 0 8px var(--pink), 0 0 18px var(--pink); margin-left: 4px; transform: rotate(-6deg) translateY(2px); display: inline-block; }
.hud-scores { display: flex; gap: clamp(16px, 3vw, 44px); font-family: var(--px); font-size: 11px; text-align: center; }
.hud-score { display: grid; gap: 6px; }
.hud-lbl { color: var(--red); text-shadow: 0 0 8px rgba(255, 59, 92, .6); letter-spacing: .08em; }
.hud-val { color: #fff; letter-spacing: .12em; }
.hud-val.bump { animation: bump .35s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: var(--yellow); } 100% { transform: scale(1); } }
.hud-right { display: flex; align-items: center; gap: 8px; flex: none; }
.hud-free { font: 10px var(--px); color: var(--yellow); text-shadow: 0 0 8px rgba(255, 233, 74, .6); margin-right: 8px; animation: blink 2s steps(2, jump-none) infinite; }
.hud-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); cursor: pointer; transition: border-color .2s, background .2s, opacity .2s; }
.hud-btn .ico { width: 20px; height: 20px; }
.hud-btn:hover { border-color: var(--cyan); background: rgba(34, 243, 255, .1); }
.hud-btn[aria-pressed="false"] { opacity: .5; }
.ico-sound .off { display: none; }
[aria-pressed="false"] .ico-sound .on { display: none; }
[aria-pressed="false"] .ico-sound .off { display: inline; }
.hud-donate {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 10px; flex: none;
  font: 9px/1 var(--px); letter-spacing: .08em; color: var(--yellow); text-decoration: none; text-shadow: 0 0 8px rgba(255, 233, 74, .55);
  border: 1px solid rgba(255, 233, 74, .6); border-radius: 9px; background: rgba(255, 233, 74, .08); box-shadow: inset 0 0 12px rgba(255, 233, 74, .1);
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.hud-donate .ico { width: 21px; height: 21px; flex: none; filter: drop-shadow(0 0 4px rgba(255, 233, 74, .7)); }
.hud-donate:hover, .hud-donate:focus-visible { background: var(--yellow); border-color: var(--yellow); color: #1c0d00; text-shadow: none; box-shadow: 0 0 22px rgba(255, 233, 74, .6); }
.hud-donate:hover .ico, .hud-donate:focus-visible .ico { filter: none; animation: coin-flip .7s ease; }
@keyframes coin-flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.hud-lang { display: flex; border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; overflow: hidden; }
.hud-lang a { font: 10px/38px var(--px); padding: 0 10px; color: var(--dim); text-decoration: none; transition: background .2s, color .2s; }
.hud-lang a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hud-lang a[aria-current="true"] { background: var(--pink); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--hud-h) + 150px) 20px 140px;
  cursor: crosshair;
  /* the hero is a shooting gallery: rapid clicks must not select logo letters */
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.hero a, .hero button { cursor: pointer; }
.hero-bg { position: absolute; inset: -5%; z-index: -4; transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--py, 0px)), 0); will-change: transform; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(1.18) brightness(.92); animation: kenburns 38s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hero-shade {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 52% 46% at 50% 44%, rgba(7, 4, 15, .62), rgba(7, 4, 15, .2) 62%, transparent 80%),
    linear-gradient(180deg, rgba(7, 4, 15, .8) 0%, rgba(7, 4, 15, .1) 20%, rgba(7, 4, 15, 0) 55%, rgba(7, 4, 15, .55) 82%, var(--bg) 100%);
}
.hero-glow {
  position: absolute; z-index: -2; left: 50%; top: 44%; width: min(1200px, 130vw); height: min(620px, 80vh); transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(255, 43, 214, .30), rgba(255, 43, 214, .08) 50%, transparent 72%),
    radial-gradient(closest-side at 50% 34%, rgba(34, 243, 255, .2), transparent 70%);
  mix-blend-mode: screen; pointer-events: none;
}
.ready .hero-glow { animation: glow-on 1.6s .9s both, neon-flicker 9s 3.5s infinite; }
@keyframes glow-on { 0% { opacity: 0; } 20% { opacity: .6; } 24% { opacity: .1; } 40% { opacity: .8; } 44% { opacity: .2; } 100% { opacity: 1; } }
.hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1180px; width: 100%; }
.hero-kicker { margin: clamp(26px, 3.2vw, 40px) 0 0; font: clamp(9px, 1.1vw, 12px)/1.6 var(--px); color: var(--cyan); letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 0 10px rgba(34, 243, 255, .7), 0 2px 0 #000; }
.hero-kicker .star { color: var(--yellow); display: inline-block; animation: spin-star 3s linear infinite; }
@keyframes spin-star { to { transform: rotate(360deg); } }

/* --- the logo: chrome block letters + neon script --- */
.logo { position: relative; isolation: isolate; margin: 0; font-weight: 400; line-height: .9; display: flex; flex-direction: column; align-items: center; }
.logo-chrome { display: flex; font: clamp(40px, 10.6vw, 156px)/1 var(--sign); letter-spacing: .005em; filter: drop-shadow(0 .045em 0 #1d0740) drop-shadow(0 .09em 0 #0b0220) drop-shadow(0 .16em .18em rgba(0, 0, 0, .7)); }
.L {
  position: relative; display: inline-block;
  background: linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, .95) 50%, transparent 60% 100%) no-repeat, var(--chrome);
  background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s ease-in-out infinite;
}
.L::before { content: attr(data-ch); position: absolute; left: 0; top: 0; z-index: -1; color: transparent; -webkit-text-stroke: .1em var(--cyan); filter: drop-shadow(0 0 .05em var(--cyan)) drop-shadow(0 0 .2em rgba(34, 243, 255, .75)); }
@keyframes shine { 0%, 62% { background-position: 160% 0, 0 0; } 82%, 100% { background-position: -60% 0, 0 0; } }
.L:nth-child(2) { animation-delay: .08s; } .L:nth-child(3) { animation-delay: .16s; } .L:nth-child(4) { animation-delay: .24s; }
.L:nth-child(5) { animation-delay: .32s; } .L:nth-child(6) { animation-delay: .4s; } .L:nth-child(7) { animation-delay: .48s; }
.L:nth-child(8) { animation-delay: .56s; } .L:nth-child(9) { animation-delay: .64s; } .L:nth-child(10) { animation-delay: .72s; }
.L:nth-child(11) { animation-delay: .8s; } .L:nth-child(12) { animation-delay: .88s; }

.js .logo-chrome, .js .logo-neon, .js .hero-kicker, .js .hero-tag, .js .btn-coin, .js .hero-stats { opacity: 0; }
.ready .logo-chrome { animation: chrome-in .9s cubic-bezier(.2, 1.3, .35, 1) both; }
.ready .logo-neon { animation: neon-on 1.5s .75s both, neon-flicker 9s 3.5s infinite; }
.ready .hero-kicker { animation: fade-up .7s .1s both; }
.ready .hero-tag { animation: fade-up .8s 1.25s both; }
.ready .btn-coin { animation: fade-up .8s 1.45s both; }
.ready .hero-stats { animation: fade-up .8s 1.65s both; }
@keyframes chrome-in { 0% { opacity: 0; transform: translateY(-.5em) scale(1.25); filter: blur(12px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.logo-neon {
  font: clamp(58px, 12.8vw, 188px)/1 var(--script);
  margin: -.47em 0 0 .95em; padding: 0 .25em .05em; transform: rotate(-8deg);
  color: #fff2fc;
  -webkit-text-stroke: .006em rgba(255, 255, 255, .7);
  text-shadow: 0 0 .02em #fff, 0 0 .05em #ff8ae9, 0 0 .12em var(--pink), 0 0 .26em var(--pink), 0 0 .5em rgba(255, 43, 214, .6), 0 0 .9em rgba(255, 43, 214, .35);
}
@keyframes neon-on {
  0% { opacity: 0; } 8% { opacity: .9; } 10% { opacity: .1; } 18% { opacity: 1; } 20% { opacity: .2; }
  30% { opacity: .95; } 31% { opacity: .4; } 45% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .55; }
}
.spark { position: absolute; width: clamp(18px, 2.4vw, 34px); aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px var(--cyan)); opacity: 0; pointer-events: none; }
.ready .spark { animation: twinkle 4.2s ease-in-out infinite; }
.spark.s1 { left: 4%; top: 2%; animation-delay: 2.2s !important; }
.spark.s2 { right: 9%; top: 30%; animation-delay: 3.6s !important; }
.spark.s3 { left: 32%; bottom: 8%; animation-delay: 5.1s !important; width: clamp(12px, 1.6vw, 22px); }
@keyframes twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: 0; transform: scale(.3) rotate(90deg); } }

.hero-tag { max-width: 660px; margin: 14px auto clamp(26px, 3.2vw, 36px); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55; color: #efe9ff; text-shadow: 0 2px 14px #000, 0 0 3px #000; }

/* --- INSERT COIN button --- */
.btn-coin {
  position: relative; display: inline-flex; align-items: center; gap: 18px; padding: 15px 28px 15px 16px;
  color: var(--yellow); text-decoration: none; background: rgba(10, 6, 20, .75);
  border: 3px solid var(--yellow); border-radius: 6px;
  box-shadow: 0 0 0 3px #000, 0 0 26px rgba(255, 233, 74, .45), inset 0 0 20px rgba(255, 233, 74, .14);
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn-coin:hover, .btn-coin:focus-visible { background: var(--yellow); color: #1c0d00; transform: translateY(-2px); box-shadow: 0 0 0 3px #000, 0 0 44px rgba(255, 233, 74, .75); }
.btn-coin:active { transform: translateY(2px); }
.btn-coin-txt { display: grid; gap: 9px; text-align: left; }
.btn-coin-txt > span { font: clamp(14px, 1.7vw, 19px)/1 var(--px); letter-spacing: .04em; }
.btn-coin-txt small { font: 8px/1.2 var(--px); letter-spacing: .12em; opacity: .75; text-transform: uppercase; }
.btn-coin:hover .blink { animation: none; }
.coin-slot { position: relative; width: 30px; height: 46px; flex: none; border-radius: 5px; background: linear-gradient(180deg, #ff6262, #b80000 60%, #7a0000); box-shadow: 0 0 16px rgba(255, 40, 40, .9), inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .35); }
.coin-slot i { position: absolute; left: 50%; top: 9px; bottom: 9px; width: 5px; transform: translateX(-50%); background: #1a0000; border-radius: 3px; box-shadow: inset 0 0 3px #000; }
.coin-slot.flash, .slot.flash { animation: slot-flash .5s ease; }
@keyframes slot-flash { 0%, 100% { filter: none; } 30% { filter: brightness(2.2) drop-shadow(0 0 12px #ff4040); } }
.hero-stats { margin: 22px 0 0; text-wrap: balance; font: clamp(17px, 1.8vw, 22px)/1.3 var(--term); letter-spacing: .1em; color: #c6bdf0; text-shadow: 0 2px 8px #000; }

.hero-fire { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); margin: 0; font: 8px var(--px); letter-spacing: .14em; color: rgba(57, 255, 136, .7); text-shadow: 0 0 6px rgba(57, 255, 136, .6); white-space: nowrap; pointer-events: none; animation: blink 1.6s steps(2, jump-none) infinite; }
.hero-scroll { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; font: 8px var(--px); letter-spacing: .2em; color: var(--mute); text-decoration: none; }
.hero-scroll i { width: 12px; height: 12px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }

/* =====================================================================
   LED TICKER
   ===================================================================== */
.ticker {
  position: relative; z-index: 3; overflow: hidden; height: 54px; display: flex; align-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(255, 150, 40, .14) 0 1px, transparent 1.5px) 0 0 / 5px 5px, #0d0602;
  border-block: 4px solid #1f1c28;
  box-shadow: 0 0 0 1px #000, inset 0 0 22px rgba(0, 0, 0, .9), 0 0 40px rgba(255, 140, 0, .12);
}
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, #0d0602, transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, #0d0602, transparent); }
.ticker-track {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: ticker var(--dur, 60s) linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 60%); -webkit-mask-size: 4px 4px;
  mask-image: radial-gradient(circle, #000 52%, transparent 60%); mask-size: 4px 4px;
}
.ticker-track span { font: 20px/1 var(--px); color: #ffb13b; text-shadow: 0 0 6px #ff8a00, 0 0 16px rgba(255, 120, 0, .7); padding: 0 1.6em; }
.ticker-track span::after { content: "★"; margin-left: 3.2em; color: #ff4a2a; }
@keyframes ticker { to { transform: translateX(var(--shift, -50%)); } }

/* =====================================================================
   SECTION HEADS
   ===================================================================== */
.sec-head { position: relative; z-index: 2; text-align: center; max-width: 900px; margin: 0 auto clamp(46px, 6vw, 76px); }
.sec-kicker { margin: 0 0 18px; font: 11px var(--px); letter-spacing: .24em; color: var(--yellow); text-shadow: 0 0 10px rgba(255, 233, 74, .55); }
.blink-cursor { animation: blink 1s steps(2, jump-none) infinite; color: var(--pink); }
.sec-title { margin: 0; font: clamp(30px, 6.6vw, 78px)/1.08 var(--tube); font-weight: 400; letter-spacing: .02em; }
.sec-sub { margin: 18px auto 0; max-width: 640px; color: var(--dim); font-size: clamp(16px, 1.5vw, 18px); }
.neon-pink { color: #ffe1f8; text-shadow: 0 0 2px #fff, 0 0 8px var(--pink), 0 0 18px var(--pink), 0 0 38px var(--pink), 0 0 80px rgba(255, 43, 214, .55); animation: neon-flicker 11s 2s infinite; }
.neon-cyan { color: #dcfdff; text-shadow: 0 0 2px #fff, 0 0 8px var(--cyan), 0 0 18px var(--cyan), 0 0 38px var(--cyan), 0 0 80px rgba(34, 243, 255, .5); animation: neon-flicker 13s 5s infinite; }
.rainbow {
  background: linear-gradient(90deg, #ff3b5c, #ff8a1f, #ffe94a, #39ff88, #22f3ff, #3d8bff, #a46bff, #ff2bd6, #ff3b5c) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .25)) drop-shadow(0 0 22px rgba(255, 43, 214, .35));
  animation: rainbow 6s linear infinite;
}
@keyframes rainbow { to { background-position: 200% 0; } }

/* =====================================================================
   HALL + CABINETS
   ===================================================================== */
.hall {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(80px, 10vw, 130px) 20px clamp(100px, 12vw, 160px);
  background: radial-gradient(1200px 700px at 50% 0%, rgba(164, 107, 255, .16), transparent 62%), var(--bg);
}
.hall-carpet {
  position: absolute; inset: 0; z-index: -2; background: url(../img/carpet.svg) 0 0 / 360px; opacity: .2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%);
  animation: carpet-glow 6s ease-in-out infinite alternate;
}
@keyframes carpet-glow { from { opacity: .14; } to { opacity: .24; } }
.hall-bubbles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hall-empty { text-align: center; font: 13px/1.8 var(--px); color: var(--yellow); }

/* --- the row of cabinets: scrolls sideways (swipe, drag, arrow buttons, keys, quick select) --- */
.cab-rail { position: relative; z-index: 1; max-width: 1480px; margin: 0 auto; }
.cabinets {
  --cw: clamp(280px, 25vw, 340px);
  --pad: clamp(20px, 4vw, 64px);
  position: relative; display: flex; align-items: stretch; gap: clamp(28px, 3vw, 50px);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  padding: 58px var(--pad) 58px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
}
.cabinets::-webkit-scrollbar { display: none; }
.cabinets:focus-visible { outline-offset: -8px; }
.cab-rail.scrollable .cabinets { cursor: grab; }
.cabinets.dragging { scroll-snap-type: none; cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.cabinets.dragging .cab-body { transition: none; }
.cabinets img { -webkit-user-drag: none; }
.cab { position: relative; display: flex; flex-direction: column; align-items: center; perspective: 1100px; flex: 0 0 var(--cw); min-width: 0; scroll-snap-align: start; }
.cab:first-child { margin-left: auto; }
.cab:last-child { margin-right: auto; }
.cab.spot .cab-marquee { animation: marquee-buzz .5s steps(5) 2; filter: brightness(1.2); }
.cab.spot .cab-screen::before { animation: crt-surge .7s ease-out; }

.rail-btn {
  display: none; position: absolute; z-index: 3; top: 230px; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: radial-gradient(circle at 35% 30%, #fff 0 6%, #ff4d6a 28%, #b3001f 70%, #6e0013 96%);
  box-shadow: 0 7px 0 #4d000d, 0 9px 18px rgba(0, 0, 0, .6), 0 0 28px rgba(255, 59, 92, .55);
  transition: transform .12s, box-shadow .12s, filter .2s, opacity .25s;
}
.rail-btn.next { right: 4px; background: radial-gradient(circle at 35% 30%, #fff 0 6%, #4d9bff 28%, #0f4fc7 70%, #082a73 96%); box-shadow: 0 7px 0 #04184a, 0 9px 18px rgba(0, 0, 0, .6), 0 0 28px rgba(61, 139, 255, .55); }
.rail-btn.prev { left: 4px; }
.rail-btn .ico { width: 26px; height: 26px; margin-left: 4px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.rail-btn.prev .ico { transform: rotate(180deg); margin: 0 4px 0 0; }
.rail-btn:hover { filter: brightness(1.15); transform: translateY(-2px); }
.rail-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #4d000d, 0 0 18px rgba(255, 59, 92, .5); }
.rail-btn.next:active { box-shadow: 0 2px 0 #04184a, 0 0 18px rgba(61, 139, 255, .5); }
.rail-btn:disabled { opacity: 0; pointer-events: none; }
.cab-rail.scrollable .rail-btn { display: grid; place-items: center; }

.rail-foot { display: none; align-items: center; justify-content: center; gap: 16px; position: relative; z-index: 1; max-width: 560px; margin: -18px auto 0; padding: 0 20px; }
.cab-rail.scrollable + .rail-foot { display: flex; }
.rail-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rail-track i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 3px; background: linear-gradient(90deg, var(--pink), var(--cyan)); box-shadow: 0 0 12px rgba(255, 43, 214, .7); transition: left .15s linear, width .2s; }
.rail-count { font: 11px/1 var(--px); color: var(--yellow); letter-spacing: .08em; white-space: nowrap; text-shadow: 0 0 8px rgba(255, 233, 74, .5); }

.game-select { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.game-select.on { display: flex; }
.gs-chip { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 10px; border: 1px solid rgba(var(--c-rgb), .45); background: rgba(10, 6, 22, .86); color: #fff; text-decoration: none; font: 13px/1 var(--sign); white-space: nowrap; transition: transform .15s, border-color .2s, box-shadow .2s, background .2s; }
.gs-chip img { width: 56px; height: 32px; object-fit: cover; border-radius: 6px; display: block; }
.gs-chip:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 0 16px rgba(var(--c-rgb), .45); }
.gs-chip[aria-current="true"] { background: rgba(var(--c-rgb), .18); border-color: var(--c); box-shadow: 0 0 18px rgba(var(--c-rgb), .55), inset 0 0 0 1px var(--c); }
.cab::before { /* spotlight from the ceiling */
  content: ""; position: absolute; z-index: -1; left: 50%; top: -120px; width: 150%; height: 760px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 42% 58% at 50% 0%, rgba(var(--c-rgb), .13), rgba(255, 255, 255, .03) 55%, transparent 72%);
}
.cab-body {
  position: relative; width: 100%; max-width: 330px;
  transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.cab-body::after { /* glow on the carpet */
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -34px; height: 50px;
  background: radial-gradient(ellipse at center, rgba(var(--c-rgb), .5), rgba(var(--c-rgb), .12) 45%, transparent 70%);
  filter: blur(4px); transition: opacity .4s; opacity: .7;
}
.cab:hover .cab-body::after { opacity: 1; }

/* marquee */
.cab-top { position: relative; padding: 10px 12px 9px; border-radius: 16px 16px 5px 5px; background: linear-gradient(180deg, #221a3c, #100b20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 2px #05030a, 0 -4px 24px rgba(var(--c-rgb), .18); }
.cab-marquee {
  position: relative; display: grid; place-items: center; height: 70px; border-radius: 7px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 130% at 50% -10%, rgba(255, 255, 255, .45), transparent 52%),
    repeating-conic-gradient(from 0deg at 50% 130%, rgba(255, 255, 255, .14) 0 5deg, transparent 5deg 10deg),
    linear-gradient(180deg, var(--c) 0%, var(--c2) 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55), inset 0 -12px 22px rgba(0, 0, 0, .4), 0 0 26px rgba(var(--c-rgb), .55);
  transition: filter .3s;
}
.cab-marquee::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(172deg, rgba(255, 255, 255, .32) 0, rgba(255, 255, 255, .06) 34%, transparent 35%); pointer-events: none; }
.cab-title { position: relative; z-index: 2; margin: 0; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: clamp(19px, 2vw, 25px)/1.15 var(--sign); font-weight: 400; color: #fff; letter-spacing: .01em; text-shadow: 0 2px 0 var(--c2), 0 4px 0 rgba(0, 0, 0, .65), 0 0 14px rgba(255, 255, 255, .55); }
.cab:hover .cab-marquee { animation: marquee-buzz .5s steps(5) 1; filter: brightness(1.15) saturate(1.1); }
@keyframes marquee-buzz { 0%, 40%, 80% { filter: brightness(1.15); } 20%, 60% { filter: brightness(.6); } }
.cab-badge {
  position: absolute; z-index: 5; top: -22px; right: -18px; width: 70px; height: 70px; display: grid; place-items: center;
  font: 10px var(--px); color: #c20030; background: var(--yellow); transform: rotate(14deg);
  clip-path: polygon(50% 0, 61% 14%, 79% 7%, 82% 25%, 100% 29%, 92% 46%, 100% 62%, 84% 70%, 82% 89%, 63% 86%, 50% 100%, 38% 86%, 18% 89%, 16% 70%, 0 62%, 8% 46%, 0 29%, 18% 25%, 21% 7%, 39% 14%);
  animation: badge 1.4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 233, 74, .7));
}
.cab-badge.hot { background: var(--red); color: #fff; filter: drop-shadow(0 0 10px rgba(255, 59, 92, .8)); }
@keyframes badge { 0%, 100% { transform: rotate(14deg) scale(1); } 50% { transform: rotate(8deg) scale(1.1); } }

/* cabinet face with glowing T-molding */
.cab-face { position: relative; padding: 16px 20px 0; border-radius: 4px 4px 10px 10px; background: linear-gradient(90deg, #040208 0, #1d1535 3.5%, #140e28 9%, #120c24 91%, #1d1535 96.5%, #040208 100%); }
.cab-face::before, .cab-face::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 26px rgba(var(--c-rgb), .7); opacity: .9; }
.cab-face::before { left: -2px; }
.cab-face::after { right: -2px; }
.cab-bezel { padding: 13px; border-radius: 12px; background: linear-gradient(180deg, #0c0918, #000); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 4px #000, inset 0 0 0 5px rgba(var(--c-rgb), .4), 0 8px 18px rgba(0, 0, 0, .65); }
.cab-screen {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: 18px / 13px; background: #000; color: #fff; text-decoration: none;
  box-shadow: 0 0 0 2px #000, 0 0 34px rgba(var(--c-rgb), .28);
}
.cab-screen img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.74) saturate(1.15) contrast(1.06); transform: scale(1.04); transition: filter .45s, transform 1.6s cubic-bezier(.2, .8, .2, 1); }
.cab-noimg { display: grid; place-items: center; height: 100%; font: 14px var(--px); color: var(--c); background: radial-gradient(circle, rgba(var(--c-rgb), .25), #000 70%); text-align: center; padding: 10px; }
.cab-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 3px); }
.cab-scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .07), transparent); animation: roll 5s linear infinite; }
@keyframes roll { from { transform: translateY(-100%); } to { transform: translateY(460%); } }
.cab-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 26% -4%, rgba(255, 255, 255, .24), transparent 44%), radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .62) 100%); }
.cab-press { position: absolute; z-index: 4; left: 50%; bottom: 11%; transform: translateX(-50%); padding: 7px 9px; font: 9px var(--px); letter-spacing: .1em; white-space: nowrap; background: rgba(0, 0, 0, .65); color: #fff; text-shadow: 0 0 6px var(--c); opacity: 0; transition: opacity .2s; }
.cab-screen::before { content: ""; position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
.cab:hover .cab-screen img, .cab-screen:focus-visible img { filter: brightness(1.04) saturate(1.2) contrast(1.05); transform: scale(1.1); }
.cab:hover .cab-press, .cab-screen:focus-visible .cab-press { opacity: 1; animation: blink .9s steps(2, jump-none) infinite; }
.cab:hover .cab-screen::before { animation: crt-surge .5s ease-out; }
@keyframes crt-surge { 0% { opacity: .55; transform: scaleY(.04); } 30% { opacity: .3; transform: scaleY(1); } 100% { opacity: 0; } }

/* control deck */
.cab-deck {
  position: relative; height: 76px; margin: 16px -34px 0;
  clip-path: polygon(9% 0, 91% 0, 100% 70%, 100% 100%, 0 100%, 0 70%);
  background: linear-gradient(180deg, #2f2650 0%, #1d1636 69%, var(--c) 69.6%, var(--c) 73%, var(--c2) 73.5%, #0b0816 100%);
}
.cab-deck::before { /* panel art lines */
  content: ""; position: absolute; left: 12%; right: 12%; top: 9px; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--c-rgb), .55), transparent);
}
.stick { position: absolute; left: 26%; top: 34px; width: 36px; height: 12px; margin-left: -18px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #3a3550, #0b0914 70%); }
.stick i { position: absolute; left: 50%; bottom: 5px; width: 6px; height: 26px; margin-left: -3px; border-radius: 3px; background: linear-gradient(90deg, #555, #ddd 40%, #666); transform-origin: 50% 100%; transition: transform .2s; }
.stick i::before { content: ""; position: absolute; left: 50%; top: -14px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffb3b3, #ff2a2a 42%, #8a0000 80%); box-shadow: 0 3px 6px rgba(0, 0, 0, .5); }
.cab:hover .stick i { animation: wiggle .7s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 75% { transform: rotate(16deg); } }
.pbtns { position: absolute; right: 18%; top: 22px; display: flex; gap: 9px; }
.pbtns i { width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--b) 30%, color-mix(in srgb, var(--b) 45%, #000) 92%); box-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 10px color-mix(in srgb, var(--b) 60%, transparent); }
.pbtns i:nth-child(1) { --b: #ff3b5c; }
.pbtns i:nth-child(2) { --b: #ffe94a; transform: translateY(-6px); }
.pbtns i:nth-child(3) { --b: #3d8bff; }
.cab:hover .pbtns i { animation: press .9s ease-in-out infinite; }
.cab:hover .pbtns i:nth-child(2) { animation-delay: .3s; }
.cab:hover .pbtns i:nth-child(3) { animation-delay: .6s; }
@keyframes press { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 3px; box-shadow: 0 0 0 rgba(0, 0, 0, .55), 0 0 18px var(--b); } }

/* coin door */
.cab-door { position: relative; height: 112px; margin: 0 -2px; padding-top: 16px; display: flex; flex-direction: column; align-items: center; border-radius: 0 0 9px 9px; background: linear-gradient(90deg, #040208, #171030 6%, #110b22 94%, #040208); }
.cab-door::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: 0; height: 15px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #4a4858, #1c1b24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.coin-door { display: flex; justify-content: space-around; align-items: center; width: 48%; height: 56px; border-radius: 5px; background: linear-gradient(180deg, #45444f, #1f1e28 55%, #2c2b36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 4px rgba(0, 0, 0, .6), 0 3px 8px rgba(0, 0, 0, .6); }
.slot { position: relative; width: 26px; height: 36px; border-radius: 4px; background: linear-gradient(180deg, #ff5a5a, #b30000 60%, #6e0000); box-shadow: 0 0 12px rgba(255, 40, 40, .75), inset 0 0 0 2px rgba(0, 0, 0, .35); animation: slot-glow 2.4s ease-in-out infinite; }
.slot::before { content: ""; position: absolute; left: 50%; top: 13px; bottom: 6px; width: 4px; transform: translateX(-50%); background: #1a0000; border-radius: 2px; }
.slot b { position: absolute; left: 0; right: 0; top: 3px; font: 6px/1 var(--px); color: rgba(255, 255, 255, .85); text-align: center; }
.slot + .slot { animation-delay: 1.2s; }
@keyframes slot-glow { 0%, 100% { filter: brightness(.85); } 50% { filter: brightness(1.2); } }
.coin-label { margin-top: 10px; font: 8px var(--px); letter-spacing: .14em; color: #ff6060; text-shadow: 0 0 8px rgba(255, 0, 0, .8); }
.cab:hover .coin-label { animation: blink .6s steps(2, jump-none) infinite; }

/* info card */
.cab-info {
  position: relative; flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 350px; margin-top: 40px; padding: 20px 20px 18px;
  background: linear-gradient(180deg, rgba(22, 15, 42, .94), rgba(11, 7, 23, .94));
  border: 1px solid rgba(var(--c-rgb), .32); border-top: 3px solid var(--c); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 22px 44px rgba(0, 0, 0, .5), 0 -6px 26px rgba(var(--c-rgb), .14);
}
.cab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.cab-genre { font: 8px/1 var(--px); letter-spacing: .1em; text-transform: uppercase; color: var(--c); padding: 6px 8px; border: 1px solid rgba(var(--c-rgb), .5); border-radius: 4px; background: rgba(var(--c-rgb), .08); }
.cab-origin { font: 18px/1 var(--term); color: var(--mute); letter-spacing: .04em; }
.cab-desc { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: #d9d2f5; }
.cab-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.btn-play {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 16px 12px; border-radius: 7px;
  font: 11px/1 var(--px); letter-spacing: .06em; color: #0b0716; text-decoration: none; background: var(--c);
  box-shadow: 0 4px 0 var(--c2), 0 0 20px rgba(var(--c-rgb), .55); transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn-play .ico { width: 12px; height: 12px; }
.btn-play:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 6px 0 var(--c2), 0 0 32px rgba(var(--c-rgb), .8); }
.btn-play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c2), 0 0 14px rgba(var(--c-rgb), .5); }
.btn-ico { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 7px; border: 1px solid rgba(var(--c-rgb), .4); background: rgba(0, 0, 0, .3); color: var(--c); cursor: pointer; transition: background .2s, transform .12s; }
.btn-ico .ico { width: 18px; height: 18px; }
.btn-ico:hover { background: rgba(var(--c-rgb), .16); transform: translateY(-1px); }
.cab-plays { margin-left: auto; font: 18px/1 var(--term); color: var(--mute); white-space: nowrap; }

/* =====================================================================
   MAZE DIVIDER
   ===================================================================== */
.maze { position: relative; height: 76px; background: #000; border-block: 5px double #2a3bff; box-shadow: 0 0 14px rgba(42, 59, 255, .55), inset 0 0 14px rgba(42, 59, 255, .45); }
.maze canvas { display: block; width: 100%; height: 100%; cursor: pointer; }

/* =====================================================================
   HIGH SCORES
   ===================================================================== */
.scores { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 10vw, 130px) 20px; background: #05030a; }
.scores-bg { position: absolute; inset: -20px; z-index: -1; background: url(../img/hall.webp) center / cover; opacity: .2; filter: blur(4px) saturate(1.3); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.hs-board { max-width: 820px; margin: 0 auto; padding: clamp(18px, 3vw, 34px); background: rgba(0, 0, 0, .78); border: 3px solid #1f1a33; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 50px rgba(61, 139, 255, .08); }
.hs-row, .hs-row > a { display: grid; grid-template-columns: minmax(64px, 1fr) minmax(110px, 1.3fr) 3.4fr; align-items: center; gap: 12px; }
.hs-row { font: clamp(10px, 1.9vw, 17px)/1 var(--px); letter-spacing: .06em; }
.hs-row > a { grid-column: 1 / -1; padding: 14px 12px; color: inherit; text-decoration: none; border-radius: 4px; transition: background .15s; }
.hs-empty { padding: 14px 12px; }
.hs-head { padding: 0 12px 16px; margin-bottom: 8px; color: #fff; border-bottom: 2px dashed rgba(255, 255, 255, .2); font-size: clamp(9px, 1.4vw, 12px); }
.hs-list { list-style: none; margin: 0; padding: 0; }
.hs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-row > a:hover, .hs-row > a:focus-visible { background: rgba(255, 255, 255, .07); }
.hs-row > a:hover .hs-name::after { content: " ◀"; animation: blink .6s steps(2, jump-none) infinite; }
.hs-list .hs-row { color: var(--row, #fff); text-shadow: 0 0 10px var(--row, #fff); animation: row-cycle 2.8s steps(1) infinite; }
.hs-list .hs-row:nth-child(1) { --row: #ff3b5c; animation-delay: 0s; }
.hs-list .hs-row:nth-child(2) { --row: #ff8a1f; animation-delay: -.35s; }
.hs-list .hs-row:nth-child(3) { --row: #ffe94a; animation-delay: -.7s; }
.hs-list .hs-row:nth-child(4) { --row: #39ff88; animation-delay: -1.05s; }
.hs-list .hs-row:nth-child(5) { --row: #22f3ff; animation-delay: -1.4s; }
.hs-list .hs-row:nth-child(6) { --row: #3d8bff; animation-delay: -1.75s; }
.hs-list .hs-row:nth-child(7) { --row: #a46bff; animation-delay: -2.1s; }
.hs-list .hs-row:nth-child(n+8) { --row: #ff2bd6; animation-delay: -2.45s; }
.hs-list .hs-row.hs-empty { opacity: .38; animation: none; color: #8a83b3; text-shadow: none; }
@keyframes row-cycle {
  0% { color: var(--row); } 12.5% { color: #fff; } 13% { color: var(--row); }
}
.hs-total { margin: 26px 0 0; text-align: center; font: clamp(18px, 2vw, 24px) var(--term); letter-spacing: .12em; color: var(--yellow); text-shadow: 0 0 8px rgba(255, 233, 74, .5); }

/* =====================================================================
   HOW TO
   ===================================================================== */
.howto { position: relative; padding: clamp(80px, 10vw, 130px) 20px clamp(90px, 11vw, 150px); background: radial-gradient(900px 420px at 50% 55%, rgba(34, 243, 255, .09), transparent 70%), var(--bg); }
.how-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 1140px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 34px 28px; }
.how-card { position: relative; padding: 38px 28px 28px; border-radius: 14px; background: linear-gradient(180deg, #120c27, #0b0718); border: 2px solid rgba(var(--c-rgb), .45); box-shadow: 0 0 30px rgba(var(--c-rgb), .12), inset 0 0 30px rgba(var(--c-rgb), .05); transition: transform .3s, box-shadow .3s; }
.how-card:hover { transform: translateY(-6px); box-shadow: 0 0 44px rgba(var(--c-rgb), .3), inset 0 0 30px rgba(var(--c-rgb), .08); }
.how-num { position: absolute; top: -21px; left: 24px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; font: 17px var(--px); color: #000; background: var(--c); box-shadow: 0 0 20px rgba(var(--c-rgb), .7), 0 4px 0 var(--c2); }
.how-ico { display: block; width: 72px; height: 54px; margin-bottom: 18px; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(var(--c-rgb), .55)); }
.how-card h3 { margin: 0 0 12px; font: 13px/1.5 var(--px); color: var(--c); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 0 10px rgba(var(--c-rgb), .5); }
.how-card p { margin: 0; color: var(--dim); font-size: 16px; }
.keys { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 56px auto 0; max-width: 900px; }
.keys-lbl { font: 10px var(--px); letter-spacing: .18em; color: var(--mute); margin-right: 8px; width: 100%; text-align: center; margin-bottom: 8px; }
.key { min-width: 46px; height: 46px; padding: 0 12px; display: grid; place-items: center; font: 12px var(--px); color: #fff; border-radius: 9px; background: linear-gradient(180deg, #2c2546, #17122b); box-shadow: 0 5px 0 #06040d, 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .14); }
.key-wide { min-width: 92px; font-size: 10px; }
.key-arrow { font: 16px/1 system-ui, sans-serif; }

/* =====================================================================
   GAME OVER / FOOTER
   ===================================================================== */
.gameover { position: relative; isolation: isolate; overflow: hidden; min-height: 680px; background: linear-gradient(180deg, var(--bg) 0%, #12052a 34%, #2a0a4a 56%, #45105e 64%, #08020f 64.4%, #050109 100%); }
.sunset { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.go-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(90px, 11vw, 140px) 20px 34px; }
.go-title { margin: 0; font: clamp(36px, 8.6vw, 96px)/1 var(--px); color: var(--red); letter-spacing: .04em; text-shadow: 0 0 12px #ff0033, 0 0 34px rgba(255, 0, 60, .6), .06em .06em 0 #3a0010; }
.go-continue { margin: 30px 0 0; font: clamp(14px, 2.4vw, 24px)/1 var(--px); color: var(--yellow); text-shadow: 0 0 10px rgba(255, 233, 74, .6); transition: opacity .3s; }
.go-count { display: inline-block; min-width: 1.2em; color: #fff; font-size: 1.5em; vertical-align: -.12em; }
.go-count.tick { animation: bump .4s ease; }
.go-thanks { display: none; margin: 30px 0 0; font: clamp(13px, 2.2vw, 22px)/1.4 var(--px); color: var(--cyan); text-shadow: 0 0 10px rgba(34, 243, 255, .6); }
.gameover.done .go-continue { display: none; }
.gameover.done .go-thanks { display: block; animation: fade-up .6s both; }
.btn-continue {
  display: inline-flex; align-items: center; gap: 12px; margin: 36px 0 54px; padding: 16px 24px;
  font: 13px/1 var(--px); color: #0b0716; text-decoration: none; background: var(--cyan); border-radius: 7px;
  box-shadow: 0 5px 0 #05596a, 0 0 30px rgba(34, 243, 255, .55); transition: transform .12s, filter .12s;
}
.btn-continue:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-continue:active { transform: translateY(3px); }

/* --- support panel: share + donate (styled like a coin door) --- */
.support {
  position: relative; width: min(100%, 700px); margin: 0 0 54px; padding: 34px clamp(18px, 4vw, 40px) 32px;
  border-radius: 16px; border: 1px solid rgba(255, 233, 74, .32);
  background:
    radial-gradient(circle at 16px 16px, #5d5390 0 3px, #1b1238 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 16px) 16px, #5d5390 0 3px, #1b1238 3.5px, transparent 4.5px),
    radial-gradient(circle at 16px calc(100% - 16px), #5d5390 0 3px, #1b1238 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), #5d5390 0 3px, #1b1238 3.5px, transparent 4.5px),
    linear-gradient(180deg, rgba(26, 15, 52, .92), rgba(10, 5, 22, .94));
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .55), 0 0 46px rgba(255, 233, 74, .1), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sup-title { margin: 0; font: clamp(20px, 3.4vw, 30px)/1.15 var(--sign); font-weight: 400; color: #fff6c2; text-shadow: 0 0 8px rgba(255, 233, 74, .8), 0 0 26px rgba(255, 170, 0, .45); }
.sup-text { max-width: 540px; margin: 12px auto 26px; font-size: 16px; line-height: 1.6; color: #d9d2f5; }
.sup-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; }
.btn-share {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 0 24px;
  font: 11px/1.3 var(--px); letter-spacing: .05em; color: var(--cyan); background: rgba(34, 243, 255, .07); cursor: pointer;
  border: 2px solid var(--cyan); border-radius: 8px; box-shadow: 0 0 0 3px #000, 0 0 22px rgba(34, 243, 255, .3), inset 0 0 16px rgba(34, 243, 255, .1);
  text-shadow: 0 0 8px rgba(34, 243, 255, .6); transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn-share .ico { width: 20px; height: 20px; flex: none; }
.btn-share:hover, .btn-share:focus-visible { background: var(--cyan); color: #04141a; text-shadow: none; transform: translateY(-2px); box-shadow: 0 0 0 3px #000, 0 0 36px rgba(34, 243, 255, .6); }
.btn-share:active, .btn-donate:active { transform: translateY(2px); }
.btn-donate {
  display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 9px 22px 9px 11px;
  color: var(--yellow); text-decoration: none; background: rgba(10, 6, 20, .75);
  border: 2px solid var(--yellow); border-radius: 8px; box-shadow: 0 0 0 3px #000, 0 0 24px rgba(255, 233, 74, .38), inset 0 0 18px rgba(255, 233, 74, .12);
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn-donate .coin-slot { width: 26px; height: 40px; }
.btn-donate .coin-slot i { top: 8px; bottom: 8px; }
.btn-donate:hover, .btn-donate:focus-visible { background: var(--yellow); color: #1c0d00; transform: translateY(-2px); box-shadow: 0 0 0 3px #000, 0 0 40px rgba(255, 233, 74, .7); }
.btn-donate-txt { display: grid; gap: 7px; text-align: left; }
.btn-donate-txt > span { font: 13px/1 var(--px); letter-spacing: .05em; }
.btn-donate-txt small { display: inline-flex; align-items: center; gap: 6px; font: 8px/1 var(--px); letter-spacing: .08em; opacity: .8; }
.btn-donate-txt small .ico { width: 11px; height: 11px; }

.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-bottom: 22px; }
.foot-links a { font-size: 15px; font-weight: 600; color: #e9e3ff; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid rgba(255, 43, 214, .5); transition: color .2s, border-color .2s; }
.foot-links a:hover { color: var(--pink); border-color: var(--pink); }
.foot-legal { max-width: 700px; margin: 0 0 14px; font: 19px/1.3 var(--term); color: #a7a0cb; }
.foot-made { margin: 0; font: 8px/1.8 var(--px); color: #807aa6; letter-spacing: .1em; }

/* =====================================================================
   PLAYER OVERLAY
   ===================================================================== */
.player {
  position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--c-rgb, 164, 107, 255), .2), rgba(0, 0, 0, .96) 70%), #000;
}
.player[hidden] { display: none; }
.playing body { overflow: hidden; }
.player-bar { display: flex; align-items: center; gap: 12px; min-height: 52px; padding-bottom: 10px; }
.pl-title { flex: 1; min-width: 0; margin: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: clamp(16px, 2.2vw, 26px)/1.2 var(--sign); font-weight: 400; color: #fff; text-shadow: 0 0 10px var(--c, var(--pink)), 0 0 24px var(--c, var(--pink)); }
.pl-tools { display: flex; gap: 8px; }
.pl-btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; font: 9px/1 var(--px); letter-spacing: .06em; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; cursor: pointer; transition: border-color .2s, background .2s; white-space: nowrap; }
.pl-btn .ico { width: 17px; height: 17px; }
.pl-btn:hover { border-color: var(--c, var(--pink)); background: rgba(var(--c-rgb, 255, 43, 214), .14); }
.player-stage { position: relative; min-height: 0; display: grid; }
.player-screen {
  position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: 16px; background: #000;
  box-shadow: 0 0 0 8px #0e0b1a, 0 0 0 10px rgba(var(--c-rgb, 255, 43, 214), .55), 0 0 70px rgba(var(--c-rgb, 255, 43, 214), .3), 0 30px 80px rgba(0, 0, 0, .9);
  transform-origin: 50% 50%;
}
.player.on .player-screen { animation: tv-on .55s cubic-bezier(.2, .9, .3, 1) both; }
.player.off .player-screen { animation: tv-off .38s ease-in both; }
@keyframes tv-on { 0% { transform: scale(.94, .004); filter: brightness(4); } 40% { transform: scale(1, .006); filter: brightness(3); } 100% { transform: scale(1, 1); filter: brightness(1); } }
@keyframes tv-off { 0% { transform: scale(1, 1); filter: brightness(1); } 55% { transform: scale(1, .005); filter: brightness(3); } 100% { transform: scale(0, .004); filter: brightness(5); } }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player-load { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #000; transition: opacity .45s ease, visibility .45s; }
.player-load.done { opacity: 0; visibility: hidden; }
.pl-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, #6c5eb5 0 7px, #50459b 7px 13px, #a1d6ec 13px 18px, #352879 18px 26px, #9a6759 26px 31px, #68372b 31px 39px, #b8c76f 39px 44px); animation: c64-load .16s steps(3) infinite; opacity: .9; }
@keyframes c64-load { 0% { background-position: 0 0; } 100% { background-position: 0 44px; } }
.pl-load-box { position: relative; width: min(78%, 620px); padding: clamp(22px, 4vw, 44px) 24px; background: #000; display: grid; justify-items: center; gap: 16px; text-align: center; box-shadow: 0 0 0 4px #000; }
.pl-load-txt { margin: 0; font: clamp(13px, 2vw, 18px) var(--px); color: #a1d6ec; letter-spacing: .1em; }
.pl-load-txt .dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.pl-load-name { margin: 0; font: clamp(22px, 4vw, 40px)/1.1 var(--sign); color: #fff; text-shadow: 0 0 16px var(--c, var(--pink)); }
.pl-bar { width: min(100%, 300px); height: 16px; padding: 2px; border: 2px solid #a1d6ec; }
.pl-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--c, var(--pink)) 0 10px, transparent 10px 12px); transition: width .25s ease; }
.player-crt { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #fff; opacity: 0; }
.player-crt.flash { animation: crt-flash .45s ease-out; }
@keyframes crt-flash { 0% { opacity: .65; } 100% { opacity: 0; } }
.player-hint { margin: 10px 0 0; text-align: center; font: 17px/1 var(--term); color: #7d76a6; letter-spacing: .06em; }
.player-screen:fullscreen { border-radius: 0; box-shadow: none; }

/* =====================================================================
   SHARE SHEET
   ===================================================================== */
.share { position: fixed; inset: 0; z-index: 2200; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.share[hidden] { display: none; }
.share-back { position: absolute; inset: 0; background: rgba(3, 1, 10, .8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .22s; }
.share-box {
  position: relative; width: min(100%, 540px); max-height: 100%; overflow: auto; overscroll-behavior: contain;
  padding: 30px clamp(18px, 4.4vw, 36px) 28px; border-radius: 16px; outline: none;
  background: linear-gradient(180deg, #170e33, #0a0618 70%);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 4px #000, 0 0 46px rgba(34, 243, 255, .32), inset 0 0 34px rgba(34, 243, 255, .07);
  opacity: 0; transform: scale(.9, .04); transition: transform .26s cubic-bezier(.2, 1.1, .35, 1), opacity .18s;
}
.share.on .share-back { opacity: 1; }
.share.on .share-box { opacity: 1; transform: none; }
.share-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.share-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; color: var(--dim); border-radius: 9px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.share-x .ico { width: 16px; height: 16px; }
.share-x:hover { color: #fff; border-color: var(--pink); background: rgba(255, 43, 214, .14); }
.share-kicker { margin: 0 0 12px; font: 9px/1 var(--px); color: var(--cyan); letter-spacing: .16em; text-shadow: 0 0 8px rgba(34, 243, 255, .6); }
.share-title { margin: 0; padding-right: 44px; font: clamp(24px, 5.4vw, 34px)/1.1 var(--sign); font-weight: 400; color: #fff; text-shadow: 0 0 10px var(--pink), 0 0 28px rgba(255, 43, 214, .6); }
.share-name { margin: 6px 0 22px; font: 21px/1.2 var(--term); color: var(--yellow); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sh-net {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 11px; min-width: 0; aspect-ratio: 1;
  padding: 8px 4px; border-radius: 11px; color: #fff; text-decoration: none;
  border: 1px solid rgba(var(--nc-rgb, 255, 255, 255), .3); background: rgba(var(--nc-rgb, 255, 255, 255), .07);
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s, color .15s;
}
.sh-net span { max-width: 100%; font: 7px/1.25 var(--px); letter-spacing: .04em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-ico { display: block; width: 39px; height: 39px; flex: none; background: no-repeat center / contain; image-rendering: pixelated; filter: drop-shadow(0 0 5px rgba(var(--nc-rgb, 255, 255, 255), .9)); transition: filter .15s; }
.sh-net:hover, .sh-net:focus-visible { background: rgb(var(--nc-rgb, 255, 255, 255)); border-color: rgb(var(--nc-rgb, 255, 255, 255)); box-shadow: 0 0 24px rgba(var(--nc-rgb, 255, 255, 255), .65); transform: translateY(-3px); }
.sh-net:hover .sh-ico, .sh-net:focus-visible .sh-ico { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.sh-net:active { transform: translateY(1px); }
.sh-net[data-net="whatsapp"] { --nc-rgb: 37, 211, 102; }
.sh-net[data-net="facebook"] { --nc-rgb: 24, 119, 242; }
.sh-net[data-net="x"], .sh-net[data-net="threads"] { --nc-rgb: 236, 233, 248; }
.sh-net[data-net="bluesky"] { --nc-rgb: 17, 133, 254; }
.sh-net[data-net="reddit"] { --nc-rgb: 255, 69, 0; }
.sh-net[data-net="telegram"] { --nc-rgb: 34, 158, 217; }
.sh-net[data-net="mail"] { --nc-rgb: 164, 107, 255; }
.sh-net[data-net="x"]:hover, .sh-net[data-net="threads"]:hover, .sh-net[data-net="x"]:focus-visible, .sh-net[data-net="threads"]:focus-visible { color: #0b0716; }
.sh-net[data-net="x"]:hover .sh-ico, .sh-net[data-net="threads"]:hover .sh-ico, .sh-net[data-net="x"]:focus-visible .sh-ico, .sh-net[data-net="threads"]:focus-visible .sh-ico { filter: invert(1); }
.sh-native { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px; font: 9px/1 var(--px); letter-spacing: .06em; color: #fff; cursor: pointer; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); transition: background .15s, border-color .15s; }
.sh-native[hidden] { display: none; }
.sh-native .sh-ico { width: 26px; height: 28px; }
.sh-native:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.sh-copy { display: flex; gap: 8px; margin-top: 18px; padding: 6px; border-radius: 11px; background: #04020a; border: 1px solid rgba(34, 243, 255, .35); }
.sh-url { flex: 1; min-width: 0; padding: 0 8px; font: 19px/1 var(--term); letter-spacing: .03em; color: var(--green); background: transparent; border: 0; outline: none; text-shadow: 0 0 6px rgba(57, 255, 136, .45); }
.sh-copy-btn { flex: none; min-width: 108px; height: 42px; padding: 0 14px; font: 9px/1 var(--px); letter-spacing: .06em; color: #04141a; background: var(--cyan); border: 0; border-radius: 7px; cursor: pointer; box-shadow: 0 3px 0 #05596a; transition: filter .15s, transform .1s, background .2s; }
.sh-copy-btn:hover { filter: brightness(1.12); }
.sh-copy-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #05596a; }
.sh-copy-btn.ok { background: var(--green); box-shadow: 0 3px 0 #0a6b35; }

/* =====================================================================
   FX LAYER (score popups, UFO, flying coin) + TOAST
   ===================================================================== */
.fx-layer { position: fixed; inset: 0; z-index: 1600; pointer-events: none; overflow: hidden; }
.pop { position: absolute; font: 12px var(--px); color: var(--pc, #fff); text-shadow: 0 0 8px var(--pc, #fff), 0 2px 0 #000; transform: translate(-50%, -50%); white-space: nowrap; animation: pop-rise .95s ease-out forwards; }
@keyframes pop-rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
.ufo { position: absolute; left: 0; top: 0; width: 72px; height: 32px; padding: 0; border: 0; background: none; pointer-events: auto; cursor: crosshair; filter: drop-shadow(0 0 8px #ff3b5c) drop-shadow(0 0 18px rgba(255, 59, 92, .6)); }
.ufo img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.coin-fly { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center; font: 9px var(--px); color: #7a4c00; background: radial-gradient(circle at 34% 30%, #fff8c2, #ffd23a 42%, #c98a00 78%, #8a5a00); box-shadow: inset 0 0 0 2px #b27a00, 0 0 12px rgba(255, 210, 58, .9); }
.toast { position: fixed; z-index: 2500; left: 50%; top: calc(var(--hud-h) + 22px); padding: 13px 18px; font: 13px/1.2 var(--px); color: var(--yellow); background: rgba(0, 0, 0, .86); border: 2px solid var(--yellow); box-shadow: 0 0 24px rgba(255, 233, 74, .45); border-radius: 4px; transform: translate(-50%, -16px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.playing .toast { top: 70px; }

/* Konami turbo mode */
.turbo main, .turbo .gameover { animation: turbo 1.2s linear infinite; }
@keyframes turbo { to { filter: hue-rotate(360deg); } }

/* scroll reveal (only when JS runs) */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.rv.in { opacity: 1; transform: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
  .hud-free { display: none; }
}
@media (max-width: 900px) {
  .hud-donate { width: 40px; padding: 0; justify-content: center; }
  .hud-donate-lbl { display: none; }
}
@media (max-width: 680px) {
  :root { --hud-h: 54px; }
  .hud { gap: 8px; }
  .hud-score + .hud-score { display: none; }
  .hud-scores { font-size: 9px; }
  .hud-logo-a { font-size: 14px; }
  .hud-logo-b { font-size: 22px; }
  .hud-btn, .hud-donate { width: 36px; height: 36px; }
  .hud-donate .ico { width: 19px; height: 19px; }
  .hud-lang a { line-height: 34px; padding: 0 8px; font-size: 9px; }
  .sup-btns > * { flex: 1 1 240px; justify-content: center; }
  .share-grid { gap: 8px; }
  .hero { padding-top: calc(var(--hud-h) + 112px); padding-bottom: 130px; }
  .logo-chrome { font-size: 13.2vw; }
  .logo-neon { margin-left: .5em; font-size: 16vw; }
  .btn-coin { gap: 14px; padding: 13px 20px 13px 13px; }
  .ticker { height: 46px; }
  .ticker-track span { font-size: 16px; }
  .cab-deck { margin-left: -26px; margin-right: -26px; }
  .cabinets { --cw: min(74vw, 330px); --pad: calc((100% - var(--cw)) / 2); gap: 16px; }
  .cab { scroll-snap-align: center; }
  .rail-btn { top: 200px; width: 46px; height: 46px; }
  .rail-btn .ico { width: 18px; height: 18px; }
  .game-select { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .game-select::-webkit-scrollbar { display: none; }
  .player { padding: env(safe-area-inset-top, 0px) 0 0; }
  .player-bar { padding: 4px 8px 6px; min-height: 48px; gap: 8px; }
  .pl-lbl { display: none; }
  .pl-btn { padding: 0 11px; height: 38px; }
  .pl-back span { display: none; }
  .player-screen { border-radius: 0; box-shadow: none; }
  .player-hint { display: none; }
  .hs-row, .hs-row > a { grid-template-columns: 46px 74px 1fr; gap: 8px; }
  .hs-row > a, .hs-empty { padding: 12px 6px; }
}
@media (max-width: 540px) {
  .hud-scores { display: none; }
}
@media (max-width: 420px) {
  .hud-logo-b { display: none; }
  .hud { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .hud-right { gap: 6px; }
  .hud-btn, .hud-donate { width: 34px; height: 34px; }
  .hud-lang a { padding: 0 7px; }
  .sh-net { aspect-ratio: auto; padding: 12px 2px 10px; gap: 9px; }
  .sh-net span { font: 600 11px/1.2 var(--body); letter-spacing: 0; }
  .sh-ico { width: 33px; height: 33px; }
}
@media (max-width: 350px) {
  #btnCrt { display: none; }
}
@media (hover: none) {
  .hero { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .crt-overlay { animation: none; }
  .ticker-track { animation: none; }
  .spark { display: none; }
}

/* =====================================================================
   LEGAL PAGES (impressum.php / datenschutz.php)
   ===================================================================== */
.legal-page { background: radial-gradient(1100px 600px at 50% -10%, rgba(164, 107, 255, .16), transparent 60%), var(--bg); }
.legal-page .hud { position: sticky; }
.lg-back { font: 9px/1 var(--px); color: var(--dim); text-decoration: none; margin-right: 10px; letter-spacing: .06em; }
.lg-back:hover { color: var(--cyan); }
.lg-main { max-width: 860px; margin: 0 auto; padding: 46px 18px 70px; }
.lg-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.lg-tabs a { font: 10px/1 var(--px); padding: 12px 14px; border-radius: 8px; color: var(--dim); text-decoration: none; border: 1px solid rgba(255, 255, 255, .16); background: rgba(7, 4, 15, .8); }
.lg-tabs a[aria-current="page"] { color: #fff; background: var(--pink); border-color: var(--pink); }
.lg-card { padding: clamp(24px, 4vw, 44px); border-radius: 14px; background: rgba(10, 6, 22, .94); border: 1px solid rgba(255, 43, 214, .35); border-top: 3px solid var(--pink); box-shadow: 0 0 50px rgba(255, 43, 214, .12), 0 30px 70px rgba(0, 0, 0, .55); }
.lg-card .sec-kicker { margin-bottom: 14px; }
.lg-title { margin: 0 0 10px; font: clamp(34px, 6vw, 58px)/1.1 var(--tube); font-weight: 400; color: #ffe1f8; text-shadow: 0 0 2px #fff, 0 0 8px var(--pink), 0 0 20px var(--pink), 0 0 44px rgba(255, 43, 214, .55); }
.lg-lead { margin: 0 0 8px; color: #e9e3ff; font-size: 17px; }
.lg-card h2 { margin: 32px 0 10px; font: 11px/1.5 var(--px); color: var(--cyan); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 8px rgba(34, 243, 255, .45); }
.lg-card p, .lg-card li { color: #d9d2f5; font-size: 16px; line-height: 1.65; }
.lg-card p { margin: 0 0 12px; }
.lg-card ul { margin: 0 0 12px; padding-left: 20px; }
.lg-card li { margin-bottom: 8px; }
.lg-card b { color: #fff; }
.lg-card a { color: var(--cyan); }
.lg-card .lg-addr { font: 22px/1.35 var(--term); color: #fff; letter-spacing: .03em; }
.lg-missing { color: var(--yellow); font-style: normal; }
.lg-card .lg-date { margin-top: 30px; font: 18px var(--term); color: var(--mute); }
.lg-foot { margin: 22px 0 0; text-align: center; font-size: 15px; color: var(--mute); }
.lg-foot a { color: var(--dim); }
@media (max-width: 560px) { .lg-back { display: none; } }
.lg-back .arr { font: 15px/1 system-ui, sans-serif; vertical-align: -1px; }