:root{--night: #14161d;--bed: #2a2f3d;--amber: #f0b357;--linen: #ece3d2;--coral: #d4607a;--muted: #7a8296;--font: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", "Yu Gothic", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--night)}:root{--stage-h: 100dvh}body.pad-on{--stage-h: var(--stage-ratio, 58dvh)}@media (orientation: landscape){body.pad-on{--stage-h: 100dvh}}canvas{display:block;width:100vw;height:var(--stage-h)}#hud{position:fixed;inset:0 0 auto;height:var(--stage-h);pointer-events:none;font-family:var(--font);color:var(--linen);padding:18px 22px;z-index:6;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity .5s ease .25s,visibility 0s linear .75s}#hud.show{opacity:1;visibility:visible;transition:opacity .5s ease .25s}.hud-top{grid-row:1;grid-column:1;display:flex;gap:14px;align-items:center;font-size:15px;letter-spacing:.04em;white-space:nowrap}.hud-gap{flex:1 1 auto;min-width:0}#hud-state{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}#hud-quit{flex:none;pointer-events:auto;cursor:pointer;font:inherit;font-size:12px;letter-spacing:.08em;color:var(--muted);background:#14161d8c;border:1px solid rgba(122,130,150,.45);border-radius:999px;padding:4px 14px;transition:color .15s,border-color .15s,background .15s}#hud-quit:hover,#hud-quit:focus-visible{color:var(--night);background:var(--amber);border-color:var(--amber)}#hud-chase{flex:none;color:var(--amber);font-variant-numeric:tabular-nums}#hud-bolts{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:14px;font-variant-numeric:tabular-nums;color:var(--amber)}#hud-bolts .bolt{font-style:normal;font-size:15px}#hud-bolts .bolt.off{filter:grayscale(1);opacity:.35}.hud-cover{flex:0 1 180px;min-width:60px;height:6px;border-radius:3px;background:#ece3d226;overflow:hidden}.hud-cover i{display:block;height:100%;width:0;background:var(--coral);transition:width .12s linear}.hud-bottom{grid-row:3;grid-column:1;display:grid;gap:7px;justify-items:start}.hud-goal{margin:0;font-size:clamp(11px,1.4vw,13px);line-height:1.5;color:var(--linen);opacity:.85;text-shadow:0 2px 8px rgba(0,0,0,.8)}.hud-party{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.tag{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid transparent;display:inline-flex;align-items:center;gap:5px}.tag.off{color:var(--muted);border-color:#7a829666}.tag.on{color:var(--night);background:var(--amber)}.tag.me{color:var(--night);background:var(--linen);font-weight:700}.tag.rest{color:var(--muted);border-color:#7a829666;font-style:italic}.tag.down{color:var(--muted);text-decoration:line-through;opacity:.5}.tag.hold{color:var(--night);background:var(--coral);border-color:var(--coral);box-shadow:0 0 14px #d4607a8c}#hud-retry{display:inline-block;margin-top:20px;pointer-events:auto;cursor:pointer;font:inherit;font-size:14px;letter-spacing:.08em;color:var(--night);background:var(--amber);border:none;border-radius:999px;padding:10px 28px;box-shadow:0 4px 16px #f0b3574d;transition:transform .1s,background .12s}#hud-retry small{margin-left:9px;padding:1px 7px;border-radius:5px;font-size:11px;background:#14161d38}body.pad-on #hud-retry small{display:none}#hud-retry:hover,#hud-retry:focus-visible{background:var(--linen)}#hud-retry:active{transform:scale(.95)}@media (prefers-reduced-motion: reduce){*{transition:none!important}}#title{position:fixed;inset:0;z-index:10;font-family:var(--font);color:var(--linen);display:grid;grid-template-rows:1fr auto;padding:clamp(20px,5vh,56px) clamp(18px,5vw,64px);text-align:center;opacity:0;transition:opacity .7s ease;background:linear-gradient(to bottom,#11131ae0,#11131a00 38%),linear-gradient(to top,#11131aeb,#11131a00 34%)}#title.show{opacity:1}#title.leaving{opacity:0;transition:opacity .5s ease;pointer-events:none}.title-main{align-self:start}#title h1{margin:0;font-size:clamp(38px,9vw,92px);font-weight:800;line-height:.95;letter-spacing:.01em;text-transform:lowercase;text-shadow:0 6px 30px rgba(0,0,0,.6)}#title h1 em{display:block;font-style:normal;color:var(--amber);font-size:1.18em;margin-top:-.06em}.title-foot{align-self:end;display:grid;gap:14px;justify-items:center}.title-start{margin:0;font-size:clamp(13px,1.9vw,17px);letter-spacing:.06em;color:var(--amber);animation:title-pulse 1.9s ease-in-out infinite}@keyframes title-pulse{0%,to{opacity:.45}50%{opacity:1}}.title-keys{margin:0;display:grid;gap:4px 14px;grid-template-columns:auto auto;font-size:clamp(10px,1.3vw,12.5px);color:var(--muted)}.title-keys span:nth-child(odd){justify-self:end;color:var(--linen);opacity:.85;border:1px solid rgba(236,227,210,.22);border-radius:6px;padding:2px 8px}.title-keys span:nth-child(2n){justify-self:start;align-self:center}.title-version{margin:0;font-size:11px;letter-spacing:.08em;color:var(--muted);opacity:.6;font-variant-numeric:tabular-nums}@media (prefers-reduced-motion: reduce){.title-start{animation:none;opacity:1}}#pad{position:fixed;left:0;right:0;bottom:0;height:calc(100dvh - var(--stage-h));display:none;align-items:center;justify-content:space-between;padding:0 clamp(20px,8vw,56px);padding-bottom:env(safe-area-inset-bottom);background:linear-gradient(to bottom,#1a1d26,#101219);border-top:1px solid rgba(236,227,210,.1);touch-action:none;user-select:none;-webkit-user-select:none;z-index:5}body.pad-on #pad{display:flex}.pad-stick{position:relative;flex:none;width:calc(var(--pad-stick) * 2);height:calc(var(--pad-stick) * 2);border-radius:50%;background:#ece3d20d;border:2px solid rgba(236,227,210,.18);touch-action:none;transition:border-color .12s,background .12s}.pad-stick.active{border-color:var(--amber);background:#f0b3571a}.pad-knob{position:absolute;left:50%;top:50%;display:block;width:calc(var(--pad-knob) * 2);height:calc(var(--pad-knob) * 2);margin-left:calc(var(--pad-knob) * -1);margin-top:calc(var(--pad-knob) * -1);border-radius:50%;background:var(--linen);box-shadow:0 3px 12px #00000073;pointer-events:none}.pad-grab{flex:none;font:inherit;font-size:13px;letter-spacing:.06em;width:calc(var(--pad-grab) * 2);height:calc(var(--pad-grab) * 2);border-radius:50%;cursor:pointer;color:var(--night);background:var(--amber);border:none;touch-action:none;box-shadow:0 4px 14px #f0b3574d;transition:transform .1s,background .12s}.pad-grab.active{background:var(--coral);transform:scale(.93)}@media (orientation: landscape){body.pad-on #pad{height:min(var(--pad-landscape),46dvh);background:none;border-top:none;pointer-events:none}body.pad-on #pad .pad-stick,body.pad-on #pad .pad-grab{pointer-events:auto}}@media (prefers-reduced-motion: reduce){.pad-grab,.pad-stick{transition:none}}.title-sound{pointer-events:auto;cursor:pointer;font:inherit;font-size:12px;letter-spacing:.06em;display:inline-flex;align-items:center;gap:8px;color:var(--linen);background:#14161d8c;border:1px solid rgba(236,227,210,.25);border-radius:999px;padding:7px 18px;transition:color .15s,border-color .15s,opacity .15s}.title-sound i{font-style:normal;font-size:14px}.title-sound:hover,.title-sound:focus-visible{border-color:var(--amber);color:var(--amber)}.title-sound.off{color:var(--muted);opacity:.7}.pad-actions{display:flex;align-items:center;gap:14px}.pad-switch{flex:none;font:inherit;font-size:11px;letter-spacing:.06em;width:calc(var(--pad-grab) * 1.5);height:calc(var(--pad-grab) * 1.5);border-radius:50%;cursor:pointer;color:var(--linen);background:#ece3d21a;border:2px solid rgba(236,227,210,.35);touch-action:none;transition:transform .1s,background .12s,border-color .12s}.pad-switch.active{background:var(--amber);border-color:var(--amber);color:var(--night);transform:scale(.93)}.hud-count{grid-row:2;grid-column:1;place-self:center;font-weight:800;letter-spacing:.08em;color:var(--linen);text-shadow:0 6px 30px rgba(0,0,0,.65);font-size:clamp(64px,16vw,150px);line-height:1;opacity:0;pointer-events:none}.hud-count.show{animation:count-pop .85s ease-out both}.hud-count.go{color:var(--amber);font-size:clamp(40px,11vw,104px)}@keyframes count-pop{0%{opacity:0;transform:scale(1.6)}22%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.85)}}@media (prefers-reduced-motion: reduce){.hud-count.show{animation:none;opacity:1}}.hud-point{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:1px;pointer-events:none;opacity:0;transition:opacity .25s ease;text-shadow:0 2px 10px rgba(0,0,0,.8)}.hud-point.show{opacity:1}.hud-point b{font-size:clamp(13px,1.9vw,17px);font-weight:700;letter-spacing:.06em;color:var(--amber);white-space:nowrap}.hud-point i{font-style:normal;font-size:clamp(15px,2.2vw,20px);line-height:1;color:var(--amber);animation:point-bob .9s ease-in-out infinite}.hud-point.foe b,.hud-point.foe i{color:var(--coral)}@keyframes point-bob{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}@media (prefers-reduced-motion: reduce){.hud-point i{animation:none}}.hud-flash{grid-row:2;grid-column:1;place-self:center;font-weight:800;letter-spacing:.08em;font-size:clamp(24px,5.5vw,46px);line-height:1;color:var(--amber);text-shadow:0 4px 22px rgba(0,0,0,.75);opacity:0;pointer-events:none;white-space:nowrap}.hud-flash.show{animation:flash-pop var(--toast, 1s) ease-out both}@keyframes flash-pop{0%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(1.06)}30%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1) translateY(-14px)}}@media (prefers-reduced-motion: reduce){.hud-flash.show{animation:flash-fade var(--toast, 1s) ease-out both}@keyframes flash-fade{0%,80%{opacity:1}to{opacity:0}}}.hud-zzz{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .3s ease}.hud-zzz.show{opacity:.8}.hud-zzz span{display:block;font-size:clamp(11px,1.4vw,15px);font-weight:700;letter-spacing:.1em;color:var(--linen);text-shadow:0 2px 8px rgba(0,0,0,.8);animation:zzz-drift 2.6s ease-in-out infinite}@keyframes zzz-drift{0%{transform:translate(0) rotate(-6deg);opacity:.55}50%{transform:translate(3px,-6px) rotate(6deg);opacity:1}to{transform:translate(0) rotate(-6deg);opacity:.55}}@media (prefers-reduced-motion: reduce){.hud-zzz span{animation:none}}@media (orientation: portrait){body.pad-on .hud-top{position:fixed;left:0;right:0;top:var(--stage-h);padding:9px clamp(12px,4vw,22px);gap:10px;font-size:13px;background:linear-gradient(to bottom,#101219f5,#101219b8);border-top:1px solid rgba(236,227,210,.1);z-index:6}body.pad-on .hud-party{padding-bottom:2px}body.pad-on .hud-cover{flex:0 1 110px;min-width:44px}}.title-goal{margin:clamp(12px,2.4vh,22px) auto 0;max-width:30em;text-align:left;color:var(--linen)}.title-goal h2{margin:0 0 8px;text-align:center;font-size:clamp(12px,1.5vw,14px);font-weight:700;letter-spacing:.22em;color:var(--amber)}.title-goal ol{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:clamp(11.5px,1.6vw,15px);line-height:1.6;counter-reset:goal}.title-goal li{display:grid;grid-template-columns:1.6em 1fr;align-items:baseline;counter-increment:goal}.title-goal li:before{content:counter(goal) ".";color:var(--amber);font-weight:700;font-variant-numeric:tabular-nums}.title-copy{margin:0;font-size:10.5px;letter-spacing:.04em;color:var(--muted);opacity:.45}#hud-hold{flex:none;font-size:12px;letter-spacing:.04em;color:var(--night);background:var(--coral);border-radius:999px;padding:3px 10px;opacity:0;transform:scale(.9);transition:opacity .15s,transform .15s}#hud-hold.on{opacity:1;transform:scale(1)}.pad-grab.holding{background:var(--coral);box-shadow:0 4px 16px #d4607a66}.hud-bite{position:absolute;left:0;top:0;pointer-events:none;opacity:0}.hud-bite.show{opacity:1}.hud-bite span{display:block;white-space:nowrap;opacity:0;font-size:clamp(18px,2.8vw,26px);font-weight:800;letter-spacing:.08em;color:var(--coral);text-shadow:0 0 3px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.95)}.hud-bite.show span{animation:bite-pop var(--bite, 1s) ease-out both}.hud-bite.release span{color:var(--amber)}@keyframes bite-pop{0%{opacity:0;transform:scale(.5) translateY(6px)}20%{opacity:1;transform:scale(1.15) translateY(0)}35%{opacity:1;transform:scale(1) translateY(0)}70%{opacity:1;transform:scale(1) translateY(-6px)}to{opacity:0;transform:scale(.95) translateY(-16px)}}@media (prefers-reduced-motion: reduce){.hud-bite span{animation:none}}.hud-result{position:fixed;inset:0;z-index:7;display:grid;place-items:center;padding:clamp(12px,3vh,32px);background:#0c0e139e;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}.hud-result.show{opacity:1;visibility:visible;transition:opacity .35s ease}.result-card{pointer-events:auto;text-align:center;display:grid;justify-items:center;gap:6px;max-width:min(92vw,420px);width:100%}#result-title{font-size:clamp(30px,8vw,46px);font-weight:800;letter-spacing:.06em;text-shadow:0 6px 26px rgba(0,0,0,.7)}#result-sub{color:var(--linen);font-size:clamp(12px,2vw,14px);opacity:.85}.result-rank{margin:4px 0 2px}.result-rank i{display:grid;place-items:center;font-style:normal;width:clamp(50px,13vw,64px);height:clamp(50px,13vw,64px);border-radius:50%;font-size:clamp(26px,7vw,34px);font-weight:800;color:var(--night);background:var(--muted);animation:rank-pop .5s cubic-bezier(.2,1.4,.4,1) both .15s}.rank-s .result-rank i{background:var(--amber);box-shadow:0 0 26px #f0b3578c}.rank-a .result-rank i{background:var(--linen)}.rank-b .result-rank i{background:#8fb4c9}@keyframes rank-pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.result-rows{margin:6px 0 0;width:100%;display:grid;gap:3px}.result-row{display:flex;align-items:baseline;gap:10px;padding:5px 12px;border-radius:8px;background:#ece3d20f;animation:row-in .32s ease-out both;animation-delay:calc(.28s + var(--i) * .11s)}.result-row dt{flex:1;text-align:left;font-size:clamp(12px,2vw,14px);display:flex;flex-direction:column}.result-row dt em{font-style:normal;font-size:10.5px;color:var(--muted);letter-spacing:.04em}.result-row dd{margin:0;font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(13px,2.2vw,16px);color:var(--amber)}@keyframes row-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.result-total{width:100%;margin-top:6px;padding:8px 12px;border-radius:10px;display:flex;align-items:baseline;justify-content:space-between;background:#ece3d21f;border:1px solid rgba(236,227,210,.2)}.result-total span{font-size:11px;letter-spacing:.18em;color:var(--muted)}.result-total b{font-size:clamp(22px,5.5vw,30px);font-variant-numeric:tabular-nums;color:var(--linen)}.result-best{margin:2px 0 0;font-size:11.5px;color:var(--muted);letter-spacing:.06em}.result-best.new{color:var(--amber);font-weight:700}.result-actions{display:flex;gap:10px;margin-top:10px}#result-quit{pointer-events:auto;cursor:pointer;font:inherit;font-size:13px;letter-spacing:.06em;color:var(--muted);background:#14161d8c;border:1px solid rgba(122,130,150,.45);border-radius:999px;padding:10px 20px;transition:color .15s,border-color .15s}#result-quit:hover,#result-quit:focus-visible{color:var(--linen);border-color:var(--linen)}#hud-retry{margin-top:0}@media (prefers-reduced-motion: reduce){.result-rank i,.result-row{animation:none}}#hud-time{flex:none;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--linen);opacity:.85}.result-row.bonus{background:#f0b35724;border:1px solid rgba(240,179,87,.35);padding:5px 11px}.result-row.bonus dt{color:var(--amber);font-weight:700}.result-row.bonus dt em{color:#f0b357bf}.result-row.bonus dd{color:var(--amber)}.result-row.bonus .badge{display:inline-block;margin-right:6px;padding:0 5px;border-radius:4px;font-size:9px;letter-spacing:.1em;color:var(--night);background:var(--amber);vertical-align:1px}