:root{--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-primary-light: #e0e7ff;--color-secondary: #64748b;--color-secondary-hover: #475569;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-board: #dcb35c;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--border-color: #e2e8f0;--border-radius: 12px;--border-radius-sm: 8px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-secondary);color:var(--text-primary);line-height:1.6;min-height:100vh}.container{max-width:1400px;margin:0 auto;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg)}.header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg) var(--spacing-xl);background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-md)}.header-content{display:flex;flex-direction:column;gap:var(--spacing-xs)}.title{font-size:2rem;font-weight:700;display:flex;align-items:center;gap:var(--spacing-sm)}.title-icon{font-size:2.2rem}.subtitle{color:var(--text-secondary);font-size:1rem}.main-content{display:grid;grid-template-columns:1fr 350px;gap:var(--spacing-lg);flex:1}.board-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.board-container{background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);padding:var(--spacing-lg);display:flex;justify-content:center;align-items:center}#goBoard{max-width:100%;height:auto;border-radius:var(--border-radius-sm)}.board-info{background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-md);padding:var(--spacing-md)}.player-info{display:flex;justify-content:space-between;align-items:center}.player{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:500}.player-icon{font-size:1.5rem}.black-icon,.white-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.controls-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.control-card{background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-md);overflow:hidden}.control-title{font-size:1rem;font-weight:600;padding:var(--spacing-md) var(--spacing-lg);background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:var(--spacing-sm)}.control-body{padding:var(--spacing-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--border-radius-sm);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;background:var(--bg-tertiary);color:var(--text-primary)}.btn:hover{background:var(--bg-secondary)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-secondary);color:#fff}.btn-secondary:hover{background:var(--color-secondary-hover)}.btn-icon{width:40px;height:40px;padding:0;font-size:1.2rem}.btn-play{width:50px;height:50px;padding:0;font-size:1.5rem;background:var(--color-primary);color:#fff}.btn-play:hover{background:var(--color-primary-hover)}.playback-controls{display:flex;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.slider-container{margin-bottom:var(--spacing-md)}.move-slider{width:100%;height:6px;border-radius:3px;background:var(--bg-tertiary);outline:none;-webkit-appearance:none}.move-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:var(--shadow-sm)}.move-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;box-shadow:var(--shadow-sm)}.move-counter{text-align:center;font-weight:600;color:var(--text-secondary);margin-top:var(--spacing-sm)}.file-label{display:block;cursor:pointer}.file-input{display:none}.file-button{display:block;width:100%;padding:var(--spacing-md);background:var(--bg-tertiary);border:2px dashed var(--border-color);border-radius:var(--border-radius-sm);text-align:center;font-weight:500;color:var(--text-secondary);transition:all .2s ease}.file-label:hover .file-button{background:var(--bg-secondary);border-color:var(--color-primary);color:var(--color-primary)}.toggle-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-secondary);font-weight:500}.toggle-input{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}.toggle-text{line-height:1}.variation-info{background:var(--bg-tertiary);padding:var(--spacing-md);border-radius:var(--border-radius-sm);text-align:center;font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-md)}.variation-controls{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.variation-controls .btn{flex:1}.game-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.info-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.info-label{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.info-value{font-weight:600;color:var(--text-primary)}.keyboard-hints{display:flex;flex-direction:column;gap:var(--spacing-xs)}.hint{font-size:.8rem;color:var(--text-muted);display:flex;align-items:center;gap:var(--spacing-sm)}kbd{display:inline-block;padding:2px 6px;font-size:.75rem;font-family:monospace;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;box-shadow:var(--shadow-sm)}.status-bar{background:var(--text-primary);color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius);text-align:center;font-weight:500;box-shadow:var(--shadow-md)}@media (max-width: 1024px){.main-content{grid-template-columns:1fr}.controls-section{order:-1}}@media (max-width: 768px){.container{padding:var(--spacing-md)}.header{flex-direction:column;gap:var(--spacing-md);text-align:center}.title{font-size:1.5rem}.playback-controls{flex-wrap:wrap}.game-info-grid{grid-template-columns:1fr}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.btn-play.playing{animation:pulse 1s infinite}.loading{opacity:.5;pointer-events:none}.error{color:var(--color-error);background:#fef2f2;padding:var(--spacing-md);border-radius:var(--border-radius-sm);border:1px solid #fecaca}.success{color:var(--color-success);background:#f0fdf4;padding:var(--spacing-md);border-radius:var(--border-radius-sm);border:1px solid #bbf7d0}