:root{--theme-bg: #e8e4dc;--theme-accent: #c4a052;--theme-accent-bg: rgba(139, 115, 53, .7);--theme-accent-hover: rgba(139, 115, 53, .9);--theme-accent-15: rgba(196, 160, 82, .15);--theme-accent-30: rgba(196, 160, 82, .3);--theme-accent-50: rgba(196, 160, 82, .5);--theme-accent-70: rgba(196, 160, 82, .7);--theme-text: #d4c9a8;--theme-text-dim: #a89870;--theme-text-hint: #7a6e50;--theme-panel-bg: rgba(50, 46, 38, .88);--theme-input-bg: #3a3530;--theme-input-border: #5a5040;--theme-section-border: rgba(168, 152, 112, .2)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--theme-bg)}#gameCanvas{display:block;width:100%;height:100%;cursor:crosshair;outline:none}#gameCanvas:focus-visible{outline:2px solid var(--theme-accent);outline-offset:-2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#instructions{position:fixed;bottom:24px;left:50%;transform:translate(-50%);font-family:Courier New,monospace;font-size:13px;color:#888;letter-spacing:2px;text-transform:uppercase;pointer-events:none;opacity:1;transition:opacity 1.5s ease-out}#instructions.hidden{opacity:0}#settingsToggle{position:fixed;top:16px;right:16px;z-index:50;width:36px;height:36px;border:none;border-radius:50%;background:var(--theme-accent-bg);color:var(--theme-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#settingsToggle:hover{background:var(--theme-accent-hover);transform:rotate(30deg)}#settingsPanel{position:fixed;top:60px;right:16px;z-index:50;background:var(--theme-panel-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;padding:16px;min-width:220px;max-height:calc(100vh - 80px);overflow-y:auto;font-family:Courier New,monospace;font-size:12px;color:var(--theme-text);box-shadow:0 4px 16px #0000004d;transform:translate(0);opacity:1;transition:transform .25s ease,opacity .2s ease}#settingsPanel.hidden{transform:translate(20px);opacity:0;pointer-events:none}.settings-group{margin-bottom:12px}.settings-group:last-child{margin-bottom:0}.settings-group label{display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:1px;font-size:10px;color:var(--theme-text-dim)}.slider-value{float:right;color:var(--theme-text);font-variant-numeric:tabular-nums}.settings-group input[type=range]{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--theme-input-border);border-radius:2px;outline:none;cursor:pointer}.settings-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--theme-accent);cursor:pointer}.settings-group input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--theme-accent);border:none;cursor:pointer}.settings-group select{width:100%;padding:4px 6px;background:var(--theme-input-bg);color:var(--theme-text);border:1px solid var(--theme-input-border);border-radius:4px;font-family:Courier New,monospace;font-size:12px;cursor:pointer;outline:none}.settings-group select:focus{border-color:var(--theme-accent)}.settings-section{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--theme-section-border)}.settings-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.settings-section-title{text-transform:uppercase;letter-spacing:2px;font-size:9px;color:var(--theme-accent);margin-bottom:10px;font-weight:700}.settings-hint{font-size:9px;color:var(--theme-text-hint);margin-bottom:8px;line-height:1.3}.mix-row{display:grid;grid-template-columns:70px 1fr 28px;align-items:center;gap:6px;margin-bottom:6px}.mix-row label{margin-bottom:0;font-size:10px}.mix-row input[type=range]{width:100%}.mix-value{font-size:10px;color:var(--theme-text-dim);text-align:right;font-variant-numeric:tabular-nums}.settings-btn{display:block;width:100%;padding:6px 10px;margin-top:10px;background:var(--theme-accent-15);color:var(--theme-accent);border:1px solid var(--theme-accent-30);border-radius:4px;font-family:Courier New,monospace;font-size:11px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:background .2s}.settings-btn:hover{background:var(--theme-accent-30)}.settings-btn.copied{color:#a0d8a0;border-color:#a0d8a04d}#settingsPanel::-webkit-scrollbar{width:4px}#settingsPanel::-webkit-scrollbar-track{background:transparent}#settingsPanel::-webkit-scrollbar-thumb{background:var(--theme-accent-30);border-radius:2px}#settingsPanel::-webkit-scrollbar-thumb:hover{background:var(--theme-accent-50)}#fullscreenToggle{position:fixed;top:16px;right:60px;z-index:50;width:36px;height:36px;border:none;border-radius:50%;background:var(--theme-accent-bg);color:var(--theme-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#fullscreenToggle:hover{background:var(--theme-accent-hover)}#fullscreenToggle .hidden{display:none}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.preset-btn{padding:6px 4px;background:var(--theme-accent-15);color:var(--theme-text);border:1px solid var(--theme-accent-30);border-radius:4px;font-family:Courier New,monospace;font-size:9px;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:background .2s,border-color .2s}.preset-btn:hover{background:var(--theme-accent-30);border-color:var(--theme-accent-50)}.preset-btn.active{background:var(--theme-accent-50);border-color:var(--theme-accent-70);color:#fff}#screenshotBtn{position:fixed;top:16px;right:104px;z-index:50;width:36px;height:36px;border:none;border-radius:50%;background:var(--theme-accent-bg);color:var(--theme-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#screenshotBtn:hover{background:var(--theme-accent-hover)}#recordToggle{position:fixed;top:16px;right:148px;z-index:50;width:36px;height:36px;border:none;border-radius:50%;background:var(--theme-accent-bg);color:var(--theme-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#recordToggle:hover{background:var(--theme-accent-hover)}#recordToggle.recording{background:#c83232d9;animation:pulse-record 1.5s ease-in-out infinite}@keyframes pulse-record{0%,to{opacity:1}50%{opacity:.6}}#fpsCounter{position:fixed;bottom:16px;right:16px;font-family:Courier New,monospace;font-size:11px;color:var(--theme-accent-70);pointer-events:none;z-index:40}#fpsCounter.hidden{display:none}#helpOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .2s ease}#helpOverlay.hidden{display:none}.help-content{background:var(--theme-panel-bg);border-radius:8px;padding:20px 24px;min-width:280px;max-width:360px;box-shadow:0 8px 32px #0006}.help-title{text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:700;color:var(--theme-accent);margin-bottom:14px;text-align:center;font-family:Courier New,monospace}.help-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;font-family:Courier New,monospace;font-size:11px;color:var(--theme-text)}.help-grid kbd{background:var(--theme-input-bg);border:1px solid var(--theme-input-border);border-radius:3px;padding:2px 6px;font-family:Courier New,monospace;font-size:10px;color:var(--theme-accent);text-align:center;min-width:60px}.help-grid span{color:var(--theme-text-dim)}.help-hint{margin-top:14px;text-align:center;font-family:Courier New,monospace;font-size:9px;color:var(--theme-text-hint)}#debugOverlay{position:fixed;bottom:16px;left:16px;font-family:Courier New,monospace;font-size:10px;line-height:1.6;color:var(--theme-accent-70);background:#0006;padding:6px 10px;border-radius:4px;pointer-events:none;z-index:40;white-space:pre}#debugOverlay.hidden{display:none}#errorOverlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--theme-bg);font-family:Courier New,monospace;font-size:14px;color:#666;text-align:center;padding:2em;z-index:100}#errorOverlay.hidden{display:none}
