:root {
  --bg: #fff4e6;
  --ink: #4a3426;
  --card: #ffe3c4;
  --accent: #ff8fa3;
  --accent-ink: #7a1f35;
  --hidden: #f6b26b;
  --hidden-edge: #d9893a;
  --revealed: #fff9f0;
  --cell: clamp(24px, calc((100vw - 48px - var(--cols, 8) * 2px) / var(--cols, 8)), 48px);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 720px; margin: 0 auto; padding: 8px 16px 32px; }
h1 { margin: 8px 0; font-size: 1.8rem; }
button, select {
  font: inherit; color: var(--ink); background: var(--card);
  border: 2px solid var(--hidden-edge); border-radius: 12px; padding: 8px 12px; min-height: 44px;
}
button { cursor: pointer; font-weight: 600; }
button:active { transform: translateY(1px); }
#new-game, #end-new-game { background: var(--accent); color: var(--accent-ink); border-color: #e0627f; }
#bait-toggle[aria-pressed="true"] { background: #7ec8e3; border-color: #3a8fb7; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.controls label { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.hud { display: flex; justify-content: center; gap: 12px; margin: 10px 0 4px; }
.hud div { background: var(--card); border-radius: 12px; padding: 6px 14px; min-width: 88px; }
.hud-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.hud strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.hud strong.low { color: #c0392b; }
.message { min-height: 1.4em; margin: 4px 0; font-weight: 600; }
.board-wrap { overflow-x: auto; padding: 4px 0; }
.board {
  display: inline-grid;
  grid-template-columns: repeat(var(--cols, 8), var(--cell));
  gap: 2px; padding: 4px; background: var(--card); border-radius: 16px;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.cell {
  width: var(--cell); height: var(--cell); min-height: 0; padding: 0; border-radius: 10px;
  font-size: calc(var(--cell) * 0.55); line-height: 1; display: flex; align-items: center; justify-content: center;
  background: var(--hidden); border: 2px solid var(--hidden-edge); border-bottom-width: 4px;
  -webkit-touch-callout: none;
}
.cell.hidden::before { content: '🐾'; opacity: 0.28; }
.cell.flagged::before, .cell.baited::before { content: none; }
.cell.revealed { background: var(--revealed); border: 2px solid #ecd9bf; cursor: default; font-weight: 800; }
.cell.cat { background: #ffd6dd; border-color: #e0627f; }
.cell.boom { background: #ff8a8a; }
.cell.n1 { color: #2e86de; } .cell.n2 { color: #27ae60; } .cell.n3 { color: #e74c3c; }
.cell.n4 { color: #8e44ad; } .cell.n5 { color: #d35400; } .cell.n6 { color: #16a085; }
.cell.n7 { color: #34495e; } .cell.n8 { color: #7f8c8d; }
.bait-mode .cell.hidden { border-color: #3a8fb7; }
.end-banner { background: var(--card); border-radius: 16px; padding: 12px; margin: 8px 0; }
.end-banner h2 { margin: 4px 0; }
.end-cats { font-size: 2.2rem; letter-spacing: 6px; }
.end-banner.won { animation: pop 0.4s ease; }
@keyframes pop { from { transform: scale(0.9); } to { transform: scale(1); } }
.help { font-size: 0.85rem; opacity: 0.8; }
.leaderboard { background: var(--card); border-radius: 16px; padding: 8px 16px; margin-top: 16px; }
.leaderboard h2 { margin: 6px 0; font-size: 1.1rem; }
.leaderboard ol { text-align: left; max-width: 320px; margin: 0 auto; padding-left: 28px; }
.leaderboard li { padding: 2px 0; }
.leaderboard li.empty { list-style: none; opacity: 0.6; }
[hidden] { display: none !important; }