:root {
  --paper: #f5f2e8;
  --paper-strong: #fffdf6;
  --ink: #26332e;
  --muted: #69786f;
  --sage: #8ea68e;
  --sage-dark: #48614f;
  --soil: #9a7356;
  --line: rgba(38, 51, 46, 0.16);
  --shadow: 0 18px 40px rgba(45, 55, 48, 0.14);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif;
  background:
    linear-gradient(90deg, rgba(72, 97, 79, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(72, 97, 79, 0.05) 1px, transparent 1px),
    var(--paper);
  background-size: 36px 36px;
}
button { color: inherit; font: inherit; touch-action: manipulation; }
h1, h2, p { margin: 0; }

.game-shell { width: min(100%, 1120px); margin: 0 auto; padding: 14px 12px 116px; }
.top-hud {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -14px -12px 12px; padding: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(245, 242, 232, 0.92);
  backdrop-filter: blur(16px);
}
.eyebrow { color: var(--soil); font-size: .72rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
h1 { margin-top: 2px; font-family: ui-serif, "Noto Serif TC", Georgia, serif; font-size: 1.72rem; line-height: 1.1; }
h2 { font-family: ui-serif, "Noto Serif TC", Georgia, serif; font-size: 1.36rem; line-height: 1.2; }
.timer {
  min-width: 118px; padding: 9px 12px; text-align: right;
  font-size: 2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 253, 246, 0.82);
}
.control-band, .board-panel, .hint-strip {
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 253, 246, 0.84); box-shadow: var(--shadow);
}
.control-band { display: grid; gap: 10px; padding: 12px; }
.difficulty-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.difficulty-tabs button, .action-row button, .mode-dock button, .modal-actions button {
  min-height: 46px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 253, 246, 0.76); cursor: pointer;
}
.difficulty-tabs button { display: grid; gap: 2px; padding: 8px 6px; text-align: center; }
.difficulty-tabs strong { font-size: .9rem; }
.difficulty-tabs span { color: var(--muted); font-size: .72rem; }
.difficulty-tabs .selected, .mode-dock .active {
  color: #fffdf6; border-color: transparent; background: linear-gradient(135deg, var(--sage-dark), #6f856e);
}
.difficulty-tabs .selected span, .mode-dock .active small { color: rgba(255, 253, 246, .82); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.stats-grid span { min-width: 0; padding: 8px; border-radius: 8px; background: rgba(142, 166, 142, .14); }
.stats-grid b { display: block; color: var(--muted); font-size: .68rem; line-height: 1; }
.stats-grid strong { display: block; margin-top: 4px; overflow: hidden; font-size: 1rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.action-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.action-row button, .modal-actions button { padding: 10px 8px; font-weight: 850; background: rgba(233, 223, 204, .62); }
button:disabled { cursor: not-allowed; opacity: .44; }
.board-panel { margin-top: 12px; overflow: hidden; }
.board-meta { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px; border-bottom: 1px solid var(--line); }
.board-meta span { padding: 5px 8px; color: var(--sage-dark); font-size: .74rem; font-weight: 800; border-radius: 999px; background: rgba(142, 166, 142, .16); }
.board-scroll { max-width: 100%; overflow: auto; padding: 10px; overscroll-behavior: contain; }
.mine-board { display: grid; gap: 3px; width: max-content; min-width: 100%; }
.cell {
  display: grid; place-items: center; width: 30px; aspect-ratio: 1; padding: 0;
  color: var(--ink); font-size: .9rem; font-weight: 900; line-height: 1;
  border: 1px solid rgba(38, 51, 46, .12); border-radius: 6px;
}
.covered {
  background: linear-gradient(145deg, rgba(174, 192, 166, .9), rgba(126, 151, 124, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}
.covered:active { transform: translateY(1px); }
.revealed {
  border-color: rgba(125, 97, 71, .18);
  background: radial-gradient(circle at 38% 34%, rgba(255,253,246,.36), transparent 32%), linear-gradient(145deg, #d5c0a0, #b99572);
}
.flagged { color: #fffdf6; background: linear-gradient(145deg, #b26b4f, #8f4f43); }
.mine { color: #3b302a; font-size: .62rem; background: linear-gradient(145deg, #d8c5a7, #ad7b5c); }
.last-safe { outline: 2px solid rgba(255, 253, 246, .78); outline-offset: -3px; }
.n1 { color: #315f85; } .n2 { color: #3f744f; } .n3 { color: #9c5546; } .n4 { color: #5a5288; }
.n5 { color: #804231; } .n6 { color: #287070; } .n7 { color: #2c2c2c; } .n8 { color: #6b706d; }
.hint-strip { margin-top: 12px; padding: 11px 12px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.mode-dock {
  position: fixed; right: 0; bottom: 0; left: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: rgba(245, 242, 232, .94);
  box-shadow: 0 -14px 34px rgba(45, 55, 48, .14); backdrop-filter: blur(18px);
}
.mode-dock button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; min-height: 68px; padding: 9px 10px; text-align: left; }
.mode-dock button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; font-size: 1.2rem; border-radius: 8px; background: rgba(38, 51, 46, .08); }
.mode-dock strong { align-self: end; font-size: 1.04rem; line-height: 1.1; }
.mode-dock small { align-self: start; color: var(--muted); font-size: .76rem; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: end center;
  padding: 16px 12px calc(96px + env(safe-area-inset-bottom));
  background: rgba(38, 51, 46, .28); backdrop-filter: blur(7px);
}
.modal-backdrop[hidden] { display: none; }
.result-modal { width: min(100%, 430px); padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,253,246,.96); box-shadow: var(--shadow); }
.result-modal h2 { margin-top: 4px; }
.result-time { display: block; margin: 14px 0 8px; font-size: 3.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.result-modal p { color: var(--muted); line-height: 1.6; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.modal-actions button:only-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .game-shell { padding: 22px 22px 128px; }
  .top-hud { margin: -22px -22px 16px; padding: 14px 22px; }
  .control-band { grid-template-columns: 1.2fr 1fr .9fr; align-items: center; }
  .cell { width: 32px; }
  .mode-dock { right: calc((100vw - min(100%, 1120px)) / 2); left: calc((100vw - min(100%, 1120px)) / 2); border-right: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 8px 8px 0 0; }
}