.game-container { margin: 0 auto; max-width: 1200px; padding: clamp(1rem, 3vw, 2rem); }.back-btn { align-items: center; border-radius: 8px; color: var(--text-muted); display: inline-flex; font-size: .9rem; font-weight: 800; gap: .35rem; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); padding: .5rem .65rem; transition: background-color 160ms ease, color 160ms ease; }.back-btn::before { content: '←'; color: var(--accent); font-size: 1.1rem; }.back-btn:hover { background: rgba(227,163,75,.1); color: var(--text); }.game-title { color: var(--text); font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.055em; line-height: 1; margin-bottom: 1.25rem; text-transform: none; }
.game-header { align-items: stretch; background: rgba(36,32,27,.76); border: 1px solid var(--border); border-radius: 16px; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.5rem; padding: .85rem; }.game-controls { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; }.control-group { align-items: center; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 9px; color: var(--text-muted); display: inline-flex; font-size: .8rem; font-weight: 800; gap: .45rem; min-height: 2.6rem; padding: .3rem .45rem .3rem .65rem; }.turn-value { color: var(--accent); font-size: 1rem; }.mode-select, .control-group select { appearance: none; background: var(--surface-soft); border: 1px solid transparent; border-radius: 6px; color: var(--text); cursor: pointer; min-height: 2rem; padding: .25rem 1.65rem .25rem .5rem; }.mode-select:hover, .control-group select:hover { border-color: var(--border-strong); }
.game-btn { border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: .88rem; font-weight: 850; min-height: 2.6rem; padding: .55rem .85rem; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }.btn-primary { background: var(--accent); color: var(--accent-ink); }.btn-secondary { background: var(--surface-elevated); border-color: var(--border); color: var(--text); }.game-btn:hover:not(:disabled) { border-color: var(--border-strong); transform: translateY(-1px); }.game-btn:active:not(:disabled) { transform: translateY(1px); }.game-btn:disabled { cursor: not-allowed; opacity: .55; }
.game-info-bar { align-items: stretch; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: space-around; text-align: center; }.stat-box { align-items: center; display: inline-flex; flex: 1 1 4.7rem; flex-direction: column; justify-content: center; min-width: 0; padding: .25rem .45rem; }.stat-box .label { color: var(--text-muted); font-size: .68rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; }.stat-box .value { color: var(--accent); font-size: 1.2rem; font-weight: 900; line-height: 1.2; margin-top: .2rem; }.game-board { display: grid; margin: 1.5rem auto; place-content: center; position: relative; }.board-labels { color: var(--text-muted); font-size: .88rem; margin: .85rem auto; max-width: 48rem; text-align: center; }.board-help-copy { font-size: .8rem; margin-top: -.45rem; }.game-container > #game-board:not(.board-3x3), .game-container > canvas { margin-inline: auto; max-width: 100%; }
.game-over-modal { align-items: center; background: rgba(15,14,12,.82); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 1000; }.modal-content { background: linear-gradient(145deg, var(--surface-elevated), var(--surface)); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-raised); max-height: calc(100vh - 2rem); max-width: 400px; overflow: auto; padding: 2rem; text-align: center; width: 100%; }.modal-content h2 { color: var(--accent); font-size: 2rem; letter-spacing: -.04em; margin-bottom: .7rem; }.modal-content p { color: var(--text-muted); }.modal-content .game-btn { margin-top: 1.25rem; }.touch-controls { display: none; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }.touch-control-btn { align-items: center; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 9px; color: var(--text); cursor: pointer; display: flex; font-size: .85rem; font-weight: 800; justify-content: center; min-height: 48px; min-width: 48px; padding: .5rem; user-select: none; }.touch-control-btn:active { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 900px) { .game-header { flex-direction: column; }.game-info-bar { border-top: 1px solid var(--border); padding-top: .65rem; }.game-controls { width: 100%; } } @media (max-width: 768px) { .touch-controls { display: flex; } } @media (max-width: 480px) { .game-container { padding-inline: .85rem; }.back-btn { margin-bottom: 1rem; min-height: 44px; }.game-title { font-size: clamp(1.8rem, 9vw, 2.3rem); }.game-header { margin-bottom: 1rem; padding: .7rem; }.game-controls { align-items: stretch; }.control-group { flex: 1 1 100%; justify-content: space-between; }.game-btn { flex: 1; }.stat-box { flex-basis: 30%; }.game-info-bar { gap: .15rem; }.board-labels { font-size: .82rem; } }