:root{--bg: #0d1014;--surface: #161a20;--surface-2: #1d222a;--border: #262c36;--border-strong: #333c48;--text: #f4f4f6;--text-muted: #a1a8b3;--text-faint: #6b7280;--accent: #81b64c;--accent-hi: #6fa03e;--accent-bg: rgba(129, 182, 76, .12);--on-accent: #10230a;--success: #81b64c;--warning: #e8a039;--danger: #c0392b;--danger-hi: #a93226;--danger-text: #e74c3c;--board-light: #f0d9b5;--board-dark: #b58863;--board-coord-on-light: rgba(101, 68, 45, .7);--board-coord-on-dark: rgba(240, 217, 181, .7);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-pill: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .55);--ring: 0 0 0 2px var(--accent), 0 0 0 4px var(--bg);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;--font-mono: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--font-serif: "Georgia", "Times New Roman", serif}[data-theme=light]{--bg: #faf8f5;--surface: #ffffff;--surface-2: #f1eee9;--border: #d8d1c5;--border-strong: #c4bba9;--text: #1a1a1f;--text-muted: #4a5361;--text-faint: #6b7280;--accent: #4e7d2e;--accent-hi: #416a26;--accent-bg: rgba(78, 125, 46, .14);--on-accent: #ffffff;--success: #2f7d32;--warning: #b45309;--danger: #b3271b;--danger-hi: #8f1f16;--danger-text: #a52318;--shadow-sm: 0 2px 8px rgba(60, 50, 40, .12);--shadow-md: 0 4px 16px rgba(60, 50, 40, .15);--shadow-lg: 0 8px 24px rgba(60, 50, 40, .18)}@media(prefers-color-scheme:light){:root:not([data-theme]){--bg: #faf8f5;--surface: #ffffff;--surface-2: #f1eee9;--border: #d8d1c5;--border-strong: #c4bba9;--text: #1a1a1f;--text-muted: #4a5361;--text-faint: #6b7280;--accent: #4e7d2e;--accent-hi: #416a26;--accent-bg: rgba(78, 125, 46, .14);--on-accent: #ffffff;--success: #2f7d32;--warning: #b45309;--danger: #b3271b;--danger-hi: #8f1f16;--danger-text: #a52318;--shadow-sm: 0 2px 8px rgba(60, 50, 40, .12);--shadow-md: 0 4px 16px rgba(60, 50, 40, .15);--shadow-lg: 0 8px 24px rgba(60, 50, 40, .18)}}:root{font-family:var(--font-sans);line-height:1.5;font-weight:400;color:var(--text);background-color:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;min-height:100dvh;background-color:var(--bg)}#root{min-height:100vh;min-height:100dvh}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;min-width:44px;padding:var(--space-3) var(--space-5);border:1px solid transparent;border-radius:var(--radius-md);background:var(--surface);color:var(--text);font-family:inherit;font-size:1rem;font-weight:600;line-height:1;cursor:pointer;transition:all .2s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn-primary:hover:not(:disabled){background:var(--accent-hi);border-color:var(--accent-hi)}.btn-secondary{background:var(--surface);border-color:var(--border);color:var(--text)}.btn-secondary:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}.btn-ghost{background:transparent;border-color:var(--border);color:var(--text-muted)}.btn-ghost:hover:not(:disabled){background:var(--surface);border-color:var(--border-strong);color:var(--text)}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:var(--danger-hi);border-color:var(--danger-hi)}.btn-icon{padding:var(--space-2);min-width:44px}.coords-toggle{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-2);font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-muted)}.coords-toggle input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--accent)}.practice-controls{display:flex;align-items:center;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-2)}.challenge-code{margin-top:var(--space-4);padding:var(--space-3) var(--space-5);background:color-mix(in srgb,var(--warning) 10%,transparent);border:2px solid color-mix(in srgb,var(--warning) 40%,transparent);border-radius:var(--radius-md);text-align:center}.challenge-code-label{margin:0 0 var(--space-1) 0;font-size:.8rem;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase}.challenge-code-value{display:inline-block;font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--warning);letter-spacing:.15em;-webkit-user-select:all;user-select:all}.challenge-selector{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:40px var(--space-5);background:var(--bg)}.header{text-align:center;margin-bottom:40px;color:var(--text)}.header h1{font-size:3rem;margin:0 0 var(--space-2) 0;color:var(--text);font-weight:700;letter-spacing:-.02em}.tagline{font-size:1.2rem;margin:0;color:var(--text-muted)}.challenges{display:flex;gap:var(--space-5);flex-wrap:wrap;justify-content:center;max-width:900px}.challenge-card{background:var(--surface);border-radius:var(--radius-lg);padding:28px;width:380px;max-width:90vw;cursor:pointer;border:1px solid var(--border);text-align:left;transition:all .2s ease;box-shadow:var(--shadow-md)}.challenge-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-lg)}.challenge-card.square-locator:hover,.challenge-card.notation:hover,.challenge-card.writing:hover,.challenge-card.full-game:hover{box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 20%,transparent)}.challenge-icon{margin-bottom:var(--space-4);font-size:2rem}.challenge-card h2{font-size:1.5rem;color:var(--text);margin:0 0 var(--space-3) 0;font-weight:600}.challenge-card p{color:var(--text-muted);line-height:1.6;margin:0 0 18px;font-size:.95rem}.challenge-features{display:flex;flex-wrap:wrap;gap:var(--space-2)}.challenge-features span{background:var(--accent-bg);padding:5px var(--space-3);border-radius:var(--radius-pill);font-size:.8rem;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}.footer{margin-top:auto;padding-top:40px}.home-link{text-decoration:none;font-size:1rem}.home-link:hover{border-color:var(--accent)}@media(max-width:500px){.challenge-selector{padding:var(--space-5) var(--space-3)}.header{margin-bottom:var(--space-5)}.header h1{font-size:2.2rem}.tagline{font-size:1rem}.challenge-card{padding:22px;width:100%;max-width:none}.challenge-card h2{font-size:1.3rem}}:root{--board-size: min( calc(100vw - 64px) , 480px, 85dvh)}.chess-board-container{display:flex;align-items:flex-start;gap:var(--space-1);-webkit-user-select:none;user-select:none}.rank-labels{display:flex;flex-direction:column;justify-content:space-around;height:var(--board-size);width:12px;flex-shrink:0}.rank-label{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-muted);height:calc(var(--board-size) / 8)}.board-and-files{display:flex;flex-direction:column}.chess-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:var(--board-size);height:var(--board-size);border:3px solid var(--bg);border-radius:var(--radius-xs);overflow:hidden;box-shadow:var(--shadow-lg)}.file-labels{display:flex;justify-content:space-around;width:var(--board-size);padding:var(--space-1) 0}.file-label{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-muted);width:calc(var(--board-size) / 8)}@media(max-width:500px){:root{--board-size: min( calc(100vw - 32px) , 480px, 85dvh)}}.square{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .12s ease}.square.light{background-color:var(--board-light)}.square.dark{background-color:var(--board-dark)}.square:hover{filter:brightness(1.08)}.square.highlighted{background-color:color-mix(in srgb,var(--accent) 70%,transparent)!important;box-shadow:inset 0 0 0 3px var(--accent)}.square.selected{background-color:color-mix(in srgb,var(--warning) 70%,transparent)!important;box-shadow:inset 0 0 0 3px var(--warning)}.square.correct{background-color:var(--accent)!important;animation:pulse-correct .5s ease}.square.wrong{background-color:var(--danger)!important;animation:shake .3s ease}@keyframes pulse-correct{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.piece{width:80%;height:80%;display:flex;align-items:center;justify-content:center;pointer-events:none}.coordinate{position:absolute;top:2px;left:4px;font-size:10px;font-weight:700;color:var(--board-coord-on-light);pointer-events:none}.square.dark .coordinate{color:var(--board-coord-on-dark)}.square-challenge{display:flex;flex-direction:column;align-items:center;padding:var(--space-5);max-width:600px;margin:0 auto;background:var(--bg)}.square-challenge h2{margin:0 0 var(--space-3) 0;color:var(--text);font-size:1.8rem;font-weight:700}.square-challenge .description{color:var(--text-muted);text-align:center;margin-bottom:30px;line-height:1.5}.setting-group{margin-bottom:25px}.stop-button{margin-top:var(--space-5)}.square-challenge.playing{padding:var(--space-4)}.game-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5);width:100%}.target-square{display:flex;align-items:center;gap:var(--space-4);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);padding:var(--space-4) 30px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.target-label{font-size:1.2rem;color:var(--text-muted)}.target-value{font-size:2.5rem;font-weight:700;color:var(--text);font-family:var(--font-mono);letter-spacing:2px}.perspective-indicator{font-size:.95rem;color:var(--text-faint)}.feedback{padding:var(--space-4) 30px;border-radius:var(--radius-md);font-size:1.2rem;font-weight:600;animation:slide-up .3s ease}@media(max-width:500px){.square-challenge{padding:var(--space-4) var(--space-3)}.square-challenge h2{font-size:1.5rem}.square-challenge.playing{padding:var(--space-3) var(--space-2)}.mode-buttons{flex-direction:column;align-items:stretch;gap:var(--space-3)}.mode-button{min-width:0;padding:var(--space-4) var(--space-5)}.game-header{gap:var(--space-3);margin-bottom:var(--space-4)}.game-info{gap:var(--space-4)}.target-square{padding:var(--space-3) var(--space-5)}.target-value{font-size:2rem}.feedback{padding:var(--space-3) var(--space-5);font-size:1.05rem;text-align:center}.results{padding:var(--space-5)}.result-stats{grid-template-columns:repeat(2,1fr)}}.notation-challenge{display:flex;flex-direction:column;align-items:center;padding:var(--space-5);max-width:600px;margin:0 auto;background:var(--bg)}.notation-challenge h2{margin:0 0 var(--space-3) 0;color:var(--text);font-size:1.8rem;font-weight:700}.notation-challenge .description{color:var(--text-muted);text-align:center;margin-bottom:30px;line-height:1.5}.mode-button:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--surface-2)}.settings{width:100%;margin-bottom:30px}.setting-group{margin-bottom:25px;text-align:center}.setting-description{margin-top:var(--space-3);font-size:.9rem;color:var(--text-faint)}.option-buttons{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}.option-button.selected,.option-button.selected:hover{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600}.action-buttons{display:flex;flex-direction:column;gap:var(--space-4);width:100%;max-width:300px}.notation-challenge.playing{padding:var(--space-4)}.game-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);width:100%}.move-display{display:flex;align-items:center;gap:var(--space-4);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);padding:var(--space-4) 30px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.move-label{font-size:1.2rem;color:var(--text-muted)}.move-notation{font-size:2.5rem;font-weight:700;color:var(--text);font-family:var(--font-serif);letter-spacing:2px}.turn-indicator{font-size:1rem;color:var(--text-faint);font-weight:500}.hint{background:color-mix(in srgb,var(--warning) 12%,transparent);color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 30%,transparent);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-weight:500;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.feedback{padding:var(--space-4) 30px;border-radius:var(--radius-md);font-size:1.2rem;font-weight:600;animation:slide-up .3s ease;margin-bottom:var(--space-4)}.hint-button{font-size:.95rem;background:color-mix(in srgb,var(--warning) 15%,transparent);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 30%,transparent)}.hint-button:hover:not(:disabled){background:color-mix(in srgb,var(--warning) 25%,transparent);border-color:var(--warning)}.skip-button{font-size:.95rem}@media(max-width:500px){.notation-challenge{padding:var(--space-4) var(--space-3)}.notation-challenge h2{font-size:1.5rem}.notation-challenge.playing{padding:var(--space-3) var(--space-2)}.mode-buttons{flex-direction:column;align-items:stretch;gap:var(--space-3)}.mode-button{min-width:0;padding:var(--space-4) var(--space-5)}.game-header{gap:var(--space-2);margin-bottom:var(--space-4)}.game-info{gap:var(--space-4)}.move-display{padding:var(--space-3) var(--space-5)}.move-notation{font-size:2rem}.turn-indicator,.hint{text-align:center}.feedback{padding:var(--space-3) var(--space-5);font-size:1.05rem;text-align:center}.results{padding:var(--space-5)}.result-stats{grid-template-columns:repeat(2,1fr)}}.notation-writing{display:flex;flex-direction:column;align-items:center;padding:var(--space-5);max-width:600px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg)}.notation-writing h2{margin:0 0 var(--space-3) 0;color:var(--text);font-size:1.8rem;font-weight:700}.notation-writing .description{color:var(--text-muted);text-align:center;margin-bottom:30px;line-height:1.5}.mode-selection h3{text-align:center;color:var(--text-muted);margin-bottom:var(--space-5);font-weight:600}.settings{width:100%;margin-bottom:25px}.setting-group{margin-bottom:var(--space-5)}.setting-group label{display:block;font-weight:600;color:var(--text-muted);margin-bottom:var(--space-3);text-align:center}.difficulty-options{display:flex;flex-direction:column;gap:var(--space-3)}.difficulty-option{display:flex;flex-direction:column;padding:var(--space-4) var(--space-5);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;transition:all .2s ease;text-align:left;color:var(--text)}.difficulty-option:hover{border-color:var(--accent);background:var(--surface-2)}.difficulty-option.selected{border-color:var(--accent);background:var(--accent-bg)}.diff-label{font-weight:600;color:var(--text);margin-bottom:4px}.diff-desc{font-size:.9rem;color:var(--text-faint)}.challenge-note{text-align:center;color:var(--text-faint);font-size:.9rem;margin-top:var(--space-3)}.perspective-indicator{font-size:.95rem;color:var(--text-faint);margin-top:var(--space-2)}.notation-help{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:25px;width:100%}.notation-help h4{margin:0 0 var(--space-4) 0;color:var(--text-muted);text-align:center;font-weight:600}.notation-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}.example{display:flex;flex-direction:column;align-items:center;text-align:center}.example .notation{font-family:var(--font-serif);font-size:1.3rem;font-weight:700;color:var(--accent);margin-bottom:4px}.example .meaning{font-size:.75rem;color:var(--text-faint)}.notation-writing.playing{padding:var(--space-4);background:var(--bg)}.game-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);width:100%}.game-info{display:flex;gap:var(--space-5);align-items:center}.question-count{font-size:1.1rem;color:var(--text-muted);font-weight:500}.timer{font-size:1.5rem;font-weight:700;color:var(--accent);min-width:50px;text-align:center}.practice-stats{font-size:1.1rem;color:var(--text-muted)}.prompt{background:var(--accent-bg);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:var(--space-3) 25px;border-radius:var(--radius-md);color:var(--accent);font-weight:500}.prompt-text{font-size:1.1rem}.game-board{margin-bottom:var(--space-4)}.move-hint{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);font-size:1.3rem;color:var(--text-muted)}.from-square,.to-square{background:var(--accent-bg);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:6px var(--space-3);border-radius:var(--radius-sm);font-weight:600;font-family:var(--font-mono);color:var(--accent)}.arrow{color:var(--border-strong)}.input-form{display:flex;gap:var(--space-3);margin-bottom:var(--space-4);width:100%;max-width:350px}.notation-input{flex:1;padding:var(--space-4) var(--space-5);font-size:1.5rem;font-family:var(--font-serif);text-align:center;border:2px solid var(--border);border-radius:var(--radius-md);outline:none;transition:all .2s ease;background:var(--surface);color:var(--text)}.notation-input::placeholder{color:var(--text-faint)}.notation-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.notation-input.correct{border-color:var(--success);background:color-mix(in srgb,var(--success) 10%,transparent)}.notation-input.wrong,.notation-input.timeout{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}.submit-button{padding:var(--space-4) 25px;font-size:1.1rem}.game-controls{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;margin-bottom:var(--space-4)}.skip-button,.stop-button{font-size:.95rem}.keyboard-shortcuts{font-size:.85rem;color:var(--text-faint)}.keyboard-shortcuts kbd{background:var(--surface-2);padding:2px var(--space-2);border-radius:var(--radius-xs);font-family:var(--font-mono);border:1px solid var(--border);color:var(--text-muted)}@media(max-width:500px){.notation-writing{padding:var(--space-4) var(--space-3)}.notation-writing h2{font-size:1.5rem}.notation-writing.playing{padding:var(--space-3) var(--space-2)}.mode-buttons{flex-direction:column;align-items:stretch;gap:var(--space-3)}.mode-button{min-width:0;padding:var(--space-4) var(--space-5)}.game-header{gap:var(--space-2);margin-bottom:var(--space-3)}.game-info{gap:var(--space-4)}.prompt{padding:var(--space-3) var(--space-4);text-align:center}.move-hint{font-size:1.1rem}.input-form{max-width:none}.notation-input{font-size:1.3rem;padding:var(--space-3) var(--space-4);min-width:0}.feedback{padding:var(--space-3) var(--space-5);font-size:1.05rem;text-align:center}.notation-examples{grid-template-columns:repeat(2,1fr)}.results{padding:var(--space-5)}.result-stats{grid-template-columns:repeat(2,1fr)}}.game-challenge{display:flex;flex-direction:column;align-items:center;padding:var(--space-5);max-width:700px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg)}.game-challenge h2{margin:0 0 var(--space-3) 0;color:var(--text);font-size:1.8rem;font-weight:700}.game-challenge h3{margin:0;color:var(--text-muted)}.game-challenge .description{color:var(--text-muted);text-align:center;margin-bottom:30px;line-height:1.5}.difficulty-selection{width:100%;margin-bottom:30px}.difficulty-selection h3{text-align:center;margin-bottom:var(--space-5);color:var(--text-muted)}.difficulty-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4)}.difficulty-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:all .2s ease;text-align:center;position:relative;color:var(--text)}.difficulty-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent);background:var(--surface-2)}.difficulty-card.beginner:hover,.difficulty-card.intermediate:hover{border-color:var(--accent)}.difficulty-card.advanced:hover{border-color:var(--warning)}.difficulty-card.expert:hover{border-color:var(--danger)}.difficulty-label{font-size:1.1rem;font-weight:600;color:var(--text);margin-bottom:var(--space-2)}.difficulty-desc{font-size:.85rem;color:var(--text-faint)}.difficulty-badge{position:absolute;top:-8px;right:-8px;background:var(--danger);color:#fff;padding:4px var(--space-3);border-radius:var(--radius-lg);font-size:.75rem;font-weight:600}.mode-selection{width:100%;margin-bottom:30px}.mode-selection h3{text-align:center;margin-bottom:var(--space-5);color:var(--text-muted)}.mode-buttons{display:flex;gap:var(--space-5);justify-content:center;flex-wrap:wrap}.mode-button{display:flex;flex-direction:column;align-items:center;padding:25px 35px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:all .2s ease;min-width:180px;color:var(--text)}.mode-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--surface-2)}.mode-button.practice:hover{border-color:var(--accent)}.mode-button.challenge:hover{border-color:var(--warning)}.mode-icon{font-size:2.5rem;margin-bottom:var(--space-3)}.mode-name{font-size:1.2rem;font-weight:600;color:var(--text);margin-bottom:5px}.mode-desc{font-size:.85rem;color:var(--text-faint)}.game-list{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:500px;margin-bottom:30px}.game-card{display:flex;flex-direction:column;padding:var(--space-4) var(--space-5);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;transition:all .2s ease;text-align:left;color:var(--text)}.game-card:hover{border-color:var(--accent);transform:translate(5px);background:var(--surface-2)}.game-card.random{flex-direction:row;align-items:center;gap:var(--space-4);background:var(--surface);border:1px solid var(--accent);color:var(--text)}.game-card.random:hover{transform:translate(5px);box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 20%,transparent);background:var(--surface-2)}.game-icon{font-size:2rem}.game-title{font-weight:600;color:var(--text);margin-bottom:4px}.game-card.random .game-title,.game-card.random .game-desc{color:var(--text)}.game-desc{font-size:.9rem;color:var(--text-muted);margin-bottom:4px}.game-moves{font-size:.8rem;color:var(--text-faint)}.game-description{color:var(--text-muted);text-align:center;margin-bottom:var(--space-3)}.game-info{color:var(--text-faint);font-size:.9rem;margin-bottom:var(--space-5)}.expert-warning{background:color-mix(in srgb,var(--warning) 10%,transparent);color:var(--warning);border:1px solid color-mix(in srgb,var(--warning) 30%,transparent);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);margin-bottom:var(--space-5);text-align:center;font-weight:500}.setting-group{margin-bottom:var(--space-5);text-align:center}.setting-group label{display:block;font-weight:600;color:var(--text-muted);margin-bottom:var(--space-3)}.perspective-options{display:flex;gap:var(--space-3);justify-content:center}.perspective-option.selected,.perspective-option.selected:hover{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600}.challenge-note{text-align:center;color:var(--text-faint);font-size:.9rem;margin-bottom:var(--space-4)}.perspective-indicator{font-size:.95rem;color:var(--text-faint);text-align:center;margin-bottom:var(--space-3)}.auto-play-indicator{color:var(--text);font-style:italic}.perspective-hint{font-size:.8rem;color:var(--text-faint);text-align:center;margin:6px 0 0}.action-buttons{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:300px}.start-button{padding:var(--space-4) 40px;font-size:1.2rem}.start-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 30%,transparent)}.game-challenge.playing{padding:var(--space-4);background:var(--bg)}.game-header{width:100%;margin-bottom:var(--space-4)}.game-info-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);padding:0 var(--space-3)}.game-title-small{font-size:.95rem;color:var(--text-muted);font-weight:500}.progress{font-size:1rem;color:var(--text);font-weight:600}.timer{font-size:1.3rem;font-weight:700;color:var(--accent);min-width:45px;text-align:center}.timer.warning{color:var(--danger);animation:pulse-warning .5s ease infinite}@keyframes pulse-warning{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.notation-display{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);color:var(--text)}.move-indicator{font-size:1.1rem;margin-bottom:var(--space-3);color:var(--text-muted)}.moves-to-play{font-family:var(--font-serif)}.limited-notation{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}.upcoming-move{display:flex;gap:5px;align-items:center;font-size:1.4rem;opacity:.5;color:var(--text)}.upcoming-move.active{opacity:1;font-weight:700;font-size:1.8rem}.upcoming-move .move-number{color:var(--text-faint);font-size:.8em}.full-notation{display:flex;flex-wrap:wrap;gap:var(--space-2);max-height:150px;overflow-y:auto;padding:5px}.move-pair{display:inline-flex;gap:4px;font-size:.95rem;opacity:.4;color:var(--text)}.move-pair.current{opacity:1}.move-pair.played{opacity:.25}.move-pair .move-number{color:var(--text-faint)}.move-pair .move{padding:2px 4px;border-radius:3px}.move-pair .move.active{background:color-mix(in srgb,var(--accent) 20%,transparent);font-weight:700;color:var(--accent)}.game-board-container{margin-bottom:var(--space-4)}.blindfold-mode{width:var(--board-size);height:var(--board-size);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);text-align:center}.blindfold-icon{font-size:4rem;margin-bottom:var(--space-4)}.blindfold-mode p{margin:5px 0;font-size:1.2rem;color:var(--text-muted)}.blindfold-hint{opacity:.6;font-size:1rem!important}.peek-button{margin-top:var(--space-5);background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}.peek-button:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:var(--accent)}.feedback{padding:var(--space-3) 25px;border-radius:var(--radius-md);font-size:1.1rem;font-weight:600;margin-bottom:var(--space-4);animation:slide-up .3s ease}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.feedback.correct{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success);border:1px solid color-mix(in srgb,var(--success) 30%,transparent)}.feedback.wrong,.feedback.timeout{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger-text);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent)}.game-controls{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.hint-button{font-size:.95rem;background:color-mix(in srgb,var(--warning) 12%,transparent);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 30%,transparent)}.hint-button:hover:not(:disabled){background:color-mix(in srgb,var(--warning) 22%,transparent);border-color:var(--warning)}.skip-button,.hide-button,.quit-button{font-size:.95rem}.game-title-result{color:var(--text-muted);margin-bottom:var(--space-5)}.results{background:var(--surface);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-lg);width:100%;max-width:400px;margin-bottom:30px;border:1px solid var(--border)}.results.passed{border:2px solid var(--success)}.results.failed{border:2px solid var(--warning)}.result-main{display:flex;flex-direction:column;align-items:center;margin-bottom:25px}.result-icon{font-size:3rem;margin-bottom:var(--space-3)}.result-accuracy{font-size:4rem;font-weight:700;color:var(--text);line-height:1}.result-label{font-size:1.1rem;color:var(--text-faint);margin-top:5px}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-bottom:var(--space-5)}.stat{display:flex;flex-direction:column;align-items:center;text-align:center}.stat-value{font-size:1.5rem;font-weight:600;color:var(--text)}.stat-label{font-size:.8rem;color:var(--text-faint)}.result-message{text-align:center;font-size:1.1rem;color:var(--text-muted);padding-top:var(--space-4);border-top:1px solid var(--border)}@media(max-width:500px){.game-challenge{padding:var(--space-4) var(--space-3)}.game-challenge h2{font-size:1.5rem}.game-challenge.playing{padding:var(--space-3) var(--space-2)}.game-info-bar{flex-wrap:wrap;justify-content:center;gap:var(--space-1) var(--space-4);padding:0}.mode-buttons{flex-direction:column;align-items:stretch;gap:var(--space-3)}.mode-button{min-width:0;padding:var(--space-4) var(--space-5)}.notation-display{padding:var(--space-3) var(--space-4)}.limited-notation{gap:var(--space-3)}.upcoming-move{font-size:1.2rem}.upcoming-move.active{font-size:1.5rem}.full-notation{max-height:110px}.results{padding:var(--space-5)}.result-stats{grid-template-columns:repeat(2,1fr)}}.app{min-height:100vh;min-height:100dvh;background:var(--bg);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}*{box-sizing:border-box}button{font-family:inherit}.square-challenge,.notation-challenge{background:var(--bg);min-height:100vh;min-height:100dvh}.square-challenge.playing,.notation-challenge.playing{background:var(--bg)}