@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-97c96b20]{width:100%;height:100%;position:relative;overflow:hidden}canvas[data-v-97c96b20]{cursor:grab;display:block}canvas[data-v-97c96b20]:active{cursor:grabbing}.map-legend[data-v-97c96b20]{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-97c96b20]{color:#aaa;align-items:center;gap:4px;font-size:11px;display:flex}.legend-swatch[data-v-97c96b20]{border-radius:3px;width:12px;height:12px}:root{--bg:#0a0a0f;--fg:#e0e0e0;--card:#14141f;--border:#2a2a3a;--accent:#c9a84c;--green:#2ecc71;--red:#e74c3c}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--fg);min-height:100vh;font-family:Inter,sans-serif}#app{width:100%;max-width:600px;margin:0 auto}.app-shell{padding:16px}.topbar{border-bottom:1px solid var(--border);align-items:center;gap:8px;margin-bottom:24px;padding:12px 0;display:flex}.logo{font-size:20px;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);border-radius:12px;padding:24px}.panel{flex-direction:column;gap:16px;display:flex}.panel h1,.panel h2{text-align:center;font-weight:800}.inp{border:1px solid var(--border);width:100%;color:var(--fg);background:#0a0a0f;border-radius:8px;outline:none;padding:12px 16px;font-size:16px}.inp:focus{border-color:var(--accent)}.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:#0a0a0f;border-radius:8px;padding:8px 10px;font-size:13px}.nation-card:hover{border-color:#888}.nation-card.sel{border-color:var(--accent);background:#1a1a0a}.nation-trait{color:#888;margin-top:4px;font-size:10px;line-height:1.4}.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:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--accent);color:#000}.btn.secondary{background:var(--border);color:var(--fg)}.btn.sm{padding:6px 12px;font-size:13px}.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:#0a0a0f;border-radius:8px;align-items:center;gap:8px;min-height:48px;padding:12px;display:flex}.slot.filled{border-color:#444}.slot.me{border-color:var(--accent)}.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-topbar{background:var(--card);border-bottom:1px solid var(--border);z-index:10;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 12px;font-size:14px;font-weight:600;display:flex}.game-turn{color:#888;font-size:12px}.nation-badge{color:var(--accent);background:#1a1a2e;border-radius:4px;padding:2px 8px;font-size:11px}.game-turn.myturn{color:var(--accent);font-weight:700}.game-topbar-right{align-items:center;gap:6px;margin-left:auto;display:flex}.res-chip{border:1px solid var(--border);background:#0a0a0f;border-radius:4px;padding:2px 8px;font-size:12px}.game-map{flex:1;min-height:0}.game-bottom{background:var(--card);border-top:1px solid var(--border);z-index:10;gap:8px;padding:6px 12px;display:flex}.gp-tag{opacity:.6;border-left:3px solid;border-radius:4px;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;padding:40px}.victory-card h1{color:var(--accent);margin-bottom:16px;font-size:36px;animation:.5s fadeIn}.victory-actions{justify-content:center;gap:12px;margin-top:20px;display:flex}.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:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.combat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:8px;width:90%;max-width:340px;padding:20px;animation:.2s fadeIn;display:flex}.combat-title{text-align:center;color:var(--accent);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)}}.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:6px;padding:6px 12px;display:flex;overflow-x:auto}.hand-bar{background:var(--card);border-top:1px solid var(--accent);z-index:20;position:fixed;bottom:40px;left:0;right:0}.hand-toggle{cursor:pointer;text-align:center;padding:6px 16px;font-size:13px}.hand-cards{flex-wrap:wrap;gap:4px;max-height:80px;padding:8px 12px;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}.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}.officer-bar{background:var(--card);border-top:1px solid var(--accent);z-index:20;position:fixed;bottom:40px;left:0;right:0}.officer-grid{grid-template-columns:1fr 1fr;gap:4px;max-height:200px;padding:8px 12px;display:grid;overflow-y:auto}.officer-chip{border:1px solid var(--border);border-radius:6px;flex-direction:column;gap:2px;padding:6px 10px;font-size:12px;display:flex}.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}}