/* Turtle Steps: its own look (a soft garden of greens and tans, smooth tan stones with dark green arrows).
   Calm by design: soft colors, slow smooth motion (0.4 to 0.8 s, ease in and out), one thing moving at a time,
   nothing flashes. Sizes of the garden, the plan slots and the stones are set by game.js to fit the screen. */
:root {
  --paper: #eef5df;
  --card: #fbfdf5;
  --ink: #2f3a24;
  --soft: #5f6b4f;
  --leaf: #4f9a3e;
  --leaf-d: #33702a;
  --grass-a: #d5e9b6;
  --grass-b: #c8e1a3;
  --soil: #b98f5c;
  --stone: #e7dcc5;
  --stone-d: #a8957a;
  --sun: #f2c55c;
  --path: #e9d7a8;
  --radius: 20px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: radial-gradient(circle at 88% 6%, #f7fbeb 0 16%, transparent 17%), var(--paper);
  color: var(--ink);
  font: 500 18px/1.45 'Fredoka', system-ui, sans-serif;
  overscroll-behavior: none;
  overflow-x: hidden;
}
h1, h2 { font-weight: 700; line-height: 1.1; margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: #2c6b8f; }

/* top bar */
.top { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 16px 6px; min-height: 64px; }
.grow { flex: 1; }
.brand img { display: block; width: 40px; height: 40px; }
.back, .round {
  min-height: 48px; min-width: 48px; border: 3px solid var(--ink); border-radius: 16px; background: var(--card);
  box-shadow: 0 4px 0 var(--ink); font-weight: 700; padding: 6px; display: inline-flex; align-items: center; justify-content: center;
}
.back:active, .round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
#sound .mute { display: none; }
#sound[aria-pressed='false'] .mute { display: inline; }
#sound[aria-pressed='false'] .waves { display: none; }

main { max-width: 1600px; margin: 0 auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.screen { display: grid; gap: 18px; }

/* stones: smooth tan pebbles with a dark green arrow; the arrow turns to its way */
.stone {
  display: grid; place-items: center; position: relative; padding: 0; color: var(--leaf-d);
  border: 3px solid var(--stone-d); border-radius: 38%; background: radial-gradient(circle at 35% 28%, #fbf6ea 0 22%, var(--stone) 60%);
  box-shadow: inset 0 -5px 0 #0000001a, 0 4px 0 var(--stone-d);
}
.stone svg { width: 62%; height: 62%; }
.stone[data-dir='up'] > svg, .hole[data-dir='up'] svg { transform: rotate(-90deg); }
.stone[data-dir='down'] > svg, .hole[data-dir='down'] svg { transform: rotate(90deg); }
.stone[data-dir='left'] > svg, .hole[data-dir='left'] svg { transform: rotate(180deg); }
.stone.sm { width: 46px; height: 46px; }

/* home */
.hero { text-align: center; display: grid; gap: 8px; padding-top: 4px; }
.hero h1 { font-size: clamp(34px, 9vw, 52px); }
.lede { margin: 0; font-size: 20px; color: var(--soft); }
.demo { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 6px; }
.demo > img { width: 72px; height: 72px; }
.mini-stones { display: flex; gap: 6px; }
.big {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 76px;
  border: 3px solid var(--ink); border-radius: 24px; font-size: 30px; font-weight: 700; box-shadow: 0 7px 0 var(--ink); padding: 10px 20px;
}
.big:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.big.go { background: var(--leaf); color: #fff; text-shadow: 0 2px 0 #0003; }
.big.plain { background: var(--card); font-size: 24px; min-height: 64px; }
.pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick legend { font-weight: 700; font-size: 18px; margin-bottom: 8px; padding: 0; }
.pick button {
  border: 3px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--ink); padding: 10px 6px;
  display: grid; justify-items: center; gap: 4px; font-weight: 700; font-size: 18px; min-height: 80px; line-height: 1.15;
}
.pick button small { font-size: 14px; font-weight: 500; color: var(--soft); }
.pick button[aria-pressed='true'] { background: #e1f1d6; border-color: var(--leaf-d); box-shadow: 0 4px 0 var(--leaf-d); outline: 3px solid var(--leaf); outline-offset: 1px; }
.pick button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.mini-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: 40px; height: 40px; border: 2px solid var(--soil); border-radius: 6px; overflow: hidden; }
.mini-grid i { background: var(--grass-a); }
.mini-grid i.b { background: var(--grass-b); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; }
.chips button { display: inline-flex; min-height: 48px; padding: 6px 14px; align-items: center; }

.grownups, .about { background: var(--card); border: 3px solid var(--ink); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 5px 0 #2f3a2433; }
.grownups summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.grownups p, .about p { margin: 10px 0 0; }
.about h2 { font-size: 22px; }
.small { font-size: 14px; color: var(--soft); }
.grown-text, .parents { display: grid; gap: 8px; }
.grown-text h2, .parents h2 { margin: 8px 0 0; }
.grown-text h3 { margin: 6px 0 0; font-size: 19px; }
.grown-text p, .parents p { margin: 0; }

/* play */
#play-screen { gap: 12px; }
.dots { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.dots li { width: 16px; height: 16px; border-radius: 50%; background: #dfe9cb; border: 2px solid #a9bd8a; }
.dots li.now { background: var(--sun); border-color: var(--ink); }
.dots li.done { background: var(--leaf); border-color: var(--leaf-d); }
.board { display: grid; gap: 12px; justify-items: center; }
.controls { display: grid; gap: 12px; justify-items: center; width: 100%; }
#play-screen.side .board { grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; }

/* the garden: a square of soft grass with a soil border; Tully sits on top and moves a square at a time */
.garden {
  --n: 3; position: relative; width: var(--garden, 300px); height: var(--garden, 300px); display: grid;
  grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  border: 6px solid var(--soil); border-radius: 18px; box-shadow: 0 6px 0 #8a683f55; box-sizing: content-box; overflow: hidden; background: var(--grass-a);
}
.cell { display: grid; place-items: center; position: relative; }
.cell.a { background: var(--grass-a); }
.cell.b { background: var(--grass-b); }
.cell img { width: 72%; height: 72%; }
.cell.flower img { width: 60%; height: 60%; }
.cell.trod::before { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: var(--path); }
.cell.trod img { position: relative; }
.tully { position: absolute; left: 0; top: 0; width: calc(100% / var(--n)); height: calc(100% / var(--n)); padding: calc(var(--garden, 300px) / var(--n) * .08); z-index: 2; pointer-events: none; }

/* what the voice said, for grown-ups reading along */
.line { margin: 0; min-height: 2.6em; text-align: center; font-size: 19px; font-weight: 600; color: var(--soft); max-width: 30em; }
.made-it .line { color: var(--leaf-d); }

/* the plan strip: stone slots in a row */
.plan { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px; border-radius: 18px; background: #e3d3b0; box-shadow: inset 0 3px 6px #7a5a2e33; }
.slot { width: var(--slot, 60px); height: var(--slot, 60px); border-radius: 38%; display: grid; place-items: center; background: #d4c09a; box-shadow: inset 0 3px 6px #7a5a2e55; }
.slot.full { border: 3px solid var(--stone-d); background: radial-gradient(circle at 35% 28%, #fbf6ea 0 22%, var(--stone) 60%); color: var(--leaf-d); box-shadow: 0 3px 0 var(--stone-d); padding: 0; }
.slot.full > svg { width: 62%; height: 62%; }
.slot.full[data-dir='up'] > svg { transform: rotate(-90deg); }
.slot.full[data-dir='down'] > svg { transform: rotate(90deg); }
.slot.full[data-dir='left'] > svg { transform: rotate(180deg); }
.slot.want { outline: 4px dashed var(--sun); outline-offset: 1px; }
.slot.land { animation: land .45s ease-in-out; }
/* the stone being run: a still, soft outline (no red, nothing flashes). The one to look at again gets the spotlight
   (class hint: the screen dims around it, spotlight.js). */
.slot.run { outline: 5px solid #8cc56f; outline-offset: 2px; }

/* repeat stones: a loop sign and a number, with a hole for one arrow */
.rep { grid-template-columns: auto auto; gap: 1px; align-content: center; justify-content: center; }
.rep-n { display: grid; place-items: center; position: relative; width: 1.6em; height: 1.6em; font-size: calc(var(--s, 60px) * .3); }
.rep-n .loop { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--soil); }
.rep-n b { position: relative; color: var(--ink); font-size: 1em; }
.hole { display: grid; place-items: center; width: calc(var(--s, 60px) * .42); height: calc(var(--s, 60px) * .42); border-radius: 50%; background: #d4c09a; box-shadow: inset 0 2px 4px #7a5a2e55; }
.hole svg { width: 80%; height: 80%; }
.slot.rep { --s: var(--slot, 60px); }
.tray .rep { --s: var(--stone, 72px); }
.tray .rep .hole { border: 2px dashed var(--stone-d); background: transparent; box-shadow: none; }

/* the tray: arrows in a cross, repeat stones in the top corners, Go on the right */
.tray {
  display: grid; gap: 8px; grid-template-columns: repeat(3, var(--stone, 72px)) calc(var(--stone, 72px) * 1.2);
  grid-template-rows: repeat(2, var(--stone, 72px)); grid-template-areas: 'r2 up r3 go' 'left down right go';
}
.tray-stone { width: var(--stone, 72px); height: var(--stone, 72px); touch-action: none; transition: box-shadow .5s ease-in-out; }
.tray-stone:active { transform: translateY(3px); }
.tray-stone.dragging { z-index: 20; box-shadow: 0 14px 16px #0003; }
/* The hint: the screen dims around it (spotlight.js, Doug's standing rule Oct 6: no circles). */
.go-stone {
  height: 100%; width: 100%; border-radius: 28px; background: var(--leaf); border-color: var(--leaf-d); color: #fff;
  box-shadow: inset 0 -6px 0 #0002, 0 5px 0 var(--leaf-d); font-size: 26px; font-weight: 700; gap: 0; align-content: center; text-shadow: 0 2px 0 #0003;
}
.go-stone svg { width: 46%; height: auto; }
.go-stone:active { transform: translateY(3px); box-shadow: inset 0 -6px 0 #0002, 0 2px 0 var(--leaf-d); }
.walking .tray, .walking .plan { pointer-events: none; }
.walking .tray { opacity: .75; transition: opacity .5s ease-in-out; }
.made-it .tray { display: none; }
.next { animation: fade .5s ease-in-out both; max-width: 420px; }

/* finish */
#finish { text-align: center; padding-top: 10px; justify-items: center; }
#finish .big { max-width: 520px; }
.cheer { font-size: clamp(30px, 8vw, 44px); }
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 520px; animation: fade .6s ease-in-out both; }
.path { width: 100%; aspect-ratio: 1; border: 4px solid var(--soil); border-radius: 12px; background: var(--grass-a); }
.talk { margin: 0; background: #f7f2df; border: 2px dashed var(--soil); border-radius: 16px; padding: 12px 14px; text-align: left; font-size: 18px; max-width: 520px; }

/* Evening look (after 6 PM unless a grown-up changes it): dimmer and warmer, same layout. */
body.evening { --paper: #dfe2c6; --card: #eeecd8; background: var(--paper); }
body.evening main, body.evening .top { filter: brightness(.86) sepia(.18); }

/* Motion: slow, smooth, once. Nothing loops or shakes. */
@keyframes fade { from { opacity: 0; } }
@keyframes land { from { opacity: 0; transform: scale(.85); } }

@media (min-width: 700px) {
  .big { max-width: 520px; justify-self: center; }
}
/* wide screens and phones held sideways: the garden beside the plan and the stones */
main.wide { max-width: 1600px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.side .line { font-size: 18px; min-height: 2.4em; }