:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-0:#090706;--bg-1:#15100c;--warm-900:#1f1712;--warm-800:#2a1f17;--cream:#f6ead7;--cream-dim:#cfbda5;--cream-faint:#9c8b76;--amber:#e8b877;--amber-bright:#f4d29b;--terracotta:#c46b52;--danger:#ff9f7d;--frost-50:#eef9ff;--frost-100:#d3efff;--frost-200:#a9d9f2;--frost-300:#7cc0e2;--frost-400:#5fa8d3;--frost-500:#3d8fbe;--frost-700:#2f6690;--panel-line:#e9c4902e;--frost-line:#a9d9f24d;--stage-pad:clamp(10px, 2.1vw, 28px);--font-ui:"PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display:"Avenir Next", "Futura", "Helvetica Neue", "PingFang TC", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html,body{height:100%}body{font-family:var(--font-ui);color:var(--cream);background-color:var(--bg-0);background-image:radial-gradient(1100px 640px at 16% -12%, #e8b87726, transparent 64%), radial-gradient(920px 600px at 88% 112%, #5fa8d324, transparent 62%), radial-gradient(1500px 950px at 50% 46%, #211811 0%, #120e0b 56%, var(--bg-0) 100%);margin:0;overflow:hidden}body:after{content:"";z-index:0;pointer-events:none;position:fixed;inset:0;box-shadow:inset 0 0 180px 40px #00000080}button{font:inherit;color:inherit}kbd{font-family:var(--font-ui)}#app{z-index:1;min-height:100svh;padding:var(--stage-pad);place-items:center;display:grid;position:relative}#stage{width:min(100%, calc((100vh - 2 * var(--stage-pad)) * 16 / 9));width:min(100%, calc((100svh - 2 * var(--stage-pad)) * 16 / 9));aspect-ratio:16/9;isolation:isolate;background:#0b161d;border:1px solid #e9c49038;border-radius:clamp(10px,1.1vw,20px);position:relative;overflow:hidden;box-shadow:0 30px 80px #0000009e,0 0 0 1px #0000008c,0 0 70px #5fa8d317;container:stage/inline-size}#stage:after{content:"";z-index:1;pointer-events:none;border-radius:inherit;position:absolute;inset:0;box-shadow:inset 0 0 70px #03090d80}#game{z-index:0;-webkit-user-select:none;user-select:none;background:#0c1a22;width:100%;height:100%;display:block;position:absolute;inset:0}.noscript{z-index:10;border:1px solid var(--frost-line);color:var(--frost-100);background:#0d1a22eb;border-radius:999px;padding:.6rem 1.2rem;font-size:.9rem;position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%)}.mode-link,.mode-badge{z-index:4;font-family:var(--font-ui);letter-spacing:.06em;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-radius:999px;align-items:center;gap:.4em;padding:.42em .82em;font-size:clamp(11px,.86cqw,14px);font-weight:600;line-height:1.2;text-decoration:none;display:inline-flex;position:absolute;bottom:clamp(10px,1.4cqw,20px)}.mode-link{border:1px solid var(--frost-line);color:var(--frost-100);pointer-events:auto;background:#0a161eb8;transition:border-color .16s,background-color .16s,transform .16s;right:clamp(10px,1.4cqw,20px)}.mode-link:hover{border-color:var(--frost-200);background:#122632db;transform:translateY(-1px)}.mode-link:focus-visible{outline:2px solid var(--frost-200);outline-offset:2px}.mode-badge{border:1px solid var(--panel-line);color:var(--cream-dim);pointer-events:none;background:#120d0a9e;left:clamp(10px,1.4cqw,20px)}.mode-3d .mode-badge{bottom:calc(clamp(10px,1.4cqw,20px) + 2.5em);left:auto;right:clamp(10px,1.4cqw,20px)}.view-toggle{z-index:5;border:1px solid var(--frost-line);color:var(--frost-100);font-family:var(--font-ui);letter-spacing:.05em;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#0a161ec7;border-radius:999px;align-items:center;padding:.46em .86em;font-size:clamp(11px,.86cqw,14px);font-weight:600;line-height:1.2;transition:border-color .16s,background-color .16s;display:inline-flex;position:absolute;bottom:clamp(10px,1.4cqw,20px);left:clamp(10px,1.4cqw,20px)}.view-toggle:hover{border-color:var(--frost-200);background:#122632e6}.view-toggle:focus-visible{outline:2px solid var(--frost-200);outline-offset:2px}.view-toggle[hidden]{display:none}.mode-3d #game{cursor:grab}.mode-3d #game.is-dragging{cursor:grabbing}.mode-3d .overlay--title{justify-content:flex-start;align-items:flex-end;padding:clamp(14px,2.2cqw,30px)}.mode-3d .overlay--title:before{background:linear-gradient(90deg,#04080cd6 0%,#04080c8c 34%,#04080c1f 66%,#0000 100%),linear-gradient(#0000 42%,#04080c9e)}.mode-3d .panel--title{text-align:left;width:min(100%,31em);padding:1.2em 1.5em}.mode-3d .panel--title .blurb{display:none}.mode-3d .panel--title .wordmark{letter-spacing:.06em;text-indent:.06em;font-size:clamp(2rem,5.2cqw,3.15rem)}.mode-3d .panel--title .controls:after{content:"拖曳滑鼠環繞 · C 切換視角";color:var(--frost-200);letter-spacing:.05em;grid-column:1/-1;padding-top:.35em;font-size:.92em}@media (width<=640px){.view-toggle{padding:.4em .7em;font-size:10px}}.mode-3d .panel{background:linear-gradient(165deg,#1f1812fb,#0c1319fa);box-shadow:0 2em 5em #000000ad,inset 0 1px #ffffff12}.mode-3d .overlay--pause:before,.mode-3d .overlay--results:before{background:radial-gradient(90% 80% at 50% 46%,#081218b3,#05080af0)}@media (prefers-reduced-motion:reduce){.mode-link{transition:none}}@media (width<=640px){.mode-link,.mode-badge{padding:.36em .66em;font-size:10px}}.hud{z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--cream);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:clamp(12px,1.08cqw,18px);line-height:1.4;position:absolute;inset:0;overflow:hidden}.hud button{pointer-events:auto}.hud [hidden]{display:none!important}.kicker{letter-spacing:.32em;text-transform:uppercase;color:var(--amber);margin:0;font-size:.7em;font-weight:600}.panel__title{letter-spacing:.14em;text-indent:.14em;color:var(--cream);margin:.18em 0 0;font-size:clamp(26px,3.2cqw,46px);font-weight:700;line-height:1.1}.panel__lede{color:var(--cream-dim);letter-spacing:.04em;margin:.5em 0 0;font-size:.88em}.hud-top{z-index:2;border:1px solid var(--panel-line);opacity:0;visibility:hidden;background:linear-gradient(#1c1612ed,#0c161ce0);border-radius:.9em;grid-template-columns:auto auto minmax(0,1.55fr) minmax(9em,1fr) auto;grid-template-areas:"timer score tiers meter tools";align-items:stretch;gap:.6em;padding:.5em .65em;transition:opacity .22s;display:grid;position:absolute;top:1.05em;left:1.05em;right:1.05em;box-shadow:0 .7em 2em #00000061,inset 0 1px #ffffff0f}.hud[data-phase=playing] .hud-top{opacity:1;visibility:visible}.stat{flex-direction:column;justify-content:center;gap:.08em;min-width:0;padding:.15em .4em;display:flex}.stat__label{letter-spacing:.18em;color:var(--cream-faint);white-space:nowrap;font-size:.62em;font-weight:600}.stat__line{align-items:baseline;gap:.18em;min-width:0;display:flex}.stat__value{letter-spacing:.01em;font-variant-numeric:tabular-nums;font-size:1.45em;font-weight:700;line-height:1}.stat__value--timer{color:var(--cream)}.stat__unit{color:var(--cream-dim);font-size:.72em}.stat--timer{grid-area:timer}.stat--timer.is-danger .stat__value{color:var(--danger);text-shadow:0 0 .8em #ff785066;animation:1s ease-in-out infinite timer-pulse}.stat--timer.is-danger .stat__label,.stat--timer.is-danger .stat__unit{color:#e08a6c}.stat--score{grid-area:score}.stat--score .stat__value{color:var(--amber-bright)}.stat--coverage{min-width:5.9em;padding-right:.15em}.stat--coverage .stat__value--small{color:var(--frost-100);font-size:1.02em}.stat__pct{color:var(--frost-200);font-variant-numeric:tabular-nums;background:#6bb6dd1f;border:1px solid #a9d9f233;border-radius:.4em;margin-left:.3em;padding:.05em .34em;font-size:.7em}.tier-strip{grid-area:tiers;grid-template-columns:repeat(3,minmax(0,1fr));gap:.38em;min-width:0;margin:0;padding:0;list-style:none;display:grid}.tier{background:#f4e7d308;border:1px solid #f4e7d317;border-radius:.55em;flex-direction:column;justify-content:center;gap:.14em;min-width:0;padding:.32em .5em .36em;transition:border-color .25s,background .25s,opacity .25s,box-shadow .25s;display:flex}.tier__head{align-items:center;gap:.32em;min-width:0;display:flex}.tier__short{color:var(--cream-dim);letter-spacing:.08em;background:#f4e7d317;border-radius:.3em;flex:none;padding:.08em .32em;font-size:.62em;font-weight:700}.tier__name{letter-spacing:.04em;white-space:nowrap;font-size:.84em;font-weight:600}.tier__status{color:var(--cream-faint);letter-spacing:.08em;white-space:nowrap;margin-left:auto;font-size:.6em}.tier__unlock{color:var(--cream-faint);overflow-wrap:anywhere;font-size:.68em;line-height:1.3}.tier.is-current{background:linear-gradient(#6bb6dd33,#2f66901a);border-color:#a9d9f280;box-shadow:inset 0 0 0 1px #a9d9f224,0 0 .9em #5fa8d329}.tier.is-current .tier__short{background:var(--frost-200);color:#0b1f2a}.tier.is-current .tier__name{color:var(--frost-50)}.tier.is-current .tier__status{color:var(--frost-100)}.tier.is-current .tier__unlock{color:#d3efffc7}.tier.is-locked{opacity:.5}.tier.is-locked .tier__short{background:#f4e7d30f}.tier.is-done{opacity:.78}.tier.is-done .tier__status{color:var(--amber)}.meter{flex-direction:column;grid-area:meter;justify-content:center;gap:.3em;min-width:0;padding:0 .15em;display:flex}.meter__head{justify-content:space-between;align-items:baseline;gap:.5em;min-width:0;font-size:.7em;display:flex}.meter__title{color:var(--cream-dim);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.meter__value{color:var(--frost-200);font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap;flex:none}.meter__track{background:#050c10a8;border:1px solid #a9d9f224;border-radius:999px;height:.55em;overflow:hidden}.meter__fill{border-radius:inherit;background:linear-gradient(90deg, var(--frost-500), var(--frost-100));width:0%;height:100%;transition:width .3s cubic-bezier(.22,1,.36,1);box-shadow:0 0 .6em #a9d9f280}.meter__fill.is-max{background:linear-gradient(90deg,#dff4ff,#fff);box-shadow:0 0 .8em #d3efffbf}.tools{grid-area:tools;align-items:center;gap:.45em;display:flex}.mute-btn{color:var(--cream-dim);letter-spacing:.05em;white-space:nowrap;cursor:pointer;background:#f4e7d30f;border:1px solid #f4e7d329;border-radius:999px;flex:none;padding:.32em .68em;font-size:.74em;font-weight:600;transition:background-color .15s,border-color .15s,color .15s}.mute-btn:hover{color:var(--cream);background:#f4e7d31a;border-color:#f4e7d34d}.mute-btn[aria-pressed=true]{color:var(--frost-200);background:#6bb6dd24;border-color:#a9d9f25c}.mute-btn:focus-visible{outline:2px solid var(--frost-100);outline-offset:2px}.ready{z-index:3;color:var(--frost-50);letter-spacing:.22em;text-indent:.22em;white-space:nowrap;background:#0d1a22cc;border:1px solid #a9d9f259;border-radius:999px;padding:.42em 1.05em;font-size:.92em;font-weight:600;animation:1.5s ease-in-out infinite ready-breathe;position:absolute;top:17%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 1.4em #6bb6dd40}.hud:not([data-phase=playing]) .ready,.hud:not([data-phase=playing]) .nearby{display:none}.nearby{z-index:3;letter-spacing:.04em;white-space:nowrap;background:linear-gradient(#241b15eb,#14110fe6);border:1px solid #e8b87766;border-radius:999px;align-items:center;gap:.45em;padding:.42em .95em;font-size:.84em;display:flex;position:absolute;bottom:4%;left:50%;transform:translate(-50%);box-shadow:0 .5em 1.4em #00000061}.nearby:before{content:"";background:var(--amber);border-radius:50%;flex:none;width:.45em;height:.45em;box-shadow:0 0 .55em #e8b877e6}.nearby__prefix{color:var(--cream-dim)}.nearby__name{color:var(--frost-100);font-weight:600}.nearby__sep{color:var(--cream-faint)}.nearby__need{color:var(--amber-bright);font-weight:600}.banner{z-index:6;color:var(--frost-50);letter-spacing:.05em;text-align:center;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;background:linear-gradient(100deg,#0e1c26f0,#20323eeb);border:1px solid #a9d9f273;border-radius:.8em;align-items:center;gap:.75em;padding:.62em 1.5em;font-size:clamp(15px,1.55cqw,26px);font-weight:600;transition:opacity .18s,transform .18s,visibility .18s;display:flex;position:absolute;top:31%;left:50%;transform:translate(-50%,-8px);box-shadow:0 1em 2.6em #00000073,0 0 2.4em #6bb6dd2e,inset 0 0 1.2em #a9d9f214}.banner.is-visible{opacity:1;visibility:visible;transform:translate(-50%)}.banner__tag{color:var(--frost-200);letter-spacing:.18em;background:#6bb6dd29;border:1px solid #a9d9f24d;border-radius:.35em;padding:.16em .5em;font-size:.56em;font-weight:700}.overlay{z-index:4;opacity:0;visibility:hidden;pointer-events:none;justify-content:center;align-items:center;padding:1.4em;transition:opacity .22s,visibility .22s;display:flex;position:absolute;inset:0}.overlay:before{content:"";background:radial-gradient(120% 95% at 50% 48%,#080e126b,#070605db);position:absolute;inset:0}.overlay--title:before{background:radial-gradient(62% 80% at 50% 42%,#e8b8771a,#0000 62%),linear-gradient(#0907069e,#090706de 68%,#070d11f0)}.overlay--pause:before,.overlay--results:before{background:radial-gradient(90% 80% at 50% 46%,#0a161d80,#070605e0)}.hud[data-phase=title] .overlay--title,.hud[data-phase=paused] .overlay--pause,.hud[data-phase=results] .overlay--results{opacity:1;visibility:visible}.panel{z-index:1;border:1px solid var(--panel-line);text-align:center;pointer-events:none;background:linear-gradient(165deg,#261d16f0,#10191feb);border-radius:1.15em;width:min(100%,40em);padding:1.9em 2.1em;position:relative;box-shadow:0 2em 5em #00000085,inset 0 1px #ffffff0f}.panel:before{content:"";z-index:-1;border-radius:inherit;background:radial-gradient(60% 90% at 50% -20%,#e8b87729,#0000 65%);position:absolute;inset:0}.panel:after{content:"";background:linear-gradient(90deg,#0000,#a9d9f28c,#0000);height:1px;position:absolute;top:0;left:12%;right:12%}.overlay .btn,.overlay .mute-btn{pointer-events:none}.hud[data-phase=title] .overlay--title .btn,.hud[data-phase=title] .overlay--title .mute-btn,.hud[data-phase=paused] .overlay--pause .btn,.hud[data-phase=paused] .overlay--pause .mute-btn,.hud[data-phase=results] .overlay--results .btn{pointer-events:auto}.hud:not([data-phase=playing]) .hud-top button{pointer-events:none}.panel--title{width:min(100%,47em);padding:1.7em 2.2em 1.5em}.panel--pause{width:min(100%,27em)}.panel--results{width:min(100%,39em)}.wordmark{font-family:var(--font-display);letter-spacing:.14em;text-indent:.14em;background:linear-gradient(180deg, #fff8ec 8%, #f0ddc0 42%, var(--frost-200) 100%);color:#0000;-webkit-text-fill-color:transparent;filter:drop-shadow(0 .06em .35em #6bb6dd47);-webkit-background-clip:text;background-clip:text;margin:.14em 0 .05em;font-size:clamp(2.6rem,6.4cqw,6.2rem);font-weight:800;line-height:.95}.tagline{color:var(--cream);letter-spacing:.12em;text-indent:.12em;margin:.3em 0 0;font-size:1.16em;font-weight:600}.blurb{max-width:30em;color:var(--cream-dim);letter-spacing:.03em;margin:.55em auto 0;font-size:.88em;line-height:1.65}.btn--start{min-width:11em;margin-top:1.15em;padding:.78em 1.9em;font-size:1.02em}.best-row{color:var(--cream-faint);letter-spacing:.05em;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.5em 1.8em;margin-top:1.05em;font-size:.78em;display:flex}.best-item strong{color:var(--frost-100);font-variant-numeric:tabular-nums;margin-left:.4em;font-size:1.18em}.controls{color:var(--cream-dim);text-align:left;border-top:1px solid #f4e7d31a;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45em 1em;margin:1.15em 0 0;padding:.95em 0 0;font-size:.76em;list-style:none;display:grid}.controls li{align-items:center;gap:.45em;min-width:0;display:flex}.controls kbd{color:var(--cream);letter-spacing:.03em;white-space:nowrap;background:#060a0c8c;border:1px solid #f4e7d329;border-bottom-color:#f4e7d34d;border-radius:.35em;flex:none;padding:.16em .48em;font-size:.92em}.mute-btn--corner{z-index:1;pointer-events:auto;position:absolute;top:1.3em;right:1.3em}.btn{letter-spacing:.06em;white-space:nowrap;cursor:pointer;border:1px solid #0000;border-radius:.65em;justify-content:center;align-items:center;max-width:100%;padding:.66em 1.15em;font-weight:600;transition:transform .14s,background-color .14s,border-color .14s,box-shadow .14s;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)scale(.99)}.btn:focus-visible{outline:2px solid var(--frost-100);outline-offset:3px}.btn--primary{background:linear-gradient(180deg, #e6f7ff, var(--frost-200) 58%, #7cc0e2);color:#0b2431;border-color:#d3efffa6;box-shadow:0 .35em 1.2em #7dc4e547,inset 0 1px #fff}.btn--primary:hover{background:linear-gradient(#fff,#bde4f7 58%,#8fcbe8);box-shadow:0 .45em 1.5em #7dc4e561,inset 0 1px #fff}.btn--ghost{color:var(--cream-dim);background:#f4e7d30d;border-color:#f4e7d333}.btn--ghost:hover{color:var(--cream);background:#f4e7d31a;border-color:#f4e7d35c}.btn kbd{letter-spacing:.04em;opacity:.78;background:#06101638;border:1px solid #06101647;border-radius:.32em;margin-left:.55em;padding:.15em .42em;font-size:.74em;font-weight:600}.btn--ghost kbd{background:#f4e7d314;border-color:#f4e7d32e}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:.6em;margin-top:1.25em;display:flex}.actions--stack{flex-direction:column;align-items:stretch}.actions--stack .btn{justify-content:space-between}.panel>.mute-btn{margin:1em auto 0;display:block}.results__score{justify-content:center;align-items:baseline;gap:.25em;margin:.15em 0 .55em;display:flex}.results__score strong{color:var(--amber-bright);letter-spacing:.02em;font-variant-numeric:tabular-nums;font-size:clamp(34px,4.8cqw,64px);font-weight:800;line-height:1}.results__score span{color:var(--cream-dim);font-size:.95em}.results__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55em;margin:0;display:grid}.results__cell{background:#f4e7d30a;border:1px solid #f4e7d317;border-radius:.65em;padding:.66em .5em .7em}.results__cell dt{color:var(--cream-faint);letter-spacing:.12em;white-space:nowrap;margin-bottom:.28em;font-size:.66em}.results__cell dd{color:var(--frost-100);font-variant-numeric:tabular-nums;margin:0;font-size:1em;font-weight:700}.results__best{color:var(--cream-faint);letter-spacing:.04em;margin:.95em 0 0;font-size:.78em}.results__best strong{color:var(--amber-bright);font-variant-numeric:tabular-nums}@container stage (width<=1020px){.hud-top{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"timer score meter tools""tiers tiers tiers tiers"}.stat--coverage{min-width:5.4em}}@container stage (width<=700px){.hud-top{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"timer score""meter meter""tiers tiers""tools tools"}.tools{justify-content:flex-end}.controls{grid-template-columns:1fr}}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.55}}@keyframes ready-breathe{0%,to{opacity:.72}50%{opacity:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.btn:hover,.btn:active{transform:none}}
