*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#07051a}
body{font-family:'Press Start 2P',monospace;user-select:none;-webkit-user-select:none;cursor:default;color:#fff}
#app,#app canvas{position:fixed;inset:0;display:block}
.hidden{display:none!important}

#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(10,0,30,.55));z-index:3}
#speedlines{position:fixed;inset:-10%;pointer-events:none;opacity:0;z-index:2;
  background:repeating-conic-gradient(from 0deg,rgba(160,240,255,.22) 0deg 1deg,transparent 1deg 7deg);
  -webkit-mask-image:radial-gradient(ellipse at center,transparent 38%,#000 75%);
  mask-image:radial-gradient(ellipse at center,transparent 38%,#000 75%)}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:3;background:radial-gradient(ellipse at center,transparent 35%,rgba(255,40,90,.6))}
#crosshair{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#00f0ff;box-shadow:0 0 8px #00f0ff,0 0 0 1px rgba(0,0,0,.6);z-index:3;pointer-events:none}

#hud{position:fixed;inset:0;pointer-events:none;z-index:4;text-shadow:2px 2px 0 #000}
.lab{font-size:8px;color:#9fb6ff}
#hudLeft{position:absolute;left:20px;top:18px}
#section{font-size:11px;color:#ff4fd8;margin-top:8px}
#hudCenter{position:absolute;left:50%;top:14px;transform:translateX(-50%);text-align:center}
#time{font-size:24px;color:#00f0ff}
#split{font-size:12px;margin-top:10px;height:14px}
#split.ahead{color:#4dff8a}
#split.behind{color:#ff4f6a}
#hudRight{position:absolute;right:20px;top:18px;text-align:right;font-size:11px;line-height:2}
#best{color:#ffe600}
#pips{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:14px}
.pip{width:96px;height:26px;border:2px solid #334;border-radius:4px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);transition:all .08s}
.pip span{font-size:8px;color:#556}
.pip.on{border-color:#00f0ff;box-shadow:0 0 10px rgba(0,240,255,.6),inset 0 0 8px rgba(0,240,255,.3)}
.pip.on span{color:#bff8ff}
#pipDash.on{border-color:#ff4fd8;box-shadow:0 0 10px rgba(255,79,216,.6),inset 0 0 8px rgba(255,79,216,.3)}
#pipDash.on span{color:#ffd0f4}
#speed{position:absolute;right:22px;bottom:24px;font-size:10px;color:#9fb6ff}

#popups{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.toast{position:absolute;left:50%;top:22%;transform:translate(-50%,0);font-size:13px;color:#ffe600;text-shadow:2px 2px 0 #000;white-space:nowrap;animation:toast 1.4s ease-out forwards}
.toast.big{font-size:20px;color:#00f0ff}
.toast.title{top:34%;color:#ff4fd8;font-size:16px}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}12%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .18s;z-index:8}
#fade.on{opacity:1}

.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,4,28,.72);z-index:10}
.panel{text-align:center;padding:30px;max-width:900px;max-height:100vh;overflow-y:auto}
.title{font-size:44px;line-height:1.4;color:#00f0ff;text-shadow:4px 4px 0 #ff2a8a,8px 8px 0 rgba(0,0,0,.5);margin-bottom:16px}
.subtitle{font-size:10px;color:#ff4fd8;margin-bottom:28px;letter-spacing:1px}
.controls{display:grid;grid-template-columns:repeat(3,auto);gap:12px 26px;justify-content:center;font-size:8px;color:#cfe6ff;text-align:left;line-height:1.6}
.controls .k{color:#ffe600}
.clickstart{font-size:12px;color:#00f0ff;margin-top:24px;animation:blink 1.1s steps(2) infinite}
#levelGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}
.lvl{font-family:inherit;color:#cfe6ff;background:rgba(20,20,51,.85);border:2px solid #2a2a66;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.lvl:hover{border-color:#00f0ff;box-shadow:0 0 12px rgba(0,240,255,.5)}
.lvl.sel{border-color:#ff4fd8}
.lvl .n{font-size:16px;color:#00f0ff}
.lvl .nm{font-size:7px;line-height:1.5;min-height:21px;display:flex;align-items:center}
.lvl .bt{font-size:7px;color:#556}
.lvl .bt.author{color:#ff4fd8}.lvl .bt.gold{color:#ffd23f}.lvl .bt.silver{color:#d6e2f0}.lvl .bt.bronze{color:#e08a4a}.lvl .bt.none{color:#8a9cc8}
.winLevel{font-size:9px;color:#ff4fd8;margin-bottom:6px}
.hint{font-size:7px;color:#8a9cc8;margin-top:20px;line-height:1.8}
@keyframes blink{50%{opacity:.25}}
h2{font-size:22px;text-shadow:3px 3px 0 #000;margin-bottom:14px}
h2.clear{color:#00f0ff}
.medal{font-size:30px;line-height:1.3;margin:10px 0 22px;text-shadow:3px 3px 0 #000}
.medal.author{color:#ff4fd8}.medal.gold{color:#ffd23f}.medal.silver{color:#d6e2f0}.medal.bronze{color:#e08a4a}.medal.none{color:#8a9cc8}
.tally{display:inline-block;text-align:left;font-size:11px}
.tally>div{display:flex;justify-content:space-between;gap:70px;margin:11px 0;color:#cfe6ff}
.tally .tot{color:#00f0ff;border-top:2px solid rgba(0,240,255,.4);padding-top:13px;margin-top:15px;font-size:9px}
.btns{display:flex;gap:16px;justify-content:center}
.btn{font-family:inherit;font-size:10px;color:#fff;background:#ff2a8a;border:none;padding:14px 20px;cursor:pointer;box-shadow:0 4px 0 #8a1050,4px 4px 0 #000;margin-top:22px}
.btn.alt{background:#2a3aa8;box-shadow:0 4px 0 #141c5a,4px 4px 0 #000}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a1050}