*{margin:0;padding:0;box-sizing:border-box}:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(145deg, #ffffff, #f0f0f0);--accent-color: #667eea;--text-primary: #4a5568;--text-secondary: #718096;--x-color: #e53e3e;--o-color: #38a169;--win-color: #38a169;--draw-color: #d69e2e;--border-radius: 15px;--box-shadow: 0 4px 15px rgba(0, 0, 0, .1);--transition: all .3s ease}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-primary);background:var(--primary-gradient);min-height:100vh;padding:1rem;display:flex;align-items:center;justify-content:center}.container{max-width:500px;width:100%;background:#fffffff2;border-radius:20px;box-shadow:0 20px 40px #0000001a;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}header{text-align:center;margin-bottom:2rem}header h1{font-size:clamp(2rem,5vw,2.5rem);font-weight:700;color:var(--text-primary);margin-bottom:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.1)}header p{font-size:1.1rem;color:var(--text-secondary);margin-bottom:1rem}.game-area{display:flex;flex-direction:column;gap:1.5rem}.game-status{text-align:center}.status-display h2{font-size:1.5rem;color:var(--text-primary);margin-bottom:.5rem}#player-indicator{color:var(--x-color);font-weight:700;font-size:1.8rem;transition:var(--transition)}#player-indicator.player-o{color:var(--o-color)}.message-display p{color:var(--text-secondary);font-size:1.1rem}.game-board{display:flex;justify-content:center;margin:1rem 0}.board-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;width:300px;height:300px;background:var(--accent-color);border-radius:var(--border-radius);padding:8px;box-shadow:var(--box-shadow)}.cell{background:#fff;border:none;border-radius:8px;font-size:3rem;font-weight:700;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;min-height:90px;position:relative}.cell:hover:not(:disabled){background:#f7fafc;transform:scale(1.05);box-shadow:0 2px 8px #00000026}.cell:active{transform:scale(.98)}.cell:disabled{cursor:not-allowed;opacity:.8}.cell.x{color:var(--x-color)}.cell.o{color:var(--o-color)}.cell.winning{background:var(--win-color);color:#fff;animation:winPulse .6s ease-in-out}@keyframes winPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.cell.ai-move{animation:aiMoveHighlight 1.2s ease-out;border:3px solid var(--accent-color);box-shadow:0 0 20px #667eea99}.cell.ai-last-move{border:2px solid var(--accent-color);box-shadow:0 0 10px #667eea66;background:#667eea1a}@keyframes aiMoveHighlight{0%{transform:scale(1);box-shadow:0 0 5px #667eea4d;border-width:1px}50%{transform:scale(1.15);box-shadow:0 0 30px #667eeacc;border-width:4px}to{transform:scale(1.05);box-shadow:0 0 15px #667eea80;border-width:2px}}.board-thinking{position:relative}.board-thinking:after{content:"";position:absolute;inset:0;background:#667eea1a;border-radius:var(--border-radius);animation:thinkingPulse 1.5s ease-in-out infinite;pointer-events:none}.thinking-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#667eeae6;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:500;animation:fadeInOut 1.5s ease-in-out infinite;pointer-events:none;z-index:10}@keyframes thinkingPulse{0%,to{opacity:.1}50%{opacity:.2}}@keyframes fadeInOut{0%,to{opacity:.8}50%{opacity:1}}.game-controls{display:flex;justify-content:center;margin-top:1rem}.control-btn{background:var(--accent-color);color:#fff;border:none;border-radius:var(--border-radius);padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.5rem;box-shadow:var(--box-shadow)}.control-btn:hover{background:#5a67d8;transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.control-btn:active{transform:translateY(0)}.btn-icon{font-size:1.2rem}.game-result{text-align:center;margin-top:1rem;opacity:1;transition:var(--transition)}.game-result.hidden{opacity:0;pointer-events:none}.result-content{background:#ffffffe6;border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--box-shadow)}#result-title{font-size:1.8rem;margin-bottom:.5rem;color:var(--text-primary)}#result-message{font-size:1.2rem;color:var(--text-secondary);margin-bottom:1rem}#result-message.winner-x{color:var(--x-color);font-weight:700}#result-message.winner-o{color:var(--o-color);font-weight:700}#result-message.draw{color:var(--draw-color);font-weight:700}.side-selection{text-align:center;margin:1.5rem 0;padding:1rem;background:#ffffffe6;border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.side-selection h3{color:var(--text-primary);margin-bottom:1rem;font-size:1.2rem}.side-options{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.side-option{display:flex;align-items:center;padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:var(--border-radius);background:#fff;cursor:pointer;transition:var(--transition);min-width:140px;gap:.5rem}.side-option:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 4px 12px #667eea33}.side-option input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--accent-color)}.side-option input[type=radio]:checked+.side-symbol{color:var(--accent-color);font-weight:700}.side-option:has(input[type=radio]:checked){border-color:var(--accent-color);background:#667eea1a}.side-symbol{font-size:1.5rem;font-weight:700;transition:var(--transition)}.side-label{color:var(--text-secondary);font-size:.9rem}.statistics{text-align:center;margin:1.5rem 0;padding:1.5rem;background:#ffffffe6;border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.statistics h3{color:var(--text-primary);margin-bottom:1rem;font-size:1.2rem}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.5rem}.stat-item{display:flex;justify-content:space-between;padding:.5rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;transition:var(--transition)}.stat-item.full-width{grid-column:1 / -1;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:700}.stat-item:hover{border-color:var(--accent-color);transform:translateY(-1px);box-shadow:0 2px 8px #667eea26}.stat-label{font-weight:500;color:var(--text-secondary)}.stat-item.full-width .stat-label{color:#ffffffe6}.stat-value{font-weight:700;color:var(--accent-color)}.stat-item.full-width .stat-value{color:#fff}.reset-btn{background:linear-gradient(135deg,#e53e3e,#c53030);color:#fff}.reset-btn:hover{background:linear-gradient(135deg,#c53030,#9c2626);transform:translateY(-2px);box-shadow:0 4px 12px #c530304d}footer{text-align:center;margin-top:2rem;padding-top:1rem;border-top:1px solid #e2e8f0}footer p{color:var(--text-secondary);font-size:.9rem}footer a{color:var(--accent-color);text-decoration:none;transition:var(--transition)}footer a:hover{color:#5a67d8;text-decoration:underline}.hidden{display:none!important}.visible{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 480px){.container{padding:1.5rem;margin:.5rem}.board-grid{width:250px;height:250px}.cell{font-size:2.5rem;min-height:75px}header h1{font-size:1.8rem}header p{font-size:1rem}.thinking-indicator{padding:.4rem .8rem;font-size:.8rem;border-radius:15px}.cell.ai-move{border-width:2px;box-shadow:0 0 15px #667eea80}.cell.ai-last-move{border-width:1px;box-shadow:0 0 8px #667eea4d}@keyframes aiMoveHighlight{0%{transform:scale(1);box-shadow:0 0 3px #667eea4d;border-width:1px}50%{transform:scale(1.1);box-shadow:0 0 20px #667eeab3;border-width:3px}to{transform:scale(1.03);box-shadow:0 0 10px #667eea66;border-width:1px}}}.cell:focus{outline:3px solid var(--accent-color);outline-offset:2px}.control-btn:focus{outline:3px solid var(--accent-color);outline-offset:2px}@media (prefers-contrast: high){:root{--text-primary: #000000;--text-secondary: #333333;--x-color: #cc0000;--o-color: #006600}.cell{border:2px solid #000000}}