*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#120c22;color:#fff;font-family:'Bricolage Grotesque',system-ui,sans-serif;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#stage{position:relative;height:100%;max-width:520px;margin:0 auto;overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.6)}
canvas{display:block;width:100%;height:100%}
.hide{display:none!important}
#hud{position:absolute;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 12px) 14px 0;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;pointer-events:none}
.pill{justify-self:start;background:rgba(18,12,34,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:6px 14px;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pill.mid{justify-self:center}#hCombo{justify-self:end;color:#ffd36b}
#tank{grid-column:1/4;height:6px;border-radius:9px;background:rgba(255,255,255,.15);overflow:hidden;margin:2px 40px 0}
#tank i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4fd2ff,#bff1ff);border-radius:9px;transition:width .08s}
#pop{position:absolute;left:0;right:0;top:22%;text-align:center;font-weight:800;font-size:40px;pointer-events:none;text-shadow:0 3px 18px rgba(0,0,0,.5);opacity:0;transition:opacity .25s,transform .25s}
#pop.on{opacity:1;transform:scale(1.06)}
.screen{position:absolute;inset:0;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 24px);background:linear-gradient(180deg,rgba(18,12,34,.25) 0%,rgba(18,12,34,.82) 42%,rgba(18,12,34,.96) 100%);display:flex;flex-direction:column;gap:16px;touch-action:pan-y}
.brand small,.endHead small{letter-spacing:.22em;font-size:11px;font-weight:700;color:#ffc98a}
h1{font-size:56px;line-height:.9;font-weight:800;letter-spacing:-.02em;margin-top:8px}
h1 em{font-style:normal;background:linear-gradient(90deg,#7fe0ff,#ffd36b);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:16px;line-height:1.45;color:rgba(255,255,255,.82);max-width:34ch}
.legend{display:grid;gap:8px;font-size:14px;color:rgba(255,255,255,.8)}
.legend div{display:flex;align-items:center;gap:10px}.legend strong{color:#fff}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}.dot.fat{background:#a9b0c4}.dot.dodge{background:#6fd4a8}.dot.bomb{background:#ff7a59}
#challenge{background:rgba(255,211,107,.12);border:1px solid rgba(255,211,107,.4);border-radius:14px;padding:12px 14px;font-size:15px}
form{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:auto}
input,select{font:inherit;font-size:17px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:14px;outline:none}
select{appearance:none;-webkit-appearance:none;padding-right:14px}select option{color:#000}
input:focus{border-color:#7fe0ff}
.cta{grid-column:1/3;font:inherit;font-weight:800;font-size:19px;border:0;border-radius:16px;padding:16px;color:#141022;background:linear-gradient(180deg,#ffe08e,#ffb547);box-shadow:0 8px 24px rgba(255,170,60,.3);cursor:pointer}
.cta:active{transform:translateY(1px)}
.cta.wa{background:linear-gradient(180deg,#5ee38f,#22b866);box-shadow:0 8px 24px rgba(40,200,110,.25)}
.fine{grid-column:1/3;text-align:center;color:rgba(255,255,255,.5);font-size:12px}
.endHead{text-align:center}
#eScore{font-size:72px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:6px 0}
.stats{display:flex;justify-content:center;gap:14px;font-size:13px;color:rgba(255,255,255,.7)}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.07);border-radius:12px;padding:3px}
.tabs button{font:inherit;font-size:13px;font-weight:700;color:rgba(255,255,255,.65);background:none;border:0;border-radius:9px;padding:8px 0}
.tabs button.on{background:#fff;color:#141022}
#rankLine{text-align:center;font-size:17px;font-weight:700;min-height:22px}#rankLine b{color:#ffd36b;font-size:22px}
ol{list-style:none;display:grid;gap:4px}
ol li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.05);font-size:15px}
ol li .r{font-weight:800;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
ol li .n small{color:rgba(255,255,255,.45);font-size:11px;margin-left:6px}
ol li .s{font-weight:800;font-variant-numeric:tabular-nums}
ol li.me{background:linear-gradient(90deg,rgba(127,224,255,.28),rgba(127,224,255,.08));outline:1px solid rgba(127,224,255,.6)}
ol li:nth-child(1) .r{color:#ffd36b}ol li:nth-child(2) .r{color:#d9dfe8}ol li:nth-child(3) .r{color:#e0a274}
#aboveWrap h3{font-size:12px;letter-spacing:.18em;color:#ffc98a;margin-bottom:6px}
#above li .s{color:#ff9b7a}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:6px}.btns .cta{grid-column:auto;font-size:17px;padding:15px 8px}