/* minesweeper.css — the game surface for Minesweeper.Free.
 * A classic beveled silver board and LED counters, framed to sit on the dark
 * slate site chrome (styles.css). Loaded only on the game/stats/daily pages.
 */

/* ---- page layout ---- */
.sf-play { max-width: 1100px; margin: 0 auto; padding: 18px 14px 40px; }
.sf-stage { display: flex; gap: 18px; align-items: flex-start; justify-content: center; }
.sf-game { background: linear-gradient(180deg, #202b3b, #182130); border: 1px solid var(--sf-line);
  border-radius: 14px; padding: 14px; box-shadow: var(--sf-shadow); max-width: 100%; }

/* ---- control bar ---- */
/* 1fr auto 1fr keeps the HUD dead-centre no matter how wide the left/right
   groups get, so nothing shifts it (e.g. the no-guess status appearing). */
.sf-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 12px; }
.sf-controls-left { display: flex; align-items: center; gap: 6px; justify-self: start; }
.sf-controls-right { display: flex; align-items: center; gap: 6px; justify-self: end; }
.sf-new { display: flex; gap: 6px; flex-wrap: wrap; }

/* HUD: LED-style counter + timer flanking the reset face */
.sf-hud { display: flex; align-items: center; gap: 14px; justify-self: center; }
.sf-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sf-stat em { font-style: normal; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-stat b, #msMines, #sfTimer { font-variant-numeric: tabular-nums; }
#msMines, #sfTimer { display: inline-block; min-width: 3.2ch; text-align: center; padding: 2px 8px;
  background: #120607; color: #ff3b30; border-radius: 6px; font-weight: 800; font-size: 1.15rem;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; box-shadow: inset 0 0 0 1px #300; letter-spacing: .06em; }
#sfStatus { font-weight: 700; color: var(--sf-gold); }

.ms-face { font-size: 1.5rem; line-height: 1; width: 46px; height: 46px; border-radius: 10px;
  border: 1px solid var(--sf-line); background: var(--sf-panel-2); cursor: pointer; }
.ms-face:active { transform: translateY(1px); }

/* difficulty + flag-mode toggles */
.sf-toggles { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; align-items: center; }
.sf-toggle-group { display: flex; align-items: center; gap: 6px; }
.sf-toggle-label { font-size: .8rem; color: var(--sf-muted); text-transform: uppercase; letter-spacing: .06em; }
.ms-diff, .sf-chip { border: 1px solid var(--sf-line); background: var(--sf-panel-2); color: var(--sf-text);
  padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.ms-diff:hover, .sf-chip:hover { background: #2a3749; }
.ms-diff.active, .sf-chip.active { background: rgba(232,72,59,.2); border-color: var(--sf-red); color: #fff; }
#msFlagMode.active { background: rgba(232,72,59,.2); border-color: var(--sf-red); }

/* status bar centred BELOW the board — height reserved so toggling the no-guess
   badge or a win/lose message never shifts the article below (no CLS). */
.ms-statusbar { min-height: 1.7em; margin-top: 10px; display: flex; gap: 14px;
  justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; }
#msNoGuess { color: #57d977; font-weight: 800; }
#sfStatus { font-weight: 700; color: var(--sf-gold); }

/* ---- the board ---- */
.sf-board.ms-grid {
  /* Cell size is derived PURELY in CSS from the viewport — no JS measurement, so
     there is no measure→resize feedback loop (that made the board grow on every
     New game) and no layout shift. --ms-cols/--ms-rows come from the template. */
  --ms-avail: calc(min(100vw, 1080px) - 40px);
  --ms-cell: clamp(15px, calc((var(--ms-avail) - var(--ms-cols) * 1px) / var(--ms-cols)), 34px);
  display: grid; gap: 1px;
  grid-template-columns: repeat(var(--ms-cols), var(--ms-cell));
  grid-auto-rows: var(--ms-cell); width: max-content; max-width: 100%;
  padding: 6px; background: #8b93a1; border-radius: 6px;
  box-shadow: inset 2px 2px 0 #6d7686, inset -2px -2px 0 #b9c0cc;
  margin: 0 auto; touch-action: manipulation; overflow: auto;
  /* Height reserved from the SAME cell var → exact, so no gap and no CLS. */
  min-height: calc(var(--ms-rows) * var(--ms-cell) + var(--ms-rows) * 1px + 12px);
  align-content: start; }
.ms-cell { width: var(--ms-cell); height: var(--ms-cell); padding: 0; margin: 0; border: 0;
  font-weight: 800; font-size: calc(var(--ms-cell) * .58); line-height: 1; cursor: pointer;
  background: #c6ccd6; box-shadow: inset 2px 2px 0 #eef1f5, inset -2px -2px 0 #8a92a1;
  display: grid; place-items: center; user-select: none; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ms-cell:hover { background: #cfd5de; }
.ms-cell.flag { background: #c6ccd6; }
.ms-cell.open { background: #d2d7df; box-shadow: inset 0 0 0 1px #a7aebb; cursor: default; }
.ms-cell.mine { background: #d2d7df; }
.ms-cell.boom { background: #e8483b; }
.ms-cell.wrong { color: #b00; }
.ms-cell.hint { animation: ms-hint .7s ease 2; }
@keyframes ms-hint { 0%,100% { background: #cfd5de; } 50% { background: #ffe08a; } }
.sf-board.dead .ms-cell { cursor: default; }

/* classic minesweeper number colours */
.ms-cell.n1 { color: #1976d2; } .ms-cell.n2 { color: #388e3c; } .ms-cell.n3 { color: #d32f2f; }
.ms-cell.n4 { color: #1a237e; } .ms-cell.n5 { color: #8d1c1c; } .ms-cell.n6 { color: #00838f; }
.ms-cell.n7 { color: #212121; } .ms-cell.n8 { color: #616161; }

.sf-msg { text-align: center; min-height: 1.2em; margin-top: 10px; color: var(--sf-gold); font-weight: 600;
  opacity: 0; transition: opacity .2s ease; }
.sf-msg.show { opacity: 1; }
.sf-tip { text-align: center; color: var(--sf-muted); font-size: .85rem; margin: 12px auto 0; max-width: 60ch; }

/* ---- win overlay ---- */
.sf-win { position: relative; margin-top: 14px; }
.sf-win-card { background: var(--sf-panel); border: 1px solid var(--sf-line); border-radius: 12px;
  padding: 20px; text-align: center; box-shadow: var(--sf-shadow); }
.sf-win-card h2 { margin: 0 0 6px; }
.sf-win-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ---- daily ---- */
.sf-daily-head { text-align: center; margin-bottom: 14px; }
.sf-daily-date { color: var(--sf-gold); font-weight: 700; }
.sf-daily-badge { font-size: .85rem; color: var(--sf-muted); }
/* above-the-fold streak strip (current / best / this-month) */
.sf-streak-strip { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 4px auto 18px; }
.sf-streak-tile { background: linear-gradient(160deg, var(--sf-panel-2), var(--sf-panel)); border: 1px solid var(--sf-line);
  border-radius: 14px; padding: 12px 24px; min-width: 116px; text-align: center; }
.sf-streak-num { display: block; font-size: 1.9rem; font-weight: 800; color: #57d977; line-height: 1; }
.sf-streak-lbl { display: block; font-size: .72rem; color: var(--sf-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; white-space: nowrap; }

.sf-calendar-section { margin-top: 28px; text-align: center; }
.sf-cal-caption { color: var(--sf-muted); font-size: .9rem; margin: 4px 0 0; text-transform: capitalize; }
.sf-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 380px; margin: 12px auto 0; }
.sf-cal-wd { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sf-muted);
  font-weight: 600; padding-bottom: 2px; }
.sf-cal-pad { aspect-ratio: 1; }
.sf-cal-day { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--sf-panel);
  border: 1px solid var(--sf-line); color: var(--sf-muted); font-size: .85rem; }
.sf-cal-day.won { background: linear-gradient(145deg, #57d977, #35b357); color: #06251a; font-weight: 800; border-color: transparent; }
.sf-cal-day.today { border-color: var(--sf-gold); color: var(--sf-gold); font-weight: 700; }
.sf-cal-day.won.today { color: #06251a; box-shadow: 0 0 0 2px var(--sf-gold); }

/* ---- home difficulty grid ---- */
.sf-grid-section { margin: 34px 0 8px; }
.sf-variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.sf-variant-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px;
  background: var(--sf-panel); border: 1px solid var(--sf-line); color: var(--sf-text); }
.sf-variant-card:hover { border-color: var(--sf-red); text-decoration: none; transform: translateY(-2px); transition: .15s; }
.sf-variant-icon { font-size: 1.6rem; }
.sf-variant-name { font-weight: 700; color: #fff; }
.sf-variant-tag { color: var(--sf-muted); font-size: .88rem; }

/* ---- article: a centred content column under the (centred) board ---- */
.sf-article { margin: 30px auto 0; max-width: 780px; text-align: center; }
.sf-article .sf-prose { max-width: 66ch; margin-left: auto; margin-right: auto; }
/* the lede has a max-width, so centre it as a BLOCK everywhere (daily/stats
   ledes live outside .sf-article and were left-anchored → looked off-centre). */
.sf-lede { margin-left: auto; margin-right: auto; }
/* ordered how-to steps + FAQ accordions read better left-aligned, but stay
   inside the centred column */
.sf-article .sf-steps,
.sf-article .sf-faq { text-align: left; }
/* home "Choose your board" heading + stats intro centred to match everything else */
.sf-grid-section .sf-h2 { text-align: center; }
.sf-stats-page { text-align: center; }
.sf-stats-page .sf-stat-card { text-align: left; }

/* ---- stats ---- */
.sf-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 16px 0 8px; }
.sf-stat-card { background: var(--sf-panel); border: 1px solid var(--sf-line); border-radius: 12px; padding: 18px; }
.sf-stat-card h3 { margin: 0 0 8px; }
.sf-stat-big { font-size: 2.2rem; font-weight: 800; color: var(--sf-gold); display: flex; align-items: baseline; gap: 8px; }
.sf-stat-big span { font-size: .8rem; color: var(--sf-muted); font-weight: 500; }
.sf-stat-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 12px 0 0; }
.sf-stat-card dl > div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--sf-line); padding: 3px 0; }
.sf-stat-card dt { color: var(--sf-muted); font-size: .85rem; }
.sf-stat-card dd { margin: 0; font-weight: 700; }

/* ---- share menu (from ms-share.js) ---- */
.sf-share-menu { position: absolute; z-index: 120; background: var(--sf-panel); border: 1px solid var(--sf-line);
  border-radius: 10px; padding: 6px; box-shadow: var(--sf-shadow); display: flex; flex-direction: column; min-width: 150px; }
.sf-share-menu a, .sf-share-menu button { display: block; width: 100%; text-align: left; padding: 8px 12px;
  border: 0; background: none; color: var(--sf-text); border-radius: 7px; cursor: pointer; font-size: .92rem; }
.sf-share-menu a:hover, .sf-share-menu button:hover { background: rgba(255,255,255,.06); text-decoration: none; }

/* ---- ad slots (reserved, hidden until enabled) ---- */
.ad-slot { display: block; }
.ad-rail { width: 160px; min-height: 600px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .sf-stage { flex-direction: column; align-items: center; }
  .ad-rail { display: none; }
}
@media (max-width: 640px) {
  /* stack the control groups, each centred, so nothing overflows on phones */
  .sf-controls { grid-template-columns: 1fr; justify-items: center; }
  .sf-controls-left, .sf-controls-right { justify-self: center; }
}