/* Minesweeper — 9×9, 16×16, 16×30 grids. Scroll wrapper keeps 30-col Expert tappable on phones (rule 35/37). */
.ms-scroll { max-width: 100%; overflow-x: auto; padding: 2px; }
.ms-board { display: grid; gap: 3px; padding: 6px; border-radius: var(--radius-md); background: var(--border); margin: 0 auto; }
.ms-board[data-cols="9"] { grid-template-columns: repeat(9, minmax(32px, 40px)); }
.ms-board[data-cols="16"] { grid-template-columns: repeat(16, minmax(26px, 32px)); }
.ms-board[data-cols="30"] { grid-template-columns: repeat(30, 26px); width: max-content; }
.ms-cell { aspect-ratio: 1; border: none; border-radius: 4px; background: var(--surface-elevated); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.88rem; font-weight: 700; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; }
.ms-cell:hover:not(.is-open) { filter: brightness(1.04); }
.ms-cell.is-focus { outline: 2px solid var(--brand); outline-offset: -2px; z-index: 1; }
.ms-cell.is-open { background: var(--surface); box-shadow: none; cursor: default; }
.ms-cell.is-flag { color: var(--brand); }
.ms-cell.is-mine { background: rgba(220, 38, 38, 0.22); color: #dc2626; }
.ms-cell[data-n="1"] { color: #2563eb; }
.ms-cell[data-n="2"] { color: #16a34a; }
.ms-cell[data-n="3"] { color: #dc2626; }
.ms-cell[data-n="4"] { color: #7c3aed; }
.ms-cell[data-n="5"] { color: #b91c1c; }
.ms-cell[data-n="6"] { color: #0891b2; }
.ms-cell[data-n="7"] { color: var(--text-primary); }
.ms-cell[data-n="8"] { color: var(--text-muted); }