:root {
  --bg: #fff7f4;
  --paper: rgba(255, 252, 247, 0.94);
  --paper-strong: #fffdf9;
  --ink: #3a2821;
  --muted: #7d675d;
  --rose: #d96f8d;
  --rose-deep: #b94468;
  --rose-soft: #f6d9df;
  --gold: #c79a54;
  --gold-soft: #ead6ae;
  --line: rgba(199, 154, 84, 0.48);
  --safe: #fffaf2;
  --closed: #f6e4e4;
  --closed-dark: #efd1d7;
  --danger: #803b42;
  --blue: #4676b9;
  --shadow: 0 18px 55px rgba(108, 70, 55, 0.16);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 230, 235, .95), transparent 33%),
    radial-gradient(circle at 80% 10%, rgba(255, 238, 214, .72), transparent 28%),
    linear-gradient(135deg, rgba(244, 202, 209, .42) 0 12%, transparent 12% 88%, rgba(244, 202, 209, .36) 88% 100%),
    var(--bg);
  overflow-x: hidden;
  touch-action: manipulation;
}

button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.page-shell {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom));
}

.hero,
.game-card,
.best-panel {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.hero {
  overflow: hidden;
  margin: 0 auto 12px;
  padding: 20px 18px 18px;
  text-align: center;
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-lg) var(--radius-lg);
}

.hero::before,
.hero::after,
.game-card::before,
.best-panel::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(199, 154, 84, .35);
  border-radius: inherit;
}

.ribbon-left {
  position: absolute;
  top: -18px;
  left: -32px;
  width: 150px;
  height: 78px;
  transform: rotate(-18deg);
  opacity: .72;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(185, 68, 104, .16) 18% 23%, transparent 23% 77%, rgba(185, 68, 104, .16) 77% 82%, transparent 82%),
    linear-gradient(180deg, #f9ccd6, #f0aab9 48%, #f8d4dc 52%, #e890a5);
  border: 1px solid rgba(185, 68, 104, .18);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(185, 68, 104, .16);
}

.ornament {
  color: var(--gold);
  font-size: 26px;
  line-height: 1;
  text-shadow: 0 2px 0 #fff;
}

.eyebrow {
  margin: 6px 0 2px;
  color: var(--muted);
  font-family: "Shippori Mincho", serif;
  font-size: clamp(18px, 4.8vw, 30px);
  letter-spacing: .12em;
}

h1 {
  margin: 0;
  color: var(--rose-deep);
  font-family: "Shippori Mincho", serif;
  font-size: clamp(31px, 9vw, 58px);
  line-height: 1.08;
  letter-spacing: .055em;
  text-shadow: 0 2px 0 #fff;
}

.lead {
  margin: 10px auto 0;
  max-width: 620px;
  color: var(--muted);
  font-size: clamp(14px, 3.6vw, 17px);
  line-height: 1.55;
}

.game-card {
  padding: 14px;
  border-radius: var(--radius-xl);
}

.status-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}

.stat-box,
.reset-button,
.mode-button,
select {
  border: 1px solid rgba(199, 154, 84, .5);
  background: linear-gradient(180deg, #fffdfb, #fff5f4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 5px 15px rgba(137, 74, 71, .08);
}

.stat-box {
  border-radius: var(--radius-md);
  padding: 8px 8px 7px;
  text-align: center;
  min-width: 0;
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
}

.stat-box strong {
  display: block;
  margin-top: 1px;
  color: var(--rose-deep);
  font-family: "Shippori Mincho", serif;
  font-size: clamp(21px, 7vw, 34px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.reset-button {
  min-width: min(42vw, 190px);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
}
.reset-button span:first-child { display: block; font-size: clamp(22px, 6vw, 32px); line-height: 1; }
.reset-button span:last-child { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.reset-button:active, .mode-button:active, .cell:active { transform: translateY(1px); }

.controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.select-label { min-width: 0; }
.select-label span {
  display: block;
  margin: 0 0 4px 3px;
  color: var(--muted);
  font-size: 12px;
}

select,
.mode-button {
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  color: var(--ink);
  outline: none;
}
select {
  padding: 0 36px 0 14px;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--rose-deep) 50%) right 16px center/6px 6px no-repeat,
    linear-gradient(135deg, var(--rose-deep) 50%, transparent 50%) right 10px center/6px 6px no-repeat,
    linear-gradient(180deg, #fffdfb, #fff5f4);
}
.mode-button {
  padding: 0 14px;
  white-space: nowrap;
  color: var(--rose-deep);
  cursor: pointer;
}
.mode-button[aria-pressed="true"] {
  color: #fff;
  border-color: var(--rose-deep);
  background: linear-gradient(180deg, #e88aa1, #c74f73);
}

.message {
  min-height: 26px;
  margin: 10px 2px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.board-wrap {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 8px 4px 12px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(199, 154, 84, .16) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,245,245,.5));
  border: 1px solid rgba(199, 154, 84, .25);
}

.board {
  --cols: 12;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell-size));
  gap: clamp(3px, .72vw, 5px);
  width: fit-content;
  touch-action: manipulation;
  user-select: none;
}

.cell {
  position: relative;
  width: var(--cell-size);
  height: var(--cell-size);
  border: 1px solid rgba(176, 121, 69, .52);
  border-radius: clamp(6px, 1.6vw, 10px);
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.9), transparent 38%),
    linear-gradient(180deg, var(--closed), var(--closed-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 2px 4px rgba(98, 60, 44, .08);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: calc(var(--cell-size) * .47);
  line-height: 1;
  cursor: pointer;
  outline: none;
}
.cell::after {
  content: "✦";
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: rgba(199, 154, 84, .42);
  font-size: calc(var(--cell-size) * .19);
}
.cell:focus-visible { box-shadow: 0 0 0 3px rgba(217, 111, 141, .34); }
.cell.open {
  background: linear-gradient(180deg, #fffdf8, var(--safe));
  border-color: rgba(199, 154, 84, .32);
  box-shadow: inset 0 1px 6px rgba(154, 109, 65, .08);
  cursor: default;
}
.cell.open::after { content: ""; }
.cell.flagged { color: var(--rose-deep); }
.cell.mine { background: linear-gradient(180deg, #ffe5e4, #efb6ba); }
.cell.boom { background: linear-gradient(180deg, #9b3c47, #642a33); color: #fff; }
.cell.wrong { background: linear-gradient(180deg, #d9d2ca, #c8b6a8); color: var(--danger); }
.cell.n1 { color: #3b75bf; }
.cell.n2 { color: #397b50; }
.cell.n3 { color: #c94e55; }
.cell.n4 { color: #7154a3; }
.cell.n5 { color: #a6533b; }
.cell.n6 { color: #28858e; }
.cell.n7 { color: #3a2821; }
.cell.n8 { color: #8a766f; }

.guide {
  margin-top: 4px;
  padding: 10px 12px 6px;
}
.guide h2,
.best-panel h2 {
  margin: 0 0 6px;
  color: var(--rose-deep);
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  text-align: center;
}
.guide ul { margin: 0; padding-left: 1.3em; color: var(--muted); font-size: 13px; line-height: 1.55; }

.best-panel {
  margin-top: 12px;
  padding: 13px 14px 14px;
  border-radius: var(--radius-lg);
}
.best-panel dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}
.best-panel div {
  padding: 8px 4px;
  text-align: center;
  border: 1px dashed rgba(199, 154, 84, .45);
  border-radius: 14px;
  background: rgba(255,255,255,.46);
}
.best-panel dt { color: var(--muted); font-size: 12px; }
.best-panel dd { margin: 2px 0 0; color: var(--rose-deep); font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 540px) {
  .page-shell { padding-inline: 8px; }
  .hero { padding-inline: 12px; }
  .game-card { padding: 10px; }
  .controls { grid-template-columns: 1fr; }
  .mode-button { width: 100%; }
  .guide ul { font-size: 12.5px; }
  .best-panel dl { gap: 6px; }
}

@media (min-width: 620px) {
  .mobile-break { display: none; }
}