*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #538d4e;--color-primary-hover: #6aaa4c;--color-secondary: #3a3a3c;--color-secondary-hover: #4a4a4c;--color-bg: #121213;--color-bg-light: #1a1a1b;--color-text: #d7dadc;--color-text-muted: #818384;--color-success: #538d4e;--color-warning: #b59f3b;--color-error: #c9372c;--color-wood-light: #deb887;--color-wood-dark: #8b4513;--font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--transition-fast: .15s ease;--transition-medium: .3s ease;--hud-bg: rgba(0, 0, 0, .5);--hud-bg-hover: rgba(0, 0, 0, .7);--hud-text: #ffffff}[data-theme=light]{--color-primary: #538d4e;--color-primary-hover: #6aaa4c;--color-secondary: #d3d6da;--color-secondary-hover: #c0c3c7;--color-bg: #f8f9fa;--color-bg-light: #ffffff;--color-text: #1a1a1b;--color-text-muted: #787c7e;--hud-bg: rgba(255, 255, 255, .9);--hud-bg-hover: rgba(255, 255, 255, .95);--hud-text: #1a1a1b}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-family);background:var(--color-bg);color:var(--color-text)}#app{width:100%;height:100%;position:relative}.screen{position:absolute;top:0;left:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-light) 100%)}.screen.active{display:flex}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#000c;z-index:100}.overlay.hidden{display:none}.menu-container{background:var(--color-bg-light);border-radius:16px;padding:40px;min-width:320px;max-width:90vw;box-shadow:0 20px 60px #00000080;text-align:center}.game-title{font-size:3rem;font-weight:700;margin-bottom:40px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-success) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}h2{font-size:1.8rem;margin-bottom:30px;color:var(--color-text)}.menu-buttons{display:flex;flex-direction:column;gap:12px}.menu-btn{padding:16px 32px;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all var(--transition-fast);background:var(--color-secondary);color:var(--color-text);position:relative;overflow:hidden}.menu-btn:hover{background:var(--color-secondary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.menu-btn:active{transform:translateY(0)}.menu-btn.primary{background:var(--color-primary)}.menu-btn.primary:hover{background:var(--color-primary-hover)}.menu-btn.secondary{background:transparent;border:2px solid var(--color-secondary)}.menu-btn.secondary:hover{background:var(--color-secondary)}.btn-title{display:block;font-size:1.2rem}.btn-desc{display:block;font-size:.85rem;color:var(--color-text-muted);margin-top:4px}.menu-btn.primary .btn-desc{color:#ffffffd9}.date-selectors{display:flex;gap:20px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}.selector-group{display:flex;flex-direction:column;gap:8px}.selector-group label{font-size:.9rem;color:var(--color-text-muted)}.selector-group select{padding:12px 20px;font-size:1rem;border:2px solid var(--color-secondary);border-radius:8px;background:var(--color-bg);color:var(--color-text);cursor:pointer;min-width:120px}.selector-group select:focus{outline:none;border-color:var(--color-primary)}.settings-content{text-align:left;margin-bottom:30px}.setting-group{margin-bottom:24px}.setting-group h3{font-size:1rem;color:var(--color-text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.theme-selector{display:flex;gap:10px;flex-wrap:wrap}.theme-btn,.color-mode-btn{padding:10px 20px;border:2px solid var(--color-secondary);border-radius:6px;background:transparent;color:var(--color-text);cursor:pointer;transition:all var(--transition-fast)}.theme-btn:hover,.theme-btn.active,.color-mode-btn:hover,.color-mode-btn.active{border-color:var(--color-primary);background:var(--color-primary)}#custom-color-picker{margin-top:12px;display:flex;align-items:center;gap:12px}#custom-color-picker.hidden{display:none}#piece-color{width:50px;height:40px;border:none;border-radius:6px;cursor:pointer}.keybind-list{display:flex;flex-direction:column;gap:8px}.keybind-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}.keybind-btn{padding:8px 16px;border:1px solid var(--color-secondary);border-radius:4px;background:var(--color-bg);color:var(--color-text);font-size:.9rem;cursor:pointer;transition:all var(--transition-fast)}.keybind-btn:hover{border-color:var(--color-primary)}.keybind-btn.listening{border-color:var(--color-success);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.tutorial-container{max-width:500px;width:100%;position:relative}.tutorial-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.tutorial-header h2{margin-bottom:0}.tutorial-counter{font-size:.9rem;color:var(--color-text-muted);background:var(--color-secondary);padding:4px 12px;border-radius:12px}#tutorial-content{min-height:280px;max-height:280px;overflow-y:auto;margin-bottom:20px;text-align:left;padding:20px;background:var(--color-bg);border-radius:8px}.tutorial-nav{display:flex;gap:12px;justify-content:center}.tutorial-nav .menu-btn.hidden{visibility:hidden}#tutorial-content h3{margin-bottom:12px;color:var(--color-primary)}#tutorial-content p{margin-bottom:12px;line-height:1.6}#tutorial-content .control-hint{display:flex;align-items:center;gap:12px;padding:10px;background:#ffffff0d;border-radius:6px;margin-bottom:8px}#tutorial-content .key{background:var(--color-secondary);padding:6px 12px;border-radius:4px;font-family:monospace;font-weight:700}#game-screen{background:none}#game-canvas{width:100%;height:100%;display:block}#game-ui{position:absolute;top:0;left:0;width:100%;padding:12px 16px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}#game-ui>*{pointer-events:auto}#timer-display{position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--hud-bg);color:var(--hud-text);padding:10px 20px;border-radius:8px;font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ui-btn{width:50px;height:50px;border:none;border-radius:50%;background:var(--hud-bg);color:var(--hud-text);font-size:1.2rem;cursor:pointer;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;line-height:1}.ui-btn:hover{background:var(--hud-bg-hover);transform:scale(1.1)}#date-display{position:absolute;top:12px;right:16px;background:var(--hud-bg);color:var(--hud-text);padding:10px 20px;border-radius:8px;font-size:1.1rem;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;text-align:center}.victory-container h2{font-size:2.5rem;margin-bottom:20px}.victory-container p{font-size:1.2rem;color:var(--color-text-muted);margin-bottom:15px}.victory-time{font-size:1.8rem;font-weight:600;color:var(--color-primary);margin-bottom:25px}@media(max-width:600px){.menu-container{padding:30px 20px;margin:20px}.game-title{font-size:2.2rem}.date-selectors{flex-direction:column;align-items:center}.theme-selector{flex-direction:column}}@media(hover:none){.menu-btn:hover{transform:none}.menu-btn:active{transform:scale(.98);background:var(--color-secondary-hover)}.menu-btn.primary:active{background:var(--color-primary-hover)}}