.game-area{display:flex;flex-direction:column;align-items:center;gap:20px}:root{--primary-color: #FF8000;--background-color: #FFFFFF;--text-color: #333;--border-color: #ccc;--start-player-color: #4CAF50;--navy-border-color: #000080;--timer-red-color: #FF0000}body{font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;background-color:var(--background-color);color:var(--text-color)}.container{background-color:var(--background-color);padding:30px;border-radius:10px;box-shadow:0 4px 8px #0000001a;text-align:center;width:90%;max-width:400px;border:3px solid var(--navy-border-color)}h1{color:var(--primary-color);margin-bottom:20px;font-size:1.4em}.player-name-inputs{display:flex;justify-content:space-around;margin-bottom:20px;flex-wrap:wrap}.player-input-group{margin:5px 10px;text-align:left;flex-grow:1;min-width:120px}.player-input-group label{display:block;font-weight:700;margin-bottom:5px;color:var(--primary-color)}.player-input-group input[type=text]{width:100%;padding:8px;border:1px solid var(--border-color);border-radius:5px;box-sizing:border-box;font-size:1em}.score-board{display:flex;justify-content:space-around;align-items:center;background-color:#f9f9f9;border-radius:8px;padding:10px 0;margin-bottom:20px;box-shadow:inset 0 1px 3px #0000001a;max-width:300px;margin-left:auto;margin-right:auto;border:1px solid var(--primary-color);gap:5px}.player-score{display:flex;flex-direction:column;align-items:center;padding:5px 10px;border-radius:5px;min-width:80px;transition:background-color .3s ease-in-out;flex-grow:1}.player-score.starting-player{background-color:var(--start-player-color);color:#fff}.player-score .player-symbol{font-size:1.6em;font-weight:700;margin-bottom:3px;color:var(--primary-color)}.player-score.starting-player .player-symbol{color:#fff}.player-score .player-name{font-size:.8em;font-weight:400;color:var(--text-color);margin-bottom:3px}.player-score.starting-player .player-name{color:#fff}.player-score .wins{font-size:1.3em;font-weight:700;color:var(--text-color)}.player-score.starting-player .wins{color:#fff}.match-info{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px 10px;font-size:.85em;color:var(--text-color);flex-shrink:0;min-width:80px}.match-info .info-item{display:flex;justify-content:space-between;width:100%;margin-bottom:2px}.match-info .info-item:last-child{margin-bottom:0}.match-info .info-item span:first-child{font-weight:400}.match-info .info-item span:last-child{font-weight:700;color:var(--primary-color)}.game-mode-selection{margin-bottom:20px;display:flex;justify-content:center;gap:10px}.mode-btn{background-color:#f0f0f0;color:var(--text-color);border:1px solid var(--border-color);padding:8px 15px;border-radius:5px;cursor:pointer;transition:background-color .2s ease-in-out;font-size:.9em;flex-basis:140px;flex-grow:0}.mode-btn:hover{background-color:#e0e0e0}.mode-btn.active{background-color:var(--primary-color);color:var(--background-color);border-color:var(--primary-color)}.ai-difficulty-selection{margin-top:15px;margin-bottom:20px}.ai-difficulty-selection h3{color:var(--text-color);font-size:1.1em;margin-bottom:10px}.difficulty-btn{background-color:#f0f0f0;color:var(--text-color);border:1px solid var(--border-color);padding:8px 15px;margin:0 5px;border-radius:5px;cursor:pointer;transition:background-color .2s ease-in-out;font-size:.85em}.difficulty-btn:hover{background-color:#e0e0e0}.difficulty-btn.active{background-color:var(--primary-color);color:var(--background-color);border-color:var(--primary-color)}.hidden{display:none}.timer-selection{margin-top:15px;margin-bottom:20px}.timer-selection h3{color:var(--text-color);font-size:1.1em;margin-bottom:10px}.timer-options{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}.timer-btn{background-color:#f0f0f0;color:var(--text-color);border:1px solid var(--border-color);padding:8px 10px;border-radius:5px;cursor:pointer;transition:background-color .2s ease-in-out;font-size:.8em;flex-grow:1;max-width:80px}.timer-btn:hover{background-color:#e0e0e0}.timer-btn.active{background-color:var(--primary-color);color:var(--background-color);border-color:var(--primary-color)}.countdown-display{margin-top:15px;font-size:1.1em;font-weight:700;color:var(--text-color)}.countdown-display #time-left{color:var(--timer-red-color);font-size:1.2em}.game-board{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;width:300px;height:300px;margin:20px auto;border:2px solid var(--primary-color);box-shadow:0 2px 4px #0000001a}.cell{width:100%;aspect-ratio:1 / 1;background-color:var(--background-color);border:1px solid var(--primary-color);display:flex;justify-content:center;align-items:center;font-size:3em;font-weight:700;cursor:pointer;transition:background-color .2s ease-in-out;color:var(--text-color)}.cell.player-x{color:var(--primary-color)}.cell.player-o{color:#333}.cell:hover{background-color:#f0f0f0}.status{margin-top:20px;font-size:1.2em;font-weight:700;color:var(--primary-color)}.game-controls{margin-top:20px;display:flex;justify-content:space-around;flex-wrap:wrap;gap:10px}.game-controls button{background-color:var(--primary-color);color:var(--background-color);border:none;padding:12px 25px;border-radius:5px;cursor:pointer;font-size:1.1em;transition:background-color .2s ease-in-out;flex-grow:1;min-width:150px}.game-controls button:hover{background-color:#c60}.board-container{margin-bottom:32px}.buttons-container{display:flex;justify-content:center;gap:16px;margin-top:24px}.board-row{display:flex;justify-content:center}@media (max-width: 480px){.container{padding:20px}.player-name-inputs{flex-direction:column;align-items:center}.player-input-group{margin:5px 0;width:80%}.score-board{flex-direction:column;gap:10px}.player-score,.match-info{width:90%;min-width:auto}.player-score .player-symbol{font-size:1.8em}.player-score .player-name{font-size:.9em}.player-score .wins{font-size:1.5em}.game-mode-selection,.ai-difficulty-selection,.timer-selection .timer-options{flex-direction:column;align-items:center;width:100%}.mode-btn,.difficulty-btn,.timer-btn{margin:5px 0;width:80%;flex-basis:auto}.game-board{width:90vw;height:90vw;grid-gap:5px}.cell{height:auto;min-height:80px}h1{font-size:1.8em}.status{font-size:1em}.game-controls{flex-direction:column}.game-controls button{width:90%}}.cell.winning-cell{background-color:#d4edda}.cell.winning-cell.player-x{color:#28a745}.cell.winning-cell.player-o{color:#17a2b8}.cell.winning-cell.player-x,.cell.winning-cell.player-o{animation:pulse 1s infinite alternate}@keyframes pulse{0%{transform:scale(1);opacity:1}to{transform:scale(1.05);opacity:.9}}button:disabled{opacity:.6;cursor:not-allowed}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:30px;border-radius:10px;text-align:center;box-shadow:0 5px 15px #0000004d;max-width:400px;width:90%}.modal-content h2{color:var(--primary-color);margin-bottom:20px}.modal-content button{background-color:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:1em;transition:background-color .2s ease-in-out}.modal-content button:hover{background-color:#c60}.modal-content p{font-size:1.1em;margin-bottom:20px}.modal-content .winner-symbol{font-size:2em;font-weight:700;color:var(--primary-color)}.modal-content .winner-name,.modal-content .draw-message{font-size:1.5em;font-weight:700;color:var(--text-color)}.square{background:#fff;border:1px solid #999;font-size:24px;font-weight:700;line-height:34px;padding:0;text-align:center}.square:focus{outline:none}.kbd-navigation .square:focus{background:#ddd}.game{display:flex;flex-direction:row}.game-info{margin-left:20px}.board-row:after{clear:both;content:"";display:table}.status{margin-bottom:10px}
