:root,[data-theme=retro]{--bg: #0f0f1a;--surface: #1a1a2e;--surface2: #252540;--surface3: #2e2e4a;--border: #3a3a5c;--border-light: #4a4a70;--x-color: #4ecdc4;--o-color: #ff6b6b;--accent: #ffd93d;--text: #e8e8f0;--muted: #8888aa;--success: #4ecdc4;--danger: #ff6b6b;--cell-bg: #1a1a2e;--cell-hover: #252540;--cell-border: #3a3a5c;--win-line-color: #ffd93d;--shadow: 0 4px 24px rgba(0,0,0,.5);--shadow-sm: 0 2px 8px rgba(0,0,0,.4)}[data-theme=light]{--bg: #f5f5f0;--surface: #ffffff;--surface2: #f0f0eb;--surface3: #e8e8e2;--border: #d0d0c8;--border-light: #e0e0d8;--x-color: #16a085;--o-color: #c0392b;--accent: #d35400;--text: #2c2c2c;--muted: #888880;--success: #27ae60;--danger: #c0392b;--cell-bg: #fafaf5;--cell-hover: #f0f0eb;--cell-border: #d0d0c8;--win-line-color: #d35400;--shadow: 0 4px 16px rgba(0,0,0,.08);--shadow-sm: 0 2px 6px rgba(0,0,0,.06)}[data-theme=dark]{--bg: #0f0f1a;--surface: #1a1a2e;--surface2: #252540;--surface3: #2e2e4a;--border: #3a3a5c;--border-light: #4a4a70;--x-color: #4ecdc4;--o-color: #ff6b6b;--accent: #ffd93d;--text: #e8e8f0;--muted: #8888aa;--success: #4ecdc4;--danger: #ff6b6b;--cell-bg: #1a1a2e;--cell-hover: #252540;--cell-border: #3a3a5c;--win-line-color: #ffd93d;--shadow: 0 4px 24px rgba(0,0,0,.5);--shadow-sm: 0 2px 8px rgba(0,0,0,.4)}[data-theme=retro]{--bg: #f2e8c9;--surface: #d4c5a0;--surface2: #c4b48a;--surface3: #b4a370;--border: #8b7355;--border-light: #a08860;--x-color: #c0392b;--o-color: #2980b9;--accent: #e67e22;--text: #3d2b1f;--muted: #7a6040;--success: #27ae60;--danger: #c0392b;--cell-bg: #e8d8b0;--cell-hover: #ddd0a0;--cell-border: #8b7355;--win-line-color: #e67e22;--shadow: 0 4px 12px rgba(60, 40, 10, .3);--shadow-sm: 0 2px 6px rgba(60, 40, 10, .2)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:Syne,sans-serif;background-color:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}button{cursor:pointer;font-family:inherit;border:none;outline:none;background:none}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{display:flex;flex-direction:column;min-height:100vh;max-width:1200px;margin:0 auto;padding:1rem 1.5rem 2rem;gap:1rem}.app-footer{text-align:center;font-size:.75rem;color:var(--muted);letter-spacing:.08em;animation:fadeSlideIn .4s .4s ease-out both}.app-header{text-align:center;padding:.5rem 0 .25rem;animation:fadeSlideIn .4s ease-out}.app-title-img{display:block;margin:0 auto .4rem;width:clamp(72px,14vw,112px);height:clamp(72px,14vw,112px);object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));animation:titleImgBounce 2s ease-in-out infinite}@keyframes titleImgBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.app-title{font-size:clamp(1.6rem,4vw,2.5rem);font-weight:800;letter-spacing:-.02em;color:var(--text)}.app-subtitle{font-size:.8rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:.2rem}.status-bar{display:flex;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.6rem 1rem;box-shadow:var(--shadow-sm);animation:fadeSlideIn .4s .1s ease-out both}.status-message{display:flex;align-items:center;gap:.6rem;flex:1}.status-player-indicator{font-family:JetBrains Mono,monospace;font-size:1.2rem;font-weight:700;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.status-player-indicator.player-x{color:var(--x-color);background:color-mix(in srgb,var(--x-color) 15%,transparent);border:1.5px solid color-mix(in srgb,var(--x-color) 40%,transparent)}.status-player-indicator.player-o{color:var(--o-color);background:color-mix(in srgb,var(--o-color) 15%,transparent);border:1.5px solid color-mix(in srgb,var(--o-color) 40%,transparent)}.status-player-indicator.winner-x{color:var(--x-color);background:color-mix(in srgb,var(--x-color) 25%,transparent);border:2px solid var(--x-color);animation:winnerPulse .8s ease-in-out infinite alternate}.status-player-indicator.winner-o{color:var(--o-color);background:color-mix(in srgb,var(--o-color) 25%,transparent);border:2px solid var(--o-color);animation:winnerPulse .8s ease-in-out infinite alternate}.status-text{font-size:1rem;font-weight:600}.status-sub{font-size:.8rem;color:var(--muted)}.app-main{display:grid;grid-template-columns:220px 1fr 260px;gap:1rem;align-items:start;flex:1;animation:fadeSlideIn .4s .2s ease-out both}.sidebar{display:flex;flex-direction:column;gap:1rem}.board-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem;box-shadow:var(--shadow);transition:border-color .3s ease}.panel-title{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}.score-cards{display:flex;flex-direction:column;gap:.6rem}.score-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:.65rem .85rem;transition:border-color .2s,transform .2s}.score-card.active{transform:scale(1.02)}.score-card--x.active{border-color:var(--x-color);box-shadow:0 0 12px color-mix(in srgb,var(--x-color) 30%,transparent)}.score-card--o.active{border-color:var(--o-color);box-shadow:0 0 12px color-mix(in srgb,var(--o-color) 30%,transparent)}.score-card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem}.score-card-header span{font-size:.8rem;font-weight:600;color:var(--muted)}.score-piece{width:18px;height:18px;flex-shrink:0}.score-card--x .score-piece line{stroke:var(--x-color);stroke-width:8;stroke-linecap:round}.score-card--o .score-piece circle{stroke:var(--o-color);stroke-width:8;fill:none}.score-card--draw .score-piece line{stroke:var(--muted);stroke-width:6;stroke-linecap:round}.score-value{font-family:JetBrains Mono,monospace;font-size:1.8rem;font-weight:600;line-height:1;animation:scorePop .3s ease-out}.score-card--x .score-value{color:var(--x-color)}.score-card--o .score-value{color:var(--o-color)}.score-card--draw .score-value{color:var(--muted)}.streak-row{display:flex;align-items:center;justify-content:space-between;margin-top:.2rem}.streak-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.best-streak{font-family:JetBrains Mono,monospace;font-size:.8rem;color:var(--muted)}.streak-badge{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,#ff6b35,#f7c948);color:#1a0800;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:700;padding:2px 7px;border-radius:20px;animation:streakPop .4s cubic-bezier(.34,1.56,.64,1)}.streak-icon{width:12px;height:12px}.total-games{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;padding-top:.6rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)}.total-num{font-family:JetBrains Mono,monospace;font-weight:600;color:var(--accent)}.board-wrapper{display:flex;flex-direction:column;align-items:center;gap:1.2rem}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;background:var(--surface2);border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;width:fit-content}.cell{width:100px;height:100px;background:var(--cell-bg);border:1.5px solid var(--cell-border);border-radius:12px;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;position:relative;overflow:hidden}.cell:not(:disabled):hover{background:var(--cell-hover);border-color:var(--border-light);transform:scale(1.05);box-shadow:var(--shadow-sm)}.cell:disabled{cursor:default}.cell--x{border-color:color-mix(in srgb,var(--x-color) 30%,transparent)}.cell--o{border-color:color-mix(in srgb,var(--o-color) 30%,transparent)}.cell--last{box-shadow:0 0 0 2px var(--accent)}.piece{width:60%;height:60%;animation:pieceDrop .2s ease-out}.piece--x line{stroke:var(--x-color);stroke-width:10;stroke-linecap:round}.piece--o circle{stroke:var(--o-color);stroke-width:8;fill:none}.win-line-svg{position:absolute;top:12px;right:12px;bottom:12px;left:12px;width:calc(100% - 24px);height:calc(100% - 24px);pointer-events:none;overflow:visible}.win-line{stroke:var(--win-line-color);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--win-line-color));stroke-dasharray:500;stroke-dashoffset:500;animation:drawLine .4s ease-out forwards}.board-new-game{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;display:flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;border-radius:50px;font-family:Syne,sans-serif;font-size:.95rem;font-weight:700;color:#fff;background:var(--accent);border:none;cursor:pointer;box-shadow:0 4px 20px #0006;animation:fadeSlideIn .3s ease-out;pointer-events:all}.board-new-game:hover{opacity:.9;transform:translate(-50%,-50%) scale(1.04)}.board-new-game .btn-icon{width:16px;height:16px;stroke:#fff}.move-list{width:100%;max-width:340px}.move-list h3{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}.move-scroll{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.move-item{display:flex;align-items:center;gap:.4rem;font-family:JetBrains Mono,monospace;font-size:.78rem;padding:.2rem .5rem;border-radius:6px;background:var(--surface2)}.move-item--x .move-player{color:var(--x-color);font-weight:700}.move-item--o .move-player{color:var(--o-color);font-weight:700}.move-num{color:var(--muted);min-width:1.5rem}.move-pos{color:var(--muted);font-size:.7rem}.history-actions{margin-bottom:.7rem}.history-list{display:flex;flex-direction:column;gap:.35rem;max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.history-empty{font-size:.8rem;text-align:center;padding:1rem}.history-item{padding:.5rem .65rem;border-radius:8px;border-left:3px solid transparent;background:var(--surface2)}.history-item--x{border-left-color:var(--x-color)}.history-item--o{border-left-color:var(--o-color)}.history-item--draw{border-left-color:var(--muted)}.history-result{font-size:.82rem;font-weight:600}.history-winner{color:var(--text)}.history-item--x .history-winner{color:var(--x-color)}.history-item--o .history-winner{color:var(--o-color)}.history-item--draw .history-winner{color:var(--muted)}.history-meta{font-size:.7rem;color:var(--muted);margin-top:.15rem;font-family:JetBrains Mono,monospace}.settings-group{margin-bottom:1rem}.settings-group:last-child{margin-bottom:0}.settings-group-title{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;cursor:pointer}.toggle{width:40px;height:22px;background:var(--surface3);border:1.5px solid var(--border);border-radius:11px;position:relative;transition:background .2s,border-color .2s}.toggle--on{background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:var(--accent)}.toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--muted);border-radius:50%;transition:transform .2s,background .2s}.toggle--on .toggle-thumb{transform:translate(18px);background:var(--accent)}.theme-buttons{display:flex;gap:.4rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem .9rem;border-radius:8px;font-family:inherit;font-size:.82rem;font-weight:600;transition:all .15s;white-space:nowrap}.btn-icon{width:15px;height:15px;flex-shrink:0}.btn--sm{padding:.35rem .65rem;font-size:.75rem}.btn--ghost{background:var(--surface2);border:1px solid var(--border);color:var(--text)}.btn--ghost:hover:not(:disabled){background:var(--surface3);border-color:var(--border-light)}.btn--ghost:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg,var(--x-color),color-mix(in srgb,var(--x-color) 70%,var(--accent)));color:#000;font-weight:700}.btn--primary:hover{opacity:.9;transform:translateY(-1px)}.btn--danger{background:color-mix(in srgb,var(--danger) 15%,transparent);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger)}.btn--danger:hover{background:color-mix(in srgb,var(--danger) 25%,transparent)}.btn--theme{background:var(--surface2);border:1.5px solid var(--border);color:var(--muted);font-size:.78rem;flex:1;padding:.35rem .4rem;border-radius:7px}.btn--theme:hover{border-color:var(--border-light);color:var(--text)}.btn--theme.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.full-width{width:100%;margin-top:.4rem}.muted{color:var(--muted);font-size:.82rem}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pieceDrop{0%{opacity:0;transform:translateY(-20px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes drawLine{to{stroke-dashoffset:0}}@keyframes scorePop{0%{transform:scale(1.4)}to{transform:scale(1)}}@keyframes streakPop{0%{transform:scale(0)}70%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes winnerPulse{0%{box-shadow:0 0 8px currentColor}to{box-shadow:0 0 20px currentColor}}.confetti-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:9999;animation:confettiFadeIn .3s ease-out}@keyframes confettiFadeIn{0%{opacity:0}to{opacity:1}}.confetti-piece{position:absolute;top:-60px;left:calc(var(--cx) - var(--cs) / 2);width:var(--cs);height:var(--cs);animation:confettiFall var(--cd) var(--ct) ease-in both;transform-origin:center center}@keyframes confettiFall{0%{transform:translate(0) translateY(0) rotate(0) scale(.6);opacity:1}20%{opacity:1}to{transform:translate(calc(var(--drift) + var(--sway) * 20px)) translateY(110vh) rotate(calc(var(--cr) + 720deg)) scale(.3);opacity:0}}.confetti-img{width:100%;height:100%;object-fit:contain;border-radius:4px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));transform:rotate(var(--cr));animation:confettiTilt var(--cd) var(--ct) ease-in-out infinite alternate}@keyframes confettiTilt{0%{transform:rotate(var(--cr)) skew(-8deg)}50%{transform:rotate(calc(var(--cr) + 15deg)) skew(5deg)}to{transform:rotate(var(--cr)) skew(-4deg)}}.confetti-emoji{display:block;width:100%;height:100%;font-size:calc(var(--cs) * .75);line-height:1;text-align:center;animation:emojiSpin var(--cd) var(--ct) ease-in-out infinite alternate}@keyframes emojiSpin{0%{transform:rotate(calc(var(--cr) - 10deg)) scale(1)}to{transform:rotate(calc(var(--cr) + 20deg)) scale(1.2)}}@media (max-width: 900px){.app-main{grid-template-columns:1fr;grid-template-rows:auto auto auto}.sidebar--left{order:2}.board-section{order:1}.sidebar--right{order:3}.score-cards{flex-direction:row;flex-wrap:wrap}.score-card{flex:1;min-width:100px}}@media (max-width: 480px){.app{padding:.75rem 1rem 1.5rem}.cell{width:80px;height:80px}.status-bar{flex-wrap:wrap}}