/* Sun Clock Garden: its own look (a garden clock under a sky that follows the time). Soft greens and cream, a sky
   that changes slowly, hands that glide. A big-kid game, but the motion stays calm: 0.4 to 0.8 s, nothing loops. */
:root {
  --paper: #eef7e4;
  --card: #fffdf7;
  --ink: #2f3b2a;
  --soft: #5f6f55;
  --leaf: #4f9a3c;
  --leaf-d: #357a27;
  --sun: #f6c445;
  --bud: #a9d48f;
  --clock: min(calc(100vw - 64px), 46dvh, 440px);
  color-scheme: light;
}

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

/* 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 { display: inline-flex; }
.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); display: inline-flex; align-items: center; justify-content: center; padding: 6px;
}
.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; }

/* big buttons */
.big {
  min-height: 72px; border: 3px solid var(--ink); border-radius: 22px; background: var(--card); box-shadow: 0 5px 0 var(--ink);
  font-size: 26px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 20px;
}
.big:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.big.go { background: var(--leaf); color: #fff; }
.big.plain { background: var(--card); }
.big:disabled { opacity: .55; }

/* home */
.hero { display: flex; gap: 14px; align-items: center; padding-top: 4px; }
.hero h1 { font-size: clamp(30px, 8vw, 44px); }
.lede { margin: 6px 0 0; color: var(--soft); }
.pick { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.pick legend { font-weight: 700; margin-bottom: 8px; }
.levels { grid-template-columns: repeat(2, 1fr); }
.levels button {
  position: relative; min-height: 112px; text-align: left; border: 3px solid var(--ink); border-radius: 18px; background: var(--card);
  padding: 12px 12px 12px 54px; display: grid; align-content: center; gap: 2px; box-shadow: 0 4px 0 #2f3b2a55;
}
.levels button[aria-pressed='true'] { background: #dff0cf; box-shadow: 0 4px 0 var(--ink); }
/* The level number on its own, no circle around it (Doug, Oct 6: numbers in circles add a confusing extra shape). */
.levels .lv { position: absolute; left: 14px; top: 12px; color: var(--leaf-d); font-size: 26px; line-height: 1; font-weight: 700; }
.levels b { font-size: 20px; }
.levels small { color: var(--soft); font-size: 15px; line-height: 1.25; }
.levels .age { font-weight: 600; color: var(--leaf-d); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 48px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); padding: 6px 14px; }
.chips button[aria-pressed='true'] { background: #dff0cf; font-weight: 700; }
.grownups { background: var(--card); border: 2px solid #2f3b2a33; border-radius: 18px; padding: 12px 16px; }
.grownups summary { font-weight: 700; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.grownups p { margin: 10px 0; }
.small { font-size: 15px; color: var(--soft); }
.about { background: var(--card); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.about h2 { font-size: 22px; margin-top: 6px; }
.about h3 { font-size: 18px; }
.about p, .about ul { margin: 0; }
.about ul { padding-left: 22px; display: grid; gap: 6px; }

/* play: card and buttons above and below the clock on a phone; side by side when the screen is wide */
#play-screen { gap: 0; }
.play { display: grid; gap: 12px; justify-items: center; }
.side { width: 100%; display: grid; gap: 10px; }
.bar { display: flex; align-items: center; gap: 10px; }
.dots { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex: 1; flex-wrap: wrap; }
.dots li { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--leaf-d); background: var(--card); transition: background .5s ease-in-out; }
.dots li.done { background: var(--leaf); }
.dots li.now { background: var(--sun); border-color: var(--ink); }
.score-chip { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--card); border: 2px solid var(--ink); font-weight: 600; white-space: nowrap; }

.card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--card); border: 3px solid var(--ink);
  border-radius: 20px; padding: 10px 10px 10px 12px; position: relative; min-height: 76px;
}
.card.arrive { animation: arrive .5s ease-in-out; }
@keyframes arrive { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.card .bee { position: absolute; top: -18px; left: -6px; width: 36px; height: 36px; }
.card-pic { display: grid; place-items: center; min-width: 48px; }
.card-pic img { width: 52px; height: 52px; }
.ask { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; }

/* the sky behind the clock: it follows the time set (night, dawn, day, dusk), slowly */
.sky {
  position: relative; width: calc(var(--clock) + 24px); border-radius: 28px; padding: 12px; display: grid; place-items: center;
  background: var(--sky); transition: background-color .8s ease-in-out; background-color: var(--sky); --sky: #bfe3f7;
}
.sky[data-sky='dawn'] { --sky: #ffd9b3; }
.sky[data-sky='day'] { --sky: #bfe3f7; }
.sky[data-sky='dusk'] { --sky: #f4b9a0; }
.sky[data-sky='night'] { --sky: #3d4a7a; }
.orb {
  position: absolute; top: 8px; left: var(--x, 50%); width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: var(--sun); box-shadow: 0 0 0 5px #f6c44555; transition: left .8s ease-in-out;
}
.orb[data-moon='true'] { background: #f1efe2; box-shadow: inset -7px -3px 0 #c9c6b4; }
.readout {
  position: absolute; right: 10px; bottom: 10px; min-width: 64px; padding: 2px 10px; border-radius: 12px; background: #fffdf7e6;
  border: 2px solid var(--ink); font-weight: 700; font-size: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.readout:empty { display: none; }

.clock { width: var(--clock); height: var(--clock); display: block; touch-action: none; overflow: visible; }
.clock.can-turn { cursor: grab; }
.clock.turning { cursor: grabbing; }
.clock .rim { fill: #fffdf7; stroke: var(--ink); stroke-width: 5; }
.clock .face { fill: #fffdf7; }
.clock .bed { fill: #cfe8bb; }
.clock .blade { fill: none; stroke: #7cbf5e; stroke-width: 2.4; stroke-linecap: round; }
.clock .tick { stroke: #2f3b2a88; stroke-width: 1.4; }
.clock .tick.five { stroke: var(--ink); stroke-width: 3; }
.clock .num { font: 700 17px 'Fredoka', sans-serif; fill: var(--ink); }
.clock .fives { font: 600 10px 'Fredoka', sans-serif; fill: #b0561f; opacity: 0; transition: opacity .6s ease-in-out; }
.clock.counting .fives { opacity: 1; }
.clock.counting .tick.five { stroke: #b0561f; }
.clock .hour path { fill: var(--ink); }
.clock .minute path { fill: var(--leaf-d); }
.clock .knob { fill: #fffdf766; stroke: var(--leaf-d); stroke-width: 3; opacity: 0; }
.clock.can-turn .knob { opacity: 1; }
.clock .cap { fill: var(--sun); stroke: var(--ink); stroke-width: 2; }
.clock .bud-dot { fill: var(--bud); stroke: var(--leaf-d); stroke-width: 1.5; }
.clock .bloom { transform: scale(.2); opacity: 0; transform-box: fill-box; transform-origin: center; }
.clock .bud.open .bloom { transform: scale(1); opacity: 1; transition: transform .7s ease-in-out, opacity .7s ease-in-out; }
.clock .bud.open .bud-dot { opacity: 0; }
.sky[data-sky='night'] .clock .rim { stroke: #fffdf7; }

/* one-thumb buttons, the Plant button, the three reading cards */
.setter { display: grid; gap: 10px; }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.steps button {
  min-height: 60px; border: 3px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 0 4px 0 var(--ink);
  display: grid; place-items: center; align-content: center; line-height: 1; padding: 4px;
}
.steps button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.steps b { font-size: 24px; }
.steps small { font-size: 13px; color: var(--soft); }
.plant { width: 100%; min-height: 64px; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.options button {
  min-height: 76px; border: 3px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--ink);
  font-size: clamp(20px, 6vw, 28px); font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px; line-height: 1.1;
  transition: opacity .5s ease-in-out, background-color .5s ease-in-out;
}
.options button:disabled { opacity: .4; box-shadow: none; }
.options button.right { background: #dff0cf; }
/* The hint: the screen dims around it (spotlight.js, Doug's standing rule Oct 6: no circles). */
.hint-line { margin: 0; min-height: 1.4em; font-size: 18px; line-height: 1.35; text-align: center; }
.next { width: 100%; }

/* all done */
#finish { text-align: center; justify-items: center; padding-top: 12px; }
.cheer { font-size: 44px; color: var(--leaf-d); }
.final { margin: 0; font-size: 26px; font-weight: 700; }
.bouquet { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.posy { display: grid; justify-items: center; font-size: 13px; color: var(--soft); width: 64px; }
.talk { margin: 0; background: var(--card); border-radius: 18px; padding: 14px 16px; border: 2px dashed var(--leaf); max-width: 520px; }
#finish .big { width: min(100%, 420px); }

/* evening: dimmer and warmer (rule 4) */
body.evening { --paper: #e2e3cc; --card: #f3eedb; }
body.evening main, body.evening .top { filter: brightness(.88) sepia(.18); }

/* wide screens and phones on their side: the clock on the left, the card and buttons on the right */
@media (orientation: landscape) and (min-width: 640px) {
  :root { --clock: min(calc(100dvh - 120px), 46vw, 520px); }
  main { max-width: 1600px; }
  .play { grid-template-columns: auto minmax(280px, 420px); grid-template-rows: auto 1fr; align-items: start; column-gap: 20px; justify-content: center; }
  .sky { grid-column: 1; grid-row: 1 / span 2; }
  .side { grid-column: 2; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .top { min-height: 52px; padding-top: max(4px, env(safe-area-inset-top)); }
  :root { --clock: min(calc(100dvh - 84px), 46vw); }
  .card { min-height: 60px; padding: 6px 8px; }
  .ask { font-size: 17px; }
  .steps button { min-height: 52px; }
  .plant, .big.next { min-height: 56px; font-size: 22px; }
  .options button { min-height: 60px; }
  .hint-line { font-size: 15px; }
}
@media (max-width: 360px) {
  .levels button { padding-left: 48px; min-height: 104px; }
  .levels .lv { left: 9px; }
}