:root {
  color-scheme: light;
  --paper: #f7f2e8;
  --paper-deep: #efe6d6;
  --ink: #23342c;
  --muted: #4c5a52;
  --line: #d8cebd;
  --board: #d9b77b;
  --board-dark: #ae8050;
  --leaf: #3f704d;
  --leaf-dark: #2f533c;
  --mango: #d97738;
  --sun: #f2c45f;
  --cream: #fffaf0;
  --focus: #174b37;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(241, 196, 102, .18), transparent 22rem),
    var(--paper);
}

button { font: inherit; }
button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.page-shell { width: min(1120px, calc(100% - 56px)); margin: 0 auto; padding: 28px 0; }
.masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 18px; }
.kicker { margin: 0 0 13px; color: var(--leaf-dark); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 560px; margin-bottom: 10px; font-size: clamp(2.45rem, 4vw, 4rem); line-height: .93; letter-spacing: -.055em; font-weight: 800; }
.intro { max-width: 540px; margin-bottom: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.action-button {
  min-height: 52px; padding: 0 20px; border: 1px solid var(--leaf-dark); border-radius: 999px; color: var(--cream); background: var(--leaf-dark); box-shadow: 0 4px 0 #1e3829;
  cursor: pointer; font-weight: 800; white-space: nowrap; transition: transform .15s ease, background .15s ease;
}
.action-button:hover { background: var(--leaf); transform: translateY(-2px); }
.action-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #1e3829; }

.game-layout { display: grid; grid-template-columns: minmax(0, 760px) 250px; align-items: center; justify-content: space-between; gap: 38px; }
.play-card { min-width: 0; padding: clamp(14px, 2vw, 25px); border: 1px solid rgba(105, 87, 55, .2); border-radius: 28px; background: #ead8b9; box-shadow: 0 18px 38px rgba(81, 62, 34, .11), 0 3px 0 rgba(106, 77, 41, .2); }
.game-meta { display: flex; align-items: center; gap: 24px; min-height: 49px; padding: 1px 3px 15px; }
.score-block { display: grid; gap: 2px; min-width: 80px; }
.score-block--best { padding-left: 22px; border-left: 1px solid rgba(59, 73, 59, .28); }
.meta-label { color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.score-block strong { font-size: 1.45rem; line-height: 1; letter-spacing: -.03em; }
.status-line { margin: 0 0 0 auto; color: var(--leaf-dark); font-size: .83rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.status-line[data-state="gameover"], .status-line[data-state="won"] { color: #8a3f21; }

.canvas-wrap { position: relative; width: 100%; overflow: hidden; border: 1px solid rgba(54, 73, 52, .25); border-radius: 20px; background: #bed5b1; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 5px 0 rgba(97, 72, 39, .14); touch-action: none; }
#game-canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 820; }
.canvas-hint { position: absolute; right: 15px; bottom: 13px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 99px; color: #294936; background: rgba(255, 250, 240, .83); font-size: .68rem; font-weight: 800; letter-spacing: .03em; box-shadow: 0 2px 8px rgba(46, 65, 42, .1); }
.hint-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mango); }

.direction-pad { display: none; grid-template: repeat(2, 52px) / repeat(3, 52px); justify-content: center; gap: 6px; margin: 14px auto 7px; }
.direction-button { display: grid; place-items: center; min-width: 52px; min-height: 52px; border: 1px solid rgba(45, 76, 54, .32); border-radius: 15px; color: var(--leaf-dark); background: rgba(255, 250, 240, .8); box-shadow: 0 3px 0 rgba(67, 77, 53, .17); cursor: pointer; font-size: 1.4rem; font-weight: 800; line-height: 1; transition: background .15s ease, transform .15s ease; }
.direction-button:hover { background: var(--cream); transform: translateY(-2px); }
.direction-button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(67, 77, 53, .17); }
.direction-button--up { grid-column: 2; grid-row: 1; }
.direction-button--left { grid-column: 1; grid-row: 2; }
.direction-button--down { grid-column: 2; grid-row: 2; }
.direction-button--right { grid-column: 3; grid-row: 2; }
.control-note { display: none; margin: 0; color: var(--muted); font-size: .74rem; text-align: center; }
.side-note { align-self: center; padding: 12px 0; }
.side-note__number { margin-bottom: 26px; color: #8a3f21; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.side-note h2 { max-width: 230px; margin-bottom: 16px; font-size: 2rem; line-height: 1.03; letter-spacing: -.045em; }
.side-note > p:not(.side-note__number) { color: var(--muted); font-size: .93rem; line-height: 1.65; }
.legend { display: grid; gap: 11px; margin-top: 32px; padding-top: 19px; border-top: 1px solid var(--line); }
.legend-item { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.legend-swatch { width: 18px; height: 18px; display: inline-block; border-radius: 6px; box-shadow: inset 2px 2px 0 rgba(255,255,255,.32); }
.legend-swatch--serpent { background: var(--leaf); }
.legend-swatch--fruit { border-radius: 50%; background: var(--mango); }
.footer-note { margin-top: 25px; color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 850px) {
  .page-shell { width: min(680px, calc(100% - 32px)); padding-top: 30px; }
  .game-layout { display: block; }
  .direction-pad { display: grid; }
  .control-note { display: block; }
  .side-note { display: none; }
  .footer-note { margin-top: 20px; }
}

@media (max-width: 520px) {
  .page-shell { width: calc(100% - 24px); padding-top: 22px; }
  .masthead { align-items: flex-start; gap: 18px; margin-bottom: 17px; }
  h1 { font-size: 2.55rem; }
  .intro { font-size: .87rem; line-height: 1.4; }
  .action-button { width: 51px; height: 51px; min-height: 51px; padding: 0; font-size: 0; }
  .action-button span { font-size: 1.25rem; }
  .play-card { padding: 10px; border-radius: 21px; }
  .game-meta { gap: 14px; padding-bottom: 10px; }
  .score-block { min-width: 53px; }
  .score-block--best { padding-left: 14px; }
  .status-line { font-size: .65rem; text-align: right; }
  .canvas-wrap { border-radius: 15px; }
  .canvas-hint { right: 9px; bottom: 9px; padding: 6px 8px; font-size: .6rem; }
  .control-note { font-size: .64rem; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}