: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:var(--bg-0);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;background:radial-gradient(ellipse at top,#143b54,#06121a 70%)}#game-host canvas{display:block;max-width:100%;max-height:100%}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;padding:12px;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}.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}.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;margin-top:auto;pointer-events:none}.match>*{pointer-events:auto}.match .scoreboard,.match .role-banner,.match .resolve-card,.match .live-bar,.match .countdown-big{pointer-events:none}.scoreboard{display:flex;align-items:stretch;gap:8px;background:#07131cc7;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px 10px}.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:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-tag-score{font-size:22px;font-weight:800;letter-spacing:.02em}.round-pill{background:#ffd23f29;border:1px solid rgba(255,210,63,.4);color:#ffe9a8;padding:6px 12px;border-radius:999px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;align-self:center}.role-banner{align-self:center;background:#07131cc7;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}.decision-stack{display:flex;flex-direction:column;gap:8px;max-width:620px;width:100%;margin:0 auto;background:#07131cc7;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px}.live-bar{height:6px;width:min(420px,90vw);margin:0 auto;background:#ffffff0f;border-radius:999px;overflow:hidden}.live-bar>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 80ms linear}.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}}