@keyframes popIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{background:linear-gradient(135deg,#667eea,#764ba2);font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#fff;min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden;line-height:1.5}#root{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:16px}a{color:#00d4ff;text-decoration:none;transition:.3s ease}a:hover{color:#3df;text-decoration:underline}code{font-family:Courier New,monospace;background:#1a1a2e;padding:2px 6px;border-radius:6px;font-size:.9rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0f0f23}::-webkit-scrollbar-thumb{background:#00d4ff;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#3df}.app-container{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:16px}@media(max-width:480px){.app-container{padding:12px}}.main-card{background:#1a1a2e;border:2px solid #2d2d44;border-radius:15px;box-shadow:0 5px 15px #0003;padding:40px;max-width:900px;width:100%;box-shadow:0 20px 60px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media(max-width:768px){.main-card{padding:24px}}@media(max-width:480px){.main-card{padding:16px}}.card{background:#1a1a2e;border:2px solid #2d2d44;border-radius:15px;padding:20px;box-shadow:0 5px 15px #0003;transition:.3s ease}.card:hover{box-shadow:0 10px 30px #00000040}.card-header{padding-bottom:16px;border-bottom:1px solid #2d2d44;margin-bottom:16px}.card-body{padding:16px}.card-footer{padding-top:16px;border-top:1px solid #2d2d44;margin-top:16px}.title{text-align:center;font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:24px;letter-spacing:2px}@media(max-width:768px){.title{font-size:2rem}}@media(max-width:480px){.title{font-size:1.5rem}}h1,h2,h3,h4,h5,h6{font-weight:700;color:#fff;margin-bottom:16px}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4,h5,h6{font-size:1.1rem}p{color:#a0a0a0;line-height:1.6;margin-bottom:16px}p:last-child{margin-bottom:0}label{display:block;font-weight:600;margin-bottom:8px;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.text-small{font-size:.85rem;color:#a0a0a0}.gradient-text{background:linear-gradient(135deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;padding:20px;background:linear-gradient(135deg,#10102399,#1e1e3299);border-radius:15px;border:1px solid #2d2d44}@media(max-width:480px){.scoreboard{gap:8px;padding:16px}}.score-item{display:flex;flex-direction:column;align-items:center;padding:12px;border-radius:10px;border:2px solid #2d2d44;transition:.3s ease}.score-item.x-score{background:#00d4ff0d;border-color:#00d4ff}.score-item.o-score{background:#ff006e0d;border-color:#ff006e}.score-item.draw-score{background:#00ff410d;border-color:#00ff41}.score-label{font-size:.85rem;color:#a0a0a0;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:600}.score-value{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:pulse 2s infinite}.board-container{background:linear-gradient(135deg,#101023cc,#1e1e32cc);border:2px solid #2d2d44;border-radius:15px;padding:20px;margin-bottom:24px}@media(max-width:480px){.board-container{padding:16px}}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#0f0f23;padding:8px;border-radius:10px;width:fit-content;margin:0 auto}.square{width:100px;height:100px;font-size:2.5rem;font-weight:700;border:2px solid #00d4ff;background:linear-gradient(135deg,#00d4ff1a,#ff006e1a);color:#fff;cursor:pointer;border-radius:10px;transition:.3s ease;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.square:hover:not(.filled){transform:scale(1.05);background:linear-gradient(135deg,#00d4ff33,#ff006e33);box-shadow:0 0 20px #00d4ff80}.square.filled{cursor:not-allowed;background:linear-gradient(135deg,#00d4ff26,#ff006e26)}.square.winning{animation:pulse .6s ease-in-out;box-shadow:0 0 30px #00ff41;background:linear-gradient(135deg,#00ff4133,#00ff411a)}@media(max-width:768px){.square{width:80px;height:80px;font-size:2rem}}@media(max-width:480px){.square{width:70px;height:70px;font-size:1.5rem}}.square-content{animation:popIn .3s ease}.status-container{display:flex;justify-content:center;align-items:center;margin-bottom:24px;gap:16px}.player-indicator{background:linear-gradient(135deg,#00d4ff1a,#ff006e1a);border:2px solid #00d4ff;box-shadow:0 0 20px #00d4ff4d;border-radius:15px;padding:12px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.3s ease}.player-indicator.x{border:2px solid #00d4ff;box-shadow:0 0 20px #00d4ff4d;transition:.3s ease}.player-indicator.o{border-color:#ff006e;box-shadow:0 0 20px #ff006e4d}.player-label{font-size:.85rem;color:#a0a0a0;text-transform:uppercase;letter-spacing:2px;font-weight:600}.player-symbol{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:pulse 2s infinite}.controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap}.btn-reset{padding:8px 16px;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;box-shadow:0 5px 15px #0003;transition:.3s ease}.btn-reset:hover{transform:translateY(-3px)}.btn-reset:hover{box-shadow:0 10px 30px #00000040}.btn-reset:active:active{transform:translateY(-1px)}@media(max-width:480px){.btn-reset{padding:8px 12px;font-size:.9rem}}.btn-reset-scores{padding:8px 16px;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:.3s ease;text-transform:uppercase;letter-spacing:1px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:transparent;color:#00d4ff;border:2px solid #00d4ff}.btn-reset-scores:hover{background:#00d4ff1a;box-shadow:0 0 20px #00d4ff4d}.btn-reset-scores:active:active{transform:translateY(-1px)}@media(max-width:480px){.btn-reset-scores{padding:8px 12px;font-size:.9rem}}.btn-secondary{padding:8px 16px;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:.3s ease;text-transform:uppercase;letter-spacing:1px;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#ffffff1a;color:#fff;border:1px solid #2d2d44}.btn-secondary:hover{background:#ffffff26;border-color:#fff}