*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #1a1a1f; color: #e8e8eb; } body { display: flex; align-items: center; justify-content: center; } .game-wrapper { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; } .board { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; width: 240px; height: 240px; background-color: #3a3a42; padding: 6px; border-radius: 8px; } .cell { display: flex; align-items: center; justify-content: center; background-color: #232329; border: none; border-radius: 4px; font-size: 2.5rem; font-weight: 700; color: #e8e8eb; cursor: pointer; transition: background-color 0.15s ease; } .cell:hover { background-color: #2a2a32; } .cell:active { background-color: #1a1a1f; } .cell:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; } .cell[data-symbol="X"] { color: #6366f1; } .cell[data-symbol="O"] { color: #f59e0b; } .status { font-size: 0.875rem; color: #8a8a94; text-align: center; min-height: 1.5em; } .reset-btn { padding: 8px 20px; background-color: #232329; border: 1px solid #3a3a42; border-radius: 4px; font-size: 0.875rem; font-weight: 500; color: #e8e8eb; cursor: pointer; transition: background-color 0.15s ease; } .reset-btn:hover { background-color: #2a2a32; } .reset-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }