:root{--night:#0B0220;--grape:#2A0A4E;--magenta:#FF2BD6;--cyan:#22F0FF;--sun:#FFD84A;--white:#FFF6FF;--dim:#9B7FC7;--red:#FF3B6B}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--white);font-family:'Press Start 2P','VT323',ui-monospace,monospace;overflow:hidden;-webkit-font-smoothing:none}
#gl{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none}
.scan{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);mix-blend-mode:multiply}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.noscript{position:fixed;inset:0;display:grid;place-items:center;font-size:12px;line-height:2;text-align:center;padding:24px}
.hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(12px,2.5vw,28px);padding-top:calc(clamp(12px,2.5vw,28px) + env(safe-area-inset-top,0px));padding-bottom:calc(clamp(12px,2.5vw,28px) + 26px + env(safe-area-inset-bottom,0px))}
.hud>*{pointer-events:auto}
.hud>.stage{pointer-events:none}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:clamp(8px,1.2vw,12px);line-height:1.9;text-transform:uppercase}
.row .right{text-align:right}
.row .r3{text-align:center}
.row .k{color:var(--cyan);text-shadow:0 0 8px var(--cyan)}
.row .v{color:var(--white)}
.row .hi{color:var(--sun);text-shadow:0 0 10px var(--sun)}
.logo{font-family:'Monoton',cursive;font-size:clamp(34px,8vw,96px);line-height:1;color:var(--magenta);text-shadow:0 0 6px #fff,0 0 18px var(--magenta),0 0 48px var(--magenta),0 0 90px rgba(255,43,214,.6);letter-spacing:.06em;text-align:center;animation:neon 6s infinite;margin-top:clamp(4px,1vh,14px);pointer-events:none;max-height:1.3em;overflow:visible;transition:max-height .5s ease .35s,margin-top .5s ease .35s}
.logo span{display:inline-block;transform-origin:50% 0}
.logo.melt{max-height:0;margin-top:0}
.logo.melt span{animation:melt .95s ease-in forwards}
.logo.reform span{animation:reform .8s cubic-bezier(.2,.9,.25,1.05) both}
@keyframes melt{0%{transform:none;filter:blur(0);opacity:1}35%{transform:translateY(.12em) scaleY(1.35) scaleX(.92);filter:blur(1px);opacity:1}100%{transform:translateY(1.6em) scaleY(3.2) scaleX(.55);filter:blur(12px);opacity:0}}
@keyframes reform{from{transform:translateY(1.2em) scaleY(2.6) scaleX(.6);filter:blur(10px);opacity:0}to{transform:none;filter:blur(0);opacity:1}}
.logo.melt+.ipline{font-size:clamp(28px,6.6vw,84px);margin-top:clamp(6px,1.4vh,16px)}
.logo.melt+.ipline.long{font-size:clamp(14px,3.1vw,40px)}
.hud.crt-up .ipline{font-size:clamp(13px,2.2vw,26px);margin-top:clamp(4px,1vh,10px)}
.hud.crt-up .ipline.long{font-size:clamp(10px,1.5vw,18px)}
.logo.god{animation:neon 6s infinite,rainbow 3s linear infinite}
@keyframes neon{0%,100%{opacity:1}93%{opacity:1}94%{opacity:.55}95%{opacity:1}97%{opacity:.7}98%{opacity:1}}
@keyframes rainbow{to{filter:hue-rotate(360deg)}}
.ipline{display:flex;justify-content:center;flex-wrap:wrap;gap:0 .08em;margin-top:clamp(8px,1.6vh,18px);font-size:clamp(22px,4.6vw,56px);line-height:1.1;pointer-events:none;--rise:40vh}
.ipline.rise{animation:rise .8s cubic-bezier(.2,.9,.25,1.05) both}
@keyframes rise{from{transform:translateY(var(--rise)) scale(1.9);opacity:0;filter:blur(6px)}30%{opacity:1;filter:blur(0)}to{transform:none;opacity:1}}
.ipline.long{font-size:clamp(13px,2.4vw,30px);max-width:min(96vw,1100px);margin-inline:auto}
.ipline span{display:inline-block;color:var(--cyan);text-shadow:0 0 4px #fff,0 0 16px currentColor,0 0 40px currentColor,0 0 80px currentColor;animation:wave 1.3s ease-in-out infinite,hue 2.4s linear infinite;animation-fill-mode:backwards}
@keyframes wave{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-.32em) scale(1.15) rotate(-4deg)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.bottom{display:flex;flex-direction:column;align-items:center;gap:14px}
.speedo{width:min(92vw,620px);text-align:center;background:rgba(11,2,32,.72);border:2px solid var(--magenta);box-shadow:0 0 18px rgba(255,43,214,.35),inset 0 0 24px rgba(255,43,214,.12);padding:10px 14px 12px;animation:pop .18s ease-out}
.speedo .lbl{font-size:clamp(7px,1vw,9px);color:var(--cyan);text-shadow:0 0 8px var(--cyan);text-transform:uppercase;letter-spacing:.08em;line-height:1.6}
.speedo .lbl i{font-style:normal;color:var(--sun)}
.speedo .bar{position:relative;height:12px;margin:8px auto;border:2px solid var(--cyan);background:#0b0220;overflow:hidden;box-shadow:0 0 10px rgba(34,240,255,.35)}
.speedo .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--magenta),var(--cyan));transition:width .12s linear;box-shadow:0 0 12px var(--cyan)}
.speedo .bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(11,2,32,.55) 6px 8px)}
.speedo.ping .bar i{width:18%!important;animation:sweep 1s ease-in-out infinite alternate}
@keyframes sweep{from{margin-left:0}to{margin-left:82%}}
.speedo .num{font-size:clamp(9px,1.4vw,12px);color:var(--dim);text-transform:uppercase;line-height:1.4}
.speedo .num b{font-size:clamp(18px,3.2vw,34px);color:var(--sun);text-shadow:0 0 6px #fff,0 0 18px var(--sun);font-weight:400;font-variant-numeric:tabular-nums}
.speedo .num em{font-style:normal;color:var(--cyan);text-shadow:0 0 8px var(--cyan)}
.speedo.done{border-color:var(--sun);box-shadow:0 0 22px rgba(255,216,74,.45),inset 0 0 24px rgba(255,216,74,.12)}
.speedo.failed{border-color:var(--red);box-shadow:0 0 18px rgba(255,59,107,.4)}
.speedo.failed .num b{color:var(--red);text-shadow:0 0 12px var(--red)}
.press{font-size:clamp(9px,1.5vw,14px);color:var(--sun);text-shadow:0 0 10px var(--sun);animation:blink 1.1s steps(1) infinite;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.6}
.press.err{color:var(--red);text-shadow:0 0 10px var(--red);animation:none}
.press.steady{animation:none}
@keyframes blink{50%{opacity:0}}
.btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:980px}
button,.btn{font:inherit;font-size:clamp(8px,1.1vw,11px);text-transform:uppercase;color:var(--white);background:linear-gradient(180deg,#3d1470,#1a0538);border:3px solid var(--cyan);padding:11px 14px;cursor:pointer;box-shadow:0 0 0 2px #0B0220,0 0 18px rgba(34,240,255,.35),inset 0 -4px 0 rgba(0,0,0,.4);text-shadow:0 0 6px var(--cyan);transition:transform .08s,box-shadow .15s;text-decoration:none;line-height:1}
button:hover,.btn:hover{box-shadow:0 0 0 2px #0B0220,0 0 30px rgba(34,240,255,.7),inset 0 -4px 0 rgba(0,0,0,.4)}
button:active{transform:translateY(3px);box-shadow:0 0 0 2px #0B0220,0 0 12px rgba(34,240,255,.5),inset 0 -1px 0 rgba(0,0,0,.4)}
button:focus-visible,.btn:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:0 0 0 2px #0B0220,inset 0 -4px 0 rgba(0,0,0,.4)}
button.coin{border-color:var(--sun);text-shadow:0 0 6px var(--sun);background:linear-gradient(180deg,#7a3a00,#3a1600);box-shadow:0 0 0 2px #0B0220,0 0 18px rgba(255,216,74,.45),inset 0 -4px 0 rgba(0,0,0,.4)}
button[aria-pressed="true"]{background:linear-gradient(180deg,var(--magenta),#8a0a70);border-color:#fff}
.ticker{position:fixed;left:0;right:0;bottom:0;height:26px;line-height:26px;padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:content-box;background:#000;border-top:2px solid var(--magenta);overflow:hidden;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;pointer-events:none}
.ticker span{display:inline-block;white-space:nowrap;padding-left:100%;animation:tick 60s linear infinite}
.ticker i{font-style:normal;margin-right:2em}
.ticker b{color:var(--cyan);font-weight:400}
@keyframes tick{to{transform:translateX(-100%)}}
.toasts{position:fixed;left:50%;top:40%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;z-index:5;width:min(92vw,700px)}
.toast{font-size:clamp(10px,1.6vw,16px);color:var(--sun);text-shadow:0 0 10px #fff,0 0 30px var(--sun);text-transform:uppercase;text-align:center;animation:pop .18s ease-out;line-height:1.5;background:rgba(11,2,32,.6);padding:8px 14px}
.toast.big{font-size:clamp(16px,3vw,32px)}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
.modal-backdrop{position:fixed;inset:0;background:rgba(11,2,32,.82);display:grid;place-items:center;padding:16px;z-index:10;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:#12052b;color:var(--white);border:3px solid var(--cyan);width:100%;max-width:560px;box-shadow:0 0 40px rgba(34,240,255,.4);max-height:90vh;display:flex;flex-direction:column}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:2px solid var(--magenta);font-size:10px;text-transform:uppercase;color:var(--magenta);gap:12px}
.modal header button{padding:8px 10px;font-size:9px}
.modal pre{margin:0;padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5;overflow:auto;color:#dcd0ff;flex:1}
.blink{animation:blink 1s steps(1) infinite}
.bonus{padding:20px;text-align:center}
.bonus .bar{height:18px;border:3px solid var(--cyan);margin:0 0 18px;background:#0b0220}
.bonus .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--magenta),var(--cyan));transition:width .1s linear}
.bonus .big{font-size:clamp(20px,4vw,40px);color:var(--sun);text-shadow:0 0 16px var(--sun);margin:8px 0 16px}
.bonus p{font-size:9px;color:var(--dim);line-height:1.8}
.bonus dl,.help dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;font-size:9px;line-height:1.8;margin:0;text-align:left}
.bonus dt,.help dt{color:var(--cyan);margin:0}
.bonus dd,.help dd{margin:0;color:var(--white)}
.help{padding:18px;overflow:auto}
.help .note{font-size:9px;line-height:1.8;color:var(--dim);margin:16px 0 0}
.help h4{font-size:9px;color:var(--magenta);text-transform:uppercase;margin:20px 0 8px}
.help pre{padding:0;font-size:11px;color:#dcd0ff}
/* ---- the CRT: a curved sheet of glass that melts into the middle of the page and becomes the play area ---- */
.dim{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,rgba(11,2,32,.55) 0%,rgba(11,2,32,.92) 80%);opacity:0;transition:opacity .7s ease}
.dim.on{opacity:1}
.stage{flex:1 1 0;min-height:0;container-type:size;display:grid;place-items:center;margin:clamp(4px,1vh,12px) 0}
.crt{--ar:16/9;width:min(100cqw,calc(100cqh * var(--ar)));aspect-ratio:var(--ar);pointer-events:auto;touch-action:none}
.crt canvas{display:block;width:100%;height:100%}
@media (max-width:700px){
  .row{font-size:8px;line-height:1.8}
  .speedo{padding:8px 10px}
  .row .r3{display:none}
  .btns{gap:6px}
  button,.btn{padding:10px 10px;font-size:8px;border-width:2px}
  .bottom{gap:10px}
}
@media (prefers-reduced-motion:reduce){.logo,.press,.ticker span,.blink,.ipline.rise,.ipline span,.logo span{animation:none}.logo,.dim{transition:none}}