.ixo-room { display: grid; gap: 20px; }
.ixo-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ixo-player-card { padding: 16px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 12px; background: rgba(15, 23, 42, 0.5); }
.ixo-player-card.is-turn { border-color: #fbbf24; box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.16); }
.ixo-player-card strong { color: #f8fafc; }
.ixo-player-card > span { display: block; margin-top: 8px; color: #cbd5e1; }
.ixo-game-area { display: grid; justify-items: center; gap: 16px; }
.ixo-game-area[hidden] { display: none; }
.ixo-board-panel { width: min(100%, 430px); }
.ixo-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ixo-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid rgba(147, 197, 253, 0.22); border-radius: 12px; background: #e9eef5; font-size: clamp(2.7rem, 12vw, 4.4rem); font-weight: 900; transition: transform 80ms ease, background 200ms ease, box-shadow 200ms ease, opacity 200ms ease; }
.ixo-cell:hover { transform: none; background: #e9eef5; box-shadow: var(--box-shadow); }
.ixo-cell.keyboard-selected, .ixo-cell.mouse-selected { outline: 4px solid #38bdf8; outline-offset: 3px; background: #dde7f3; }
.ixo-cell.mouse-selected { transform: scale(1.03); }
.ixo-cell[aria-disabled="true"] { cursor: not-allowed; opacity: 0.95; }
.ixo-cell.X { color: #1565c0; }
.ixo-cell.O { color: #c62828; }
.ixo-cell.warning { box-shadow: inset 0 0 0 3px #f59e0b; animation: ixo-warning 1s ease-in-out infinite; }
.ixo-cell.win { background: #c8f7c5; box-shadow: inset 0 0 0 3px #2e7d32; }
.ixo-mark { position: relative; display: inline-block; min-width: 1em; min-height: 1em; line-height: 1; transform-origin: center; }
.ixo-mark.removing { animation: ixo-remove 350ms ease forwards; }
.ixo-mark-index { position: absolute; right: -0.12em; bottom: -0.2em; font-size: 0.34em; line-height: 1; }
.ixo-preview { color: #475569; }
.ixo-preview .ixo-mark { opacity: 0; transition: opacity 150ms ease; }
.ixo-preview.keyboard-selected .ixo-mark, .ixo-preview.mouse-selected .ixo-mark { opacity: 0.32; }
.ixo-keyboard-help { margin: 14px 0 0; color: #e2e8f0; font-size: 0.9rem; line-height: 1.5; text-align: center; }
.ixo-legend { margin: 14px 0 0; color: #cbd5e1; font-size: 0.9rem; line-height: 1.5; text-align: center; }
.ixo-result { width: min(100%, 430px); padding: 18px; border: 1px solid rgba(147, 197, 253, 0.22); border-radius: 10px; background: rgba(15, 23, 42, 0.55); }
.ixo-result h3 { margin-bottom: 8px; }
.ixo-status { min-height: 1.6rem; margin-top: 18px; color: #cbd5e1; }
.ixo-status.error { color: #fca5a5; }
.base-game-lobby-chat { grid-column: 1 / -1; }

@keyframes ixo-warning { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ixo-remove { from { transform: scale(1); opacity: 1; } to { transform: scale(0.55); opacity: 0; } }

@media (max-width: 760px) {
  .ixo-players { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ixo-cell, .ixo-mark, .ixo-cell.warning { animation: none; transition: none; }
}