:root {
  --gap: 2px;
  --bg: #1e1e22;
  --hidden: #4a4a55;
  --hidden-hover: #5a5a66;
  --revealed: #2a2a30;
  --line: #15151a;
  --fg: #e8e8ee;
  --n1: #6ea8fe; --n2: #6bd88a; --n3: #ff7b7b; --n4: #b48cff;
  --n5: #e0a24a; --n6: #4fd1d9; --n7: #e8e8ee; --n8: #9a9aa6;
  --mine: #ff4d4d;
  --flag: #d86b6b; /* red at the same tone as the --n2 green */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: ui-monospace, Menlo, Consolas, monospace; }
main { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12vh 24px 24px; min-height: 100vh; justify-content: flex-start; }
.game { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: fit-content; }
.grid { align-self: center; }
.bar { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 20px; align-items: center; font-size: 20px; }
.bar .side { grid-column: 3; grid-row: 1; justify-self: end; }
#new { grid-column: 1; grid-row: 1; justify-self: start; }
.lbl { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.lbl small { font-size: 11px; opacity: 0.5; margin-top: 4px; letter-spacing: 0.08em; text-transform: uppercase; }
.bar .level { position: relative; }
.level-btn::after { content: ' ▾'; opacity: 0.6; }
.level-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10;
  background: var(--hidden); border-radius: 6px; padding: 4px;
  display: grid; grid-template-columns: auto auto auto; row-gap: 2px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.level-menu[hidden] { display: none; }
.level-menu .row { display: contents; cursor: pointer; }
.level-menu .row > span { padding: 4px 7px; white-space: nowrap; }
.level-menu .row > span:first-child { padding-left: 10px; }
.level-menu .row > span:last-child { padding-right: 10px; }
.level-menu .row > span:nth-child(2), .level-menu .row > span:nth-child(3) { text-align: right; opacity: 0.7; }
.level-menu .row:hover > span { background: var(--hidden-hover); }
.level-menu .row > span:first-child { border-radius: 4px 0 0 4px; }
.level-menu .row > span:last-child { border-radius: 0 4px 4px 0; }
.level-menu .row.on > span { color: var(--n1); }
.bar .right { display: flex; grid-column: 2; grid-row: 1; justify-self: center; gap: 16px; align-items: center; }
.bar button { font: inherit; background: var(--hidden); color: var(--fg); border: 0; border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.grid {
  --margin: 24px;
  /* fit the viewport (both axes) with --margin around, never above 32px */
  --cell: min(32px,
    calc((100vw - 2 * var(--margin) - (var(--w) + 1) * var(--gap)) / var(--w)),
    calc((100vh - 2 * var(--margin) - 60px - (var(--h) + 1) * var(--gap)) / var(--h)));
  display: grid;
  grid-template-columns: repeat(var(--w), var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--gap);
  background: var(--line);
  padding: var(--gap);
  border-radius: 6px;
  user-select: none;
}
.cell {
  display: flex; align-items: center; justify-content: center;
  background: var(--hidden);
  font-weight: 700; font-size: calc(var(--cell) * 0.55);
  border-radius: 3px;
  cursor: pointer;
}
.grid:not(.kb) .cell:hover { background: var(--hidden-hover); }
.cell.revealed { background: var(--revealed); cursor: default; }
.cell.revealed:hover { background: var(--revealed); }
.cell.flag { background: var(--flag); }
.cell.flag:hover { background: var(--flag); }
.cell.mine { color: var(--mine); }
.cell.boom { background: var(--mine); color: var(--bg); }
.cell[data-n="1"] { color: var(--n1); } .cell[data-n="2"] { color: var(--n2); }
.cell[data-n="3"] { color: var(--n3); } .cell[data-n="4"] { color: var(--n4); }
.cell[data-n="5"] { color: var(--n5); } .cell[data-n="6"] { color: var(--n6); }
.cell[data-n="7"] { color: var(--n7); } .cell[data-n="8"] { color: var(--n8); }

.title { margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: 0.04em; text-align: center; }
.board { margin-top: 12px; }
.board h2 { margin: 0 0 6px; font-size: 12px; font-weight: 400; opacity: 0.5; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.board ol { list-style: none; margin: 0 auto; padding: 0; width: min(360px, 100%); display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 2px; font-size: 15px; }
.board li { display: contents; }
.board li > span { padding: 2px 6px; }
.board li > span:first-child { opacity: 0.45; text-align: right; }
.board li > span:nth-child(2) { font-weight: 700; }
.board li > span:last-child { opacity: 0.5; text-align: right; }
.board li.new > span { color: var(--n1); opacity: 1; }
.board .empty { opacity: 0.4; text-align: center; grid-column: 1 / -1; padding: 6px; }

.cell.struck { background: var(--flag); color: var(--bg); }
#strikes-box { padding: 4px 10px; margin: -4px -10px; border-radius: 6px; }
#strikes-box.armed { background: var(--flag); color: var(--bg); cursor: pointer; }
#strikes-box.armed small { opacity: 0.8; }
.grid.locked { pointer-events: none; }
/* keyboard cursor */
.grid.kb .cell.cur { outline: 2px solid var(--n1); outline-offset: -2px; }
.grid.kb.crosshair .cell.row, .grid.kb.crosshair .cell.col { box-shadow: inset 0 0 0 100px rgba(110,168,254,0.08); }
.level-menu .sep { grid-column: 1 / -1; height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.level-menu .row.toggle > span:first-child { grid-column: 1 / -1; }
body.nocursor, body.nocursor * { cursor: none !important; }