*,:before,:after{box-sizing:border-box}html,body{color:#eef1f7;height:100%;font-family:var(--font-ui);overscroll-behavior:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:#05060a;margin:0;padding:0;overflow:hidden}body{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}canvas{touch-action:none;display:block}#gl{z-index:0;width:100%;height:100%;position:fixed;top:0;bottom:0;left:0;right:0}:root{--font-ui:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;--ink:#eef1f7;--ink-dim:#98a1b6;--ink-faint:#626b82;--sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px);--pad:clamp(12px, 3.4vw, 22px);--hud-max:920px;--ease:cubic-bezier(.22, 1, .36, 1)}.ui-root{--accent:#ffcc6b;--grid:#ffd98a;--bg-a:#0b0812;--bg-b:#2b1520;--a10:color-mix(in srgb, var(--accent) 10%, transparent);--a18:color-mix(in srgb, var(--accent) 18%, transparent);--a28:color-mix(in srgb, var(--accent) 28%, transparent);--a45:color-mix(in srgb, var(--accent) 45%, transparent);--a65:color-mix(in srgb, var(--accent) 65%, transparent);--a85:color-mix(in srgb, var(--accent) 85%, transparent);pointer-events:none}.ui{z-index:20;pointer-events:none;font-family:var(--font-ui);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:0 0;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.lbl{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-size:clamp(9px,2.5vw,10.5px);font-weight:500}.ui-top{z-index:2;padding-top:var(--sa-t);background:linear-gradient(#04050ab8 0%,#04050a61 55%,#04050a00 100%);flex:none;position:relative}.ui-topbar{max-width:var(--hud-max);padding:calc(var(--pad) * .72) calc(var(--pad) + var(--sa-r)) calc(var(--pad) * .6) calc(var(--pad) + var(--sa-l));grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);align-items:start;gap:clamp(8px,2.4vw,22px);margin:0 auto;display:grid}.slot{min-width:0}.slot-r{text-align:right}.slot-m{flex-direction:column;align-items:center;gap:6px;display:flex}.lvl-no{color:color-mix(in srgb, var(--accent) 76%, var(--ink-faint))}.lvl-name{letter-spacing:-.012em;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 10px #0009;margin-top:3px;font-size:clamp(13px,3.7vw,17px);font-weight:650;line-height:1.15;overflow:hidden}.score-line{font-variant-numeric:tabular-nums;letter-spacing:.005em;align-items:baseline;gap:.34em;font-size:clamp(14px,4vw,19px);font-weight:700;line-height:1;display:flex}.score-cur{color:#fff;text-shadow:0 0 20px var(--a45), 0 1px 8px #000000b3}.score-sep{color:var(--ink-faint);font-weight:400}.score-tgt{color:var(--ink-dim);font-size:.8em;font-weight:600}.total-val{font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink-dim);margin-top:3px;font-size:clamp(12px,3.3vw,15px);font-weight:650}.ui-bottom{z-index:2;width:100%;padding-top:clamp(20px,6vw,40px);padding-bottom:calc(var(--pad) + var(--sa-b));padding-left:max(calc(var(--pad) + var(--sa-l)), calc((100% - var(--hud-max)) / 2));padding-right:max(calc(var(--pad) + var(--sa-r)), calc((100% - var(--hud-max)) / 2));background:linear-gradient(#04050a00 0%,#04050a2e 45%,#04050a80 100%);flex:none;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:auto;display:flex;position:relative}.btn{pointer-events:auto;touch-action:manipulation;-webkit-appearance:none;appearance:none;color:inherit;font:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:0;margin:0}.btn:disabled{pointer-events:none;cursor:default}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.btn-mute{width:56px;height:56px;color:var(--ink-dim);-webkit-backdrop-filter:blur(8px);background:#090b126b;border:1px solid #ffffff17;border-radius:50%;place-items:center;transition:color .16s,border-color .16s,transform .12s;display:grid}.btn-mute .ic{width:22px;height:22px;display:block}.btn-mute .ic-off{display:none}.btn-mute.is-muted{color:var(--ink-faint)}.btn-mute.is-muted .ic-on{display:none}.btn-mute.is-muted .ic-off{display:block}.btn-mute:active{transform:scale(.92)}.toast{z-index:12;left:50%;bottom:calc(var(--sa-b) + var(--pad) + 78px);text-align:center;letter-spacing:.005em;max-width:min(84vw,420px);color:var(--ink);border:1px solid var(--a45);box-shadow:0 8px 28px #00000080, 0 0 26px var(--a18);-webkit-backdrop-filter:blur(10px);pointer-events:none;opacity:0;transition:opacity .2s ease, transform .3s var(--ease);background:#080a11cc;border-radius:99px;padding:10px 18px;font-size:clamp(13px,3.6vw,15px);font-weight:650;position:absolute;transform:translate(-50%,10px)}.toast.show{opacity:1;transform:translate(-50%)}.overlay{z-index:9;overscroll-behavior:contain;pointer-events:auto;touch-action:manipulation;padding:calc(var(--pad) + var(--sa-t)) calc(var(--pad) + var(--sa-r)) calc(var(--pad) + var(--sa-b)) calc(var(--pad) + var(--sa-l));-webkit-backdrop-filter:blur(10px)saturate(.85);background:radial-gradient(125% 82% at 50% 44%,#04050a66,#030408d6);justify-content:center;align-items:safe center;animation:.2s both overlayIn;display:flex;position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:auto}.overlay[hidden]{display:none}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.card{--ch:clamp(18px, 5vw, 30px);background:linear-gradient(158deg, var(--a65), var(--a18) 42%, #ffffff12);width:min(540px,100%);clip-path:polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));filter:drop-shadow(0 26px 60px #0000009e) drop-shadow(0 0 46px var(--a18));margin:auto;padding:1px;position:relative}.card.anim{animation:cardIn .32s var(--ease) both}@keyframes cardIn{0%{opacity:0;transform:translateY(18px)scale(.94)}to{opacity:1;transform:none}}.card-in{clip-path:inherit;background:linear-gradient(166deg, color-mix(in srgb, var(--bg-b) 40%, #0b0d15f0), color-mix(in srgb, var(--bg-a) 55%, #06070cf5));padding:clamp(24px,6.4vw,40px) clamp(20px,5.6vw,40px) clamp(24px,6vw,38px)}.card-title,.overlay h2{letter-spacing:-.022em;text-wrap:balance;color:#fff;margin:10px 0 0;font-size:clamp(21px,5.8vw,31px);font-weight:800;line-height:1.12}.lede{color:var(--ink-dim);text-wrap:pretty;margin:10px 0 0;font-size:clamp(13px,3.6vw,15.5px);line-height:1.5}.overlay--title .card-in{text-align:left}.overlay--title .lede{max-width:34ch;margin-top:14px}.btn-play{margin-top:clamp(16px,4.4vw,22px)}.overlay--complete .stat.is-hero .stat-v{animation:heroPop .5s var(--ease) both}@keyframes heroPop{0%{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}.stats{gap:clamp(18px,6vw,40px);margin-top:clamp(18px,5vw,26px);display:flex}.stat-v{letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink);font-size:clamp(24px,7vw,36px);font-weight:800;line-height:1}.stat.is-hero .stat-v{color:var(--accent);text-shadow:0 0 28px var(--a45)}.stat-l{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:7px;font-size:10.5px;font-weight:600}.card-actions{gap:10px;margin-top:clamp(20px,5.5vw,28px);display:flex}.card-actions .btn-primary{flex:2 1 0}.card-actions .btn-ghost{flex:1 1 0}.btn-primary,.btn-ghost{letter-spacing:.07em;text-transform:uppercase;border-radius:13px;min-height:54px;padding:0 clamp(16px,4vw,26px);font-size:clamp(14px,4vw,16px);font-weight:750;transition:transform .12s,box-shadow .22s,filter .18s,border-color .18s,color .18s}.overlay--title .btn-primary{width:100%;min-height:58px;font-size:clamp(15px,4.3vw,17px)}.btn-primary{color:#07080d;background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));box-shadow:0 8px 26px var(--a28), inset 0 1px 0 #ffffff80}.btn-primary:active{box-shadow:0 4px 14px var(--a18), inset 0 1px 0 #fff6;transform:translateY(1px)scale(.985)}.btn-ghost{color:var(--ink-dim);background:#ffffff09;border:1px solid #ffffff24}.btn-ghost:active{transform:translateY(1px)scale(.985)}@media (hover:hover) and (pointer:fine){.btn-mute:hover{color:var(--ink);border-color:var(--a45)}.btn-primary:hover{filter:brightness(1.09);box-shadow:0 10px 34px var(--a45), inset 0 1px 0 #ffffff8c}.btn-ghost:hover{color:var(--ink);border-color:#ffffff4d}.level-chip:hover:not(:disabled){color:#fff;transform:translateY(-2px)}.level-chip:hover:not(:disabled):before{background:linear-gradient(152deg, var(--a85), var(--a28));filter:drop-shadow(0 0 10px var(--a28))}.level-chip:hover:not(:disabled):after{background:linear-gradient(166deg, var(--a28), #ffffff08), var(--chip-base)}.level-chip:hover:not(:disabled) .chip-foot{color:var(--ink)}}@media (max-height:620px){.ui-topbar{gap:10px;padding-top:8px;padding-bottom:6px}.lvl-name{margin-top:1px;font-size:13px}.total-val{margin-top:1px;font-size:12px}.score-line{font-size:15px}.slot-m{gap:4px}.overlay{align-items:flex-start}.card{width:min(700px,100%)}.card-in{padding:18px clamp(18px,4vw,30px) 20px}.overlay--title .lede{max-width:none;margin-top:8px;font-size:13px}.overlay--title .btn-primary{min-height:48px}.card-title,.overlay h2{font-size:clamp(18px,4.4vh,26px)}.stats{margin-top:14px}.stat-v{font-size:clamp(22px,6vh,32px)}.card-actions{margin-top:16px}.btn-primary,.btn-ghost{min-height:46px}.card-hint{margin-top:10px}.btn-play{margin-top:12px}}@media (prefers-reduced-motion:reduce){.overlay--complete .stat.is-hero .stat-v{animation:none!important}.card.anim,.overlay{animation-duration:.01ms!important}}@media (prefers-contrast:more){.ui-top{background:#04050ae0}.ui-bottom{background:linear-gradient(#04050a00,#04050acc)}.lede,.total-val{color:#cfd6e4}}.score-cur.over{color:var(--ink-dim);text-shadow:none}.banner{z-index:6;text-align:center;letter-spacing:.01em;max-width:min(80vw,460px);color:var(--ink-dim);text-shadow:0 2px 18px #000c;pointer-events:none;opacity:0;transition:opacity .35s ease, transform .45s var(--ease);font-size:clamp(13px,3.8vw,16px);font-weight:650;position:absolute;top:26%;left:50%;transform:translate(-50%,-6px)}.banner.show{opacity:1;transform:translate(-50%)}.btn-row{align-items:flex-end;gap:10px;display:flex}.btn-undo:disabled,.btn-restart:disabled{opacity:.3}.levels{margin-top:clamp(18px,5vw,26px)}.levels-head{border-bottom:1px solid var(--a18);justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding-bottom:9px;display:flex}.levels-tally{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--ink-dim);align-items:center;gap:7px;font-size:clamp(9px,2.5vw,10.5px);font-weight:600;display:flex}.pip{background:var(--accent);width:7px;height:7px;box-shadow:0 0 9px var(--a65);flex:none;transform:rotate(45deg)}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,1.9vw,9px);display:grid}.level-chip{--bev:12%;--cut:polygon(var(--bev) 0, 100% 0, 100% calc(100% - var(--bev)), calc(100% - var(--bev)) 100%, 0 100%, 0 var(--bev));--chip-base:color-mix(in srgb, var(--bg-a) 55%, #07080e);pointer-events:auto;touch-action:manipulation;isolation:isolate;aspect-ratio:1;color:var(--ink-dim);font:inherit;cursor:pointer;transition:transform .14s var(--ease), color .2s ease;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:3px;margin:0;padding:0;display:flex;position:relative}.level-chip:before{content:"";z-index:0;clip-path:var(--cut);background:linear-gradient(152deg, var(--a28), #ffffff0f);transition:background .22s,filter .22s;position:absolute;top:0;bottom:0;left:0;right:0}.level-chip:after{content:"";z-index:0;clip-path:var(--cut);background:linear-gradient(166deg, #ffffff0d, #ffffff04), var(--chip-base);transition:background .22s;position:absolute;top:1px;bottom:1px;left:1px;right:1px}.chip-n,.chip-foot{z-index:1;position:relative}.chip-n{font-variant-numeric:tabular-nums;letter-spacing:-.012em;font-size:clamp(14px,4vw,17px);font-weight:700;line-height:1}.chip-foot{height:9px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-faint);justify-content:center;align-items:center;font-size:9.5px;font-weight:600;line-height:1;display:flex}.chip-foot .pip{width:6px;height:6px}.level-chip.is-done{color:var(--ink)}.level-chip.is-done:before{background:linear-gradient(152deg, var(--a65), var(--a18))}.level-chip.is-done:after{background:linear-gradient(166deg, #ffffff17, #ffffff07), var(--chip-base)}.level-chip.is-done .chip-foot{color:var(--ink-dim)}.level-chip.is-current{color:#fff}.level-chip.is-current:before{background:linear-gradient(152deg, var(--accent), var(--a65));filter:drop-shadow(0 0 15px var(--a45))}.level-chip.is-current:after{background:linear-gradient(166deg, #ffffff1a, #ffffff05), var(--chip-base);top:2px;bottom:2px;left:2px;right:2px}.level-chip.is-par{color:#fff}.level-chip.is-par:before{background:linear-gradient(152deg, var(--a85), var(--a28))}.level-chip.is-par:after{background:linear-gradient(166deg, var(--a45), var(--a18)), var(--chip-base)}.level-chip:disabled{cursor:default;pointer-events:none;color:color-mix(in srgb, var(--ink-faint) 60%, transparent)}.level-chip:disabled:before{background:#ffffff16}.level-chip:disabled:after{background:color-mix(in srgb, var(--chip-base) 88%, #000)}.level-chip:active:not(:disabled){transform:scale(.93)}.level-chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media (max-height:620px) and (min-width:620px){.levels{margin-top:14px}.levels-head{margin-bottom:8px;padding-bottom:7px}.level-grid{grid-template-columns:repeat(10,minmax(0,1fr))}.level-chip{--bev:14%}}@media (max-height:620px) and (max-width:619px){.levels{margin-top:12px}.levels-head{margin-bottom:7px;padding-bottom:6px}}@media (prefers-contrast:more){.level-chip:disabled{color:#9aa3b6}.level-chip:disabled:before{background:#ffffff47}}.btn-menu{width:100%;margin-top:12px}.btn-feedback{letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px dotted var(--a45);margin:clamp(16px,4.5vw,24px) auto 0;padding:8px 4px;font-size:clamp(11px,3vw,12.5px);font-weight:600;transition:color .18s,border-color .18s;display:block}@media (hover:hover){.btn-feedback:hover{color:var(--accent);border-bottom-color:var(--accent)}}
