:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#eaf4ff;background:#081221;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden}body{touch-action:none}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #54f4da;outline-offset:3px}
[hidden]{display:none!important}.menu{min-height:100dvh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 20%,#21496a 0,#101d35 45%,#07101e 85%);overflow:auto}
.hero{width:100%;max-width:420px;text-align:center}.brand-icon{width:78px;height:78px;display:grid;place-items:center;margin:0 auto 20px;border-radius:25px;background:linear-gradient(145deg,#0ddbb9,#389ef0);box-shadow:0 18px 55px #06e9c544;color:white;font-size:49px}
.overline{font-size:10px;font-weight:800;letter-spacing:2.5px;color:#71e6d3}
h1{font-size:clamp(44px,13vw,68px);margin:8px 0 6px;line-height:1.03;letter-spacing:-3px;font-weight:950}h1 span{color:#62edce}
.subtitle{color:#a7bed2;line-height:1.65;max-width:320px;margin:14px auto 27px}
.entry{padding:24px;background:#ffffff0d;border:1px solid #ffffff21;border-radius:24px;box-shadow:0 16px 55px #0004;text-align:left}
.entry label{font-size:11px;font-weight:800;color:#bdd6e6;letter-spacing:1.7px;display:block;margin-bottom:10px}
.entry input{width:100%;padding:16px;border-radius:14px;border:1px solid #466079;background:#091b2f;color:white;font-size:17px;outline:none}
.entry input::placeholder{color:#7591a8}.entry .primary{width:100%;margin-top:16px;border:0;padding:17px 18px;border-radius:14px;background:linear-gradient(100deg,#43debe,#56bbff);color:#06213b;font-size:16px;font-weight:850;display:flex;justify-content:space-between}
.primary:disabled{opacity:.5}.room-details{color:#6ef0cf;font-weight:700;font-size:14px}.error{color:#ffadbb;font-size:13px;min-height:10px}.footer-note{color:#7f9cb6;font-size:12px;margin-top:24px}
.game{position:fixed;inset:0;overflow:hidden;background:#091a2b;touch-action:none}
/* Static CSS grid stays visible even when the phone suspends JavaScript. */
.arena{position:absolute;inset:0;overflow:hidden;touch-action:none;background-color:#0c1f32;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:40px 40px}
.world-stage{position:absolute;top:0;left:0;width:1800px;height:1320px;box-sizing:border-box;border:3px solid #58d0d377;background-color:#153247;background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);background-size:40px 40px;box-shadow:0 0 35px #6bd9dc15;will-change:transform}
.world-coin{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff4b6,#ffcd4e 55%,#d58f28);box-shadow:0 0 0 9px #fac84b1d,0 0 20px #facc4450;display:grid;place-items:center;color:#94611f;font-size:15px;font-weight:900;pointer-events:none}
.world-player{position:absolute;left:-17px;top:-17px;width:34px;height:34px;pointer-events:none;z-index:1}
.player-avatar{display:block;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffffff77,var(--player-color) 65%);border:2px solid #ffffff91;box-shadow:0 8px 8px #06111e91}
.world-player.is-self .player-avatar{border:3px solid #fff;box-shadow:0 0 0 4px #ffffff2b,0 8px 8px #06111e91}
.world-player.is-frozen .player-avatar{background:radial-gradient(circle at 26% 24%,#ffffff,#a6f0ff 45%,#4784d4);border:3px solid #e9ffff;box-shadow:0 0 0 6px #64daff60,0 0 16px #95eaff;filter:saturate(.7)}
.world-player.is-frozen .player-avatar::after{content:"❄";position:absolute;inset:-9px;display:grid;place-items:center;color:#e9ffff;font-size:30px;text-shadow:0 0 8px #28bfff;pointer-events:none}
.freeze-wave{position:absolute;left:17px;top:17px;width:192px;height:192px;transform:translate(-50%,-50%) scale(var(--wave-scale,0.167));border:5px solid #b8faffd9;border-radius:50%;background:radial-gradient(circle,#74e2ff08 25%,#99e8ff44 100%);box-shadow:0 0 16px #7ce5ff,0 0 25px #a4faff66 inset;z-index:-1;pointer-events:none;will-change:transform}
.player-avatar{position:relative;z-index:1}
.player-name{position:absolute;bottom:43px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#f7faff;font-size:13px;font-weight:800;text-shadow:-1px -1px 0 #071829,1px -1px 0 #071829,-1px 1px 0 #071829,1px 1px 0 #071829,0 2px 4px #071829;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;z-index:2;pointer-events:none;background:linear-gradient(#071321df,#07132100)}
.topbar>*{pointer-events:auto}.hud-title{font-size:16px;font-weight:950;white-space:nowrap;letter-spacing:-.5px}.star{color:#57f1cd;font-size:20px}
.hud-stats{margin-left:auto;display:flex;gap:6px}.hud-stats span{border:1px solid #ffffff25;border-radius:10px;padding:8px 10px;background:#122c46b8;font-size:12px;white-space:nowrap;font-weight:800}
.exit{background:#24415db9;border:1px solid #5f7b8e77;border-radius:10px;color:white;width:34px;height:34px;font-size:17px}
.leaderboard{position:absolute;right:12px;top:83px;width:min(174px,45vw);max-height:180px;overflow:hidden;padding:11px 12px;border-radius:13px;background:#0b2039c9;border:1px solid #ffffff21;backdrop-filter:blur(12px);z-index:2}
.leaderboard strong{font-size:10px;letter-spacing:1px;color:#b6d6e6}.leaderboard ol{margin:7px 0 0;padding:0;list-style:none;display:grid;gap:7px}.leaderboard li{display:flex;align-items:center;gap:5px;min-width:0;font-size:11px}.leaderboard .nick{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard .points{font-weight:900;color:#f9dd7b}.leaderboard .dot{width:8px;height:8px;border-radius:100%;flex:none}
.bottom-buttons{position:absolute;left:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;gap:10px}
.invite{padding:12px 15px;border:1px solid #73e6df80;border-radius:12px;background:#153e51df;color:#c8fff6;font-size:13px;font-weight:800}
.toast{color:#fff;font-size:12px;text-shadow:0 2px 5px black}.joystick{position:absolute;bottom:calc(85px + env(safe-area-inset-bottom));left:26px;width:126px;height:126px;border:2px solid #b5eaf959;border-radius:50%;background:#75b8e01c;z-index:4;touch-action:none;display:grid;place-items:center}
.knob{width:56px;height:56px;border-radius:100%;border:2px solid #ffffff88;background:linear-gradient(145deg,#68eac0b5,#3b9ddbbb);box-shadow:0 8px 20px #0007;transform:translate(0,0)}
.connection-message{position:absolute;top:calc(75px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:10px 14px;background:#172a3ff0;border:1px solid #edc87799;border-radius:12px;color:#ffe3a9;font-size:12px;font-weight:700;text-align:center;z-index:5;max-width:85vw;box-shadow:0 8px 20px #0005}
@media(min-width:800px){.joystick{opacity:.65}.leaderboard{width:230px;max-height:340px;padding:17px}.leaderboard li{font-size:14px}.leaderboard strong{font-size:13px}.hud-title{font-size:21px}.bottom-buttons{bottom:22px}}
@media(max-width:370px){.hud-title{font-size:12px}.hud-stats span{font-size:10px;padding:7px}.leaderboard{width:142px;top:72px}.joystick{width:110px;height:110px;left:15px;bottom:80px}}

/* Compact independent touch targets for simultaneous movement and casting. */
.ability-controls{position:absolute;right:14px;bottom:calc(100px + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;gap:10px;touch-action:none;pointer-events:none}
.ability-button{pointer-events:auto;width:78px;height:78px;border-radius:50%;border:2px solid #b9f8ffb5;color:#fff;box-shadow:0 6px 22px #24b8f455;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:opacity .15s}
.freeze-button{background:radial-gradient(circle at 32% 25%,#4ec5db,#185d9e 78%)}
.boost-button{background:radial-gradient(circle at 32% 25%,#ffd85c,#f28a36 78%);border-color:#ffe9a2;box-shadow:0 6px 22px #ffab4555}
.ability-symbol{font-size:30px;line-height:1}.ability-label{font-size:10px;font-weight:800;line-height:1.3}
.ability-button:disabled{opacity:.55;filter:grayscale(.65);cursor:not-allowed;box-shadow:none}
.frozen-notice{position:absolute;top:calc(140px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#174870dc;color:#efffff;border:1px solid #9cf3ff;border-radius:12px;padding:10px 15px;font-weight:900;font-size:14px;white-space:nowrap;z-index:5;pointer-events:none}
.world-player.is-boosting .player-avatar{box-shadow:0 0 0 5px #ffcf5c6d,0 0 24px #ffaf32;filter:brightness(1.18)}
.world-player.is-boosting .player-avatar::before{content:"⚡";position:absolute;left:-19px;top:-17px;font-size:24px;filter:drop-shadow(0 0 7px #ffce52);pointer-events:none}
@media(max-width:370px){.ability-controls{right:8px;gap:8px;bottom:calc(93px + env(safe-area-inset-bottom))}.ability-button{width:66px;height:66px}.ability-symbol{font-size:25px}.ability-label{font-size:9px}.joystick{left:12px;width:104px;height:104px}}