:root {
  --background: #f3f3f3;
  --surface: #ffffff;
  --cell: #d6d6d6;
  --cell-hover: #bcbcbc;
  --revealed: #fafafa;
  --text: #202020;
  --muted: #666666;
  --accent: #5f5f5f;
  --accent-dark: #3f3f3f;
  --mine-bg: #d8d8d8;
  --win: #4ade80;
  --best: #00e5ff;
  --cell-size: 30px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #161616;
    --surface: #202020;
    --cell: #4a4a4a;
    --cell-hover: #5c5c5c;
    --revealed: #2b2b2b;
    --text: #ececec;
    --muted: #a0a0a0;
    --accent: #8a8a8a;
    --accent-dark: #5a5a5a;
    --mine-bg: #3a3a3a;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--background);
  color: var(--text);
  font: 15px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif;
}
.app { max-width: 1240px; margin: 0 auto; padding: 18px 16px 28px; }
.head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; }
h1 { margin: 0; font-size: 30px; font-weight: 700; }
.head p { margin: 2px 0 0; }
.settings > summary { display: none; }
.muted { color: var(--muted); }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 14px;
}
.toolbar.ai { margin-top: 8px; }
.toolbar label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.toolbar .spacer { flex: 1; }
select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--cell); border-radius: 6px; padding: 5px 8px;
}
button {
  font: 700 14px "Segoe UI", system-ui, sans-serif; color: #fff;
  background: var(--accent-dark); border: 0; border-radius: 6px;
  padding: 9px 14px; cursor: pointer;
}
button:hover { background: var(--accent); }
button[aria-pressed="true"] { background: #2563eb; }
button:disabled { opacity: .5; cursor: default; }
.touch-only { display: none; }
.actions { display: flex; gap: 10px; margin-top: 12px; }
.actions button { flex: 1; }
.actions .mode span { font-size: 18px; vertical-align: -2px; }
.cell, .board { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.ai-status { font-size: 13px; }

.statusbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); padding: 10px 14px; margin-top: 12px; border-radius: 8px;
  font-size: 14px;
}
.counters { display: flex; gap: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.board-wrap {
  background: var(--surface); margin-top: 12px; padding: 14px; border-radius: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.board {
  display: grid; gap: 2px; width: max-content; margin: 0 auto;
  grid-template-columns: repeat(var(--columns), var(--cell-size));
  grid-auto-rows: var(--cell-size);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.cell {
  display: flex; align-items: center; justify-content: center;
  background: var(--cell); border-radius: 3px; cursor: pointer;
  font-weight: 700; font-size: calc(var(--cell-size) * .55); line-height: 1;
  color: var(--text);
}
.cell:hover { background: var(--cell-hover); }
.cell.open { background: var(--revealed); cursor: default; }
.cell.mine { background: var(--mine-bg); }
.cell.boom { background: #f87171; color: #111; }
.cell.win-mine { color: var(--win); }
.cell.wrong-flag { text-decoration: line-through; }
.cell.n1 { color: #303030; } .cell.n2 { color: #4a4a4a; } .cell.n3 { color: #202020; } .cell.n4 { color: #5a5a5a; }
.cell.n5 { color: #383838; } .cell.n6 { color: #666666; } .cell.n7 { color: #181818; } .cell.n8 { color: #777777; }
@media (prefers-color-scheme: dark) {
  .cell.n1, .cell.n2, .cell.n3, .cell.n4, .cell.n5, .cell.n6, .cell.n7, .cell.n8 { color: var(--text); }
}
.cell.heat { font-size: calc(var(--cell-size) * .32); font-weight: 600; }
.cell.best { outline: 2px solid var(--best); outline-offset: -2px; }

.mine-stats { font-size: 13px; margin-top: 10px; }

dialog {
  border: 0; border-radius: 10px; padding: 20px; max-width: min(96vw, 900px);
  background: var(--background); color: var(--text); text-align: center;
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h2 { margin: 0 0 2px; font-size: 26px; }
dialog p { margin: 2px 0; }
.replay {
  display: grid; gap: 1px; margin: 12px auto; width: max-content; max-width: 100%;
  grid-template-columns: repeat(var(--columns), var(--replay-size));
  grid-auto-rows: var(--replay-size);
  background: var(--surface); padding: 8px; border-radius: 6px;
}
.replay span {
  background: var(--cell); font-size: calc(var(--replay-size) * .6); font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.replay span.open { background: var(--revealed); }
.replay span.mine { background: var(--mine-bg); }
.result-buttons { display: flex; gap: 10px; }
.result-buttons button { flex: 1; }

/* Phones and tablets: compact header, folded settings, sticky counters, action bar at the bottom. */
body.mobile .app { padding: 10px 8px calc(84px + env(safe-area-inset-bottom)); }
body.mobile h1 { font-size: 22px; }
body.mobile .tagline { font-size: 13px; }
body.mobile .settings { margin-top: 8px; background: var(--surface); border-radius: 8px; }
body.mobile .settings > summary {
  display: block; padding: 10px 14px; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none;
}
body.mobile .settings > summary::after { content: ' ▾'; color: var(--muted); }
body.mobile .settings[open] > summary::after { content: ' ▴'; }
body.mobile .settings .toolbar { margin: 0; padding: 0 14px 12px; }
body.mobile .settings select { max-width: 100%; }
body.mobile .statusbar {
  position: sticky; top: 0; z-index: 5; margin-top: 8px; padding: 8px 12px; font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
body.mobile .counters { font-size: 15px; gap: 14px; }
body.mobile .board-wrap { margin-top: 8px; padding: 6px; }
body.mobile .board { gap: 1px; }
body.mobile .cell { border-radius: 2px; }
body.mobile .mine-stats { text-align: center; }
body.mobile .touch-only { display: inline-block; }
body.mobile .actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: var(--background); box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
}
body.mobile .actions button { padding: 13px 8px; font-size: 15px; }
body.mobile .actions .mode { flex: 1.3; }
body.mobile .actions .mode[aria-pressed="true"] { background: #b91c1c; }
body.mobile dialog { padding: 16px 12px; }