/* ===========================================================
   Minesweeper — game-specific styles only.
   Chrome (body, buttons, .stat, #status, .hint) come from shared.css.
   =========================================================== */

body { gap: 16px; }

/* ---------- top control row ---------- */
.top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* difficulty is a little segmented control */
.difficulty {
  display: inline-flex;
  background: var(--surface);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 8px var(--shadow);
}
.diff-btn {
  padding: 8px 16px;
  font-size: 0.9rem;
  background: transparent;
  color: var(--text);
  border-radius: 6px;
}
.diff-btn:hover { opacity: 1; background: var(--surface-3); }
.diff-btn.is-active {
  background: var(--accent);
  color: var(--accent-text);
}
.diff-btn.is-active:hover { background: var(--accent); }

#new { padding: 10px 20px; font-size: 0.95rem; }

/* ---------- stats row ---------- */
.stats {
  display: flex;
  gap: 10px;
}

/* ---------- the board ---------- */
#board {
  /* --cols and --cell are set from JS per difficulty */
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), var(--cell, 34px));
  gap: 3px;
  padding: 10px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 10px 40px var(--shadow);
  /* never let the board outgrow a narrow phone */
  max-width: 96vw;
  touch-action: manipulation;
}

/* ---------- individual cells ---------- */
.cell {
  width: var(--cell, 34px);
  height: var(--cell, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(var(--cell, 34px) * 0.55);
  line-height: 1;
  border: none;
  border-radius: 5px;
  padding: 0;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s, transform 0.05s;
}
.cell:hover { background: var(--surface-3); opacity: 1; }
.cell:active { transform: scale(0.94); }

/* a revealed empty / number cell sits flush like an inset well */
.cell.revealed {
  background: var(--surface);
  cursor: default;
  box-shadow: inset 0 0 0 1px var(--border);
}
.cell.revealed:hover { background: var(--surface); }
.cell.revealed:active { transform: none; }

/* flags keep the covered look but get a marker */
.cell.flag { background: var(--surface-2); }

/* the mine that ended the game, and detonation flash */
.cell.mine-hit { background: var(--red); }
.cell.mine { background: var(--hole); color: #fff; }

/* a flag placed where there was no mine (shown on loss) */
.cell.wrong { background: var(--red); color: #fff; }

/* number colours — distinct per classic Minesweeper */
.n1 { color: var(--blue-board); }
.n2 { color: var(--green); }
.n3 { color: var(--red); }
.n4 { color: var(--blue-board-dark); }
.n5 { color: #b5651d; }            /* brown */
.n6 { color: #0aa3a3; }            /* teal  */
.n7 { color: var(--text); }
.n8 { color: var(--muted); }

/* ---------- flag-mode toggle button ---------- */
.flag-toggle {
  padding: 10px 18px;
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px var(--shadow);
}
.flag-toggle:hover { opacity: 1; background: var(--surface-3); }
.flag-toggle.on {
  background: var(--accent);
  color: var(--accent-text);
}
.flag-toggle.on:hover { background: var(--accent); }
.ft-icon { font-size: 1.05rem; }