html,body{height:100%;margin:0;overflow:hidden}body{background-color:#0a0e1a}html.light-mode body{background-color:#f8fafc}html.light-mode #game-canvas{background-color:#fff;box-shadow:0 20px 50px #0f172a14}#game-canvas{background-color:#0a0e1a}:root{--hud-bg:#141729e0;--hud-border:#ffb43c1f;--hud-shadow:0 4px 24px #0009;--hud-text:#f5ebdcf2;--hud-accent:#ffb43c;--hud-label:#b49b82cc;--hud-radius:8px;--hud-btn-bg:#1e2337b3;--hud-btn-active-bg:#dc9637d9;--cell-high:255, 185, 70;--cell-low:200, 145, 50;--cell-hi-hue:45;--cell-hi-sat:80%;--cell-hi-light:55%;--cell-lo-hue:40;--cell-lo-sat:70%;--cell-lo-light:45%;--shadow-color:255, 180, 60;--minimap-dot:255, 185, 70;--viewport-stroke:220, 175, 20;--log-ts:#8a7a6a}html.light-mode{--hud-bg:#f8fafce6;--hud-border:#60a5fa40;--hud-shadow:0 4px 24px #0f172a1f;--hud-text:#1e293be6;--hud-accent:#3b82f6e6;--hud-label:#64748b;--hud-btn-bg:#e2e8f0cc;--hud-btn-active-bg:#60a5fabf;--cell-high:37, 99, 235;--cell-low:147, 197, 253;--cell-hi-hue:221;--cell-hi-sat:83%;--cell-hi-light:53%;--cell-lo-hue:213;--cell-lo-sat:94%;--cell-lo-light:78%;--shadow-color:37, 99, 235;--minimap-dot:59, 130, 246;--viewport-stroke:234, 179, 8;--log-ts:#475569}.hud-panel{background:var(--hud-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--hud-border);box-shadow:var(--hud-shadow);border-radius:var(--hud-radius);color:var(--hud-text);pointer-events:none;z-index:100;font-family:JetBrains Mono,Fira Code,monospace;font-size:13px;position:fixed}.hud-drag-handle{pointer-events:auto;cursor:move;-webkit-user-select:none;user-select:none;letter-spacing:1.5px;color:#7d9c68b3;text-transform:uppercase;padding:8px 12px 4px;font-size:10px}html.light-mode .hud-drag-handle{color:#3b82f6b3}.hud-content{pointer-events:none;padding:4px 12px 10px}.hud-item{justify-content:space-between;align-items:center;padding:3px 0;display:flex}.hud-label{color:var(--hud-label);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:600}.hud-value{color:var(--hud-accent);font-weight:700}#status-panel{min-width:180px;top:24px;right:24px}#history-wall{width:260px;bottom:24px;left:24px}#minimap-panel{width:180px;padding:0;top:24px;left:24px;overflow:hidden}#minimap-panel canvas{width:180px;height:180px;display:block}.minimap-stats{color:var(--hud-label);padding:6px 10px 8px;font-size:11px;line-height:1.6}#control-panel{width:180px;bottom:24px;right:24px}.cp-self-toggle{pointer-events:auto;color:var(--hud-text);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:16px;line-height:1}.cp-body{padding:4px 8px 10px}.cp-section{flex-direction:column;gap:5px;margin-bottom:6px;display:flex}.cp-section+.cp-section{border-top:1px solid var(--hud-border);padding-top:6px}.cp-btn{pointer-events:auto;background:var(--hud-btn-bg);border:1px solid var(--hud-border);color:var(--hud-text);cursor:pointer;text-align:left;border-radius:6px;padding:6px 10px;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px;transition:background .15s,color .15s}.cp-btn:hover{background:#d6bca014}.cp-btn.active{background:var(--hud-btn-active-bg);color:#fff;border-color:#0000}html.light-mode .cp-btn:hover{background:#2563eb14}.log-entry{opacity:0;word-break:break-all;padding:2px 0;font-size:11px;animation:.3s cubic-bezier(.16,1,.3,1) forwards slideIn;transform:translate(-10px)}@keyframes slideIn{to{opacity:1;transform:translate(0)}}.glass-effect{background:var(--hud-bg);-webkit-backdrop-filter:blur(16px)saturate(1.4)}.panel-header{pointer-events:auto;cursor:move;-webkit-user-select:none;user-select:none;letter-spacing:1.5px;color:#7d9c68b3;text-transform:uppercase;justify-content:space-between;align-items:center;padding:8px 12px 4px;font-size:10px;display:flex}html.light-mode .panel-header{color:#3b82f6b3}.sound-body{pointer-events:auto;padding:4px 8px 10px}.sp-section{padding:6px 0 4px}.sp-section+.sp-section{border-top:1px solid var(--hud-border);margin-top:2px}.sp-section-title{letter-spacing:1.5px;text-transform:uppercase;color:var(--hud-label);opacity:.75;margin-bottom:4px;font-size:9px;font-weight:600}.sp-subsection.disabled{opacity:.32;pointer-events:none}.sp-subsection{transition:opacity .2s}.sp-toggle-row{cursor:pointer;color:var(--hud-text);pointer-events:auto;align-items:center;gap:8px;font-size:12px;display:flex}.sp-toggle-cb{accent-color:var(--hud-accent);pointer-events:auto;cursor:pointer}.sp-radio-group{flex-direction:column;gap:2px;display:flex}.sp-radio-row{cursor:pointer;color:var(--hud-label);pointer-events:auto;align-items:center;gap:6px;padding:2px 0;font-size:11px;display:flex}.sp-radio-row input[type=radio]{accent-color:var(--hud-accent);pointer-events:auto;cursor:pointer}.sp-vol-row{align-items:center;gap:6px;display:flex}.sp-vol-slider{cursor:pointer;pointer-events:auto;appearance:none;background:var(--hud-border);border:none;border-radius:2px;outline:none;flex:1;min-width:0;height:3px}.sp-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--hud-accent);cursor:pointer;border-radius:50%;width:12px;height:12px;box-shadow:0 0 4px #0006}.sp-vol-slider::-moz-range-thumb{background:var(--hud-accent);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px;box-shadow:0 0 4px #0006}.sp-vol-value{color:var(--hud-accent);text-align:right;min-width:32px;font-size:11px;font-weight:700}.hud-panel.hidden{display:none}#sound-panel{width:210px;bottom:280px;right:24px}.sound-volume-row{border-top:1px solid var(--hud-border);justify-content:space-between;align-items:center;gap:8px;margin-top:4px;padding:6px 0 2px;display:flex}.sp-volume-label{color:var(--hud-label);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;font-size:11px;font-weight:600}.sound-volume-control{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.sp-volume-slider{cursor:pointer;pointer-events:auto;appearance:none;background:var(--hud-border);border:none;border-radius:2px;outline:none;flex:1;min-width:0;height:3px}.sp-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--hud-accent);cursor:pointer;border-radius:50%;width:12px;height:12px;box-shadow:0 0 4px #0006}.sp-volume-slider::-moz-range-thumb{background:var(--hud-accent);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px;box-shadow:0 0 4px #0006}.sp-volume-value{color:var(--hud-accent);text-align:right;min-width:32px;font-size:11px;font-weight:700}.sound-placeholder{color:var(--hud-label);opacity:.6;letter-spacing:.5px;padding:6px 0 2px;font-size:10px;font-style:italic}