@import url('../styles/game.css');
.game-layout{align-items:start}.arena-wrap{display:grid;width:100%;min-width:0;aspect-ratio:1;place-items:center;background:#14251f}.board{display:grid;width:82%;aspect-ratio:1;grid-template:repeat(3,minmax(0,1fr))/repeat(3,minmax(0,1fr));gap:8px;background:rgba(255,255,255,.28)}.cell{display:grid;min-width:0;min-height:0;padding:0;place-items:center;border:0;background:#14251f;color:var(--mark);font:700 clamp(58px,10vw,130px)/1 "DM Sans",sans-serif;cursor:pointer;touch-action:manipulation}.cell:hover:empty{background:#1d342c}.cell.win{background:#294c3e}.cell:disabled{cursor:default}.result-overlay{position:absolute;inset:0;display:grid;padding:20px;place-content:center;gap:12px;color:white;background:rgba(14,28,23,.8);text-align:center}.result-overlay[hidden]{display:none}.result-overlay strong{font-family:"DM Serif Display";font-size:42px;font-weight:400}.result-overlay .primary-button{width:auto}.difficulty{display:grid;gap:7px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase}.difficulty select{padding:12px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:var(--card)}@media(max-width:850px){.arena-wrap{max-width:620px;margin-inline:auto}.online-panel,.color-controls,.difficulty{grid-column:auto}}

:is([data-arcade-theme="playful"],[data-arcade-theme="cabinet"]) .game-tictactoe .arena-wrap{background:#090f1e}
:is([data-arcade-theme="playful"],[data-arcade-theme="cabinet"]) .game-tictactoe .board{width:84%;gap:10px;background:var(--game-spark);box-shadow:8px 8px 0 #0008}
:is([data-arcade-theme="playful"],[data-arcade-theme="cabinet"]) .game-tictactoe .cell{background:#111a33;font-family:var(--pixel-font);font-size:clamp(42px,8vw,94px);text-shadow:4px 4px 0 #0008;transition:background 100ms steps(2,end),transform 100ms steps(2,end)}
:is([data-arcade-theme="playful"],[data-arcade-theme="cabinet"]) .game-tictactoe .cell:hover:empty{background:#202b4c;transform:translate(-2px,-2px)}
:is([data-arcade-theme="playful"],[data-arcade-theme="cabinet"]) .game-tictactoe .cell.win{background:#1d544d;animation:pixel-win .5s steps(2,end) 2 alternate}
:is([data-arcade-theme="playful"],[data-arcade-theme="cabinet"]) .game-tictactoe .result-overlay strong{font-family:var(--pixel-font)}
@keyframes pixel-win{to{filter:brightness(1.55);transform:translateY(-4px)}}