:root{--ink:#33301f;--chalk:#f7f4e8;--turf:#4e7333;--yolk:#f6b32b;--crack:#c0492f;--sky:#9fcbe8;--panel:#1e2616b8;--sans:ui-rounded, "Hiragino Maru Gothic ProN", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{background:var(--sky);height:100%;color:var(--chalk);font-family:var(--sans);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}#stage{width:100%;height:100%;display:block;position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:3;background:radial-gradient(at 50% 42%,#fff6d61f 0%,#283c1e00 45%,#1a281457 100%);position:fixed;inset:0}#hud{inset:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) 12px;z-index:2;pointer-events:none;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 3px #141e0eb3;flex-direction:column;justify-content:space-between;font-size:12px;display:flex;position:fixed}.bar{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.bar.bottom{gap:12px}.readout{background:var(--panel);border-radius:999px;align-items:baseline;gap:6px;padding:5px 10px;display:flex}.readout .label{color:#f7f4e899;font-size:10px}.readout b{font-variant-numeric:tabular-nums;font-weight:700}#cracks{letter-spacing:.16em;font-size:15px;line-height:1}#cracks .spent{color:var(--crack)}#effects{gap:8px;margin:0;padding:0;list-style:none;display:flex}#effects li{font-variant-numeric:tabular-nums;color:#2b2a1c;background:var(--yolk);border-radius:999px;padding:5px 10px;font-size:10px}#effects .grip{background:#d8b85a}#effects .float{background:#dceeff}#effects .fed{background:#f2c65c}#callout{z-index:3;text-align:center;letter-spacing:.06em;text-transform:uppercase;color:var(--chalk);text-shadow:0 2px #1e281480,0 0 24px #141e0e99;pointer-events:none;margin:0;padding:0 20px;font-size:clamp(20px,5.5vw,38px);font-weight:800;animation:1.6s ease-out forwards callout;position:fixed;top:26%;left:0;right:0}#callout[hidden]{display:none}#callout.bad{color:#ffc9be}#callout.good{color:#fff0bd}#callout.gone{color:var(--yolk)}@keyframes callout{0%{opacity:0;transform:translateY(10px)scale(.94)}14%{opacity:1;transform:translateY(0)scale(1)}74%{opacity:1}to{opacity:0;transform:translateY(-14px)}}#mute{right:12px;bottom:max(12px, env(safe-area-inset-bottom));z-index:4;appearance:none;background:var(--panel);color:#f7f4e8cc;font:inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:0;border-radius:999px;padding:7px 12px;font-size:10px;position:fixed}#mute:hover{color:var(--chalk)}#overlay{z-index:5;text-align:center;background:radial-gradient(#1c2c168c 0%,#101a0ce0 78%);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px 20px;display:flex;position:fixed;inset:0;overflow-y:auto}#overlay[hidden]{display:none}#overlay-kicker{letter-spacing:.44em;text-transform:uppercase;color:#f7f4e89e;margin:0;font-size:11px}#overlay[data-state=out] #overlay-kicker{color:#ff9f8c}#overlay[data-state=through] #overlay-kicker{color:#bff0a0}#overlay h1{letter-spacing:.01em;text-transform:lowercase;text-shadow:0 4px #14200e73;margin:0;font-size:clamp(34px,10vw,74px);line-height:.94}#overlay h1 em{letter-spacing:.32em;text-transform:uppercase;color:var(--yolk);text-shadow:none;margin-top:12px;font-size:.24em;font-style:normal;font-weight:600;display:block}#overlay-lead{color:#f7f4e8c2;max-width:38ch;margin:0;font-size:13px;line-height:1.65}#overlay-stats{letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:4px 0 0;font-size:11px;display:flex}#overlay-stats[hidden]{display:none}#overlay-stats .stat{flex-direction:column;gap:4px;min-width:58px;display:flex}#overlay-stats dt{color:#f7f4e88c}#overlay-stats dd{font-variant-numeric:tabular-nums;margin:0;font-size:19px}#overlay-board{width:min(360px,100%);margin:4px 0 0;padding:0;font-size:12px;list-style:none}#overlay-board[hidden]{display:none}#overlay-board li{text-align:left;border-radius:8px;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:6px 10px;display:grid}#overlay-board li:nth-child(odd){background:#f7f4e80f}#overlay-board li.you{background:#f6b32b38;font-weight:700}#overlay-board li.broken{color:#f7f4e866}#overlay-board .spot{color:#f7f4e899;font-variant-numeric:tabular-nums}#overlay-board .who{align-items:center;gap:8px;display:flex}#overlay-board .who i{border-radius:50%/60% 60% 40% 40%;width:11px;height:14px;display:inline-block}#overlay-board .when{color:#f7f4e899;font-variant-numeric:tabular-nums}#play{appearance:none;background:var(--yolk);color:#30290f;font:inherit;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border:0;border-radius:999px;margin-top:8px;padding:13px 34px;font-size:14px;font-weight:800;box-shadow:0 4px #c98d17}#play:hover{background:#ffc44a}#play:active{transform:translateY(2px);box-shadow:0 2px #c98d17}#keys{letter-spacing:.04em;color:#f7f4e88c;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:10px 0 0;padding:0;font-size:11px;list-style:none;display:flex}kbd{min-width:20px;font:inherit;color:var(--chalk);background:#f7f4e829;border-radius:5px;margin-right:4px;padding:2px 6px;font-size:10px;display:inline-block}.touch{display:none}@media (hover:none){#keys li:not(.touch){display:none}.touch{display:block}}@media (max-width:560px){#hud{font-size:10px}.bar{gap:8px}.readout{padding:4px 8px}}@media (prefers-reduced-motion:reduce){#callout{animation-duration:.01ms}}