@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-primary:#1c1c1e;--bg-secondary:#242426;--bg-surface:#2c2c2e;--bg-surface-hover:#3a3a3c;--accent-primary:#84cc16;--accent-primary-hover:#65a30d;--accent-secondary:#3b82f6;--accent-danger:#ef4444;--accent-success:#10b981;--text-primary:#ededed;--text-secondary:#a1a1aa;--text-muted:#71717a;--board-light:#e2e8f0;--board-dark:#64748b;--board-highlight:#84cc1666;--shadow-sm:0 2px 4px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 12px 24px #00000080;--glass-border:1px solid #ffffff0f;--font-sans:"Outfit", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px}.theme-light{--bg-primary:#f8f9fa;--bg-secondary:#fff;--bg-surface:#00000008;--bg-surface-hover:#0000000f;--text-primary:#212529;--text-secondary:#475569;--text-muted:#64748b;--glass-border:1px solid #0000001a;--shadow-sm:0 2px 4px #0000000d;--shadow-md:0 4px 12px #0000001a;--shadow-lg:0 12px 24px #00000026;--board-light:#f1f5f9;--board-dark:#94a3b8}.theme-toggle{z-index:100;border-radius:var(--radius-full);background:var(--bg-secondary);border:var(--glass-border);width:44px;height:44px;color:var(--text-primary);cursor:pointer;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:1.5rem;left:1.5rem}.theme-toggle:hover{box-shadow:var(--shadow-md);background:var(--bg-surface-hover);transform:translateY(-2px)rotate(15deg)}.theme-toggle:active{transform:translateY(0)scale(.95)}*{box-sizing:border-box;margin:0;padding:0}button{color:var(--text-primary);font-family:inherit}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5}.app-container{background-color:var(--bg-primary);width:100vw;height:100vh;color:var(--text-primary);grid-template-columns:280px 1fr 350px;display:grid}.glass-panel{background:var(--bg-secondary);border-left:var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;gap:1.5rem;height:100vh;padding:2rem;display:flex;overflow-y:auto}.btn{font-family:var(--font-sans);border-radius:var(--radius-md);cursor:pointer;background:var(--bg-surface);color:var(--text-primary);border:none;border:var(--glass-border);justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.95rem;font-weight:500;transition:all .2s;display:inline-flex}.btn:hover{background:var(--bg-surface-hover);transform:translateY(-1px)}.btn-primary{background:var(--accent-primary);color:#000;border:none;font-weight:600}.btn-primary:hover{background:var(--accent-primary-hover);box-shadow:0 4px 12px #f5b0414d}.btn-icon{border-radius:var(--radius-sm);padding:.5rem}.recent-game-card{background:var(--bg-surface);border:1px solid var(--glass-border);border-radius:var(--radius-md);cursor:pointer;justify-content:space-between;align-items:center;width:100%;padding:.75rem;transition:all .2s;display:flex}.recent-game-card:hover{background:var(--bg-surface-hover);box-shadow:var(--shadow-sm);border-color:#fff3;transform:translateY(-2px)}.icon-wrapper{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:32px;height:32px;display:flex}h1,h2,h3,h4{font-weight:600;line-height:1.2}.text-mono{font-family:var(--font-mono)}.text-gold{color:var(--accent-primary)}.text-muted{color:var(--text-muted)}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.w-full{width:100%}.h-full{height:100%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-surface-hover);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.main-content{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;height:100%;padding:2rem;display:flex}.board-header,.board-footer{justify-content:space-between;align-items:center;width:100%;max-width:680px;padding:0 .5rem;display:flex}.player-badge{background:var(--bg-surface);border:var(--glass-border);box-shadow:var(--shadow-sm);border-radius:50px;align-items:center;gap:1rem;padding:.5rem 1rem .5rem .5rem;font-weight:500;display:flex}.avatar{background:linear-gradient(135deg,#2c3e50,#3498db);border-radius:50%;width:32px;height:32px}.player-avatar{background:linear-gradient(135deg, var(--accent-primary), #e67e22)}.turn-indicator{background:var(--bg-surface);border:var(--glass-border);box-shadow:var(--shadow-sm);border-radius:50px;align-items:center;gap:.5rem;padding:.5rem 1.25rem;display:flex}.turn-text{margin:0;font-size:.9rem;font-weight:600}.turn-dot{border-radius:50%;width:10px;height:10px}.white-turn{background:#f8f9fa;box-shadow:0 0 8px #ffffff80}.black-turn{background:#212529;border:1px solid #adb5bd;box-shadow:0 0 8px #00000080}.board-wrapper{aspect-ratio:1;resize:horizontal;width:min(680px,85vh);min-width:300px;max-width:min(700px,85vw);position:relative;overflow:hidden;height:auto!important}.custom-board-container{border-radius:var(--radius-sm);width:100%;height:100%;box-shadow:var(--shadow-md);border:clamp(2px, 1vw, 4px) solid var(--bg-secondary);overflow:hidden}.board-theme-green{--board-light:#ebecd0;--board-dark:#739552}.board-theme-blue{--board-light:#dee3e6;--board-dark:#8ca2ad}.board-theme-brown{--board-light:#f0d9b5;--board-dark:#b58863}.board-theme-purple{--board-light:#9f90b0;--board-dark:#6f5c8d}.custom-board{grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:100%;height:100%;display:grid;position:relative}.board-square{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.light-square{background-color:var(--board-light)}.dark-square{background-color:var(--board-dark)}.selected-square{background-color:#f5b04199!important}.right-click-highlight{z-index:1;pointer-events:none;background-color:#ffd20073;width:100%;height:100%;position:absolute}.last-move-highlight{z-index:1;pointer-events:none;background-color:#fff06447;width:100%;height:100%;position:absolute}.move-hint{z-index:1;pointer-events:none;background-color:#0003;border-radius:50%;width:35%;height:35%;position:absolute}.dark-square .move-hint{background-color:#0000004d}.move-hint-capture{z-index:3;pointer-events:none;box-sizing:border-box;background-color:#0000;border:clamp(4px,.8vw,6px) solid #0003;border-radius:50%;width:90%;height:90%;position:absolute}.dark-square .move-hint-capture{border-color:#0000004d}.chess-piece{object-fit:contain;z-index:2;filter:drop-shadow(0 2px 3px #0000004d);pointer-events:none;width:95%;height:95%;transition:transform .15s cubic-bezier(.34,1.56,.64,1),filter .15s}.selected-square .chess-piece{filter:drop-shadow(0 4px 8px #0006)}@media (width<=768px){.main-content{gap:1rem;padding:1rem}.glass-panel{border-left:none;border-top:var(--glass-border);height:auto;padding:1.5rem}}.history-controls{background:var(--bg-secondary);border-radius:var(--radius-md);border:var(--glass-border);justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;padding:.5rem;display:flex}.history-btn{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.history-btn:hover:not(:disabled){color:var(--text-primary);background:#ffffff1a}.history-btn:disabled{opacity:.3;cursor:not-allowed}.move-history{font-family:var(--font-mono);background:var(--bg-surface);border-radius:var(--radius-md);border:var(--glass-border);grid-template-columns:40px 1fr 1fr;gap:.5rem;max-height:300px;padding:1rem;font-size:.9rem;display:grid;overflow-y:auto}.move-row{display:contents}.move-num{color:var(--text-muted);text-align:right;padding-right:.5rem}.move-btn{color:var(--text-primary);text-align:left;border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;padding:.25rem .5rem;transition:background .1s}.move-btn:hover{background:var(--bg-surface-hover)}.move-btn.active{background:var(--accent-primary);color:#000;font-weight:500}