*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:#e5e7eb;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at top,#3b82f624,#0000 35%),linear-gradient(#020617 0%,#0f172a 55%,#111827 100%);font-family:Arial,sans-serif}button{-webkit-user-select:none;user-select:none;font-family:inherit}input,textarea{-webkit-user-select:text;user-select:text}.app{place-items:center;min-height:100vh;padding:24px;display:grid}.game{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#0f172abf;border:1px solid #334155;border-radius:24px;gap:20px;width:min(100%,420px);padding:28px;display:grid;box-shadow:0 20px 50px #00000059,inset 0 1px #ffffff0a}.heading{gap:8px;display:grid}.eyebrow{color:#a5b4cf;letter-spacing:.14em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:700}.modal-eyebrow.winner-X{color:#60a5fa}.modal-eyebrow.winner-O{color:#f472b6}.modal-eyebrow.draw{color:#94a3b8}.modal-content.winner-X{background:linear-gradient(#111827fa,#0f172afa),radial-gradient(circle at top,#60a5fa14,#0000 55%);border-color:#60a5fa47;box-shadow:0 24px 50px #0006,0 0 30px #60a5fa1f}.modal-content.winner-O{background:linear-gradient(#111827fa,#0f172afa),radial-gradient(circle at top,#f472b614,#0000 55%);border-color:#f472b647;box-shadow:0 24px 50px #0006,0 0 30px #f472b61f}.modal-content.draw{border-color:#94a3b838}.title{letter-spacing:-.03em;color:#f8fafc;text-shadow:0 8px 30px #60a5fa2e;margin:0;font-size:clamp(2.2rem,5vw,3rem);line-height:.95}.board-wrapper{width:min(100%,320px);margin-inline:auto;position:relative}.board{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-inline:auto;display:grid;position:relative}.board-winning-line{z-index:3;pointer-events:none;transform-origin:50%;opacity:1;border-radius:999px;transition:opacity .24s;position:absolute}.board-winning-line.winner-x{background:linear-gradient(90deg,#60a5fa,#3b82f6);box-shadow:0 0 18px #60a5fa59,0 0 28px #3b82f647}.board-winning-line.winner-o{background:linear-gradient(90deg,#f472b6,#ec4899);box-shadow:0 0 18px #f472b659,0 0 28px #ec489947}.board-winning-line.exiting{opacity:0}.line-row-top,.line-row-middle,.line-row-bottom{width:calc(100% - 16px);height:7px;animation:.35s forwards lineRevealX;left:8px}.line-row-top{top:15.6%;transform:translateY(-50%)scaleX(0)}.line-row-middle{top:50%;transform:translateY(-50%)scaleX(0)}.line-row-bottom{top:84%;transform:translateY(-50%)scaleX(0)}.line-col-left,.line-col-center,.line-col-right{width:7px;height:calc(100% - 16px);animation:.35s forwards lineRevealY;top:8px}.line-col-left{left:15.6%;transform:translate(-50%)scaleY(0)}.line-col-center{left:50%;transform:translate(-50%)scaleY(0)}.line-col-right{left:84.5%;transform:translate(-50%)scaleY(0)}.line-diagonal-main{width:130%;height:7px;animation:.4s forwards lineRevealDiagonalMain;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)scaleX(0)}.line-diagonal-anti{width:130%;height:6px;animation:.4s forwards lineRevealDiagonalAnti;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)scaleX(0)}@keyframes lineRevealDiagonalMain{to{transform:translate(-50%,-50%)rotate(45deg)scaleX(1)}}@keyframes lineRevealDiagonalAnti{to{transform:translate(-50%,-50%)rotate(-45deg)scaleX(1)}}@keyframes lineRevealX{to{transform:translateY(-50%)scaleX(1)}}@keyframes lineRevealY{to{transform:translate(-50%)scaleY(1)}}.square{aspect-ratio:1;color:#f8fafc;cursor:pointer;background:linear-gradient(#3341558c,#1e293bf2);border:1px solid #475569;border-radius:18px;width:100%;font-size:clamp(2rem,8vw,2.25rem);font-weight:800;transition:transform .18s,border-color .2s,background .2s,box-shadow .2s;box-shadow:inset 0 1px #ffffff0a,0 10px 20px #0000002e}.square:hover{background:linear-gradient(#475569a6,#1e293b);border-color:#64748b;transform:translateY(-2px);box-shadow:inset 0 1px #ffffff0d,0 14px 24px #0000003d}.square:active{transform:translateY(0)}.square:focus-visible{outline-offset:2px;outline:2px solid #93c5fd}.square:disabled{cursor:default;pointer-events:none}.square:disabled:hover{transform:none}.square.filled{animation:.22s markPop}.square[data-value=X]{color:#60a5fa;text-shadow:0 8px 24px #60a5fa59}.square[data-value=O]{color:#f472b6;text-shadow:0 8px 24px #f472b64d}.square.winning{animation:.9s ease-in-out infinite alternate winningPulse}.square.winning-x{background:linear-gradient(#60a5fa38,#2563eb38),linear-gradient(#3341558c,#1e293bf2);border-color:#60a5fa;box-shadow:0 0 0 1px #60a5fa59,0 0 24px #60a5fa47,inset 0 1px #ffffff0d}.square.winning-o{background:linear-gradient(#f472b638,#ec489938),linear-gradient(#3341558c,#1e293bf2);border-color:#f472b6;box-shadow:0 0 0 1px #f472b659,0 0 24px #f472b647,inset 0 1px #ffffff0d}.square.exiting,.square.winning.exiting{animation:.24s forwards markOut}@keyframes markOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.82)}}@keyframes markPop{0%{opacity:0;transform:scale(.82)}70%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes winningPulse{0%{transform:scale(1)}to{transform:scale(1.04)}}.reset-button{color:#e5e7eb;cursor:pointer;background:#1e293b;border:1px solid #475569;border-radius:14px;width:100%;padding:14px 18px;font-size:1rem;font-weight:700;transition:transform .18s,border-color .2s,background .2s}.reset-button:hover{background:#273449;border-color:#64748b;transform:translateY(-1px)}.reset-button:focus-visible{outline-offset:2px;outline:2px solid #93c5fd}.turn-indicator{background:#0f172ae6;border:1px solid #334155;border-radius:999px;grid-template-columns:repeat(2,1fr);align-items:center;width:min(100%,190px);min-height:58px;margin-inline:auto;padding:8px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,0 10px 24px #00000038}.turn-indicator:before{content:"";z-index:0;background:linear-gradient(#3b82f6,#2563eb);border-radius:999px;width:calc(50% - 8px);height:calc(100% - 16px);transition:transform .35s,width .35s,opacity .25s,background .25s,box-shadow .25s;position:absolute;top:8px;left:8px;transform:translate(0);box-shadow:0 10px 22px #2563eb59,inset 0 1px #ffffff2e}.turn-indicator.player-x:before{background:linear-gradient(#3b82f6,#2563eb);box-shadow:0 10px 22px #2563eb59,inset 0 1px #ffffff2e}.turn-indicator.player-o:before{background:linear-gradient(#f472b6,#ec4899);transform:translate(100%);box-shadow:0 10px 22px #ec489952,inset 0 1px #ffffff2e}.turn-option{z-index:1;color:#94a3b8;letter-spacing:.04em;border-radius:999px;place-items:center;min-height:42px;font-size:1rem;font-weight:800;transition:color .25s,transform .2s,opacity .2s;display:grid;position:relative}.turn-option.active{color:#eff6ff}.turn-indicator.has-winner{grid-template-columns:1fr}.turn-indicator.has-winner:before{width:calc(100% - 16px);transform:translate(0)}.winner-pill{color:#eff6ff;letter-spacing:.08em;grid-column:1/-1;width:100%;font-size:1.05rem;animation:.3s winnerReveal}.turn-indicator.has-winner.player-x:before{background:linear-gradient(#3b82f6,#2563eb);width:calc(100% - 16px);transform:translate(0);box-shadow:0 10px 22px #2563eb59,inset 0 1px #ffffff2e}.turn-indicator.has-winner.player-o:before{background:linear-gradient(#f472b6,#ec4899);width:calc(100% - 16px);transform:translate(0);box-shadow:0 10px 22px #ec489952,inset 0 1px #ffffff2e}.turn-indicator.is-draw:before{opacity:0}.status-message{z-index:1;letter-spacing:.04em;color:#f8fafc;grid-column:1/-1;font-weight:800;animation:.28s statusPop;position:relative}.draw-message{color:#cbd5e1}@keyframes statusPop{0%{opacity:0;transform:translateY(4px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes winnerReveal{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.modal{z-index:100;background-color:#0f172acc;place-items:center;padding:16px;animation:.22s modalFade;display:grid;position:fixed;inset:0}.modal-content{text-align:center;background:linear-gradient(#111827fa,#0f172afa);border:1px solid #334155;border-radius:16px;width:min(100%,360px);padding:30px;animation:.3s modalPopIn;box-shadow:0 24px 50px #0006,inset 0 1px #ffffff0a}.modal-badge{background-color:#0f172a;border:1px solid #334155;border-radius:999px;place-items:center;width:64px;height:64px;margin:0 auto 16px;font-size:1.8rem;font-weight:900;animation:.4s badgePop;display:grid;box-shadow:0 10px 30px #00000080,inset 0 1px #ffffff0d}.modal-badge.winner-X{color:#60a5fa;box-shadow:0 0 0 1px #60a5fa66,0 0 25px #60a5fa59,inset 0 1px #ffffff0d}.modal-badge.winner-O{color:#f472b6;box-shadow:0 0 0 1px #f472b666,0 0 25px #f472b659,inset 0 1px #ffffff0d}.modal-eyebrow{color:#60a5fa;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px;font-size:.74rem;font-weight:700}.modal-content h2{letter-spacing:-.03em;color:#f8fafc;margin:0 0 10px;font-size:1.8rem;line-height:1.05}.modal-description{color:#94a3b8;margin:0 0 20px;font-size:.96rem;line-height:1.5}.modal-content button{color:#f8fafc;cursor:pointer;background:#1e293b;border:1px solid #475569;border-radius:12px;width:100%;padding:12px 16px;font-weight:700;transition:background .2s,transform .18s,border-color .2s}.modal-content button:hover{background:#334155;border-color:#64748b;transform:translateY(-1px)}.modal-content button:focus-visible{outline-offset:2px;outline:2px solid #93c5fd}.modal.closing{animation:.22s forwards modalFadeOut}.modal-content.closing{animation:.22s forwards modalPopOut}@keyframes modalFadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalPopOut{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(10px)scale(.96)}}@keyframes modalFade{0%{opacity:0}to{opacity:1}}@keyframes modalPopIn{0%{opacity:0;transform:translateY(20px)scale(.92)}60%{transform:translateY(-4px)scale(1.02)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes badgePop{0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@media (width<=480px){.app{padding:16px}.game{border-radius:20px;gap:18px;padding:20px}.heading{gap:6px}.eyebrow{letter-spacing:.12em;font-size:.72rem}.title{font-size:clamp(2rem,9vw,2.5rem)}.board{gap:10px;width:100%;max-width:300px}.turn-indicator{width:min(100%,180px);min-height:54px}.modal{padding:16px}.modal-content{border-radius:18px;padding:22px}.modal-content h2{font-size:1.5rem}}