:root{--bg: #0b1020;--panel: rgba(13, 18, 36, .82);--panel-border: rgba(255, 255, 255, .09);--text: #f2f5fb;--text-dim: #9aa4bd;--accent: #37e08b;--accent-2: #ffd23f;--team-a: #e8354f;--team-b: #3577f6;--radius: 14px;--shadow: 0 10px 34px rgba(0, 0, 0, .45);font-size:16px}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica Neue,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#ui-root{position:absolute;inset:0;pointer-events:none}#ui-root>*{pointer-events:auto}.scoreboard{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;align-items:stretch;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(8px);font-weight:700;letter-spacing:.04em;pointer-events:none}.scoreboard .team{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:.95rem}.scoreboard .swatch{width:12px;height:12px;border-radius:3px}.scoreboard .score{padding:7px 13px;background:#ffffff14;font-variant-numeric:tabular-nums;font-size:1.15rem}.scoreboard .clock{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 12px;background:#00000059;font-variant-numeric:tabular-nums}.scoreboard .clock .time{font-size:1.02rem;color:var(--accent-2)}.scoreboard .clock .half{font-size:.6rem;color:var(--text-dim);letter-spacing:.14em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);border-radius:var(--radius);padding:10px 18px;font-size:.95rem;font-weight:700;letter-spacing:.03em;cursor:pointer;backdrop-filter:blur(8px);box-shadow:var(--shadow);transition:transform .08s ease,background .15s ease,border-color .15s ease}.btn:hover{background:#283252e6;border-color:#ffffff38}.btn:active{transform:scale(.96)}.btn.primary{background:linear-gradient(135deg,#17b866,#0e9a52);border-color:#ffffff40}.btn.primary:hover{background:linear-gradient(135deg,#1bcf74,#12aa5d)}.btn.small{padding:7px 12px;font-size:.8rem;border-radius:10px}.top-right{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;gap:8px;align-items:center}.chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--panel-border);border-radius:999px;padding:5px 11px;font-size:.72rem;font-weight:600;color:var(--text-dim);backdrop-filter:blur(8px)}.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}.chip.warn .dot{background:#ffb020}.chip.bad .dot{background:#ff4d4d}.meters{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:min(300px,42vw);display:flex;flex-direction:column;gap:5px;pointer-events:none}.meter{height:7px;border-radius:4px;background:#00000080;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.meter .fill{height:100%;width:50%;border-radius:4px;transition:width .05s linear}.meter.stamina .fill{background:linear-gradient(90deg,#37e08b,#b7f5d2)}.meter.charge .fill{background:linear-gradient(90deg,#ffd23f,#ff7a1a);width:0}.meter-label{font-size:.6rem;color:var(--text-dim);letter-spacing:.16em;text-align:center}#radar{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right));border-radius:10px;border:1px solid var(--panel-border);background:#080e1ab8;backdrop-filter:blur(6px);box-shadow:var(--shadow);pointer-events:none}.banner{position:absolute;top:22%;left:50%;transform:translate(-50%,-50%) scale(.9);font-size:clamp(2.4rem,8vw,5rem);font-weight:900;font-style:italic;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6),0 0 60px rgba(55,224,139,.35);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.2,1.6,.4,1);white-space:nowrap}.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.banner .sub{display:block;font-size:clamp(.9rem,2.6vw,1.3rem);font-style:normal;font-weight:600;letter-spacing:.28em;color:var(--text-dim);text-align:center}.toasts{position:absolute;top:70px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.toast{background:var(--panel);border:1px solid var(--panel-border);border-radius:999px;padding:8px 18px;font-size:.85rem;font-weight:600;box-shadow:var(--shadow);backdrop-filter:blur(8px);animation:toast-in .3s cubic-bezier(.2,1.4,.4,1)}@keyframes toast-in{0%{opacity:0;transform:translateY(-12px) scale(.9)}to{opacity:1;transform:none}}.toast.leaving{opacity:0;transition:opacity .4s ease}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#050812a8;backdrop-filter:blur(10px);z-index:30;animation:fade-in .25s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.panel{width:min(430px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow-y:auto;background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;padding:26px;box-shadow:var(--shadow)}.panel h1{font-size:2.3rem;font-weight:900;font-style:italic;letter-spacing:.05em;background:linear-gradient(135deg,#fff,#37e08b);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:2px}.panel .tagline{color:var(--text-dim);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px}.panel h2{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin:18px 0 8px}.menu-buttons{display:flex;flex-direction:column;gap:10px}.menu-buttons .btn{width:100%;padding:13px;font-size:1rem}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;border:1px solid var(--panel-border);background:#ffffff0a;color:var(--text-dim);border-radius:10px;padding:8px 10px;font-weight:700;font-size:.82rem;cursor:pointer;min-width:60px}.seg button.active{background:#37e08b2e;border-color:var(--accent);color:#d9ffe9}.howto{font-size:.86rem;color:var(--text-dim);line-height:1.65}.howto b{color:var(--text)}.kbd{display:inline-block;background:#ffffff1a;border:1px solid rgba(255,255,255,.16);border-bottom-width:2px;border-radius:5px;padding:0 7px;font-size:.78rem;font-weight:700;color:var(--text)}.share-row{display:flex;gap:8px;margin-top:8px}.share-code{flex:1;background:#0006;border:1px dashed rgba(255,255,255,.25);border-radius:10px;padding:10px;text-align:center;font-family:ui-monospace,monospace;font-size:1rem;letter-spacing:.1em;color:var(--accent-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.touch-zone{position:absolute;inset:0;display:none}body.touch .touch-zone{display:block}#joystick{position:absolute;width:130px;height:130px;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:#ffffff0d;display:none}#joystick .nub{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:#ffffff59;transform:translate(-50%,-50%)}.touch-buttons{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 60px);display:flex;flex-direction:column;gap:14px;align-items:flex-end}.tbtn{width:66px;height:66px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:#0d122499;color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.06em;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;touch-action:none}.tbtn:active,.tbtn.down{background:#37e08b66;border-color:var(--accent)}.tbtn.shoot{width:78px;height:78px;background:#501e1e8c}.tbtn.shoot:active,.tbtn.shoot.down{background:#ff7a1a80;border-color:var(--accent-2)}body.touch #radar{display:none}body.touch .meters{width:34vw;left:auto;right:max(18px,env(safe-area-inset-right));transform:none;bottom:max(10px,env(safe-area-inset-bottom))}.panel.welcome{text-align:left}.wsteps{display:flex;flex-direction:column;gap:14px;margin-top:16px}.wstep{display:flex;gap:14px;align-items:center;background:#ffffff0b;border:1px solid var(--panel-border);border-radius:14px;padding:12px 14px;font-size:.88rem;color:var(--text-dim);line-height:1.5}.wstep b{color:var(--text)}.wicon{font-size:1.7rem;flex-shrink:0}.coach{position:absolute;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 44px);left:50%;transform:translate(-50%);display:flex;gap:10px;align-items:center;max-width:min(480px,calc(100vw - 24px));background:var(--panel);border:1px solid rgba(55,224,139,.45);border-radius:14px;padding:10px 16px;font-size:.86rem;color:var(--text-dim);box-shadow:var(--shadow),0 0 24px #37e08b1f;backdrop-filter:blur(8px);pointer-events:none;animation:toast-in .35s cubic-bezier(.2,1.4,.4,1)}.coach b,.coach .kbd{color:var(--text)}.coach.leaving{opacity:0;transition:opacity .4s ease}.coach-icon{font-size:1.25rem}body.touch .coach{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 34px);left:38%}.conn-overlay{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#050812b3;backdrop-filter:blur(6px);z-index:40;color:var(--text);font-weight:700}.spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.fatal{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:24px;z-index:100;background:var(--bg)}.fatal h1{font-size:1.6rem}.fatal p{color:var(--text-dim);max-width:420px;line-height:1.6}@media(max-width:640px){.scoreboard .team .name{display:none}.meters{width:40vw}}