*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #1d212b;--panel: #2a2f3d;--text: #e8eaf0;--muted: #9aa3b5;--accent: #4f8fe8;--p1: #6fb8ff;--p2: #ff8a7a;--gold: #ffd340}html,body,#root{height:100%}body{font-family:-apple-system,Segoe UI,Roboto,Tahoma,sans-serif;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none}.screen{min-height:100%;max-width:520px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:10px}.screen.center{justify-content:center;align-items:center;text-align:center}.logo{font-size:64px;color:var(--accent);line-height:1}h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}.muted{color:var(--muted);font-size:13px}.team.p1{color:var(--p1)}.team.p2{color:var(--p2)}.progress{width:220px;height:8px;background:var(--panel);border-radius:4px;overflow:hidden;margin-top:12px}.progress div{height:100%;background:var(--accent);transition:width .1s}.menu-buttons{display:flex;flex-direction:column;gap:10px;margin-top:14px;width:100%;max-width:280px;align-self:center}.btn{font-family:inherit;font-size:15px;padding:11px 18px;border-radius:10px;border:1px solid #3d4454;background:var(--panel);color:var(--text);cursor:pointer;transition:filter .1s,transform .06s}.btn:hover{filter:brightness(1.15)}.btn:active{transform:scale(.97)}.btn.primary{background:var(--accent);border-color:var(--accent);font-weight:700}.btn.small{padding:6px 14px;font-size:13px}.cards{display:flex;gap:8px;flex-wrap:wrap}.figure-card{flex:1 1 30%;min-width:140px;background:var(--panel);border:1px solid #3d4454;border-radius:12px;padding:10px;font-size:12px;display:flex;flex-direction:column;gap:6px}.figure-card.selectable{cursor:pointer;transition:border-color .1s,transform .1s}.figure-card.selectable:hover{border-color:var(--gold);transform:translateY(-3px)}.prof-row{display:flex;justify-content:space-between;gap:4px}.prof-row.main{font-weight:700}.prof-val{font-variant-numeric:tabular-nums}.game-screen{padding:8px;gap:6px}.phaser-host{border-radius:12px;overflow:hidden}.phaser-host canvas{display:block;border-radius:12px}.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--panel);border-radius:10px;padding:8px 12px;font-size:14px}.hud .team.p2{text-align:right}.hud-turn{text-align:center}.hud-log{grid-column:1 / -1;text-align:center;font-size:12px;min-height:15px}.prep-overlay{position:fixed;left:50%;bottom:14px;translate:-50% 0;background:var(--panel);border:1px solid #3d4454;border-radius:12px;padding:10px 16px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:14px;box-shadow:0 6px 24px #00000080;z-index:10}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#080a1073;display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}.modal{width:100%;max-width:420px;background:var(--panel);border:1px solid #3d4454;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;animation:modalIn .18s ease-out}@keyframes modalIn{0%{transform:scale(.92);opacity:0}}.q-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.timer{font-weight:700;color:var(--text)}.timer.danger{color:var(--p2);animation:blink .5s infinite alternate}@keyframes blink{to{opacity:.4}}.options{display:flex;flex-direction:column;gap:8px}.btn.option{text-align:left}.mute-btn{background:var(--panel);border:1px solid #3d4454;border-radius:50%;cursor:pointer;line-height:1;transition:filter .12s,transform .06s}.mute-btn:hover{filter:brightness(1.25)}.mute-btn:active{transform:scale(.92)}.mute-btn.corner{position:fixed;top:10px;right:10px;width:40px;height:40px;font-size:18px;z-index:30}.mute-btn.inline{width:26px;height:26px;font-size:13px;margin-left:8px;vertical-align:middle;padding:0}.conn-online{color:#6fdc8c}.conn-connecting{color:var(--gold)}.conn-offline{color:var(--p2)}.error-text{color:var(--p2);font-size:13px}.room-card,.wait-card{background:var(--panel);border:1px solid #3d4454;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;align-items:center;width:100%;max-width:320px}.room-code{font-size:34px;font-weight:700;letter-spacing:6px;color:var(--gold);font-family:Courier New,monospace;background:var(--bg);border:1px dashed #4b556b;border-radius:12px;padding:10px 18px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:border-color .15s,transform .06s}.room-code:hover{border-color:var(--gold)}.room-code:active{transform:scale(.97)}.room-code .copy-hint{font-size:11px;letter-spacing:0;font-family:inherit;color:var(--muted);font-weight:400}.room-code .code-value{user-select:all;-webkit-user-select:all}.stats-panel{margin-top:18px;width:100%;max-width:320px;display:flex;flex-direction:column;gap:8px;align-items:center;background:var(--panel);border:1px solid #3d4454;border-radius:12px;padding:12px}.stats-row{display:flex;gap:14px;font-size:13px;flex-wrap:wrap;justify-content:center}.result-stats{margin-top:6px}.stat-win{color:#6fdc8c}.stat-loss{color:var(--p2)}.top-table{width:100%;border-collapse:collapse;font-size:13px}.top-table td{padding:4px 6px}.top-table tr.me{background:#6fb8ff1f;border-radius:6px}.top-table .rank{color:var(--muted);width:22px}.top-table .nick{text-align:left}.join-row{display:flex;gap:8px}.code-input{flex:1;min-width:0;font-family:Courier New,monospace;font-size:18px;letter-spacing:4px;text-align:center;text-transform:uppercase;padding:10px;border-radius:10px;border:1px solid #3d4454;background:var(--bg);color:var(--text)}.setting-row{display:flex;align-items:center;gap:10px;font-size:15px}select{font-family:inherit;background:var(--panel);color:var(--text);border:1px solid #3d4454;border-radius:8px;padding:6px 10px}