:root {
	color-scheme: light;
	--paper: #f5f3ec;
	--ink: #20251f;
	--muted: #73786f;
	--line: #dcded5;
	--coral: #f16d50;
	--lime: #d8f06c;
	--serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
	--sans: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
.topbar { width: min(1120px, calc(100% - 64px)); height: 76px; margin: auto; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 17px; font-weight: 800; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-size: 12px; transform: rotate(-5deg); }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-name { line-height: 1; }
.brand-byline { color: var(--muted); font-size: 9px; font-weight: 650; line-height: 1; }
.studio-mark { width: 32px; height: 32px; flex: 0 0 auto; }
.brand-accent { color: #9e3e2e; }
.back-link { color: var(--muted); font-size: 12px; text-decoration: none; }
.back-link:hover { color: var(--ink); }
.page-shell { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 40px; }
.game-heading { margin-bottom: 30px; }
.eyebrow { margin: 0 0 9px; color: var(--coral); font-size: 10px; font-weight: 750; letter-spacing: 0.08em; }
h1 { margin: 0 0 9px; font: 500 46px/1.05 var(--serif); letter-spacing: 0; }
.game-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.play-area { padding: 20px; border: 1px solid #dedfd7; background: #fbfaf6; }
.game-topline { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; }
.readout { display: flex; flex-direction: column; gap: 2px; }
.readout-right { align-items: flex-end; }
.readout-label { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 0.1em; }
.readout strong { color: var(--ink); font: 600 21px/1 var(--sans); font-variant-numeric: tabular-nums; }
.restart-button { width: 42px; height: 42px; justify-self: center; border: 1px solid var(--line); background: #f3f4ed; color: var(--ink); font-size: 25px; cursor: pointer; transition: transform 180ms ease, background 180ms ease; }
.restart-button:hover { background: var(--lime); transform: rotate(-35deg); }
.game-status { min-height: 20px; margin: 18px 0 12px; color: var(--muted); font-size: 12px; text-align: center; }
.board-wrap { display: flex; justify-content: center; }
.board { width: min(100%, 432px); display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; padding: 5px; background: #d9dcd2; border: 1px solid #c9cdc1; touch-action: manipulation; }
.cell { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 1px solid #b9c0b3; background: #ecefe7; color: #263a5c; font: 700 clamp(13px, 3.8vw, 18px) var(--sans); cursor: pointer; }
.cell:hover:not(.revealed) { background: #e0e7d6; }
.cell.revealed { border-color: #d9dbd2; background: #f7f6f0; cursor: default; }
.cell.flagged { color: #d5523b; }
.cell.mine-hit { background: #ef9a81; }
.cell[data-count="1"] { color: #357196; }.cell[data-count="2"] { color: #588341; }.cell[data-count="3"] { color: #d0533f; }.cell[data-count="4"] { color: #66508b; }.cell[data-count="5"], .cell[data-count="6"], .cell[data-count="7"], .cell[data-count="8"] { color: #8b4a35; }
.cell:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; z-index: 1; }
.game-actions { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.secondary-button { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 11px; font-weight: 650; cursor: pointer; }
.secondary-button[aria-pressed="true"] { border-color: #b5c18f; background: #edf2df; }
.secondary-button > span { color: var(--coral); font-size: 16px; font-weight: 800; }
kbd { padding: 1px 4px; border: 1px solid var(--line); color: var(--muted); font: 9px var(--sans); }
.hint { color: var(--muted); font-size: 10px; text-align: right; }
.page-footnote { margin: 17px 0 0; color: #858a80; font: italic 13px var(--serif); text-align: center; }
.site-footer { width: min(680px, calc(100% - 40px)); min-height: 56px; margin: 0 auto; display: flex; align-items: center; border-top: 1px solid var(--line); }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 650; text-decoration: none; }
.feedback-link { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 650; text-decoration: none; }
.feedback-link:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 520px) {
	.topbar { width: calc(100% - 32px); height: 64px; }
	.site-footer { width: calc(100% - 24px); }
	.page-shell { width: calc(100% - 24px); padding-top: 35px; }
	h1 { font-size: 40px; }
	.game-heading > p:last-child { max-width: 310px; line-height: 1.5; }
	.play-area { padding: 14px 10px; }
	.board { gap: 2px; padding: 3px; }
	.cell { font-size: clamp(12px, 4.4vw, 17px); }
	.game-actions { align-items: flex-start; }
	.hint { max-width: 140px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }