:root{--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);color-scheme:light dark;
--font:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html[data-track="0"]{--bg1:#eef8e6;--bg2:#d3ebcc;--ink:#1c3322;--sub:#5f7c64;--card:rgba(255,255,255,.86);--solid:#fff;--line:rgba(0,0,0,.08);--accent:#34a046;--accent2:#f2a93b;--on:#fff}
html[data-track="1"]{--bg1:#e4f4f2;--bg2:#c9e6e3;--ink:#14302f;--sub:#56797a;--card:rgba(255,255,255,.86);--solid:#fff;--line:rgba(0,0,0,.08);--accent:#128a80;--accent2:#e8b23a;--on:#fff}
html[data-track="2"]{--bg1:#fdf1e4;--bg2:#f7dcc5;--ink:#3a2216;--sub:#8a6250;--card:rgba(255,255,255,.86);--solid:#fff;--line:rgba(0,0,0,.08);--accent:#dd6a33;--accent2:#e04f7a;--on:#fff}
@media (prefers-color-scheme:dark){
html[data-track="0"]{--bg1:#0d1a11;--bg2:#15291b;--ink:#e6f5e8;--sub:#93b39a;--card:rgba(28,46,34,.92);--solid:#1c2e22;--line:rgba(255,255,255,.09);--accent:#5ccf6d;--accent2:#ffc062;--on:#0d1a11}
html[data-track="1"]{--bg1:#0a191b;--bg2:#10292c;--ink:#e2f5f3;--sub:#8fb3b2;--card:rgba(20,44,46,.92);--solid:#142c2e;--line:rgba(255,255,255,.09);--accent:#3fd0c2;--accent2:#ffd166;--on:#0a191b}
html[data-track="2"]{--bg1:#1e130d;--bg2:#2c1b12;--ink:#fbe9dc;--sub:#c09a84;--card:rgba(48,30,20,.92);--solid:#301e14;--line:rgba(255,255,255,.09);--accent:#ff8a4c;--accent2:#ff6f9a;--on:#1e130d}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{background:linear-gradient(180deg,var(--bg1),var(--bg2));background-color:var(--bg1);color:var(--ink);font-family:var(--font);position:fixed;inset:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:1}
#app{position:fixed;inset:0;margin:0 auto;max-width:560px;display:flex;flex-direction:column;padding:calc(var(--st) + 6px) 12px calc(var(--sb) + 6px);z-index:2;pointer-events:none}
#app button,#app .hit{pointer-events:auto}
#top{display:flex;align-items:center;gap:10px;height:66px;flex:none}
.icon{width:44px;height:44px;border-radius:14px;background:var(--card);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.icon svg{width:22px;height:22px}
#scoreBox{flex:1;min-width:0}
.lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
#score{font-size:36px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#score.bump{animation:bump .25s ease}
@keyframes bump{40%{transform:scale(1.12)}}
#bestLine{font-size:12px;color:var(--sub);font-weight:700;margin-top:2px}
#modeTag{font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px;background:var(--accent);color:var(--on);margin-left:6px;vertical-align:1px}
#nextBox{display:flex;flex-direction:column;align-items:center;background:var(--card);border-radius:18px;padding:4px 8px 6px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
#nextCv{width:48px;height:48px}
#hypeBar{display:flex;align-items:center;gap:6px;height:40px;flex:none}
.pill{height:34px;padding:0 11px;border-radius:99px;background:var(--card);display:flex;align-items:center;gap:6px;font-weight:800;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.07);white-space:nowrap}
.coin{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c8,#f5c542 45%,#c98a12);box-shadow:inset 0 0 0 2px rgba(150,95,0,.35);display:inline-block;flex:none}
#coinPill.bump{animation:bump .2s}
#lvl{display:flex;flex-direction:column;gap:3px;min-width:58px;flex:1}
#lvl span,#fever span{font-size:11px;font-weight:800}
.bar{height:7px;border-radius:9px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:9px;background:var(--accent);transition:width .25s}
#fever{flex:1;display:flex;flex-direction:column;gap:3px}
#feverFill{background:linear-gradient(90deg,#ff5f6d,#ffc371)!important}
#fever.on #feverFill{background:linear-gradient(90deg,#ff3cac,#784ba0,#2b86c5,#3ce0a0)!important}
#chase{height:18px;margin:2px 0 0;position:relative;border-radius:9px;background:var(--line);overflow:hidden;flex:none}
#chase i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}
#chase span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink)}
#stage{flex:1;min-height:200px}
#bottom{flex:none;display:flex;flex-direction:column;gap:6px;padding-top:6px}
#tools{display:flex;gap:8px;justify-content:center}
.tool{position:relative;flex:1;max-width:120px;height:52px;border-radius:16px;background:var(--card);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden}
.tool svg{width:24px;height:24px;flex:none}
.tool[disabled]{opacity:.42}
.tool.armed{outline:3px solid var(--accent2)}
.badge{position:absolute;top:4px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--on);font-size:11px;display:grid;place-items:center}
.cd{position:absolute;left:0;bottom:0;height:4px;background:var(--accent);width:0}
#evoCv{width:100%;height:30px;display:block}
#banner{opacity:0;position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:6;pointer-events:none;font-size:30px;font-weight:900;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 22px rgba(0,0,0,.25);white-space:nowrap;text-align:center}
#banner.show{animation:ban 1.3s ease forwards}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}
#toast{position:fixed;left:50%;bottom:calc(var(--sb) + 110px);transform:translateX(-50%) translateY(20px);opacity:0;background:var(--solid);color:var(--ink);padding:10px 16px;border-radius:14px;font-weight:800;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.18);z-index:30;transition:.25s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#snipTag,#replayTag{position:fixed;left:50%;top:calc(var(--st) + 80px);transform:translateX(-50%);z-index:8;background:var(--solid);color:var(--ink);font-weight:800;font-size:14px;padding:9px 14px;border-radius:99px;box-shadow:0 4px 16px rgba(0,0,0,.18);pointer-events:auto;white-space:nowrap}
#replayTag b{color:var(--accent)}
/* screens and sheets */
.screen{position:fixed;inset:0;z-index:20;background:linear-gradient(180deg,var(--bg1),var(--bg2));display:flex;flex-direction:column;padding:calc(var(--st) + 18px) 0 calc(var(--sb) + 18px)}
#chooser h1{margin:0;text-align:center;font-size:46px;font-weight:900;letter-spacing:-.03em;line-height:1}
#chooser h1 span{color:var(--accent)}
#chooser .sub{text-align:center;color:var(--sub);font-weight:700;margin:6px 0 14px;font-size:15px}