:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow-x:hidden}button{font-family:inherit;border:none;outline:none;cursor:pointer;transition:all .3s ease}button:focus{outline:2px solid #667eea;outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff1a}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2)}.container{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:2rem;box-shadow:0 20px 60px #0003;max-width:500px;width:100%;animation:slideIn .6s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.title{text-align:center;font-size:2.5rem;font-weight:700;margin-bottom:2rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,.1)}.menu{text-align:center;animation:fadeIn .5s ease-in}.menu h2{font-size:1.5rem;margin-bottom:2rem;color:#444}.main-icon{width:1.5rem;height:1.5rem;vertical-align:middle;margin-right:.2rem;fill:#fff;margin-bottom:.5rem}.menu-buttons{display:flex;flex-direction:column;gap:1.5rem}.mode-button{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;padding:1rem 2rem;border-radius:15px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #4facfe4d;position:relative;overflow:hidden}.mode-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.mode-button:hover:before{left:100%}.mode-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #4facfe66}.mode-button:active{transform:translateY(-1px)}.bot-mode{margin-top:1rem}.bot-mode h3{font-size:1.2rem;margin-bottom:1rem;color:#555}.difficulty-buttons{display:flex;flex-direction:column;gap:.8rem}.difficulty-button{border:none;padding:.8rem 1.5rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;color:#fff;position:relative;overflow:hidden}.difficulty-button.easy{background:linear-gradient(135deg,#84fab0,#8fd3f4);box-shadow:0 4px 15px #84fab04d}.difficulty-button.hard{background:linear-gradient(135deg,#ffa726,#ffcc02);box-shadow:0 4px 15px #ffa7264d}.difficulty-button.advanced{background:linear-gradient(135deg,#ff6b6b,#ffa726);box-shadow:0 4px 15px #ff6b6b4d}.difficulty-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.difficulty-button:active{transform:translateY(0)}.game{animation:fadeIn .5s ease-in}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.game-info h2{font-size:1.3rem;color:#444;margin-bottom:.5rem}.current-player{font-size:1.1rem;font-weight:600;padding:.5rem 1rem;border-radius:10px;text-align:center}.current-x{color:#d63384}.current-o{color:#0dcaf0}.winner{color:#e67e22;animation:pulse 1s infinite}.draw{color:#6c757d;animation:pulse 1s infinite}.thinking{color:#fff;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.scoreboard{display:flex;gap:1rem;flex-wrap:wrap}.score{text-align:center;background:#ffffffb3;padding:.5rem;border-radius:10px;min-width:70px;box-shadow:0 2px 10px #0000001a}.score-label{display:block;font-size:.8rem;color:#666;margin-bottom:.2rem}.score-value{display:block;font-size:1.5rem;font-weight:700;color:#333}.board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;margin:2rem 0;max-width:300px;margin-left:auto;margin-right:auto;aspect-ratio:1}.cell{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:none;border-radius:15px;font-size:2.5rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0000001a;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.cell:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);opacity:0;transition:opacity .3s ease}.cell:hover:before{opacity:1}.cell:hover{transform:translateY(-3px);box-shadow:0 8px 25px #00000026}.cell:active{transform:translateY(-1px)}.cell:disabled{cursor:not-allowed}.cell-x{background:linear-gradient(135deg,#ff9a9e,#fecfef);color:#d63384;animation:cellAppear .4s ease-out}.cell-o{background:linear-gradient(135deg,#a8edea,#fed6e3);color:#0dcaf0;animation:cellAppear .4s ease-out}.winning-cell{background:linear-gradient(135deg,#ffecd2,#fcb69f)!important;animation:winningPulse 1s infinite}@keyframes cellAppear{0%{opacity:0;transform:scale(.5) rotate(180deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes winningPulse{0%,to{transform:scale(1);box-shadow:0 4px 15px #e67e224d}50%{transform:scale(1.05);box-shadow:0 8px 30px #e67e2280}}.game-controls{display:flex;justify-content:center;gap:1rem;margin-top:2rem;flex-wrap:wrap}.control-button{background:linear-gradient(135deg,#6c757d,#495057);color:#fff;border:none;padding:.8rem 1.2rem;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #6c757d4d}.control-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #6c757d66}.control-button:active{transform:translateY(0)}.control-button.reset{background:linear-gradient(135deg,#28a745,#20c997);box-shadow:0 4px 15px #28a7454d}.control-button.clear-scores{background:linear-gradient(135deg,#ffc107,#fd7e14);box-shadow:0 4px 15px #ffc1074d}.control-button.menu{background:linear-gradient(135deg,#6f42c1,#e83e8c);box-shadow:0 4px 15px #6f42c14d}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.container{padding:1.5rem;margin:10px}.title{font-size:2rem;margin-bottom:1.5rem}.board{max-width:280px;gap:8px}.cell{font-size:2rem}.game-header{flex-direction:column;text-align:center}.scoreboard{justify-content:center}.game-controls{flex-direction:column;align-items:center}.control-button{width:100%;max-width:200px}.difficulty-buttons{gap:.6rem}.difficulty-button{padding:.7rem 1.2rem;font-size:.9rem}}@media (max-width: 480px){.container{padding:1rem}.title{font-size:1.8rem}.board{max-width:250px;gap:6px}.cell{font-size:1.8rem}.mode-button{padding:.8rem 1.5rem;font-size:1.1rem}.game-info h2{font-size:1.1rem}.current-player{font-size:1rem;padding:.4rem .8rem}}@media (prefers-color-scheme: dark){.container{background:#1e1e1ef2;color:#f8f9fa}.menu h2,.game-info h2{color:#f8f9fa}.bot-mode h3{color:#dee2e6}.score{background:#ffffff1a}.score-label{color:#adb5bd}.score-value{color:#f8f9fa}}.loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .5s ease-in}.loading-container{text-align:center;color:#fff;position:relative;max-width:400px;width:90%}.loading-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;width:200px;height:200px;margin:0 auto 2rem;perspective:1000px}.grid-cell{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.2)}.center-cell{background:#fff3;border:2px solid rgba(255,255,255,.4)}.animated-x,.animated-o{animation:popIn 2s infinite ease-in-out;transform-origin:center}.animated-x{color:#ff6b6b;text-shadow:0 0 10px rgba(255,107,107,.5)}.animated-o{color:#4ecdc4;text-shadow:0 0 10px rgba(78,205,196,.5)}.delay-1{animation-delay:.2s}.delay-2{animation-delay:.4s}.delay-3{animation-delay:.6s}.delay-4{animation-delay:.8s}.delay-5{animation-delay:1s}.delay-6{animation-delay:1.2s}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top:3px solid #ffffff;border-radius:50%;animation:spin 1s linear infinite}.loading-title{font-size:3rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(45deg,#fff,gold,#fff);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 2s ease-in-out infinite;text-shadow:0 0 20px rgba(255,255,255,.3)}.loading-text{font-size:1.2rem;margin-bottom:2rem;min-height:1.5rem;color:#ffffffe6;animation:pulse 2s ease-in-out infinite}.progress-bar{width:100%;height:8px;background:#fff3;border-radius:4px;margin-bottom:1rem;overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,#4ecdc4,#44a08d,#45b7d1);border-radius:4px;transition:width .3s ease;position:relative;overflow:hidden}.progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:progressShine 2s infinite}.progress-percentage{font-size:1rem;color:#fffc;font-weight:600}.floating-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.floating-x,.floating-o{position:absolute;font-size:1.5rem;font-weight:700;opacity:.3;animation:float 6s infinite linear}.floating-x{color:#ff6b6b}.floating-o{color:#4ecdc4}.float-1{left:10%;animation-delay:0s}.float-2{left:20%;animation-delay:1s}.float-3{left:80%;animation-delay:2s}.float-4{left:70%;animation-delay:3s}.float-5{left:30%;animation-delay:4s}.float-6{left:90%;animation-delay:5s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%,50%,to{transform:scale(1) rotateY(0);opacity:.7}25%{transform:scale(1.2) rotateY(180deg);opacity:1}75%{transform:scale(.9) rotateY(360deg);opacity:.8}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes pulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}@keyframes progressShine{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes float{0%{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:.3}90%{opacity:.3}to{transform:translateY(-100px) rotate(360deg);opacity:0}}@media (max-width: 768px){.loading-title{font-size:2.5rem}.loading-grid{width:150px;height:150px}.grid-cell{font-size:1.5rem}.loading-spinner{width:30px;height:30px}.loading-text{font-size:1rem}}@media (max-width: 480px){.loading-title{font-size:2rem}.loading-grid{width:120px;height:120px;margin-bottom:1.5rem}.grid-cell{font-size:1.2rem}.loading-spinner{width:25px;height:25px}.floating-x,.floating-o{font-size:1.2rem}}