:root{--bg-base:#09090b;--card-bg:#18181b99;--card-border:#ffffff0f;--text-primary:#f8fafc;--text-secondary:#a1a1aa;--x-color:#0ea5e9;--x-glow:#0ea5e966;--o-color:#8b5cf6;--o-glow:#8b5cf666;--transition:.3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-base);color:var(--text-primary);justify-content:center;align-items:center;width:100vw;height:100vh;font-family:Inter,sans-serif;display:flex;position:relative;overflow:hidden}#root{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.ambient-light{filter:blur(100px);opacity:.4;z-index:0;border-radius:50%;animation:15s ease-in-out infinite alternate drift;position:absolute}.light-1{background:var(--x-color);width:40vw;height:40vw;top:-10vw;left:-10vw}.light-2{background:var(--o-color);width:35vw;height:35vw;animation-delay:-5s;bottom:-10vw;right:-10vw}.light-3{background:#0ea5e933;width:30vw;height:30vw;animation-delay:-10s;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes drift{0%{transform:translate(0)scale(1)}to{transform:translate(5vw,5vh)scale(1.1)}}.glass-panel{background:var(--card-bg);-webkit-backdrop-filter:blur(24px);border:1px solid var(--card-border);border-radius:24px;box-shadow:0 25px 50px -12px #000000b3}.container{z-index:1;flex-direction:column;justify-content:space-between;width:90vw;max-width:420px;height:90vh;max-height:800px;padding:2rem;display:flex;position:relative}header{text-align:center;flex-direction:column;align-items:center;gap:.5rem;display:flex}h1{background:linear-gradient(to right, #fff, var(--text-secondary));color:#0000;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.status-display{transition:all var(--transition);background:#ffffff08;border:1px solid #ffffff0d;border-radius:100px;justify-content:center;align-items:center;padding:.5rem 1.2rem;font-size:1rem;font-weight:500;display:inline-flex}.status-x{color:var(--x-color);box-shadow:0 0 10px var(--x-glow);border-color:#0ea5e933}.status-o{color:var(--o-color);box-shadow:0 0 10px var(--o-glow);border-color:#8b5cf633}.status-tie{color:var(--text-primary);border-color:#fff3}.score-board{justify-content:space-between;gap:.75rem;display:flex}.score-card{text-align:center;transition:all var(--transition);background:#0000004d;border:1px solid #0000;border-radius:16px;flex-direction:column;flex:1;gap:.25rem;padding:.75rem .5rem;display:flex}.score-card.active{background:#ffffff0d}.score-card.player-x.active{border-color:var(--x-color);box-shadow:0 8px 20px -5px var(--x-glow)}.score-card.player-o.active{border-color:var(--o-color);box-shadow:0 8px 20px -5px var(--o-glow)}.player-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;font-weight:600}.score-value{font-size:1.5rem;font-weight:700}.player-x .score-value{color:var(--x-color)}.player-o .score-value{color:var(--o-color)}.game-board-wrapper{flex-grow:1;justify-content:center;align-items:center;width:100%;min-height:0;padding:1rem 0;display:flex}.game-board{aspect-ratio:1;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-height:100%;display:grid;position:relative}.cell{cursor:pointer;background:#ffffff05;border:1px solid #ffffff0a;border-radius:16px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden}.cell:hover{background:#ffffff0d;border-color:#ffffff1a}.mark-x{width:50%;height:50%;stroke:var(--x-color);filter:drop-shadow(0 0 8px var(--x-glow));stroke-dasharray:60;stroke-dashoffset:60px;animation:.3s ease-out forwards drawMark}.mark-o{width:55%;height:55%;stroke:var(--o-color);filter:drop-shadow(0 0 8px var(--o-glow));stroke-dasharray:70;stroke-dashoffset:70px;animation:.4s ease-out forwards drawMark}@keyframes drawMark{to{stroke-dashoffset:0}}.win-line{z-index:10;transform-origin:0;pointer-events:none;background:#fff;border-radius:10px;transition:width .5s cubic-bezier(.2,.8,.2,1);position:absolute;box-shadow:0 0 20px #ffffff4d}.controls{justify-content:center;display:flex}.btn{cursor:pointer;color:var(--text-primary);transition:all var(--transition);background:#ffffff08;border:1px solid #ffffff1a;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.8rem 1.5rem;font-family:Inter,sans-serif;font-size:1rem;font-weight:500;display:flex}.btn:hover{background:#ffffff14;border-color:#fff3}.btn:active{transform:scale(.98)}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .4s;display:flex;position:fixed;top:0;left:0}.modal-overlay.show{opacity:1;pointer-events:all}.modal-content{text-align:center;flex-direction:column;align-items:center;width:90vw;max-width:350px;padding:2.5rem;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;transform:translateY(20px)scale(.95)}.modal-overlay.show .modal-content{transform:translateY(0)scale(1)}#modal-title{margin-bottom:.5rem;font-size:2rem;font-weight:700}#modal-message{color:var(--text-secondary);margin-bottom:2rem;font-size:1.1rem}.modal-content .btn{color:#000;background:#fff;border:none;max-width:200px;font-weight:600}.modal-content .btn:hover{background:#e4e4e7;transform:translateY(-2px)}@media (height<=700px){.container{padding:1rem}h1{font-size:1.5rem}.score-value{font-size:1.25rem}.game-board{gap:8px}}