:root {
  --ink: #17221c;
  --cream: #f5f0e7;
  --paper: #fffdf8;
  --orange: #e8612d;
  --green: #164f3b;
  --line: #d9d2c6;
  --cell: 30px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "Manrope", sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }
.hero {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px 52px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.9), transparent 42%),
    linear-gradient(rgba(23,34,28,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,34,28,.035) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  border-bottom: 1px solid var(--line);
}
.eyebrow, .kicker {
  font: 700 11px/1 "DM Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 9px; color: #626960; }
.eyebrow span { width: 20px; height: 2px; background: var(--orange); }
h1 {
  font-size: clamp(58px, 10vw, 132px);
  line-height: .9;
  letter-spacing: -.075em;
  margin: 34px 0 30px;
  font-weight: 800;
}
h1 em { color: var(--orange); font-style: normal; }
.hero > p { margin: 0; color: #657067; font-size: clamp(15px, 2vw, 19px); }
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 70px;
  color: var(--ink);
  text-decoration: none;
  font: 700 10px/1 "DM Mono", monospace;
  letter-spacing: .16em;
}
.scroll-cue svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.game-section { max-width: 1120px; margin: auto; padding: 92px 30px 110px; }
.game-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 38px; }
.kicker { color: var(--orange); }
h2 { margin: 8px 0 0; font-size: clamp(35px, 5vw, 56px); letter-spacing: -.055em; line-height: 1; }
.game-heading p { max-width: 310px; color: #687168; line-height: 1.7; margin: 0; font-size: 14px; }
.game-shell {
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 9px 9px 0 var(--ink);
}
.difficulty { display: flex; border-bottom: 1px solid var(--ink); }
.level {
  flex: 1;
  border: 0;
  border-right: 1px solid var(--ink);
  background: transparent;
  padding: 17px 12px;
  font: 700 12px "Manrope", sans-serif;
  cursor: pointer;
  color: var(--ink);
  transition: .15s;
}
.level:last-child { border-right: 0; }
.level small { margin-left: 8px; color: #8e938c; font: 500 9px "DM Mono", monospace; }
.level.active { color: var(--paper); background: var(--green); }
.level.active small { color: #b9d1c5; }
.game-panel { padding: 28px; }
.status-bar {
  max-width: 960px;
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.metric { display: flex; flex-direction: column; gap: 4px; }
.align-right { text-align: right; }
.metric-label { font: 700 9px "DM Mono", monospace; letter-spacing: .15em; color: #848b84; }
.metric strong { font: 500 27px "DM Mono", monospace; letter-spacing: .08em; }
.restart {
  width: 44px; height: 44px; border: 1px solid var(--ink); background: #f6c84e;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer; font: 700 15px "DM Mono", monospace;
}
.restart:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.board-wrap { overflow: auto; padding: 3px 3px 7px; }
.board {
  display: grid;
  width: max-content;
  margin: auto;
  border: 2px solid var(--ink);
  background: var(--ink);
  gap: 1px;
  user-select: none;
  touch-action: manipulation;
}
.cell {
  width: var(--cell); height: var(--cell); padding: 0; border: 0;
  display: grid; place-items: center; background: #dfe3d9; color: var(--ink);
  font: 800 13px "DM Mono", monospace; cursor: pointer;
  box-shadow: inset 2px 2px #f8f8f3, inset -2px -2px #9da69b;
}
.cell:hover:not(.revealed) { background: #e9ede4; }
.cell.revealed { background: #f7f4ed; box-shadow: none; cursor: default; }
.cell.mine { background: #f3c2ad; color: #8f2512; }
.cell.exploded { background: var(--orange); color: white; }
.cell.flagged { color: var(--orange); }
.cell.wrong { color: #992718; background: #f1d4ca; }
.n1 { color: #2458a6; } .n2 { color: #237044; } .n3 { color: #c1402b; }
.n4 { color: #633d91; } .n5 { color: #8e3127; } .n6 { color: #16777b; }
.n7 { color: #202020; } .n8 { color: #777; }
.game-message {
  display: flex; justify-content: center; align-items: center; gap: 9px;
  min-height: 24px; margin-top: 20px; color: #6e766f; font-size: 12px;
}
.message-dot { width: 6px; height: 6px; border-radius: 50%; background: #9ca39b; }
.game-message.won { color: var(--green); font-weight: 700; }
.game-message.won .message-dot { background: #2e9c68; }
.game-message.lost { color: #a13a25; font-weight: 700; }
.game-message.lost .message-dot { background: var(--orange); }
.instructions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.instructions > div { display: flex; align-items: center; gap: 14px; justify-content: center; }
.instructions > div > span { font-size: 25px; width: 35px; text-align: center; }
.instructions p { display: flex; flex-direction: column; margin: 0; color: #81877f; font-size: 11px; line-height: 1.6; }
.instructions strong { color: var(--ink); font-size: 12px; }
footer {
  padding: 25px 4vw; border-top: 1px solid var(--line); display: flex;
  justify-content: space-between; font: 700 9px "DM Mono", monospace; letter-spacing: .12em; color: #7d837c;
}

@media (max-width: 700px) {
  :root { --cell: 28px; }
  .hero { min-height: 72vh; }
  h1 { letter-spacing: -.065em; }
  .game-section { padding: 68px 15px 80px; }
  .game-heading { align-items: start; flex-direction: column; gap: 16px; }
  .game-shell { box-shadow: 5px 5px 0 var(--ink); }
  .level { padding: 14px 4px; font-size: 11px; }
  .level small { display: block; margin: 4px 0 0; }
  .game-panel { padding: 20px 10px; }
  .instructions { grid-template-columns: 1fr; gap: 18px; }
  .instructions > div { justify-content: flex-start; max-width: 165px; margin: auto; width: 100%; }
  footer { gap: 15px; flex-direction: column; text-align: center; }
}