:root{--green:#3f9a4a;--green-dark:#2b6b35;--cream:#fff8e7;--ink:#1f2a22;--muted:#6b7a6e;--gold:#ffcf3f;--card:#fffcf2f5;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:none;background:#9fd8f0;margin:0;font:16px/1.4 Nunito,ui-rounded,SF Pro Rounded,system-ui,sans-serif;overflow:hidden}#game{touch-action:none;display:block;position:fixed;inset:0}button{font:inherit;color:inherit;cursor:pointer}[hidden]{display:none!important}.screen{touch-action:pan-y;padding:calc(16px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));background:linear-gradient(#9fd8f0eb,#e9f7e6f5);flex-direction:column;align-items:center;display:flex;position:fixed;inset:0;overflow-y:auto}.screen>*{width:100%;max-width:440px}.screen header{align-items:center;gap:8px;margin-bottom:14px;display:flex}.screen header h2{margin:0;font-size:26px;font-weight:800}.back{background:#fff;border:none;border-radius:50%;width:42px;height:42px;font-size:28px;line-height:1;box-shadow:0 2px #0000001f}.title{text-align:center;gap:6px}.title>:first-child,.modal>:first-child{margin-top:auto}.title>:last-child,.modal>:last-child{margin-bottom:auto}.title-art canvas{width:140px;height:140px;animation:2.4s ease-in-out infinite hop}@keyframes hop{0%,70%,to{transform:translateY(0)scale(1)}75%{transform:translateY(0)scale(1.12,.86)}85%{transform:translateY(-34px)scale(.92,1.1)}95%{transform:translateY(0)scale(1.08,.9)}}.title h1{letter-spacing:-1px;color:var(--green-dark);text-shadow:0 4px #0000001a;margin:0;font-size:64px;font-weight:900;line-height:.95}.title h1 span{color:var(--green)}.tagline{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:4px 0 20px;font-size:13px;font-weight:700}@media (height<=500px){.title-art canvas{width:84px;height:84px}.title h1{font-size:46px}.tagline{margin-bottom:12px}}.menu{flex-direction:column;gap:10px;display:flex}.menu-row{gap:10px;display:flex}.menu-row>*{flex:1}.btn{color:var(--ink);background:#fff;border:none;border-radius:16px;padding:15px 18px;font-size:18px;font-weight:800;transition:transform 80ms,box-shadow 80ms;box-shadow:0 4px #00000024}.btn:active{transform:translateY(3px);box-shadow:0 1px #00000024}.btn.primary{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-dark)}.btn.small{padding:10px 14px;font-size:15px}.btn small{color:var(--muted);font-size:12px;font-weight:700;display:block}.btn:disabled{opacity:.5}.muted{color:var(--muted);font-size:14px}.center{text-align:center}.cards{flex-direction:column;gap:12px;display:flex}.card{text-align:left;background:var(--card);border:none;border-radius:18px;align-items:center;gap:14px;padding:14px;display:flex;box-shadow:0 4px #0000001f}.card .swatch{color:#fff;border-radius:14px;flex:none;place-items:center;width:58px;height:58px;font-size:22px;font-weight:900;display:grid}.card .info{flex:1;min-width:0}.card h3{margin:0;font-size:19px}.card p{color:var(--muted);margin:2px 0 0;font-size:13px}.card .meta{text-align:right;white-space:nowrap;font-size:13px;font-weight:800}.card.locked{opacity:.55}.stars-inline{color:var(--gold);letter-spacing:1px;font-size:16px}.stars-inline .off{color:#d8d2bf}.panel-stack{flex-direction:column;gap:12px;display:flex}.field{flex-direction:column;gap:6px;font-size:14px;font-weight:800;display:flex}.field input,.field select,.join-row input{font:inherit;color:var(--ink);-webkit-user-select:text;user-select:text;background:#fff;border:2px solid #e2dccb;border-radius:14px;padding:12px 14px;font-size:18px}.join-row{gap:10px;display:flex}.join-row input{text-transform:uppercase;letter-spacing:.3em;text-align:center;flex:1;min-width:0;font-weight:900}.room-code{align-items:center;gap:10px;font-size:18px;font-weight:800;display:flex}.room-code strong{letter-spacing:.18em;color:var(--green-dark);flex:1;font-size:30px}.players{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.players li{background:var(--card);border-radius:14px;align-items:center;gap:10px;padding:8px 12px;font-weight:800;display:flex}.players canvas{width:40px;height:40px}.players .host{color:var(--muted);margin-left:auto;font-size:12px}.skins{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.skin{background:var(--card);border:3px solid #0000;border-radius:18px;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;font-size:13px;font-weight:800;display:flex;box-shadow:0 4px #0000001a}.skin canvas{width:72px;height:72px}.skin.selected{border-color:var(--green)}.skin.locked canvas{filter:grayscale()brightness(.6)}.skin small{color:var(--muted)}.toggle{background:var(--card);border-radius:14px;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:800;display:flex}.toggle small{color:var(--muted);font-weight:600}.toggle input{width:24px;height:24px;accent-color:var(--green)}.hud{pointer-events:none;position:fixed;inset:0}.hud>*{pointer-events:auto}.icon-btn{top:calc(12px + var(--safe-top));background:#ffffffd9;border:none;border-radius:50%;width:48px;height:48px;font-size:18px;font-weight:900;position:absolute;box-shadow:0 3px #00000026}#pause-btn{left:12px}#checkpoint-btn{font-size:22px;right:12px}.hud-center{top:calc(14px + var(--safe-top));pointer-events:none;gap:8px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.hud-center span{color:#fff;font-variant-numeric:tabular-nums;background:#0006;border-radius:99px;padding:7px 14px;font-weight:900}.progress{right:10px;top:calc(76px + var(--safe-top));bottom:calc(24px + var(--safe-bottom));pointer-events:none;background:#0003;border-radius:8px;width:8px;position:absolute}#hud-progress{background:var(--gold);border-radius:8px;position:absolute;bottom:0;left:0;right:0}#hud-racers>div{border:2px solid #fff;border-radius:50%;width:18px;height:18px;position:absolute;left:-5px;transform:translateY(50%)}.standings{left:12px;top:calc(70px + var(--safe-top));color:#fff;pointer-events:none;background:#00000059;border-radius:12px;margin:0;padding:6px 10px 6px 28px;font-size:13px;font-weight:800;position:absolute}.standings.big{color:var(--ink);text-align:left;background:#0000000d;font-size:16px;position:static}.hint{left:50%;bottom:calc(40px + var(--safe-bottom));color:#fff;white-space:nowrap;pointer-events:none;background:#0000008c;border-radius:99px;padding:10px 18px;font-weight:800;animation:1.6s ease-in-out infinite pulse;position:fixed;transform:translate(-50%)}@keyframes pulse{50%{opacity:.6}}.countdown{pointer-events:none;color:#fff;text-shadow:0 6px #00000040;place-items:center;font-size:120px;font-weight:900;display:grid;position:fixed;inset:0}.toast{left:50%;top:calc(74px + var(--safe-top));color:#fff;opacity:0;pointer-events:none;white-space:nowrap;background:#0009;border-radius:99px;padding:8px 16px;font-weight:800;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,-12px)}.toast.show{opacity:1;transform:translate(-50%)}.loading{background:#9fd8f0d9;place-content:center;justify-items:center;font-weight:800;display:grid;position:fixed;inset:0}.spinner{border:5px solid #0000001a;border-top-color:var(--green);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.modal{background:#141e1673}.modal-card{background:var(--cream);text-align:center;border-radius:24px;flex-direction:column;gap:10px;padding:22px 20px;display:flex;box-shadow:0 10px 40px #0000004d}.modal-card h2{margin:0;font-size:30px;font-weight:900}.modal-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.modal-actions .primary{grid-column:1/-1}.stars{color:var(--gold);letter-spacing:6px;font-size:44px}.stars .off{color:#ddd5bd}.stats{grid-template-columns:1fr 1fr;gap:8px;margin:0;display:grid}.stats div{background:#0000000d;border-radius:12px;padding:8px}.stats dt{color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:800}.stats dd{font-variant-numeric:tabular-nums;margin:0;font-size:22px;font-weight:900}.stats.one{text-align:center;grid-template-columns:1fr}.list-title{color:var(--muted);text-transform:uppercase;margin:4px 0 8px;font-size:12px;font-weight:800}.leaderboard{margin:0;padding:0 0 0 30px;font-weight:800}.leaderboard li{background:var(--card);border-radius:10px;margin-bottom:4px;padding:6px 10px}.leaderboard .row{gap:10px;display:flex}.leaderboard .row span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.leaderboard .row span:last-child{font-variant-numeric:tabular-nums}