html.game-open{overflow:hidden}.only-touch{display:none}@media (pointer:coarse){.only-keys{display:none}.only-touch{display:block}}.mode-option{border:1px solid var(--color-hairline);border-radius:var(--radius-sm);background-color:var(--color-elevated);cursor:pointer;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;min-width:0;min-height:44px;padding:12px;transition:border-color .15s,background-color .15s,box-shadow .15s;display:flex}@media (width>=40rem){.mode-option{flex-direction:column;justify-content:flex-start;gap:2px}}.mode-option:hover{background-color:var(--color-raised)}.mode-option:has(:checked){border-color:var(--color-ink);background-color:var(--color-raised);box-shadow:inset 0 0 0 1px var(--color-ink)}.mode-option:has(:focus-visible){outline:2px solid var(--color-link);outline-offset:2px}.game-dialog{background-color:var(--color-canvas);width:100%;max-width:none;height:100dvh;max-height:none;color:var(--color-ink);overscroll-behavior:contain;border:0;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.game-dialog::backdrop{background-color:var(--color-canvas)}.game-stage{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;width:100%;height:100%;position:relative;overflow:hidden}.game-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--color-link)}.game-hud{padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));pointer-events:none;justify-items:start;gap:8px;display:grid;position:absolute;inset:0 0 auto}.game-hud>*{pointer-events:auto;cursor:default}.game-hud-row{flex-wrap:wrap;align-items:center;gap:8px;width:100%;display:flex}.game-glass{border:1px solid var(--color-hairline);backdrop-filter:blur(8px);background-color:#07080fbd}.game-chip{white-space:nowrap;border-radius:9999px;align-items:center;gap:8px;height:40px;padding:0 14px;font-size:14px;display:inline-flex}.game-sep{background-color:var(--color-hairline);width:1px;height:14px}.game-icon-btn{color:var(--color-ink)}.game-icon-btn:hover{background-color:var(--color-raised)}.game-icon-btn[aria-pressed=false]{color:var(--color-mute)}.game-icon-btn[aria-pressed=true] .icon-off,.game-icon-btn[aria-pressed=false] .icon-on{display:none}.game-dawn-track{background-color:#ffffff1a;border-radius:9999px;width:min(100%,520px);height:4px;overflow:hidden}.game-dawn-bar{transform-origin:0;border-radius:inherit;background:linear-gradient(90deg, var(--color-develop-start), var(--color-preview-start));height:100%}.game-dawn-track.is-low .game-dawn-bar{background:linear-gradient(90deg, var(--color-ship-start), var(--color-ship-end));animation:1s ease-in-out infinite game-blink}.game-blocked{background-color:var(--color-lantern-soft);height:36px;color:var(--color-lantern);border:1px solid #ffb54759;border-radius:9999px;padding:0 14px;font-size:13px;font-weight:500}.game-blocked:not(:disabled){cursor:pointer}.game-splash{left:50%;top:calc(max(12px, env(safe-area-inset-top)) + 104px);border-radius:var(--radius-md);text-align:center;pointer-events:none;width:min(92%,420px);padding:14px 18px;position:absolute;transform:translate(-50%)}.game-coach{left:50%;bottom:max(20px, env(safe-area-inset-bottom));border-radius:var(--radius-md);width:min(92%,480px);color:var(--color-body);text-align:center;pointer-events:none;padding:12px 16px;font-size:14px;position:absolute;transform:translate(-50%)}.game-overlay{padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));cursor:default;background-color:#03040a80;place-items:center;display:grid;position:absolute;inset:0;overflow-y:auto}.game-panel{border:1px solid var(--color-hairline);border-radius:var(--radius-lg);width:min(100%,400px);box-shadow:var(--shadow-float);text-align:center;background-color:#0e1019f0;padding:28px 24px 24px;animation:.42s cubic-bezier(.2,.8,.2,1) both game-rise}@media (height<=520px) and (width>=560px){.game-result{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center;gap:24px;width:min(100%,760px);padding:20px;display:grid}.game-result .game-result-title{font-size:40px;line-height:44px}.game-result-body>:first-child{margin-top:0}.game-result-body>:last-child{margin-top:16px}}.game-stats{border:1px solid var(--color-hairline);border-radius:var(--radius-sm);grid-template-columns:repeat(3,minmax(0,1fr));display:grid;overflow:hidden}.game-stats>div{overflow-wrap:break-word;min-width:0;padding:10px 6px}@media (width<380px){.game-stats dd{font-size:13px}}.game-stats>div+div{border-left:1px solid var(--color-hairline)}@keyframes game-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes game-blink{50%{opacity:.45}}.beat-frame{min-height:600px}.beat-frame-shade{background:radial-gradient(circle at 14% 88%,#ffb54729,#0000 26%),linear-gradient(90deg,#03040a8c,#03040a3d 58%,#03040a80);position:absolute;inset:0}.beat-frame-houses{align-items:flex-end;gap:10px;height:130px;padding-inline:4%;display:flex;position:absolute;bottom:0;left:0;right:0}.beat-frame-houses span{background-color:#05060f;flex:1;height:74%;position:relative;box-shadow:inset 0 3px #1d1f3c}.beat-frame-houses span:nth-child(2){height:96%}.beat-frame-houses span:nth-child(4){height:84%}.beat-frame-houses i{background-color:#ffffff0d;width:15px;height:20px;position:absolute;top:22px}.beat-frame-houses i:first-child{left:22%}.beat-frame-houses i:last-child{right:22%}.beat-frame-houses i.is-lit{background-color:#ffce7a;box-shadow:0 0 16px 4px #ffbe5a66}.beat-frame-lane{--hit:10%;background:linear-gradient(90deg,#03040a00,#03040a8c 16% 84%,#03040a00);border-block:1px solid #ffffff1a;height:56px;position:absolute;bottom:96px;left:0;right:0}.beat-frame-ring{top:50%;left:var(--hit);border:2px solid #ffffff73;border-radius:9999px;width:44px;height:44px;position:absolute;translate:-50% -50%}.beat-frame-note{width:28px;height:28px;animation:beat-travel 3.4s linear var(--d,0s) 3 both;border-radius:9999px;position:absolute;top:50%;left:100%;translate:-50% -50%}.beat-frame-note.is-tung{background-color:var(--color-lantern);box-shadow:0 0 18px 4px #ffb54759}.beat-frame-note.is-tak{border-radius:var(--radius-sm);background-color:var(--color-link);width:22px;height:22px;rotate:45deg;box-shadow:0 0 16px 4px #52a8ff4d}.beat-frame-note.is-hold{background-color:#c680ff;border-radius:9999px;width:96px;box-shadow:0 0 18px 4px #c680ff4d}@keyframes beat-travel{0%{opacity:0;left:100%}8%{opacity:1}86%{opacity:1}to{left:var(--hit);opacity:0}}.beat-frame-sahur{filter:drop-shadow(0 10px 18px #0009);width:80px;animation:.9s ease-in-out 6 both beat-bob;position:absolute;bottom:42px;left:10%;translate:-38px}.beat-frame-tung{left:calc(22% + var(--x,0%));bottom:168px}@keyframes beat-bob{0%,to{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-9px)rotate(2deg)}}.song-option{border:1px solid var(--color-hairline);border-radius:var(--radius-sm);background-color:var(--color-elevated);cursor:pointer;align-items:center;gap:12px;min-height:44px;padding:10px 12px;transition:border-color .15s,background-color .15s,box-shadow .15s;display:flex}.song-option:hover{background-color:var(--color-raised)}.song-option:has(:checked){border-color:var(--color-ink);background-color:var(--color-raised);box-shadow:inset 0 0 0 1px var(--color-ink)}.song-option:has(:focus-visible){outline:2px solid var(--color-link);outline-offset:2px}.song-option-mark{border:1px solid var(--color-faint);border-radius:9999px;flex-shrink:0;width:14px;height:14px}.song-option:has(:checked) .song-option-mark{border-color:var(--color-lantern);background-color:var(--color-lantern);box-shadow:inset 0 0 0 3px var(--color-elevated)}.song-option-meta{text-align:right;flex-shrink:0;margin-left:auto}[data-difficulty-picker]:disabled .mode-option{cursor:not-allowed;opacity:.45}.beat-details summary{align-items:baseline;gap:10px;min-height:32px;padding-block:6px;list-style:none;display:flex}.beat-details summary::-webkit-details-marker{display:none}.beat-details summary:after{content:"";border-right:1.5px solid var(--color-mute);border-bottom:1.5px solid var(--color-mute);width:7px;height:7px;margin-left:auto;transition:rotate .15s;translate:0 -2px;rotate:45deg}.beat-details[open] summary:after{translate:0 2px;rotate:-135deg}.beat-details summary:hover:after{border-color:var(--color-ink)}.beat-details summary:focus-visible{outline:2px solid var(--color-link);outline-offset:2px;border-radius:var(--radius-sm)}.beat-range{gap:6px;display:grid}.beat-slider{appearance:none;cursor:pointer;background:0 0;width:100%;height:20px}.beat-slider::-webkit-slider-runnable-track{background-color:var(--color-hairline);border-radius:9999px;height:4px}.beat-slider::-moz-range-track{background-color:var(--color-hairline);border-radius:9999px;height:4px}.beat-slider::-webkit-slider-thumb{appearance:none;background-color:var(--color-ink);border:none;border-radius:9999px;width:18px;height:18px;margin-top:-7px}.beat-slider::-moz-range-thumb{background-color:var(--color-ink);border:none;border-radius:9999px;width:18px;height:18px}.beat-slider:focus-visible{outline:2px solid var(--color-link);outline-offset:4px}.beat-stage{cursor:default;background-color:#03040b}.beat-canvas{width:100%;height:100%;display:block}.beat-pads{padding:0 10px max(14px, env(safe-area-inset-bottom));pointer-events:none;gap:10px;display:none;position:absolute;inset:auto 0 0}@media (pointer:coarse){.beat-pads{display:flex}}.beat-pad{border-radius:var(--radius-md);height:62px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:#ffffff80;text-align:center;background-color:#ffffff0a;border:1px dashed #ffffff29;flex:1;place-items:center;gap:2px;font-size:13px;font-weight:500;display:grid}.beat-pad small{letter-spacing:.04em;color:#ffffff4d;font-size:10px}.beat-pad:first-child{color:#ffb547bf;border-color:#ffb5474d}.beat-pad:last-child{color:#52a8ffbf;border-color:#52a8ff4d}.beat-stage[data-phase=paused] .beat-pads,.beat-stage[data-phase=result] .beat-pads,.beat-stage[data-phase=calibrate] .beat-pads{display:none}@media (pointer:coarse){.beat-stage .game-coach{bottom:calc(max(14px, env(safe-area-inset-bottom)) + 74px)}}@media (height<=480px){.beat-stage~.game-hud,.beat-stage .game-hud{padding-top:max(8px, env(safe-area-inset-top));gap:5px}.beat-stage .game-chip{height:32px;padding-inline:11px;font-size:13px}.beat-stage .btn-icon{width:36px;height:36px}.beat-street{height:30px;padding-inline:12px}.beat-pad{height:44px;font-size:12px}.beat-pad small{display:none}.beat-stage .game-coach{bottom:calc(max(10px, env(safe-area-inset-bottom)) + 52px);padding:8px 14px;font-size:13px}.beat-splash{top:calc(max(8px, env(safe-area-inset-top)) + 96px)}}.beat-song-bar{transform-origin:0;border-radius:inherit;background:linear-gradient(90deg, #3d5aff, var(--color-preview-start) 44%, var(--color-ship-start) 78%, var(--color-ship-end));height:100%}.beat-song-track.is-close{box-shadow:0 0 0 1px #f9cb2859}.beat-street{border-radius:9999px;align-items:center;gap:10px;width:min(100%,380px);height:36px;padding:0 14px;display:flex}.beat-street-track{background-color:#ffffff1f;border-radius:9999px;flex:1;height:6px;position:relative;overflow:hidden}.beat-street-bar{transform-origin:0;border-radius:inherit;background:linear-gradient(90deg, var(--color-lantern), var(--color-ship-end));transition:transform 90ms linear;position:absolute;inset:0}.beat-street.is-full{color:var(--color-ship-end);border-color:#f9cb2899;animation:.9s ease-in-out infinite game-blink}.beat-street.is-low{color:var(--color-error);border-color:#ff616699}.beat-street.is-low .beat-street-bar{background:linear-gradient(90deg, #ff6166, var(--color-ship-start))}.beat-splash{top:calc(max(12px, env(safe-area-inset-top)) + 136px)}.beat-cal{left:50%;top:calc(max(12px, env(safe-area-inset-top)) + 120px);border-radius:var(--radius-lg);text-align:center;width:min(92%,440px);padding:18px 20px 20px;animation:.42s cubic-bezier(.2,.8,.2,1) both game-rise;position:absolute;transform:translate(-50%)}@media (height<=560px){.beat-cal{top:calc(max(12px, env(safe-area-inset-top)) + 58px);padding:12px 16px 14px}}
