/* 48x.ai — RETRO / CRT / SYNTHWAVE */

:root{
  --bg:#08020F;
  --bg-2:#0E0420;
  --grid:#2B0F4A;
  --ink:#F2E9FF;
  --mute:#8E80AC; /* lightened from #7C6E9C to clear WCAG AA 4.5:1 on --bg for small secondary text */
  --neon-pink:#FF3DC4;
  --neon-cyan:#3DF5FF;
  --neon-green:#39FF7A;
  --neon-yellow:#F8E71C;
  --neon-orange:#FF7A1A;
  --neon-purple:#9D5BFF;
  --crt-scan:rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'VT323',monospace}
body{
  font-size:22px;line-height:1.35;letter-spacing:.01em;
  overflow-x:hidden;
  min-height:100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(157,91,255,.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(61,245,255,.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 70%, rgba(255,61,196,.10), transparent 60%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
::selection{background:var(--neon-pink);color:#08020F}

/* CRT vignette + scanlines + flicker */
.crt::before,.crt::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100}
.crt::before{
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    var(--crt-scan) 2px 3px
  );
  mix-blend-mode:multiply;
}
.crt::after{
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
@keyframes flicker { 0%,100%{opacity:.97} 50%{opacity:1} 92%{opacity:.93} }
.flicker{animation:flicker 6s infinite steps(20)}

/* Star field */
.stars{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent 50%),
    radial-gradient(1px 1px at 78% 33%, #fff, transparent 50%),
    radial-gradient(1.5px 1.5px at 42% 70%, #fff, transparent 50%),
    radial-gradient(1px 1px at 22% 88%, #fff, transparent 50%),
    radial-gradient(1px 1px at 88% 78%, #fff, transparent 50%),
    radial-gradient(1px 1px at 60% 12%, #fff, transparent 50%),
    radial-gradient(1px 1px at 5% 50%, #fff, transparent 50%),
    radial-gradient(1px 1px at 92% 60%, #fff, transparent 50%),
    radial-gradient(1px 1px at 33% 30%, #fff, transparent 50%),
    radial-gradient(1px 1px at 50% 92%, #fff, transparent 50%);
  opacity:.6;
}

/* Synthwave grid floor */
.floor{
  position:fixed;left:0;right:0;bottom:0;height:42vh;z-index:-1;pointer-events:none;
  perspective:600px;
  background:linear-gradient(to bottom, transparent, rgba(8,2,15,.9) 80%);
  overflow:hidden;
}
.floor::before{
  content:"";position:absolute;inset:-20% -10% -2% -10%;
  background-image:
    linear-gradient(var(--neon-pink) 1px, transparent 1px),
    linear-gradient(90deg, var(--neon-purple) 1px, transparent 1px);
  background-size:60px 60px,60px 60px;
  transform:rotateX(62deg);
  transform-origin:50% 100%;
  animation:floor 3s linear infinite;
  opacity:.45;
}
@keyframes floor { 0%{background-position-y:0,0} 100%{background-position-y:60px,60px} }

/* Marquee ticker */
.ticker{
  position:relative;z-index:5;
  border-top:2px solid var(--neon-yellow);
  border-bottom:2px solid var(--neon-yellow);
  background:#0a0017;
  overflow:hidden;
  font-family:'VT323',monospace;
  font-size:22px;letter-spacing:.06em;
  color:var(--neon-yellow);
  text-shadow:0 0 6px rgba(248,231,28,.6);
  height:36px;display:flex;align-items:center;
}
.ticker-track{display:inline-flex;gap:48px;padding-left:48px;white-space:nowrap;animation:tick 38s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:18px}
.ticker-track i{font-style:normal;color:var(--neon-pink)}
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.ticker-pink{
  border-color:var(--neon-pink);
  color:var(--neon-pink);
  text-shadow:0 0 6px rgba(255,61,196,.6);
}
.ticker-pink .ticker-track i{color:var(--neon-yellow)}

/* Top nav */
.nav{
  position:relative;z-index:6;
  padding:12px 20px;display:flex;align-items:center;justify-content:space-between;
  font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--neon-cyan);
}
.nav-l{display:flex;align-items:center;gap:14px}
.nav-l b{color:var(--neon-pink);text-shadow:0 0 8px rgba(255,61,196,.5)}
.nav-l .blink{animation:blink 1.1s steps(2) infinite}
@keyframes blink { 50%{opacity:0} }
.nav-r{display:flex;gap:18px}
.nav-r a{color:var(--neon-cyan);padding:4px 8px;border:1.5px solid var(--neon-cyan);text-shadow:0 0 6px rgba(61,245,255,.55)}
.nav-r a:hover{background:var(--neon-cyan);color:#08020F;text-shadow:none}

/* Layout */
main{max-width:1240px;margin:0 auto;padding:32px 28px 80px;position:relative;z-index:5}

/* Hero */
.hero{padding:48px 0 24px;display:grid;gap:18px;text-align:center;justify-items:center}
.hero-tag{
  font-family:'Press Start 2P',monospace;font-size:10px;letter-spacing:.16em;
  color:var(--neon-cyan);
  border:1.5px solid var(--neon-cyan);padding:6px 12px;
  text-shadow:0 0 6px rgba(61,245,255,.55);
}
.hero-mark{
  position:relative;display:inline-grid;place-items:center;
  width:min(560px,82vw);aspect-ratio:1.6/1;margin:8px 0 4px;
}
.hero-mark-inner{display:grid;justify-items:center;gap:10px}
.hero-mark .ring{position:absolute;inset:0;border:2px dashed var(--neon-pink);border-radius:50%;animation:spin 38s linear infinite;box-shadow:0 0 24px rgba(255,61,196,.35) inset}
.hero-mark .ring.r2{inset:8% 12%;border-color:var(--neon-cyan);animation-duration:24s;animation-direction:reverse;box-shadow:0 0 24px rgba(61,245,255,.3) inset}
.hero-mark .ring.r3{inset:18% 24%;border-color:var(--neon-yellow);animation-duration:14s;border-style:dotted;box-shadow:none;opacity:.7}
@keyframes spin { to{transform:rotate(360deg)} }
.hero-mark .planet{position:absolute;border-radius:50%}
.hero-mark .p-y{width:18px;height:18px;background:var(--neon-yellow);box-shadow:0 0 18px var(--neon-yellow);top:-9px;left:50%;transform:translateX(-50%);animation:o1 38s linear infinite}
.hero-mark .p-g{width:22px;height:22px;background:var(--neon-green);box-shadow:0 0 18px var(--neon-green);top:50%;left:6%;animation:o2 24s linear infinite}
.hero-mark .p-r{width:18px;height:18px;background:var(--neon-pink);box-shadow:0 0 18px var(--neon-pink);top:50%;right:6%;animation:o3 24s linear infinite}
.hero-mark .p-c{width:14px;height:14px;background:var(--neon-cyan);box-shadow:0 0 18px var(--neon-cyan);bottom:6%;left:50%;animation:o4 14s linear infinite}
@keyframes o1 { from{transform:translateX(-50%) rotate(0)} to{transform:translateX(-50%) rotate(360deg)} }
@keyframes o2 { 0%{transform:translateY(-50%) translateX(0)} 100%{transform:translateY(-50%) translateX(8px)} }
@keyframes o3 { 0%{transform:translateY(-50%) translateX(0)} 100%{transform:translateY(-50%) translateX(-8px)} }
@keyframes o4 { 0%{transform:translateX(-50%) translateY(0)} 100%{transform:translateX(-50%) translateY(-8px)} }

.hero-num{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(56px,11vw,140px);
  line-height:1;
  color:var(--neon-green);
  text-shadow:
    0 0 8px rgba(57,255,122,.85),
    0 0 24px rgba(57,255,122,.55),
    4px 4px 0 var(--neon-pink),
    8px 8px 0 var(--neon-purple);
  letter-spacing:.02em;
  transform:translateY(-2px);
}
.hero-est{
  font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:.18em;
  color:var(--neon-pink);border:1.5px solid var(--neon-pink);padding:5px 9px;margin-top:10px;
  background:#1a0114;text-shadow:0 0 6px rgba(255,61,196,.6);
}
.hero-cta{
  margin-top:14px;font-family:'Press Start 2P',monospace;font-size:14px;letter-spacing:.1em;
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;color:var(--ink);
}
.hero-cta b{color:var(--neon-cyan);text-shadow:0 0 6px rgba(61,245,255,.6)}
.hero-cta i{color:var(--neon-pink);font-style:normal;text-shadow:0 0 6px rgba(255,61,196,.6)}
.hero-cta u{color:var(--neon-yellow);text-decoration:none;text-shadow:0 0 6px rgba(248,231,28,.6)}
.hero-cta s{color:var(--neon-green);text-decoration:none;text-shadow:0 0 6px rgba(57,255,122,.6)}
.hero-cta .sep{color:#fff}

.lede{
  font-family:'Space Mono','VT323',monospace;font-size:17px;line-height:1.6;
  max-width:62ch;margin:18px auto 6px;color:#FFE9A8;
  text-shadow:0 0 4px rgba(248,231,28,.25);
  text-align:center;
}
.lede em{font-style:normal;color:var(--neon-pink);text-shadow:0 0 6px rgba(255,61,196,.5)}
.lede strong{font-weight:400;color:var(--neon-cyan);text-shadow:0 0 6px rgba(61,245,255,.5)}

.powerby{font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--neon-cyan);text-shadow:0 0 6px rgba(61,245,255,.6);text-align:center;margin-top:18px}
.powerby b{display:block;font-size:22px;color:var(--neon-cyan);margin-top:8px;letter-spacing:.18em;text-shadow:0 0 10px rgba(61,245,255,.7)}
.lil{font-family:'VT323',monospace;font-size:20px;color:var(--mute);margin-top:6px;text-align:center}

.xrow{display:flex;gap:18px;justify-content:center;margin:18px 0 6px;color:var(--neon-yellow)}
.xrow svg{filter:drop-shadow(0 0 5px rgba(248,231,28,.7))}

.micro{font-family:'Space Mono','VT323',monospace;font-size:14px;line-height:1.55;color:#C9C0F0;text-align:center;max-width:60ch;margin:0 auto}
.micro small{display:block;color:var(--mute);font-size:13px;margin-top:4px}
.micro-team{margin-top:24px}

/* Buttons */
.btn-row{display:flex;gap:14px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.btn-row-talk{margin-top:18px}
.btn{
  font-family:'Press Start 2P',monospace;font-size:12px;letter-spacing:.1em;
  padding:14px 22px;color:#08020F;border:0;cursor:pointer;
  box-shadow:5px 5px 0 #08020F, 5px 5px 0 1.5px var(--ink);
  text-shadow:1px 1px 0 rgba(255,255,255,.35);
  transition:transform .1s ease, box-shadow .1s ease;
  display:inline-block;
}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #08020F, 2px 2px 0 1.5px var(--ink)}
.btn.green{background:var(--neon-green)}
.btn.pink{background:var(--neon-pink)} /* dark text from .btn base — white-on-pink failed contrast */
.btn.cyan{background:var(--neon-cyan)}
.btn.yellow{background:var(--neon-yellow)}

/* Rainbow rule */
.rainbow{height:8px;border:0;margin:80px 0 24px;
  background:linear-gradient(90deg,#ff3dc4,#ff7a1a,#f8e71c,#39ff7a,#3df5ff,#9d5bff,#ff3dc4);
  background-size:300% 100%;animation:rb 6s linear infinite}
@keyframes rb { from{background-position:0 0} to{background-position:300% 0} }

/* Section heads */
.h2{
  font-family:'Press Start 2P',monospace;font-size:14px;letter-spacing:.14em;
  color:var(--neon-yellow);text-shadow:0 0 6px rgba(248,231,28,.6);
  text-align:center;margin:8px 0 6px;
}
.h2 .br{color:var(--ink)}
.h2-sub{font-family:'Space Mono','VT323',monospace;font-size:14px;line-height:1.55;color:var(--mute);text-align:center;margin-bottom:32px}

/* Game card frame (CRT bezel) */
.frames{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.frame{
  position:relative;background:rgba(8,2,15,.7);
  padding:24px 22px 22px;
  border:2.5px solid var(--frame, var(--neon-green));
  box-shadow:
    0 0 0 4px #08020F inset,
    0 0 18px var(--frame, var(--neon-green)),
    0 0 0 2px var(--frame, var(--neon-green));
}
.frame .corner{position:absolute;width:10px;height:10px;background:var(--frame, var(--neon-green));box-shadow:0 0 8px var(--frame, var(--neon-green))}
.frame .c-tl{top:-6px;left:-6px} .frame .c-tr{top:-6px;right:-6px}
.frame .c-bl{bottom:-6px;left:-6px} .frame .c-br{bottom:-6px;right:-6px}
.frame .tab{
  position:absolute;top:-13px;left:18px;
  font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:.12em;
  background:var(--frame, var(--neon-green));color:#08020F;padding:5px 8px;
}
.frame h3{
  font-family:'Space Mono','VT323',monospace;font-weight:700;
  font-size:18px;line-height:1.35;margin:6px 0 10px;letter-spacing:-0.01em;
  color:var(--frame, var(--neon-green));text-shadow:0 0 4px var(--frame, var(--neon-green))
}
.frame h3 em{color:#fff;font-style:normal}
.frame p{font-family:'Space Mono','VT323',monospace;font-size:14px;line-height:1.6;color:#E5DAFF;margin:0 0 10px}
.frame .stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.frame .stat{font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:.12em;color:#08020F;background:var(--frame, var(--neon-green));padding:4px 6px}

.frames-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.stat-card{
  background:rgba(8,2,15,.75);border:2px solid var(--frame, var(--neon-green));
  text-align:center;padding:18px 12px 16px;position:relative;
  box-shadow:0 0 12px var(--frame, var(--neon-green)) inset, 0 0 0 2px #08020F inset;
}
.stat-card .big{font-family:'Press Start 2P',monospace;font-size:22px;color:var(--frame, var(--neon-green));text-shadow:0 0 8px var(--frame, var(--neon-green))}
.stat-card .lab{font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:.12em;color:#E5DAFF;margin-top:8px}
.stat-card .note{font-family:'Space Mono','VT323',monospace;font-size:12px;color:var(--mute);margin-top:8px}

/* Team players */
.team{margin-top:32px}
.players{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.player{
  position:relative;background:rgba(8,2,15,.75);
  border:2px dashed var(--frame, var(--neon-green));
  padding:16px 14px;
  box-shadow:0 0 14px var(--frame, var(--neon-green));
}
.player .pin{position:absolute;width:8px;height:8px;background:var(--frame);box-shadow:0 0 6px var(--frame)}
.player .pin.tl{top:-4px;left:-4px} .player .pin.tr{top:-4px;right:-4px}
.player .pin.bl{bottom:-4px;left:-4px} .player .pin.br{bottom:-4px;right:-4px}
.player .sprite{
  width:100%;aspect-ratio:1.05/1;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px), #190336;
  border:2px solid var(--frame);
  margin-bottom:10px;position:relative;overflow:hidden;
}
.player .sprite::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 50%);pointer-events:none;z-index:2}
.player .portrait{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:screen;opacity:.85;
}
.player.green .portrait{filter:saturate(.4) contrast(1.15) sepia(.2)}
.player.pink  .portrait{filter:saturate(.5) contrast(1.1) hue-rotate(280deg)}
.player.cyan  .portrait{filter:saturate(.5) contrast(1.1) hue-rotate(160deg)}
.player .icon{position:absolute;top:10px;left:10px;font-size:22px;filter:drop-shadow(0 0 6px var(--frame));z-index:3}
.player .pname{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--ink);text-align:center;letter-spacing:.06em;margin:6px 0 0}
.player .prole{font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:.14em;color:var(--frame);text-align:center;margin:6px 0 8px;text-shadow:0 0 6px var(--frame)}
.player .tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:8px}
.player .tag{font-family:'Press Start 2P',monospace;font-size:7.5px;letter-spacing:.12em;background:var(--frame);color:#08020F;padding:3px 5px}
.player .quote{font-family:'Space Mono','VT323',monospace;font-size:13px;color:#E5DAFF;text-align:center;line-height:1.55}
.player .stats-bar{margin-top:10px;display:grid;gap:5px}
.player .bar{display:grid;grid-template-columns:60px 1fr 28px;gap:6px;align-items:center;font-family:'Press Start 2P',monospace;font-size:7.5px;letter-spacing:.1em;color:var(--mute)}
.player .bar .meter{display:block;width:100%;height:8px;background:#1a0a3a;position:relative;overflow:hidden;border:1px solid var(--frame)}
.player .bar .fill{display:block;height:100%;background:var(--frame);box-shadow:0 0 8px var(--frame)}
.player .bar .v{color:var(--frame);text-align:right}

/* Insert coin section */
.insert{
  text-align:center;margin:48px 0 16px;
  font-family:'Press Start 2P',monospace;font-size:14px;letter-spacing:.18em;
  color:var(--neon-yellow);text-shadow:0 0 8px rgba(248,231,28,.7);
}
.insert b{color:var(--neon-pink);animation:blink 1s steps(2) infinite}

/* Talk to us */
.talk{
  background:rgba(8,2,15,.7);
  border:2px solid var(--neon-yellow);
  box-shadow:0 0 0 4px #08020F inset, 0 0 18px var(--neon-yellow);
  padding:28px 26px;text-align:center;position:relative;margin-top:24px;
}
.talk h3{font-family:'Press Start 2P',monospace;font-size:14px;color:var(--neon-cyan);margin:0 0 8px;letter-spacing:.1em;text-shadow:0 0 6px rgba(61,245,255,.6)}
.talk p{font-family:'Space Mono','VT323',monospace;font-size:14px;line-height:1.55;color:#E5DAFF;margin:6px 0}
.talk a.mail{display:inline-block;font-family:'Press Start 2P',monospace;font-size:18px;color:var(--neon-green);
  background:#02180A;padding:10px 14px;margin:10px 0 4px;border:1.5px dashed var(--neon-green);text-shadow:0 0 6px var(--neon-green)}
.talk a.mail:hover{background:var(--neon-green);color:#08020F;text-shadow:none}
.talk small{font-family:'Space Mono','VT323',monospace;font-size:12px;line-height:1.55;color:var(--mute);display:block;margin-top:8px}

/* Construction sign */
.sign{
  margin:36px auto 18px;max-width:560px;
  background:var(--neon-yellow);color:#08020F;
  border:3px solid #08020F;outline:3px solid var(--neon-yellow);outline-offset:3px;
  padding:14px 20px;text-align:center;
  font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:.1em;
  background-image:repeating-linear-gradient(45deg,#08020F 0 8px,var(--neon-yellow) 8px 16px);
  background-size:100% 8px;background-position:0 0;background-repeat:no-repeat;
  padding-top:22px;padding-bottom:22px;
  position:relative;
}
.sign::before, .sign::after{
  content:"";position:absolute;left:0;right:0;height:8px;
  background:repeating-linear-gradient(45deg,#08020F 0 8px, var(--neon-yellow) 8px 16px);
}
.sign::before{top:0} .sign::after{bottom:0}
.sign-line{display:block}
.sign b{display:block;font-size:13px;margin-top:4px;color:#08020F}

/* Footer */
.foot{margin-top:48px;text-align:center;padding-bottom:48px}
.foot .visitors{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Press Start 2P',monospace;font-size:11px;color:var(--ink);letter-spacing:.1em;
  margin-bottom:18px;
}
.foot .lcd{
  display:inline-flex;gap:4px;background:#08020F;border:2px solid var(--neon-cyan);padding:4px 6px;
  box-shadow:0 0 8px rgba(61,245,255,.5) inset;
}
.foot .lcd span{
  width:18px;height:24px;display:grid;place-items:center;
  background:#0a1a1f;color:var(--neon-cyan);font-family:'Press Start 2P',monospace;font-size:11px;
  text-shadow:0 0 6px var(--neon-cyan);
}
.foot .badges{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px 0 14px}
.foot .badge{
  font-family:'Press Start 2P',monospace;font-size:8.5px;letter-spacing:.1em;
  border:1.5px solid var(--ink);padding:6px 8px;color:var(--ink);
}
.foot .links{display:flex;gap:10px;justify-content:center;font-family:'Press Start 2P',monospace;font-size:10px;letter-spacing:.1em;color:var(--neon-cyan);margin-bottom:14px;flex-wrap:wrap}
.foot .links a{color:var(--neon-cyan);text-shadow:0 0 6px rgba(61,245,255,.6)}
.foot .links a:hover{color:var(--neon-pink);text-shadow:0 0 6px rgba(255,61,196,.6)}
.foot .links .pipe{color:#fff}
.foot .copy{font-family:'Space Mono','VT323',monospace;font-size:12px;line-height:1.6;color:var(--mute)}
.foot .copy em{font-style:normal;color:var(--neon-pink)}

/* Health bar block */
.powermeter{
  margin:18px auto 0;max-width:760px;width:100%;
  border:2px solid var(--neon-cyan);padding:10px 14px;
  background:rgba(8,2,15,.6);
  box-shadow:0 0 14px rgba(61,245,255,.4);
}
.powermeter .row{display:grid;grid-template-columns:90px 1fr 50px;gap:10px;align-items:center;font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:.1em;color:var(--neon-cyan);margin:6px 0}
.powermeter .row .meter{display:block;width:100%;height:10px;background:#040013;position:relative;overflow:hidden;border:1px solid var(--neon-cyan)}
.powermeter .row .fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--neon-green), var(--neon-yellow), var(--neon-orange));
}
.powermeter .row .v{color:var(--ink);text-align:right;font-size:8px}

/* Background pong canvas */
#pong{
  position:fixed;left:0;top:0;width:100vw;height:100vh;
  pointer-events:none;z-index:0;opacity:.28;mix-blend-mode:screen;
}

/* Consent banner */
.consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  background:rgba(8,2,15,.95);
  border:2px solid var(--neon-cyan);
  box-shadow:0 0 0 4px #08020F inset, 0 0 18px rgba(61,245,255,.55);
  padding:14px 16px;
  max-width:880px;margin:0 auto;
}
.consent[hidden]{display:none}
.consent-inner{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.consent-msg{
  margin:0;flex:1 1 320px;min-width:240px;
  font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--neon-cyan);text-shadow:0 0 6px rgba(61,245,255,.55);line-height:1.6;
}
.consent-msg small{
  display:block;margin-top:8px;
  font-family:'Space Mono','VT323',monospace;font-size:13px;letter-spacing:0;
  color:#E5DAFF;text-shadow:none;line-height:1.5;
}
.consent-msg small a{color:var(--neon-yellow);text-decoration:underline;text-decoration-color:rgba(248,231,28,.55)}
.consent-msg small a:hover{color:#fff}
.consent-btns{display:flex;gap:10px;flex-wrap:wrap}
.consent .btn{font-size:10px;padding:10px 14px}
@media (max-width:560px){
  .consent{left:8px;right:8px;bottom:8px;padding:12px}
  .consent-inner{gap:12px}
  .consent-btns{width:100%}
  .consent .btn{flex:1}
}

@media (max-width:880px){
  .frames{grid-template-columns:1fr}
  .frames-3{grid-template-columns:1fr}
  .players{grid-template-columns:1fr}
  /* keep nav reachable on mobile — wrap + shrink instead of hiding it */
  .nav{flex-wrap:wrap;gap:8px}
  .nav-r{gap:8px;font-size:9px;flex-wrap:wrap;justify-content:flex-end}
  .nav-r a{padding:4px 6px}
}

/* Tag color schemes per card via inline --frame */
.green{--frame:var(--neon-green)}
.pink{--frame:var(--neon-pink)}
.cyan{--frame:var(--neon-cyan)}
.yellow{--frame:var(--neon-yellow)}
.orange{--frame:var(--neon-orange)}
.purple{--frame:var(--neon-purple)}

/* ── Custom cursor + sparkle trail ─────────────────────────────────── */
/* cursor:none only once script.js confirms it can draw the replacement (it adds
   .has-custom-cursor on fine pointers). If JS fails/blocks, the native cursor stays. */
html.has-custom-cursor, html.has-custom-cursor body { cursor: none; }
html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor .btn,
html.has-custom-cursor .nav-r a, html.has-custom-cursor .frame, html.has-custom-cursor .player,
html.has-custom-cursor .stat-card, html.has-custom-cursor .hero-mark {
  cursor: none;
}

#cursor { display: none; }
html.has-custom-cursor #cursor { display: block; }

#cursor {
  position: fixed; top: 0; left: 0;
  width: 26px; height: 26px;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: transform;
  mix-blend-mode: screen;
}
#cursor svg { display: block; filter: drop-shadow(0 0 6px var(--neon-cyan)) drop-shadow(0 0 12px var(--neon-pink)); }
#cursor.click { animation: cursorPop .3s ease-out; }
@keyframes cursorPop {
  0% { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  50% { transform: translate(-50%,-50%) scale(1.6) rotate(45deg); }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
}

.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.sparkle svg { width: 100%; height: 100%; display: block; }
@keyframes sparkleFade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%  { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,12px))) scale(.2) rotate(180deg); }
}

/* Touch / coarse pointers — restore native cursor (custom cursor doesn't track touch) */
@media (hover: none) and (pointer: coarse) {
  html, body, a, button, .btn, .nav-r a, .frame, .player, .stat-card, .hero-mark { cursor: auto; }
  #cursor { display: none; }
}

/* ── Accessibility layer ───────────────────────────────────────────── */
/* Visually hidden but available to screen readers / SEO (the h1). */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Skip-to-content — off-screen until keyboard-focused. */
.skip-link{
  position:fixed;top:-120px;left:8px;z-index:9999;
  background:var(--neon-yellow);color:#08020F;
  font-family:'Press Start 2P',monospace;font-size:10px;letter-spacing:.08em;
  padding:10px 14px;border:2px solid #08020F;
  transition:top .12s ease;
}
.skip-link:focus{top:8px;outline:2px solid var(--neon-cyan);outline-offset:2px}

/* Visible keyboard focus everywhere (mouse clicks stay clean via :focus-visible). */
:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:2px}
main:focus{outline:none}

/* ── Reduced motion ────────────────────────────────────────────────── */
/* Respect OS "reduce motion": neutralize the CRT flicker, marquees, orbits,
   rainbow, blink, spins, etc. JS-driven motion (pong/sprites/sparkles/stars)
   is separately gated in script.js. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .ticker-track{animation:none !important;transform:none !important}
  .floor::before,.rainbow,.flicker,.nav-l .blink,.insert b{animation:none !important}
}