:root{--bg:#0b0e17;--panel:#101524d1;--panel-solid:#141a2c;--line:#a0b4e629;--text:#eef2ff;--muted:#9aa6c6;--accent:#2ad4c5;--accent-2:#ffc145;--danger:#ff5d7d;--radius:16px;--font:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}#app{position:fixed;inset:0}#game{touch-action:none;position:absolute;inset:0}#game canvas{display:block}[hidden]{display:none!important}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.screen{z-index:10;padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));position:absolute;inset:0;overflow-y:auto}.screen.centered{text-align:center;place-items:center;display:grid}.screen.centered,.home{grid-template-columns:minmax(0,1fr)}.screen.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#05070e8c;animation:.25s fade}#screen-loading{background:var(--bg);color:var(--muted);align-content:center;gap:12px}.card{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:22px;width:min(420px,100%);padding:24px;box-shadow:0 24px 60px #00000073}.card h2{margin:0 0 12px;font-size:24px;font-weight:900}.home{background:radial-gradient(at 50% 30%,#0b0e1759,#05060bcc);place-items:center;display:grid}.home-card{gap:18px;width:min(460px,100%);display:grid}.logo{text-align:center;letter-spacing:-1px;margin:0;font-size:clamp(40px,11vw,58px);font-weight:900;line-height:.95}.logo-a{color:var(--accent);text-shadow:0 4px #117a73}.logo-b{color:var(--accent-2);text-shadow:0 4px #a86b0c;margin-left:8px}.tagline{text-align:center;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin:-10px 0 0;font-size:12px;font-weight:700}.play-form{gap:14px;display:grid}.field{color:var(--muted);gap:6px;font-size:13px;font-weight:800;display:grid}.field input{font:inherit;color:var(--text);border:2px solid var(--line);-webkit-user-select:text;user-select:text;background:#05081099;border-radius:12px;padding:12px 14px;font-size:18px}.field input:focus{border-color:var(--accent);outline:none}.skins{border:0;margin:0;padding:0}.skins legend{color:var(--muted);padding:0 0 6px;font-size:13px;font-weight:800}.skin-list{grid-template-columns:repeat(8,1fr);gap:8px;display:grid}.skin{aspect-ratio:1;cursor:pointer;border:3px solid #0000;border-radius:50%;transition:transform .12s;box-shadow:inset 0 -4px #00000040}.skin:hover{transform:scale(1.08)}.skin[aria-checked=true]{border-color:#fff;transform:scale(1.12)}.note{text-align:center;color:var(--muted);margin:0;font-size:13px}.modes{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.mode{font:inherit;color:var(--text);border:1px solid var(--line);background:#ffffff0a;border-radius:12px;gap:2px;padding:12px 6px;display:grid}.mode strong{font-size:14px}.mode small{color:var(--muted);font-size:11px}.mode:disabled{opacity:.55;cursor:not-allowed}.home-nav{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.home-nav button{font:inherit;color:var(--muted);background:0 0;border:0;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:800}.home-nav button:disabled{opacity:.55;cursor:not-allowed}.help{color:var(--muted);font-size:14px}.help summary{cursor:pointer;text-align:center;font-weight:800}.help ul{margin:10px 0 0;padding-left:18px;line-height:1.55}.help b{color:var(--text)}.btn{font:inherit;cursor:pointer;color:var(--text);border:0;border-radius:14px;padding:12px 20px;font-size:16px;font-weight:900;transition:transform 80ms,filter .15s}.btn:active{transform:translateY(2px)}.btn.primary{background:var(--accent);color:#062a27;box-shadow:0 5px #138b82}.btn.primary:hover{filter:brightness(1.08)}.btn.big{padding:16px;font-size:20px}.btn.ghost{border:1px solid var(--line);background:#ffffff14}.btn.small{border-radius:10px;padding:8px 12px;font-size:13px}:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}.actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px;display:flex}.stats{grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 12px;display:grid}.stat{background:#ffffff0d;border-radius:12px;padding:10px}.stat dt{color:var(--muted);font-size:12px;font-weight:800}.stat dd{margin:2px 0 0;font-size:22px;font-weight:900}.placement{color:var(--accent-2);margin:-4px 0 14px;font-weight:800}.hud{z-index:5;pointer-events:none;position:absolute;inset:0}.hud button{pointer-events:auto}.hud-stats{top:calc(12px + var(--safe-top));gap:6px;display:flex;position:absolute;left:12px}.hud-stats div{background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:64px;padding:6px 12px}.hud-stats small{color:var(--muted);font-size:11px;font-weight:800;display:block}.hud-stats b{font-variant-numeric:tabular-nums;font-size:20px;font-weight:900}.hud-center{top:calc(12px + var(--safe-top));justify-items:center;gap:4px;display:grid;position:absolute;left:50%;transform:translate(-50%)}.timer{font-variant-numeric:tabular-nums;text-shadow:0 2px 6px #0009;font-size:26px;font-weight:900}.timer.low{color:var(--danger)}.badge{color:var(--muted);background:var(--panel);border:1px solid var(--line);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:12px;font-weight:800;display:inline-flex}.badge i{background:var(--accent-2);border-radius:50%;width:8px;height:8px}.badge[data-status=online] i{background:#4ade80}.badge[data-status=reconnecting] i,.badge[data-status=connecting] i{background:var(--accent-2);animation:.8s ease-in-out infinite alternate blink}.badge[data-status=disconnected] i{background:var(--danger)}.net-banner{z-index:20;top:calc(64px + var(--safe-top));border:1px solid var(--accent-2);color:#ffe3a6;white-space:nowrap;background:#4a3410;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:800;position:absolute;left:50%;transform:translate(-50%)}@keyframes blink{0%{opacity:1}to{opacity:.3}}.board{top:calc(12px + var(--safe-top));background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:210px;padding:10px 12px;position:absolute;right:12px}.board h2{text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0 0 6px;font-size:12px}.board ol{margin:0;padding:0;font-size:14px;list-style:none}.board li{grid-template-columns:22px 1fr auto;gap:6px;padding:2px 0;display:grid}.board li.me{color:var(--accent);font-weight:900}.board li.sep{border-top:1px dashed var(--line);margin-top:3px;padding-top:4px}.board .pos{color:var(--muted)}.board .who{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.board .pts{font-variant-numeric:tabular-nums;font-weight:800}.minimap{right:12px;bottom:calc(12px + var(--safe-bottom));width:150px;height:150px;position:absolute}.leave{left:12px;bottom:calc(12px + var(--safe-bottom));position:absolute}.hint{left:50%;bottom:calc(70px + var(--safe-bottom));background:var(--panel);border:1px solid var(--line);white-space:nowrap;border-radius:999px;margin:0;padding:8px 16px;font-size:14px;font-weight:800;animation:.4s fade;position:absolute;transform:translate(-50%)}.boost-btn{right:24px;bottom:calc(180px + var(--safe-bottom));width:92px;height:92px;font:inherit;letter-spacing:1px;color:#3a2300;background:var(--accent-2);touch-action:none;opacity:.9;border:4px solid #ffffff59;border-radius:50%;font-size:15px;font-weight:900;display:none;position:absolute;box-shadow:0 6px #a86b0c,0 10px 24px #0006}.boost-btn.active{transform:translateY(4px)scale(.96);box-shadow:0 2px #a86b0c}.joystick{z-index:6;pointer-events:none;background:#ffffff0f;border:2px solid #ffffff2e;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;position:absolute}.joystick-knob{background:#ffffff4d;border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%}@media (pointer:coarse){.boost-btn{display:block}.hint{display:none}}@media (max-width:640px){.board{width:150px;padding:8px 10px}.board ol{font-size:12px}.board li:nth-child(n+6):not(.me){display:none}.hud-stats div{min-width:0;padding:4px 8px}.hud-stats b{font-size:16px}.hud-center{top:auto;bottom:calc(14px + var(--safe-bottom))}.timer{font-size:20px}.badge{padding:2px 8px;font-size:11px}.hud-center{gap:2px}.minimap{width:110px;height:110px}.hint{white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 150px);left:12px;bottom:calc(60px + var(--safe-bottom));transform:none}.boost-btn{bottom:calc(136px + var(--safe-bottom));width:80px;height:80px}.card{padding:18px}.modes{grid-template-columns:1fr}.mode{text-align:left;grid-template-columns:1fr auto;align-items:center;padding:10px 12px}.skin-list{grid-template-columns:repeat(4,1fr)}}@media (max-height:500px){.board{width:170px;padding:6px 10px}.board h2{margin-bottom:2px}.board ol{font-size:12px}.board li{padding:1px 0}.board li:nth-child(n+6):not(.me){display:none}.minimap{width:96px;height:96px}.boost-btn{width:72px;height:72px;bottom:calc(16px + var(--safe-bottom));right:124px}.home-card{gap:10px}.home .logo{font-size:34px}.home .tagline{display:none}}.spinner{border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;justify-self:center;width:44px;height:44px;animation:.8s linear infinite spin}.card .spinner{margin:0 auto 14px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation-duration:.01ms!important}}.grow{flex:1;min-width:0}.muted{color:var(--muted);font-weight:700}.note.ok{color:#4ade80}.note.warn,p.warn{color:var(--accent-2);text-align:left}.account-box p.ok{color:#4ade80;margin:6px 0;font-size:14px}.account-bar{gap:6px;display:grid}.account-chip{border:1px solid var(--line);width:100%;color:var(--text);font:inherit;cursor:pointer;text-align:left;background:#ffffff0d;border-radius:14px;align-items:center;gap:10px;padding:8px 10px;display:flex}.account-chip:hover{border-color:#2ad4c580}.account-chip .who{flex:1;min-width:0;display:grid}.account-chip .who b{text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.account-chip .who small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;overflow:hidden}.account-bar[data-kind=offline] .who small{color:var(--accent-2)}.lvl{background:linear-gradient(160deg,#3b4bd8,#1d2470);border-radius:12px;flex:none;place-items:center;width:40px;height:40px;line-height:1;display:grid;box-shadow:inset 0 -3px #0000004d}.lvl small{color:#c8d0ff;font-size:9px;font-weight:900}.lvl b{font-size:17px;font-weight:900}.lvl.big{border-radius:16px;width:56px;height:56px}.lvl.big b{font-size:24px}.coins{color:var(--accent-2);font-variant-numeric:tabular-nums;flex:none;align-items:center;gap:6px;font-weight:900;display:inline-flex}.coins i{background:radial-gradient(circle at 35% 35%,#ffe7a3,#ffc145 45%,#b9790c);border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 2px #ffc14540}.xpbar{background:#ffffff14;border-radius:4px;height:6px;overflow:hidden}.xpbar i{background:linear-gradient(90deg, var(--accent), #8b9cff);width:0;height:100%;transition:width .4s;display:block}.daily-card{text-align:left;background:linear-gradient(120deg,#ffc14529,#ff6fa81f);border:1px solid #ffc14559;border-radius:14px;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;display:flex}.daily-card div{display:grid}.daily-card small{color:var(--muted);font-size:12px;font-weight:700}.skin.locked{opacity:.45;filter:grayscale(.4);position:relative}.skin.locked:after{content:"🔒";place-items:center;font-size:12px;display:grid;position:absolute;inset:0}.reward{color:var(--accent-2);margin:4px 0 8px;font-size:15px}.reward .muted{font-size:13px}.screen.scroll{padding-top:calc(24px + var(--safe-top));align-items:start;padding-bottom:24px;overflow-y:auto}.card.wide{text-align:left;gap:14px;width:min(560px,100%);display:grid}.card.wide h3{margin:4px 0 0;font-size:15px;font-weight:900}.card-head{align-items:center;gap:12px;display:flex}.card-head h2{flex:1;margin:0}.profile-top{align-items:center;gap:12px;display:flex}.profile-top .note{text-align:left;margin-top:4px;display:block}.inline-form{align-items:end;gap:8px;display:flex}.inline-form .btn{flex:none}.card.wide .stats{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin:0}.card.wide .stat dd{font-size:18px}.card.wide .note{text-align:left}.account-box{border:1px solid var(--line);background:#ffffff0a;border-radius:14px;gap:10px;padding:12px;display:grid}.account-box p{margin:0;font-size:14px}.account-box .actions{justify-content:flex-start;margin-top:0}.account-box .signin summary{cursor:pointer;color:var(--muted);font-size:14px;font-weight:800}.account-box .signin[open]{gap:8px;display:grid}.history{gap:6px;margin:0;padding:0;list-style:none;display:grid}.history li{background:#ffffff0a;border-radius:10px;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 10px;font-size:13px;display:grid}.history li.note{display:block}.history .when{color:var(--muted);grid-column:1/-1;font-size:11px;font-weight:700}.history b{color:var(--accent-2);white-space:nowrap}.shop-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;display:grid}.shop-item{text-align:center;background:#ffffff0d;border:2px solid #0000;border-radius:14px;justify-items:center;gap:6px;padding:12px 10px;display:grid}.shop-item.equipped{border-color:var(--accent)}.shop-item .preview{border-radius:11px;width:64px;height:22px;box-shadow:inset 0 -3px #00000040}.shop-item small{color:var(--muted);font-weight:700}.shop-item .btn{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.toast{left:50%;bottom:calc(24px + var(--safe-bottom));z-index:50;text-align:center;background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;max-width:min(92vw,440px);padding:10px 16px;font-size:14px;font-weight:800;animation:.2s fade;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #0006}@media (max-width:640px){.inline-form{flex-wrap:wrap}.inline-form .btn{width:100%}.card.wide .stats{grid-template-columns:repeat(2,1fr)}}.home-nav button{position:relative}.badge-dot{background:var(--danger);color:#fff;border-radius:9px;place-items:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:900;display:grid;position:absolute;top:-4px;right:-6px}.badge-dot[hidden]{display:none}.tutorial-banner{background:linear-gradient(120deg,#2ad4c529,#8b9cff24);border-color:#2ad4c566}.room-code{left:50%;bottom:calc(14px + var(--safe-bottom));background:var(--panel);border:1px solid var(--line);pointer-events:auto;border-radius:14px;align-items:center;gap:10px;padding:8px 12px;display:flex;position:absolute;transform:translate(-50%)}.room-code small{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:800}.room-code b{letter-spacing:3px;font-variant-numeric:tabular-nums;-webkit-user-select:text;user-select:text;font-size:20px}.tutorial-box{left:50%;top:calc(64px + var(--safe-top));background:var(--panel);pointer-events:auto;text-align:left;border:1px solid #2ad4c573;border-radius:16px;gap:6px;width:min(420px,100vw - 32px);padding:14px 16px;display:grid;position:absolute;transform:translate(-50%);box-shadow:0 16px 40px #0006}.tutorial-box small{color:var(--accent);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:900}.tutorial-box b{font-size:18px}.tutorial-box p{color:var(--muted);margin:0;font-size:14px;line-height:1.4}.tutorial-box .btn{justify-self:end}.progress-row{align-items:center;gap:12px;display:flex!important}.progress-row .grow{gap:4px;display:grid}.progress-row b{color:var(--text)}.progress-row small{font-size:12px}.progress-row.ready{outline:2px solid #ffc1458c}.progress-row .claimed{color:#4ade80;white-space:nowrap;font-weight:800}.progress-row>.muted{white-space:nowrap;flex:none}.progress-row>.btn,.progress-row>.claimed{flex:none}@media (max-width:640px){.tutorial-box{top:calc(110px + var(--safe-top))}.room-code{bottom:calc(86px + var(--safe-bottom))}}.captcha{left:50%;bottom:calc(80px + var(--safe-bottom));z-index:60;position:fixed;transform:translate(-50%)}.captcha[hidden]{display:none}