.level { margin-bottom: 12px; }
.g-stats { align-items: stretch; }
.mode { margin-left: auto; align-self: center; }
.mode[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }

/* Minefield palette: soft periwinkle in light mode, slate blue in dark mode */
:root {
  --ms-field: #dde3f3;
  --ms-ring: #b3bedd;
  --ms-closed-a: #93a5dc;
  --ms-closed-b: #7186c4;
  --ms-open: #f4f6fc;
  --ms-mine: #f6d3da;
  --ms-n1: #2b6cb0;
  --ms-n2: #2f855a;
  --ms-n3: #d12c33;
  --ms-n4: #553c9a;
  --ms-n5: #b7791f;
  --ms-n6: #0e7c86;
  --ms-n7: #222;
  --ms-n8: #777;
}
:root[data-theme="dark"] {
  --ms-field: #131a30;
  --ms-ring: #0b1020;
  --ms-closed-a: #5b6ea6;
  --ms-closed-b: #414f80;
  --ms-open: #1f2846;
  --ms-mine: #4a2a3a;
  --ms-n1: #7fb0ff;
  --ms-n2: #62d99b;
  --ms-n3: #ff7b82;
  --ms-n4: #b8a0ff;
  --ms-n5: #ffc36b;
  --ms-n6: #5fd6e0;
  --ms-n7: #e4e7f2;
  --ms-n8: #a3aac2;
}

.wrap { display: grid; place-items: center; overflow-x: auto; padding: 6px 0 4px; }
.field {
  --cell: min(calc((100vw - 48px - (var(--cols) - 1) * 2px) / var(--cols)), 40px);
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
  background: var(--ms-field);
  box-shadow: 0 0 0 3px var(--ms-ring), var(--shadow-lg);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.sq {
  padding: 0;
  border: 0;
  border-radius: 5px;
  font: 800 calc(var(--cell) * 0.55) var(--font);
  line-height: 1;
  cursor: pointer;
  background: linear-gradient(180deg, var(--ms-closed-a), var(--ms-closed-b));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.28);
  color: #fff;
}
.sq:hover:not(.open) { filter: brightness(1.12); }
.sq:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; z-index: 1; }
.sq.open { cursor: default; background: var(--ms-open); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); animation: reveal 0.15s ease-out; }
.sq.open.n1 { color: var(--ms-n1); }
.sq.open.n2 { color: var(--ms-n2); }
.sq.open.n3 { color: var(--ms-n3); }
.sq.open.n4 { color: var(--ms-n4); }
.sq.open.n5 { color: var(--ms-n5); }
.sq.open.n6 { color: var(--ms-n6); }
.sq.open.n7 { color: var(--ms-n7); }
.sq.open.n8 { color: var(--ms-n8); }
.sq.mine { background: var(--ms-mine); }
.sq.boom { background: #ff5d5d; }
.sq.wrongflag { background: #ffd0a0; color: #222; }
@keyframes reveal { from { transform: scale(0.85); } }

.hint { text-align: center; color: var(--muted); font-size: 0.82rem; margin: 6px 0 0; }
.big { font-size: 3.4rem; }