.ms-grid { display: grid; grid-template-columns: repeat(var(--w), var(--sz, 34px)); gap: 3px; }
.cell.ms { width: var(--sz, 34px); height: var(--sz, 34px); font-size: 16px; font-weight: 600; border-radius: 6px; }
.cell.ms.open { background: var(--bg); border-color: var(--panel-line); }
.cell.ms.mine { background: var(--chip); }
.cell.ms.hit { background: var(--red); border-color: var(--red); }
.cell.ms.wrong { background: color-mix(in srgb, var(--red) 30%, var(--chip)); }
.ms.n1 { color: var(--blue); } .ms.n2 { color: var(--green); } .ms.n3 { color: var(--red); }
.ms.n4 { color: #a77bff; } .ms.n5 { color: #e08a2e; } .ms.n6 { color: #2ec4c4; } .ms.n7, .ms.n8 { color: var(--dim); }
.ms-grid[style*="--w:16"] { --sz: 30px; }
.ms-grid[style*="--w:30"] { --sz: 26px; }
.ms-grid[style*="--w:30"] .cell.ms { font-size: 14px; }
@media (max-width: 640px) {
  .ms-grid { --sz: 32px; }
  .ms-grid[style*="--w:16"] { --sz: 18px; gap: 2px; }
  .ms-grid[style*="--w:16"] .cell.ms { font-size: 12px; border-radius: 4px; }
  .ms-grid[style*="--w:30"] { --sz: 24px; }
  .play:has(.ms-grid[style*="--w:30"]) { align-items: flex-start; }
}