@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap";body{color:#e0e0e0;background:#0a0a0f;font-family:Inter,system-ui,sans-serif;overflow:hidden}#app{width:100%;height:100dvh}.hex-container[data-v-9cddd69a]{width:100%;height:100%;position:relative;overflow:hidden}canvas[data-v-9cddd69a]{cursor:grab;display:block}canvas[data-v-9cddd69a]:active{cursor:grabbing}.map-legend[data-v-9cddd69a]{background:#000000b3;border-radius:8px;flex-wrap:wrap;gap:10px;padding:6px 12px;display:flex;position:absolute;bottom:12px;left:12px}.legend-item[data-v-9cddd69a]{color:#aaa;align-items:center;gap:4px;font-size:11px;display:flex}.legend-swatch[data-v-9cddd69a]{border-radius:3px;width:12px;height:12px}:root{--bg:#08080f;--bg2:#0e1020;--fg:#e6e6ea;--fg-dim:#9aa0b5;--card:#17192ad1;--card-solid:#17192a;--border:#ffffff17;--accent:#d4af37;--accent-2:#f0d67a;--green:#2ecc71;--red:#e74c3c;--gold-grad:linear-gradient(135deg, #f0d67a, #d4af37 55%, #b8860b);--shadow:0 8px 32px #0000008c;--font-title:"Georgia", "Noto Serif SC", serif}*{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(1100px 520px at 50% -12%, #d4af3717, transparent 62%), radial-gradient(700px 400px at 85% 112%, #2ecc710d, transparent 60%), var(--bg);color:var(--fg);min-height:100vh;font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif}#app{width:100%;max-width:620px;margin:0 auto}.app-shell{padding:16px}.topbar{border-bottom:1px solid var(--border);align-items:center;gap:8px;margin-bottom:20px;padding:14px 0;display:flex}.logo{background:var(--gold-grad);-webkit-text-fill-color:transparent;letter-spacing:1px;text-shadow:none;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800}.conn-dot{background:var(--red);border-radius:50%;width:8px;height:8px}.conn-dot.ok{background:var(--green)}.conn-text{color:#888;margin-left:auto;font-size:12px}.card{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px;padding:24px}.panel{flex-direction:column;gap:16px;display:flex}.panel h1,.panel h2{text-align:center;font-weight:800;font-family:var(--font-title);letter-spacing:2px}.inp{border:1px solid var(--border);width:100%;color:var(--fg);background:#08080fb3;border-radius:10px;outline:none;padding:12px 16px;font-size:16px;transition:border-color .2s,box-shadow .2s}.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px #d4af3726}.inp.short{text-align:center;text-transform:uppercase;letter-spacing:4px;width:140px}.cmd-pick{flex-wrap:wrap;gap:8px;display:flex}.nation-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.nation-card{border:1px solid var(--border);cursor:pointer;text-align:left;background:#08080f99;border-radius:10px;padding:9px 11px;font-size:13px;transition:border-color .15s,transform .15s,box-shadow .15s,background .15s}.nation-card:hover{border-color:#ffffff59;transform:translateY(-1px)}.nation-card.sel{border-color:var(--accent);background:linear-gradient(160deg,#d4af3724,#d4af370a);box-shadow:0 0 0 1px #d4af3766,0 4px 16px #d4af371f}.nation-trait{color:var(--fg-dim);margin-top:4px;font-size:10px;line-height:1.45}.nation-card.sel .nation-trait{color:#cfc9a8}.team-row{align-items:center;gap:12px;display:flex}.team-pick{gap:6px;display:flex}.team-pick button{border:1px solid var(--border);color:#888;cursor:pointer;background:0 0;border-radius:6px;padding:4px 12px}.team-pick button.sel{border-color:var(--accent);color:var(--accent)}.mode-chip{align-items:center;gap:4px;font-size:13px;display:flex}.cmd-chip{border:1px solid var(--border);color:#888;cursor:pointer;background:0 0;border-radius:6px;padding:6px 12px;font-size:13px}.cmd-chip.sel{border-color:var(--accent);color:var(--accent)}.btn{cursor:pointer;border:1px solid #0000;border-radius:10px;padding:12px 24px;font-size:16px;font-weight:600;transition:transform .12s,box-shadow .15s,filter .15s,border-color .15s}.btn:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.3)}.btn:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)}.btn:not(:disabled):active{transform:translateY(0)scale(.98)}.btn.primary{background:var(--gold-grad);color:#1c1500;box-shadow:0 2px 14px #d4af3759}.btn.secondary{border-color:var(--border);color:var(--fg);background:#ffffff0f}.btn.sm{border-radius:7px;padding:5px 11px;font-size:12px}.btn.xs{border-radius:5px;padding:2px 7px;font-size:11px}.divider{color:#666;align-items:center;gap:12px;font-size:13px;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.join-row{gap:8px;display:flex}.slots{grid-template-columns:1fr 1fr;gap:8px;display:grid}.slot{border:1px solid var(--border);background:#08080f99;border-radius:10px;align-items:center;gap:8px;min-height:48px;padding:12px;transition:border-color .15s,box-shadow .15s;display:flex}.slot.filled{border-color:#ffffff2e}.slot.me{border-color:var(--accent);box-shadow:0 0 0 1px #d4af3759}.slot-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.slot-name{font-weight:600}.slot-cmd{color:#888;margin-left:auto;font-size:11px}.slot-ready{color:var(--green);font-size:14px}.slot-empty{color:#555}.hint{color:#888;font-size:13px}.err{color:var(--red);text-align:center;font-size:14px}.actions{flex-direction:column;align-items:center;gap:8px;display:flex}.room-header{justify-content:space-between;align-items:center;display:flex}.lobby,.room,.game{animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.game{flex-direction:column;display:flex;position:fixed;inset:0}.game-body{flex:1;min-height:0;display:flex}.game-main{flex-direction:column;flex:1;min-width:0;display:flex;position:relative}.bottom-actions{flex-direction:column;max-height:40%;display:flex;position:absolute;bottom:0;left:0;right:0;overflow-y:auto}.bottom-actions .unit-action-bar,.bottom-actions .build-bar,.bottom-actions .hand-bar{border-top:1px solid #d4af374d}.bottom-actions .unit-action-bar,.bottom-actions .build-bar{background:#17192af0}.bottom-actions .hand-bar{background:#0f111ef0}.officer-bar{border-left:1px solid var(--border);background:#0a0a14bf;flex-shrink:0;width:300px;padding:8px;overflow-y:auto}.officer-grid{grid-template-columns:1fr;gap:4px;display:grid}@media (width<=900px){.officer-bar{width:210px}}@media (width<=640px){.officer-bar{width:160px}}.hand-bar{border-top:1px solid var(--accent);background:#080816eb}.game-topbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10;background:#17192ae6;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 12px;font-size:14px;font-weight:600;display:flex}.game-turn{color:var(--fg-dim);font-size:12px}.nation-badge{color:var(--accent-2);background:#d4af371a;border:1px solid #d4af3759;border-radius:6px;padding:2px 9px;font-size:11px}.game-turn.myturn{color:var(--accent-2);text-shadow:0 0 12px #d4af3759;font-weight:700}.game-topbar-right{flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto;display:flex}.btn.end-turn{animation:2.2s ease-in-out infinite endTurnGlow}@keyframes endTurnGlow{0%,to{box-shadow:0 2px 14px #d4af3759}50%{box-shadow:0 2px 26px #d4af37b3}}.res-chip{background:linear-gradient(160deg,#ffffff17,#ffffff05);border:1px solid #ffffff1f;border-radius:7px;align-items:center;gap:4px;padding:3px 9px;font-size:12px;font-weight:600;display:inline-flex}.game-topbar-right .btn.sm{color:var(--fg);background:#ffffff0d;border:1px solid #ffffff24}.game-topbar-right .btn.sm.primary{border-color:#0000}.game-turn.myturn{color:var(--accent-2);font-weight:700;animation:2s ease-in-out infinite turnPulse}@keyframes turnPulse{0%,to{text-shadow:0 0 8px #d4af374d}50%{text-shadow:0 0 22px #d4af37d9}}.game-map{flex:1;min-height:0}.hint-bar{color:gold;z-index:8;background:#c9a84c1f;border-bottom:1px solid #c9a84c4d;flex:none;padding:3px 14px;font-size:12px}.unit-action-bar{z-index:9;background:#c9a84c1a;border-top:1px solid #c9a84c59;flex:none;align-items:center;gap:8px;padding:5px 12px;font-size:13px;display:flex}.game-bottom{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border);z-index:10;background:#17192ae6;gap:8px;padding:6px 12px;display:flex}.gp-tag{opacity:.6;border-left:3px solid;border-radius:6px;padding:3px 10px;font-size:11px}.gp-tag.active{opacity:1;font-weight:600}.victory-overlay{z-index:200;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.victory-card{text-align:center;box-shadow:0 0 60px #d4af3726, var(--shadow);background:linear-gradient(165deg,#1e2034f5,#121422f5);border:1px solid #d4af3766;border-radius:18px;padding:44px 48px;animation:.4s cubic-bezier(.2,1.4,.4,1) popIn}.victory-card h1{background:var(--gold-grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:16px;font-size:32px}.victory-actions{justify-content:center;gap:12px;margin-top:20px;display:flex}@keyframes popIn{0%{opacity:0;transform:scale(.85)translateY(12px)}to{opacity:1;transform:scale(1)translateY(0)}}.victory-stats{margin:16px 0}.victory-stats table{border-collapse:collapse;width:100%;font-size:13px}.victory-stats th,.victory-stats td{border-bottom:1px solid var(--border);text-align:center;padding:4px 8px}.victory-stats th{color:var(--accent)}.combat-overlay{z-index:100;background:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.combat-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:90%;max-width:340px;box-shadow:0 0 40px #d4af371a, var(--shadow);background:#17192af2;border:1px solid #d4af3759;border-radius:14px;flex-direction:column;gap:8px;padding:22px;animation:.25s cubic-bezier(.2,1.4,.4,1) popIn;display:flex}.combat-title{text-align:center;color:var(--accent-2);font-size:16px;font-weight:800}.combat-line{color:#ccc;font-size:13px;line-height:1.6;animation:.3s both slideIn}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.shake{animation:.5s shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px,4px)}40%{transform:translate(8px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(4px,-2px)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#d4af3766}::selection{background:#d4af3759}.modal-overlay .market-panel,.modal-overlay .tech-panel,.modal-overlay .help-panel,.log-panel{animation:.25s cubic-bezier(.2,1.4,.4,1) popIn}.log-panel{border-left:1px solid var(--border);z-index:30;background:#0a0a0ff2;flex-direction:column;width:260px;font-size:12px;display:flex;position:fixed;top:0;bottom:40px;right:0}.log-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 12px;font-weight:600;display:flex}.log-body{flex:1;padding:8px;overflow-y:auto}.log-line{color:#aaa;border-bottom:1px solid #ffffff08;padding:2px 0;line-height:1.5}.help-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:12px;width:90%;max-width:420px;max-height:70vh;padding:20px;display:flex;overflow-y:auto}.help-grid{grid-template-columns:1fr 1fr;gap:6px;font-size:13px;display:grid}.help-grid div{background:#0a0a0f;border-radius:4px;padding:4px 8px}@media (width<=768px){.log-panel{width:200px;font-size:10px}.help-grid{grid-template-columns:1fr}}.card-chip{border:1px solid var(--border);color:#ccc;cursor:pointer;white-space:nowrap;background:#1a1a2e;border-radius:6px;padding:4px 10px;font-size:12px}.card-chip:hover{border-color:var(--accent)}.card-chip.sm{padding:3px 8px;font-size:10px}.build-bar{background:var(--card);border-top:1px solid var(--border);z-index:5;align-items:center;gap:8px;padding:6px 12px;display:flex;overflow-x:auto}.card-chip{border-left:3px solid #ffffff40}.card-chip.type-science{border-left-color:#5dade2}.card-chip.type-engineering{border-left-color:#f39c12}.card-chip.type-commercial{border-left-color:#d4af37}.card-chip.type-military{border-left-color:#e74c3c}.hand-bar{border-top:1px solid var(--accent);background:#080816eb;flex-shrink:0}.hand-toggle{cursor:pointer;text-align:center;color:var(--accent);padding:4px 16px;font-size:12px}.hand-cards{flex-wrap:wrap;gap:4px;max-height:64px;padding:6px 10px;display:flex;overflow-y:auto}.modal-overlay{z-index:50;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.market-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:8px;width:90%;max-width:380px;max-height:70vh;padding:20px;display:flex;overflow-y:auto}.market-panel h3{font-weight:800}.tech-panel{border:1px solid var(--border);background:linear-gradient(160deg,#131a2e,#0d1222);border-radius:14px;flex-direction:column;gap:10px;width:480px;max-width:94vw;max-height:82vh;padding:20px 22px;display:flex;overflow-y:auto;box-shadow:0 8px 40px #0009}.tech-panel-head{justify-content:space-between;align-items:center;display:flex}.tech-panel-head h3{margin:0;font-size:18px}.tech-points{color:gold;font-size:13px}.tech-line{border:1px solid var(--border);background:#ffffff08;border-left:4px solid;border-radius:10px;padding:10px 12px}.tech-head{align-items:center;gap:10px;display:flex}.tech-icon{border:1px solid;border-radius:9px;flex:none;justify-content:center;align-items:center;width:34px;height:34px;font-size:18px;display:flex}.tech-title{flex:none}.tech-title b{font-size:14px}.tech-title small{color:#888;margin-left:6px}.tech-progress{background:#ffffff14;border-radius:3px;flex:1;height:6px;overflow:hidden}.tech-bar{border-radius:3px;height:100%;transition:width .3s;display:block}.tech-body{flex-direction:column;gap:5px;margin-top:8px;display:flex}.tech-done{flex-wrap:wrap;gap:4px 10px;display:flex}.tech-effect{color:#aaa;font-size:11.5px}.tech-effect.done{color:#2ecc71}.tech-effect.next{color:gold}.tech-next{justify-content:space-between;align-items:center;gap:8px;display:flex}.tech-max{color:#f1c40f;font-size:13px;font-weight:700}.tech-need{color:#e74c3c;font-size:10.5px}.market-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;padding:6px 0;font-size:14px;display:flex}.market-info{flex-direction:column;gap:2px;display:flex}.market-desc{color:#8a93a8;font-size:11px}.officer-chip{border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:2px;padding:6px 10px;font-size:12px;display:flex}.officer-chip.state-ready{background:#d4af3714;border-color:#d4af378c}.officer-chip.state-field{background:#2ecc7112;border-color:#2ecc7180}.officer-chip.state-dead{opacity:.6;background:#e74c3c12;border-color:#e74c3c80}.officer-chip.state-idle{opacity:.6}.officer-chip.state-ready{border-color:#3498db}.officer-chip.state-field{border-color:#2ecc71}.officer-chip .dead{color:var(--red)}.divider-v{color:#444}.btn.xs{border:1px solid var(--border);color:#ccc;cursor:pointer;background:#1a1a2e;border-radius:3px;padding:2px 6px;font-size:10px}.btn.xs.primary{background:var(--accent);color:#000}@media (width<=768px){.game-topbar{flex-wrap:wrap;gap:2px;padding:3px 4px;font-size:10px}.game-topbar-right{flex-wrap:wrap;gap:1px}.res-chip{padding:1px 3px;font-size:9px}.btn.sm{padding:3px 5px;font-size:9px}.officer-grid{grid-template-columns:1fr;max-height:100px}.officer-chip{padding:3px 5px;font-size:9px}.hand-cards{max-height:40px}.build-bar{flex-wrap:wrap;gap:2px;padding:3px 4px;overflow-x:auto}.build-bar .card-chip{padding:2px 5px;font-size:9px}.market-panel{max-width:98vw;max-height:45vh;padding:12px}.market-row{font-size:11px}.nation-grid{grid-template-columns:1fr}.game-bottom{padding:3px 6px}.gp-tag{padding:2px 6px;font-size:9px}.nation-badge{font-size:9px}}.opt-row{margin:8px 0}.opt-row .btn.sm{color:#c9a84c;border-color:#c9a84c55}.opt-panel{background:#c9a84c14;border:1px solid #c9a84c40;border-radius:6px;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;padding:8px;font-size:12px;display:flex}.opt-panel label{color:#ccc;align-items:center;gap:4px;display:flex}.opt-panel input{color:#eee;text-align:center;background:#14142a;border:1px solid #555;border-radius:4px;width:62px;padding:2px 6px}[data-tip]{position:relative}[data-tip]:after{content:attr(data-tip);color:#eee;white-space:nowrap;text-overflow:ellipsis;z-index:3000;pointer-events:none;opacity:0;background:#0a0a19f7;border:1px solid #c9a84c73;border-radius:5px;max-width:260px;padding:5px 10px;font-size:11px;line-height:1.45;transition:opacity .12s;position:absolute;top:135%;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 3px 10px #0009}[data-tip]:hover:after{opacity:1}[data-tip]:before{content:"";opacity:0;z-index:3000;pointer-events:none;border:5px solid #0000;border-top-color:#0a0a19f7;transition:opacity .12s;position:absolute;top:128%;left:50%;transform:translate(-50%)}[data-tip]:hover:before{opacity:1}.build-bar [data-tip]:after,.officer-bar [data-tip]:after,.game-bottom [data-tip]:after,.market-panel [data-tip]:after{top:auto;bottom:135%}.build-bar [data-tip]:before,.officer-bar [data-tip]:before,.game-bottom [data-tip]:before,.market-panel [data-tip]:before{border-top-color:#0000;border-bottom-color:#0a0a19f7;top:auto;bottom:128%}