:root{--color-bg: #F8F7F4;--color-panel: #FFFFFF;--color-border: #E4E2DD;--color-grid-minor: #EAE8E3;--color-grid-major: #D8D5CE;--color-text: #2B2A28;--color-text-muted: #8A8780;--color-team1: #1D4E89;--color-team2: #F76707;--color-accent: #12B886;--color-impact: #FA5252;--color-success: #2F9E44;--color-terrain: #B4B2A9;--font-display: "Space Grotesk", sans-serif;--font-ui: "Space Grotesk", sans-serif;--font-mono: "IBM Plex Mono", monospace;--bg-base: var(--color-bg);--bg-surface: var(--color-panel);--bg-raised: var(--color-panel);--bg-input: var(--color-panel);--text-primary: var(--color-text);--text-secondary: var(--color-text-muted);--text-muted: var(--color-text-muted);--team-1: var(--color-team1);--team-1-dim: rgba(29, 78, 137, .08);--team-2: var(--color-team2);--team-2-dim: rgba(247, 103, 7, .08);--accent: var(--color-team1);--accent-dim: rgba(59, 91, 219, .08);--accent-hover: #314db8;--success: var(--color-success);--danger: var(--color-impact);--warn: #c08b2e;--border: var(--color-border);--border-focus: var(--color-team1);--font-sans: var(--font-ui);--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.25rem;--sp-6: 1.5rem;--sp-8: 2rem;--sp-10: 2.5rem;--radius: 8px;--radius-lg: 14px;--ease: cubic-bezier(.25, .1, .25, 1);--z-game: 1;--z-overlay: 100;--z-hud: 200;--z-menu: 300;--z-modal: 400;--z-toast: 500}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}#game-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-game)}#game-container canvas{display:block;width:100%!important;height:100%!important}#ui-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-overlay);pointer-events:none}#ui-overlay>*{pointer-events:auto}.theme-toggle-btn{position:absolute;top:var(--sp-4);right:var(--sp-4);background:transparent;border:1px solid var(--border);color:var(--text-secondary);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}.theme-toggle-btn:hover{background:var(--bg-raised);color:var(--text-primary);border-color:var(--border-focus)}[data-theme=light] .theme-icon-light{display:block}[data-theme=light] .theme-icon-dark,[data-theme=dark] .theme-icon-light{display:none!important}[data-theme=dark] .theme-icon-dark{display:block!important}.menu-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-menu);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:12vh;gap:var(--sp-3);background:var(--bg-base);animation:fadeIn .4s var(--ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.menu-title{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,50px);font-weight:700;letter-spacing:-1px;color:var(--color-text)}.menu-subtitle{font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--color-text-muted);letter-spacing:2px;text-transform:uppercase;margin-top:calc(-1 * var(--sp-1))}.menu-buttons{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:2rem}.menu-btn{width:100%;padding:.85rem 1.5rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-surface);color:var(--text-primary);font-family:var(--font-ui);font-size:.98rem;font-weight:500;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 8px #00000008}.btn-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px}.menu-btn:hover{background:var(--bg-raised);border-color:#0000001f;transform:translateY(-1px);box-shadow:0 4px 14px #0000000f}.menu-btn:active{transform:scale(.98);transition-duration:60ms}.menu-btn--primary{background:var(--color-team1);border-color:var(--color-team1);color:#fff;font-weight:500;box-shadow:0 4px 14px #3b5bdb40}.menu-btn--primary:hover{background:#314db8;border-color:#314db8;color:#fff;box-shadow:0 6px 20px #3b5bdb59}.menu-btn--secondary{justify-content:flex-start;color:var(--color-text);background:#fff;border:.5px solid var(--color-border)}.menu-btn--disabled{opacity:.7;cursor:not-allowed;box-shadow:none;color:var(--color-terrain)}.menu-btn--disabled:hover{background:var(--bg-surface);border-color:var(--border);transform:none;box-shadow:none}.menu-btn-badge{background:#0000000f;color:var(--color-terrain);font-family:var(--font-mono);font-size:10px;font-weight:500;padding:2px 6px;border-radius:4px;margin-left:auto;vertical-align:middle}.setup-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .2s var(--ease)}.setup-modal-card{background:var(--bg-surface);border-radius:var(--radius-lg);max-width:620px;width:95%;padding:var(--sp-6) var(--sp-8);text-align:left;box-shadow:0 16px 48px #0000001f}.setup-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5)}.setup-modal-header h2{font-size:1.3rem;font-weight:800;color:var(--text-primary);margin:0}.setup-modal-close{background:transparent;border:none;color:var(--text-muted);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .15s var(--ease),background .15s var(--ease)}.setup-modal-close:hover{color:var(--text-primary);background:var(--bg-raised)}.setup-option-group{margin-bottom:var(--sp-4)}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.setup-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--sp-2)}.setup-pill-row{display:flex;gap:6px;background:var(--bg-raised);padding:4px;border-radius:10px;border:1px solid var(--border)}.setup-pill-btn{flex:1 1 auto;padding:6px 4px;border:none;border-radius:7px;background:transparent;color:var(--text-secondary);font-family:var(--font-sans);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .18s var(--ease);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.setup-pill-btn:hover{color:var(--text-primary)}.setup-pill-btn--selected{background:var(--bg-surface);color:var(--accent);box-shadow:0 2px 6px #00000014}.setup-start-btn{margin-top:var(--sp-5);width:100%}.menu-footer{position:absolute;bottom:2rem;font-size:.78rem;color:var(--text-muted)}.menu-footer a{color:var(--text-secondary);text-decoration:none}.menu-footer a:hover{color:var(--text-primary)}.credits-panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:#00000040;animation:fadeIn .2s var(--ease)}.credits-card{max-width:420px;width:90%;padding:var(--sp-10);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:0 16px 48px #0000001a}.credits-card h2{font-size:1.2rem;font-weight:700;margin-bottom:var(--sp-4);color:var(--text-primary)}.credits-card p{color:var(--text-secondary);margin-bottom:var(--sp-3);line-height:1.65;font-size:.9rem}.credits-close-btn{margin-top:var(--sp-5);padding:var(--sp-2) var(--sp-6);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);color:var(--text-primary);font-family:var(--font-sans);font-size:.85rem;cursor:pointer;transition:background .18s var(--ease)}.credits-close-btn:hover{background:#e4e4e8}.hud-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-hud);pointer-events:none;animation:fadeIn .3s var(--ease)}.hud-container>*{pointer-events:auto}.hud-topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5)}.hud-score{display:flex;align-items:center;gap:var(--sp-5);font-family:var(--font-sans)}.hud-team{display:flex;align-items:center;gap:var(--sp-2);font-size:.85rem;font-weight:600}.hud-team-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.hud-team--blue .hud-team-dot{background:var(--team-1)}.hud-team--red .hud-team-dot{background:var(--team-2)}.hud-team--blue{color:var(--team-1)}.hud-team--red{color:var(--team-2)}.hud-vs{font-size:.7rem;color:var(--text-muted);font-weight:400}.hud-turn-indicator{position:absolute;left:50%;transform:translate(-50%);font-size:.8rem;font-weight:500;color:var(--text-secondary);padding:var(--sp-1) var(--sp-3);border-radius:var(--radius);background:var(--bg-surface);border:1px solid var(--border)}.hud-turn-indicator--player{color:var(--team-1);border-color:#3b7dd833}.hud-turn-indicator--bot{color:var(--warn);border-color:#c08b2e33}.hud-bottombar{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5) var(--sp-4)}.hud-input-row{display:flex;align-items:center;gap:var(--sp-2);width:100%;max-width:580px}.hud-dir-btn{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);background:#f4f5f8;color:var(--text-primary);font-family:var(--font-sans);font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s var(--ease);white-space:nowrap;-webkit-user-select:none;user-select:none}.hud-dir-btn:hover{background:#e8ebf2;border-color:#1d4e89;color:#1d4e89}.hud-dir-icon{font-weight:800;font-size:1rem;color:#1d4e89}.hud-fx-label{font-family:var(--font-mono);font-size:.95rem;font-weight:500;color:var(--text-muted);white-space:nowrap}.hud-function-input{flex:1;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text-primary);font-family:var(--font-mono);font-size:.95rem;outline:none;transition:border-color .15s var(--ease);box-shadow:0 1px 3px #0000000a}.hud-function-input:focus{border-color:var(--border-focus)}.hud-function-input::placeholder{color:var(--text-muted)}.hud-function-input:disabled{opacity:.3;cursor:not-allowed}.hud-fire-btn{padding:var(--sp-2) var(--sp-5);border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:#fff;font-family:var(--font-sans);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .18s var(--ease),transform .12s var(--ease)}.hud-fire-btn:hover{background:var(--accent-hover)}.hud-fire-btn:active{transform:scale(.96)}.hud-fire-btn:disabled{opacity:.25;cursor:not-allowed}.hud-error{font-size:.8rem;color:var(--danger);font-weight:500;max-width:520px;text-align:center;animation:shake .35s var(--ease)}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-3px)}}.hud-bot-thinking{display:flex;align-items:center;gap:var(--sp-2);font-size:.85rem;color:var(--warn);font-weight:500}.hud-bot-thinking-dots{display:inline-flex;gap:3px}.hud-bot-thinking-dots span{width:4px;height:4px;border-radius:50%;background:var(--warn);animation:dotPulse 1s ease-in-out infinite}.hud-bot-thinking-dots span:nth-child(2){animation-delay:.15s}.hud-bot-thinking-dots span:nth-child(3){animation-delay:.3s}@keyframes dotPulse{0%,80%,to{opacity:.2}40%{opacity:1}}.hud-actions{position:absolute;bottom:var(--sp-3);left:var(--sp-5);display:flex;gap:var(--sp-2)}.hud-action-btn{padding:var(--sp-1) var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);color:var(--text-muted);font-family:var(--font-sans);font-size:.75rem;font-weight:500;cursor:pointer;transition:color .15s var(--ease),background .15s var(--ease);box-shadow:0 1px 3px #0000000a}.hud-action-btn:hover{color:var(--text-primary);background:var(--bg-raised)}.hud-history{position:absolute;top:48px;right:var(--sp-4);max-height:calc(100vh - 140px);width:250px;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 4px 20px #00000014;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease);z-index:250}.hud-history--hidden{opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;visibility:hidden}.hud-history-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);flex-shrink:0}.hud-history-title{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.hud-history-close-btn{background:transparent;border:none;color:var(--text-muted);font-size:.75rem;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s var(--ease),background .15s var(--ease)}.hud-history-close-btn:hover{color:var(--text-primary);background:var(--bg-raised)}.hud-history-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding:0 var(--sp-2) var(--sp-2)}.hud-history-list::-webkit-scrollbar{width:3px}.hud-history-list::-webkit-scrollbar-track{background:transparent}.hud-history-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.hud-history-entry{display:flex;align-items:baseline;gap:var(--sp-2);padding:3px var(--sp-2);border-radius:4px;font-size:.75rem;line-height:1.4;background:var(--bg-surface);border:1px solid var(--border)}.hud-history-entry--team0 .hud-history-who{color:var(--team-1)}.hud-history-entry--team1 .hud-history-who{color:var(--team-2)}.hud-history-who{font-weight:600;font-size:.65rem;text-transform:uppercase;flex-shrink:0;width:28px}.hud-history-fn{font-family:var(--font-mono);font-size:.72rem;color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-history-result{font-size:.65rem;font-weight:500;flex-shrink:0}.hud-history-result--hit{color:var(--success)}.hud-history-result--miss{color:var(--text-muted)}.result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .35s var(--ease)}.result-title{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-.02em}.result-title--victory{color:var(--success)}.result-title--defeat{color:var(--danger)}.result-subtitle{font-size:.95rem;color:var(--text-secondary);font-weight:400}.result-actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-3)}.result-btn{padding:var(--sp-3) var(--sp-8);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);color:var(--text-primary);font-family:var(--font-sans);font-size:.9rem;font-weight:500;cursor:pointer;transition:background .18s var(--ease);box-shadow:0 1px 4px #0000000f}.result-btn:hover{background:var(--bg-raised)}.result-btn--primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.result-btn--primary:hover{background:var(--accent-hover)}.toast{position:fixed;top:var(--sp-6);left:50%;transform:translate(-50%) translateY(-12px);z-index:var(--z-toast);padding:var(--sp-2) var(--sp-5);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);color:var(--text-primary);font-family:var(--font-sans);font-size:.85rem;font-weight:500;opacity:0;box-shadow:0 4px 16px #00000014;animation:toastIn .2s var(--ease) forwards,toastOut .2s var(--ease) 2.5s forwards}@keyframes toastIn{to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastOut{to{opacity:0;transform:translate(-50%) translateY(-12px)}}.tutorial-card{max-width:520px;width:92%;text-align:left;max-height:85vh;overflow-y:auto}.tutorial-card h2{font-size:1.3rem;font-weight:800;margin-bottom:var(--sp-4);color:var(--text-primary);text-align:center}.tutorial-section{margin-bottom:var(--sp-4)}.tutorial-section h3{font-size:.88rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--sp-1)}.tutorial-section p{font-size:.85rem;color:var(--text-secondary);line-height:1.5;margin-bottom:0}.tutorial-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-1)}.tutorial-list li{font-size:.82rem;color:var(--text-secondary);line-height:1.4}.tutorial-card code{font-family:var(--font-mono);font-size:.8rem;background:var(--bg-raised);padding:1px 5px;border-radius:4px;border:1px solid var(--border);color:var(--accent)}.tutorial-close-btn{display:block;margin:var(--sp-4) auto 0;width:100%}@media(max-width:768px){.hud-history{display:none}}@media(max-width:640px){.hud-topbar{flex-direction:column;gap:var(--sp-2);align-items:flex-start}.hud-input-row{flex-direction:column}.hud-function-input{width:100%}.menu-buttons{max-width:260px}}#version-label{position:fixed;bottom:12px;right:12px;font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);opacity:0;pointer-events:none;z-index:9999;animation:fadeInVersion .4s ease-in .3s forwards}@keyframes fadeInVersion{to{opacity:.6}}