/* Weywa — calm, warm, predictable. Sizes live in custom properties and change in two steps:
   phones (narrow, or short landscape) and very small phones (<= 360 px wide). */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #fbf7f0;
  --card: #ffffff;
  --ink: #23262b;
  --muted: #565a62;
  --line: #e6e0d5;
  --line-strong: #cbc2b3;
  --press: #b9af9e;
  --quiet-bg: #f4f0e9;
  --dim-bg: #ece8e1;
  --dim-ink: #5c6067;
  --accent: #5b45c2;
  --accent-dark: #3f2e97;
  --accent-soft: #ece8fa;
  --stage-bg: #e4eff5;
  --star: #f2b705;
  --star-edge: #b98500;
  --coin: #ee9a4a;      /* token: a round copper coin, clearly not the yellow star */
  --coin-edge: #9a5512;

  /* Colourful Semantics. Text on role backgrounds is --ink; role labels use the -ink shade (AA on -bg). */
  --who: #f08a24;   --who-bg: #fde8d3;   --who-ink: #8a4100;
  --doing: #e3b300; --doing-bg: #fff3c4; --doing-ink: #6b5300;
  --what: #36a25a;  --what-bg: #dcf1e2;  --what-ink: #1e6b37;
  --where: #3c7fe6; --where-bg: #dde9fb; --where-ink: #1d4f99;
  --whom: #8b5cf6;  --whom-bg: #ece5fe;  --whom-ink: #5b2fb8;   /* кого? кому? за кем? */
  --when: #14a3a3;  --when-bg: #d5f2f1;  --when-ink: #0b6262;   /* когда? */
  --why: #e0569a;   --why-bg: #fbe0ed;   --why-ink: #a1215d;    /* почему? зачем? */
  --you: #2b7bff;    --you-bg: #e3eeff;  /* «я / ты»: the child's own animal — the world's marker colour (ground ring + bandana) */
  --feel: #ef6f5c;  --feel-bg: #fde5e1;  --feel-ink: #a3301f;   /* как? (грустно, больно, радостно) */

  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 18px;
  --shadow: 0 1px 0 rgba(70, 50, 20, 0.06), 0 4px 14px rgba(70, 50, 20, 0.08);

  --hdr: 68px;      /* header height */
  --tap: 64px;      /* game touch targets */
  --tap-adult: 56px;
  --gap: 12px;
  --pad: 16px;
  --say: 64px;      /* listen button width */
  --pic: 56px;      /* tile picture */
  --fs: 18px;
  --fs-opt: 22px;   /* option / tile text */
  --fs-strip: 24px; /* sentence strip */
  --fs-label: 14px; /* role labels */
  --fs-title: 22px;
  --opt-pad: 12px 18px;
}

@media (max-width: 600px), (max-height: 560px) {
  :root {
    --hdr: 56px; --tap: 56px; --gap: 8px; --pad: 10px; --say: 56px; --pic: 40px;
    --fs: 16px; --fs-opt: 17px; --fs-strip: 18px; --fs-label: 12px; --fs-title: 18px; --opt-pad: 8px 12px;
  }
}
/* Very short landscape (iPhone SE class, 568x320): the small-phone targets, a lower header. */
@media (orientation: landscape) and (max-height: 360px) {
  :root { --hdr: 48px; --tap: 48px; --tap-adult: 48px; --say: 48px; --pic: 36px; --opt-pad: 5px 8px; }
}
/* Tall portrait phones: the stage is held by the width, so the spare height goes to bigger choices. */
@media (orientation: portrait) and (max-width: 600px) and (min-height: 800px) {
  :root { --tap: 68px; --fs-opt: 19px; --fs-strip: 20px; --gap: 10px; }
  .ask-tiles { --ask-pic: 64px; }
}
@media (max-width: 360px) {
  :root { --hdr: 52px; --tap: 48px; --tap-adult: 48px; --pad: 6px; --say: 48px; --pic: 36px; --opt-pad: 8px 10px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); }
body {
  font: 500 var(--fs)/1.3 var(--font);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
h1, h2, h3, p { margin: 0; }
button, select, input { font: inherit; color: inherit; }
button {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button[aria-disabled="true"] { cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.screen:focus { outline: none; }
img { -webkit-user-drag: none; }

.icon { width: 1.35em; height: 1.35em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.icon-star { fill: var(--star); stroke: var(--star-edge); stroke-width: 1.4; }
.icon-coin { fill: var(--coin); stroke: var(--coin-edge); stroke-width: 1.6; }
[data-icon] { display: inline-flex; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px; border-radius: 16px;
  background: var(--card); border: 2px solid var(--line-strong); box-shadow: 0 3px 0 var(--line-strong);
  font-weight: 750; line-height: 1.15;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn:active:not([aria-disabled="true"]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--press); background: var(--quiet-bg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 3px 0 var(--accent-dark); }
.btn.primary:active:not([aria-disabled="true"]) { background: var(--accent-dark); box-shadow: 0 1px 0 var(--accent-dark); }
.btn.quiet { background: var(--quiet-bg); box-shadow: none; border-color: var(--line); }
.icon-btn { width: var(--tap); padding: 0; flex: none; }
.icon-btn .icon { width: 28px; height: 28px; }

/* Inactive while the film plays: still readable, just flat (no border weight, no elevation). */
.btn[aria-disabled="true"], .act[aria-disabled="true"] {
  background: var(--quiet-bg); border-color: var(--line); box-shadow: none; transform: none;
}
.btn.primary[aria-disabled="true"] { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }

/* ---------- screens ---------- */
#app { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen:not(.on) { visibility: hidden; }
/* Every screen change: a short fade with a slight rise (none with reduced motion, see the end). */
.screen.on.enter { animation: screen-in 0.26s ease-out; }
@keyframes screen-in { 0%, 20% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } } /* (a beat at 0: the 3D stage composites first) */

.bar { flex: none; height: var(--hdr); display: flex; align-items: center; gap: var(--gap); padding: 0 var(--pad); }
.stars, .coins { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: var(--fs-title); font-weight: 800; }
.stars .icon, .coins .icon { width: 1.3em; height: 1.3em; }
.stars.bump .icon { animation: bump 0.5s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---------- home ---------- */
.child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: var(--fs-title); font-weight: 800; }
.avatar {
  flex: none; width: calc(var(--hdr) - 8px); height: calc(var(--hdr) - 8px); border-radius: 50%;
  background: var(--accent-soft); object-fit: contain;
}
.avatar:not([src]) { visibility: hidden; }
.hold {
  position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 14px; border-radius: 14px; color: var(--muted);
  background: transparent; border: 2px solid var(--line);
}
.hold > :not(.hold-fill) { position: relative; }
.hold-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; font-size: 15px; font-weight: 700; }
.hold-text small { font-size: 12px; font-weight: 600; }
.hold-fill { position: absolute; inset: 0; background: var(--accent-soft); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.hold.holding .hold-fill { transform: scaleX(1); transition: transform var(--hold, 1.5s) linear; } /* --hold set by JS */
.home-foot { flex: none; display: flex; justify-content: space-between; gap: var(--gap); padding: var(--gap) var(--pad) var(--pad); }
/* Rewards entry: clearly there, but quieter than «Играем дальше». */
.coin-btn { min-width: 0; padding: 0 14px; background: #fff6ec; border-color: #efc79d; box-shadow: 0 3px 0 #efc79d; }
.coin-btn .icon { width: 28px; height: 28px; }
.coin-btn .coin-count { padding: 1px 9px; border-radius: 999px; background: var(--card); font-size: var(--fs-title); font-weight: 800; }
@media (max-width: 420px) { .coin-label { display: none; } }

.map { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--pad) var(--pad); }
#hero-wrap, .home-list { max-width: 1180px; margin: 0 auto; }
.lessons, .tracks {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}
/* The track tiles, laid out on purpose at every width: one column, two (an odd last one centred)
   or three (a short last row centred), whatever the number of tracks. */
.home-list { container-type: inline-size; }
.tracks { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 552px) {
  .tracks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tracks > li { grid-column: span 2; }
  .tracks > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@container (min-width: 852px) {
  .tracks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tracks > li, .tracks > li:last-child:nth-child(odd) { grid-column: span 2; }
  .tracks > li:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; } /* one left over */
  .tracks > li:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; } /* two left over */
}
/* Track tiles: a big picture each, then the track's name and goal. */
.track-tile {
  width: 100%; height: 100%; min-height: 112px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-align: left;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.track-tile:active { transform: translateY(2px); background: var(--quiet-bg); }
.track-tile.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.track-pic { flex: none; position: relative; width: 84px; height: 84px; border-radius: 18px; background: var(--accent-soft); display: grid; place-items: center; }
.track-img { width: 76px; height: 76px; object-fit: contain; }
.track-img:not([src]) { visibility: hidden; }
.track-pic.two .track-img { position: absolute; width: 58px; height: 58px; }
.track-pic.two .track-img:first-child { left: 0; top: 4px; }
.track-pic.two .track-img:last-child { right: 0; bottom: 4px; }
.track-svg { width: 64px; height: 64px; }
.track-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.track-title { font-size: var(--fs-opt); font-weight: 800; line-height: 1.15; }
.track-goal { font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.track-done { font-size: 14px; font-weight: 750; color: var(--accent-dark); }
.track-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: var(--gap); }
.track-head h2 { font-size: var(--fs-title); font-weight: 800; }
.track-back { padding: 0 14px 0 8px; font-size: 16px; }
.track-back .icon { width: 22px; height: 22px; }

/* Play next: the one big obvious button. */
.hero {
  width: 100%; display: flex; align-items: center; gap: 16px; margin-bottom: calc(var(--gap) + 4px);
  padding: 14px 18px; text-align: left; color: #fff; background: var(--accent); border-radius: 22px;
  box-shadow: 0 4px 0 var(--accent-dark), 0 8px 22px rgba(63, 46, 151, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hero:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-dark); }
.hero-play {
  flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--accent);
}
.hero-play .icon { width: 34px; height: 34px; margin-left: 4px; }
.hero-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hero-kicker { font-size: 15px; font-weight: 700; opacity: 0.92; }
.hero-title { font-size: calc(var(--fs-title) + 6px); font-weight: 800; line-height: 1.1; }

/* Landscape phones: the two footer buttons move up beside the header, and «Играем дальше» becomes
   a column on the left that stays put, so the lesson list gets the full height on the right. */
@media (orientation: landscape) and (max-height: 560px) {
  #home { display: grid; grid-template: "bar foot" auto "map map" minmax(0, 1fr) / minmax(0, 1fr) auto; }
  #home > .bar { grid-area: bar; }
  #home .home-foot { grid-area: foot; align-items: center; padding: 0 var(--pad) 0 0; }
  #home .map { grid-area: map; padding-top: var(--gap); display: grid; grid-template-columns: minmax(150px, 27%) minmax(0, 1fr); align-items: start; gap: var(--gap); }
  #hero-wrap { position: sticky; top: 0; margin: 0; }
  .pets-label, .hold-text small { display: none; } /* the footer sits beside the header here */
  #home .map:has(#hero-wrap[hidden]) { grid-template-columns: minmax(0, 1fr); } /* a track's list: the whole width */
  .hero { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; }
  .hero-play { width: 48px; height: 48px; }
  .hero-play .icon { width: 26px; height: 26px; }
  .hero-title { font-size: var(--fs-title); }
  .home-list { width: 100%; margin: 0; }
}

.card {
  position: relative; width: 100%; height: 100%; min-height: 96px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; column-gap: 12px;
  padding: 14px 12px 14px 14px; text-align: left;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.card:active:not([aria-disabled="true"]) { transform: translateY(2px); background: var(--quiet-bg); }
.card.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.card.mastered { border-color: #b9dfc5; }
.card-num {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 22px; font-weight: 800;
}
.card-num .icon { width: 24px; height: 24px; }
.card-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.card-title { font-size: var(--fs-opt); font-weight: 800; line-height: 1.15; }
.card-mode { color: var(--muted); }
.card-mode .icon { width: 24px; height: 24px; }
.card-foot { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.card-foot.mastered { color: var(--what-ink); }
.card-foot.mastered .icon { width: 20px; height: 20px; stroke-width: 3; }
/* Locked: plainly not available yet, but still friendly (no grey-out of the whole card). */
.card.locked { background: #fdfbf7; border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
.card.locked .card-num { background: var(--quiet-bg); color: var(--muted); }
.card.locked .card-title { color: var(--muted); }
/* «Скоро»: a lesson this device's world cannot show yet — calm, clearly not an error */
.card.soon { background: #f7f5ff; border-style: dashed; border-color: #c9bdf2; box-shadow: none; }
.card-foot.soon { padding: 1px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); }
.soon-head { grid-column: 1 / -1; margin-top: 8px; color: var(--muted); }
.soon-head h3 { margin: 0; font-size: var(--fs); font-weight: 800; }
.soon-head .note { margin: 2px 0 0; }
.card.soon { opacity: 0.8; }
@media (min-width: 601px) and (min-height: 561px) { .card { min-height: 136px; padding: 18px 16px 18px 18px; } }

.mini-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-chip {
  padding: 1px 8px 2px; border-radius: 8px; border: 2px solid var(--c); background: var(--c-bg); color: var(--c-ink);
  font-size: 13px; font-weight: 800; line-height: 1.2;
}
.dots5 { display: inline-flex; gap: 6px; }
.dots5 > span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); }
.dots5 > .yes { background: var(--accent); border-color: var(--accent); }
.dots5 > .no { background: var(--line-strong); }

/* ---------- play ---------- */
.bar-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
/* Long (Russian) titles wrap to a second line rather than being cut off. */
#play-title {
  font-size: var(--fs-title); font-weight: 800; line-height: 1.3; /* 1.2 clips Cyrillic descenders */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (max-width: 600px), (max-height: 560px) { #play-title { font-size: 16px; } .bar-mid { gap: 3px; } }
@media (max-width: 360px) { #play-title { font-size: 15px; } }
.dots { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.dots > li { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); }
.dots > .done { background: var(--accent); border-color: var(--accent); }
.dots > .now { border-color: var(--accent); }

.play-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Stacked layout: the camera frames a wide stage, so the stage is never taller than width / 1.2.
   It takes that height, and gives way (down to 38% of the screen, or the cap if smaller) only
   when the panel needs the room; any height left over goes to the panel, whose content stays
   at the top, right under the picture it is about. */
#stage {
  --stage-cap: calc((100vw - 2 * var(--pad) - env(safe-area-inset-left) - env(safe-area-inset-right)) / 1.2);
  container-type: inline-size;
  position: relative; flex: 0 1 auto; height: var(--stage-cap); min-height: min(38dvh, var(--stage-cap));
  margin: 0 var(--pad);
  border-radius: var(--radius); overflow: hidden; background: var(--stage-bg);
}
#scene { position: absolute; inset: 0; }
/* Portrait (phones and tablets): the stage takes the free height (up to a 3:4 portrait picture) and
   the round's content sits at the bottom, within thumb reach; height the stage cannot use goes
   between them. */
@media (orientation: portrait) {
  .play-main > #stage { flex: 1 1 auto; height: auto; max-height: calc(var(--stage-cap) * 1.6); }
  .play-main > #panel { flex: 0.0001 1 auto; justify-content: flex-end; }
}
/* Under the curtain there is nothing to see: on a portrait phone the stage gives its room to the
   questions (the camera reframes; uncovering brings it back). */
@media (orientation: portrait) and (max-width: 600px) and (max-height: 700px) { /* short phones only: tall ones have the room */
  .play-main > #stage.covered { flex: none; height: min(var(--stage-cap), 20dvh); min-height: 0; }
  .play-main > #stage.cards { flex: none; height: min(var(--stage-cap), 27dvh); min-height: 0; } /* just the picture cards */
}
/* Part -> whole: no scene yet, only the question on the stage. The stage keeps what the question
   needs and the answer pictures get the room (the thing appears full size with the answer). */
@media (orientation: portrait), (min-height: 561px) {
  .play-main > #stage.question { flex: none; height: min(var(--stage-cap), 30dvh); min-height: 0; }
}
@media (min-width: 601px) and (min-height: 561px) {
  /* four answers in one row (the times of day): the picture above the word */
  .ask-tiles:has(> :nth-child(4)) .tile { flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
  .ask-tiles.big { --ask-pic: 120px; }
  .ask-tiles.big .tile { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 12px; text-align: center; }
}
@media (orientation: portrait) and (max-width: 600px), (max-height: 560px) {
  /* two columns of answers; the picture above the word, so even «велосипеда» fits half the width */
  .tiles.ask-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ask-tiles .tile { flex-direction: column; justify-content: center; gap: 2px; padding: 4px 6px; text-align: center; border-left-width: 2px; border-top: 6px solid var(--c); }
  .ask-tiles .tile > span { overflow-wrap: normal; } /* never inside a word: a group that would need it goes to one column (fitTiles) */
  .ask-tiles .tile:has(.time-pic, .place-pic) { flex-direction: row; gap: 6px; text-align: left; } /* short words: the icon beside */
  .ask-text { font-size: calc(var(--fs-opt) + 2px); }
}
/* Phones: four questions or more in the answer strip — the colour says which, the labels make room. */
@media (max-width: 600px), (max-height: 560px) { .strip:has(.chip:nth-child(4)) .chip-role { display: none; } }
@media (max-width: 360px) { .strip:has(.chip:nth-child(3)) .chip-role { display: none; } } /* the narrowest phones: three questions already */
@media (orientation: portrait) and (max-width: 420px) {
  /* five picture answers (every animal + «Никто»): three across, the picture above the name */
  .ask-tiles:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.ask-tiles:has(> :nth-child(5)) .tile { flex-direction: column; justify-content: center; gap: 2px; padding: 4px 2px; text-align: center; }
  .ask-tiles:has(> :nth-child(5)) .tile > span { overflow-wrap: normal; }
}
@media (orientation: landscape) and (max-height: 360px) { /* and smaller words, so they stay one row */
  .strip:has(.chip:nth-child(4)) .chip-text { font-size: 15px; }
  .strip:has(.chip:nth-child(4)) .chip { min-width: 0; padding: 2px 6px 3px; }
}
/* Once the round is done only its result needs room (the answer views keep the panel steady
   while answering; at the end they may go). */
.stack.finished > :not(#done) { display: none; }
/* Long answers (clauses): a smaller strip text, so three of them still fit. */
.strip.compact .chip-text { font-size: var(--fs); }
.strip.compact .chip { padding: 2px 8px 4px; }
@media (orientation: landscape) and (max-height: 360px) {
  .strip.compact .chip-role { display: none; } /* the colour still says which part */
  .ask-text { font-size: var(--fs-opt); }
  .ask-tiles .tile { flex-direction: row; gap: 4px; border-top-width: 4px; padding: 2px 6px; text-align: left; } /* the picture beside the words */
  .ask-line .ask-self { display: none; } /* «Это ты» is on the stage */
  .play-main:has(#stack > .on .ask-tiles > :nth-child(5)) #strip:not(:has(.live .chip:nth-child(2))) { display: none; } /* one question: it is right there */
  .card .mini-chips { display: none; }
}
#replay {
  position: absolute; top: 8px; right: 8px; z-index: 1; width: var(--tap); padding: 0;
  background: rgba(255, 255, 255, 0.94); font-size: 16px;
}
#replay .icon { width: 28px; height: 28px; }
.replay-label { display: none; }
/* Wide stages only: icon + label, still under 20% of the stage width. */
@container (min-width: 1000px) {
  #replay { width: auto; padding: 0 16px; }
  #replay .icon { width: 1.35em; height: 1.35em; }
  .replay-label { display: inline; }
}
#replay[aria-disabled="true"] { background: rgba(244, 240, 233, 0.94); }

#panel {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--gap);
  width: 100%; max-width: 980px; margin: 0 auto; padding: var(--gap) var(--pad) var(--pad);
}
/* Portrait phones: the round's content right under the picture it is about (spare height, if
   any, goes below the choices), and headers get room above them. */
@media (orientation: portrait) and (max-width: 600px) {
  .bar { height: calc(var(--hdr) + 8px); padding-top: 8px; }
}

/* Short landscape (phones): stage left, panel right. */
@media (orientation: landscape) and (max-height: 560px) {
  .play-main { flex-direction: row; gap: var(--gap); padding: 0 var(--pad) var(--pad); }
  #stage { flex: 1 1 0; height: auto; margin: 0; min-height: 0; min-width: 45%; }
  #panel { flex: none; width: min(50%, 520px); margin: 0; padding: 0; justify-content: center; }
}

/* Short landscape phones: the answer strip spans the whole width above stage and choices (one or
   two rows of chips, not three), the choices take all the width the stage can spare (it keeps 45%),
   and under the curtain (nothing to see) the answers get even more of it. */
@media (orientation: landscape) and (max-height: 560px) {
  .play-main {
    display: grid; grid-template-columns: minmax(0, 1fr) min(52%, 520px); grid-template-rows: auto minmax(0, 1fr);
    gap: var(--gap); padding: 0 var(--pad) var(--pad);
  }
  #panel { display: contents; }
  #strip { grid-column: 1 / -1; grid-row: 1; padding-top: 6px; } /* room for the current slot's ring */
  #stage { grid-column: 1; grid-row: 2; height: auto; min-height: 0; min-width: 0; margin: 0; }
  #stack { grid-column: 2; grid-row: 2; align-self: center; min-width: 0; }
  .play-main:has(#stage.covered), .play-main:has(#stage.question), .play-main:has(.part-list:not([hidden])),
  .play-main:has(#stack > .on .ask-tiles > :nth-child(5)) { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  /* five answers with pictures (every animal + «Никто»): three across, the picture above the name */
  .ask-tiles:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ask-tiles:has(> :nth-child(5)) .tile { flex-direction: column; justify-content: center; gap: 2px; padding: 2px 4px; text-align: center; }
  /* picture cards: the stage gets the width for three cards of 96+ px across; the cards show the
     pictures, so the answers are just their words */
  .play-main:has(.cards) { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
  .play-main:has(.cards) .ask-tiles .pic { display: none; }
  .play-main:has(.cards) .tile-wrap > .say { display: none; } /* (the options are read aloud; the cards show the rest) */
  .track-head { flex-direction: row; align-items: center; gap: var(--gap); margin-bottom: 8px; }
  .track-head .track-goal { display: none; } /* the tile said it; here the lessons need the room */
  /* compact lesson cards, so two full rows fit under the track's name */
  .card { padding: 10px; column-gap: 10px; grid-template-columns: auto 1fr; }
  .card-num { width: 40px; height: 40px; }
  .card-mode { display: none; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .play-main { padding: 0 4px 6px; }
  #play .bar { padding: 0 4px; }
}

/* Views of one round share one grid cell, so the panel is as tall as its tallest view and
   nothing moves when the result or the next slot's tiles appear. */
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; min-width: 0; transition: opacity 0.25s ease, visibility 0.25s; }
/* only one view at a time: the one leaving goes at once, the new one fades in (no two instructions over each other) */
.stack > :not(.on) { visibility: hidden; opacity: 0; pointer-events: none; transition: none; }
.stack.swap > * { transition: none; } /* a new round: the last result goes at once, no cross-fade over the answers */
/* the chosen right answer pops; a wrong one gets a calm mark before the pause bar fades in */
.act.right { animation: right-pop 0.35s ease-out; border-color: var(--what); }
@keyframes right-pop { 40% { transform: scale(1.05); } 100% { transform: none; } }
.act.missed { animation: missed-mark 0.5s ease-out; }
@keyframes missed-mark { 0% { box-shadow: 0 0 0 0 var(--line-strong); } 40% { box-shadow: 0 0 0 5px var(--line-strong); } 100% { box-shadow: none; } }
.lock:not([hidden]) { animation: lock-in 0.3s ease-out 0.35s both; }
@keyframes lock-in { from { opacity: 0; } to { opacity: 1; } }
.dots > .done.bump { animation: bump 0.5s ease-out; }
/* the read-out: options not yet read are pale, the one being read glows */
.act.unread { opacity: 0.5; }
/* Leaving a screen hides it at once (else the visibility transition shows the old view for 0.25 s). */
.screen:not(.on) .stack > * { transition: none; }
.hint { align-self: center; justify-self: center; font-size: var(--fs-opt); font-weight: 700; color: var(--muted); }

/* Choose */
.options { display: flex; flex-direction: column; gap: var(--gap); }
.opt-row { display: flex; gap: var(--gap); }
.opt {
  flex: 1; min-width: 0; min-height: var(--tap); padding: var(--opt-pad); text-align: left;
  font-size: var(--fs-opt); font-weight: 750; line-height: 1.15;
  background: var(--card); border: 2px solid var(--line-strong); border-radius: 16px; box-shadow: 0 3px 0 var(--line-strong);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}
.say {
  flex: none; width: var(--say); min-height: var(--tap); display: grid; place-items: center; color: var(--accent);
  background: var(--card); border: 2px solid var(--line-strong); border-radius: 16px; box-shadow: 0 3px 0 var(--line-strong);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.say .icon { width: 28px; height: 28px; }
.no-voice .say { display: none; }
.opt:active:not([aria-disabled="true"]), .say:active:not([aria-disabled="true"]), .tile:active:not([aria-disabled="true"]) {
  transform: translateY(2px); box-shadow: 0 1px 0 var(--press); background: var(--quiet-bg);
}
.opt.reading { border-color: var(--accent); background: var(--accent-soft); }
/* A wrong pick fades back and stays out of the way (text still legible: 5:1). */
.act.dim, .act.dim[aria-disabled="true"] { background: var(--dim-bg); border-color: transparent; color: var(--dim-ink); box-shadow: none; }

/* Build */
.tiles { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-content: start; }
/* Tablets: one row of however many choices the slot has (2 or 3). */
@media (min-width: 601px) and (min-height: 561px) { .tiles { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.tile {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 4px 12px; text-align: left;
  font-size: var(--fs-opt); font-weight: 750; line-height: 1.15;
  background: var(--card); border: 2px solid var(--line-strong); border-left: 8px solid var(--c); border-radius: 16px;
  box-shadow: 0 3px 0 var(--line-strong);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}
.tile[aria-disabled="true"]:not(.dim) { border-left-color: var(--c); }
.tile .pic { width: var(--pic); height: var(--pic); flex: none; object-fit: contain; }
.tile img.pic:not([src]) { visibility: hidden; } /* a thumbnail still loading (the time icons are SVG: always shown) */
.tile.dim .pic { opacity: 0.45; }

/* Sentence strip: chips coloured by role, each with its role label. */
.strip { display: grid; }
.strip > .row {
  grid-area: 1 / 1; display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; align-content: center;
}
.strip > .ghost { visibility: hidden; }
.chip {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 64px; max-width: 100%;
  padding: 3px 10px 5px; border: 3px solid var(--c); border-radius: 14px; background: var(--c-bg);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.chip-role { font-size: var(--fs-label); font-weight: 800; line-height: 1.15; color: var(--c-ink); }
.chip-text { font-size: var(--fs-strip); font-weight: 800; line-height: 1.15; }
.chip.empty {
  min-width: 92px; background: #fdfcfa; border-style: dashed; box-shadow: inset 0 2px 5px rgba(70, 50, 20, 0.14);
}
/* The slot to fill now: solid role border, accent ring that breathes slowly (2.4 s), a "?" in the hole. */
.chip.empty.current {
  border-style: solid; background: var(--card);
  box-shadow: inset 0 2px 5px rgba(70, 50, 20, 0.1), 0 0 0 3px var(--card), 0 0 0 7px var(--accent);
  animation: breathe 2.4s ease-in-out infinite;
}
.chip.empty.current .chip-text::before { content: "?"; color: var(--c-ink); }
@keyframes breathe {
  50% { box-shadow: inset 0 2px 5px rgba(70, 50, 20, 0.1), 0 0 0 3px var(--card), 0 0 0 9px rgba(91, 69, 194, 0.55); }
}
@media (min-width: 601px) and (min-height: 561px) { .chip.empty { min-width: 150px; } }
.fly { position: fixed; z-index: 5; pointer-events: none; font-size: var(--fs-strip); font-weight: 800; line-height: 1.15; color: var(--ink); }
[data-role="who"] { --c: var(--who); --c-bg: var(--who-bg); --c-ink: var(--who-ink); }
[data-role="doing"] { --c: var(--doing); --c-bg: var(--doing-bg); --c-ink: var(--doing-ink); }
[data-role="what"] { --c: var(--what); --c-bg: var(--what-bg); --c-ink: var(--what-ink); }
[data-role="where"] { --c: var(--where); --c-bg: var(--where-bg); --c-ink: var(--where-ink); }
[data-role="whom"] { --c: var(--whom); --c-bg: var(--whom-bg); --c-ink: var(--whom-ink); }
[data-role="when"] { --c: var(--when); --c-bg: var(--when-bg); --c-ink: var(--when-ink); }
[data-role="why"] { --c: var(--why); --c-bg: var(--why-bg); --c-ink: var(--why-ink); }
[data-role="feel"] { --c: var(--feel); --c-bg: var(--feel-bg); --c-ink: var(--feel-ink); }

/* ---------- newer rounds: questions, parts, picture cards ---------- */
/* The question (or instruction) large, with its own listen button. */
.ask-view { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.ask-line { display: flex; align-items: center; gap: var(--gap); }
.ask-text { flex: 1; min-width: 0; font-size: calc(var(--fs-opt) + 4px); font-weight: 800; line-height: 1.2; }
/* Answer pictures large enough to tell the animals (and the times of day) apart: 64 px on tablets
   and computers, 48 px on phones. */
.ask-tiles { --ask-pic: 64px; }
@media (max-width: 600px), (max-height: 560px) { .ask-tiles { --ask-pic: 48px; } }
.ask-tiles .tile .pic { width: var(--ask-pic); height: var(--ask-pic); }
.ask-tiles .tile { min-height: max(var(--tap), calc(var(--ask-pic) + 8px)); }
.tile .time-pic { width: var(--pic); height: var(--pic); flex: none; }
.tile .place-pic { flex: none; }
.ask-view:has(.part-list:not([hidden])) .point-hint { display: none; } /* the list says it */
.tiles.long, .tiles.ask-tiles.long { grid-auto-flow: row; grid-template-columns: 1fr; } /* clause-long tiles (whole sentences): one per row */
.ask-tiles.long .tile { min-height: var(--tap); } /* words only: no picture to make room for */
/* a word-only option: its own small speaker beside it (heard, not read) */
.tile-wrap { display: flex; gap: var(--gap); min-width: 0; }
.tile-wrap > .tile { flex: 1; min-width: 0; }
.tile-wrap > .say { min-height: 0; }
.tile.reading { border-color: var(--accent); background: var(--accent-soft); }
.stack .tile.reading { animation: reading 1.2s ease-in-out infinite; }
@keyframes reading { 50% { box-shadow: 0 0 0 4px var(--accent-soft), 0 3px 0 var(--line-strong); } }
.point-hint { font-size: var(--fs); font-weight: 700; color: var(--muted); }
.list-toggle {
  align-self: flex-start; min-height: var(--tap); padding: 0 12px; border-radius: 12px; border: 2px solid var(--line);
  color: var(--muted); font-size: 15px; font-weight: 700;
}
.part-list { display: flex; flex-wrap: wrap; gap: 8px; }
.part-btn { font-size: 16px; padding: 0 14px; }
/* Over the stage: picture cards, or the question of a part -> whole round. */
.stage-over {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  gap: var(--gap); padding: var(--gap); background: var(--stage-bg);
}
.stage-over.question p { max-width: 20ch; text-align: center; font-size: clamp(22px, 6cqw, 40px); font-weight: 800; line-height: 1.2; }
.pcard {
  flex: 1 1 0; min-width: 0; max-width: 260px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; border-radius: 14px; background: var(--card); border: 3px solid transparent; box-shadow: var(--shadow);
}
.pcard.cur { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.card-img { width: 100%; aspect-ratio: 1; min-width: 0; object-fit: cover; border-radius: 10px; background: var(--stage-bg); }
.card-img:not([src]) { visibility: hidden; }
.pcard-label { font-size: var(--fs); font-weight: 800; }
.pcard-say { font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
/* Narrow phones: three cards across the whole stage (each at least 96 px wide). */
@media (max-width: 600px), (max-height: 560px) { .stage-over.cards { gap: 4px; padding: 4px; } .pcard { padding: 3px; } }

/* Result */
#done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap); }
.say-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-opt); font-weight: 800; color: var(--accent); }
.award .icon { width: 1.4em; height: 1.4em; }
#done.on .award { animation: pop 0.45s ease-out; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#next { min-width: min(100%, 240px); font-size: var(--fs-opt); }

/* ---------- end + no-WebGL ---------- */
#end, #nogl { justify-content: center; align-items: center; overflow-y: auto; }
.end-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  width: min(560px, calc(100% - 2 * var(--pad))); margin: auto; padding: 24px var(--pad);
}
.end-card h1 { font-size: clamp(28px, 6vw, 40px); font-weight: 800; }
.end-card p { font-size: var(--fs-opt); font-weight: 600; }
.end-star .icon { width: clamp(56px, 14vmin, 96px); height: clamp(56px, 14vmin, 96px); }
.unlock { padding: 8px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-dark); }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); width: 100%; margin-top: 8px; }
.end-actions .btn { flex: 1 1 auto; font-size: var(--fs-opt); }
/* the session's end: «Играть ещё» on its own row, the rest in two equal columns (an odd last one spans both) */
#end .end-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#end .end-actions .btn.primary, #end .end-actions.odd #end-home { grid-column: 1 / -1; } /* «Домой» is always the last one shown */
@media (orientation: landscape) and (max-height: 560px) { /* landscape phones: one row of equal buttons */
  #end .end-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  #end .end-actions .btn.primary, #end .end-actions.odd #end-home { grid-column: auto; }
  #end .end-actions .btn { font-size: 17px; padding: 4px 10px; gap: 6px; }
  #end .end-card { width: min(820px, calc(100% - 2 * var(--pad))); }
}
.end-tokens { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.end-earned { display: block; text-align: center; }
.end-earned .end-coin { display: inline-flex; vertical-align: -0.3em; margin-right: 6px; } /* the coin goes with the words when they wrap */
.end-coin .icon { width: 1.6em; height: 1.6em; }
.end-coin.drop .icon { animation: drop 0.5s ease-out; }
@keyframes drop { from { transform: translateY(-14px) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.end-card p.end-balance { font-size: var(--fs); color: var(--muted); }
#end-rewards { background: #fff6ec; border-color: #efc79d; box-shadow: 0 3px 0 #efc79d; }
@media (max-height: 560px) { #end .end-star { display: none; } .end-card { gap: 8px; padding-block: 12px; } }
/* Very short landscape: the words on the left, the buttons stacked on the right. */
@media (orientation: landscape) and (max-height: 360px) {
  #end .end-card { display: grid; grid-template-columns: 1fr minmax(190px, 40%); align-content: center; column-gap: 16px; width: calc(100% - 2 * var(--pad)); }
  #end .end-card > :not(.end-actions) { grid-column: 1; }
  #end .end-card h1 { font-size: 26px; }
  #end .end-card p { font-size: 16px; }
  #end .end-actions { grid-column: 2; grid-row: 1 / span 5; display: flex; flex-direction: column; justify-content: center; margin: 0; gap: 8px; }
  #end .end-actions .btn { flex: none; font-size: 17px; }
}

/* ---------- rewards ---------- */
.bar-title { flex: 1; min-width: 0; font-size: var(--fs-title); font-weight: 800; line-height: 1.3; }
.shop { max-width: 1180px; margin: 0 auto; }
.shop-head { margin: 6px 0 8px; font-size: var(--fs); font-weight: 800; color: var(--muted); }
.shop-grid {
  list-style: none; margin: 0 0 var(--gap); padding: 0; display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.shop-card {
  width: 100%; height: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.shop-card:active:not([aria-disabled="true"]) { transform: translateY(2px); background: var(--quiet-bg); }
/* Not yet: plainly unavailable, still friendly (same language as a locked lesson). */
.shop-card.later { background: #fdfbf7; border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
.shop-pic {
  position: relative; flex: none; width: 84px; height: 84px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.shop-pic.wide { width: 112px; height: 63px; background: var(--stage-bg); }
.shop-pic > .icon { width: 30px; height: 30px; }
.shop-svg { width: 76%; height: 76%; }
.shop-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.shop-pic.wide img { object-fit: cover; }
.shop-pic img:not([src]) { visibility: hidden; }
.shop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.shop-title { font-size: var(--fs-opt); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.shop-blurb { font-size: 15px; font-weight: 600; color: var(--muted); }
.shop-price { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 16px; font-weight: 750; }
.price { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; }
.shop-later { padding: 2px 10px; border-radius: 10px; background: #fff6ec; color: var(--coin-edge); font-size: 15px; font-weight: 750; }
.shop-note { max-width: 560px; margin: 24px auto; padding: 16px; border-radius: var(--radius); text-align: center;
  background: var(--accent-soft); color: var(--accent-dark); font-size: var(--fs-opt); font-weight: 750; }
@media (max-width: 360px) { .shop-pic { width: 64px; height: 64px; } .shop-pic.wide { width: 84px; height: 47px; } }

/* Yes / no for the child: big, plain, two choices. */
#ask {
  width: min(480px, calc(100vw - 16px)); padding: 0; border: 0; border-radius: 22px;
  background: var(--bg); color: var(--ink); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
#ask::backdrop { background: rgba(35, 38, 43, 0.45); }
.ask { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 20px; text-align: center; }
.ask-sub { font-size: var(--fs); font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
.ask-q { font-size: var(--fs-title); font-weight: 800; line-height: 1.25; }
.ask-actions { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: 6px; }
.ask-actions .btn { flex: 1 1 120px; min-height: max(var(--tap), 64px); font-size: var(--fs-opt); }

/* Player: the game fills the screen under a 64 px host strip; a video sits below the strip. */
#player { padding: 0; }
.player-bar {
  position: relative; z-index: 2; flex: none; height: 64px; display: flex; align-items: center; gap: var(--gap);
  padding: 0 max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));
  background: rgba(251, 247, 240, 0.92); border-bottom: 2px solid var(--line);
}
.timer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.timer-track { display: block; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.timer-fill { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform 0.25s linear; }
.timer-text { font-size: 16px; font-weight: 750; line-height: 1.15; color: var(--muted); }
.player-bar.soon .timer-text { color: var(--accent-dark); }
.player-bar.pulse .timer-track { animation: soft-pulse 1.4s ease-in-out 1; }
@keyframes soft-pulse { 50% { opacity: 0.45; } }
#player-stop { flex: none; min-height: 56px; padding: 0 16px; font-size: 16px; }
#player-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--stage-bg); }
#player.video #player-stage {
  position: relative; inset: auto; flex: 1; min-height: 0;
  margin: var(--gap) max(var(--pad), env(safe-area-inset-right)) max(var(--pad), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
  border-radius: var(--radius); background: #24262b;
}
.media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #24262b; }
/* Portrait: the player box takes the video's own shape, centred, with its button right under it. */
@media (orientation: portrait) {
  #player.video { justify-content: flex-start; }
  #player.video #player-stage.sized { flex: none; aspect-ratio: var(--ar); max-height: calc(100% - 200px); margin-top: auto; margin-bottom: auto; transform: translateY(-52px); overflow: visible; background: none; } /* centred with its button (104 px) under it */
  #player.video #player-stage.sized .media { border-radius: var(--radius); }
  #player.video #player-stage.sized .media-btn { top: calc(100% + 16px); bottom: auto; }
  #player.video #player-stage.sized .yt-cover { border-radius: var(--radius); }
}
.shield { position: absolute; inset: 0; }
iframe.media { pointer-events: none; } /* with inert, tabindex -1 and the shield: YouTube can't be touched */
/* Our card over YouTube whenever it isn't playing: nothing of YouTube's own (title, channel, "more
   videos") is ever visible. */
.yt-cover {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 16px; background: #2b2d33; color: #fff; text-align: center;
}
.yt-title { max-width: 32ch; font-size: var(--fs-title); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.yt-play { min-width: min(100%, 240px); font-size: var(--fs-opt); }
.media-btn {
  position: absolute; left: 50%; bottom: 16px; z-index: 1; transform: translateX(-50%);
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.94); color: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.media-btn .icon { width: 44px; height: 44px; }
.media-btn .icon-play { margin-left: 5px; }
#player-end h1 { font-size: clamp(24px, 5vw, 36px); }

/* Meadow («Поляна»): below the 64 px host strip, the stage with the child's pets, then feed /
   microphone / other pets (beside the stage in landscape). */
#player.meadow #player-stage {
  display: flex; flex-direction: column;
  padding: 72px max(var(--pad), env(safe-area-inset-right)) max(var(--pad), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
}
.pr-feed img:not([src]) { visibility: hidden; }
.pr-play { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.pr-scene { position: relative; flex: 1; min-height: 0; border-radius: var(--radius); overflow: hidden; background: var(--stage-bg); }
.pr-side { flex: none; display: flex; flex-direction: column; gap: var(--gap); }
.pr-actions { display: flex; gap: var(--gap); }
.pr-actions .btn { flex: 1 1 0; min-width: 0; font-size: var(--fs-opt); padding: 4px 12px; }
.pr-feed img { width: 36px; height: 36px; flex: none; object-fit: contain; }
.pr-mic.busy, .pr-mic.busy:active { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-dark); box-shadow: none; }
@media (orientation: landscape) {
  .pr-play { flex-direction: row; }
  .pr-side { width: min(42%, 360px); justify-content: center; }
  .pr-actions { flex-direction: column; }
  .pr-actions .btn { flex: none; }
}

/* Lesson: the animal is listening / saying it back (top-left of the stage, never in the way). */
.mic {
  position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(255, 255, 255, 0.94); color: var(--accent-dark); font-size: 16px; font-weight: 800; box-shadow: var(--shadow);
}
.mic .icon { width: 22px; height: 22px; }
.echo-note { margin: 6px 0; line-height: 1.4; }
@media (max-width: 360px) { .timer-text { font-size: 14px; } #player-stop { min-height: 48px; padding: 0 12px; } }

/* ---------- grown-ups dialog ---------- */
#adult {
  width: min(760px, calc(100vw - 16px)); max-width: none; height: min(760px, calc(100dvh - 16px)); max-height: none;
  padding: 0; border: 0; border-radius: 20px; background: var(--bg); color: var(--ink); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  font-size: 16px;
}
#adult::backdrop { background: rgba(35, 38, 43, 0.45); }
.dlg { display: flex; flex-direction: column; height: 100%; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 4px 16px; }
.dlg-head h2 { font-size: 22px; font-weight: 800; }
.dlg-head .btn { --tap: var(--tap-adult); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 10px; border-bottom: 2px solid var(--line); }
[role="tab"] {
  min-height: var(--tap-adult); padding: 0 16px; border-radius: 999px; font-weight: 750;
  background: var(--card); border: 2px solid var(--line);
}
[role="tab"][aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Phones: the dialog takes the whole screen, and the six tabs are two tidy rows of three equal
   tabs (one row of six on a wide landscape phone): all of them in sight, nothing to scroll. */
@media (max-width: 600px), (max-height: 560px) {
  #adult {
    width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 10px 8px; }
  [role="tab"] { min-height: 48px; padding: 2px 4px; font-size: 15px; line-height: 1.1; border-radius: 14px; }
}
@media (max-height: 560px) and (min-width: 760px) { .tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dlg-body { position: relative; /* contains the visually-hidden table heads */ flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 24px; }
.dlg-body h3 { font-size: 18px; font-weight: 800; margin: 20px 0 6px; }
.dlg-body .btn { --tap: var(--tap-adult); font-size: 16px; padding: 0 16px; }
.lead { font-size: 18px; font-weight: 700; }
.note { color: var(--muted); font-size: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { font-size: 13px; color: var(--muted); font-weight: 700; }
tbody th { font-weight: 600; }
.cell-title { display: block; font-weight: 750; }
.goal { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
@media (max-width: 560px) {
  table, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  tbody th, tbody td { padding: 0; border: 0; }
  tbody th { flex: 1 0 100%; }
  tbody td { display: flex; align-items: center; gap: 6px; }
  tbody td::before { content: attr(data-label); font-size: 13px; color: var(--muted); font-weight: 700; }
  tbody td:only-of-type { flex: 1 0 100%; }
  tbody td:only-of-type::before { content: none; }
}
.meter { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.meter-track { flex: 1; min-width: 48px; max-width: 220px; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--accent); }
.role-word { display: inline-block; padding: 1px 8px; border-radius: 8px; border: 2px solid var(--c); background: var(--c-bg); color: var(--c-ink); font-weight: 800; }
.mistakes { list-style: none; margin: 0; padding: 0; }
.mistakes li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.kids { list-style: none; margin: 0; padding: 0; }
.kids li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kid-name { flex: 1 0 100%; min-width: 0; /* the name on its own line, its buttons below it */ display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 750; }
.badge { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 13px; }
.settings { display: flex; flex-direction: column; }
.set {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap-adult);
  padding: 6px 0; border-bottom: 1px solid var(--line); font-weight: 650; cursor: pointer;
}
.set input[type="checkbox"] { order: 2; width: 28px; height: 28px; accent-color: var(--accent); flex: none; }
.set select { min-height: 44px; padding: 0 10px; border-radius: 10px; border: 2px solid var(--line-strong); background: var(--card); }
.kid-self { flex: 1 0 100%; border-bottom: 0; }
.kid-self select { min-height: var(--tap-adult); font-size: 16px; }
.voice-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--doing-bg); border: 2px solid var(--doing); line-height: 1.4; }
.about .voice-note { margin: 0; }
/* ---------- child mode ---------- */
/* No pinch or double-tap zoom anywhere (touch-action intersects down the tree); panning still works. */
.child-mode { touch-action: pan-x pan-y; }
.child-lock { display: inline-flex; color: var(--muted); }
.child-lock .icon { width: 22px; height: 22px; }
.child-switch { margin: 12px 0 4px; border-top: 1px solid var(--line); font-size: 18px; }
#tab-child > p:not(.note) { margin: 0 0 10px; line-height: 1.45; }
.howto { margin-top: 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); }
.howto summary { min-height: var(--tap-adult); display: flex; align-items: center; padding: 0 14px; font-weight: 800; cursor: pointer; }
.howto ol { margin: 0; padding: 0 16px 14px 36px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }
#gate {
  width: min(420px, calc(100vw - 16px)); padding: 0; border: 0; border-radius: 20px;
  background: var(--bg); color: var(--ink); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
#gate::backdrop { background: rgba(35, 38, 43, 0.45); }
.gate { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.gate h2 { font-size: 22px; font-weight: 800; }
.gate label { font-size: 22px; font-weight: 700; }
/* the grown-ups code: four dots and a big keypad */
.gate-q { font-size: 18px; font-weight: 700; min-height: 1.3em; }
.pin-dots { display: flex; justify-content: center; gap: 16px; padding: 6px 0; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); }
.pin-dots span.on { background: var(--accent); border-color: var(--accent); }
.pin-dots.shake { animation: pin-shake 0.4s ease-in-out; }
@keyframes pin-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-answer { text-align: center; font-size: 30px; font-weight: 800; letter-spacing: 2px; min-height: 1.2em; }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.key { min-height: 56px; border-radius: 14px; font-size: 26px; font-weight: 800; background: var(--card); border: 2px solid var(--line-strong); box-shadow: 0 3px 0 var(--line-strong); }
.key:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--press); }
.key:disabled { opacity: 0.4; box-shadow: none; }
#gate-ok[hidden] { display: block !important; visibility: hidden; } /* (keeps the keypad grid) */
.gate-links { justify-content: space-between; }
@media (max-height: 600px) { .key { min-height: 48px; font-size: 22px; } .gate { gap: 8px; padding: 14px; } }
@media (orientation: landscape) and (max-height: 560px) { /* landscape phones: the words on the left, the keypad on the right */
  #gate { width: min(640px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); }
  .gate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-auto-rows: min-content; column-gap: 16px; align-items: start; }
  .gate > :not(.keypad) { grid-column: 1; }
  .gate .keypad { grid-column: 2; grid-row: 1 / span 6; gap: 6px; }
  .gate .gate-links { flex-direction: column; align-items: stretch; }
}
.gate input {
  min-height: var(--tap-adult); width: 100%; padding: 0 14px; font-size: 24px; font-weight: 700;
  border: 2px solid var(--line-strong); border-radius: 12px; background: var(--card); user-select: text;
}
.gate .actions { margin-top: 0; }
.gate .btn { --tap: var(--tap-adult); font-size: 18px; }
.gate .note:empty { display: none; }
.about { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; line-height: 1.45; }
/* grown-ups «Награды» tab */
#tab-rewards > p:not(.note) { margin: 0 0 10px; line-height: 1.45; }
#tab-rewards .note { margin: 8px 0; line-height: 1.4; }
.rules { margin-bottom: 8px; gap: 4px; }
.cartoons .cartoon-name { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.cartoons .note { margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-weight: 650; }
.field input, .adjust-n {
  min-height: var(--tap-adult); width: 100%; padding: 0 12px; font-size: 18px;
  border: 2px solid var(--line-strong); border-radius: 12px; background: var(--card); user-select: text; -webkit-user-select: text;
}
.cartoon-form .actions { margin-top: 8px; }
#cartoon-msg:empty { display: none; }
.adjust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; font-weight: 650; }
.adjust-row { display: flex; gap: 8px; }
.adjust-row .btn { width: var(--tap-adult); padding: 0; font-size: 22px; }
.adjust-n { width: 80px; text-align: center; }

/* «Я говорю»: who «I» am — a badge on that animal's side of the stage, and the animal by the question. */
.self-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); border: 3px solid var(--you);
  box-shadow: var(--shadow); font-size: var(--fs); font-weight: 800; color: var(--accent-dark); pointer-events: none;
}
.self-badge.right { left: auto; right: 8px; top: auto; bottom: 8px; } /* bottom right: clear of «Смотри ещё раз» */
#stage.covered .self-badge { display: none; } /* under the curtain nothing to point at; «ты» stays by the question */
.self-pic { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: var(--you-bg); }
.self-badge.pulse { animation: you-pulse 1.1s ease-in-out 2; }
@keyframes you-pulse { 50% { box-shadow: 0 0 0 8px var(--you-bg), var(--shadow); } }
.self-pic:not([src]) { visibility: hidden; }
#stage:has(.self-badge:not(.right)) .mic { top: 64px; } /* the listening badge below it */
.ask-self { flex: none; display: flex; flex-direction: column; align-items: center; font-size: 13px; font-weight: 800; color: var(--accent-dark); line-height: 1; }
.ask-self-pic { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background: var(--you-bg); border: 2px solid var(--you); }
.ask-self-pic:not([src]) { visibility: hidden; }

/* «Кто ты?»: the four animals large, then the chosen one alone on the stage. */
.whoami-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap); padding: 0 var(--pad) var(--pad); }
.whoami-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); width: min(100%, 560px); }
@media (min-aspect-ratio: 3/2) { .whoami-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 960px); } }
.whoami-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; background: var(--card);
  border: 3px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 3px 0 var(--line-strong); font-size: var(--fs-opt); font-weight: 800; }
.whoami-btn:active { transform: translateY(2px); }
.whoami-pic { width: min(30vmin, 150px); height: min(30vmin, 150px); object-fit: contain; }
.whoami-pic:not([src]) { visibility: hidden; }
.whoami-stage { position: relative; flex: 1; min-height: 0; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--stage-bg); }
.whoami-line { font-size: clamp(26px, 6vw, 40px); font-weight: 800; color: var(--you); } /* the world's «you» blue */
.whoami-btn:focus-visible, .whoami-btn:hover { border-color: var(--you); }
/* «Я делаю»: what the child's animal can do, as big pictures. */
.do-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.do-btn { width: calc(var(--tap) + 24px); height: calc(var(--tap) + 24px); padding: 4px; }
.do-pic { width: 100%; height: 100%; object-fit: contain; }
.do-pic:not([src]) { visibility: hidden; }

/* After a mistake: the answers rest, and a calm bar fills slowly at the foot of the stage. */
.lock {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow);
  font-size: var(--fs); font-weight: 750; color: var(--muted); pointer-events: none;
}
.lock-text { flex: none; }
.lock-track { flex: 1; min-width: 40px; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.lock-fill { display: block; height: 100%; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform 0.25s linear; }
.lock-left { flex: none; font-variant-numeric: tabular-nums; }
@container (max-width: 380px) { .lock-text { display: none; } } /* a narrow stage: the bar and the seconds only */
.stack.locked .act:not(.say) { opacity: 0.55; }

/* «Теперь скажи»: the words to say (the heard ones light up), a calm status line, the adult's tick. */
.say-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; text-align: center; }
.say-prompt { flex: 1 1 100%; font-size: var(--fs-opt); font-weight: 800; color: var(--accent-dark); }
.say-lead { color: var(--muted); font-weight: 750; }
.say-words span { border-radius: 6px; padding: 0 2px; transition: background-color 0.3s ease; }
.say-words .heard { background: var(--what-bg); color: var(--what-ink); }
.say-status { min-height: 1.3em; font-size: var(--fs); font-weight: 750; color: var(--accent-dark); }
.say-status:empty { display: none; }
.say-ok { font-size: 15px; padding: 0 14px; }
#done:has(#say-step:not([hidden])) #done-strip { display: none; } /* while saying: just the words to say */
/* Short portrait phones: while saying, the stage gives way (the animal still shows, listening) and
   «Дальше» waits out of sight (it is inactive until the say step is over anyway). */
@media (orientation: portrait) and (max-width: 600px) and (max-height: 700px) {
  .play-main:has(#say-step:not([hidden])) > #stage { flex: none; height: min(var(--stage-cap), 26dvh); min-height: 0; }
  .play-main:has(.part-list:not([hidden])) > #stage { flex: none; height: min(var(--stage-cap), 30dvh); min-height: 0; } /* the parts list open */
  .play-main:has(#stack > .on .ask-tiles > :nth-child(5)) > #stage { flex: none; height: min(var(--stage-cap), 30dvh); min-height: 0; } /* five answers (every animal + «Никто») */
  #done:has(#say-step:not([hidden])) #next { display: none; }
}
.mic.big { padding: 10px 18px; font-size: 20px; }
.mic.big .icon { width: 30px; height: 30px; }
@media (orientation: landscape) and (max-height: 360px) { .say-prompt { font-size: var(--fs); } }

/* ---------- «Мои зверята» ---------- */
/* Home: the album's entry beside «Награды»: the newest pets, «N из M», a dot for a new one. */
.foot-left { display: flex; gap: var(--gap); min-width: 0; }
.pets-btn { position: relative; min-width: 0; gap: 10px; padding: 0 14px 0 10px; background: #f3efff; border-color: #c9bdf2; box-shadow: 0 3px 0 #c9bdf2; }
.pets-thumbs { display: flex; flex: none; }
.pets-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: var(--card); border: 2px solid #f3efff; }
.pets-thumb + .pets-thumb { margin-left: -14px; }
.pets-thumb:not([src]) { visibility: hidden; }
.pets-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.1; }
.pets-label { font-size: 16px; font-weight: 800; white-space: nowrap; }
.pets-count { font-size: 14px; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
.new-dot { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ff6b6b; border: 3px solid var(--bg); }
/* Narrow phones: «Для взрослых» on two lines and fewer pictures, so all three buttons fit; the
   smallest show just the newest pet (the album says «N из M»). */
@media (max-width: 600px) {
  .pets-label, .pets-thumb:nth-child(n + 2) { display: none; }
  .hold { padding: 0 10px; gap: 6px; }
  .hold-text small { display: none; }
  .hold-text > span:first-child { width: min-content; }
  .pets-btn { gap: 6px; padding: 0 10px 0 6px; }
}
@media (max-width: 380px) { .pets-text { display: none; } }
/* Session end with a trophy pet: the star makes room on short screens. */
@media (max-height: 700px) { #end:has(#end-trophy:not([hidden])) :is(.end-star, .end-balance) { display: none; } }

/* Album: sets as cards, every pet of a set in a fixed slot (missing ones as silhouettes). */
.album { max-width: 1180px; margin: 0 auto; }
.album-count { max-width: 1180px; margin: 0 auto 4px; font-size: var(--fs); font-weight: 750; color: var(--muted); }
.tier-title { margin: 14px 0 8px; font-size: var(--fs-title); font-weight: 800; }
.pet-sets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.pet-set {
  container-type: inline-size; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.pet-set.complete { border-color: #9fd6b0; background: #f6fcf7; }
.pet-set.locked { background: #fdfbf7; border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
.set-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.set-title { font-size: var(--fs-opt); font-weight: 800; margin: 0; }
.set-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--what-bg); color: var(--what-ink); font-size: 14px; font-weight: 800; }
.set-badge .icon { width: 18px; height: 18px; stroke-width: 3; }
.set-count { margin-left: auto; font-size: var(--fs); font-weight: 800; color: var(--accent-dark); }
.set-bar { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.set-fill { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.pet-set.complete .set-fill { background: var(--what); }
.pet-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pet-slots.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (min-width: 600px) { .pet-slots.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container (min-width: 420px) { .pet-slots.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pet-slot { min-width: 0; }
.pet-btn {
  width: 100%; min-height: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 6px;
  border-radius: 14px; background: var(--quiet-bg); text-align: center;
}
button.pet-btn { background: #f3efff; transition: transform 0.15s ease; }
button.pet-btn:active { transform: translateY(2px); }
.pet-img { width: 100%; max-width: 96px; min-width: 56px; aspect-ratio: 1; object-fit: contain; }
.pet-img:not([src]) { visibility: hidden; }
.pet-img.sil.plain { filter: brightness(0) opacity(0.22); } /* the world has no silhouettes yet */
.pet-name { font-size: 13px; font-weight: 750; line-height: 1.15; overflow-wrap: anywhere; min-height: 2.3em; }
.missing .pet-name { color: var(--muted); }
.set-lock { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--muted); }
.set-lock .icon { width: 22px; height: 22px; }
.box-btn { width: 100%; font-size: var(--fs-opt); gap: 10px; }
.box-btn .box-ico { font-size: 1.4em; line-height: 1; }
.box-btn.later, .box-btn.later:active { background: var(--quiet-bg); border-color: var(--line); color: var(--muted); box-shadow: none; transform: none; }
@media (max-width: 360px) { .pet-set { padding: 8px; } .box-btn { font-size: 16px; padding: 0 10px; } }

/* The pet stage: the reveal (name and buttons come in once the pet is out) or one pet up close. */
.petshow-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); padding: 0 var(--pad) var(--pad); }
.petshow-stage { position: relative; flex: 1; min-height: 0; border-radius: var(--radius); overflow: hidden; background: var(--stage-bg); }
.petshow-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.petshow-line { font-size: clamp(24px, 5vw, 36px); font-weight: 800; line-height: 1.2; }
#petshow:not(.shown) .petshow-foot { visibility: hidden; }
#petshow.shown .petshow-line { animation: pop 0.45s ease-out; }
#petshow[data-mode="view"] #petshow-album, #petshow[data-mode="view"] #petshow-meadow, #petshow[data-mode="reveal"] #petshow-fav { display: none; }
#petshow-fav[aria-pressed="true"] { background: var(--what-bg); border-color: var(--what); color: var(--what-ink); }
.petshow-foot .end-actions { margin-top: 0; }
@media (orientation: landscape) and (max-height: 560px) {
  .petshow-main { flex-direction: row; }
  .petshow-foot { width: min(42%, 360px); justify-content: center; }
  .petshow-foot .end-actions { flex-direction: column; }
  .petshow-foot .end-actions .btn { flex: none; }
  .petshow-line { font-size: 22px; }
}
@media (orientation: landscape) and (max-height: 360px) { .petshow-foot { gap: 4px; } .petshow-foot .unlock { font-size: 15px; padding: 4px 10px; } }

/* Session end: the trophy pet line. */
.trophy-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.trophy-line .btn { font-size: 16px; }


/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .hold.holding .hold-fill { transition-duration: var(--hold, 1.5s) !important; } /* functional: shows the hold */
  .lock:not([hidden]) { animation: none !important; opacity: 1; }
}
.selftest *, .selftest *::before, .selftest *::after { transition: none !important; animation: none !important; }