:root{--primary-color: #3f51b5;--secondary-color: #ffc107;--background-color: #f7f9fa;--card-background: white;--text-color: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, .1);--cell-size-desktop: 120px;--cell-size-mobile: 90px}.dark-theme{--primary-color: #7986cb;--secondary-color: #ffeb3b;--background-color: #121212;--card-background: #1e1e1e;--text-color: #e0e0e0;--border-color: #444;--shadow-color: rgba(0, 0, 0, .4)}body{font-family:sans-serif;background-color:var(--background-color);color:var(--text-color);display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:20px;transition:background-color .3s,color .3s}#root{display:flex;justify-content:center;width:100%}.container{background-color:var(--card-background);padding:30px;border-radius:12px;box-shadow:0 4px 12px var(--shadow-color);text-align:center;max-width:450px;width:100%}h1{color:var(--primary-color);margin-bottom:20px}.status-message{font-size:1.2em;min-height:20px;margin-bottom:15px;color:var(--text-color)}.controls{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.reset-button,.theme-toggle-button{padding:10px 15px;font-size:1em;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s,transform .1s}.reset-button:hover,.theme-toggle-button:hover{background-color:#303f9f;transform:translateY(-1px)}.board{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:5px;width:fit-content;margin:20px auto;border:3px solid var(--border-color);border-radius:8px;padding:5px}.cell{width:var(--cell-size-desktop);height:var(--cell-size-desktop);display:flex;justify-content:center;align-items:center;font-size:3em;font-weight:700;cursor:pointer;background-color:var(--card-background);transition:background-color .1s,color .1s;border:1px solid var(--border-color);border-radius:4px}.cell:hover:not(.occupied){background-color:var(--background-color)}.cell.occupied{cursor:default}.cell.player-X{color:var(--primary-color)}.cell.player-O{color:var(--secondary-color)}.cell.removable{border:3px dashed var(--secondary-color)}.modal-overlay{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#0006;display:flex;justify-content:center;align-items:center}.modal-content{background-color:var(--card-background);padding:30px;border-radius:10px;text-align:center;max-width:400px;width:90%;box-shadow:0 5px 15px var(--shadow-color)}.mode-selection-grid{display:grid;gap:15px;margin-top:20px}.mode-card{background-color:var(--background-color);color:var(--text-color);padding:20px;border-radius:8px;border:2px solid var(--border-color);cursor:pointer;transition:all .2s ease-in-out;text-align:left;display:flex;flex-direction:column;align-items:flex-start}.mode-card:hover{border-color:var(--primary-color);box-shadow:0 4px 10px var(--shadow-color);transform:translateY(-2px)}.mode-card.disabled{opacity:.6;cursor:not-allowed;border-style:dashed}.card-header{display:flex;align-items:center;margin-bottom:10px}.card-icon{font-size:1.8em;margin-right:10px;color:var(--primary-color)}.card-title{font-size:1.2em;font-weight:700;color:var(--primary-color)}.card-description{font-size:.9em;color:var(--text-color);margin-top:5px;line-height:1.4}.note{margin-top:15px;font-size:.9em;color:var(--text-color)}@media(max-width:600px){.container{padding:20px 15px}.board{grid-gap:3px}.cell{width:var(--cell-size-mobile);height:var(--cell-size-mobile);font-size:2.5em}.controls{flex-direction:column;gap:10px}}