:root{
  --bg:#0b0a1f; --panel:#16143a; --ink:#f4f1ff; --dim:#9a94c9;
  --pink:#ff3fa4; --cyan:#2ef2ff; --yellow:#ffd23f; --green:#43ff7a; --orange:#ff8a3d;
  --px:'Press Start 2P', monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--px);}
body{
  min-height:100vh;line-height:1.7;font-size:12px;
  background-image:
    radial-gradient(circle at 20% 10%, #2a1460 0, transparent 40%),
    radial-gradient(circle at 80% 90%, #0f3a5a 0, transparent 40%);
}
body::after{ /* scanlines */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.18) 2px 4px);
}
a{color:var(--cyan)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}

/* Header */
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;flex-wrap:wrap}
.logo{font-size:22px;color:var(--yellow);text-shadow:3px 3px 0 var(--pink);text-decoration:none;letter-spacing:2px}
.player-chip{background:var(--panel);border:3px solid var(--cyan);padding:8px 12px;cursor:pointer;color:var(--ink);font-family:var(--px);font-size:10px}
.player-chip b{color:var(--green)}

/* Hero */
.hero{text-align:center;padding:40px 0 30px}
.hero h1{font-size:clamp(28px,7vw,56px);margin:0 0 16px;color:var(--yellow);
  text-shadow:4px 4px 0 var(--pink),8px 8px 0 #4b1d8a;letter-spacing:3px}
.hero p{color:var(--dim);font-size:11px;max-width:560px;margin:0 auto}
.blink{animation:blink 1s steps(1) infinite;color:var(--green)}
@keyframes blink{50%{opacity:0}}

/* Section titles */
h2.sec{font-size:16px;color:var(--cyan);margin:48px 0 18px;text-shadow:2px 2px 0 #000}
h2.sec::before{content:"▶ ";color:var(--pink)}

/* Game cabinets */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.cab{background:var(--panel);border:4px solid var(--c,var(--pink));box-shadow:6px 6px 0 #000;
  padding:16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);
  transition:transform .08s}
.cab:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000}
.cab .screen{height:120px;background:#000;border:3px solid #333;display:flex;align-items:center;justify-content:center;font-size:40px;image-rendering:pixelated}
.cab h3{margin:0;font-size:13px;color:var(--c,var(--pink))}
.cab .by{font-size:9px;color:var(--dim)}
.cab .desc{font-size:9px;color:var(--ink);opacity:.85;flex:1}
.cab .best{font-size:9px;color:var(--yellow)}
.cab.soon{opacity:.55;border-style:dashed;cursor:default}
.cab.soon:hover{transform:none;box-shadow:6px 6px 0 #000}

/* Buttons */
.btn{font-family:var(--px);font-size:11px;background:var(--pink);color:#fff;border:0;padding:12px 16px;
  box-shadow:4px 4px 0 #000;cursor:pointer;text-transform:uppercase}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.btn.alt{background:var(--cyan);color:#000}
.btn.go{background:var(--green);color:#000}

/* Panels */
.panel{background:var(--panel);border:4px solid var(--yellow);box-shadow:6px 6px 0 #000;padding:20px}

/* Leaderboard */
.board{width:100%;border-collapse:collapse;font-size:11px}
.board td{padding:8px 6px;border-bottom:2px dashed #2c2860}
.board td:first-child{color:var(--dim);width:42px}
.board td:last-child{text-align:right;color:var(--yellow)}
.board tr.r1 td:nth-child(2){color:var(--yellow)}
.board tr.r2 td:nth-child(2){color:#d8d8e8}
.board tr.r3 td:nth-child(2){color:var(--orange)}
.board tr.me td{background:rgba(67,255,122,.12)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{font-family:var(--px);font-size:9px;padding:8px 10px;background:#000;color:var(--dim);border:2px solid #333;cursor:pointer}
.tabs button.on{color:#000;background:var(--cyan);border-color:var(--cyan)}

/* About + donate */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.two{grid-template-columns:1fr}}
.about p,.donate p{font-size:10px;color:var(--ink)}
.donate{border-color:var(--green)}
.acct{background:#000;padding:12px;font-size:13px;color:var(--green);letter-spacing:1px;margin:10px 0;word-break:break-all}

footer{text-align:center;color:var(--dim);font-size:9px;padding:50px 0 30px}

/* Name modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:500;padding:16px}
.modal.open{display:flex}
.modal .panel{max-width:420px;width:100%;text-align:center}
.modal h3{color:var(--yellow);font-size:14px;margin-top:0}
.modal input{width:100%;font-family:var(--px);font-size:16px;padding:12px;background:#000;color:var(--green);
  border:3px solid var(--cyan);text-align:center;text-transform:uppercase;margin:12px 0}
.modal .err{color:var(--pink);font-size:9px;min-height:14px}

/* Game column: cabinet + its own top-10 board */
.games-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));row-gap:14px}
.gamecol{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:14px;min-width:0}
.gamecol .cab{height:100%}
.playbtn.soonbtn{background:#2c2860;color:var(--dim);box-shadow:4px 4px 0 #000}
.playbtn{align-self:flex-start;font-size:10px;padding:10px 14px}
.miniboard{min-height:340px;background:var(--panel);border:4px solid var(--c,var(--yellow));box-shadow:6px 6px 0 #000;padding:12px 14px;flex:1}
.miniboard h4{margin:0 0 8px;font-size:11px;color:var(--c,var(--yellow))}
.miniboard .board{font-size:9px}
.miniboard .board td{padding:6px 4px}
.miniboard .board td:first-child{width:30px}
.miniboard p.load,.miniboard p{font-size:9px;color:var(--dim);margin:0}

/* =========================================================
   FX — animations & flash
   ========================================================= */
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block}
body{background-attachment:fixed}

/* CRT power-on */
.crt-on{position:fixed;inset:0;z-index:1000;background:#000;pointer-events:none;animation:crt 1.1s ease-out forwards}
.crt-on::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1px;background:#fff;
  box-shadow:0 0 30px 6px #2ef2ff;transform:scaleX(0);animation:crtline 1.1s ease-out forwards}
@keyframes crtline{0%{transform:scaleX(0)}35%{transform:scaleX(1);top:50%;height:3px;opacity:1}
  70%{top:0;height:100%;opacity:.35}100%{top:0;height:100%;opacity:0}}
@keyframes crt{0%,45%{opacity:1}100%{opacity:0;visibility:hidden}}

/* Title: letters drop in, then neon pulse + glitch */
.hero h1{animation:neon 2.6s ease-in-out 2.2s infinite}
.hero h1 .ch{display:inline-block;animation:drop .7s cubic-bezier(.3,1.7,.5,1) backwards;animation-delay:calc(.7s + var(--k) * 80ms)}
.hero h1 .sp{display:inline-block;width:.6em}
@keyframes drop{0%{transform:translateY(-160px) rotate(-20deg) scale(.5);opacity:0}100%{transform:none;opacity:1}}
@keyframes neon{0%,100%{filter:drop-shadow(0 0 0 rgba(255,63,164,0))}50%{filter:drop-shadow(0 0 18px rgba(255,63,164,.75))}}
.hero h1.glitch{animation:glitch .35s steps(2) 1, neon 2.6s ease-in-out infinite}
@keyframes glitch{0%{transform:none}20%{transform:translate(-4px,2px) skewX(10deg);text-shadow:-4px 0 #2ef2ff,4px 4px 0 var(--pink),8px 8px 0 #4b1d8a}
  40%{transform:translate(4px,-2px);text-shadow:4px 0 #43ff7a,4px 4px 0 var(--pink),8px 8px 0 #4b1d8a}
  60%{transform:translate(-2px,1px) skewX(-8deg)}100%{transform:none}}

/* Generic rise-in */
.rise{animation:rise .8s cubic-bezier(.2,.9,.3,1.25) backwards;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}

/* Tiles fly in, staggered */
.gamecol .cab{animation:tilein .9s cubic-bezier(.2,1.35,.4,1) backwards;animation-delay:calc(1.7s + var(--i) * 160ms);
  transform-style:preserve-3d;will-change:transform;transition:transform .15s ease-out, box-shadow .2s}
@keyframes tilein{0%{opacity:0;transform:perspective(800px) translateY(120px) rotateX(70deg) scale(.7)}
  70%{opacity:1}100%{opacity:1;transform:none}}
.gamecol .miniboard{animation:boardin .7s cubic-bezier(.2,1.2,.4,1) backwards;animation-delay:calc(2.15s + var(--i) * 160ms)}
@keyframes boardin{0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(-20px)}100%{opacity:1;clip-path:inset(0 0 -20px 0)}}

/* Board rows tick in */
.board tr{animation:rowin .4s cubic-bezier(.2,1.3,.4,1) backwards;animation-delay:calc(var(--r,0) * 60ms)}
.miniboard .board tr{animation-delay:calc(2.5s + var(--i,0) * 160ms + var(--r,0) * 70ms)}
body.ready .miniboard .board tr{animation-delay:calc(var(--r,0) * 60ms)}
@keyframes rowin{from{opacity:0;transform:translateX(-30px)}}
.board tr.r1 td:nth-child(2){animation:gold 1.6s ease-in-out infinite}
@keyframes gold{50%{text-shadow:0 0 10px rgba(255,210,63,.9)}}

/* Tile hover flash */
.cab:not(.soon):hover{box-shadow:8px 8px 0 #000,0 0 34px -4px var(--c)}
.cab .screen{position:relative;overflow:hidden;
  background:#000 repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.cab .screen::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 35%,transparent),transparent 65%);opacity:.6}
.cab .screen::after{content:"";position:absolute;inset:-10%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-110%)}
.cab:not(.soon):hover .screen::after{transition:transform .7s ease;transform:translateX(110%)}
.ico{position:relative;display:inline-block;animation:bob 1.8s ease-in-out infinite}
.cab:not(.soon):hover .ico{animation:bob .45s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.soon .ico{animation:flicker 3s steps(1) infinite}
@keyframes flicker{0%,100%{opacity:.9}47%{opacity:.2}49%{opacity:.9}51%{opacity:.3}53%{opacity:.9}}
.playbtn:not(.soonbtn){animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:4px 4px 0 #000,0 0 18px rgba(67,255,122,.8)}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .7s ease, transform .8s cubic-bezier(.2,1.2,.4,1)}
.reveal.in{opacity:1;transform:none}
.sec .cur{display:inline-block;width:.6em;animation:blink .8s steps(1) infinite;color:var(--green)}

/* Donate shine + pixel confetti */
.acct{position:relative;overflow:hidden}
.acct::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(67,255,122,.25) 50%,transparent 65%);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.bit{position:fixed;width:8px;height:8px;z-index:900;pointer-events:none}
.logo{transition:text-shadow .2s}
.logo:hover{text-shadow:3px 3px 0 var(--pink),0 0 16px var(--yellow)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .crt-on{display:none}.reveal{opacity:1;transform:none}
}

/* Joke ticker */
.joke{margin:22px auto 0;font-size:10px;color:var(--ink);min-height:3.6em;max-width:640px}
.joke .blink{color:var(--green)}
.joke b{color:var(--yellow);display:inline-block;animation:pop .4s cubic-bezier(.3,1.8,.5,1)}
.joke b:empty{animation:none}
@keyframes pop{from{transform:scale(.3);opacity:0}}