.hud-header{background:linear-gradient(180deg,#0f141cfa,#161e2af2);border-bottom:1px solid var(--border-color-soft);box-shadow:var(--header-shadow);padding:var(--space-3) var(--space-5);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);position:relative;z-index:50}.hud-header:after{content:"";position:absolute;left:var(--space-5);right:var(--space-5);bottom:0;height:2px;background:var(--hud-rail);opacity:.7}.hud-left{display:flex;align-items:center;gap:var(--space-5);min-width:0}.hud-title{font-size:1.2rem;font-weight:700;letter-spacing:.04em;color:var(--accent-warm);text-transform:uppercase;white-space:nowrap;text-shadow:0 0 12px var(--accent-warm-dim)}.status-strip{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.status-chip{background:var(--bg-panel-alt);border:1px solid var(--border-color-soft);border-radius:var(--radius-sm);padding:6px 10px;display:flex;align-items:baseline;gap:8px;transition:border-color .18s ease,transform .18s ease}.status-chip:hover{border-color:var(--accent-soft);transform:translateY(-1px)}.status-label{color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}.status-value{color:var(--accent);font-size:.9rem;font-weight:700}.hud-right{display:flex;align-items:center;gap:var(--space-3)}.zoom-controls{display:flex;gap:var(--space-1)}.zoom-btn{width:32px;height:32px;border:1px solid var(--border-color-soft);background:var(--bg-panel-alt);color:var(--accent);border-radius:var(--radius-sm);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,border-color .15s ease,background-color .15s ease}.zoom-btn:hover{border-color:var(--accent-soft);background:var(--accent-panel);transform:translateY(-1px)}.btn-start{padding:.52rem 1.25rem;border:1px solid var(--border-warm);border-radius:var(--radius-sm);font-family:inherit;font-weight:700;font-size:.78rem;letter-spacing:.04em;cursor:pointer;background:linear-gradient(135deg,var(--accent-panel),rgba(94,184,176,.08));color:var(--accent);transition:transform .16s ease,background-color .16s ease,border-color .16s ease;white-space:nowrap;text-transform:uppercase}.btn-start:hover{transform:translateY(-1px);border-color:var(--accent-soft);background:linear-gradient(135deg,rgba(94,184,176,.22),var(--accent-panel))}.btn-start:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-dev-start{margin-right:.5rem;background:#ffb45033;border-color:#ffb45073;font-size:.72rem}.btn-dev-start:hover{background:#ffb4504d;border-color:#ffb45099}.agent-banner{display:flex;align-items:center;gap:var(--space-2);background:var(--accent-panel);border:1px solid var(--accent-soft);border-radius:var(--radius-sm);padding:6px 10px}.agent-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.3)}.agent-name{font-size:.75rem;font-weight:600;color:var(--accent)}.agent-stats{font-size:.66rem;color:var(--text-muted)}.btn-logout{background:transparent;border:1px solid rgba(233,69,96,.4);color:var(--danger);border-radius:3px;cursor:pointer;font-size:.65rem;padding:.15rem .35rem;transition:all .2s}.btn-logout:hover{background:var(--danger);color:#fff}.btn-login{padding:.42rem .9rem;border:1px solid var(--border-warm);border-radius:var(--radius-sm);font-family:inherit;font-weight:600;font-size:.68rem;letter-spacing:.05em;cursor:pointer;background:var(--bg-panel-alt);color:var(--accent);transition:transform .16s ease,border-color .16s ease,background-color .16s ease;white-space:nowrap;text-transform:uppercase}.btn-login:hover{border-color:var(--accent-soft);background:var(--accent-panel);transform:translateY(-1px)}main{flex:1;position:relative;overflow:hidden}.map-container{width:100%;height:100%;background-color:var(--water-deep);-webkit-user-select:none;user-select:none;position:relative;box-shadow:inset 0 0 0 1px #3d352b4d}.map-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--texture-paper);background-repeat:repeat;opacity:.07;pointer-events:none;z-index:1}.map-container.map-viewport{overflow:hidden}.canvas-world{position:relative;contain:layout style}.label-layer{overflow:visible}.label-layer svg text{paint-order:stroke fill;stroke:#0f172a80;stroke-width:1.2px}.canvas-wrapper{position:relative;display:block}canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;transform-origin:0 0}.leaderboard{position:absolute;top:var(--space-2);left:var(--space-2);width:220px;max-height:calc(52% - var(--space-3));background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border-color-soft);overflow:hidden;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--panel-shadow)}.leaderboard:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--texture-paper);background-repeat:repeat;opacity:.05;pointer-events:none;border-radius:inherit}.leaderboard-header{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-warm);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-color);background:var(--bg-panel-alt)}.leaderboard-content{overflow-y:auto;max-height:280px;padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-1)}.leaderboard-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--bg-panel-alt);border:1px solid var(--border-color-soft);border-radius:var(--radius-sm);transition:border-color .18s ease,transform .18s ease}.leaderboard-row:hover{border-color:var(--accent-soft);transform:translate(2px)}.leaderboard-row.dead{opacity:.45}.leaderboard-row.dead .leaderboard-name,.leaderboard-row.dead .leaderboard-force,.leaderboard-row.dead .leaderboard-pct{color:var(--text-muted)}.leaderboard-row-me{background:var(--accent-panel);border-color:var(--accent-soft)}.leaderboard-rank{font-size:.65rem;font-weight:700;color:var(--text-muted)}.leaderboard-kind{font-size:.9rem;line-height:1;flex-shrink:0;min-width:1.25rem;text-align:right}.leaderboard-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}.leaderboard-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}.leaderboard-name{font-size:.7rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:var(--space-1)}.leaderboard-you{font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);flex-shrink:0}.leaderboard-force{font-size:.6rem;color:var(--text-muted)}.leaderboard-pct{font-size:.7rem;font-weight:700;color:var(--accent);min-width:2.5rem;text-align:right}.chat-panel{position:absolute;right:.5rem;bottom:.5rem;width:300px;height:calc(48% - .75rem);background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border-color-soft);box-shadow:var(--panel-shadow);display:flex;flex-direction:column;overflow:hidden}.chat-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--texture-paper);background-repeat:repeat;opacity:.05;pointer-events:none;border-radius:inherit}.chat-header{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-warm);padding:.45rem .6rem;border-bottom:1px solid var(--border-color);background:var(--bg-panel-alt)}.chat-content{flex:1;overflow-y:auto;padding:.45rem .55rem;display:flex;flex-direction:column;gap:.4rem}.chat-empty{color:var(--text-muted);font-size:.7rem}.chat-message{background:#18222ebf;border:1px solid var(--border-color-soft);border-radius:var(--radius-sm);padding:.35rem .45rem}.chat-message-diplomacy{background:#c9a84c1f;border-color:var(--accent-warm-dim)}.chat-message-system{background:var(--accent-panel);border-color:var(--accent-soft)}.chat-meta{display:flex;align-items:center;gap:.45rem;margin-bottom:.18rem}.chat-tick{color:var(--accent);font-size:.58rem}.chat-author{color:var(--accent-warm);font-size:.62rem;font-weight:600}.chat-kind-pill{margin-left:auto;font-size:.54rem;text-transform:uppercase;letter-spacing:.05em;color:var(--bg-dark);background:var(--accent-warm);border-radius:999px;padding:.08rem .35rem}.chat-kind-pill-system{background:var(--accent)}.chat-body{color:var(--text);font-size:.72rem;line-height:1.3;word-break:break-word}.chat-input-row{display:flex;gap:.35rem;padding:.45rem .5rem;border-top:1px solid var(--border-color);background:#0c121cbf}.chat-input{flex:1;min-width:0;border:1px solid var(--border-color-soft);border-radius:var(--radius-sm);background:#ffffff0a;color:var(--text);font-size:.72rem;padding:.35rem .45rem}.chat-input:focus{outline:none;border-color:var(--accent-soft)}.chat-send-btn{border:1px solid var(--border-warm);background:var(--accent-panel);color:var(--accent);border-radius:var(--radius-sm);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;padding:.35rem .6rem;cursor:pointer}.chat-send-btn:disabled{opacity:.45;cursor:not-allowed}.chat-error{color:var(--danger);font-size:.62rem;padding:0 .5rem .35rem}.chat-help{color:var(--text-muted);font-size:.58rem;padding:0 .5rem .35rem}.chat-help code{color:var(--accent)}.login-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.login-panel{background:#1a1a2ef2;border:1px solid var(--border-color);border-radius:12px;padding:1.5rem 2rem;width:320px;text-align:center}.login-title{font-size:1rem;font-weight:700;color:var(--accent);margin-bottom:1rem;letter-spacing:1px}.login-input{width:100%;padding:.6rem .8rem;background:#ffffff0d;border:1px solid var(--border-color);border-radius:6px;color:var(--text);font-family:inherit;font-size:.85rem;margin-bottom:.75rem;box-sizing:border-box}.login-input:focus{outline:none;border-color:var(--accent)}.login-btn{width:100%;padding:.6rem;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--bg-dark);border:none;border-radius:6px;font-family:inherit;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s}.login-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-soft)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-error{color:var(--danger);font-size:.75rem;margin-top:.5rem}.login-hint{font-size:.65rem;color:var(--text-muted);margin-top:.75rem}.attack-controls{position:absolute;bottom:.5rem;left:.5rem;width:200px;background:var(--bg-panel);border-radius:6px;border:1px solid var(--border-color);padding:.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.attack-title{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--danger);font-weight:700;margin-bottom:.4rem}.attack-field{margin-bottom:.4rem}.attack-field label{display:block;font-size:.6rem;color:var(--text-muted);margin-bottom:.15rem}.attack-select{width:100%;padding:.35rem .5rem;background:#ffffff0d;border:1px solid var(--border-color);border-radius:4px;color:var(--text);font-family:inherit;font-size:.7rem;box-sizing:border-box}.attack-select:focus{outline:none;border-color:var(--accent)}.attack-slider{width:100%;accent-color:var(--danger)}.attack-buttons{display:flex;gap:.3rem;margin-top:.3rem}.attack-btn{flex:1;padding:.4rem;border:none;border-radius:4px;font-family:inherit;font-weight:600;font-size:.7rem;cursor:pointer;transition:all .2s}.attack-btn-go{background:var(--danger);color:#fff}.attack-btn-go:hover:not(:disabled){background:#c0392b}.attack-btn-go:disabled{opacity:.5;cursor:not-allowed}.attack-btn-stop{background:#ffffff1a;color:var(--text);border:1px solid var(--border-color)}.attack-btn-stop:hover{background:#fff3}.attack-status{font-size:.6rem;color:var(--text-muted);margin-top:.3rem;text-align:center}.winner-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-panel);border:3px solid var(--accent-warm);border-radius:16px;padding:2rem 4rem;text-align:center;z-index:100;animation:pulse 2s infinite;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px var(--border-warm) inset,var(--panel-shadow)}.winner-banner h2{font-size:2rem;margin-bottom:1rem}.winner-banner .winner-name{font-size:1.5rem;color:var(--accent)}.winner-banner .winner-next-lobby{margin-top:1rem;font-size:1rem;color:var(--text-muted)}.winner-banner .winner-next-lobby strong{color:var(--accent)}.winner-banner .winner-agents-next{margin-top:.5rem;font-size:.85rem;color:var(--text-muted)}.lobby-strip{position:fixed;top:3.5rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--bg-panel);border:1px solid var(--border-color-soft);border-radius:var(--radius-md);box-shadow:var(--panel-shadow);z-index:40;font-size:.8rem}.lobby-strip .lobby-countdown{font-weight:700;color:var(--accent-warm)}.lobby-strip .lobby-agents-label{color:var(--text-muted)}.lobby-strip .lobby-agents-list{color:var(--text);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes pulse{0%,to{box-shadow:0 0 0 1px var(--border-warm) inset,0 0 24px var(--accent-warm-dim)}50%{box-shadow:0 0 0 1px var(--border-warm) inset,0 0 32px #c9a84c80}}.leaderboard-content::-webkit-scrollbar{width:6px}.leaderboard-content::-webkit-scrollbar-track{background:transparent}.leaderboard-content::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #131a18;--bg-panel: rgba(28, 32, 30, .95);--bg-panel-alt: rgba(32, 38, 35, .93);--border-color: #353d38;--border-color-soft: rgba(180, 165, 130, .32);--border-warm: rgba(198, 178, 128, .45);--accent: #5eb8b0;--accent-hover: #4aa89f;--accent-soft: rgba(94, 184, 176, .45);--accent-panel: rgba(94, 184, 176, .12);--accent-warm: #c9a84c;--accent-warm-dim: rgba(201, 168, 76, .75);--danger: #d96b6b;--text: #e4e9e6;--text-muted: #8f9d98;--water-deep: #3d6b8a;--water-mid: #4a7a9a;--parchment: #d4c4a8;--chart-ink: #3d352b;--texture-paper: url(/textures/cream-paper.png);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--panel-shadow: 0 8px 24px rgba(0, 0, 0, .35);--header-shadow: 0 4px 16px rgba(0, 0, 0, .25);--hud-rail: linear-gradient(90deg, var(--accent-warm-dim), var(--accent) 50%, var(--accent-warm-dim))}body{background:var(--bg-dark);color:var(--text);font-family:Plus Jakarta Sans,DM Sans,system-ui,sans-serif;height:100vh;overflow:hidden}#app{height:100vh;display:flex;flex-direction:column}