:root{--x-color: #6c63ff;--o-color: #ff6584;--bg: #0f0e17;--bg-panel: rgba(18, 17, 30, .95);--border: rgba(255, 255, 255, .08);--border-hover: rgba(108, 99, 255, .4);--text: #fffffe;--text-dim: rgba(255, 255, 255, .45);--accent: #6c63ff;--win-glow: rgba(118, 255, 3, .5)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow-x:hidden}#root{display:flex;flex-direction:column;min-height:100vh}.game-bg{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 30% 70%,rgba(108,99,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 70% 30%,rgba(255,101,132,.06) 0%,transparent 50%)}.screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;position:relative;z-index:1;gap:1.5rem;padding:2rem}.title-icon{font-size:4.5rem}h1{font-size:2.8rem;font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,var(--x-color),var(--o-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:1rem;color:var(--text-dim);text-align:center;max-width:28rem;line-height:1.5}.mode-grid{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.mode-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem 2rem;cursor:pointer;transition:all .3s;text-align:center;min-width:180px;display:flex;flex-direction:column;align-items:center;gap:.6rem}.mode-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 8px 30px #6c63ff26}.mode-card .mode-icon{font-size:2.2rem}.mode-card .mode-name{font-weight:700;font-size:1rem}.mode-card .mode-desc{font-size:.75rem;color:var(--text-dim)}.diff-row{display:flex;gap:.5rem}.diff-btn{padding:.5rem 1.2rem;border:1px solid var(--border);border-radius:.4rem;background:#ffffff08;color:var(--text);font-size:.85rem;cursor:pointer;transition:all .2s;font-weight:600}.diff-btn:hover{border-color:var(--border-hover);background:#6c63ff14}.diff-btn.selected{border-color:var(--accent);background:#6c63ff26;color:var(--accent)}.game-area{display:flex;flex-direction:column;align-items:center;gap:1.2rem;position:relative;z-index:1;padding:2rem;min-height:100vh;justify-content:center}.score-bar{display:flex;align-items:center;gap:1.5rem;padding:.6rem 1.5rem;background:var(--bg-panel);border:1px solid var(--border);border-radius:.5rem;font-weight:700}.score-x{color:var(--x-color);font-size:1.1rem}.score-o{color:var(--o-color);font-size:1.1rem}.score-draw{color:var(--text-dim);font-size:.9rem}.score-sep{color:var(--text-dim);font-size:.7rem}.turn-indicator{font-size:1rem;font-weight:700;padding:.4rem 1rem;border-radius:.35rem;transition:all .3s}.turn-indicator.x-turn{color:var(--x-color);background:#6c63ff1a;border:1px solid rgba(108,99,255,.2)}.turn-indicator.o-turn{color:var(--o-color);background:#ff65841a;border:1px solid rgba(255,101,132,.2)}.turn-indicator.result{color:#76ff03;background:#76ff031a;border:1px solid rgba(118,255,3,.2)}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:min(340px,85vw);aspect-ratio:1}.cell{background:var(--bg-panel);border:1px solid var(--border);border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:3.5rem;font-weight:900;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;aspect-ratio:1}.cell:hover:not(.taken):not(.game-over){border-color:var(--border-hover);background:#6c63ff0f;transform:scale(1.03)}.cell.taken,.cell.game-over{cursor:default}.cell .mark{transition:transform .2s cubic-bezier(.34,1.56,.64,1);transform:scale(1)}.cell .mark.pop{transform:scale(1.15)}.cell.x-mark{color:var(--x-color);text-shadow:0 0 20px rgba(108,99,255,.4)}.cell.o-mark{color:var(--o-color);text-shadow:0 0 20px rgba(255,101,132,.4)}.cell.win-cell{border-color:#76ff03;background:#76ff0314;box-shadow:0 0 20px #76ff0326;animation:winPulse 1s ease-in-out infinite}@keyframes winPulse{0%,to{box-shadow:0 0 15px #76ff0326}50%{box-shadow:0 0 30px #76ff034d}}.win-line-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.win-line-overlay line{stroke:#76ff03;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(118,255,3,.6));stroke-dasharray:400;stroke-dashoffset:400;animation:drawLine .5s ease forwards}@keyframes drawLine{to{stroke-dashoffset:0}}.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.game-btn{padding:.55rem 1.2rem;border:1px solid var(--border);border-radius:.4rem;background:#ffffff0a;color:var(--text);font-size:.85rem;cursor:pointer;transition:all .2s;font-weight:600}.game-btn:hover{background:#ffffff14;transform:translateY(-1px)}.game-btn.primary{border-color:var(--accent);color:var(--accent);background:#6c63ff1a}.game-btn.primary:hover{background:#6c63ff33}.game-btn.danger{border-color:var(--o-color);color:var(--o-color);background:#ff658414}.stats-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:.5rem;padding:1rem 1.5rem;text-align:center;min-width:280px}.stats-card h3{font-size:.9rem;color:var(--text-dim);margin-bottom:.5rem}.stats-grid{display:flex;gap:1.5rem;justify-content:center}.stat-item{text-align:center}.stat-val{font-size:1.6rem;font-weight:800}.stat-val.x-val{color:var(--x-color)}.stat-val.o-val{color:var(--o-color)}.stat-val.d-val{color:var(--text-dim)}.stat-lbl{font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.back-btn{position:fixed;top:1rem;left:1rem;z-index:10;padding:.4rem .8rem;border:1px solid var(--border);border-radius:.3rem;background:var(--bg-panel);color:var(--text-dim);font-size:.78rem;cursor:pointer;transition:all .2s}.back-btn:hover{color:var(--text);border-color:var(--border-hover)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .4s ease}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.bounce{animation:bounce .4s ease}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px}@media(max-width:500px){h1{font-size:2rem}.cell{font-size:2.5rem}.board{width:min(300px,90vw)}}