.battle-status { min-height: 1.6rem; text-align: center; font-weight: 600; color: var(--text-muted); }.fleet-picker { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }.fleet-picker button { border: 2px solid var(--surface-light); border-radius: 8px; background: var(--surface); color: var(--text-color); min-height: 44px; padding: .5rem .7rem; font-weight: 600; touch-action: manipulation; }.fleet-picker button.selected { border-color: var(--accent); background: rgba(227,163,75,.18); }.battle-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 1000px; margin: 1rem auto; text-align: center; }.battle-boards h2 { font-size: 1.15rem; }.board-help { min-height: 2.8rem; color: var(--text-muted); font-size: .82rem; }.battle-board { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: min(100%, 460px); margin: auto; padding: 4px; background: var(--surface-light); border-radius: 8px; touch-action: manipulation; user-select: none; }.battle-cell { aspect-ratio: 1; min-width: 0; border: 1px solid #42627e; background: #164e73; color: white; font-size: clamp(.65rem, 2vw, 1.15rem); font-weight: 800; cursor: pointer; }.battle-cell.ship { background: #64748b; }.battle-cell.miss { background: #1e6c9d; }.battle-cell.hit { background: #b91c1c; }.battle-cell.sunk { background: #7f1d1d; outline: 2px solid var(--accent); }.battle-cell:disabled { cursor: default; opacity: 1; }.battle-cell:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }.setup-only[hidden] { display: none; }@media (max-width: 720px) { .battle-boards { grid-template-columns: 1fr; gap: 1.5rem; }.board-help { min-height: auto; margin-bottom: .5rem; } }