@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: block;
}

:root {
  --sky: #EAF7F3;
  --paper: #FFFCF3;
  --card: #FFFEFA;
  --outline: #4A3A31;
  --ink: #2D4542;
  --muted: #62716C;
  --sun: #FFCB45;
  --sun-lip: #E29B1E;
  --grass: #A7DA7C;
  --grass-lip: #6BA84A;
  --coral: #FFA184;
  --lip: #DCCBA8;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--sky);
  color: var(--ink);
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#app {
  min-height: 100%;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.screen[hidden] { display: none; }

.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: calc(100vh - 32px);
  min-height: calc(100dvh - 32px);
  gap: 16px;
}

h1 { font-size: 26px; margin: 8px 0 0; }
p { font-size: 18px; color: var(--muted); margin: 0; max-width: 28em; line-height: 1.35; }

.art { width: min(60vw, 240px); aspect-ratio: 1; margin-top: 8vh; }
.art svg { width: 100%; height: 100%; }

form { display: flex; flex-direction: column; gap: 14px; width: min(100%, 360px); }

input {
  font: inherit;
  font-size: 40px;
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
  padding: 14px 8px 14px calc(8px + 0.25em);
  border: 3px solid var(--outline);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink);
  width: 100%;
}

button.big {
  font: inherit;
  font-size: 26px;
  padding: 16px;
  border: 3px solid var(--outline);
  border-radius: 22px;
  background: var(--sun);
  box-shadow: 0 6px 0 var(--sun-lip);
  color: var(--outline);
}

.topline {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--muted);
}

.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--grass-lip); border: 2px solid var(--outline); }
.dot.away { background: var(--coral); }

.obstacle {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  border: 3px solid var(--outline);
  border-radius: 22px;
  overflow: hidden;
}
.obstacle svg { width: 100%; height: 100%; display: block; }

.choices {
  flex: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.choice {
  flex: 1;
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  font: inherit;
  font-size: clamp(34px, 11vw, 56px);
  letter-spacing: 0.04em;
  color: var(--outline);
  background: var(--card);
  border: 3px solid var(--outline);
  border-radius: 26px;
  box-shadow: 0 7px 0 var(--lip);
  touch-action: manipulation;
  transition: transform 60ms ease-out, opacity 150ms;
}
.choice svg { height: 100%; max-height: 110px; aspect-ratio: 1; flex: none; }
.choice span { flex: 1; text-align: left; }
.choice.pressed { transform: translateY(5px); box-shadow: 0 2px 0 var(--lip); background: #FFF4CF; }
.choices.done .choice:not(.pressed) { opacity: 0.35; }
.choices.done .choice { pointer-events: none; }
.choices.done .choice.pressed { opacity: 1; }

/* The grown-up's controls under the choices: small, never in the way. */
.grownup {
  align-self: stretch;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.grownup[hidden] { display: none; }
#finish-line {
  flex-basis: 100%;
  padding: 8px 14px;
  border-radius: 14px;
  background: #FFF4CF;
  border: 2px solid var(--sun-lip);
  font-size: 18px;
  color: var(--outline);
  text-align: center;
}
#finish-line:empty { display: none; }
.art.small-art { width: min(36vw, 140px); margin-top: 2vh; }

button.small, button.quiet {
  font: inherit;
  font-size: 18px;
  min-height: 48px;
  padding: 8px 16px;
  color: var(--outline);
  border-radius: 16px;
  touch-action: manipulation;
}
button.small { background: var(--card); border: 3px solid var(--outline); box-shadow: 0 4px 0 var(--lip); }
button.quiet { background: none; border: none; color: var(--muted); text-decoration: underline; }
button[hidden] { display: none; }

.numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: min(100%, 420px);
  margin-top: 8px;
}
.numbers button, .kind-list button {
  font: inherit;
  color: var(--outline);
  background: var(--card);
  border: 3px solid var(--outline);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--lip);
  touch-action: manipulation;
}
.numbers button {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.numbers strong { font-size: clamp(48px, 16vw, 72px); line-height: 1; }
.numbers span { font-size: 18px; color: var(--muted); }
.numbers button.picked, .kind-list button.picked { background: var(--sun); box-shadow: 0 6px 0 var(--sun-lip); }
.numbers button.picked span { color: var(--outline); }
#finish-ok { width: min(100%, 420px); }

.kind-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100%, 420px);
}
.kind-list button {
  min-height: 88px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}
.kind-list strong { font-size: 32px; letter-spacing: 0.04em; }
.kind-list span { font-size: 17px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .choice { transition: none; }
}