:root{--bg-primary:#020208;--bg-secondary:#0a0a1a;--bg-panel:rgba(10,10,26,0.85);--accent-cyan:#0ff;--accent-magenta:#f0f;--accent-purple:#90f;--accent-blue:#3b82f6;--accent-green:#0f8;--accent-red:#ff2a6d;--accent-yellow:#fc0;--text-primary:#e0e0ff;--text-secondary:#88a;--text-dim:#556;--border-glow:rgba(0,255,255,0.2);--font-header:'Orbitron',sans-serif;--font-body:'Rajdhani',sans-serif;--font-mono:'Share Tech Mono',monospace;--bg:#08080E;--text:#F0EDE6;--muted:#8884A0;--dim:#44415A;--border:rgba(255,255,255,0.07);--border-bright:rgba(255,255,255,0.13)}:root[data-theme="light"]{--bg-primary:#FAFAF8;--bg-secondary:#F5F3EF;--bg-panel:rgba(255,255,255,0.88);--text-primary:#1C1917;--text-secondary:#78716C;--text-dim:#A8A29E;--border-glow:rgba(0,100,200,0.15);--bg:#FAFAF8;--text:#1C1917;--muted:#78716C;--dim:#A8A29E;--border:rgba(0,0,0,0.08);--border-bright:rgba(0,0,0,0.14)}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);overflow:hidden;user-select:none}.back-to-games{position:fixed;top:calc(0.5rem+56px);left:50%;transform:translateX(-50%);z-index:15;padding:0.375rem 1rem;font-size:0.8rem;font-family:var(--font-body);color:var(--text-secondary);background:var(--bg-panel);backdrop-filter:blur(10px);border:1px solid var(--border-glow);border-radius:999px;text-decoration:none;transition:color 0.2s,border-color 0.2s}.back-to-games:hover{color:var(--accent-cyan);border-color:var(--accent-cyan)}#game-canvas{position:fixed;top:0;left:0;display:block;width:100vw;height:100vh;z-index:1}.title-screen{position:fixed;inset:0;z-index:100;background:linear-gradient(to bottom,#0f172a,#050505);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:3rem 0;overflow:hidden}.title-screen.hidden{display:none}.title-rabbits{position:absolute;inset:0;overflow:hidden;pointer-events:none}.title-rabbit{position:absolute;animation:bounce var(--bounce-speed,1s) ease-in-out infinite}@keyframes moveRight{from{left:-15%}to{left:115%}}@keyframes moveLeft{from{left:115%}to{left:-15%}}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.title-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:3rem}.title-logo{text-align:center;animation:pulse 2s ease-in-out infinite}.title-logo h1{font-family:var(--font-header);font-size:clamp(2.5rem,8vw,5rem);font-weight:900;letter-spacing:-2px;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple),var(--accent-magenta));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 40px rgba(153,0,255,0.3)}.title-logo p{font-family:var(--font-mono);font-size:0.875rem;letter-spacing:4px;text-transform:uppercase;color:rgba(0,255,255,0.5);margin-top:0.5rem}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.85}}.title-buttons{display:flex;flex-direction:column;gap:1rem;width:250px}.btn-start{padding:1rem 2rem;background:var(--text-primary);color:var(--bg-primary);font-family:var(--font-header);font-weight:700;border:none;border-radius:999px;cursor:pointer;transition:all 0.2s;box-shadow:0 0 20px rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;gap:0.75rem;font-size:1rem}.btn-start:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(0,255,255,0.5)}.btn-start:active{transform:scale(0.95)}.btn-load{padding:1rem 2rem;background:rgba(255,255,255,0.05);color:var(--text-primary);font-family:var(--font-header);font-weight:700;border:1px solid rgba(255,255,255,0.1);border-radius:999px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:0.75rem;font-size:1rem}.btn-load:hover{background:rgba(255,255,255,0.1);transform:scale(1.05)}.btn-load:active{transform:scale(0.95)}.title-footer{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:0.25rem;font-family:var(--font-mono);font-size:0.75rem;color:rgba(255,255,255,0.4)}.title-footer a{color:rgba(0,255,255,0.5);text-decoration:none;transition:color 0.2s}.title-footer a:hover{color:var(--accent-cyan)}.hud-time{position:fixed;top:calc(1rem+76px);right:1rem;z-index:10;display:flex;align-items:center;gap:0.75rem;background:var(--bg-panel);backdrop-filter:blur(10px);padding:0.5rem 1rem;border-radius:999px;border:1px solid var(--border-glow)}.hud-time-icon{font-size:1rem}.hud-time-text{font-family:var(--font-mono);font-size:1.25rem;font-weight:700;letter-spacing:2px;color:var(--text-primary)}.hud-time-day{font-size:0.75rem;font-weight:700;text-transform:uppercase;color:var(--text-secondary);background:rgba(255,255,255,0.1);padding:0.125rem 0.375rem;border-radius:4px}.hud-stats{position:fixed;top:calc(5rem+56px);right:1rem;z-index:10;display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem}.hud-stat-panel{background:var(--bg-panel);backdrop-filter:blur(10px);padding:0.75rem;border-radius:8px;border:1px solid var(--border-glow);width:190px}.hud-stat-label{font-size:0.625rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:0.25rem}.hud-stat-value{font-family:var(--font-mono);font-size:1.25rem;font-weight:600;color:var(--text-primary)}.hud-stat-bar{width:100%;height:4px;background:#333;border-radius:2px;margin-top:0.5rem;overflow:hidden}.hud-stat-bar-fill{height:100%;transition:width 0.5s,background 0.5s}.agent-hud{position:fixed;top:calc(5rem+56px);left:1rem;z-index:10;width:250px;background:var(--bg-panel);backdrop-filter:blur(10px);padding:1rem;border-radius:8px;border:1px solid var(--border-glow)}.agent-hud.hidden{display:none}.agent-hud-header{display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:0.5rem;margin-bottom:0.75rem}.agent-hud-name{font-family:var(--font-header);font-weight:700;font-size:1rem;color:var(--accent-cyan)}.agent-hud-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;font-size:0.75rem}.agent-hud-label{color:var(--text-secondary)}.agent-hud-value{text-align:right;font-family:var(--font-mono);color:var(--text-primary)}.agent-hud-genome{margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid rgba(255,255,255,0.1)}.agent-hud-genome-title{font-size:0.625rem;text-transform:uppercase;color:var(--text-dim);font-weight:700;letter-spacing:1px;margin-bottom:0.25rem}.agent-hud-gene-row{display:flex;justify-content:space-between;font-size:0.75rem;padding:0.125rem 0}.agent-hud-gene-label{color:var(--text-secondary)}.top-left-controls{position:fixed;top:calc(1rem+56px);left:1rem;z-index:20;display:flex;align-items:center;gap:0.5rem}.btn-icon{padding:0.625rem;background:var(--bg-panel);backdrop-filter:blur(10px);border:1px solid var(--border-glow);border-radius:8px;color:var(--text-primary);cursor:pointer;transition:all 0.2s;font-size:1.125rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px}.btn-icon:hover{background:rgba(0,255,255,0.1);color:var(--accent-cyan);border-color:var(--accent-cyan)}.settings-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);padding:1rem}.settings-modal.hidden{display:none}.settings-panel{width:100%;max-width:640px;background:var(--bg-secondary);border:1px solid var(--border-glow);border-radius:12px;box-shadow:0 0 40px rgba(0,0,0,0.5);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.4)}.settings-title{font-family:var(--font-header);font-size:1.25rem;font-weight:700;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.settings-header-actions{display:flex;align-items:center;gap:0.5rem}.settings-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.2);overflow-x:auto}.settings-tab{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;font-size:0.875rem;font-weight:500;border:none;border-bottom:2px solid transparent;background:none;color:var(--text-secondary);cursor:pointer;transition:all 0.2s;white-space:nowrap;font-family:var(--font-body)}.settings-tab:hover{color:var(--text-primary);background:rgba(255,255,255,0.05)}.settings-tab.active{border-bottom-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(0,255,255,0.05)}.settings-content{padding:1.5rem;overflow-y:auto}.settings-tab-content{display:none}.settings-tab-content.active{display:block}.slider-group{margin-bottom:1.5rem}.slider-label{display:flex;justify-content:space-between;font-size:0.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:0.5rem}.slider-value{color:var(--accent-cyan);font-family:var(--font-mono)}input[type="range"]{width:100%;height:4px;background:#333;border-radius:2px;appearance:none;cursor:pointer}input[type="range"]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:var(--accent-cyan);border-radius:50%;cursor:pointer;box-shadow:0 0 8px rgba(0,255,255,0.5)}input[type="range"]::-moz-range-thumb{width:16px;height:16px;background:var(--accent-cyan);border-radius:50%;cursor:pointer;border:none}.view-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin-bottom:1.5rem}.view-mode-btn{padding:0.75rem;font-size:0.875rem;font-weight:500;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:0.5rem;font-family:var(--font-body)}.view-mode-btn:hover{background:rgba(255,255,255,0.05);color:var(--text-primary)}.view-mode-btn.active{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.4);color:var(--text-primary)}.view-mode-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:0.75rem;background:rgba(255,255,255,0.05);border-radius:8px;margin-bottom:0.75rem}.toggle-label{font-size:0.875rem;font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:0.5rem}.toggle-switch{width:48px;height:24px;border-radius:12px;border:none;cursor:pointer;transition:background 0.2s;position:relative;background:#333}.toggle-switch.on{background:var(--accent-blue)}.toggle-switch::after{content:'';position:absolute;top:4px;left:4px;width:16px;height:16px;background:white;border-radius:50%;transition:transform 0.2s}.toggle-switch.on::after{transform:translateX(24px)}.keybinding-row{display:flex;align-items:center;justify-content:space-between;padding:0.5rem;border-radius:4px;transition:background 0.2s}.keybinding-row:hover{background:rgba(255,255,255,0.05)}.keybinding-action{font-size:0.875rem;color:var(--text-secondary);text-transform:capitalize}.keybinding-key{padding:0.25rem 0.75rem;font-family:var(--font-mono);font-size:0.75rem;border:1px solid rgba(255,255,255,0.2);border-radius:4px;background:rgba(0,0,0,0.5);color:var(--text-secondary);cursor:pointer;min-width:80px;text-align:center;transition:all 0.2s}.keybinding-key:hover{border-color:rgba(255,255,255,0.5);color:var(--text-primary)}.keybinding-key.rebinding{background:var(--accent-blue);color:white;border-color:var(--accent-blue);animation:pulse 1s ease-in-out infinite}.error-screen{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.8)}.error-screen.hidden{display:none}.error-panel{background:var(--bg-secondary);border:1px solid rgba(255,42,109,0.5);padding:2rem;border-radius:12px;max-width:400px;text-align:center}.error-icon{font-size:3rem;margin-bottom:1rem;animation:pulse 1s ease-in-out infinite}.error-title{font-family:var(--font-header);font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:0.5rem}.error-message{font-size:0.875rem;color:var(--text-secondary);margin-bottom:1.5rem}.error-details{background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.05);padding:1rem;border-radius:4px;text-align:left;margin-bottom:1.5rem;max-height:128px;overflow:auto}.error-details code{font-family:var(--font-mono);font-size:0.75rem;color:rgba(255,100,100,0.8);word-break:break-all}.btn-retry{width:100%;padding:0.75rem;background:linear-gradient(90deg,#c00,#a00);color:white;border:none;border-radius:8px;font-family:var(--font-header);font-weight:700;cursor:pointer;transition:all 0.2s;font-size:0.875rem}.btn-retry:hover{background:linear-gradient(90deg,#d00,#b00)}.fps-counter{position:fixed;bottom:1rem;left:1rem;z-index:10;font-family:var(--font-mono);font-size:0.875rem;color:var(--accent-green);background:var(--bg-panel);padding:0.25rem 0.5rem;border-radius:4px;border:1px solid var(--border-glow)}.fps-counter.hidden{display:none}:root[data-theme="light"] .settings-header{background:rgba(0,0,0,0.05);border-bottom-color:rgba(0,0,0,0.1)}:root[data-theme="light"] .settings-tabs{background:rgba(0,0,0,0.03);border-bottom-color:rgba(0,0,0,0.1)}:root[data-theme="light"] .agent-hud-header{border-bottom-color:rgba(0,0,0,0.1)}:root[data-theme="light"] .agent-hud-genome{border-top-color:rgba(0,0,0,0.1)}:root[data-theme="light"] .hud-stat-bar{background:rgba(0,0,0,0.1)}:root[data-theme="light"] .toggle-switch{background:rgba(0,0,0,0.15)}:root[data-theme="light"] input[type="range"]{background:rgba(0,0,0,0.1)}:root[data-theme="light"] .error-details{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.1)}:root[data-theme="light"] .keybinding-key{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.15);color:var(--text-secondary)}@media (max-width:768px){.agent-hud{width:200px;font-size:0.75rem}.hud-stat-panel{width:150px}.settings-panel{max-width:95vw}.view-modes{grid-template-columns:1fr}}