: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}.icon{width:1em;height:1em;vertical-align:-.125em;display:inline-block;flex:none}.icon.lg{width:1.4em;height:1.4em}.icon.xl{width:2em;height:2em}.icon.xxl{width:3em;height:3em}.portal{max-width:1100px;margin:0 auto;padding:24px;min-height:100%;position:relative}.portal:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 900px 480px at 50% -10%,rgba(201,162,39,.08),transparent 60%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 100%,44px 44px,44px 44px}.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);display:flex;align-items:center;gap:10px}.logo .logo-badge{width:42px;height:42px;border-radius:8px;border:1px solid var(--accent-dim);display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#1c2016,#14170f);box-shadow:0 0 14px #c9a22740}.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:64px 0 44px;text-align:center;position:relative}.hero .hero-emblem{position:absolute;top:30px;left:50%;transform:translate(-50%);width:160px;height:160px;opacity:.07;z-index:-1}.hero h1{font-size:48px;letter-spacing:6px;color:var(--text);text-shadow:0 2px 12px rgba(0,0,0,.6);margin-bottom:4px}.hero .hero-sub{color:var(--accent);font-size:14px;letter-spacing:8px;text-transform:uppercase;margin-bottom:10px}.tagline{color:var(--dim);margin:12px 0 30px;font-size:15px}.hero-actions{display:flex;gap:14px;justify-content:center}.hero-actions .btn{display:flex;align-items:center;gap:10px;padding:12px 26px;font-size:15px;border-radius:8px;position:relative;overflow:hidden}.hero-actions .btn .icon{font-size:18px}.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:10px;padding:18px;margin-bottom:20px;backdrop-filter:blur(4px)}.card h2{font-size:16px;letter-spacing:1px;margin-bottom:12px;color:var(--accent);display:flex;align-items:center;gap:8px}.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;transition:background .15s}.map-item:hover{background:#1c211c}.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;vertical-align:middle}.ladder th{color:var(--dim);font-weight:500}.ladder td .rank-medal{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:50%;font-size:11px;font-weight:800}.ladder .rank-1{background:linear-gradient(145deg,#ffd75e,#b8860b);color:#221a00}.ladder .rank-2{background:linear-gradient(145deg,#e6e6e6,#9a9a9a);color:#222}.ladder .rank-3{background:linear-gradient(145deg,#e8a765,#a05a2c);color:#2a1200}.ladder .rank-n{background:#2a2f2a;color:var(--dim)}.ladder .p-cell{display:flex;align-items:center;gap:8px}.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,box-shadow .15s}.btn:hover{background:#2f372f;box-shadow:0 0 10px #c9a22726}.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}.btn .icon{margin-right:6px}.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:320px 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:10px;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}.faction-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.faction-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--panel-border);border-radius:8px;background:#161a16;cursor:pointer;transition:border-color .15s,background .15s}.faction-card:hover{border-color:var(--accent-dim);background:#1c211c}.faction-card.active{border-color:var(--accent);background:#242a1e;box-shadow:0 0 10px #c9a22733}.faction-card .fc-name{font-size:12px;color:var(--text)}.faction-card .fc-icon{font-size:26px;color:var(--accent)}.lobby-room{background:var(--panel);border:1px solid var(--panel-border);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:14px}.lb-players{display:flex;flex-direction:column;gap:8px}.lb-slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lb-player{display:flex;gap:10px;align-items:center;padding:10px 14px;background:#161a16;border:1px solid var(--panel-border);border-radius:6px}.lb-player.ai{border-color:#3a4a3a}.lb-player.empty{opacity:.55;cursor:pointer}.lb-player .p-slot{color:var(--dim);font-size:12px}.p-name{font-weight:600;flex:1}.p-faction{color:var(--dim);font-size:13px;display:flex;align-items:center;gap:4px}.p-team{color:var(--dim);font-size:13px}.p-ready{color:var(--ok);font-weight:700}.lb-room-actions{display:flex;gap:8px}.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:14px;background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:8px 18px;font-size:13px;z-index:10;align-items:center}.hud-top .hud-tick{color:var(--dim);min-width:48px}.hud-top .hud-faction{font-weight:700;color:var(--accent);min-width:64px;display:flex;align-items:center;gap:6px}.hud-top .hud-res{display:flex;align-items:center;gap:5px}.hud-top .hud-res .res-icon{width:16px;height:16px}.hud-top .hud-res .mp{filter:brightness(1.4) sepia(.3) saturate(1.6) hue-rotate(50deg)}.hud-top .hud-res .mun{filter:sepia(1) saturate(3) hue-rotate(-15deg) brightness(1.2)}.hud-top .hud-res .fuel{filter:brightness(1.3) sepia(.4) saturate(2) hue-rotate(180deg)}.hud-top .hud-pop{color:var(--dim);display:flex;align-items:center;gap:5px}.hud-top .hud-pop .icon{width:14px;height:14px}.hud-top .hud-vp{color:#e0c84e;font-weight:700;display:flex;align-items:center;gap:5px}.hud-top .hud-vp .icon{width:14px;height:14px}.hud-bottom{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:8px 12px;display:flex;gap:6px;font-size:12px;z-index:10;min-width:480px;justify-content:center}.hud-bottom .btn.cmd{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;font-size:11px;min-width:62px;border-radius:6px}.hud-bottom .btn.cmd .icon{width:20px;height:20px;font-size:20px}.hud-bottom .btn.cmd:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}.hud-bottom .btn.cmd:hover:not(:disabled){border-color:var(--accent-dim)}.hud-selection{position:absolute;top:70px;left:10px;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:12px 14px;font-size:13px;z-index:10;min-width:230px;max-width:300px;backdrop-filter:blur(4px)}.sel-panel{display:flex;flex-direction:column;gap:8px}.sel-header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.sel-name{font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}.sel-name .icon{width:18px;height:18px}.sel-vet{color:var(--accent);font-size:11px;letter-spacing:1px}.sel-bar{height:6px;background:#2a2f2a;border-radius:3px;overflow:hidden}.sel-hp{height:100%;background:linear-gradient(90deg,#cf5a4a,#6fbf6f);border-radius:3px}.sel-meta{display:flex;gap:10px;color:var(--dim);font-size:12px}.sel-multi{color:var(--accent);font-size:12px;margin-top:4px}.sel-queue{display:flex;flex-direction:column;gap:4px;margin-top:6px}.sel-queue.empty{color:var(--dim);font-size:12px}.sel-qitem{display:flex;flex-direction:column;gap:2px;font-size:12px}.qbar{height:4px;background:#2a2f2a;border-radius:2px}.qprog{height:100%;background:var(--accent);border-radius:2px}.sel-build{margin-top:8px;border-top:1px solid var(--panel-border);padding-top:8px}.sel-build-title{font-size:12px;color:var(--accent);margin-bottom:6px;letter-spacing:1px}.sel-build-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:200px;overflow-y:auto}.prod-btn{display:flex;flex-direction:column;gap:2px;padding:8px 10px;text-align:left;background:#1a1f1a;border:1px solid var(--panel-border);border-radius:6px;cursor:pointer;transition:border-color .15s,background .15s}.prod-btn:hover:not(.disabled){border-color:var(--accent-dim);background:#222922}.prod-btn.disabled{opacity:.4;cursor:not-allowed}.prod-btn .prod-name{font-size:12px;color:var(--text);font-weight:600}.prod-btn .prod-cost{font-size:11px;color:var(--dim)}.hud-minimap{position:absolute;bottom:70px;right:14px;width:180px;height:180px;background:#0c100c;border:1px solid var(--panel-border);border-radius:8px;z-index:10}.hud-order-marker{position:absolute;pointer-events:none;z-index:5}.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)}