/* adam.css — Adam's Animal Meadow design tokens + shared chrome (age 4).
   FROZEN KERNEL: game lanes treat this file as read-only; extend per-game
   styles inside your own page <style>, using these tokens.
   Identity: warm sunny meadow — light + modern, never dark. */

:root {
  --meadow-cream: #fff9ee;
  --meadow-grass: #7bc47f;
  --meadow-grass-deep: #4ea258;
  --meadow-sky: #bde7ff;
  --meadow-sun: #ffd166;
  --meadow-coral: #ff8a65;
  --meadow-berry: #b388eb;
  --meadow-ink: #3a3352;
  --card-r: 28px;
  --shadow-soft: 0 8px 24px rgba(58, 51, 82, 0.12);
  --shadow-press: 0 3px 10px rgba(58, 51, 82, 0.16);
}

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

body {
  margin: 0;
  font-family: "Baloo 2", "Fredoka", sans-serif;
  color: var(--meadow-ink);
  background: linear-gradient(
    180deg,
    var(--meadow-sky) 0%,
    var(--meadow-cream) 55%
  );
  min-height: 100vh;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- shared chrome (injected by ADAM.mountChrome) ---- */
.adam-home,
.adam-speak {
  position: fixed;
  top: 12px;
  z-index: 90;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  text-decoration: none;
  background: #ffffffee;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.adam-home {
  left: 12px;
}
.adam-speak {
  right: 12px;
}
.adam-home:active,
.adam-speak:active {
  transform: scale(0.92);
  box-shadow: var(--shadow-press);
}

/* ---- big friendly buttons ---- */
.big-btn {
  min-width: 96px;
  min-height: 96px;
  padding: 18px 30px;
  border: none;
  border-radius: var(--card-r);
  font-family: inherit;
  font-weight: 800;
  font-size: 34px;
  color: #fff;
  background: var(--meadow-grass);
  box-shadow:
    var(--shadow-soft),
    inset 0 -6px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.big-btn:active {
  transform: translateY(3px) scale(0.97);
  box-shadow: var(--shadow-press);
}
.big-btn.sun {
  background: var(--meadow-sun);
  color: var(--meadow-ink);
}
.big-btn.coral {
  background: var(--meadow-coral);
}
.big-btn.berry {
  background: var(--meadow-berry);
}

/* ---- choice cards (2-4 huge targets) ---- */
.choices {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  width: min(560px, 92vw);
  margin: 0 auto;
}
.choice {
  min-height: 130px;
  border: none;
  border-radius: var(--card-r);
  background: #fff;
  box-shadow: var(--shadow-soft);
  font-family: inherit;
  font-weight: 800;
  font-size: 56px;
  color: var(--meadow-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.choice:active {
  transform: scale(0.95);
}
.choice.good {
  background: var(--meadow-grass);
  color: #fff;
}

/* wrong tap = gentle wiggle, never a harsh fail state */
@keyframes adam-wiggle {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  25% {
    transform: translateX(-7px) rotate(-2deg);
  }
  75% {
    transform: translateX(7px) rotate(2deg);
  }
}
.wiggle {
  animation: adam-wiggle 0.4s ease 2;
}

@keyframes adam-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
.pop {
  animation: adam-pop 0.45s ease;
}

/* ---- start overlay (one big tap = start + audio unlock) ---- */
.start-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: linear-gradient(180deg, var(--meadow-sky), var(--meadow-cream));
  text-align: center;
  padding: 20px;
}
.start-overlay h1 {
  font-size: clamp(34px, 9vw, 56px);
  margin: 0;
}
.start-overlay .go {
  width: min(320px, 80vw);
  min-height: 120px;
  font-size: 44px;
}

/* ---- end-of-game celebration ---- */
.done-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #fff9eef2;
  text-align: center;
  padding: 20px;
}
.done-overlay.show {
  display: flex;
}
.done-overlay .big-emoji {
  font-size: 96px;
}
.done-overlay .coach-return {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 3px solid var(--meadow-ink);
  border-radius: 999px;
  color: var(--meadow-ink);
  font-family: "Baloo 2", sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}
.done-overlay .coach-return:focus-visible {
  outline: 3px solid var(--meadow-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wiggle,
  .pop {
    animation: none;
  }
}