@import url(https://fonts.googleapis.com/css2?family=Exo+2:wght@500;700&family=Rajdhani:wght@500;700&display=swap);:root{--sky-1:#dff6ff;--sky-2:#8ec8ff;--ground-1:#0a8f51;--ground-2:#0b6f41;--hud-bg:rgba(8, 25, 38, 0.74);--hud-border:rgba(255, 255, 255, 0.22);--hud-text:#f7fbff;--blue:#4dc2ff;--red:#ff7355;--accent:#ffe173}*{box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}body,html{width:100%;height:100%;margin:0;overflow:hidden;font-family:'Exo 2',system-ui,sans-serif;background:#072338;color:var(--hud-text)}input,textarea{user-select:text;-webkit-user-select:text}#game{touch-action:none;display:block;width:100vw;height:100vh}#hud{position:fixed;inset:0;pointer-events:none;padding:14px;display:grid;grid-template-rows:auto 1fr auto}.scoreboard{justify-self:center;display:grid;grid-template-columns:auto auto auto;align-items:center;gap:8px;border-radius:999px;background:var(--hud-bg);border:1px solid var(--hud-border);padding:8px 14px;font-family:Rajdhani,sans-serif;font-size:24px;letter-spacing:.04em;box-shadow:0 10px 24px rgba(0,0,0,.22)}.team{min-width:58px;text-align:center;font-weight:700}.blue{color:var(--blue)}.red{color:var(--red)}.timer{min-width:90px;text-align:center;font-size:22px;color:var(--accent);font-weight:700}.info{justify-self:end;align-self:start;margin-top:12px;border-radius:14px;background:var(--hud-bg);border:1px solid var(--hud-border);padding:8px 10px;font-size:13px;color:rgba(245,251,255,.9);width:min(360px,calc(100vw - 20px));max-width:100%;line-height:1.3}.hud-menu{justify-self:start;align-self:start;margin-top:12px;border:1px solid rgba(255,255,255,.28);border-radius:11px;background:rgba(8,25,38,.76);color:rgba(245,251,255,.95);font-family:Rajdhani,sans-serif;font-size:14px;letter-spacing:.03em;padding:7px 12px;cursor:pointer;pointer-events:auto;transition:background 120ms ease,border-color 120ms ease}.hud-menu:hover{background:rgba(12,34,51,.88);border-color:rgba(255,255,255,.42)}.hud-menu.hidden{display:none}.audio-controls{position:fixed;top:max(14px,env(safe-area-inset-top));left:14px;z-index:65;color:#f5fbff;font-size:14px;background:rgba(8,25,38,.92);border:1px solid rgba(255,255,255,.28);border-radius:11px;padding:8px 12px}.audio-controls summary{cursor:pointer;min-height:24px;line-height:24px}.audio-controls label{display:flex;align-items:center;gap:8px;padding-top:8px}.audio-controls input{width:110px;min-height:32px;accent-color:#9de3ff}.audio-controls button{width:100%;margin-top:6px;min-height:36px}body.mobile-ui .audio-controls{top:max(8px,env(safe-area-inset-top));left:max(88px,calc(env(safe-area-inset-left) + 76px));padding:4px 10px}body.mobile-ui .audio-controls summary{line-height:34px}.mobile-hud-actions{position:fixed;top:112px;right:14px;display:none;gap:6px;z-index:45;pointer-events:auto}.mobile-hud-actions.hidden{display:none}.mobile-hud-btn{border:1px solid rgba(255,255,255,.26);border-radius:10px;background:rgba(8,25,38,.8);color:rgba(245,251,255,.95);font-family:Rajdhani,sans-serif;font-size:13px;letter-spacing:.03em;padding:6px 10px;min-height:32px;cursor:pointer;transition:background 120ms ease,border-color 120ms ease}.mobile-hud-btn.active{background:rgba(32,78,112,.86);border-color:rgba(150,215,255,.85)}#chatToastLayer{position:fixed;top:78px;left:50%;transform:translateX(-50%);width:min(460px,calc(100vw - 22px));display:grid;gap:7px;pointer-events:none;z-index:55}.chat-toast{opacity:0;transform:translateY(-6px);border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(8,25,38,.86);color:rgba(245,251,255,.96);padding:8px 10px;font-size:12px;line-height:1.25;box-shadow:0 8px 20px rgba(0,0,0,.26);transition:opacity 180ms ease,transform 180ms ease}.chat-toast.show{opacity:1;transform:translateY(0)}.chat-toast.hide{opacity:0;transform:translateY(-4px)}.chat-toast.blue{border-color:rgba(77,194,255,.72)}.chat-toast.red{border-color:rgba(255,115,85,.74)}.chat-toast.system{border-color:rgba(255,225,115,.56)}.friend-reminder{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:min(400px,calc(100vw - 28px));padding:12px 16px;border:1px solid rgba(255,225,115,.56);border-radius:14px;background:rgba(8,25,38,.9);box-shadow:0 8px 20px rgba(0,0,0,.26);text-align:center;font-size:13px;line-height:1.4;pointer-events:none;z-index:45}.friend-reminder strong{display:block;margin-bottom:3px;color:var(--accent);font-size:16px}@media (max-width:899px){.friend-reminder{bottom:160px}}.side-panel{position:fixed;right:14px;top:148px;width:min(360px,calc(100vw - 20px));max-height:min(78vh,620px);display:grid;grid-template-rows:minmax(120px,0.9fr) minmax(200px,1.1fr);gap:8px;pointer-events:auto;z-index:40}.side-panel.hidden{display:none}.live-roster{min-height:0;overflow:auto;border-radius:14px;background:var(--hud-bg);border:1px solid var(--hud-border);padding:8px 10px;color:rgba(245,251,255,.92);font-size:12px}.live-roster.hidden{display:none}.live-roster-title{font-family:Rajdhani,sans-serif;font-size:14px;letter-spacing:.03em;margin-bottom:6px;color:rgba(245,251,255,.96)}.live-roster-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.live-roster-item{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(245,251,255,.9)}.team-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;box-shadow:0 0 0 1px rgba(255,255,255,.22)}.team-dot.blue{background:var(--blue)}.team-dot.red{background:var(--red)}.team-dot.spectator{background:rgba(225,235,245,.55)}.player-number{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;color:rgba(247,251,255,.95);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);margin-right:6px}.chat-box{min-height:0;border-radius:14px;background:var(--hud-bg);border:1px solid var(--hud-border);box-shadow:0 10px 24px rgba(0,0,0,.24);display:grid;grid-template-rows:auto 1fr auto;pointer-events:auto;overflow:hidden}.chat-title{font-family:Rajdhani,sans-serif;font-size:14px;letter-spacing:.03em;padding:8px 10px 6px;color:rgba(247,251,255,.96);border-bottom:1px solid rgba(255,255,255,.12)}.chat-messages{margin:0;padding:8px 10px;list-style:none;overflow:auto;display:grid;gap:6px;align-content:start;font-size:12px;color:rgba(237,246,255,.93);touch-action:auto;user-select:text}.chat-item{line-height:1.3;word-break:break-word}.chat-item.system{color:rgba(221,236,249,.86);font-style:italic}.chat-meta{opacity:.78;margin-right:6px;white-space:nowrap}.chat-system{opacity:.95}.chat-author{font-weight:700;margin-right:4px}.chat-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;box-shadow:0 0 0 1px rgba(255,255,255,.2);transform:translateY(1px)}.chat-dot.blue{background:var(--blue)}.chat-dot.red{background:var(--red)}.chat-dot.spectator{background:rgba(225,235,245,.55)}.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 10px 10px;border-top:1px solid rgba(255,255,255,.1);background:rgba(4,14,22,.36)}.chat-form input{min-width:0;border-radius:9px;border:1px solid rgba(255,255,255,.26);background:rgba(9,21,33,.72);color:#eef7ff;padding:7px 10px;font-size:13px;outline:0;touch-action:auto;user-select:text}.chat-form input:focus{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 2px rgba(120,180,255,.18)}.chat-form button{border:0;border-radius:9px;padding:7px 10px;font-size:12px;font-weight:700;cursor:pointer;background:linear-gradient(140deg,#ffe173,#ffbe58);color:#2f1a00}.chat-empty{opacity:.72;padding:3px 0}#overlay{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(150deg,rgba(6,16,25,.8),rgba(7,20,33,.6));backdrop-filter:blur(3px);transition:opacity .25s ease}#overlay.hidden{opacity:0;pointer-events:none;visibility:hidden}.panel{width:min(520px,92vw);border-radius:24px;background:rgba(9,21,33,.82);border:1px solid var(--hud-border);box-shadow:0 20px 48px rgba(0,0,0,.35);padding:26px 24px}.panel h1{margin:0;font-family:Rajdhani,sans-serif;letter-spacing:.04em;font-size:clamp(34px, 6vw, 50px)}.panel p{margin:8px 0 14px;line-height:1.45;color:rgba(247,251,255,.9)}.panel-content{display:grid;gap:10px;max-height:min(50vh,470px);overflow:auto;padding-right:3px;margin-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.match-list,.roster-columns{display:grid;gap:8px}.match-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.04)}.match-title{font-size:14px;font-weight:700;color:rgba(247,251,255,.96)}.match-meta,.small-note{font-size:12px;color:rgba(247,251,255,.78)}.input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.input-group{display:grid;gap:4px}.input-caption{font-size:12px;color:rgba(247,251,255,.82);letter-spacing:.02em}.input-grid input,.input-grid select{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(5,14,24,.7);color:#f7fbff;padding:8px 10px;font-size:14px;font-family:'Exo 2',system-ui,sans-serif}.inline-actions{display:flex;flex-wrap:wrap;gap:8px}.inline-actions button{font-size:16px;min-height:36px;padding:8px 14px;border-radius:12px}.inline-actions .secondary{background:rgba(255,255,255,.12);color:#f7fbff;border:1px solid rgba(255,255,255,.22)}.inline-actions .secondary:hover{background:rgba(255,255,255,.18)}.inline-actions .secondary:active{background:rgba(255,255,255,.1)}.roster-columns{grid-template-columns:repeat(3,minmax(0,1fr))}.roster-box{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px;background:rgba(255,255,255,.03)}.roster-box h3{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:rgba(247,251,255,.94)}.roster-box ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:rgba(247,251,255,.86)}.owner-badge{color:var(--accent);font-size:11px;margin-left:4px}.tag{padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:13px;color:rgba(247,251,255,.95);background:rgba(255,255,255,.05)}button{appearance:none;border:1px solid rgba(8,36,28,.24);border-radius:999px;padding:12px 20px;font-family:Rajdhani,sans-serif;font-size:20px;font-weight:700;letter-spacing:.04em;cursor:pointer;color:#08241c;background:#7fffc8;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease;pointer-events:auto}button:hover{background:#93ffd2}button:active{background:#73f2bd}button:focus-visible{outline:2px solid rgba(255,225,115,.92);outline-offset:2px}#touch{position:fixed;inset:auto 0 0 0;padding:14px;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-end}.touch-joystick{pointer-events:auto;width:132px;height:132px;position:relative;touch-action:none;opacity:.9}.touch-joystick-base{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.34);background:radial-gradient(circle at 40% 35%,rgba(48,88,122,.62),rgba(10,24,38,.68));box-shadow:inset 0 2px 18px rgba(0,0,0,.24)}.touch-joystick-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.38);background:radial-gradient(circle at 30% 28%,rgba(232,246,255,.82),rgba(95,135,165,.76));box-shadow:0 4px 14px rgba(0,0,0,.25)}#touch{display:none;z-index:30}#rotatePrompt[hidden]{display:none}#rotatePrompt{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:32px;text-align:center;background:radial-gradient(ellipse at top,#164b60,#071c2d 75%)}.rotate-card{max-width:320px}.rotate-phone{width:94px;height:52px;margin:0 auto 28px;border:3px solid #7fffc8;border-radius:12px;display:grid;place-items:center;font-size:30px;box-shadow:0 0 40px #7fffc820}.rotate-card h2{font-size:26px;margin:0 0 12px}.rotate-card p{opacity:.8;line-height:1.5}.touch-look-joystick .touch-joystick-base{border-color:#ffe17388}.touch-right-controls{display:flex;align-items:flex-end;gap:16px}.touch-kick-pad{width:clamp(72px,22vh,88px);height:clamp(72px,22vh,88px);margin-bottom:12px;padding:0;touch-action:none;border:1px solid #ffe173aa;color:#302307;font-size:19px;background:radial-gradient(circle at 35% 30%,#ffe99b,#c49c3d)}.touch-kick-pad.active{background:#fff0b0;transform:scale(.96)}.joystick-caption{position:absolute;top:-27px;left:-12px;right:-12px;text-align:center;font-size:10px;white-space:nowrap;color:#e4f8ff;text-shadow:0 1px 4px #000;pointer-events:none}.touch-joystick.sprinting .touch-joystick-base{border:2px solid #7fffc8}.touch-energy{position:absolute;bottom:-10px;left:20%;width:60%;height:4px;border-radius:4px;background:#ffffff35;overflow:hidden}.touch-energy-fill{height:100%;background:#7fffc8;transform-origin:left}body.mobile-ui #hud{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}body.mobile-ui .scoreboard{font-size:22px;padding:4px 12px;gap:4px}body.mobile-ui .team{min-width:32px}body.mobile-ui .timer{min-width:65px;font-size:20px}body.mobile-ui .hud-menu{position:fixed;left:max(12px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));margin:0;min-height:44px}body.mobile-ui .mobile-hud-actions{display:flex;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}body.mobile-ui .mobile-hud-actions.hidden{display:none}body.mobile-ui .mobile-hud-btn{min-height:44px;min-width:48px;font-size:14px}body.mobile-ui .info{display:none}body.mobile-ui.touch-playing #touch{display:flex;padding:0 max(28px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left))}body.mobile-ui .touch-joystick{width:clamp(112px,30vh,148px);height:clamp(112px,30vh,148px)}body.mobile-ui #overlay{z-index:60;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))}body.mobile-ui .panel{width:min(780px,100%);max-height:calc(100dvh - 20px);overflow-y:auto;padding:14px 18px;border-radius:18px}body.mobile-ui .panel h1{font-size:28px}body.mobile-ui .panel p{margin:4px 0 10px;font-size:13px}body.mobile-ui .panel-content{max-height:none;overflow:visible}body.mobile-ui .panel,body.mobile-ui .panel *,body.mobile-ui .side-panel,body.mobile-ui .side-panel *{touch-action:pan-y}body.mobile-ui input,body.mobile-ui select{font-size:16px;min-height:44px}body.mobile-ui .inline-actions button{min-height:44px}body.mobile-ui .side-panel{left:auto;right:max(12px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 52px);width:min(360px,60vw);max-height:calc(100dvh - 76px);grid-template-rows:minmax(0,1fr)}body.mobile-ui .side-panel.mobile-chat-mode .live-roster,body.mobile-ui .side-panel.mobile-roster-mode .chat-box{display:none}body.mobile-ui .side-panel .chat-box,body.mobile-ui .side-panel .live-roster{min-height:0;max-height:calc(100dvh - 76px)}body.mobile-ui #chatToastLayer{top:56px;width:min(400px,55vw)}body.mobile-ui .friend-reminder{bottom:14px;width:min(300px,34vw);font-size:11px;padding:8px}body.mobile-ui .friend-reminder strong{font-size:13px}