/* Sweep — daily no-guess minesweeper. */

.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.head-btns { display: flex; gap: 6px; }

.sw-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: var(--space-3) 0; flex-wrap: wrap; }
#sw-timer, #sw-mines { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.stage-wrap { position: relative; width: min(94vw, 420px); margin: 0 auto var(--space-3); }

.sw-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  padding: 6px;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
}

.sw-cell {
  aspect-ratio: 1;
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  font-size: clamp(0.72rem, 3.4vw, 1.05rem);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 120ms var(--ease);
}
.sw-cell:hover:not(.open) { background: color-mix(in srgb, var(--accent) 22%, var(--bg-elev-2)); }
/* An opened square has to read as a HOLE, not just as a square with nothing in
   it. var(--surface) is only 4% white over the same dark ground, so opened-empty
   and unopened were very nearly the same colour — which in minesweeper is not a
   polish problem, it is the game becoming unreadable. Recessed and darker. */
.sw-cell.open {
  background: rgba(0, 0, 0, 0.38);
  border-color: transparent;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  cursor: default;
}
.sw-cell.flag { background: color-mix(in srgb, var(--accent) 26%, var(--bg-elev-2)); }
.sw-cell.boom { background: var(--bad); }
.sw-cell.shown { background: color-mix(in srgb, var(--bad) 30%, var(--bg-elev-2)); }

/* The classic number colours, tuned for a dark board. */
.sw-cell.n1 { color: #60a5fa; }
.sw-cell.n2 { color: #4ade80; }
.sw-cell.n3 { color: #f87171; }
.sw-cell.n4 { color: #c084fc; }
.sw-cell.n5 { color: #fbbf24; }
.sw-cell.n6 { color: #22d3ee; }
.sw-cell.n7 { color: #f0abfc; }
.sw-cell.n8 { color: #e2e8f0; }

.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: var(--space-4);
  background: rgba(6, 7, 12, 0.86);
  backdrop-filter: blur(5px);
  border-radius: var(--radius);
}
.over-kicker { letter-spacing: 0.28em; font-size: 0.72rem; font-weight: 800; color: var(--accent-text); }
.over-score {
  font-size: 3.2rem; font-weight: 850; line-height: 1;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.over-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.sw-controls { display: grid; gap: 8px; margin-bottom: var(--space-3); }
.sw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sw-row .btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--text);
  font-weight: 700;
}
#btn-mode[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}