:root{font-family:Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#f8f9fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#f8f9fa,#e9ecef)}#app{width:100%;max-width:1080px;margin:0 auto;padding:1rem;text-align:center;box-sizing:border-box}.title-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;border-radius:16px;background-color:#fff;box-shadow:0 10px 25px #0000001a;max-width:600px;margin:0 auto;transition:all .3s ease}.game-title{font-size:3.5rem;margin:0;background:linear-gradient(90deg,#4d96ff,#ff6b6b);background-clip:text;-webkit-background-clip:text;color:transparent;position:relative}.title-symbols{display:flex;gap:2rem;font-size:5rem;font-weight:700;margin-bottom:1rem}.title-x{color:#4d96ff;animation:float 3s ease-in-out infinite}.title-o{color:#ff6b6b;animation:float 3s ease-in-out infinite 1.5s}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}.game-subtitle{font-size:1.2rem;color:#6c757d;margin:0}.game-instructions{background-color:#f1f3f5;padding:1rem 2rem;border-radius:8px;text-align:left;margin-top:1rem}.game-instructions h3{margin-top:0;color:#495057}.game-instructions ul{margin:0;padding-left:1.5rem;color:#495057}.game-instructions li{margin-bottom:.5rem}.title-buttons{display:flex;gap:1rem;margin-top:1rem}.start-game-button,.history-button{border:none;border-radius:8px;padding:1em 2em;font-size:1.2em;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 6px #0000001a;display:inline-block;text-decoration:none;text-align:center}.start-game-button{background-color:#4d96ff;color:#fff;box-shadow:0 4px 6px #4d96ff33}.start-game-button:hover{background-color:#3a7dd6;transform:translateY(-2px);box-shadow:0 6px 8px #4d96ff4d}.history-button{background-color:#6c757d;color:#fff;box-shadow:0 4px 6px #6c757d33}.history-button:hover{background-color:#5a6268;transform:translateY(-2px);box-shadow:0 6px 8px #6c757d4d}.start-game-button:active,.history-button:active{transform:translateY(0)}.game-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}h1{font-size:3rem;line-height:1.1;margin:0;color:#343a40;text-shadow:1px 1px 0 rgba(0,0,0,.1)}.status-bar{display:flex;justify-content:space-between;align-items:center;width:380px;margin-bottom:.5rem}.score-container{display:flex;gap:1rem}.score{font-weight:700;font-size:1.1rem}.status{font-size:1.5rem;font-weight:700;transition:color .3s}.board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:12px;width:380px;height:380px;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px #0000001a}.cell{background-color:#fff;border:2px solid #e9ecef;border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:4rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px #0000000d}.cell:hover{background-color:#f8f9fa;transform:scale(1.03);box-shadow:0 4px 8px #0000001a}.cell:active{transform:scale(.98)}.cell[data-value=X]{color:#4d96ff}.cell[data-value=O]{color:#ff6b6b}.winning-cell{animation:win-pulse 1.5s infinite;position:relative;z-index:1}.winning-cell:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:10px;background:linear-gradient(135deg,#fff9,#fff0);z-index:-1;animation:rotate-gradient 3s linear infinite}@keyframes win-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes rotate-gradient{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player-x,.winner-X{color:#4d96ff}.player-o,.winner-O{color:#ff6b6b}.piece-to-remove{opacity:.6}.current-player-removal{position:relative}.current-player-removal:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:2px dashed #ff4d4d;border-radius:6px;pointer-events:none;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@keyframes highlight-removal{0%{background-color:#ff4d4d4d}to{background-color:#fff}}.highlight-remove{animation:highlight-removal 1s ease-out}@keyframes pop-in{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.cell-add-animation{animation:pop-in .3s cubic-bezier(.175,.885,.32,1.275)}.controls{display:flex;gap:1rem;margin-top:1rem}.menu-button,.reset-button{padding:.7em 1.5em;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:all .2s;font-weight:600;display:inline-block;text-decoration:none;text-align:center}.menu-button{background-color:#6c757d;color:#fff}.menu-button:hover{background-color:#5a6268}.reset-button{background-color:#4caf50;color:#fff}.reset-button:hover{background-color:#3d8b40}.winner-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content{background-color:#fff;padding:2rem;border-radius:12px;box-shadow:0 10px 30px #0000004d;text-align:center;max-width:80%;animation:popup .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes popup{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:1}}.popup-content h2{margin-top:0;color:#213547;font-size:2.5rem}.popup-content h2.winner-X{color:#4d96ff}.popup-content h2.winner-O{color:#ff6b6b}.new-game-button,.menu-button-popup{background-color:#4caf50;color:#fff;border:none;border-radius:8px;padding:.8em 1.5em;font-size:1.1em;font-weight:500;cursor:pointer;transition:all .2s;margin:.5rem;display:inline-block;text-decoration:none;text-align:center}.new-game-button:hover{background-color:#3d8b40;transform:translateY(-2px)}.menu-button-popup{background-color:#6c757d;display:inline-block;text-decoration:none;text-align:center}.menu-button-popup:hover{background-color:#5a6268;transform:translateY(-2px)}@media (max-width: 768px){.board{width:320px;height:320px;gap:10px}.cell{font-size:3.5rem}h1{font-size:2.5rem}.status-bar{width:320px;flex-direction:column;gap:.5rem}.game-title{font-size:2.8rem}.title-symbols{font-size:4rem}}@media (max-width: 480px){.board{width:280px;height:280px;gap:8px}.cell{font-size:3rem}.status-bar{width:280px}.game-title{font-size:2.2rem}.title-symbols{font-size:3.5rem}.controls{flex-direction:column;gap:.5rem}.title-buttons{flex-direction:column}.history-item{flex-direction:column;align-items:flex-start}.history-buttons{flex-direction:column;width:100%}.stat-item,.total-games{width:100%;box-sizing:border-box;text-align:center}.history-screen{padding:1.5rem 1rem}}.history-screen{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;background-color:#fff;border-radius:16px;box-shadow:0 10px 25px #0000001a;max-width:800px;margin:0 auto;width:100%;box-sizing:border-box;overflow-x:hidden}.history-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:1rem 0;width:100%}.stat-item{font-weight:700;font-size:1.5rem;padding:1rem 1.5rem;border-radius:8px;background-color:#f8f9fa;box-shadow:0 4px 10px #0000000d;transition:transform .2s}.stat-item:hover{transform:translateY(-3px)}.total-games{font-size:1.3rem;font-weight:700;color:#495057;padding:1rem 1.5rem;background-color:#e9ecef;border-radius:8px}.win-ratio{width:100%;max-width:500px;margin:1rem 0;padding:0 1rem;box-sizing:border-box}.ratio-bar{height:30px;background-color:#e9ecef;border-radius:15px;overflow:hidden;display:flex}.ratio-x{height:100%;background-color:#4d96ff}.ratio-o{height:100%;background-color:#ff6b6b}.ratio-labels{display:flex;justify-content:space-between;margin-top:.5rem;width:100%}.ratio-labels span{font-weight:700}.history-buttons{display:flex;gap:1rem;margin-top:1rem}.no-history{background-color:#f8f9fa;border-radius:8px;padding:1.5rem;text-align:center;color:#6c757d;width:100%;max-width:500px;box-sizing:border-box;margin:1rem 0;font-size:1.1rem}.back-button,.clear-history-button{padding:.8em 1.5em;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:all .2s;font-weight:600;display:inline-block;text-decoration:none;text-align:center}.back-button{background-color:#6c757d;color:#fff}.back-button:hover{background-color:#5a6268;transform:translateY(-2px)}.clear-history-button{background-color:#dc3545;color:#fff}.clear-history-button:hover{background-color:#c82333;transform:translateY(-2px)}