*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{width:100%;height:100%}body{width:100%;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(ellipse 140% 90% at 50% 50%,#0d2a1a,#071520 45%,#050c14)}canvas{display:block;touch-action:none;-webkit-user-select:none;user-select:none;image-rendering:auto}.chat-panel{font-family:var(--font);color:var(--white);pointer-events:auto}.chat-panel--block{margin:14px 0 4px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#0a0a1a9e;overflow:hidden}.chat-panel--embedded{border-top:1px solid rgba(255,255,255,.08);padding-top:8px}.chat-panel--hud{width:min(260px,62vw);border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#0a0a1ac7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden;box-shadow:0 8px 28px #00000038}.chat-panel--hud.chat-panel--closed{width:44px;height:44px;border-radius:50%;background:transparent;border:0;box-shadow:none;overflow:visible}.chat-panel__head{width:100%;min-height:34px;border:0;background:#ffffff0a;color:var(--dim);display:flex;align-items:center;gap:8px;padding:8px 10px;font-family:var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent}.chat-panel__icon{display:none}.chat-panel--hud .chat-panel__head{min-height:36px;padding:8px 10px}.chat-panel--hud.chat-panel--closed .chat-panel__head{position:relative;width:44px;height:44px;min-height:44px;border-radius:50%;padding:0;justify-content:center;border:1px solid rgba(255,255,255,.12);background:#0a0a1abf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.chat-panel--hud.chat-panel--closed .chat-panel__icon{display:block;font-size:22px;line-height:1}.chat-panel--hud.chat-panel--closed .chat-panel__title,.chat-panel--hud.chat-panel--closed .chat-panel__chev{display:none}.chat-panel--hud.chat-panel--closed .chat-panel__unread{position:absolute;top:-4px;right:-4px}.chat-panel__title{flex:1;font-size:11px;font-weight:800;letter-spacing:1px;text-align:left}.chat-panel__unread{min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}.chat-panel__chev{color:var(--muted);font-size:15px;line-height:1}.chat-panel__body{padding:8px}.chat-panel__messages{height:116px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:5px;padding-right:2px}.chat-panel--hud .chat-panel__messages{height:126px}.chat-panel__empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--vmuted);font-size:12px}.chat-panel__msg{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:baseline;font-size:12px;line-height:1.25}.chat-panel__msg--mine .chat-panel__name{color:var(--success)}.chat-panel__name{color:var(--accent);font-weight:800;white-space:nowrap}.chat-panel__text{color:#f0f4f8db;overflow-wrap:anywhere}.chat-panel__input-row{display:flex;gap:6px;margin-top:8px}.chat-panel__input{min-width:0;flex:1;height:34px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#00000038;color:var(--white);padding:0 9px;font:13px var(--font);outline:none}.chat-panel__input:focus{border-color:#4d7fffa6}.chat-panel__input::placeholder{color:var(--vmuted)}.chat-panel__send{width:58px;height:34px;border:0;border-radius:8px;background:var(--accent);color:#fff;font:800 10px var(--font);letter-spacing:.8px;cursor:pointer;-webkit-tap-highlight-color:transparent}.chat-panel__send:disabled{opacity:.35;cursor:default}@media (orientation: landscape) and (max-height: 500px){.chat-panel__messages,.chat-panel--hud .chat-panel__messages{height:82px}}.room-page{background:repeating-linear-gradient(90deg,#16653426 0,#16653426 84px,#0d4e2b29 84px,#0d4e2b29 168px),radial-gradient(circle at 72% 16%,rgba(77,127,255,.22),transparent 34%),radial-gradient(circle at 18% 84%,rgba(52,211,153,.18),transparent 34%),linear-gradient(180deg,#07121f,#07131a 52%,#081f19)}.room-field-lines{position:absolute;top:16px;right:16px;bottom:16px;left:16px;border:1px solid rgba(255,255,255,.08);pointer-events:none;opacity:.65}.room-field-lines:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:#ffffff1f}.room-field-lines:after{content:"";position:absolute;width:142px;height:142px;left:calc(50% - 71px);top:calc(50% - 71px);border:1px solid rgba(255,255,255,.12);border-radius:50%}.room-shell{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:max(12px,calc(var(--safe-top) + 8px)) 5% calc(14px + var(--safe-bottom))}.room-topbar{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;flex-shrink:0}.room-leave-btn{width:42px;height:42px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#0000003d;color:var(--dim);font:900 22px var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent}.room-title-wrap{min-width:0}.room-kicker{color:#e2e8f09e;font-size:10px;font-weight:900;letter-spacing:1.6px}.room-title{margin:2px 0 0;color:var(--white);font-size:clamp(20px,4vw,34px);font-weight:950;line-height:1;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-top-badges{display:flex;gap:6px;align-items:center;justify-content:flex-end;min-width:0}.room-mode-badge,.room-private-badge{height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:0 10px;font-size:11px;font-weight:900;letter-spacing:0;white-space:nowrap}.room-mode-badge{background:#4d7fff29;border:1px solid rgba(77,127,255,.24);color:#9cc1ff}.room-private-badge{background:#fbbf2424;border:1px solid rgba(251,191,36,.22);color:var(--warning)}.room-match-status{min-height:82px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(130px,.55fr);align-items:center;gap:14px;flex-shrink:0;padding:13px 16px;border-radius:20px;border:1px solid rgba(125,211,252,.16);background:radial-gradient(circle at 18% 20%,rgba(77,127,255,.18),transparent 36%),linear-gradient(135deg,#0f172ac2,#060f1bb3);box-shadow:0 14px 36px #00000047}.room-match-status.is-countdown{border-color:#fbbf2447;box-shadow:0 14px 36px #00000047,0 0 26px #fbbf241a}.room-match-status.is-live{border-color:#34d39947;box-shadow:0 14px 36px #00000047,0 0 26px #34d3991a}.room-status-copy{min-width:0}.room-status-label{color:var(--white);font-size:clamp(20px,4vw,36px);font-weight:950;line-height:1;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-status-sub{color:#e2e8f0ad;font-size:12px;font-weight:750;margin-top:5px}.room-player-count{width:76px;height:76px;border-radius:22px;display:flex;align-items:baseline;justify-content:center;background:#00000042;border:1px solid rgba(255,255,255,.1);color:var(--white)}.room-player-count span{font-size:36px;font-weight:950;line-height:1.9}.room-player-count small{color:var(--muted);font-size:14px;font-weight:900}.room-status-note{color:var(--muted);font-size:11px;font-weight:750;line-height:1.25;text-align:right}.room-teams{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}.room-team{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;padding:13px;border-radius:20px;background:#00000047;border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 34px #00000042}.room-team--a{border-color:#14b8a638;background:linear-gradient(180deg,#14b8a61f,#00000040)}.room-team--b{border-color:#ef444438;background:linear-gradient(180deg,#ef44441f,#00000040)}.room-team-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}.room-team-name{color:var(--white);font-size:clamp(18px,3vw,28px);font-weight:950;line-height:1;letter-spacing:0}.room-team-count{color:var(--muted);font-size:11px;font-weight:850;margin-top:4px}.room-team-score{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#ffffff12;color:#f0f4f8e0;font-size:20px;font-weight:950}.room-team-players{min-height:0;flex:1;display:flex;flex-direction:column;gap:7px;overflow-y:auto;-webkit-overflow-scrolling:touch}.room-player{min-height:44px;display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;border-radius:14px;background:#ffffff0b;border:1px solid rgba(255,255,255,.055)}.room-player--me{background:#4d7fff29;border-color:#4d7fff47;box-shadow:0 0 18px #4d7fff1a}.room-player-name,.room-empty-name{min-width:0;flex:1;color:var(--bright);font-size:13px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-player-you{height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:0 8px;flex-shrink:0;color:var(--white);background:#4d7fff3d;font-size:9px;font-weight:950}.room-player--empty{opacity:.58;border-style:dashed}.room-empty-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#ffffff14,#ffffff06);border:1px dashed rgba(255,255,255,.16)}.room-empty-name{color:var(--muted)}.room-team-btn{min-height:48px;width:100%;border:0;border-radius:15px;color:var(--white);font:950 13px var(--font);letter-spacing:0;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0}.room-team-btn--a{background:linear-gradient(135deg,#14b8a6f2,#4d7fffad)}.room-team-btn--b{background:linear-gradient(135deg,#ef4444f0,#fbbf2494)}.room-team-btn--joined{opacity:.62;cursor:default}.room-vs{width:48px;align-self:center;display:flex;align-items:center;justify-content:center;color:#f0f4f8c2;font-size:14px;font-weight:950;letter-spacing:0;text-shadow:0 0 18px rgba(77,230,255,.22)}@media (orientation: landscape) and (max-height: 500px){.room-shell{gap:7px;padding:max(8px,calc(var(--safe-top) + 5px)) 4% calc(8px + var(--safe-bottom))}.room-topbar{grid-template-columns:38px minmax(0,1fr) auto}.room-leave-btn{width:36px;height:36px;border-radius:12px}.room-kicker{display:none}.room-title{font-size:19px}.room-match-status{min-height:58px;padding:9px 12px;grid-template-columns:minmax(0,1fr) auto}.room-status-note{display:none}.room-status-label{font-size:20px}.room-status-sub{font-size:11px;margin-top:3px}.room-player-count{width:58px;height:48px;border-radius:16px}.room-player-count span{font-size:28px;line-height:1.6}.room-teams{gap:8px}.room-team{padding:9px;gap:7px;border-radius:16px}.room-team-name{font-size:18px}.room-team-score{width:34px;height:34px;border-radius:11px;font-size:17px}.room-team-players{gap:5px}.room-player{min-height:36px;padding:4px 7px}.room-player-name,.room-empty-name{font-size:12px}.room-empty-avatar{width:28px;height:28px}.room-team-btn{min-height:38px;border-radius:12px}.room-vs{width:34px}}@media (max-width: 620px),(orientation: portrait){.room-shell{overflow-y:auto;-webkit-overflow-scrolling:touch}.room-topbar{grid-template-columns:42px minmax(0,1fr)}.room-top-badges{grid-column:1 / -1;justify-content:flex-start}.room-match-status{grid-template-columns:minmax(0,1fr) auto}.room-status-note{grid-column:1 / -1;text-align:left}.room-teams{grid-template-columns:1fr}.room-vs{width:100%;min-height:26px}}.hud-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;font-family:var(--font);user-select:none;-webkit-user-select:none}.hud-scorebar{position:absolute;top:max(8px,calc(env(safe-area-inset-top,0px) + 4px));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;background:#0a0a1ad1;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.hud-score-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.hud-score-value{font-size:clamp(18px,4vw,28px);font-weight:800;color:#fff;min-width:24px;text-align:center;line-height:1}.hud-timer{font-size:clamp(12px,2.4vw,16px);font-weight:600;color:#fff9;letter-spacing:1px;min-width:40px;text-align:center}.hud-timer--low{color:var(--danger, #ef4444);animation:hud-timer-pulse 1s ease-in-out infinite}.hud-timer--golden{color:#ffd166}@keyframes hud-timer-pulse{0%,to{opacity:1}50%{opacity:.4}}.hud-phase-pill{position:absolute;top:max(48px,calc(env(safe-area-inset-top,0px) + 42px));left:50%;transform:translate(-50%);padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#0a0a1abd;color:#ffffffdb;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:hud-phase-in .22s ease-out}.hud-phase-pill--golden_goal{color:#ffd166;border-color:#ffd16673;box-shadow:0 0 18px #ffd1662e}.hud-phase-pill--extra_time{color:#7dd3fc;border-color:#7dd3fc61}@keyframes hud-phase-in{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.hud-spectator-pill{position:absolute;top:max(48px,calc(env(safe-area-inset-top,0px) + 42px));left:50%;transform:translate(-50%);padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#0a0a1ab8;color:#ffffffc7;font-size:10px;font-weight:800;letter-spacing:1px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.hud-spectator-pill--stacked{top:max(76px,calc(env(safe-area-inset-top,0px) + 70px))}.hud-events{position:absolute;top:max(54px,calc(env(safe-area-inset-top,0px) + 48px));right:max(8px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:4px;max-width:160px}.hud-event{font-size:clamp(10px,1.8vw,13px);font-weight:600;padding:3px 10px;border-radius:6px;background:#0a0a1abf;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;animation:hud-event-in .25s ease-out;color:#ffffffbf}.hud-name--ally{color:#5cb8ff;font-weight:700}.hud-name--enemy{color:#ff6b6b;font-weight:700}@keyframes hud-event-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.hud-countdown{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a0a1a80}.hud-countdown-number{font-size:clamp(48px,14vw,96px);font-weight:900;color:#fff;text-shadow:0 0 30px rgba(77,127,255,.5);animation:hud-countdown-pop .4s ease-out}.hud-side-switch{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0a0a1a75}.hud-side-switch-title{max-width:min(84vw,420px);padding:7px 14px;border-radius:999px;border:1px solid rgba(125,211,252,.36);background:#0a0a1ab8;color:#7dd3fc;font-size:clamp(13px,2.5vw,18px);font-weight:900;letter-spacing:1px;line-height:1.1;text-align:center;text-transform:uppercase;text-shadow:0 0 18px rgba(125,211,252,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:hud-phase-in .22s ease-out}.hud-side-switch-number{font-size:clamp(50px,14vw,100px);font-weight:900;color:#fff;line-height:.9;text-shadow:0 0 30px rgba(125,211,252,.45);animation:hud-countdown-pop .4s ease-out}@keyframes hud-countdown-pop{0%{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}.hud-emote-panel{position:absolute;bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 8px));right:max(12px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto;z-index:12;touch-action:none}.hud-social-row{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px}.hud-emote-choices{display:flex;flex-direction:column;gap:6px;animation:hud-emote-expand .2s ease-out}@keyframes hud-emote-expand{0%{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.hud-emote-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:#0a0a1ab3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:transform .1s,background .15s;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}.hud-emote-btn:active{transform:scale(.85);background:#4d7fff4d}.hud-emote-btn.cooldown{opacity:.35;pointer-events:none}.hud-emote-toggle{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#0a0a1abf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}.hud-emote-toggle:active{transform:scale(.88)}.hud-emote-toggle.open{background:#4d7fff33;border-color:#4d7fff59}.hud-emote-toggle.cooldown{opacity:.35;pointer-events:none}.hud-goal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50;opacity:0;visibility:hidden;will-change:opacity}.hud-goal-overlay--active{visibility:visible;animation:hud-goal-fade 2.8s ease-out forwards}@keyframes hud-goal-fade{0%{opacity:1}75%{opacity:1}to{opacity:0}}.hud-goal-banner{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 60%,transparent 100%);opacity:0}.hud-goal-overlay--active .hud-goal-banner{animation:hud-goal-banner-in .3s ease-out forwards}@keyframes hud-goal-banner-in{0%{opacity:0}to{opacity:1}}.hud-goal-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.hud-goal-text{font-size:clamp(48px,16vw,100px);font-weight:900;letter-spacing:6px;text-transform:uppercase;line-height:1;opacity:0;color:#ff4757;text-shadow:0 0 20px rgba(255,71,87,.8),0 0 60px rgba(255,71,87,.4),0 2px 4px rgba(0,0,0,.6)}.hud-goal-overlay--local .hud-goal-text{color:gold;text-shadow:0 0 20px rgba(255,215,0,.8),0 0 60px rgba(255,215,0,.4),0 2px 4px rgba(0,0,0,.6)}.hud-goal-overlay--active .hud-goal-text{animation:hud-goal-pop .5s cubic-bezier(.22,1.2,.36,1) .15s both}@keyframes hud-goal-pop{0%{transform:scale(2.5);opacity:0}60%{transform:scale(.9);opacity:1}to{transform:scale(1);opacity:1}}.hud-goal-scorer{font-size:clamp(14px,4vw,22px);font-weight:700;color:#ffffffd9;letter-spacing:2px;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.5);opacity:0}.hud-goal-overlay--active .hud-goal-scorer{animation:hud-goal-scorer-in .4s ease-out .4s both}@keyframes hud-goal-scorer-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (orientation: landscape) and (max-height: 500px){.hud-scorebar{padding:4px 14px;gap:8px}.hud-events{top:max(42px,calc(env(safe-area-inset-top,0px) + 38px))}}.action-buttons-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:30}.action-btn{position:absolute;pointer-events:auto;border-radius:50%;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer;transition:transform .1s ease,box-shadow .15s ease}.action-btn:active{transform:scale(.9)}.action-btn--pass{background:radial-gradient(circle at 40% 38%,#4db4ff73,#3278dc40);border:2px solid rgba(100,180,255,.5);box-shadow:0 0 12px #4d96ff33,inset 0 1px 3px #ffffff1a;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.action-btn--pass:active{background:radial-gradient(circle at 40% 38%,#4db4ff99,#3278dc66);box-shadow:0 0 18px #4d96ff66,inset 0 1px 3px #ffffff26}.action-btn--pass.charging{animation:pass-pulse .4s ease-in-out infinite alternate}@keyframes pass-pulse{0%{box-shadow:0 0 12px #4d96ff4d,inset 0 1px 3px #ffffff1a}to{box-shadow:0 0 22px #3c8cff99,0 0 40px #50aaff2e,inset 0 1px 3px #ffffff26}}.action-btn--shoot{background:radial-gradient(circle at 40% 38%,#ff5a4673,#dc323240);border:2px solid rgba(255,100,80,.5);box-shadow:0 0 12px #ff503c33,inset 0 1px 3px #ffffff1a;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.action-btn--shoot:active{background:radial-gradient(circle at 40% 38%,#ff5a4699,#dc323266);box-shadow:0 0 18px #ff503c66,inset 0 1px 3px #ffffff26}.action-btn--shoot.charging{animation:shoot-pulse .4s ease-in-out infinite alternate}@keyframes shoot-pulse{0%{box-shadow:0 0 12px #ff503c4d,inset 0 1px 3px #ffffff1a}to{box-shadow:0 0 22px #ff3c2899,0 0 40px #ff503c26,inset 0 1px 3px #ffffff26}}.action-btn-charge-ring{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);pointer-events:none}.action-btn-label{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#ffffffd9;text-shadow:0 1px 3px rgba(0,0,0,.4);pointer-events:none;z-index:1}.ce-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:linear-gradient(160deg,#071a0e,#0a2a14,#081512);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}.ce-field{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ce-field-center-line{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#ffffff0d}.ce-field-center-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;border:1px solid rgba(255,255,255,.05)}.ce-header{position:absolute;top:max(16px,env(safe-area-inset-top,16px));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}.ce-header-title{font-size:15px;font-weight:900;letter-spacing:3px;color:#ffffffe6}.ce-header-hint{font-size:11px;font-weight:500;letter-spacing:.5px;color:#ffffff4d}.ce-zone-hint{position:absolute;top:38%;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#ffffff1a;pointer-events:none}.ce-zone-hint--left{left:6%}.ce-zone-hint--right{right:6%}.ce-element{position:absolute;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;transition:transform .1s ease,box-shadow .15s ease;will-change:transform}.ce-element:active,.ce-element.dragging{cursor:grabbing;transform:scale(1.12)}.ce-joystick{background:radial-gradient(circle at 40% 38%,#4d7fff40,#1e3c961f);border:2.5px solid rgba(77,127,255,.5);box-shadow:0 0 14px #4d7fff33,inset 0 1px 3px #ffffff14}.ce-joystick.dragging{border-color:#4db4ffe6;box-shadow:0 0 22px #4d7fff80,0 0 40px #4d7fff33,inset 0 1px 3px #ffffff1f}.ce-joystick-outer{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(77,127,255,.3);display:flex;align-items:center;justify-content:center}.ce-joystick-inner{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#4db4ff80,#3278dc4d);border:1.5px solid rgba(77,180,255,.5)}.ce-btn-pass{background:radial-gradient(circle at 40% 38%,#4db4ff59,#3278dc2e);border:2.5px solid rgba(100,180,255,.55);box-shadow:0 0 14px #4d96ff33,inset 0 1px 3px #ffffff14}.ce-btn-pass.dragging{border-color:#64c8fff2;box-shadow:0 0 22px #4d96ff8c,0 0 40px #4d96ff33}.ce-btn-shoot{background:radial-gradient(circle at 40% 38%,#ff5a4659,#dc32322e);border:2.5px solid rgba(255,100,80,.55);box-shadow:0 0 14px #ff503c33,inset 0 1px 3px #ffffff14}.ce-btn-shoot.dragging{border-color:#ff7850f2;box-shadow:0 0 22px #ff503c8c,0 0 40px #ff503c33}.ce-element-label{position:absolute;bottom:-18px;left:50%;transform:translate(-50%);font-size:9px;font-weight:700;letter-spacing:1.5px;color:#fff6;white-space:nowrap;pointer-events:none}.ce-element.dragging .ce-element-label{color:#ffffffb3}.ce-footer{position:absolute;bottom:max(20px,env(safe-area-inset-bottom,20px));left:0;right:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 20px}.ce-btn-action{padding:10px 22px;border-radius:10px;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:none;transition:transform .1s ease,opacity .15s ease}.ce-btn-action:active{transform:scale(.94)}.ce-btn-reset{background:#ffffff0f;color:#fff6;border:1px solid rgba(255,255,255,.1)}.ce-btn-cancel{background:#ef44441a;color:#ef4444b3;border:1px solid rgba(239,68,68,.2)}.ce-btn-save{background:#4d7fff33;color:#82b4ff;border:1px solid rgba(77,127,255,.35);min-width:90px}.ce-btn-save:hover{background:#4d7fff47}.ob-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:linear-gradient(160deg,#071a0e,#0a2214 55%,#071510);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;animation:ob-enter .4s cubic-bezier(.2,0,0,1) both}.ob-overlay.ob-closing{animation:ob-exit .32s cubic-bezier(.4,0,1,1) both;pointer-events:none}@keyframes ob-enter{0%{opacity:0}to{opacity:1}}@keyframes ob-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}.ob-field-deco{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ob-field-v{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#ffffff0a}.ob-field-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;border:1px solid rgba(255,255,255,.04)}.ob-skip{position:absolute;top:max(18px,env(safe-area-inset-top,18px));right:20px;background:#ffffff12;border:1px solid rgba(255,255,255,.11);color:#ffffff61;font-family:var(--font, inherit);font-size:11px;font-weight:700;letter-spacing:1.5px;padding:7px 15px;border-radius:8px;cursor:pointer;z-index:2;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}.ob-skip:active{background:#ffffff24;color:#ffffffa6}.ob-slide-wrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:64px 36px 16px;overflow:hidden}.ob-slide{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:320px;animation:ob-slide-enter .38s cubic-bezier(.2,0,0,1) both}@keyframes ob-slide-enter{0%{opacity:0;transform:translate(36px) scale(.97)}to{opacity:1;transform:translate(0) scale(1)}}.ob-visual{display:flex;align-items:center;justify-content:center;height:100px;margin-bottom:28px}.ob-phone-wrap{position:relative;width:88px;height:100px;display:flex;align-items:center;justify-content:center}.ob-phone{width:38px;height:64px;border:2.5px solid rgba(255,255,255,.6);border-radius:9px;position:relative;animation:ob-phone-rotate 2.6s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center center}.ob-phone-notch{position:absolute;top:5px;left:50%;transform:translate(-50%);width:12px;height:3px;border-radius:2px;background:#ffffff4d}.ob-phone-home{position:absolute;bottom:5px;left:50%;transform:translate(-50%);width:12px;height:3px;border-radius:2px;background:#ffffff4d}@keyframes ob-phone-rotate{0%,22%{transform:rotate(0)}52%,82%{transform:rotate(-90deg)}to{transform:rotate(0)}}.ob-rotate-arrow{position:absolute;bottom:2px;right:0;font-size:30px;color:#34d399cc;line-height:1;animation:ob-arrow-pop 2.6s cubic-bezier(.4,0,.2,1) infinite}@keyframes ob-arrow-pop{0%,12%{opacity:0;transform:scale(.55) rotate(-20deg)}32%,62%{opacity:1;transform:scale(1) rotate(0)}82%,to{opacity:0;transform:scale(.75) rotate(20deg)}}.ob-controls-wrap{display:flex;align-items:center;gap:26px;animation:ob-ctrl-bob 2.8s ease-in-out infinite}@keyframes ob-ctrl-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.ob-ctrl-joystick{width:68px;height:68px;border-radius:50%;border:2.5px solid rgba(77,127,255,.52);background:radial-gradient(circle at 40% 38%,rgba(77,127,255,.18),transparent);display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px #4d7fff21}.ob-ctrl-stick{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#4db4ff80,#3278dc47);border:1.5px solid rgba(77,180,255,.48)}.ob-ctrl-btns{display:flex;flex-direction:column;gap:9px}.ob-ctrl-btn{width:58px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;letter-spacing:1.5px}.ob-ctrl-pass{border:1.5px solid rgba(100,180,255,.48);background:radial-gradient(circle at 40% 38%,#4db4ff38,#3278dc1a);color:#82c8ffcc}.ob-ctrl-shoot{border:1.5px solid rgba(255,100,80,.48);background:radial-gradient(circle at 40% 38%,#ff5a4638,#dc32321a);color:#ff9682cc}.ob-ball-wrap{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 38%,rgba(52,211,153,.1),transparent);animation:ob-glow-pulse 2.2s ease-in-out infinite}.ob-ball-emoji{font-size:58px;line-height:1;animation:ob-ball-float 2.2s ease-in-out infinite}@keyframes ob-ball-float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes ob-glow-pulse{0%,to{box-shadow:0 0 18px #34d39914}50%{box-shadow:0 0 36px #34d39938}}.ob-title{font-size:22px;font-weight:900;letter-spacing:2.5px;color:#fffffff0;margin:0 0 10px;text-transform:uppercase;line-height:1.2}.ob-body{font-size:13px;color:#ffffff6b;line-height:1.6;margin:0 0 22px;max-width:270px;letter-spacing:.2px}.ob-tap-hint{font-size:10px;color:#ffffff2e;letter-spacing:1.2px;text-transform:uppercase;margin:6px 0 0}.ob-action-btn{padding:11px 22px;border-radius:10px;background:#4d7fff21;border:1px solid rgba(77,127,255,.32);color:#73afff;font-family:var(--font, inherit);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;margin-bottom:10px;transition:background .15s,transform .1s;-webkit-tap-highlight-color:transparent}.ob-action-btn:active{transform:scale(.95);background:#4d7fff3d}.ob-play-btn{padding:14px 44px;border-radius:14px;background:linear-gradient(135deg,#34d39947,#10b9812e);border:1.5px solid rgba(52,211,153,.48);color:#5ae1aa;font-family:var(--font, inherit);font-size:17px;font-weight:900;letter-spacing:3px;text-transform:uppercase;cursor:pointer;box-shadow:0 0 22px #34d39924;transition:transform .1s,box-shadow .15s;-webkit-tap-highlight-color:transparent}.ob-play-btn:active{transform:scale(.95);box-shadow:0 0 10px #34d39914}.ob-dots{display:flex;align-items:center;gap:7px;padding-bottom:max(28px,env(safe-area-inset-bottom,28px))}.ob-dot{width:6px;height:6px;border-radius:50%;background:#ffffff2e;transition:width .28s cubic-bezier(.2,0,0,1),background .28s}.ob-dot--active{width:22px;border-radius:3px;background:#34d399b8}.ob-portrait-hint{position:absolute;bottom:max(72px,calc(env(safe-area-inset-bottom,24px) + 58px));left:50%;transform:translate(-50%);background:#fbbf2417;border:1px solid rgba(251,191,36,.2);color:#fbbf24b3;font-size:10px;font-weight:600;letter-spacing:.8px;padding:6px 14px;border-radius:8px;white-space:nowrap;pointer-events:none;animation:ob-hint-pulse 2.5s ease-in-out infinite}@keyframes ob-hint-pulse{0%,to{opacity:.7}50%{opacity:1}}@media (orientation: landscape) and (max-height: 500px){.ob-slide-wrap{padding:48px 36px 8px}.ob-visual{height:70px;margin-bottom:14px}.ob-phone{width:28px;height:46px}.ob-phone-wrap{width:68px;height:70px}.ob-ctrl-joystick{width:52px;height:52px}.ob-ctrl-stick{width:20px;height:20px}.ob-ctrl-btn{width:48px;height:24px;font-size:8px}.ob-ball-wrap{width:70px;height:70px}.ob-ball-emoji{font-size:40px}.ob-title{font-size:17px;letter-spacing:1.5px;margin-bottom:6px}.ob-body{font-size:11px;margin-bottom:14px}.ob-play-btn{padding:10px 32px;font-size:14px}.ob-action-btn{padding:8px 18px;font-size:11px}.ob-dots{padding-bottom:max(14px,env(safe-area-inset-bottom,14px))}.ob-portrait-hint{display:none}}:root{--bg: #0a0a1a;--bg-glow1: #162255;--bg-glow2: #0c1a33;--surface: rgba(17, 17, 40, .92);--surface-hi: rgba(24, 24, 64, .95);--border: #22224a;--border-hi: #2f2f66;--accent: #4d7fff;--accent-dark: #3358cc;--success: #34d399;--danger: #ef4444;--warning: #fbbf24;--gold: #ffd700;--team-a: #14b8a6;--team-a-bg: #0c2220;--team-b: #ef4444;--team-b-bg: #220c0c;--white: #f0f4f8;--bright: #e2e8f0;--dim: #94a3b8;--muted: #64748b;--vmuted: #334155;--faint: #1e293b;--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}.page{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;font-family:var(--font);color:var(--white);overflow:hidden;background:var(--bg);background-image:radial-gradient(ellipse 50% 50% at 85% 0%,rgba(22,34,85,.35),transparent),radial-gradient(ellipse 35% 40% at 10% 92%,rgba(12,26,51,.3),transparent),radial-gradient(ellipse 60% 50% at 50% 48%,rgba(22,34,85,.1),transparent)}.page-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;flex:1;padding-bottom:calc(24px + var(--safe-bottom))}.safe-top{padding-top:max(12px,var(--safe-top))}.page-header{display:flex;align-items:center;justify-content:center;padding:14px 6%;padding-top:max(14px,calc(var(--safe-top) + 10px));position:relative;flex-shrink:0}.page-header .back-btn{position:absolute;left:6%;background:none;border:none;color:var(--muted);font:14px var(--font);cursor:pointer;padding:6px 0;transition:color .15s}.page-header .back-btn:hover{color:var(--dim)}.page-header h1{font-size:16px;font-weight:700;letter-spacing:2px;margin:0}.page-header .header-right{position:absolute;right:6%}.page-subtitle{text-align:center;font-size:12px;color:var(--muted);padding-bottom:10px}.page-divider{height:1px;background:var(--border);opacity:.45;margin:0 6%;flex-shrink:0}.card{background:var(--surface);border:1px solid rgba(34,34,74,.5);border-radius:14px;position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0 0 auto 0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.025) 0%,transparent 100%);border-radius:14px 14px 0 0;pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;font-family:var(--font);font-weight:700;cursor:pointer;transition:transform .12s,opacity .12s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;inset:2px 3px auto 3px;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent);border-radius:999px 999px 0 0;pointer-events:none}.btn:active{transform:scale(.93)}.btn:disabled{opacity:.4;pointer-events:none}.btn-primary{background:var(--accent);color:var(--white)}.btn-secondary{background:var(--surface-hi);color:var(--dim)}.btn-lg{padding:14px 36px;font-size:16px;letter-spacing:3px;min-width:180px}.btn-md{padding:10px 24px;font-size:13px;letter-spacing:1px}.btn-sm{padding:8px 18px;font-size:12px;letter-spacing:1px}.btn-team-a{background:var(--team-a);color:var(--white)}.btn-team-b{background:var(--team-b);color:var(--white)}.btn-glow{box-shadow:0 0 20px #4d7fff40,0 0 40px #4d7fff1a;animation:glow-pulse 2.8s ease-in-out infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px #4d7fff2e,0 0 40px #4d7fff0f}50%{box-shadow:0 0 30px #4d7fff59,0 0 60px #4d7fff1f}}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.stat-cell{text-align:center;padding:10px 0;border-left:1px solid rgba(34,34,74,.35)}.stat-cell:first-child{border-left:none}.stat-cell .stat-value{font-size:clamp(22px,4vh,30px);font-weight:700;line-height:1.2}.stat-cell .stat-label{font-size:clamp(8px,1.3vh,10px);color:var(--muted);letter-spacing:1px;margin-top:4px}.text-accent{color:var(--accent)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.text-dim{color:var(--dim)}.text-muted{color:var(--muted)}.text-faint{color:var(--faint)}.text-center{text-align:center}.fade-in{animation:fadeIn .28s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (orientation: landscape) and (max-height: 500px){.page-header{padding-top:max(6px,var(--safe-top));padding-bottom:8px}.page-subtitle{padding-bottom:6px;font-size:11px}.stat-cell{padding:6px 0}.stat-cell .stat-value{font-size:clamp(16px,3.5vh,22px)}.stat-cell .stat-label{font-size:clamp(7px,1.2vh,9px);margin-top:2px}.card{padding:10px 12px;border-radius:10px}.btn-lg{padding:10px 28px;font-size:14px}.btn-md{padding:7px 12px;font-size:11px}.btn-sm{padding:5px 10px;font-size:10px}}