:root{--ink:#2b2140;--cream:#fff8ec;--grass:#5fb33a;--grass-dark:#3f8a24;--dirt:#8a5a35;--sky:#8fc8ff;--accent:#ffd23f;--accent-dark:#d8a400;--panel:#fff8ecf7;color:var(--ink);font-family:ui-rounded,Nunito,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:#8fc8ff;height:100%;margin:0;overflow:hidden}.hidden{display:none!important}.btn{font:inherit;color:var(--ink);background:var(--accent);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;border-radius:12px;padding:10px 18px;font-size:18px;font-weight:800;transition:transform 60ms,box-shadow 60ms}.btn:hover:not(:disabled){background:#ffe066}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.btn:focus-visible{outline-offset:2px;outline:3px solid #fff}.btn:disabled{color:#7d7590;cursor:not-allowed;background:#d8d2c8;border-color:#9e97ad;box-shadow:0 4px #9e97ad}.btn.small{box-shadow:0 3px 0 var(--ink);padding:6px 10px;font-size:14px}.title{background:linear-gradient(to bottom, transparent 78%, var(--grass) 78%, var(--grass) 82%, var(--dirt) 82%), linear-gradient(to bottom, #6fb6ff, #bfe3ff 70%);flex-direction:column;align-items:center;padding:28px 16px 40px;display:flex;position:fixed;inset:0;overflow-y:auto}.logo{text-align:center;letter-spacing:1px;color:#fff;text-shadow:0 5px 0 var(--grass-dark), 0 8px 0 var(--ink), 0 10px 18px #00000040;-webkit-text-stroke:3px var(--ink);margin:4px 0 0;font-size:clamp(34px,7vw,76px);font-weight:900}.logo span{color:#ff4d6d}.tagline{color:#fff;text-shadow:0 2px 0 var(--ink);margin:6px 0 18px;font-size:20px;font-weight:800}.who{background:var(--panel);border:3px solid var(--ink);width:min(560px,100%);box-shadow:0 5px 0 var(--ink);border-radius:16px;padding:14px 18px}.name-row,.colour-row{flex-wrap:wrap;align-items:center;gap:10px;font-weight:800;display:flex}.name-row>span,.colour-row>span{min-width:100%;font-size:15px}.name-row input{min-width:160px;font:inherit;border:3px solid var(--ink);color:var(--ink);background:#fff;border-radius:10px;flex:1;padding:6px 10px;font-size:22px;font-weight:800}.colour-row{margin-top:12px}.colour-pick{align-items:center;gap:12px;width:100%;display:flex}.swatches{flex:1;grid-template-columns:repeat(8,1fr);gap:8px;min-width:0;display:grid}.preview{border:3px solid var(--ink);background:linear-gradient(#9fd3ff,#d9f0ff 70%,#8fd16a 70%);border-radius:12px;flex:none;width:112px;height:136px}.swatch{aspect-ratio:1;border:3px solid var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);border-radius:10px}.swatch.chosen{outline-offset:-8px;box-shadow:0 1px 0 var(--ink);outline:4px solid #fff;transform:translateY(2px)}.modes{grid-template-columns:1fr 1fr;gap:12px;width:min(560px,100%);margin-top:18px;display:grid}.mode{flex-direction:column;justify-content:center;align-items:center;min-height:64px;display:flex}.mode small{text-transform:uppercase;letter-spacing:1px;margin-top:2px;font-size:13px;font-weight:800}.howto-btn{background:#9be564;grid-column:1/-1}.howto-btn:hover{background:#b3f07f!important}.title-msg{color:#fff;min-height:1.2em;text-shadow:0 2px 0 var(--ink);text-align:center;max-width:560px;margin:14px 0 0;font-weight:800}.footer{margin-top:auto;padding-top:18px;font-weight:800}.footer a{color:#fff;text-shadow:0 2px 0 var(--ink)}.overlay{z-index:20;background:#140e248c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.panel{background:var(--panel);border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);border-radius:18px;flex-direction:column;gap:10px;min-width:min(320px,100%);max-height:100%;padding:18px 22px;display:flex;overflow-y:auto}.panel h2{text-align:center;margin:0 0 4px;font-size:28px;font-weight:900}.panel h3{margin:12px 0 2px;font-size:18px}.panel p{margin:4px 0;font-size:16px;line-height:1.4}.howto .panel{max-width:640px}.howto table{border-collapse:collapse;width:100%;font-size:15px}.howto td{border-bottom:2px solid #eadfcd;padding:4px 6px}.howto td:first-child{white-space:nowrap;font-weight:800}.modes .howto-btn{grid-column:1/-1}.online-count{color:#fff;text-shadow:0 2px 0 var(--ink)}.pin-row{margin-top:10px}.pin-row input{max-width:220px;font-size:18px}.game-canvas{width:100vw;height:100vh;display:block;position:fixed;inset:0}.hud{pointer-events:none;z-index:5;color:#fff;text-shadow:0 2px 0 var(--ink), 0 0 6px #00000059;font-weight:900;position:fixed;inset:0}.hud-lanes{font-size:20px;position:absolute;top:10px;left:14px}.hud-lanes.big{-webkit-text-stroke:2px var(--ink);font-size:64px;left:50%;transform:translate(-50%)}.hud-warning{color:#ffd23f;font-size:30px;animation:.5s infinite alternate hud-pulse;position:absolute;top:96px;left:50%;transform:translate(-50%)}.hud-idle{text-align:center;line-height:1;position:absolute;top:8px;left:calc(50% + 110px)}.hud-idle-secs{-webkit-text-stroke:1.5px var(--ink);font-size:44px}.hud-idle-label{margin-top:2px;font-size:18px}.hud-idle.urgent{color:#ff3d2e;animation:.5s infinite alternate hud-pulse}.hud-stun{color:#ffd23f;font-size:24px;position:absolute;bottom:120px;left:50%;transform:translate(-50%)}.hud-inset{border:3px solid var(--ink);width:200px;height:112px;image-rendering:pixelated;background:#3a3d44;border-radius:8px;position:absolute;top:10px;right:10px}.hud-inset.assist{box-shadow:0 0 0 3px #ffd23f,0 0 14px 4px #ffd23fcc}.hud-rel{font-size:18px;position:absolute;top:132px;right:12px}.hud-blocked{color:#ff3d2e;-webkit-text-stroke:1px #fff;font-size:34px;position:absolute;bottom:150px;left:50%;transform:translate(-50%)}.hud-ammo{font-size:22px;position:absolute;bottom:70px;right:16px}.hud-marker{width:0;height:0;filter:drop-shadow(0 2px 0 var(--ink));border-top:20px solid #ff4d6d;border-left:12px solid #0000;border-right:12px solid #0000;position:absolute;top:0;left:0}.hud-marker.arrow{border:12px solid #0000;border-left:22px solid #ff4d6d;border-right:0}.hud-banner{text-align:center;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}.hud-banner-big{-webkit-text-stroke:2px var(--ink);font-size:72px}.hud-banner-small{margin-top:6px;font-size:22px}.hud-score{color:var(--ink);text-shadow:none;pointer-events:none;min-width:420px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hud-score h2{font-size:22px}.hud-ladder{border-collapse:collapse;font-size:16px}.hud-ladder th,.hud-ladder td{text-align:left;border-bottom:2px solid #eadfcd;padding:3px 10px}.hud-ladder tr.me td{background:#fff1b8}.hud-next{text-align:center;font-weight:900;font-size:18px!important}.hud-score-lanes{text-align:center;font-size:72px;line-height:1}.hud-score-lanes-word{text-align:center;margin-bottom:6px;font-size:16px}.hud-score-cause{text-align:center}.hud-next{margin-top:10px;font-size:22px!important}.hud-next-name{-webkit-text-stroke:1px var(--ink);font-size:34px}.hud-replay{text-align:center;position:absolute;top:12px;left:50%;transform:translate(-50%)}.hud-replay-title{-webkit-text-stroke:1px var(--ink);font-size:26px}.hud-replay-note{letter-spacing:.08em;text-transform:uppercase;color:#ffd23f;margin-top:2px;font-size:15px}.hud-replay-note.lost{color:#ff3d2e}.hud-presence{flex-wrap:wrap;gap:6px;max-width:60vw;font-size:13px;display:flex;position:absolute;bottom:10px;left:10px}.hud .chip{text-shadow:none;background:#2b2140b8;border:2px solid;border-radius:10px;padding:2px 8px}.hud .dot{border:1px solid var(--ink);border-radius:50%;width:10px;height:10px;margin-right:5px;display:inline-block}.hud-stats{text-shadow:none;background:#0000008c;padding:3px 6px;font:12px/1.3 monospace;position:absolute;top:44px;left:10px}@keyframes hud-pulse{0%{opacity:1}to{opacity:.55}}