:root{--bg-0: #07131c;--bg-1: #0b1d2a;--bg-2: #11334a;--accent: #ffd23f;--accent-2: #ff5d5d;--good: #3ddc97;--text: #f4f6f8;--muted: #9eb3c2;--shadow: 0 10px 30px rgba(0, 0, 0, .35);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:#0a2615;color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{font-family:inherit}#app-root{position:relative;width:100vw;height:100dvh;display:flex;flex-direction:column;overflow:hidden}#game-host{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#1a6b34}#game-host canvas{display:block}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:10px}.overlay>*{pointer-events:auto}.overlay-top{display:flex;justify-content:flex-end}.center-card{pointer-events:auto;background:#07131cf0;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow);width:min(440px,92vw);margin:auto;display:flex;flex-direction:column;gap:12px;max-height:88dvh;overflow-y:auto}.center-card h1{margin:0;font-size:26px;letter-spacing:.02em}.center-card h1 span{color:var(--accent)}.center-card h2{margin:0;font-size:18px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}.tagline{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.field{display:flex;flex-direction:column;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.field.flex{flex:1 1 auto}.field input{background:#14324699;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;color:var(--text);font-size:15px;letter-spacing:normal;text-transform:none}.field input:focus{outline:none;border-color:#ffd23f99}.or{text-align:center;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:4px 0}.segmented{display:flex;background:#14324699;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:3px;gap:2px}.seg-btn{flex:1 1 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;padding:8px 6px;border-radius:8px;cursor:pointer;transition:background .12s ease,color .12s ease;letter-spacing:.02em}.seg-btn:hover{color:var(--text)}.seg-btn.active{background:#ffd23f2e;color:var(--accent);box-shadow:inset 0 0 0 1px #ffd23f66}.rematch-status{text-align:center;font-size:12px;letter-spacing:.05em;color:var(--muted);margin-top:-4px;min-height:16px}.rematch-status.ready{color:var(--good)}.rematch-status.gone{color:var(--accent-2)}.join-row{display:flex;gap:8px;align-items:flex-end}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#1a3a52,#112637);color:var(--text);font-size:14px;font-weight:600;padding:12px 18px;cursor:pointer;transition:transform 80ms ease,border-color .12s ease,background .12s ease;box-shadow:var(--shadow)}.btn:hover{border-color:#ffd23f80}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn.primary{background:linear-gradient(180deg,#ffd23f,#ffa600);color:#1a1100;border-color:#00000040}.btn.danger{background:linear-gradient(180deg,#ff7878,#c83b3b);color:#1a0000}.btn.ghost{background:transparent;border-color:#ffffff1f;color:var(--muted);box-shadow:none}.btn.ghost:hover{color:var(--text)}.btn.block{width:100%}.room-code{color:var(--accent);font-weight:800;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;font-size:22px}.join-modal-code{align-self:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:36px;letter-spacing:.24em;color:var(--accent);background:#ffd23f1f;border:1px solid rgba(255,210,63,.35);border-radius:14px;padding:8px 22px;margin:4px 0 6px}.invite-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);text-align:center;word-break:break-all;background:#00000040;padding:6px 8px;border-radius:8px}.players{display:flex;align-items:stretch;gap:10px;margin:6px 0}.player-slot{flex:1 1 0;background:#14324673;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;text-align:center;display:flex;flex-direction:column;gap:4px}.player-slot.self{border-color:#ffd23f8c}.player-slot.empty{opacity:.5;border-style:dashed}.player-slot.ready{border-color:#3ddc9799}.player-slot-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.player-slot-name{font-size:16px;font-weight:700}.player-slot-status{font-size:10px;letter-spacing:.18em;color:var(--good);min-height:12px}.vs{align-self:center;font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}.hint{font-size:12px;color:var(--muted);margin:0;text-align:center;line-height:1.4}.match{display:flex;flex-direction:column;gap:10px;flex:1 1 0;min-height:0;pointer-events:none}.match-strip-top{display:flex;align-items:stretch;gap:6px;background:#07131c99;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:6px 10px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.match-center{flex:1 1 auto;display:flex;align-items:center;justify-content:center;pointer-events:none;min-height:0}.match-strip-bottom{display:flex;align-items:center;justify-content:center;pointer-events:none;min-height:14px}.player-tag{flex:1 1 0;display:flex;align-items:center;gap:8px;min-width:0}.player-tag.self{color:var(--accent)}.player-tag-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-tag-score{font-size:20px;font-weight:800;letter-spacing:.02em}.match-meta{display:flex;flex-direction:column;align-items:center;gap:3px;justify-content:center;flex-shrink:0;min-width:0}.round-pill{background:#ffd23f2e;border:1px solid rgba(255,210,63,.4);color:#ffe9a8;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;white-space:nowrap}.role-badge{padding:2px 8px;border-radius:999px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border:1px solid transparent;white-space:nowrap}.role-badge.shoot{background:#ff5d5d2e;border-color:#ff5d5d73;color:#ffb0b0}.role-badge.keep{background:#3ddc972e;border-color:#3ddc9773;color:#c5f3df}.match-hint{background:#07131cb3;color:#ffe9a8;padding:10px 18px;border-radius:14px;font-size:15px;font-weight:600;text-align:center;max-width:min(80vw,360px);line-height:1.4;border:1px solid rgba(255,233,168,.3);box-shadow:var(--shadow);animation:hint-fade .22s ease}@keyframes hint-fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.timer-bar{width:min(420px,80vw);height:12px;background:#07131cb3;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.08);position:relative}.timer-bar-fill{height:100%;background:linear-gradient(90deg,var(--good),var(--accent));transition:width 80ms linear,background .2s ease}.timer-bar.urgent .timer-bar-fill{background:linear-gradient(90deg,var(--accent),var(--accent-2))}.timer-bar-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#f4f6f8;letter-spacing:.04em;text-shadow:0 0 4px rgba(0,0,0,.8)}.countdown-big{align-self:center;font-size:96px;font-weight:900;color:var(--accent);letter-spacing:.04em;text-shadow:0 6px 30px rgba(255,210,63,.5);line-height:1;animation:countdown-pulse 1s ease-in-out infinite}@keyframes countdown-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.92}}.resolve-card{align-self:center;background:#07131ceb;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 22px;text-align:center;animation:pop .28s cubic-bezier(.2,1,.3,1.2);max-width:92vw}@keyframes pop{0%{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}.resolve-outcome{font-size:28px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.resolve-outcome.save{color:var(--good)}.resolve-outcome.goal{color:var(--accent-2)}.resolve-headline{margin-top:4px;color:var(--muted);font-size:13px}.end-headline{text-align:center;font-size:24px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.end-headline.win{color:var(--good)}.end-headline.lose{color:var(--accent-2)}.end-headline.tie{color:var(--accent)}.final-score{display:flex;align-items:center;justify-content:center;gap:18px}.score-side{text-align:center}.score-name{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}.score-num{font-size:40px;font-weight:800}.final-score-label{text-align:center;font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}.lang-toggle{display:inline-flex;background:#07131cc7;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:3px;gap:2px;box-shadow:var(--shadow)}.lang-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.06em;padding:6px 12px;border-radius:999px;cursor:pointer;min-width:38px;transition:background .12s ease,color .12s ease}.lang-btn:hover{color:var(--text)}.lang-btn.active{background:var(--accent);color:#1a1100}.error-toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%);background:#c83b3be6;color:#fff;border:1px solid rgba(255,120,120,.6);padding:8px 16px;border-radius:999px;font-size:13px;pointer-events:none;z-index:10;animation:pop .22s ease}@media (max-width: 540px){.overlay{padding:8px;gap:6px}.center-card{padding:18px}.center-card h1{font-size:22px}.center-card h2{font-size:14px}.tagline{font-size:12px}.btn{padding:10px 14px;font-size:13px}.countdown-big{font-size:72px}.player-tag-name{font-size:12px}.player-tag-score{font-size:18px}.round-pill{font-size:10px;padding:4px 8px}.role-banner{font-size:10px;padding:4px 10px}.resolve-outcome{font-size:22px}.score-num{font-size:32px}}