:root{--bg: #101310;--panel: rgba(22, 26, 22, .92);--panel-border: #3a443a;--accent: #c9a227;--accent-dim: #8a7420;--text: #e8e6dc;--dim: #8a948a;--ok: #6fbf6f;--warn: #d9a13c;--bad: #cf5a4a;--font: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif}[data-screen=portal] #app{overflow-y:auto}.portal{max-width:1100px;margin:0 auto;padding:24px;min-height:100%}.portal-top{display:flex;justify-content:space-between;align-items:center;padding:8px 0 20px;border-bottom:1px solid var(--panel-border)}.logo{font-size:26px;font-weight:800;letter-spacing:1px;color:var(--accent)}.auth-area{display:flex;gap:8px;align-items:center}.auth-area input{background:#181c18;border:1px solid var(--panel-border);color:var(--text);padding:6px 10px;border-radius:4px;width:130px}.welcome{display:flex;align-items:center;gap:8px}.elo{color:var(--accent);font-weight:700}.hero{padding:56px 0 40px;text-align:center}.hero h1{font-size:44px;letter-spacing:4px;color:var(--text);text-shadow:0 2px 12px rgba(0,0,0,.6)}.tagline{color:var(--dim);margin:12px 0 28px;font-size:15px}.hero-actions{display:flex;gap:12px;justify-content:center}.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}@media (max-width: 860px){.cols{grid-template-columns:1fr}}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:18px;margin-bottom:20px}.card h2{font-size:16px;letter-spacing:1px;margin-bottom:12px;color:var(--accent)}.maps-list{display:flex;flex-direction:column;gap:10px}.map-item{display:flex;gap:12px;align-items:center;padding:8px;border-radius:6px;background:#161a16}.map-thumb{width:72px;height:48px;border-radius:4px;border:1px solid var(--panel-border)}.map-meta{display:flex;flex-direction:column;gap:2px}.map-meta b{font-size:14px}.ladder{width:100%;border-collapse:collapse}.ladder th,.ladder td{text-align:left;padding:6px 8px;border-bottom:1px solid #222822;font-size:14px}.ladder th{color:var(--dim);font-weight:500}.btn{background:#262c26;color:var(--text);border:1px solid var(--panel-border);padding:8px 18px;border-radius:5px;cursor:pointer;font-size:14px;transition:background .15s,transform .05s}.btn:hover{background:#2f372f}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);color:#14150f;border-color:var(--accent);font-weight:700}.btn.primary:hover{background:#d9b232}.btn.ghost{background:transparent}.btn.sm{padding:5px 12px;font-size:13px}.dim{color:var(--dim)}#toast{position:fixed;bottom:90px;left:50%;transform:translate(-50%) translateY(20px);background:#141612f2;color:var(--text);padding:10px 22px;border-radius:6px;border:1px solid var(--panel-border);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:999;font-size:14px}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}.lobby{display:grid;grid-template-columns:300px 1fr;gap:20px;padding:24px;max-width:1000px;margin:0 auto}.lobby-setup{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:20px;align-self:start}.lobby-setup h2{color:var(--accent);font-size:18px}.lobby-setup label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim)}.lobby-setup select,.lobby-setup input{background:#181c18;color:var(--text);border:1px solid var(--panel-border);border-radius:4px;padding:7px 9px;font-size:14px}.lobby-room{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:14px}.lb-players{display:flex;flex-direction:column;gap:8px}.lb-player{display:flex;gap:12px;align-items:center;padding:10px 14px;background:#161a16;border:1px solid var(--panel-border);border-radius:6px}.lb-player.ai{border-color:#3a4a3a}.p-name{font-weight:600;flex:1}.p-faction,.p-team{color:var(--dim);font-size:13px}.p-ready{color:var(--ok);font-weight:700}.lb-chat{flex:1;min-height:160px;max-height:300px;overflow-y:auto;background:#101410;border:1px solid var(--panel-border);border-radius:6px;padding:10px;font-size:13px}.lb-chat-input{display:flex;gap:8px}.lb-chat-input input{flex:1;background:#181c18;border:1px solid var(--panel-border);color:var(--text);padding:8px 10px;border-radius:4px}.match{position:relative;width:100%;height:100%}#game-canvas{position:absolute;inset:0}.hud-top{position:absolute;top:10px;left:50%;transform:translate(-50%);display:flex;gap:16px;background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:8px 18px;font-size:13px;z-index:10}.hud-bottom{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:10px 18px;display:flex;gap:20px;font-size:14px;z-index:10;min-width:420px;justify-content:center}.hud-selection{position:absolute;top:70px;left:10px;background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:10px 14px;font-size:13px;z-index:10}.hud-minimap{position:absolute;bottom:70px;right:14px;width:160px;height:160px;background:#0c100c;border:1px solid var(--panel-border);border-radius:6px;z-index:10}.match-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#080a08b3;z-index:50}.match-over{text-align:center;font-size:34px;letter-spacing:3px;padding:30px 50px;background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;display:flex;flex-direction:column;gap:18px;align-items:center}.match-over.win{color:var(--ok)}.match-over.lose{color:var(--bad)}