/* minesweeper/minesweeper.css — game-specific rules. Pairs with /styles.css. */

/* Board palette (Stone) + per-theme number colors. Mirrors styles.css theming:
   :root = light, prefers-color-scheme dark = system dark, [data-theme] = explicit. */
:root {
  --ms-covered: #ccd0d5;
  --ms-open: #eef0f2;
  --ms-n1: #1d4ed8; --ms-n2: #15803d; --ms-n3: #b91c1c; --ms-n4: #6d28d9;
  --ms-n5: #9a3412; --ms-n6: #0e7490; --ms-n7: #334155; --ms-n8: #6b7280;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ms-covered: #3b3f45;
    --ms-open: #2a2d31;
    --ms-n1: #7aa2f7; --ms-n2: #6bd089; --ms-n3: #f7768e; --ms-n4: #bb9af7;
    --ms-n5: #e0af68; --ms-n6: #56d4dd; --ms-n7: #c0caf5; --ms-n8: #aab2cf;
  }
}
[data-theme="light"] {
  --ms-covered: #ccd0d5; --ms-open: #eef0f2;
  --ms-n1: #1d4ed8; --ms-n2: #15803d; --ms-n3: #b91c1c; --ms-n4: #6d28d9;
  --ms-n5: #9a3412; --ms-n6: #0e7490; --ms-n7: #334155; --ms-n8: #6b7280;
}
[data-theme="dark"] {
  --ms-covered: #3b3f45; --ms-open: #2a2d31;
  --ms-n1: #7aa2f7; --ms-n2: #6bd089; --ms-n3: #f7768e; --ms-n4: #bb9af7;
  --ms-n5: #e0af68; --ms-n6: #56d4dd; --ms-n7: #c0caf5; --ms-n8: #aab2cf;
}

/* Colorblind-safe number colors (override --ms-nN when the flag is on).
   Three blocks, mirroring the base tokens: the bare selector covers light
   (default + explicit [data-theme=light], same specificity, wins by source
   order); system-dark and explicit-dark need higher specificity to beat the
   base dark tokens. */
[data-colorblind="on"] {
  --ms-n1:#1a6fd0; --ms-n2:#0a8f5b; --ms-n3:#d55e00; --ms-n4:#8a4fc4;
  --ms-n5:#9a6700; --ms-n6:#0e8aa0; --ms-n7:#3f4753; --ms-n8:#7a7f88;
}
@media (prefers-color-scheme: dark) {
  [data-colorblind="on"]:not([data-theme="light"]) {
    --ms-n1:#6db0f5; --ms-n2:#5fce93; --ms-n3:#f0936a; --ms-n4:#c4a3f0;
    --ms-n5:#e0b15a; --ms-n6:#56c5d8; --ms-n7:#aeb6c2; --ms-n8:#c2c8d0;
  }
}
[data-colorblind="on"][data-theme="dark"] {
  --ms-n1:#6db0f5; --ms-n2:#5fce93; --ms-n3:#f0936a; --ms-n4:#c4a3f0;
  --ms-n5:#e0b15a; --ms-n6:#56c5d8; --ms-n7:#aeb6c2; --ms-n8:#c2c8d0;
}

/* ------------------------------------------------------------------ */
/* Minesweeper-specific styles                                         */
/* ------------------------------------------------------------------ */

.ms-toolbar,
.ms-status,
.ms-mode {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.6rem 0;
}
.ms-toolbar,
.ms-status { justify-content: space-between; }

.ms-status .stat { display: flex; flex-direction: column; align-items: center; min-width: 3.5rem; }
.ms-status .label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ms-status .value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Quick-reference controls list under the mode toggle. */
.ms-hints {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.ms-hints .k {
  display: inline-block;
  min-width: 4rem;
  margin-right: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
}

/* Board: square cells sized by column count via --cols. */
.ms-board-wrap {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
}

.ms-board {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 1fr;
  /* Fix the whole board to the grid's aspect so 1fr tracks are uniform squares.
     Deriving cell height from per-cell aspect-ratio let 1fr rounding land
     unevenly on edge columns (non-square cells on wide grids); a board-level
     aspect-ratio makes every track square instead. */
  aspect-ratio: var(--cols) / var(--rows);
  gap: 3px;
  width: 100%;
  touch-action: manipulation; /* stop double-tap zoom on cells; preserves scroll */
}

/* Win/loss banner — minesweeper-specific overlay extensions.
   Shared .overlay base rules live in /styles.css. */
.overlay h2 { font-size: 1.8rem; }           /* larger than canonical; keep here */

@media (prefers-reduced-motion: no-preference) {
  .overlay:not(.hidden) { animation: ms-pop 160ms ease-out; }
}
@keyframes ms-pop {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.ms-cell {
  position: relative;
  /* No per-cell aspect-ratio: height comes from the board's square grid tracks
     (see .ms-board). Keeps edge columns square on wide grids. */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(0.7rem, 4.5vw, 1.1rem);
  line-height: 1;
  border: 0;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  color: var(--fg);
  background: var(--ms-covered, #ccd0d5);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
  user-select: none;
  -webkit-user-select: none;
  /* Disable the iOS long-press callout/selection that otherwise pre-empts the
     400ms long-press flag timer (app.js). This does NOT affect page scroll —
     scroll is governed by touch-action (manipulation) on .ms-board, which we
     keep so the tall Hard board stays scrollable. Flag-mode toggle remains the
     reliable fallback if long-press still misfires on a given device. */
  -webkit-touch-callout: none;
}
.ms-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.ms-cell.revealed {
  background: var(--ms-open, #eef0f2);
  box-shadow: none;
  cursor: default;
}
.ms-cell.flagged { background: var(--ms-covered, #ccd0d5); }
.ms-cell.mine.revealed { background: #f3b0a6; }
.ms-cell.mine-hit { background: #e2675a; } /* the mine the player clicked */
.ms-cell.flag-wrong { background: #e2a06a; } /* flagged but not a mine (shown on loss) */
.ms-cell.flag-wrong::after {
  content: '✕';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #7a1f12;
}

/* Number colors — the digit always carries the meaning; color is secondary. */
.ms-cell[data-n="1"] { color: var(--ms-n1); }
.ms-cell[data-n="2"] { color: var(--ms-n2); }
.ms-cell[data-n="3"] { color: var(--ms-n3); }
.ms-cell[data-n="4"] { color: var(--ms-n4); }
.ms-cell[data-n="5"] { color: var(--ms-n5); }
.ms-cell[data-n="6"] { color: var(--ms-n6); }
.ms-cell[data-n="7"] { color: var(--ms-n7); }
.ms-cell[data-n="8"] { color: var(--ms-n8); }

/* Mode toggle reflects active mode via aria-pressed. */
#mode-toggle { display: inline-flex; gap: 0.4rem; }
#mode-toggle .mode-flag { display: none; }
#mode-toggle[aria-pressed="true"] .mode-reveal { display: none; }
#mode-toggle[aria-pressed="true"] .mode-flag { display: inline; }

@media (prefers-reduced-motion: no-preference) {
  .ms-cell.revealed { transition: background 90ms ease; }
}