: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 minmax(140px, 2fr) 1fr; align-items: center; gap: 8px; }
.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 { font: 600 21px/1 var(--sans); font-variant-numeric: tabular-nums; }
.game-status { min-height: 18px; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.board-wrap { display: flex; justify-content: center; margin-top: 16px; }
.board { width: min(100%, 450px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); grid-template-rows: repeat(18, minmax(0, 1fr)); overflow: hidden; border: 1px solid #b4c08a; background-color: #e9efcf; background-image: linear-gradient(#52633712 1px, transparent 1px), linear-gradient(90deg, #52633712 1px, transparent 1px); background-size: calc(100% / 18) calc(100% / 18); outline: 0; }
.board:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.board-cell { min-width: 0; min-height: 0; }
.board-cell.snake-segment { background: #30412e; }.board-cell.snake-head { background: #18281f; box-shadow: inset 0 0 0 2px #d8f06c; }.board-cell.food { position: relative; }
.board-cell.food::before { content: ""; width: 58%; height: 58%; position: absolute; inset: 21%; border-radius: 50%; background: var(--coral); box-shadow: 3px -3px 0 -1px #527044; }
.game-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.action-buttons { display: flex; align-items: center; gap: 8px; }
.primary-button { min-height: 38px; padding: 0 15px; border: 1px solid var(--ink); background: var(--ink); color: #f8f6ee; font-size: 11px; font-weight: 650; cursor: pointer; }
.primary-button:hover { background: #384538; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 22px; cursor: pointer; }
.icon-button:hover { background: var(--lime); }
.hint { margin: 0; color: var(--muted); font-size: 10px; text-align: right; }
.touch-controls { display: none; margin-top: 18px; text-align: center; }
.touch-controls > button, .touch-controls div button { width: 42px; height: 40px; margin: 2px; border: 1px solid #d4d8c8; background: #f1f3e8; color: var(--ink); font-size: 17px; touch-action: manipulation; }
.touch-controls button:active { background: var(--lime); }
.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; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

@media (max-width: 620px) {
	.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; }
	.play-area { padding: 15px 11px; }
	.game-topline { grid-template-columns: 1fr 1.6fr 1fr; }
	.game-status { font-size: 10px; }
	.board-wrap { margin-top: 12px; }
	.game-actions { align-items: flex-start; }
	.hint { max-width: 140px; line-height: 1.5; }
	.touch-controls { display: block; }
}

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