:root{--navy:#101a2e;--navy2:#18243d;--ink:#0a1020;--yellow:#ffd23f;--orange:#ff7a2f;--teal:#2ee6c6;--sand:#ffe0a3;--pink:#ff4d9d;--green:#7ddf4a;--white:#fffaf0;--font:"Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#0a1020;font-family:var(--font);color:var(--white);-webkit-font-smoothing:antialiased;user-select:none;touch-action:none}#app{position:fixed;inset:0}#canvas-wrap{position:absolute;inset:0;transition:filter .12s linear}#scene{display:block;width:100%;height:100%}#glitch{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .12s}#app.glitch #glitch{opacity:1}#app.glitch #canvas-wrap{animation:glitchShift .18s steps(2) infinite;filter:invert(.86) hue-rotate(120deg) saturate(1.8) contrast(1.2)}@keyframes glitchShift{0%{transform:translate(0)}25%{transform:translate(-7px,3px)}50%{transform:translate(6px,-4px) skew(1.2deg)}75%{transform:translate(-3px,-2px)}to{transform:translate(4px,2px)}}.glitch-bars{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,0,140,.35) 0 3px,transparent 3px 9px);mix-blend-mode:screen;animation:bars .35s linear infinite}@keyframes bars{to{transform:translateY(9px)}}.glitch-label{position:absolute;top:46%;left:0;right:0;text-align:center;font-size:min(9vw,88px);font-weight:800;letter-spacing:.08em;color:#ff2fa0;text-shadow:4px 0 #14f5e2,-4px 0 #ffd23f;animation:flick .12s steps(2) infinite}@keyframes flick{50%{opacity:.25;transform:scale(1.03)}}#ui{position:absolute;inset:0;pointer-events:none}.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:3vh 3vw;pointer-events:auto}.screen.active{display:flex;animation:pop .22s ease-out}@keyframes pop{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}.panel{background:linear-gradient(180deg,#18243df7,#0c1424f7);border:4px solid #0a1020;border-radius:26px;padding:26px 28px;box-shadow:0 18px #00000059,0 0 0 6px #ffd23f29;max-width:min(1080px,94vw);width:100%;max-height:94vh;overflow:auto}.panel.wide-panel{max-width:min(1180px,96vw)}.loading-panel{max-width:520px;text-align:center}.panel-head{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}.panel-head h1{font-size:clamp(26px,3.4vw,44px);font-weight:800;letter-spacing:.04em;color:var(--yellow);text-shadow:0 4px 0 #0a1020}.panel-foot{display:flex;gap:14px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}.checker-strip{height:12px;border-radius:6px;background-image:conic-gradient(#ffd23f 0 25%,#101a2e 0 50%,#ffd23f 0 75%,#101a2e 0);background-size:20px 20px;opacity:.95}.checker-strip.wide{height:16px;background-size:26px 26px;width:min(560px,86vw)}.menu-stack{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}.logo{font-weight:800;line-height:.9;letter-spacing:-.01em;filter:drop-shadow(0 10px 0 rgba(0,0,0,.4))}.logo-nara{display:block;font-size:clamp(48px,10vw,132px);color:var(--teal);text-shadow:0 6px 0 #0e7f6f,0 12px 22px rgba(0,0,0,.5)}.logo-kart{display:block;font-size:clamp(56px,12vw,158px);color:var(--yellow);text-shadow:0 7px 0 #b26a00,0 14px 24px rgba(0,0,0,.5);transform:rotate(-2deg)}.logo-sub{margin-top:6px;font-size:clamp(12px,1.5vw,20px);letter-spacing:.5em;color:var(--sand);opacity:.85}.logo.small .logo-nara{font-size:38px}.logo.small .logo-kart{font-size:44px}.btn-col{display:flex;flex-direction:column;gap:14px;width:min(340px,80vw)}.hint{font-size:14px;color:#bcd0e8;max-width:640px;line-height:1.5}.hint b{color:var(--yellow)}.btn{font-family:var(--font);font-weight:800;font-size:clamp(17px,2vw,24px);letter-spacing:.06em;color:var(--white);background:linear-gradient(180deg,#24365a,#16233c);border:3px solid #0a1020;border-radius:18px;padding:14px 26px;cursor:pointer;box-shadow:0 6px #060b16;transition:transform .07s,box-shadow .07s,filter .15s}.btn:hover{filter:brightness(1.18)}.btn:active{transform:translateY(5px);box-shadow:0 1px #060b16}.btn-primary{background:linear-gradient(180deg,var(--yellow),var(--orange));color:#2a1500;box-shadow:0 6px #8a3b00}.btn-primary:active{box-shadow:0 1px #8a3b00}.btn-ghost{background:linear-gradient(180deg,#2b3c60,#1a2740)}.diff-row{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap}.diff-label{font-weight:800;letter-spacing:.14em;color:#bcd0e8;font-size:clamp(12px,1.4vw,16px)}.btn-diff{font-size:clamp(14px,1.6vw,19px);padding:10px 22px;background:linear-gradient(180deg,#2b3c60,#1a2740)}.btn-diff.sel{background:linear-gradient(180deg,var(--yellow),var(--orange));color:#2a1500;box-shadow:0 6px #8a3b00}.btn-diff.sel:active{box-shadow:0 1px #8a3b00}.char-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}.char-card{position:relative;background:linear-gradient(180deg,#22334f,#141f36);border:3px solid #0a1020;border-radius:20px;padding:10px;cursor:pointer;text-align:center;transition:transform .12s,border-color .12s;overflow:hidden}.char-card:hover{transform:translateY(-5px)}.char-card.sel{border-color:var(--yellow);box-shadow:0 0 0 4px #ffd23f40,0 10px #0000004d;transform:translateY(-5px)}.char-card .glow{position:absolute;inset:-40% 0 auto;height:130%;opacity:.28;filter:blur(22px)}.char-card img{position:relative;width:100%;max-width:130px;image-rendering:auto}.char-card .cname{position:relative;font-weight:800;font-size:20px;letter-spacing:.06em;margin-top:2px}.char-card .ctag{position:relative;font-size:11.5px;color:#a9c1de;min-height:28px;line-height:1.2;padding:0 2px}.char-card.sel:after{content:"✓";position:absolute;top:6px;right:9px;color:var(--yellow);font-size:20px;font-weight:800}.char-detail{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;margin-top:18px;background:#00000047;border-radius:18px;padding:16px 20px}.stat{display:flex;align-items:center;gap:12px}.stat label{width:64px;font-size:13px;letter-spacing:.1em;color:var(--sand)}.stat-bar{flex:1;height:14px;background:#0a1020;border-radius:8px;overflow:hidden;box-shadow:inset 0 2px #00000080}.stat-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--teal),var(--yellow));transition:width .2s}.char-blurb{grid-column:1/-1;font-size:14px;color:#cfe0f5;line-height:1.45}.char-blurb b{color:var(--yellow)}.track-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.track-card{background:linear-gradient(180deg,#22334f,#141f36);border:3px solid #0a1020;border-radius:20px;padding:12px;cursor:pointer;transition:transform .12s,border-color .12s}.track-card.sel{border-color:var(--yellow);transform:translateY(-4px);box-shadow:0 0 0 4px #ffd23f38}.track-card canvas{width:100%;border-radius:14px;background:#0d2b3a;display:block}.track-card .tname{font-weight:800;font-size:22px;margin-top:8px;letter-spacing:.04em}.track-card .tmeta{font-size:12.5px;color:#a9c1de}.track-card.locked{opacity:.45;cursor:not-allowed;filter:grayscale(.7)}.track-card.locked .tname:after{content:" 🔒"}.opt-list{display:flex;flex-direction:column;gap:12px}.opt{position:relative;display:flex;align-items:center;justify-content:space-between;background:#00000040;border-radius:16px;padding:14px 18px;font-weight:700;letter-spacing:.08em;cursor:pointer}.opt input{position:absolute;opacity:0;pointer-events:none}.switch{width:58px;height:30px;border-radius:16px;background:#0a1020;position:relative;transition:background .15s;box-shadow:inset 0 2px #00000080}.switch:after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#7c8ba5;transition:.15s}.opt input:checked~.switch{background:#0d5f52}.opt input:checked~.switch:after{left:32px;background:var(--teal)}.credits{display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:#d5e4f6;line-height:1.5}.credits b{color:var(--yellow)}#hud{position:absolute;inset:0;display:none;pointer-events:none}#hud.on{display:block}.hud-left{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px}.hud-stat{display:flex;align-items:baseline;gap:12px;background:#0a1020d1;border:3px solid rgba(255,210,63,.55);border-radius:14px;padding:6px 16px;min-width:220px;box-shadow:0 5px #0006}.hud-stat label{font-size:13px;letter-spacing:.18em;color:var(--sand);width:88px}.hud-stat b{font-size:30px;font-weight:800;line-height:1;color:#fff;text-shadow:0 3px 0 #0a1020}.hud-best{font-size:13px;letter-spacing:.14em;color:#9fb6d4;padding-left:6px}.hud-best span{color:var(--teal)}.hud-right{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.item-slot{width:104px;height:104px;border-radius:22px;background:#0a1020d9;border:4px solid var(--yellow);display:grid;place-items:center;font-size:52px;box-shadow:0 6px #0006;background-image:conic-gradient(rgba(255,210,63,.16) 0 25%,transparent 0 50%,rgba(255,210,63,.16) 0 75%,transparent 0);background-size:26px 26px}.item-slot .qmark{color:#3d5578;font-weight:800;font-size:46px}.item-slot.pulse{animation:slotPop .45s ease-out}@keyframes slotPop{0%{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.18) rotate(4deg)}to{transform:none}}#minimap{width:190px;height:190px;background:#0a1020b3;border:3px solid rgba(46,230,198,.5);border-radius:18px}#minimap.hide{display:none}.hud-bottom{position:absolute;bottom:18px;left:18px;display:flex;flex-direction:column;gap:8px}.meter{display:flex;align-items:center;gap:10px}.meter label{font-size:12px;letter-spacing:.14em;color:var(--sand);width:44px}.meter-track{width:min(260px,40vw);height:16px;background:#0a1020d9;border:3px solid #0a1020;border-radius:10px;overflow:hidden}.meter-fill{height:100%;width:0%;border-radius:8px;transition:width .08s linear}.meter-fill.spd{background:linear-gradient(90deg,var(--teal),var(--yellow))}.meter-fill.drift{background:linear-gradient(90deg,#ff9a3d,var(--pink))}.banner{position:absolute;top:22%;left:0;right:0;text-align:center;font-size:min(8vw,74px);font-weight:800;color:var(--yellow);text-shadow:0 6px 0 #0a1020,0 0 30px rgba(255,160,40,.6);opacity:0;transform:scale(.7)}.banner.show{animation:bannerIn 1.5s ease-out}@keyframes bannerIn{0%{opacity:0;transform:scale(.5) rotate(-6deg)}18%{opacity:1;transform:scale(1.08)}30%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(1.15)}}.toast{position:absolute;bottom:14%;left:0;right:0;text-align:center;font-size:clamp(18px,2.6vw,32px);font-weight:800;color:#fff;text-shadow:0 4px 0 #0a1020;opacity:0}.toast.show{animation:toastIn 1.15s ease-out}@keyframes toastIn{0%{opacity:0;transform:translateY(18px)}20%{opacity:1;transform:none}75%{opacity:1}to{opacity:0}}#countdown{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:min(30vw,300px);font-weight:800;color:var(--yellow);text-shadow:0 12px 0 #0a1020,0 0 60px rgba(255,140,0,.7);opacity:0}#countdown.tick{animation:cd .95s ease-out}#countdown.go{animation:go .9s ease-out;color:var(--teal);text-shadow:0 12px 0 #0a1020,0 0 70px rgba(46,230,198,.8)}@keyframes cd{0%{opacity:0;transform:scale(2.2)}25%{opacity:1;transform:scale(1)}80%{opacity:.9}to{opacity:0;transform:scale(.7)}}@keyframes go{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.25)}45%{transform:scale(1)}to{opacity:0;transform:scale(1.6)}}.result-top{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:16px}.result-big label{display:block;font-size:13px;letter-spacing:.18em;color:var(--sand)}.result-big b{font-size:clamp(32px,5vw,60px);font-weight:800;line-height:1;color:#fff;text-shadow:0 4px 0 #0a1020}.best-flag{display:none;margin-left:auto;font-size:clamp(20px,2.8vw,34px);font-weight:800;color:#2a1500;background:linear-gradient(180deg,var(--yellow),var(--orange));padding:10px 20px;border-radius:16px;border:3px solid #0a1020;transform:rotate(-3deg);box-shadow:0 6px #8a3b00}.best-flag.show{display:block;animation:pop .4s ease-out}.result-rows{display:flex;flex-direction:column;gap:7px}.rrow{display:grid;grid-template-columns:56px 1fr 130px;align-items:center;gap:12px;background:#00000042;border-radius:14px;padding:9px 14px;font-weight:700;font-size:17px}.rrow.me{background:linear-gradient(90deg,#ffd23f42,#ff7a2f24);border:2px solid var(--yellow)}.rrow .rp{font-size:24px;font-weight:800;color:var(--yellow);text-align:center}.rrow .rt{text-align:right;font-variant-numeric:tabular-nums;color:#d8e6f7}.rrow .rt.est{color:#93a9c4;font-size:14px}.rrow .rn{display:flex;align-items:center;gap:10px;letter-spacing:.06em}.rrow .dot{width:16px;height:16px;border-radius:50%;border:2px solid #0a1020}@media(max-width:720px){.char-detail{grid-template-columns:1fr}.hud-stat{min-width:0}.hud-stat label{width:66px}.hud-stat b{font-size:22px}.item-slot{width:74px;height:74px;font-size:36px}#minimap{width:120px;height:120px}}