@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";.navbar{height:var(--navbar-height);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);padding:0 var(--spacing-lg);z-index:var(--z-navbar);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}[data-theme=light] .navbar{background: repeating-linear-gradient(90deg, transparent, transparent 25px, var(--color-wood-grain) 25px, var(--color-wood-grain) 26px, transparent 26px, transparent 80px),  linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 50%, var(--color-wood-dark) 100%);border-bottom:2px solid var(--color-wood-dark);box-shadow:inset 0 1px 3px #fff6,0 2px 8px #0003}[data-theme=light] .navbar-brand{color:#4a3520;text-shadow:0 1px 1px #ffffff80}[data-theme=light] .nav-link{color:#5d4634}[data-theme=light] .nav-link:hover{color:#3a2510;background:#0000001a}.navbar-brand{color:var(--color-text-primary);align-items:center;gap:var(--spacing-sm);font-size:20px;font-weight:700;text-decoration:none;display:flex}.navbar-brand:hover{color:var(--color-accent-green);transition:color var(--transition-fast)}.navbar-nav{align-items:center;gap:var(--spacing-md);list-style:none;display:flex}.nav-item{align-items:center;display:flex}.nav-link{color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer;font-weight:500;text-decoration:none}.nav-link:hover{color:var(--color-text-primary);background:#ffffff0d}.nav-link.active{color:var(--color-accent-green);background:#4caf501a}.nav-link.primary{background:var(--color-accent-green);color:#fff;padding:var(--spacing-sm) var(--spacing-lg);font-weight:700}.nav-link.primary:hover{box-shadow:var(--shadow-sm);background:#5bc45f;transform:translateY(-1px)}.navbar-toggle{color:var(--color-text-primary);cursor:pointer;padding:var(--spacing-sm);background:0 0;border:none;font-size:24px;display:none}@media (width<=768px){.navbar{padding:0 var(--spacing-md)}.navbar-toggle{display:block}.navbar-nav{top:var(--navbar-height);background:var(--color-bg-secondary);padding:var(--spacing-md);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-md);opacity:0;transition:all var(--transition-normal);pointer-events:none;flex-direction:column;align-items:stretch;gap:0;position:fixed;left:0;right:0;transform:translateY(-100%)}.navbar-nav.open{opacity:1;pointer-events:all;transform:translateY(0)}.nav-link{text-align:left;width:100%;padding:var(--spacing-md)}.nav-link.primary{margin-top:var(--spacing-sm)}}.navbar-mobile-actions{align-items:center;gap:var(--spacing-xs);display:none}.navbar-mobile-actions .action-btn{border:2px solid var(--color-border-hover);border-radius:var(--radius-lg);color:var(--color-text-primary);cursor:pointer;width:48px;height:48px;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;font-size:22px;display:flex}.navbar-mobile-actions .action-btn:hover{color:var(--color-accent-green);border-color:var(--color-accent-green);background:#4caf5026}.navbar-mobile-actions .action-btn:active{background:#4caf5040;transform:scale(.92)}[data-theme=light] .navbar-mobile-actions .action-btn{border-color:var(--color-wood-dark);color:#4a3520}[data-theme=light] .navbar-mobile-actions .action-btn:hover{color:#3a2510;background:#0000001a;border-color:#3a2510}@media (width<=768px){.navbar-mobile-actions{display:flex}}.time-control{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:Courier New,monospace;font-size:16px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.time-control .time-icon{opacity:.7;font-size:18px}.time-control .time-display{color:var(--color-text-primary);text-align:center;min-width:60px}.time-control.active{border-color:var(--color-accent-green);animation:1.5s ease-in-out infinite pulseGreen;box-shadow:0 0 0 2px #4caf5033}@keyframes pulseGreen{0%,to{box-shadow:0 0 0 2px #4caf5033}50%{box-shadow:0 0 0 4px #4caf504d}}.time-control.warning{background:#ffc1070d;border-color:#ffc10799}.time-control.warning .time-display{color:#ffc107}.time-control.low{background:#ff98001a;border-color:#ff9800b3}.time-control.low .time-display{color:#ff9800;animation:1s ease-in-out infinite blink}.time-control.critical{background:#f4433626;border-color:#f44336cc}.time-control.critical .time-display{color:#f44336;animation:.5s ease-in-out infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.time-control.black .time-icon{filter:drop-shadow(0 0 4px #000c)}.time-control.white .time-icon{filter:drop-shadow(0 0 4px #fff6)}.settings-overlay{z-index:var(--z-modal);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000000b3;justify-content:center;align-items:center;animation:.3s cubic-bezier(.4,0,.2,1) fadeInWithBlur;display:flex;position:fixed;inset:0}@keyframes fadeInWithBlur{0%{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}to{opacity:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}.settings-panel{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);scrollbar-width:thin;scrollbar-color:#ffffff4d transparent;width:90%;max-width:500px;max-height:80vh;padding:0;animation:.4s cubic-bezier(.4,0,.2,1) slideUp;overflow-y:auto;box-shadow:0 20px 60px #000000b3,0 10px 30px #00000080}.settings-panel::-webkit-scrollbar{width:8px}.settings-panel::-webkit-scrollbar-track{border-radius:var(--radius-lg);margin:var(--spacing-md) 0;background:0 0}.settings-panel::-webkit-scrollbar-thumb{border-radius:var(--radius-lg);background:#ffffff4d padding-box padding-box;border:2px solid #0000}.settings-panel::-webkit-scrollbar-thumb:hover{background:#ffffff80 padding-box padding-box}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.settings-header{z-index:10;background:var(--color-bg-secondary);padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-md);justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:2px solid #ffffff1a;display:flex;position:sticky;top:0}.settings-header-content{flex:1}.settings-header h2{color:var(--color-text-primary);margin:0 0 8px;font-size:28px}.settings-note{color:#ffd700cc;text-align:left;margin:0;font-size:13px;font-style:italic;font-weight:500}.close-button{color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:32px;transition:all .2s;display:flex}.close-button:hover{background:#ffffff1a;transform:rotate(90deg)}.settings-content{gap:var(--spacing-xl);padding:var(--spacing-md) var(--spacing-xl) var(--spacing-xl);flex-direction:column;display:flex}.settings-section{gap:var(--spacing-md);flex-direction:column;display:flex}.section-title{color:var(--color-text-primary);margin:0 0 var(--spacing-sm) 0;padding-bottom:var(--spacing-sm);border-bottom:1px solid #ffffff1a;font-size:18px;font-weight:600}.difficulty-select{width:100%;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;margin-bottom:var(--spacing-sm);background:#0000004d;border:1px solid #fff3;font-size:16px;transition:all .2s}.difficulty-select:hover{background:#0006;border-color:#ffffff4d}.difficulty-select:focus{border-color:var(--color-accent-green);outline:none;box-shadow:0 0 0 2px #4caf5033}.difficulty-select option{background:var(--color-bg-secondary);color:var(--color-text-primary)}.setting-item{padding:var(--spacing-md);border-radius:var(--radius-md);background:#ffffff0d;border:1px solid #ffffff1a;transition:all .2s}.setting-item:hover{background:#ffffff14;border-color:#fff3}.setting-label{cursor:pointer;color:var(--color-text-primary);align-items:center;gap:12px;margin-bottom:8px;font-size:18px;font-weight:700;display:flex}.setting-label input[type=checkbox]{cursor:pointer;accent-color:#a88f67;width:24px;height:24px}.setting-name{flex:1}.setting-description{color:#fff9;margin:0 0 0 36px;font-size:14px;line-height:1.5}[data-theme=light] .setting-description{color:#0009}[data-theme=light] .setting-item{background:#0000000d;border-color:#0000001a}[data-theme=light] .setting-item:hover{background:#00000014;border-color:#0003}[data-theme=light] .setting-label{color:var(--color-text-primary)}[data-theme=light] .settings-header{border-bottom-color:#0000001a}[data-theme=light] .settings-note{color:#b48200e6}[data-theme=light] .close-button:hover{background:#0000001a}[data-theme=light] .section-title{border-bottom-color:#0000001a}[data-theme=light] .difficulty-select{color:var(--color-text-primary);background:#fffc;border-color:#0003}[data-theme=light] .difficulty-select:hover{background:#ffffffe6;border-color:#0000004d}[data-theme=light] .difficulty-select option{background:var(--color-bg-secondary);color:var(--color-text-primary)}.loading-screen{background:var(--color-bg-primary);z-index:var(--z-loading);flex-direction:column;justify-content:center;align-items:center;animation:.3s ease-out fadeIn;display:flex;position:fixed;inset:0}.loading-spinner{border:4px solid #ffffff1a;border-top-color:var(--color-accent-green);border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:var(--spacing-lg);color:var(--color-text-secondary);font-size:16px}.player-info{align-items:center;gap:var(--spacing-sm);display:flex}.player-piece{width:24px;height:24px;box-shadow:var(--shadow-sm);border-radius:50%}.player-piece.black{background:radial-gradient(circle at 30% 30%,#4a4a4a,#000)}.player-piece.white{background:radial-gradient(circle at 30% 30%,#fff,#ccc)}.score-box{align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);border-radius:var(--radius-md);background:#ffffff0d;display:flex}.score-item{align-items:center;gap:var(--spacing-sm);display:flex}.score-number{font-family:Courier New,monospace;font-size:20px;font-weight:700}.player-info-trigger{cursor:help;display:inline-block;position:relative}.player-info-card{margin-top:var(--spacing-sm);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-lg);z-index:var(--z-modal);pointer-events:none;min-width:200px;animation:.2s ease-out slideUp;position:absolute;top:100%;left:50%;transform:translate(-50%)}.player-avatar{width:60px;height:60px;margin:0 auto var(--spacing-md);color:#fff;box-shadow:var(--shadow-md);border-radius:50%;justify-content:center;align-items:center;font-size:24px;font-weight:700;display:flex}.player-avatar.black{background:radial-gradient(circle at 30% 30%,#4a4a4a,#000)}.player-avatar.white{color:#000;background:radial-gradient(circle at 30% 30%,#fff,#ccc)}.avatar-initial{text-transform:uppercase}.player-details{text-align:center}.player-name{color:var(--color-text-primary);margin-bottom:var(--spacing-sm);font-size:16px;font-weight:600}.player-stats{gap:var(--spacing-xs);flex-direction:column;display:flex}.stat-item{justify-content:space-between;font-size:14px;display:flex}.stat-label{color:var(--color-text-secondary)}.stat-value{color:var(--color-text-primary);font-family:Courier New,monospace;font-weight:600}.volume-slider-container{align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);display:flex}.volume-slider{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:4px;flex:1;height:8px;transition:all .2s}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--color-accent-green);cursor:pointer;border-radius:50%;width:18px;height:18px;margin-top:-5px;transition:transform .2s;box-shadow:0 2px 6px #0000004d}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.volume-slider::-moz-range-thumb{background:var(--color-accent-green);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 6px #0000004d}.volume-slider::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--color-accent-green) 0%, var(--color-accent-green) var(--volume-percent,100%), #ffffff1a var(--volume-percent,100%), #ffffff1a 100%);border-radius:4px;height:8px}.volume-icon{opacity:.7;text-align:center;min-width:20px;font-size:16px}.volume-value{color:var(--color-accent-green);text-align:right;min-width:45px;font-size:14px;font-weight:600}.custom-time-inputs{gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);flex-direction:column;display:flex}.custom-time-row{align-items:center;display:flex}.custom-time-label{width:100%;color:var(--color-text-secondary);justify-content:space-between;align-items:center;font-size:14px;display:flex}.custom-time-input{width:80px;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);color:var(--color-text-primary);text-align:center;background:#0000004d;border:1px solid #fff3;font-family:Courier New,monospace;font-size:16px;transition:all .2s}.custom-time-input:hover{background:#0006;border-color:#ffffff4d}.custom-time-input:focus{border-color:var(--color-accent-green);outline:none;box-shadow:0 0 0 2px #4caf5033}.custom-time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.custom-time-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.custom-time-input[type=number]{appearance:textfield}.game-replay{bottom:var(--spacing-lg);right:var(--spacing-lg);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:360px;max-height:450px;padding:var(--spacing-md);box-shadow:var(--shadow-lg);z-index:var(--z-modal);flex-direction:column;animation:.3s ease-out slideInFromRight;display:flex;position:fixed;overflow:hidden}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (width<=768px){.game-replay{left:var(--spacing-sm);right:var(--spacing-sm);bottom:var(--spacing-sm);width:auto;max-height:45vh}}.replay-header{margin-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-sm);justify-content:space-between;align-items:center;display:flex}.replay-header h3{color:var(--color-text-primary);margin:0;font-size:16px}.replay-close{color:var(--color-text-secondary);cursor:pointer;padding:0 var(--spacing-xs);background:0 0;border:none;font-size:24px;transition:color .2s}.replay-close:hover{color:var(--color-text-primary)}.replay-info{margin-bottom:var(--spacing-sm);justify-content:space-between;align-items:center;font-size:14px;display:flex}.replay-position{color:var(--color-text-secondary)}.replay-current-move{color:var(--color-text-primary);font-weight:500}.replay-score{color:var(--color-text-secondary);margin-left:var(--spacing-xs)}.replay-progress-container{margin-bottom:var(--spacing-sm);position:relative}.replay-scrubber{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:4px;width:100%;height:8px}.replay-scrubber::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-accent-green);cursor:grab;border-radius:50%;width:16px;height:16px}.replay-scrubber::-moz-range-thumb{background:var(--color-accent-green);cursor:grab;border:none;border-radius:50%;width:16px;height:16px}.replay-controls{justify-content:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);flex-wrap:wrap;display:flex}.replay-btn{color:var(--color-text-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff1a;border:1px solid #fff3;flex-shrink:1;min-width:32px;font-size:14px;transition:all .2s}.replay-btn:hover:not(:disabled){background:#fff3;border-color:#ffffff4d}.replay-btn:disabled{opacity:.4;cursor:not-allowed}.replay-btn-play{background:var(--color-accent-green);border-color:var(--color-accent-green);min-width:40px}.replay-btn-play:hover:not(:disabled){background:#5cb860}.replay-speed{min-width:50px;font-family:Courier New,monospace;font-size:14px}.replay-move-list{max-height:150px;padding:var(--spacing-xs);border-radius:var(--radius-sm);background:#0003;flex-wrap:wrap;flex:1;gap:4px;display:flex;overflow-y:auto}.replay-move-item{border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0d;align-items:center;gap:2px;padding:2px 6px;font-size:12px;transition:all .2s;display:flex}.replay-move-item:hover{background:#ffffff26}.replay-move-item.active{background:var(--color-accent-green);color:#fff}.replay-move-item .move-num{color:var(--color-text-secondary);font-size:10px}.replay-move-item .move-disc{font-size:10px}.replay-move-item .move-coord{font-family:Courier New,monospace}.replay-shortcuts{text-align:center;color:var(--color-text-secondary);margin-top:var(--spacing-xs);padding-top:var(--spacing-xs);border-top:1px solid #ffffff1a;font-size:11px}[data-theme=light] .game-replay{background:linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 100%);border-color:var(--color-wood-dark);box-shadow:0 8px 32px #0003}[data-theme=light] .replay-header{border-bottom-color:#0000001a}[data-theme=light] .replay-scrubber{background:#0000001a}[data-theme=light] .replay-btn{border-color:var(--color-wood-dark);color:#4a3520;background:#ffffff80}[data-theme=light] .replay-btn:hover:not(:disabled){border-color:var(--color-wood-dark);background:#ffffffb3}[data-theme=light] .replay-move-list,[data-theme=light] .replay-move-item{background:#0000000d}[data-theme=light] .replay-move-item:hover{background:#0000001a}[data-theme=light] .replay-shortcuts{border-top-color:#0000001a}.position-analysis{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);z-index:50;box-shadow:var(--shadow-lg);animation:.2s ease-out slideIn;position:absolute;top:0;left:0;right:0}.analysis-header{margin-bottom:var(--spacing-sm);justify-content:space-between;align-items:center;display:flex}.analysis-header h4{color:var(--color-text-primary);margin:0;font-size:14px}.analyzing-indicator{color:var(--color-accent-green);font-size:12px;animation:1s ease-in-out infinite pulse}.best-move-highlight{border:1px solid var(--color-accent-green);border-radius:var(--radius-sm);padding:var(--spacing-sm);margin-bottom:var(--spacing-sm);background:#4caf5033;justify-content:space-between;align-items:center;display:flex}.best-move-label{color:var(--color-text-secondary);font-size:12px}.best-move-coord{color:var(--color-accent-green);font-family:Courier New,monospace;font-size:16px;font-weight:700}.move-analysis-list{max-height:150px;overflow-y:auto}.analysis-item{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;transition:background .2s;display:flex}.analysis-item:hover{background:#ffffff1a}.analysis-rank{color:var(--color-text-secondary);min-width:20px;font-size:12px}.analysis-coord{font-family:Courier New,monospace;font-weight:500}.analysis-quality{text-align:right;flex:1;font-size:11px}.analysis-score{color:var(--color-text-secondary);font-family:Courier New,monospace;font-size:11px}.quality-best{color:#4caf50}.quality-corner{color:#ffeb3b}.quality-edge{color:#03a9f4}.quality-good{color:#8bc34a}.quality-risky{color:#ff5722}.quality-neutral{color:var(--color-text-secondary)}.analysis-legend{gap:var(--spacing-sm);margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid #ffffff1a;justify-content:center;display:flex}.legend-item{color:var(--color-text-secondary);font-size:10px}.legend-best{color:#4caf50}.legend-corner{color:#ffeb3b}.legend-edge{color:#03a9f4}.no-moves{text-align:center;color:var(--color-text-secondary);padding:var(--spacing-md);font-size:13px}[data-theme=light] .position-analysis{background:linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 100%);border-color:var(--color-wood-dark)}[data-theme=light] .analysis-header h4{color:#4a3520}[data-theme=light] .analysis-item{border-color:var(--color-wood-dark);background:#fff6}[data-theme=light] .analysis-item:hover{background:#fff9}[data-theme=light] .analysis-legend{border-top-color:var(--color-wood-dark)}.game-statistics-overlay{z-index:1000;padding:var(--spacing-md);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.game-statistics{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);scrollbar-width:thin;scrollbar-color:#ffffff4d transparent;width:100%;max-width:500px;max-height:80vh;animation:.3s slideIn;overflow-y:auto}.game-statistics::-webkit-scrollbar{width:8px}.game-statistics::-webkit-scrollbar-track{border-radius:var(--radius-lg);margin:var(--spacing-md) 0;background:0 0}.game-statistics::-webkit-scrollbar-thumb{border-radius:var(--radius-lg);background:#ffffff4d padding-box padding-box;border:2px solid #0000}.game-statistics::-webkit-scrollbar-thumb:hover{background:#ffffff80 padding-box padding-box}.stats-header{padding:var(--spacing-md);border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary);z-index:1;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.stats-header h3{color:var(--color-text-primary);margin:0;font-size:18px}.stats-close{color:var(--color-text-secondary);cursor:pointer;padding:0 var(--spacing-xs);background:0 0;border:none;font-size:24px}.stats-close:hover{color:var(--color-text-primary)}.stats-section{padding:var(--spacing-md);border-bottom:1px solid #ffffff0d}.stats-section h4{margin:0 0 var(--spacing-sm) 0;color:var(--color-text-secondary);font-size:14px}.stats-record{margin-bottom:var(--spacing-sm);justify-content:space-around;display:flex}.record-item{text-align:center}.record-value{font-size:32px;font-weight:700;display:block}.record-label{color:var(--color-text-secondary);font-size:12px}.record-item.wins .record-value{color:#4caf50}.record-item.losses .record-value{color:#f44336}.record-item.draws .record-value{color:#9e9e9e}.win-rate{text-align:center;padding:var(--spacing-sm);border-radius:var(--radius-sm);background:#0003}.win-rate-label{color:var(--color-text-secondary);margin-right:var(--spacing-xs)}.win-rate-value{color:var(--color-accent-green);font-size:20px;font-weight:700}.streaks{gap:var(--spacing-lg);display:flex}.streak-item{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);background:#0003;flex:1;justify-content:space-between;display:flex}.streak-label{color:var(--color-text-secondary);font-size:13px}.streak-value{color:#ff9800;font-weight:700}.difficulty-stats{gap:var(--spacing-xs);flex-direction:column;display:flex}.difficulty-row{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);background:#0003;align-items:center;display:flex}.difficulty-name{min-width:80px;font-weight:500}.difficulty-record{text-align:center;color:var(--color-text-secondary);flex:1;font-size:13px}.difficulty-rate{text-align:right;min-width:50px;font-weight:700}.time-stats{gap:var(--spacing-md);display:flex}.time-stat{padding:var(--spacing-sm);border-radius:var(--radius-sm);text-align:center;background:#0003;flex-direction:column;flex:1;gap:4px;display:flex}.time-label{color:var(--color-text-secondary);font-size:12px}.time-value{font-family:Courier New,monospace;font-weight:700}.recent-games-list{max-height:200px;overflow-y:auto}.recent-game-item{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;transition:background .2s;display:flex}.recent-game-item:hover{background:#ffffff0d}.game-info{align-items:center;gap:var(--spacing-sm);display:flex}.result-badge{border-radius:10px;padding:2px 8px;font-size:11px;font-weight:700}.result-badge.win{color:#4caf50;background:#4caf504d}.result-badge.loss{color:#f44336;background:#f443364d}.result-badge.draw{color:#9e9e9e;background:#9e9e9e4d}.result-badge.spectator{color:#ba68c8;background:#9c27b04d}.game-score{font-size:13px}.game-difficulty{color:var(--color-text-secondary);font-size:11px}.timeout-badge{font-size:12px}.game-date{color:var(--color-text-secondary);font-size:11px}.no-games{text-align:center;padding:var(--spacing-lg);color:var(--color-text-secondary)}.stats-actions{justify-content:center;display:flex}.clear-stats-btn{color:#f44336;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer;background:#f4433633;border:1px solid #f4433680;transition:all .2s}.clear-stats-btn:hover{background:#f443364d}.confirm-clear{align-items:center;gap:var(--spacing-sm);display:flex}.confirm-yes{color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;background:#f44336;border:none}.confirm-no{color:var(--color-text-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff1a;border:1px solid #fff3}.stats-footer{text-align:center;padding:var(--spacing-sm);color:var(--color-text-secondary);font-size:12px}.stats-loading{text-align:center;padding:var(--spacing-xl);color:var(--color-text-secondary)}.stats-tabs{border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-md);display:flex}.stats-tab{padding:var(--spacing-sm) var(--spacing-md);color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;flex:1;font-size:14px;font-weight:500;transition:all .2s}.stats-tab:hover{color:var(--color-text-primary);background:#ffffff0d}.stats-tab.active{color:var(--color-accent-green);border-bottom:2px solid var(--color-accent-green)}.stats-panel-large{max-width:600px;max-height:85vh}.all-games-list{max-height:400px;overflow-y:auto}.game-history-item{padding:var(--spacing-sm);border-bottom:1px solid #ffffff1a}.game-history-item:last-child{border-bottom:none}.game-info-row{align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs);display:flex}.game-meta-row{align-items:center;gap:var(--spacing-md);color:var(--color-text-secondary);font-size:12px;display:flex}.game-moves,.game-duration{opacity:.8}.history-replay-btn{border:1px solid var(--color-accent-green);color:var(--color-accent-green);border-radius:var(--radius-sm);cursor:pointer;background:0 0;margin-left:auto;padding:4px 10px;font-size:11px;font-weight:600;transition:all .2s}.history-replay-btn:hover{background:var(--color-accent-green);color:#fff}.no-replay-available{color:var(--color-text-muted);opacity:.6;margin-left:auto;font-size:10px}.replay-section{margin-bottom:var(--spacing-lg)}.replay-section h4{margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.replay-card{padding:var(--spacing-md);border-radius:var(--radius-md);text-align:center;background:#4caf501a;border:1px solid #4caf504d}.replay-card p{margin-bottom:var(--spacing-sm);color:var(--color-text-secondary)}.replay-btn{background:var(--color-accent-green);color:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;border:none;font-size:14px;font-weight:600;transition:all .2s}.replay-btn:hover{background:#5bc45f;transform:translateY(-1px)}.coming-soon-card{padding:var(--spacing-lg);border-radius:var(--radius-md);text-align:center;background:#ffffff0d;border:1px dashed #fff3}.coming-soon-icon{margin-bottom:var(--spacing-sm);font-size:32px;display:block}.coming-soon-card p{color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.coming-soon-badge{padding:var(--spacing-xs) var(--spacing-sm);color:#ffc107;border-radius:var(--radius-sm);background:#ffc10733;font-size:12px;font-weight:600;display:inline-block}.win-rate-spark{width:100%;height:80px;display:block}.chart-midline{stroke:var(--color-border);stroke-width:1px;stroke-dasharray:4 4}.chart-line{fill:none;stroke:var(--color-accent-green);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.chart-dot{fill:var(--color-accent-green);stroke:var(--color-bg-secondary);stroke-width:2px}.chart-no-data{color:var(--color-text-muted);text-align:center;padding:var(--spacing-md);margin:0;font-size:13px}.win-rate-chart-wrap{background:var(--color-bg-primary);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:var(--spacing-sm) var(--spacing-md) var(--spacing-xs);overflow:hidden}.chart-labels{color:var(--color-text-muted);justify-content:space-between;margin-top:2px;padding:0 2px;font-size:11px;display:flex}.difficulty-row-visual{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) 0;grid-template-columns:90px 1fr 44px;display:grid}.diff-bar-container{flex-direction:column;gap:3px;display:flex}.diff-bar-track{background:var(--color-bg-tertiary);border-radius:4px;height:8px;display:flex;overflow:hidden}.diff-bar-segment{height:100%;transition:width .4s}.diff-bar-win{background:var(--color-accent-green)}.diff-bar-draw{background:#888}.diff-bar-loss{background:var(--color-accent-red)}.diff-bar-empty{color:var(--color-text-muted);font-size:12px}.diff-bar-sub{color:var(--color-text-muted);font-size:11px}.recent-form-label{color:var(--color-text-secondary);margin:var(--spacing-sm) 0 var(--spacing-xs);font-size:12px}.recent-results-track{flex-wrap:wrap;gap:6px;display:flex}.result-dot{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:11px;font-weight:700;display:flex}.result-dot.win{color:var(--color-accent-green);border:1px solid var(--color-accent-green);background:#4caf5026}.result-dot.loss{color:var(--color-accent-red);border:1px solid var(--color-accent-red);background:#f443361a}.result-dot.draw{background:var(--color-bg-tertiary);color:var(--color-text-secondary);border:1px solid var(--color-border)}.result-modal-overlay{z-index:1100;background:#000c;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.result-modal{background:var(--color-bg-secondary);border-radius:var(--radius-xl);padding:var(--spacing-xl);text-align:center;min-width:340px;max-width:90vw;animation:.4s cubic-bezier(.34,1.56,.64,1) slideInWithScale;box-shadow:0 20px 60px #00000080}@keyframes slideInWithScale{0%{opacity:0;transform:scale(.9)translateY(-20px)}to{opacity:1;transform:scale(1)translateY(0)}}.result-header{margin-bottom:var(--spacing-lg);justify-content:space-between;align-items:center;display:flex}.result-pill{color:var(--color-accent-green);padding:var(--spacing-xs) var(--spacing-md);text-transform:uppercase;letter-spacing:.5px;background:#4caf5033;border-radius:20px;font-size:12px;font-weight:600}.result-close{color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-xs);background:0 0;border:none;font-size:24px;line-height:1;transition:color .2s}.result-close:hover{color:var(--color-text-primary)}.result-body{margin-bottom:var(--spacing-xl)}.result-title{margin-bottom:var(--spacing-sm);color:var(--color-text-primary);font-size:28px;font-weight:700}.result-subtitle{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);font-size:14px}.result-score{justify-content:center;align-items:center;gap:var(--spacing-lg);display:flex}.result-score-card{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg);background:#ffffff0d;border:2px solid #0000;flex-direction:column;transition:all .3s;display:flex}.result-score-card.winner{border-color:var(--color-accent-green);background:#4caf501a;box-shadow:0 0 20px #4caf504d}.result-score-value{font-family:Courier New,monospace;font-size:36px;font-weight:700}.result-score-separator{color:var(--color-text-secondary);font-size:24px}.result-actions{gap:var(--spacing-md);justify-content:center;display:flex}.result-btn{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);cursor:pointer;min-width:140px;font-size:16px;font-weight:600;transition:all .2s}.result-btn.primary{background:var(--color-accent-green);color:#fff;border:none}.result-btn.primary:hover{background:#5bc45f;transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.result-btn.secondary{border:2px solid var(--color-border);color:var(--color-text-primary);background:0 0}.result-btn.secondary:hover{border-color:var(--color-text-secondary);background:#ffffff0d}.error-boundary{min-height:400px;padding:var(--spacing-xl);justify-content:center;align-items:center;display:flex}.error-boundary-content{text-align:center;max-width:400px}.error-boundary-content h2{color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.error-boundary-content p{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.error-boundary-details{background:var(--color-bg-tertiary);color:var(--color-accent-red);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);text-align:left;font-size:.85rem;overflow-x:auto}.mode-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal);padding:var(--spacing-md);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.mode-panel{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--spacing-xl);width:100%;max-width:480px;box-shadow:var(--shadow-lg)}.mode-header{margin-bottom:var(--spacing-lg);justify-content:space-between;align-items:center;display:flex}.mode-header h2{color:var(--color-text-primary);margin:0;font-size:1.4rem;font-weight:700}.mode-cards{gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);grid-template-columns:repeat(3,1fr);display:grid}.mode-card{padding:var(--spacing-md) var(--spacing-sm);background:var(--color-bg-tertiary);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:border-color var(--transition-fast), background var(--transition-fast);color:var(--color-text-primary);flex-direction:column;align-items:center;gap:6px;display:flex}.mode-card:hover{border-color:var(--color-border-hover);background:#ffffff0d}.mode-card.selected{border-color:var(--color-accent-green);background:#4caf501a}.mode-icon{font-size:1.8rem}.mode-title{font-size:.85rem;font-weight:600}.mode-desc{color:var(--color-text-muted);text-align:center;font-size:.72rem}.mode-options{gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--color-bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--color-border);flex-direction:column;display:flex}.mode-option-group{gap:var(--spacing-sm);flex-direction:column;display:flex}.mode-option-label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:600}.difficulty-chips{flex-direction:column;gap:6px;display:flex}.difficulty-chip{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast);color:var(--color-text-primary);text-align:left;display:flex}.difficulty-chip:hover{border-color:var(--color-border-hover)}.difficulty-chip.selected{border-color:var(--color-accent-blue);background:#2196f31a}.chip-label{min-width:52px;font-size:.85rem;font-weight:600}.chip-desc{color:var(--color-text-muted);font-size:.75rem}.color-chips{gap:var(--spacing-sm);display:flex}.color-chip{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast), background var(--transition-fast);color:var(--color-text-primary);flex:1;font-size:.85rem;font-weight:600;display:flex}.color-chip.selected{border-color:var(--color-accent-green);background:#4caf501a}.piece-dot{border-radius:50%;flex-shrink:0;width:14px;height:14px}.piece-dot.black{background:radial-gradient(circle at 35% 35%,#4a4a4a,#000)}.piece-dot.white{background:radial-gradient(circle at 35% 35%,#fff,#ccc);border:1px solid #aaa}.mode-start-btn{width:100%;padding:var(--spacing-md);background:var(--color-accent-green);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast), transform var(--transition-fast);border:none;font-size:1rem;font-weight:700}.mode-start-btn:hover{background:#43a047;transform:translateY(-1px)}.mode-start-btn:active{transform:translateY(0)}@media (width<=480px){.mode-cards{grid-template-columns:1fr}.mode-card{justify-content:flex-start;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);flex-direction:row}.mode-icon{font-size:1.4rem}.mode-desc{text-align:left}}.move-history-list{flex-direction:column;gap:2px;max-height:220px;padding-right:2px;display:flex;overflow-y:auto}.move-history-empty{color:var(--color-text-muted);text-align:center;padding:var(--spacing-sm);font-size:.8rem}.move-pair{border-radius:var(--radius-sm);grid-template-columns:28px 1fr 1fr;align-items:center;gap:2px;display:grid}.move-pair:hover{background:#ffffff08}.move-pair-num{color:var(--color-text-muted);text-align:right;-webkit-user-select:none;user-select:none;padding-right:4px;font-size:.75rem}.move-entry{border-radius:var(--radius-sm);letter-spacing:.02em;color:var(--color-text-secondary);transition:background var(--transition-fast), color var(--transition-fast);padding:3px 6px;font-size:.82rem;font-weight:500}.move-entry.black:before{content:"";vertical-align:middle;background:#111;border:1px solid #555;border-radius:50%;width:8px;height:8px;margin-right:4px;display:inline-block}.move-entry.white:before{content:"";vertical-align:middle;background:#eee;border:1px solid #999;border-radius:50%;width:8px;height:8px;margin-right:4px;display:inline-block}.move-entry[role=button]{cursor:pointer}.move-entry[role=button]:hover{color:var(--color-text-primary);background:#ffffff14}.move-entry.active{color:var(--color-text-primary);background:#2196f333;font-weight:600}.theme-picker{gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr);display:grid}.theme-option{padding:var(--spacing-sm);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast);color:var(--color-text-primary);background:0 0;flex-direction:column;align-items:center;gap:6px;display:flex}.theme-option:hover{border-color:var(--color-border-hover)}.theme-option.selected{border-color:var(--color-accent-green)}.theme-swatch{aspect-ratio:2;border-radius:var(--radius-sm);grid-template-columns:1fr 1fr;width:100%;display:grid}.theme-swatch-half{border-radius:inherit}.theme-option-name{font-size:.78rem;font-weight:500}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sidebar{gap:var(--spacing-md);flex-direction:column;height:100%;min-height:0;display:flex}.sidebar-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-sm)}[data-theme=light] .sidebar-card{background: repeating-linear-gradient(90deg, transparent, transparent 15px, var(--color-wood-grain) 15px, var(--color-wood-grain) 16px, transparent 16px, transparent 45px),  linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 100%);border:1px solid var(--color-wood-dark);box-shadow:inset 0 1px 3px #fff6,0 2px 8px #00000026}[data-theme=light] .sidebar-card-title{color:#4a3520;text-shadow:0 1px 1px #ffffff80}.sidebar-card-title{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-md);text-align:center;font-size:14px;font-weight:600}.turn-controls{padding:var(--spacing-md);justify-content:space-between;align-items:center;gap:var(--spacing-sm);display:flex}.turn-player{align-items:center;gap:var(--spacing-xs);min-width:70px;font-size:14px;font-weight:600;display:flex}.turn-player span{min-width:40px}.turn-piece{width:18px;height:18px;box-shadow:var(--shadow-sm);border-radius:50%}.turn-piece.black{background:radial-gradient(circle at 30% 30%,#4a4a4a,#000)}.turn-piece.white{background:radial-gradient(circle at 30% 30%,#fff,#ccc)}.control-btn-compact{background:var(--color-bg-tertiary);border:1px solid var(--color-border);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;min-width:36px;min-height:36px;font-size:16px;transition:all .2s;display:flex;box-shadow:0 2px 4px #0000004d,0 1px 2px #0003,inset 0 1px #ffffff1a}.control-btn-compact:hover:not(:disabled){background:var(--color-bg-hover);transform:translateY(-2px);box-shadow:0 4px 8px #0006,0 2px 4px #0000004d,inset 0 1px #ffffff26}.control-btn-compact:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px #0000004d,inset 0 2px 4px #0003}.control-btn-compact:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}[data-theme=light] .control-btn-compact{background:linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 100%);border:1px solid var(--color-wood-dark);color:#4a3520;box-shadow:inset 0 1px 2px #ffffff80,0 2px 4px #0003}[data-theme=light] .control-btn-compact:hover:not(:disabled){background:linear-gradient(180deg, var(--color-wood-base) 0%, var(--color-wood-dark) 100%);transform:translateY(-1px)}[data-theme=light] .control-btn-compact:active:not(:disabled){transform:translateY(0);box-shadow:inset 0 2px 4px #0003}[data-theme=light] .turn-controls{background:repeating-linear-gradient(90deg, transparent, transparent 12px, var(--color-wood-grain) 12px, var(--color-wood-grain) 13px, transparent 13px, transparent 35px), linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 100%);border:1px solid var(--color-wood-dark);border-radius:var(--radius-lg);box-shadow:inset 0 1px 3px #fff6,0 2px 6px #00000026}[data-theme=light] .turn-player{color:#4a3520;text-shadow:0 1px 1px #ffffff80}.hint-btn{position:relative}.hint-btn.active{border-color:var(--color-accent-green);color:var(--color-accent-green);background:#4caf5033}.hint-badge{background:var(--color-accent-green);color:#fff;border-radius:50%;justify-content:center;align-items:center;min-width:18px;height:18px;font-size:10px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px;box-shadow:0 2px 4px #0000004d}.score-display{padding:var(--spacing-sm);justify-content:space-around;display:flex}.score-item{align-items:center;gap:var(--spacing-xs);flex-direction:column;display:flex;position:relative}.score-value-container{justify-content:center;align-items:center;display:flex;position:relative}.score-value{font-family:Courier New,monospace;font-size:24px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1)}.score-value.score-increased{animation:.5s cubic-bezier(.34,1.56,.64,1) scoreIncrease}.score-value.score-decreased{animation:.5s cubic-bezier(.34,1.56,.64,1) scoreDecrease}@keyframes scoreDecrease{0%{transform:scale(1)}25%{color:#f44336;text-shadow:0 0 15px #f4433699;transform:scale(.9)translate(-2px)}50%{transform:scale(.9)translate(2px)}to{transform:scale(1)translate(0)}}.score-delta{pointer-events:none;font-family:Courier New,monospace;font-size:14px;font-weight:700;animation:1s ease-out forwards floatUpDelta;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.score-delta.positive{color:var(--color-accent-green);text-shadow:0 0 10px #4caf5080}.score-delta.negative{color:var(--color-accent-red);text-shadow:0 0 10px #f4433680}@keyframes floatUpDelta{0%{opacity:0;transform:translate(-50%)translateY(0)}20%{opacity:1}80%{opacity:1}to{opacity:0;transform:translate(-50%)translateY(-30px)}}.score-label{color:var(--color-text-secondary);text-transform:uppercase;font-size:12px}.score-separator{color:var(--color-text-muted);align-self:center;font-size:32px}.controls-grid{gap:var(--spacing-sm);grid-template-columns:1fr 1fr;display:grid}.control-btn{background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:var(--color-text-primary);padding:var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-sm);font-size:14px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 4px #0003}.control-btn:hover:not(:disabled){background:var(--color-bg-tertiary);border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.control-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px #0003}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.full-width{grid-column:1/-1}.control-btn.primary{background:var(--color-accent-green);border-color:var(--color-accent-green);color:#fff}.control-btn.primary:hover:not(:disabled){background:#5bc45f;border-color:#5bc45f}.bonus-controls{gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.bonus-btn{min-width:70px;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;background:#ffffff0d;border:1px solid #ffffff26;flex:1;font-size:12px;transition:all .2s}.bonus-btn:hover:not(:disabled){color:var(--color-text-primary);background:#ffffff1a;border-color:#ffffff40}.bonus-btn:disabled{opacity:.4;cursor:not-allowed}.bonus-btn.active{border-color:var(--color-accent-green);color:var(--color-accent-green);background:#4caf5033}.bonus-btn.active:hover{background:#4caf504d}.move-history-card{flex-direction:column;flex:1 1 0;min-height:120px;display:flex;overflow:hidden}.move-history-card .sidebar-card-title{flex-shrink:0}.move-history{padding:var(--spacing-sm);scroll-behavior:smooth;flex:1;min-height:0;overflow-y:auto}.move-list{gap:var(--spacing-xs);flex-direction:column;list-style:none;display:flex}.move-item{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-sm);font-family:Courier New,monospace;font-size:14px;transition:all .2s cubic-bezier(.4,0,.2,1);animation:.3s ease-out slideInFromLeft;display:flex}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.move-item:hover{background:#ffffff0d;transform:translate(4px)}.move-number{color:var(--color-text-muted);min-width:30px}.move-notation{color:var(--color-text-primary)}.move-player{border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0000004d}.move-player.black{background:radial-gradient(circle at 30% 30%,#4a4a4a,#000)}.move-player.white{background:radial-gradient(circle at 30% 30%,#fff,#ccc)}.move-history::-webkit-scrollbar{width:6px}.move-history::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.move-history::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.move-history::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.game-message{padding:var(--spacing-md);text-align:center;border-radius:var(--radius-md);color:var(--color-accent-blue);background:#2196f31a;border:1px solid #2196f34d;font-weight:600;animation:.3s ease-out fadeIn}.game-message.error{color:var(--color-accent-red);background:#f443361a;border-color:#f443364d}.game-message.success{color:var(--color-accent-green);background:#4caf501a;border-color:#4caf504d}@media (width<=768px){.sidebar{gap:var(--spacing-sm);height:auto}.sidebar-card{padding:var(--spacing-sm)}.sidebar-card-title{margin-bottom:var(--spacing-sm);font-size:11px}.control-btn-compact{min-width:40px;min-height:40px;font-size:18px}.turn-controls{padding:var(--spacing-sm)}.turn-player{font-size:13px}.turn-piece{width:20px;height:20px}.score-value{font-size:26px}.move-history-card{flex:0 auto;min-height:120px;max-height:200px}.move-history{max-height:160px;overflow-y:auto}.move-item{padding:var(--spacing-sm);font-size:12px}}@media (width<=480px){.sidebar-card-title{font-size:10px}.score-display{padding:var(--spacing-xs)}.score-value{font-size:22px}.turn-player{min-width:60px;font-size:12px}.turn-piece{width:16px;height:16px}.control-btn-compact{min-width:36px;min-height:36px;font-size:16px}.move-history-card{min-height:100px;max-height:160px}.move-item{font-size:11px}}@media (width<=375px){.sidebar-card{padding:var(--spacing-xs)}.score-value{font-size:20px}.turn-controls{padding:var(--spacing-xs);gap:var(--spacing-xs)}.control-btn-compact{min-width:32px;min-height:32px;padding:4px;font-size:14px}.move-history-card{min-height:80px;max-height:140px}}@media (width<=320px){.score-value{font-size:18px}.turn-player{min-width:50px;font-size:11px}.control-btn-compact{min-width:28px;min-height:28px;font-size:12px}}.ai-thinking-card{padding:var(--spacing-sm) var(--spacing-md)!important}.ai-thinking-indicator{align-items:center;gap:var(--spacing-sm);display:flex}.ai-thinking-text{color:var(--color-accent-blue);font-size:.85rem;font-weight:500}.ai-thinking-dots{gap:3px;display:flex}.ai-thinking-dots .dot{background:var(--color-accent-blue);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite aiDotPulse}.ai-thinking-dots .dot:nth-child(2){animation-delay:.2s}.ai-thinking-dots .dot:nth-child(3){animation-delay:.4s}@keyframes aiDotPulse{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.ai-thinking-stats{color:var(--color-text-muted);justify-content:space-between;margin-top:4px;font-size:.75rem;display:flex}.Board{width:var(--board-max-size);height:var(--board-max-size);aspect-ratio:1;background:var(--color-board-bg);border-radius:var(--radius-lg);padding:var(--board-padding,var(--spacing-lg));box-shadow:var(--shadow-lg);box-sizing:border-box;max-width:100%}[data-theme=light] .Board{--color-board-bg:linear-gradient(135deg, var(--color-wood-light) 0%, var(--color-wood-base) 50%, var(--color-wood-dark) 100%);background: repeating-linear-gradient(90deg, transparent, transparent 20px, var(--color-wood-grain) 20px, var(--color-wood-grain) 21px, transparent 21px, transparent 60px),  repeating-linear-gradient(0deg, transparent, transparent 40px, var(--color-wood-grain-dark) 40px, var(--color-wood-grain-dark) 41px),  linear-gradient(135deg, var(--color-wood-light) 0%, var(--color-wood-base) 30%, var(--color-wood-base) 70%, var(--color-wood-dark) 100%);border:2px solid var(--color-wood-dark);box-shadow:inset 0 2px 8px #ffffff4d,0 8px 32px #00000040,0 2px 4px #00000026}.board-grid{gap:var(--board-grid-gap,2px);border-radius:var(--radius-md);background:#0000004d;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:100%;height:100%;display:grid;overflow:hidden}.Tile{background:var(--color-board-light);cursor:pointer;transition:all var(--transition-fast);perspective:1000px;justify-content:center;align-items:center;display:flex;position:relative;overflow:visible}.tile-inner{width:100%;height:100%;transform-style:preserve-3d;position:relative}.Tile svg{filter:drop-shadow(0 2px 4px #0006)drop-shadow(0 4px 8px #0003);width:85%;height:85%;transition:filter .3s,transform .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Tile:hover svg{filter:drop-shadow(0 6px 12px #00000080)drop-shadow(0 8px 16px #0000004d);transform:translate(-50%,-50%)translateZ(10px)scale(1.05)}.Tile.dark{background:var(--color-board-dark)}.Tile.light{background:var(--color-board-light)}.Tile:hover{filter:brightness(1.05)}.Tile.valid-move{cursor:pointer}.Tile.valid-move .tile-inner .hint-dot{pointer-events:none;z-index:1;background:0 0;border:3px solid #4caf50b3;border-radius:50%;width:30%;height:30%;margin-top:-15%;margin-left:-15%;transition:all .2s;position:absolute;top:50%;left:50%;box-shadow:0 0 0 2px #4caf5033}.Tile.valid-move:hover .tile-inner .hint-dot{border-color:#4caf50e6;transform:scale(1.2);box-shadow:0 0 0 4px #4caf504d}.Tile.hint-move{z-index:5;animation:1s ease-in-out infinite hint-pulse;box-shadow:inset 0 0 0 3px #ffc107,0 0 15px #ffc10780}.Tile.hint-move .tile-inner .hint-dot{background:#ffc1074d;border-color:#ffc107;box-shadow:0 0 8px #ffc10799}@keyframes hint-pulse{0%,to{box-shadow:inset 0 0 0 3px #ffc107,0 0 15px #ffc10780}50%{box-shadow:inset 0 0 0 4px #ffc107,0 0 25px #ffc107b3}}.Tile.last-move{box-shadow:inset 0 0 0 3px var(--color-accent-blue);z-index:10;animation:.5s ease-out pulseLastMove;position:relative}.Tile.last-move-no-glare{box-shadow:inset 0 0 0 3px var(--color-accent-blue);animation:.5s ease-out pulseLastMove;position:relative}.Tile.last-move:before{content:"";pointer-events:none;opacity:0;z-index:20;background:linear-gradient(90deg,#0000 0%,#ffffffe6 50%,#0000 100%);width:50%;height:100%;animation:5s ease-in-out infinite glassGlare;position:absolute;top:0;left:-50%;transform:skew(-20deg)}.Tile.last-move:after{content:"";pointer-events:none;opacity:0;z-index:15;background:linear-gradient(135deg,#fff6 0%,#fff3 30%,#fff0 50% 100%);animation:.8s ease-out .2s forwards glareEffect;position:absolute;inset:0}@keyframes pulseLastMove{0%,to{box-shadow:inset 0 0 0 3px var(--color-accent-blue)}50%{box-shadow:inset 0 0 0 6px var(--color-accent-blue)}}@keyframes glareEffect{0%{opacity:0}30%{opacity:1}to{opacity:.3}}.Tile.initial-piece{z-index:5;position:relative}.Tile.glare-source{z-index:50}.Tile.glare-source:before{content:"";pointer-events:none;opacity:0;z-index:100;background:linear-gradient(90deg,#0000 0% 20%,#ffffff80 35%,#fffc 45%,#ffffffe6 50%,#fffc 55%,#ffffff80 65%,#0000 80% 100%);width:250%;height:250%;animation:1s ease-out .2s unifiedInitialGlare;position:absolute;top:-50%;left:-200%;transform:skew(-20deg)}@keyframes unifiedInitialGlare{0%{opacity:0;left:-200%}10%{opacity:1}70%{opacity:1;left:200%}80%{opacity:0;left:200%}to{opacity:0;left:200%}}.piece{width:85%;height:85%;transition:transform var(--transition-normal), box-shadow var(--transition-normal);border-radius:50%;position:relative;box-shadow:0 2px 6px #0006,0 1px 3px #0000004d}.piece.black{background:radial-gradient(circle at 30% 30%,#4a4a4a,#000)}.piece.white{background:radial-gradient(circle at 30% 30%,#fff,#ccc);box-shadow:0 2px 6px #00000080,0 1px 3px #0006,inset 0 -2px 4px #00000026}.piece:after{content:"";pointer-events:none;z-index:1;background:radial-gradient(at 35% 35%,#fffc,#fff6 40%,#ffffff1a 60%,#0000 75%);border-radius:50%;width:45%;height:45%;animation:4s ease-in-out infinite glareShimmer;position:absolute;top:12%;left:18%}.piece.black:after{opacity:.4}.piece.white:after{opacity:.7}@keyframes glareShimmer{0%,to{opacity:inherit;transform:scale(1)}50%{opacity:calc(var(--glare-opacity,.4) * 1.5);transform:scale(1.1)}}.piece:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000080,0 2px 6px #0006}.piece.white:hover{box-shadow:0 4px 12px #0009,0 2px 6px #00000080,inset 0 -2px 4px #0003}@media (width<=768px){.Board{padding:var(--spacing-md)}.board-grid{gap:1px}.Tile{min-width:44px;min-height:44px}.piece{width:80%;height:80%}}@media (width<=480px){.Board{padding:var(--spacing-sm);border-radius:var(--radius-md)}.Tile.valid-move:after{border-width:3px;width:30%;height:30%}.Tile.last-move{box-shadow:inset 0 0 0 4px var(--color-accent-blue)}}@media (width<=768px) and (orientation:landscape){.Board{--board-max-size:min(85vh, 500px)}}.Tile.tile-flip .tile-inner{animation:.6s cubic-bezier(.4,0,.2,1) flipAnimation}.Tile.tile-flip svg{animation:.6s cubic-bezier(.4,0,.2,1) flipPieceVisibility}@keyframes flipAnimation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)scale(1.1)}to{transform:rotateY(180deg)}}@keyframes flipPieceVisibility{0%{opacity:1}45%{opacity:1}50%{opacity:0}55%{opacity:1}to{opacity:1}}@keyframes glassGlare{0%{opacity:0;left:-50%}1%{opacity:1}10%{opacity:1;left:100%}11%{opacity:0;left:100%}to{opacity:0;left:100%}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes scoreIncrease{0%{transform:scale(1)}50%{color:gold;text-shadow:0 0 20px #ffd700cc;transform:scale(1.3)}to{transform:scale(1)}}@keyframes floatUp{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-40px)scale(.8)}}.score-change{animation:.5s cubic-bezier(.34,1.56,.64,1) scoreIncrease}.score-float{animation:1s ease-out forwards floatUp}@keyframes timePulse{0%{transform:scale(1);box-shadow:0 0 #dc262600}50%{transform:scale(1.05);box-shadow:0 0 12px #dc262699}to{transform:scale(1);box-shadow:0 0 #dc262600}}@keyframes timeFlash{0%{background-color:#0000}30%{background-color:#facc154d}to{background-color:#0000}}.time-control.pulsing{animation:1.5s ease-in-out infinite timePulse}.time-control.flashing{animation:.3s ease-out timeFlash}.evaluation-bar-container{flex-direction:column;align-items:center;gap:8px;min-width:48px;display:flex}.evaluation-bar-label{color:var(--color-text-primary);flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:24px;font-size:14px;font-weight:600;display:flex}.eval-number{letter-spacing:-.01em;font-size:13px;font-weight:700}.evaluation-bar{background:linear-gradient(#4caf5033 0%,#2196f333 100%);border:1px solid #fff3;border-radius:6px;width:32px;height:320px;overflow:hidden;box-shadow:inset 0 2px 8px #0000004d}.evaluation-bar.equal{border-color:#ffffff1a}.evaluation-bar.slight{border-color:#ffffff1f}.evaluation-bar.better{border-color:#ffffff29}.evaluation-bar.winning{border-color:#fff3}.eval-section.black{background:linear-gradient(#4caf5080,#4caf504d);border-bottom:1px solid #4caf504d;transition:height .2s ease-out}.evaluation-bar.winning .eval-section.black{background:linear-gradient(#4caf50cc,#4caf5080);border-color:#4caf5099;box-shadow:0 0 12px #4caf5066}.eval-section.white{background:linear-gradient(#2196f34d,#2196f380);border-top:1px solid #2196f34d;transition:height .2s ease-out}.evaluation-bar.winning .eval-section.white{background:linear-gradient(#2196f380,#2196f3cc);border-color:#2196f399;box-shadow:0 0 12px #2196f366}.evaluation-bar-labels{flex-direction:column;gap:4px;width:100%;display:flex}.player-label{color:var(--color-text-secondary);text-align:center;opacity:.6;padding:4px 0;font-size:11px;font-weight:700;transition:opacity .2s}.player-label.active{opacity:1;color:var(--color-text-primary);font-weight:700}@media (width<=480px){.evaluation-bar-container{min-width:40px}.evaluation-bar{width:28px;height:240px}.eval-number{font-size:12px}.player-label{font-size:10px}}.puzzles-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.puzzles-panel{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;width:90%;max-width:600px;max-height:85vh;display:flex;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.puzzles-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.puzzles-header h3{color:var(--color-text-primary);margin:0;font-size:20px}.puzzles-close{color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-md);background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:28px;transition:all .2s;display:flex}.puzzles-close:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.difficulty-filter{gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);flex-shrink:0;display:flex}.difficulty-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;flex:1;font-size:13px;font-weight:600;transition:all .2s}.difficulty-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.difficulty-btn.active{background:var(--color-accent-green);border-color:var(--color-accent-green);color:#fff}.puzzle-content{padding:var(--spacing-lg);gap:var(--spacing-lg);flex-direction:column;flex:1;display:flex;overflow-y:auto}.puzzle-info h4{margin:0 0 var(--spacing-sm) 0;color:var(--color-text-primary);font-size:16px}.puzzle-meta{align-items:center;gap:var(--spacing-md);font-size:12px;display:flex}.difficulty-badge{border-radius:var(--radius-sm);padding:4px 8px;font-size:11px;font-weight:700;display:inline-block}.difficulty-badge.easy{color:#4caf50;background:#4caf5033}.difficulty-badge.medium{color:#ffc107;background:#ffc10733}.difficulty-badge.hard{color:#f44336;background:#f4433633}.puzzle-progress{color:var(--color-text-secondary)}.solved-badge{color:#4caf50;border-radius:var(--radius-sm);background:#4caf5033;padding:4px 8px;font-size:11px;font-weight:600;display:inline-block}.puzzle-board-container{padding:var(--spacing-md);background:var(--color-bg-primary);border-radius:var(--radius-md);border:1px solid var(--color-border);justify-content:center;display:flex}.puzzle-board-container .OthelloBoard{width:auto;max-width:100%}.puzzle-feedback{padding:var(--spacing-md);border-radius:var(--radius-md);text-align:center;font-size:14px;font-weight:600;transition:all .2s}.puzzle-feedback.info{color:#2196f3;background:#2196f31a;border:1px solid #2196f34d}.puzzle-feedback.success{color:#4caf50;background:#4caf501a;border:1px solid #4caf504d;animation:.3s slideDown}.puzzle-feedback.error{color:#f44336;background:#f443361a;border:1px solid #f443364d;animation:.3s shake}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.puzzle-buttons{gap:var(--spacing-md);flex-wrap:wrap;display:flex}.puzzle-btn{min-width:120px;padding:var(--spacing-md) var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-tertiary);color:var(--color-text-primary);cursor:pointer;flex:1;font-size:14px;font-weight:600;transition:all .2s}.puzzle-btn:hover{background:var(--color-bg-hover);border-color:var(--color-border-hover)}.puzzle-btn.secondary{background:0 0}.puzzle-btn:disabled{opacity:.5;cursor:not-allowed}.puzzle-explanation{padding:var(--spacing-md);background:var(--color-bg-primary);border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:14px;line-height:1.5;animation:.3s slideDown}.puzzle-navigation{gap:var(--spacing-md);display:flex}.nav-btn{padding:var(--spacing-md) var(--spacing-lg);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;flex:1;font-size:14px;font-weight:600;transition:all .2s}.nav-btn:hover:not(:disabled){background:var(--color-bg-hover);border-color:var(--color-border-hover);transform:translateY(-2px)}.nav-btn:disabled{opacity:.5;cursor:not-allowed}.puzzle-quickjump{padding:var(--spacing-md);background:var(--color-bg-primary);border-radius:var(--radius-md);border:1px solid var(--color-border);flex-wrap:wrap;gap:6px;display:flex}.jump-btn{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;padding:0;font-size:12px;font-weight:600;transition:all .2s}.jump-btn:hover{background:var(--color-bg-hover);border-color:var(--color-border-hover);transform:scale(1.1)}.jump-btn.active{background:var(--color-accent-green);border-color:var(--color-accent-green);color:#fff}.jump-btn.solved{color:#4caf50;border-color:#4caf50}@media (width<=768px){.puzzles-panel{width:95%;max-height:90vh}.puzzle-content{padding:var(--spacing-md);gap:var(--spacing-md)}.difficulty-filter{padding:var(--spacing-sm) var(--spacing-md);gap:4px}.difficulty-btn{padding:6px 8px;font-size:12px}.puzzle-buttons{gap:var(--spacing-sm)}.puzzle-btn{min-width:100px;padding:var(--spacing-sm) var(--spacing-md);font-size:13px}}:root{--color-bg-primary:#1a1a1a;--color-bg-secondary:#2a2a2a;--color-bg-tertiary:#3a3a3a;--color-text-primary:#fff;--color-text-secondary:#ffffffb3;--color-text-muted:#ffffff80;--color-border:#ffffff1a;--color-border-hover:#fff3;--color-accent-green:#4caf50;--color-accent-blue:#2196f3;--color-accent-red:#f44336;--color-board-dark:#2c5f2d;--color-board-light:#97d077;--color-board-border:#1a3d1a;--color-board-bg:linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--transition-fast:.15s ease;--transition-normal:.2s ease;--transition-slow:.3s ease;--navbar-height:60px;--sidebar-width:280px;--game-gap:20px;--board-padding:16px;--board-max-size:min(80vh, calc(100vw - var(--sidebar-width) - var(--game-gap) * 3 - 40px), 650px);--board-grid-gap:2px;--tile-size:calc((var(--board-max-size) - var(--board-padding) * 2 - var(--board-grid-gap) * 7) / 8);--z-navbar:100;--z-menu:200;--z-modal:300;--z-loading:400}[data-theme=light]{--color-bg-primary:#f5f5f5;--color-bg-secondary:#e8e8e8;--color-bg-tertiary:#d4d4d4;--color-text-primary:#1a1a1a;--color-text-secondary:#000000b3;--color-text-muted:#00000080;--color-border:#0000001a;--color-border-hover:#0003;--color-board-dark:#2c5f2d;--color-board-light:#7cbc5c;--color-board-bg:linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);--color-wood-base:#d4a574;--color-wood-light:#e8c9a3;--color-wood-dark:#b8935c;--color-wood-grain:#8b5a2b26;--color-wood-grain-dark:#6543211a;--shadow-sm:0 2px 8px #0000001a;--shadow-md:0 4px 16px #00000026;--shadow-lg:0 8px 32px #0003}@media (width>=1400px){:root{--sidebar-width:320px;--board-max-size:min(85vh, calc(100vw - var(--sidebar-width) - 100px), 700px)}}@media (width<=1200px){:root{--sidebar-width:260px;--board-max-size:min(80vh, calc(100vw - var(--sidebar-width) - 80px), 600px)}}@media (width<=1024px){:root{--sidebar-width:240px;--game-gap:16px;--board-padding:12px;--board-max-size:min(75vh, calc(100vw - var(--sidebar-width) - 60px), 550px)}}@media (width<=768px){:root{--navbar-height:56px;--sidebar-width:100%;--game-gap:12px;--board-padding:10px;--board-max-size:min(60vh, calc(100vw - 24px));--spacing-sm:6px;--spacing-md:10px;--spacing-lg:14px}}@media (width<=480px){:root{--board-padding:8px;--board-max-size:min(55vh, calc(100vw - 16px));--spacing-sm:4px;--spacing-md:8px;--spacing-lg:12px}}@media (width<=375px){:root{--board-padding:6px;--board-grid-gap:1px;--board-max-size:min(50vh, calc(100vw - 12px));--spacing-xs:2px;--spacing-sm:4px;--spacing-md:6px;--spacing-lg:10px}}@media (width<=320px){:root{--board-padding:4px;--board-grid-gap:1px;--board-max-size:calc(100vw - 8px);--spacing-xs:2px;--spacing-sm:3px;--spacing-md:5px;--spacing-lg:8px}}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:#ffffff4d transparent}[data-theme=light] .custom-scrollbar{scrollbar-color:#0000004d transparent}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-track{border-radius:var(--radius-lg);margin:var(--spacing-md) 0;background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{border-radius:var(--radius-lg);background:#ffffff4d padding-box padding-box;border:2px solid #0000}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#ffffff80 padding-box padding-box}[data-theme=light] .custom-scrollbar::-webkit-scrollbar-thumb{background:#0000004d padding-box padding-box}[data-theme=light] .custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#00000080 padding-box padding-box}.card{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);background:#0003}[data-theme=light] .card{background:linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 50%, var(--color-wood-dark) 100%);border-color:var(--color-wood-dark);box-shadow:inset 0 1px 3px #fff6,0 2px 8px #00000026}.card-header{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-md);text-align:center;font-size:14px;font-weight:600}[data-theme=light] .card-header{color:#4a3520;text-shadow:0 1px 1px #ffffff80}.btn{background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-normal);font-size:14px}.btn:hover:not(:disabled){background:var(--color-bg-secondary);border-color:var(--color-border-hover);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--color-accent-green);border-color:var(--color-accent-green);color:#fff}.btn-primary:hover:not(:disabled){background:#45a049;border-color:#45a049}.btn-icon{min-width:36px;min-height:36px;padding:var(--spacing-xs);justify-content:center;align-items:center;font-size:16px;display:flex}.btn-compact{padding:var(--spacing-xs) var(--spacing-sm);border-radius:6px;font-size:16px}[data-theme=light] .btn{background:linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 100%);border-color:var(--color-wood-dark);color:#4a3520;box-shadow:inset 0 1px 2px #ffffff80,0 2px 4px #0003}[data-theme=light] .btn:hover:not(:disabled){background:linear-gradient(180deg, var(--color-wood-base) 0%, var(--color-wood-dark) 100%)}.badge{text-transform:uppercase;border-radius:12px;justify-content:center;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge-success{color:var(--color-accent-green);background:#4caf5033}.badge-warning{color:#ffc107;background:#ffc10733}.badge-error{color:var(--color-accent-red);background:#f4433633}.badge-info{color:var(--color-accent-blue);background:#2196f333}.badge-count{background:var(--color-accent-green);color:#fff;border-radius:50%;min-width:18px;height:18px;padding:0 4px;font-size:10px;font-weight:700}.message{padding:var(--spacing-md);text-align:center;border-radius:var(--radius-md);color:var(--color-accent-blue);background:#2196f31a;border:1px solid #2196f34d;font-weight:600;animation:.3s ease-out fadeIn}.message-error{color:var(--color-accent-red);background:#f443361a;border-color:#f443364d}.message-success{color:var(--color-accent-green);background:#4caf501a;border-color:#4caf504d}.overlay{z-index:var(--z-modal);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000000b3;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.panel{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:90%;max-width:500px;max-height:80vh;animation:.4s cubic-bezier(.4,0,.2,1) slideUp;overflow-y:auto;box-shadow:0 20px 60px #000000b3,0 10px 30px #00000080}.panel-header{z-index:10;background:var(--color-bg-secondary);padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-md);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:2px solid #ffffff1a;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.panel-header h2,.panel-header h3{color:var(--color-text-primary);margin:0}.panel-close{color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:32px;transition:all .2s;display:flex}.panel-close:hover{background:#ffffff1a;transform:rotate(90deg)}.panel-body{padding:var(--spacing-md) var(--spacing-xl) var(--spacing-xl)}@media (width<=768px){.btn-icon{min-width:32px;min-height:32px}.card{padding:var(--spacing-sm)}.card-header{font-size:12px}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-bg-primary);color:var(--color-text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}#root,.OthelloGame{flex-direction:column;min-height:100vh;display:flex}.game-wrapper{padding:var(--spacing-lg);padding-bottom:var(--spacing-md);flex-direction:column;flex:1;align-items:center;width:100%;max-width:1600px;margin:0 auto;display:flex}.game-container{justify-content:center;align-items:stretch;gap:var(--spacing-lg);width:100%;display:flex}.board-area{justify-content:center;align-items:center;gap:var(--spacing-md);flex:none;display:flex}.sidebar-area{gap:var(--spacing-md);flex-direction:column;flex:0 0 var(--sidebar-width);max-height:var(--board-max-size);display:flex;position:relative}.action-bar{justify-content:center;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);margin-top:var(--spacing-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:calc(var(--board-max-size) + var(--sidebar-width) + var(--spacing-lg));display:flex}.action-bar-btn{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;min-width:140px;font-size:15px;font-weight:600;transition:all .2s;display:flex}.action-bar-btn:hover{background:var(--color-bg-hover,#ffffff1a);border-color:var(--color-border-hover);transform:translateY(-2px)}.action-bar-btn:active{transform:translateY(0)}.action-bar-btn.primary{background:var(--color-accent-green);border-color:var(--color-accent-green);color:#fff}.action-bar-btn.primary:hover{background:#5cb860}.action-bar-btn .btn-icon{font-size:18px}.action-bar-btn .btn-text{display:inline}[data-theme=light] .action-bar{background:linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 100%);border-color:var(--color-wood-dark)}[data-theme=light] .action-bar-btn{border-color:var(--color-wood-dark);color:#4a3520;background:#ffffff80}[data-theme=light] .action-bar-btn:hover{background:#ffffffb3}[data-theme=light] .action-bar-btn.primary{background:var(--color-accent-green);color:#fff}@media (width<=1024px){.sidebar-area{flex:0 0 280px}.action-bar-btn{min-width:120px;padding:var(--spacing-md) var(--spacing-lg)}}@media (width<=768px){.game-wrapper{padding:var(--spacing-md);padding-bottom:var(--spacing-sm)}.game-container{gap:var(--spacing-md);flex-direction:column}.board-area{width:100%}.sidebar-area{flex:auto;width:100%;max-height:none}.action-bar{gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.action-bar-btn{width:56px;min-width:56px;height:56px;padding:var(--spacing-sm);border-radius:var(--radius-lg)}.action-bar-btn .btn-text{display:none}.action-bar-btn .btn-icon{font-size:24px}}@media (width<=480px){.game-wrapper{padding:var(--spacing-sm)}.game-container{gap:var(--spacing-sm)}.action-bar-btn{width:48px;min-width:48px;height:48px}}body{color:var(--color-text-primary);background:radial-gradient(circle at 20% 20%,#4caf501f,#0000 32%),radial-gradient(circle at 80% 0,#2196f31f,#0000 28%),linear-gradient(145deg,#0c0f13 0%,#121821 50%,#0a0d10 100%);font-family:Space Grotesk,Segoe UI,sans-serif}.page-shell{position:relative;overflow:hidden}.page-shell:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(120deg,#ffffff08 0%,#ffffff03 45%,#0000 55%),linear-gradient(#ffffff0a,#ffffff05);position:absolute;inset:0}.content-layer{z-index:1;position:relative}.landing-section{background:linear-gradient(#0000 0%,#0000004d 100%);border-bottom:1px solid #ffffff0a;width:100%;margin-bottom:0;padding:56px 32px 72px}.hero{grid-template-columns:1.2fr 1fr;gap:28px;width:100%;max-width:1200px;margin:0 auto;display:grid}.hero-panel{background:linear-gradient(135deg,#4caf501f,#2196f31f);border:1px solid #ffffff14;border-radius:18px;padding:28px;box-shadow:0 24px 60px #00000059}.hero-panel h1{letter-spacing:-.02em;margin-bottom:12px;font-size:clamp(28px,4vw,38px)}.hero-panel p{color:var(--color-text-secondary);margin-bottom:18px;line-height:1.5}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:12px;display:flex}.hero-btn{color:var(--color-text-primary);cursor:pointer;transition:transform var(--transition-fast), border-color var(--transition-fast);background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;padding:12px 16px;font-weight:600}.hero-btn.primary{color:#0a0d10;background:linear-gradient(120deg,#4caf50,#2196f3);border:none;box-shadow:0 12px 32px #2196f340}.hero-btn:hover{border-color:#ffffff29;transform:translateY(-2px)}.meta-strip{color:var(--color-text-secondary);flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;display:flex}.meta-chip{background:#ffffff0f;border:1px solid #ffffff14;border-radius:999px;padding:6px 10px}.secondary-panel{box-shadow:var(--shadow-md);background:#ffffff08;border:1px solid #ffffff0f;border-radius:16px;gap:14px;padding:22px;display:grid}.secondary-panel h3{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-secondary);font-size:16px}.insight-grid{gap:12px;display:grid}.insight-card{background:#ffffff05;border:1px solid #ffffff0f;border-radius:12px;padding:14px}.insight-card strong{margin-bottom:6px;display:block}.info-badges{flex-wrap:wrap;gap:8px;display:flex}.info-badge{color:var(--color-text-secondary);background:#ffffff0f;border:1px dashed #ffffff14;border-radius:10px;padding:6px 10px;font-size:13px}.game-wrapper{background:var(--color-bg-primary);padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-md);border-top:1px solid #ffffff0a;border-bottom:1px solid #ffffff0a;margin:0}.below-fold{border-top:1px solid #ffffff0a;gap:18px;max-width:1200px;margin:56px auto 40px;padding:56px 32px 32px;display:grid}.blog-section{box-shadow:var(--shadow-md);background:#ffffff05;border:1px solid #ffffff0f;border-radius:18px;padding:22px}.section-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.section-header h2{font-size:22px}.section-subtext{color:var(--color-text-secondary);font-size:14px}.blog-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;display:grid}.blog-card{background:linear-gradient(150deg,#4caf501f,#2196f314);border:1px solid #ffffff14;border-radius:14px;gap:10px;min-height:180px;padding:16px;display:grid;position:relative;overflow:hidden}.blog-card:after{content:"";pointer-events:none;background:radial-gradient(circle at 80% 10%,#ffffff26,#0000 40%);position:absolute;inset:0}.blog-card h3{z-index:1;margin:0;font-size:18px}.blog-card p{color:var(--color-text-secondary);z-index:1;margin:0;line-height:1.4}.blog-meta{color:var(--color-text-secondary);z-index:1;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;display:flex}.blog-pill{background:#00000040;border:1px solid #ffffff1a;border-radius:999px;padding:6px 8px}.blog-cta{color:var(--color-text-primary);cursor:pointer;z-index:1;transition:transform var(--transition-fast), border-color var(--transition-fast);background:#ffffff0f;border:1px solid #ffffff1a;border-radius:10px;justify-self:flex-start;padding:8px 12px;font-weight:600}.blog-cta:hover{border-color:#ffffff29;transform:translateY(-2px)}@media (width<=960px){.hero{grid-template-columns:1fr;padding:32px 20px 0}.below-fold{padding:0 20px 24px}}@media (width<=640px){.hero-panel,.secondary-panel{padding:18px}.section-header{flex-direction:column;align-items:flex-start}}.evaluation-panel{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all .3s;overflow:hidden}.evaluation-panel.collapsed{padding:var(--spacing-xs)}.evaluation-panel.open{padding:var(--spacing-sm)}.evaluation-header{margin-bottom:var(--spacing-sm);justify-content:space-between;align-items:center;display:flex}.evaluation-panel.collapsed .evaluation-header{margin-bottom:0}.evaluation-toggle{align-items:center;gap:var(--spacing-sm);color:var(--color-text-primary);cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);background:0 0;border:none;font-size:16px;transition:background .2s;display:flex}.evaluation-toggle:hover{background:var(--color-bg-tertiary)}.toggle-text{color:var(--color-text-secondary);font-size:12px}.zoom-controls{background:var(--color-bg-tertiary);border-radius:var(--radius-sm);align-items:center;gap:4px;padding:2px;display:flex}.zoom-controls button{color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-xs);background:0 0;border:none;justify-content:center;align-items:center;width:20px;height:20px;font-size:14px;display:flex}.zoom-controls button:hover{background:var(--color-bg-elevated);color:var(--color-text-primary)}.zoom-level{color:var(--color-text-secondary);text-align:center;min-width:32px;font-size:10px}.evaluation-graph-container{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;padding-bottom:4px;overflow:auto hidden}.evaluation-graph-container::-webkit-scrollbar{height:6px}.evaluation-graph-container::-webkit-scrollbar-track{background:0 0}.evaluation-graph-container::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:3px}.evaluation-graph{min-width:100%;display:block}.axis-label{fill:var(--color-text-muted);font-family:Courier New,monospace;font-size:10px}.graph-point{cursor:pointer;transition:r .15s}.graph-point:hover{r:6}.graph-legend{gap:var(--spacing-lg);color:var(--color-text-secondary);font-size:11px;display:flex}.legend-black{color:var(--color-accent-green)}.legend-white{color:var(--color-accent-red)}.legend-hint{opacity:.7;margin-left:auto;font-style:italic}:root{--graph-bg:#0000004d;--graph-zero-line:#ffffff4d;--graph-black-area:#4caf5040;--graph-white-area:#f4433640;--graph-line:#4fc3f7;--graph-current:#ffffffb3;--graph-current-point:#fff;--graph-point:#4fc3f7}[data-theme=light]{--graph-bg:#0000000d;--graph-zero-line:#0003;--graph-black-area:#4caf504d;--graph-white-area:#f443364d;--graph-line:#1976d2;--graph-current:#00000080;--graph-current-point:#1976d2;--graph-point:#1976d2}@media (width<=768px){.evaluation-panel{margin-top:var(--spacing-sm)}.evaluation-graph{width:100%;max-width:320px}}[data-theme=light] .evaluation-panel{background:linear-gradient(180deg, var(--color-wood-light) 0%, var(--color-wood-base) 100%);border-color:var(--color-wood-dark)}[data-theme=light] .evaluation-toggle{color:#4a3520}[data-theme=light] .toggle-text{color:#4a3520b3}