/* Kid-facing screens: home, play, trophies, onboarding.
   Sizes come from tokens.css so a toddler automatically gets bigger targets
   than a five-year-old without any component knowing about ages. */

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.screen--kid {
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--c-paper-2), transparent 70%),
    var(--bg);
}

/* --- Top bar -------------------------------------------------------------
   No progress bar. It read as a countdown to a small child, and it made the
   top of every screen look like a form. See ui/components.js. */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  flex: 0 0 auto;
}

.iconbtn {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--r-pill);
  font-size: 1.25rem;
  color: var(--fg-soft);
  background: var(--bg-raised);
  border: 2px solid var(--border);
}
.iconbtn:active { transform: scale(0.94); }
.iconbtn--round { font-size: 1.5rem; }

/* --- Stage -------------------------------------------------------------- */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4) var(--s-6);
  min-height: 0;
}

/* The trophy screen is the one kid surface allowed to scroll — a growing
   collection is the whole point of it. Activities never scroll. */
.stage--scroll {
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

.stage__hint {
  color: var(--fg-soft);
  font-size: var(--t-sm);
  text-align: center;
}

/* --- Latvian hint ------------------------------------------------------- */

.hint {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: 2px dashed var(--border);
  color: var(--fg-soft);
  font-size: var(--t-sm);
}
.hint__value { font-weight: 700; color: var(--fg); }

/* --- Phonics ------------------------------------------------------------ */

.letter {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-6);
  border-radius: var(--r-xl);
  background: var(--c-sky-pale);
  border: 3px solid var(--c-sky);
}
.letter__big   { font-size: var(--t-2xl); font-weight: 800; line-height: 1; color: var(--c-sky-deep); }
.letter__small { font-size: var(--t-xl); font-weight: 700; color: var(--c-sky-deep); opacity: 0.75; }

/* --- Say it ------------------------------------------------------------- */

.sayit__controls { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }

.recbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  border: 2px solid var(--border);
  font-weight: 600;
}
.recbtn:disabled { opacity: 0.45; }
.recbtn__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-berry);
}
.recbtn.is-recording { border-color: var(--c-berry); }
.recbtn.is-recording .recbtn__dot { animation: rec-pulse 1s ease-in-out infinite; }

@keyframes rec-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.5; }
}

/* --- Home --------------------------------------------------------------- */

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-4) var(--s-8);
  text-align: center;
}
/* A soft disc behind the pet. Without it a pale character (the dragon, the
   penguin) all but vanishes against the cream background. */
.home__pet {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(11rem, 42vw, 15rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, var(--bg-raised) 0%, var(--c-paper-2) 62%, transparent 72%);
  box-shadow: inset 0 0 0 3px rgba(255, 183, 3, 0.25);
}
.home__zzz {
  position: absolute;
  top: 14%;
  right: 16%;
  font-size: 1.5rem;
  animation: pet-zzz 2.6s ease-in-out infinite;
}

.home__actions { display: flex; flex-direction: column; gap: var(--s-3); width: min(22rem, 100%); }
.home__actions .btn { width: 100%; }
.home__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-paper-2);
  font-weight: 600;
  color: var(--fg-soft);
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-size: var(--t-xl);
  font-weight: 800;
}
.title__emoji { font-size: 1.1em; }

.footer-version {
  padding: var(--s-3);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
}

/* --- Profile / pet pickers (onboarding) --------------------------------- */

.picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--s-3);
  width: min(34rem, 100%);
}
.picker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 3px solid var(--border);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.picker__item.is-selected {
  border-color: var(--c-sun-deep);
  background: var(--c-paper-2);
  transform: scale(1.04);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(22rem, 100%);
  text-align: left;
}
.field__label { font-weight: 700; font-size: var(--t-sm); color: var(--fg-soft); }
.field input[type="text"] {
  font: inherit;
  font-size: var(--t-lg);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 2px solid var(--border);
  background: var(--bg-raised);
  color: var(--fg);
}

.agecard {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 3px solid var(--border);
  text-align: left;
}
.agecard.is-selected { border-color: var(--c-sun-deep); background: var(--c-paper-2); }
.agecard__title { font-size: var(--t-lg); font-weight: 800; }
.agecard__hint { font-size: var(--t-sm); color: var(--fg-soft); }

/* --- Celebration -------------------------------------------------------- */

.celebrate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
}
.celebrate__cards {
  align-items: center;
  width: 100%;
  gap: var(--s-3);
}
.celebrate__sticker {
  font-size: clamp(3.5rem, 15vw, 6rem);
  animation: sticker-in 0.7s var(--ease-bounce);
}
@keyframes sticker-in {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.confetti {
  position: absolute;
  top: -8vh;
  animation: confetti-fall linear forwards;
  will-change: transform;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(115vh) rotate(540deg); opacity: 0.15; }
}

/* --- Co-play card (age 2) ----------------------------------------------- */

.coplay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  max-width: 30rem;
  text-align: center;
}
.coplay__lead { font-size: var(--t-md); color: var(--fg-soft); line-height: 1.5; }
.coplay__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding-left: var(--s-5);
  text-align: left;
  font-size: var(--t-sm);
  color: var(--fg-soft);
}

/* An in-activity nudge to the grown-up. Quiet: it is for the adult reading
   over the child's shoulder, not for the child. */
.coplay-nudge {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-paper-2);
  border: 1px dashed var(--border);
  font-size: var(--t-xs);
  color: var(--fg-soft);
  text-align: center;
}

/* --- The visit -----------------------------------------------------------
   One illustrated place, built once and kept for the whole session. Rounds
   change the caption and what is on the shelf; the frame, the backdrop and the
   pet standing in it never get torn down. See ui/sceneStage.js.

   This replaces the per-round layout the app used to have — a cream field, a
   prompt in Latvian, white cards floating in the middle, rebuilt from scratch
   eighteen times a session. */

.visit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  max-width: 46rem;
}

.visit__frame {
  position: relative;
  width: min(40rem, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 3px solid var(--border);
  box-shadow: var(--shadow-2);
  flex: 0 0 auto;
}

/* Backdrops stack here so setMood() can crossfade one over the other: an
   instant swap reads as a new screen, a fade reads as walking somewhere. */
.visit__backdrop { position: absolute; inset: 0; }

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.scene.is-entering { opacity: 0; }

/* The drawn fallback only: real artwork has its own motif. It sits low and to
   one side so a character never lands on top of it. */
.scene:not(.scene--art) .scene__motif {
  position: absolute;
  right: 6%;
  bottom: 4%;
  font-size: clamp(3rem, 16vw, 6rem);
  opacity: 0.22;
}
.scene--art .scene__motif { display: none; }

/* Characters stand ON the ground, not floating in the middle of the picture.
   Every backdrop puts its horizon at roughly 70% height, which is also where
   the caption panel begins — so aligning feet to the bottom of this box lands
   them on the ground in all seven scenes. */
.visit__cast {
  position: absolute;
  inset: 0 0 30% 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-3);
  pointer-events: none;         /* only the shelf is ever tappable */
}
.cast {
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(29, 39, 51, 0.3));
  animation: pet-breathe 3.2s var(--ease-out) infinite;
}
/* Drawn characters carry their own transparent padding, so at nominal size
   they render smaller than the emoji they replace — the same compensation the
   pets need. */
.cast--art { object-fit: contain; transform: scale(1.25); }
.cast.is-pleased { animation: pet-cheer 0.6s var(--ease-bounce) 2; }
.cast.is-corrected { animation: pet-cheer 0.6s var(--ease-bounce) 2; }
.cast.is-pulsing { animation: cast-pulse 0.85s var(--ease-out); }

/* A word's picture standing in the scene while it is introduced. */
.cast--newword { animation: none; }
.cast__word {
  align-self: flex-end;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  border: 2px solid var(--border);
  font-size: var(--t-md);
  font-weight: 800;
}

/* The pet stands in the scene rather than floating over the interface. Its
   own element is moved in here (see pet.dockPet), so every reaction, the
   speech bubble and the accessories keep working unchanged.

   The spot shrink-wraps the pet and its bottom sits on the same ground line as
   the rest of the cast, so the pet stands on the grass instead of hovering
   half-behind the caption panel. */
.visit__petspot {
  position: absolute;
  left: 5%;
  bottom: 30%;
  display: flex;
  align-items: flex-end;
}
.pet[data-place="scene"] {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  font-size: clamp(2.25rem, 7vw, 3.5rem);
}
/* Near the frame's left edge, a bubble centred on the pet hangs off the side
   and gets clipped — the same fix the corner placement needs. */
.pet[data-place="scene"] .pet__bubble {
  left: 0;
  transform: translateX(0) translateY(6px) scale(0.9);
  transform-origin: bottom left;
  max-width: min(50vw, 12rem);
}
.pet[data-place="scene"] .pet__bubble.is-visible {
  transform: translateX(0) translateY(0) scale(1);
}

/* The caption panel.
   Illustrated scenes are busy by design, and the sentence is the thing the
   child has to understand — so it gets its own readable surface rather than
   sitting on whatever happens to be behind it. Without this, dark text lands
   on a sofa in one scene and on a night sky in the next. */
.visit__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg,
    rgba(255, 253, 247, 0) 0%,
    rgba(255, 253, 247, 0.86) 22%,
    rgba(255, 253, 247, 0.96) 100%);
  text-align: center;
}
/* The English line is the prompt. There is no Latvian instruction above it. */
.visit__says {
  font-size: var(--t-md);
  font-weight: 800;
  color: var(--c-ink);
  min-height: 1.4em;
}
.visit__lv {
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
}
.visit__lv[hidden] { display: none; }

/* --- The shelf -----------------------------------------------------------
   What the child can tap. Below the picture rather than inside it, so the
   answers never cover the scene and the tap targets stay full size. */

/* A grid rather than a wrapping row: four props flowing 3-then-1 looks like a
   layout accident, and a child should meet the same shape every time. */
.visit__shelf {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: var(--choice-gap);
  width: 100%;
}
.visit__shelf[data-count="4"] {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 26rem;
}
.visit__shelf:empty { display: none; }

@media (min-width: 640px) {
  .visit__shelf[data-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 46rem;
  }
}

.prop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: var(--s-3);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  border: 3px solid var(--border);
  box-shadow: var(--shadow-1), var(--edge);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast), border-color var(--dur-fast), opacity var(--dur);
}
.prop:active { transform: translateY(4px) scale(0.97); box-shadow: var(--shadow-1); }

/* Things that are only being shown, not offered. No border and no shadow, so
   nothing that cannot be tapped looks like it can be. */
.prop--static {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
.prop--static.is-active { transform: translateY(-6px) scale(1.08); }

.prop__word {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* The item flying out of the shelf into a character's hands. */
.prop__pic--taken { animation: prop-taken 0.42s var(--ease-bounce); }

/* Right: green, a lift, and a pop. */
.prop.is-correct {
  border-color: var(--c-leaf);
  background: var(--c-leaf-pale);
  animation: choice-pop 0.5s var(--ease-bounce);
}
/* Wrong: the prop steps back and fades. No red, no cross, no shake that reads
   as anger — the question simply stays open. */
.prop.is-wrong { animation: choice-nudge 0.45s var(--ease-out); }
.prop.is-out { opacity: 0.32; transform: scale(0.94); }
.prop.is-dimmed { opacity: 0.45; }
.prop.is-hinted { animation: choice-hint 1.2s var(--ease-out) infinite; border-color: var(--c-sun); }

/* Buttons and nudges a round needs below the shelf. */
.visit__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}
.visit__extra:empty { display: none; }

@keyframes choice-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@keyframes choice-nudge {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-7px) rotate(-1.5deg); }
  65%      { transform: translateX(5px) rotate(1deg); }
}
@keyframes choice-hint {
  0%, 100% { box-shadow: var(--shadow-1), var(--edge); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 183, 3, 0.35), var(--edge); }
}
@keyframes cast-pulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.06); }
}
@keyframes prop-taken {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-40px) scale(0.5); opacity: 0.2; }
}

/* Landscape on a phone is short. The frame gives up height first, because the
   shelf has to stay reachable and its targets must not shrink. */
@media (orientation: landscape) and (max-height: 560px) {
  .visit { gap: var(--s-3); }
  .visit__frame { width: min(30rem, 100%); }
  .visit__says { font-size: var(--t-sm); }
}