:root{--bg:#05040b;--cyan:#3ff6ff;--green:#7dff3a;--blue:#2f7bff;--violet:#b04dff;--red:#ff3b5c;--amber:#ffcf3a;--ink:#eaffff;--panel:#080a1cb8;--edge:#3ff6ff59;--title:"Bungee", "Arial Black", Impact, sans-serif;--body:"Exo 2", "Segoe UI", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0;overflow:hidden}body{font-family:var(--body);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none}#view{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}.fatal{border:1px solid var(--red);pointer-events:auto;background:#200;padding:20px;position:fixed;inset:30% 10% auto}.hud{position:absolute;inset:0}.hud button{pointer-events:auto;font-family:var(--title);color:var(--ink);background:var(--panel);border:1px solid var(--edge);cursor:pointer;letter-spacing:.04em;border-radius:10px}.hud button:active{transform:scale(.96)}.vignette{background:radial-gradient(at 50% 55%,#0000 55%,#0000008c 100%);position:absolute;inset:0}.flash{opacity:0;background:#f4ffff;position:absolute;inset:0}.top{padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));align-items:flex-start;gap:12px;display:flex;position:absolute;top:0;left:0;right:0}.score{background:var(--panel);border:1px solid var(--edge);border-radius:10px;min-width:92px;padding:6px 12px}.score .lbl{font:700 11px var(--body);letter-spacing:.2em;color:var(--cyan)}.score .val{font:26px var(--title);color:var(--green);text-shadow:0 0 12px #7dff3a99;line-height:1.1}.score .sub{font:600 12px var(--body);opacity:.75;min-height:14px}.meter{background:var(--panel);border:1px solid var(--edge);border-radius:10px;flex:1;max-width:560px;margin:0 auto;padding:6px 12px 4px;position:relative}.meter-head{font:700 12px var(--body);letter-spacing:.2em;color:var(--cyan);align-items:baseline;gap:10px;display:flex}.meter-head b{font:20px var(--title);letter-spacing:0;color:var(--ink)}.meter-head i{font:13px var(--title);letter-spacing:.06em;color:var(--blue);margin-left:auto;font-style:normal}.hud[data-zone=optimal] .meter-head i{color:var(--green)}.hud[data-zone=overdrive] .meter-head i{color:var(--red);animation:.25s steps(2,end) infinite blink}.bar{background:#00000080;border:1px solid #eaffff40;border-radius:4px;height:16px;margin:4px 0 2px;position:relative;overflow:hidden}.zone{position:absolute;top:0;bottom:0}.zone.low{background:#2f7bff2e;left:0}.zone.opt{background:#7dff3a26}.zone.od{background:#ff3b5c33}.fill{background:linear-gradient(90deg, var(--blue), var(--cyan) 35%, var(--green) 75%, var(--red));background-size:560px 100%;border-radius:3px;width:0;transition:width 80ms linear;position:absolute;top:2px;bottom:2px;left:0;box-shadow:0 0 12px #3ff6ffb3}.peak{background:var(--amber);width:2px;box-shadow:0 0 6px var(--amber);position:absolute;top:0;bottom:0;left:0}.tick{background:#eaffffcc;width:2px;position:absolute;top:-2px;bottom:-2px}.meter-foot{font:700 9px var(--body);letter-spacing:.18em;opacity:.7;justify-content:space-between;display:flex}.meter-foot span:first-child{color:var(--blue)}.meter-foot span:nth-child(2){color:var(--green)}.meter-foot span:nth-child(3){color:var(--red)}.combo{font:18px var(--title);color:var(--amber);text-shadow:0 0 10px #ffcf3acc;position:absolute;bottom:-26px;right:10px}.combo.pop{animation:.25s ease-out pop}.buttons{gap:8px;display:flex}.icon{width:44px;height:44px;font-size:20px!important;font-family:var(--body)!important}.icon.off{opacity:.4;text-decoration:line-through}.bottom{padding:0 calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));grid-template-columns:auto 1fr auto;grid-template-areas:"balls aim launch""balls power launch";align-items:end;gap:8px 14px;display:grid;position:absolute;bottom:0;left:0;right:0}.balls{grid-area:balls;gap:8px;display:flex}.ball{text-align:left;opacity:.6;grid-template-rows:auto auto;grid-template-columns:auto auto;align-items:center;column-gap:8px;padding:8px 12px;display:grid}.ball .dot{border-radius:50%;grid-row:span 2;width:26px;height:26px}.ball.light .dot{box-shadow:0 0 10px var(--cyan);background:radial-gradient(circle at 35% 35%,#bff8ff,#0d6f9a 60%,#032);width:20px;height:20px}.ball.heavy .dot{box-shadow:0 0 12px var(--green);background:radial-gradient(circle at 35% 35%,#e2ff9a,#1d5c12 60%,#020)}.ball b{font-size:15px;font-weight:400}.ball small{font:600 11px var(--body);opacity:.75;letter-spacing:.04em}.ball.on{opacity:1;border-color:var(--cyan);box-shadow:0 0 14px #3ff6ff73,inset 0 0 12px #3ff6ff33}.ball.heavy.on{border-color:var(--green);box-shadow:0 0 14px #7dff3a73,inset 0 0 12px #7dff3a33}.aimrow{grid-area:aim;justify-content:center;align-items:center;gap:10px;display:flex}.nudge{width:44px;height:38px;font-size:14px!important}.hint{font:600 13px var(--body);letter-spacing:.08em;opacity:.7;text-shadow:0 1px 3px #000;text-align:center}.power{pointer-events:auto;background:var(--panel);border:1px solid var(--edge);border-radius:10px;grid-area:power;justify-self:center;width:100%;max-width:420px;padding:6px 12px 10px}.power .lbl{font:700 11px var(--body);letter-spacing:.2em;color:var(--cyan);margin-bottom:6px}.power .lbl b{font:14px var(--title);letter-spacing:0;color:var(--ink);margin-left:6px}.slider{touch-action:none;cursor:pointer;height:22px;position:relative}.slider:before{content:"";background:#ffffff1f;border-radius:3px;height:6px;position:absolute;top:8px;left:0;right:0}.sfill{background:linear-gradient(90deg, var(--blue), var(--cyan), var(--green));height:6px;box-shadow:0 0 8px var(--cyan);border-radius:3px;position:absolute;top:8px;left:0}.knob{background:var(--ink);width:20px;height:20px;box-shadow:0 0 12px var(--cyan);border-radius:50%;margin-left:-10px;position:absolute;top:1px}.launch{width:112px;height:112px;text-shadow:0 0 10px var(--green);grid-area:launch;font-size:24px;box-shadow:0 0 24px #7dff3a8c,inset 0 0 18px #7dff3a59;border:2px solid var(--green)!important;background:radial-gradient(circle at 40% 35%,#7dff3a80,#0a2814e6)!important;border-radius:50%!important}.card{border:1px solid var(--edge);pointer-events:auto;background:#060818db;border-radius:16px;width:min(440px,100% - 24px);max-height:calc(100% - 24px);padding:16px 18px;display:none;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-46%);box-shadow:0 0 40px #3ff6ff40}.card-head{font:34px var(--title);text-align:center;color:var(--cyan);text-shadow:0 0 18px #3ff6ffb3}.card-head.strike{color:var(--green);text-shadow:0 0 18px #7dff3acc}.card-head.od{color:var(--amber);text-shadow:0 0 22px #ffcf3ae6,0 0 50px #ff3b5c99}.card-total{font:30px var(--title);text-align:center;margin:2px 0 10px}.row{border-bottom:1px solid #3ff6ff1f;grid-template-columns:1fr auto 64px;gap:8px;padding:5px 2px;font-size:14px;display:grid}.row em{opacity:.75;text-align:right;font-style:normal}.row b{font-family:var(--title);text-align:right;color:var(--green);font-weight:400}.row.best b{color:var(--amber)}.card-buttons{gap:10px;margin-top:14px;display:flex}.card-buttons button{flex:1;padding:13px 8px;font-size:16px}.card-buttons .primary{border-color:var(--green);box-shadow:0 0 16px #7dff3a59}.card-racks,.racks{grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;display:grid}.rack{text-align:left;opacity:.65;padding:7px 8px}.rack b{font-size:13px;font-weight:400;display:block}.rack small{font:600 11px var(--body);opacity:.75;letter-spacing:0;display:block}.rack.on{opacity:1;border-color:var(--green)}.banner{text-align:center;pointer-events:none;display:none;position:absolute;top:118px;left:0;right:0}.banner span{font:clamp(28px, 6.5vw, 64px) var(--title);color:var(--red);text-shadow:0 0 16px var(--red), 0 0 40px var(--amber);animation:.18s steps(2,end) infinite blink,1.6s ease-in forwards bannerOut;display:inline-block}.hud.overdrive .banner{display:block}@keyframes bannerOut{0%{opacity:0;transform:scale(1.8)}12%{opacity:1;transform:scale(1)}75%{opacity:1}to{opacity:0;transform:scale(.9)}}.skip{bottom:calc(18px + env(safe-area-inset-bottom));text-align:center;font:600 14px var(--body);letter-spacing:.2em;opacity:.7;display:none;position:absolute;left:0;right:0}.replaytag{left:50%;bottom:calc(26px + env(safe-area-inset-bottom));font:16px var(--title);color:var(--amber);border:1px solid var(--amber);background:#140e0099;border-radius:6px;padding:4px 12px;animation:1s steps(2,end) infinite blink;display:none;position:absolute;transform:translate(-50%)}.hud.replay[data-mode=rolling] .replaytag,.hud.replay[data-mode=meltdown] .replaytag{display:block}.title{pointer-events:auto;background:radial-gradient(at 50% 40%,#05040b33,#05040bd9 75%);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;display:none;position:absolute;inset:0;overflow-y:auto}.logo{flex-direction:column;align-items:center;line-height:.95;display:flex}.logo span{font-family:var(--title);font-size:clamp(44px,12vw,120px)}.logo .l1{color:var(--green);text-shadow:0 0 18px #7dff3ae6,0 0 60px #7dff3a80}.logo .l2{color:var(--cyan);text-shadow:0 0 18px #3ff6ffe6,0 0 60px #2f7bff99;animation:4s infinite flicker}.tag{font:600 clamp(14px, 3.6vw, 18px) var(--body);letter-spacing:.06em;opacity:.85;text-align:center}.play{padding:14px 54px;box-shadow:0 0 24px #7dff3a80;border-color:var(--green)!important;font-size:28px!important}.title .racks{width:min(460px,100%)}.help{opacity:.85;text-align:center;max-width:460px;font-size:14px;line-height:1.45}.help p{margin:6px 0}.help b{color:var(--cyan)}.help .keys{opacity:.7;font-size:12px}.hud[data-mode=title] .title{display:flex}.hud[data-mode=title] .top,.hud[data-mode=title] .bottom,.hud[data-mode=rolling] .bottom,.hud[data-mode=meltdown] .bottom,.hud[data-mode=result] .bottom{display:none}.hud[data-mode=result] .card{animation:.35s ease-out rise;display:block}.hud[data-mode=meltdown] .skip{display:block}.hud[data-mode=meltdown] .buttons{visibility:hidden}@keyframes blink{50%{opacity:.35}}@keyframes pop{0%{transform:scale(1.6)}to{transform:scale(1)}}@keyframes rise{0%{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-46%)}}@keyframes flicker{0%,92%,to{opacity:1}93%{opacity:.4}95%{opacity:1}96%{opacity:.6}}@media (width<=720px){.top{flex-wrap:wrap;gap:8px}.meter{flex-basis:100%;order:3;max-width:none}.score{min-width:0}.buttons{margin-left:auto}.bottom{grid-template-columns:1fr auto;grid-template-areas:"aim aim""balls launch""power launch"}.balls{justify-content:flex-start}.ball{padding:7px 9px}.ball small{display:none}.launch{width:96px;height:96px;font-size:21px}.power{max-width:none}.card-head{font-size:28px}.row{grid-template-columns:1fr auto 54px;font-size:13px}}@media (height<=520px) and (orientation:landscape){.bottom{grid-template-columns:auto 1fr auto;grid-template-areas:"aim power launch""balls power launch";gap:6px 10px}.aimrow{justify-content:flex-start;gap:6px}.hint{display:none}.nudge{width:40px;height:32px}.ball{padding:5px 8px}.ball small{display:none}.power{align-self:end;max-width:360px;padding:4px 10px 8px}.meter{padding:4px 10px 2px}.meter-foot{display:none}.launch{width:84px;height:84px;font-size:19px}.help{display:none}.logo span{font-size:54px}.card{padding:10px 14px}.card-racks{display:none}}
