/* maxigames: спокійна світла палітра, системні шрифти, цілі дотику від 72 px. */
:root {
  --bg: #f6f3ee;
  --surface: #ffffff;
  --ink: #2f3437;
  --muted: #6b7276;
  --line: #e2ddd5;
  --accent: #5b8fb9;
  --ok: #6aa57a;
  --soft: #eef2f5;
  --radius: 22px;
  --touch: 72px;
  --gap: 14px;
  --bar: calc(var(--touch) + 16px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* Кольори карток: один акцент на гру */
[data-game="animals-listen"] { --game: #f2d7b6; }
[data-game="what-is-it"]     { --game: #cfe3f2; }
[data-game="touch-hear"]     { --game: #d9ecd2; }
[data-game="find-picture"]   { --game: #f3e3a8; }
[data-game="syllables"]      { --game: #e6d9f0; }
[data-game="who-says"]       { --game: #f5d3cf; }
[data-game="i-want"]         { --game: #f8dcc0; }
[data-game="numbers-colors"] { --game: #d3e8e6; }
[data-game="repeat-me"]      { --game: #dfe3f5; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
button { font: inherit; color: inherit; }

/* ---------- Оболонка для дитини ---------- */
body.shell {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}
.topbar {
  height: var(--bar);
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.langs { display: flex; gap: 6px; }
.lang, .icon-btn {
  min-width: var(--touch);
  height: var(--touch);
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}
.lang[aria-pressed="true"] { border-color: var(--accent); background: var(--soft); }
.icon-btn { font-size: 1.9rem; display: grid; place-items: center; position: relative; padding: 0; }
.home-btn { min-width: calc(var(--touch) + 24px); }
.top-right { margin-left: auto; display: flex; gap: 8px; }
.icon-btn.muted { opacity: .55; }
.hold-ring { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); pointer-events: none; }
.hold-ring circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 100.6; stroke-dashoffset: 100.6; }
.gear.holding .hold-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 2s linear; }

#app { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 12px 12px; }

/* Сітка 3×3: квадрат, що вміщується і в портрет, і в ландшафт */
.menu {
  --size: min(100vw - 24px, 100dvh - var(--bar) - 20px, 900px);
  width: var(--size);
  height: var(--size);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gap);
}
.game-card {
  position: relative;
  border: none;
  border-radius: var(--radius);
  background: var(--game, var(--soft));
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6%;
  padding: 6%;
  cursor: pointer;
  min-width: var(--touch);
  min-height: var(--touch);
  overflow: hidden;
}
.game-card:active { transform: scale(.97); }
.game-card .pic { font-size: calc(var(--size) / 9); line-height: 1; }
.game-card .title { font-size: clamp(.8rem, calc(var(--size) / 34), 1.5rem); font-weight: 700; text-align: center; line-height: 1.15; }
.game-card .mic-badge { position: absolute; top: 6px; right: 8px; font-size: clamp(.9rem, calc(var(--size) / 28), 1.6rem); }

/* Заглушка гри */
.stub { width: 100%; max-width: 900px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 2vh; }
.stub h1 { margin: 0; font-size: clamp(1.4rem, 4.5vw, 2.4rem); text-align: center; }
.stub .hero { font-size: clamp(3rem, 12vmin, 7rem); line-height: 1; }
.stub p { margin: 0; color: var(--muted); font-size: 1.2rem; text-align: center; }
.words { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.word-card {
  width: clamp(110px, 22vmin, 180px);
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
}
.word-card .pic { font-size: clamp(2.6rem, 9vmin, 4.5rem); line-height: 1; }
.word-card .label { font-size: 1.1rem; font-weight: 600; }
.word-card.playing { outline: 4px solid var(--ok); }
.word-card.bounce { animation: bounce .5s ease; }
@keyframes bounce { 40% { transform: translateY(-10%); } 70% { transform: translateY(2%); } }

body.reduce-motion *, body.reduce-motion *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

/* ---------- Сторінки для батька ---------- */
body.page { padding: 16px; line-height: 1.45; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; max-width: 760px; margin: 0 auto; }
.card.narrow { max-width: 420px; margin-top: 10vh; }
h1 { font-size: 1.6rem; margin: 0 0 8px; }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
.muted { color: var(--muted); }
.error { color: #9a5b2e; font-weight: 600; }
label { display: block; font-weight: 600; margin: 12px 0 6px; }
input[type=password], .page input[type=text], .page input:not([type]) { width: 100%; min-height: 56px; font-size: 1.1rem; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; }
.page button { min-height: 56px; padding: 0 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--soft); font-weight: 600; cursor: pointer; }
.page button.primary, form button[type=submit] { background: var(--accent); border-color: var(--accent); color: #fff; margin-top: 14px; }
.links li { margin: 8px 0; font-size: 1.1rem; }
a { color: #2f6690; }

.step { border-top: 1px solid var(--line); padding: 14px 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.heard button[aria-pressed="true"][data-heard="yes"] { background: #dcefe0; border-color: var(--ok); }
.heard button[aria-pressed="true"][data-heard="no"] { background: #f3e6da; border-color: #c9a27e; }
.out { background: var(--soft); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; font-size: .9rem; margin: 6px 0 0; min-height: 1.5em; }
.out:empty { display: none; }
.meter { position: relative; height: 22px; background: var(--soft); border-radius: 11px; overflow: hidden; margin: 8px 0; }
.meter-bar { height: 100%; width: 0; background: var(--ok); }
.meter-peak { position: absolute; top: 0; bottom: 0; width: 3px; left: 0; background: var(--accent); }
textarea { width: 100%; font: .85rem ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.status { font-weight: 600; min-height: 1.4em; }

/* Вузький екран (телефон): верхня панель у два ряди, цілі дотику лишаються 72 px */
@media (max-width: 560px) {
  :root { --bar: calc(2 * var(--touch) + 26px); }
  .topbar { flex-wrap: wrap; height: auto; row-gap: 8px; }
  .menu { --size: min(100vw - 24px, 100dvh - var(--bar) - 20px); }
}
.ok { color: var(--ok); font-weight: 600; }
.small { font-size: .85rem; word-break: break-word; }
.device .row form { margin: 0; }
.device .row input { width: auto; flex: 1 1 200px; }
.device button.primary { margin-top: 0; }

/* Контрольний аркуш /admin/content */
.card.wide { max-width: 1200px; }
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.sheet-card { border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.sheet-card p { margin: 4px 0; }
.sheet-pics { display: flex; align-items: center; justify-content: space-around; min-height: 124px; }
.sheet-emoji { font-size: 3rem; }
.sheet-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: .95rem; }
.sheet-card dt { font-weight: 700; color: var(--muted); }
.sheet-card dd { margin: 0; }
.attribution { border-top: 1px solid var(--line); padding-top: 10px; }

/* ---------- Ігри ---------- */
.game-msg { font-size: 1.3rem; color: var(--muted); text-align: center; }
.game {
  width: 100%;
  max-width: 1100px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vmin;
  background: transparent;
}
.dots { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 4px 0; flex: none; }
.dot { width: 18px; height: 18px; border-radius: 50%; background: var(--line); }
.dot.done { background: var(--ok); }
.dot.current { background: var(--surface); box-shadow: inset 0 0 0 3px var(--accent); }
.game-body {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 3vmin;
}
.prompt { display: flex; align-items: center; justify-content: center; min-height: 0; }
.options { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); width: 100%; }

.option {
  border: 3px solid transparent;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  cursor: pointer;
  min-width: var(--touch);
  min-height: var(--touch);
  transition: background-color .25s, border-color .25s, opacity .25s, transform .15s;
}
.option:active:not(:disabled) { transform: scale(.97); }
.option.correct { background: #dcefe0; border-color: var(--ok); }
.option.wrong { background: #e9e7e3; color: #9aa0a4; opacity: .6; cursor: default; }
.option.wrong .img, .option.wrong .emoji { filter: grayscale(1); opacity: .55; }
.option.hint { border-color: var(--accent); animation: hint-pulse 1.8s ease-in-out infinite; }
@keyframes hint-pulse { 50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(91,143,185,.18); } }

/* Картинка: піктограма або емодзі */
.img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.emoji { display: grid; place-items: center; width: 100%; height: 100%; line-height: 1; pointer-events: none; }

/* Гра 2: велика картинка, слова-кнопки */
.what-is-it .prompt-pic {
  --s: min(52vw, 40dvh, 460px);
  width: var(--s); height: var(--s);
  border: none; border-radius: calc(var(--radius) + 6px);
  background: var(--surface); box-shadow: 0 2px 0 rgba(0,0,0,.06);
  padding: 4%; cursor: pointer;
}
.what-is-it .prompt-pic .emoji { font-size: calc(var(--s) * .7); }
.what-is-it .prompt-pic.bounce { animation: bounce .5s ease; }
.what-is-it .option { min-width: min(30vw, 260px); min-height: 92px; padding: 10px 22px; }
.option-word { font-size: clamp(1.5rem, 4.6vmin, 2.6rem); font-weight: 700; }

/* Гра 4: слово і кнопка 🔊, картинки-варіанти */
.say { display: flex; flex-direction: column; align-items: center; gap: 1.5vmin; }
.speaker {
  width: clamp(96px, 18vmin, 150px); height: clamp(96px, 18vmin, 150px);
  border-radius: 50%; border: 3px solid var(--line); background: var(--surface);
  font-size: clamp(2.6rem, 8vmin, 4.2rem); cursor: pointer; display: grid; place-items: center;
}
.speaker.playing { border-color: var(--accent); background: var(--soft); }
.say-word { font-size: clamp(1.6rem, 5vmin, 2.8rem); font-weight: 700; }
.find-picture .options { --cols: 3; }
.find-picture .options.n2 { --cols: 2; }
.find-picture .options.n4 { --cols: 4; }
.find-picture .option {
  --s: min((100vw - 40px - (var(--cols) - 1) * var(--gap)) / var(--cols), 44dvh, 300px);
  width: var(--s); height: var(--s); padding: 5%;
}
.find-picture .option .emoji { font-size: calc(var(--s) * .62); }
.option.wiggle { animation: wiggle .9s ease; }
@keyframes wiggle {
  15% { transform: rotate(-6deg) scale(1.06); } 35% { transform: rotate(6deg) scale(1.08); }
  55% { transform: rotate(-4deg) scale(1.06); } 75% { transform: rotate(3deg) scale(1.03); }
}

/* Ландшафт: підказка ліворуч, варіанти праворуч */
@media (orientation: landscape) and (min-width: 700px) {
  .what-is-it .game-body { flex-direction: row; }
  .what-is-it .prompt-pic { --s: min(42vw, 62dvh, 480px); }
  .what-is-it .options { flex-direction: column; align-items: center; width: auto; }
  .what-is-it .option { min-width: min(34vw, 340px); }
  .find-picture .option { --s: min((100vw - 40px - (var(--cols) - 1) * var(--gap)) / var(--cols), 46dvh, 300px); }
}

/* ---------- Ефекти: кульки, смайлик, кінець ---------- */
.fx-layer { position: fixed; left: 0; right: 0; bottom: 0; top: var(--bar); z-index: 20; overflow: hidden; }
.balloons { pointer-events: auto; }
.balloons.inline { position: relative; width: 100%; height: 100%; }
.balloon {
  position: absolute;
  width: clamp(84px, 15vmin, 140px);
  aspect-ratio: 4 / 5;
  margin: calc(clamp(84px, 15vmin, 140px) * -.6) 0 0 calc(clamp(84px, 15vmin, 140px) * -.5);
  border: none; padding: 0; cursor: pointer;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0 9%, transparent 10%), var(--c);
  box-shadow: inset -8px -10px 0 rgba(0,0,0,.06);
  animation: rise 1.1s ease-out var(--delay) both, bob var(--bob) ease-in-out calc(var(--delay) + 1.1s) infinite;
}
.balloon::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 34%;
  background: rgba(0,0,0,.18); transform: translateX(-50%);
}
.balloon.popped { animation: popped .25s ease-out forwards; pointer-events: none; }
@keyframes rise { from { transform: translateY(70vh); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes popped { to { transform: scale(1.35); opacity: 0; } }

.sad { display: grid; place-items: center; background: rgba(246,243,238,.72); }
.sad-box { position: relative; width: clamp(160px, 34vmin, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.sad-face { font-size: clamp(5rem, 18vmin, 9rem); line-height: 1; }
.sad-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.sad-ring circle { fill: none; stroke-width: 5; }
.sad-ring .track { stroke: var(--line); }
.sad-ring .left { stroke: var(--accent); stroke-dasharray: 276.5; stroke-dashoffset: 0; transition: stroke-dashoffset linear; }
.sad.run .sad-ring .left { stroke-dashoffset: 276.5; }

.end { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2vmin; padding-top: 2vh; }
.end-title { margin: 0; font-size: clamp(2.6rem, 10vmin, 5rem); }
.end-balloons { flex: 1; width: 100%; min-height: 120px; position: relative; overflow: hidden; }
.end-balloons .balloon { animation: rise 1.1s ease-out var(--delay) both, bob var(--bob) ease-in-out calc(var(--delay) + 1.1s) infinite; }
.end-actions { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; padding-bottom: 2vh; }
.big-btn {
  min-height: 96px; min-width: min(40vw, 280px); padding: 0 28px;
  border-radius: var(--radius); border: 3px solid var(--line); background: var(--surface);
  font-size: clamp(1.4rem, 4vmin, 2rem); font-weight: 700; cursor: pointer;
}
.big-btn.again { border-color: var(--ok); background: #dcefe0; }

/* Спокійний режим: кульки без руху, ніяких гойдань */
body.reduce-motion .balloon, body.reduce-motion .option.hint { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .balloon, .option.hint { animation: none !important; } }

/* Гра 3: сцени */
.touch-hear { gap: 1.2vmin; }
.scene-nav { display: flex; align-items: center; justify-content: center; gap: 12px; flex: none; }
.nav-btn {
  flex: none;
  width: var(--touch); height: var(--touch); border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface); font-size: 1.6rem; cursor: pointer; color: var(--muted);
}
.scene-dots .dot.current { background: var(--accent); box-shadow: none; }
.scene {
  position: relative; flex: 1; min-height: 0; width: 100%;
  border-radius: var(--radius); overflow: hidden; touch-action: pan-y;
  background: var(--bg-sky, #dcecf7);
}
.scene-farm { background: linear-gradient(#dcecf7 0 40%, #d6ebcd 40%); }
.scene-kitchen { background: linear-gradient(#f6ecdf 0 52%, #ead7bd 52%); }
.scene-room { background: linear-gradient(#ece6f3 0 66%, #e3d7c6 66%); }
.scene-street { background: linear-gradient(#dcecf7 0 36%, #d9e6cf 36% 64%, #d7d9db 64%); }
.scene-obj {
  position: absolute;
  width: calc(var(--w) * var(--min, 400px) / 100);
  aspect-ratio: 1;
  min-width: var(--touch);
  transform: translate(-50%, -50%);
  border: none; background: transparent; padding: 0; cursor: pointer;
}
.scene-obj .emoji { font-size: calc(var(--w) * var(--min, 400px) / 130); }
.scene-obj.bounce { animation: obj-bounce .55s ease; }
@keyframes obj-bounce { 40% { transform: translate(-50%, -62%); } 70% { transform: translate(-50%, -47%); } }
.bubble {
  position: absolute; z-index: 30; pointer-events: none;
  transform: translate(-50%, calc(-50% - var(--w) * var(--min, 400px) / 200 - 30px));
  background: var(--surface); border-radius: 16px; padding: 6px 14px;
  font-size: clamp(1.2rem, 3.6vmin, 2rem); font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Гра 6: предмет «оживає» */
.option.alive { animation: alive 1s ease; }
@keyframes alive { 20% { transform: translateY(-8%) scale(1.05); } 45% { transform: translateY(0) scale(1); } 65% { transform: translateY(-4%); } }
.who-says .options { --cols: 3; }
.who-says .options.n2 { --cols: 2; }
.who-says .options.n4 { --cols: 4; }
.who-says .option {
  --s: min((100vw - 40px - (var(--cols) - 1) * var(--gap)) / var(--cols), 44dvh, 300px);
  width: var(--s); height: var(--s); padding: 5%;
}
.who-says .option .emoji { font-size: calc(var(--s) * .62); }

/* Гра 7: «Я хочу» */
.i-want { justify-content: space-evenly; }
.want-strip { display: flex; align-items: center; gap: var(--gap); padding: 10px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.want-tile {
  min-height: clamp(96px, 20vmin, 170px); padding: 0 clamp(14px, 3vmin, 28px);
  border-radius: 18px; border: 3px solid var(--accent); background: var(--soft);
  font-size: clamp(1.5rem, 5vmin, 2.8rem); font-weight: 800; cursor: pointer;
}
.want-slot {
  position: relative; overflow: hidden;
  width: clamp(96px, 20vmin, 170px); aspect-ratio: 1; border-radius: 18px;
  border: 3px dashed var(--line); background: var(--surface); padding: 6px;
}
.want-slot.filled { border-style: solid; border-color: var(--ok); }
.want-slot.eaten > :not(.bite) { opacity: 0; transition: opacity .4s; }
.want-slot.eaten .bite { opacity: 0; transition: opacity .4s; }
.want-slot.hop > :first-child { animation: hop .9s ease 2; }
@keyframes hop { 30% { transform: translateY(-14%); } 55% { transform: none; } 75% { transform: translateY(-5%); } }
.want-slot .emoji { font-size: clamp(3rem, 12vmin, 6rem); }
.bite { position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); }
.bite-1 { right: -16%; top: 4%; }
.bite-2 { right: -12%; top: 40%; }
.bite-3 { right: 6%; bottom: -18%; }
.want-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); width: 100%; }
.want-pic {
  --s: min((100vw - 40px - 2 * var(--gap)) / 2, 30dvh, 260px);
  width: var(--s); height: var(--s); padding: 5%;
  border: none; border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 0 rgba(0,0,0,.06); cursor: pointer;
  transition: opacity .3s;
}
.want-grid.n3 .want-pic, .want-grid.n5 .want-pic, .want-grid.n6 .want-pic { --s: min((100vw - 40px - 2 * var(--gap)) / 3, 26dvh, 240px); }
.want-pic .emoji { font-size: calc(var(--s) * .6); }
.want-pic.away { opacity: 0; pointer-events: none; }
.flyer { position: fixed; z-index: 25; pointer-events: none; transition: transform .45s ease-in-out; transform-origin: center; }
@media (orientation: landscape) and (min-width: 700px) {
  .want-grid .want-pic { --s: min((100vw - 40px - 3 * var(--gap)) / 4, 38dvh, 240px); }
}

/* Гра 8: вкладки, лічба, кольори, форми */
.nc-tabs { display: flex; gap: 10px; justify-content: center; flex: none; }
.nc-tab {
  min-width: calc(var(--touch) + 20px); height: var(--touch); border-radius: 18px;
  border: 2px solid var(--line); background: var(--surface); font-size: 2rem; cursor: pointer;
}
.nc-tab[aria-selected="true"] { border-color: var(--accent); background: var(--soft); }
.numbers-colors .end { padding-top: 0; flex: 1; min-height: 0; height: auto; }
.count-area { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--gap); width: 100%; max-width: 900px; }
.count-obj {
  --s: clamp(var(--touch), min(20vw, 18dvh), 170px);
  position: relative; width: var(--s); height: var(--s); padding: 6%;
  border: none; border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 0 rgba(0,0,0,.06); cursor: pointer;
  transition: opacity .3s, transform .2s;
}
.count-area.n6 .count-obj, .count-area.n7 .count-obj, .count-area.n8 .count-obj,
.count-area.n9 .count-obj, .count-area.n10 .count-obj { --s: clamp(var(--touch), min(17vw, 15dvh), 140px); }
.count-obj .emoji { font-size: calc(var(--s) * .6); }
.count-obj.counted { background: #e9e7e3; transform: scale(.92); }
.count-obj.counted > :first-child { opacity: .45; }
.count-badge {
  position: absolute; right: -6px; top: -6px; min-width: 40px; height: 40px; border-radius: 20px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 1.3rem; display: grid; place-items: center;
}
.big-number { font-size: clamp(4rem, 16vmin, 9rem); font-weight: 800; line-height: 1; color: var(--accent); }
.digit { min-width: 110px; min-height: 110px; font-size: 3rem; font-weight: 800; }
.numbers-colors .token {
  --s: min((100vw - 40px - 3 * var(--gap)) / 4, 34dvh, 240px);
  width: var(--s); height: var(--s); padding: 10%;
}
.numbers-colors .options.n3 .token { --s: min((100vw - 40px - 2 * var(--gap)) / 3, 34dvh, 260px); }
.blob { display: block; width: 100%; height: 100%; background: var(--c); border-radius: 46% 54% 52% 48% / 50% 45% 55% 50%; }
.shape, .shape svg { display: block; width: 100%; height: 100%; }
.token.wrong .blob, .token.wrong .shape { filter: grayscale(1); opacity: .35; }

/* Картинки в кнопках: розмір від --s (відсоткова висота всередині button не працює) */
.find-picture .option .img, .who-says .option .img, .want-pic .img, .count-obj .img {
  width: calc(var(--s) * .86); height: calc(var(--s) * .86); margin: auto;
}
.what-is-it .prompt-pic .img { width: calc(var(--s) * .92); height: calc(var(--s) * .92); margin: auto; }
.numbers-colors .token .blob, .numbers-colors .token .shape {
  width: calc(var(--s) * .74); height: calc(var(--s) * .74); margin: auto;
}
.scene-dots { gap: 14px; }

/* Гра 5: склади */
.syllables .prompt-pic { --s: min(46vw, 32dvh, 380px); width: var(--s); height: var(--s); border: none;
  border-radius: calc(var(--radius) + 6px); background: var(--surface); box-shadow: 0 2px 0 rgba(0,0,0,.06); padding: 4%; cursor: pointer; }
.syllables .prompt-pic .img { width: calc(var(--s) * .92); height: calc(var(--s) * .92); margin: auto; }
.syllables .prompt-pic .emoji { font-size: calc(var(--s) * .7); }
.syl-build { display: flex; flex-direction: column; align-items: center; gap: 3vmin; width: 100%; }
.syl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.syl-tile, .syl-slot {
  min-width: clamp(96px, 20vw, 170px); min-height: clamp(88px, 13vmin, 120px); padding: 0 16px;
  border-radius: 20px; font-size: clamp(1.8rem, 6vmin, 3.2rem); font-weight: 800;
  display: grid; place-items: center;
}
.syl-tile { border: 3px solid var(--line); background: var(--surface); cursor: pointer; transition: background-color .25s, border-color .25s, opacity .25s; }
.syl-tile.lit { background: #dcefe0; border-color: var(--ok); }
.syl-tile.next { border-color: var(--accent); animation: hint-pulse 1.8s ease-in-out infinite; }
.syl-tile.tap { animation: bounce .4s ease; }
.syl-tile.used { opacity: 0; pointer-events: none; }
.syl-tile.nope { animation: nope .45s ease; }
@keyframes nope { 25% { transform: translateY(-14px); } 60% { transform: translateY(3px); } }
.syl-slot { border: 3px dashed var(--line); background: rgba(255,255,255,.5); }
.syl-slot.filled { border-style: solid; border-color: var(--ok); background: #dcefe0; animation: bounce .4s ease; }

/* Мікрофонні ігри */
.mic-start { min-width: min(70vw, 340px); min-height: 120px; font-size: clamp(1.8rem, 6vmin, 2.6rem); border-color: var(--accent); background: var(--soft); }
.parent-note { max-width: 560px; text-align: center; font-size: 1.15rem; color: var(--muted); background: var(--surface);
  border-radius: 16px; padding: 16px 20px; margin: 0; }
.listen-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 1.05rem; min-height: 40px; text-align: center; padding: 0 8px; }
.listen-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--ok); animation: breath 3s ease-in-out infinite; flex: none; }

/* Гра 1: тваринки */
.animals-listen { gap: 2vmin; }
.animal-grid { flex: 1; min-height: 0; width: 100%; display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; align-content: center; }
@media (orientation: landscape) and (min-width: 700px) { .animal-grid { grid-template-columns: repeat(4, 1fr); } }
.animal-card { position: relative; border: none; border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 2px 0 rgba(0,0,0,.06); cursor: pointer; min-height: var(--touch);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; overflow: visible; }
.animal-card .img { width: 100%; height: auto; max-height: 72%; flex: 1; min-height: 0; object-fit: contain; }
.animal-card .emoji { font-size: clamp(2.6rem, 9vmin, 5rem); }
.animal-name { font-weight: 700; font-size: clamp(1rem, 3vmin, 1.5rem); }
.animal-bubble { left: 50%; top: 0; transform: translate(-50%, -60%); }
.animal-card.move-jump { animation: a-jump .8s ease; }
.animal-card.move-sway { animation: a-sway 1s ease; }
.animal-card.move-puff { animation: a-puff 1s ease; }
.animal-card.move-rear { animation: a-rear 1s ease; transform-origin: 30% 100%; }
.animal-card.move-hop { animation: a-hop .9s ease; }
.animal-card.nudge { animation: a-nudge .6s ease; }
@keyframes a-jump { 30% { transform: translateY(-18%); } 60% { transform: translateY(0); } 75% { transform: translateY(-5%); } }
@keyframes a-sway { 25% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes a-puff { 40% { transform: scale(1.12); } 70% { transform: scale(.98); } }
@keyframes a-rear { 35% { transform: rotate(-10deg); } 70% { transform: rotate(0); } }
@keyframes a-hop { 20% { transform: translateY(-10%); } 40% { transform: none; } 60% { transform: translateY(-7%); } 80% { transform: none; } }
@keyframes a-nudge { 50% { transform: translateY(-6%); } }

/* Гра 9: повтори */
.repeat-me .prompt-pic { --s: min(56vw, 36dvh, 420px); width: var(--s); height: var(--s); border: none;
  border-radius: calc(var(--radius) + 6px); background: var(--surface); box-shadow: 0 2px 0 rgba(0,0,0,.06); padding: 4%; cursor: pointer; }
.repeat-me .prompt-pic .img { width: calc(var(--s) * .92); height: calc(var(--s) * .92); margin: auto; }
.repeat-me .prompt-pic .emoji { font-size: calc(var(--s) * .7); }
.repeat-me .say-word { font-size: clamp(1.8rem, 6vmin, 3rem); }
.listen-zone { position: relative; width: clamp(110px, 20vmin, 170px); aspect-ratio: 1; display: grid; place-items: center; }
.breath { position: absolute; inset: 10%; border-radius: 50%; border: 4px solid var(--line); opacity: .5; }
.listen-zone.on .breath { border-color: var(--accent); opacity: 1; animation: breath 3s ease-in-out infinite; }
@keyframes breath { 50% { transform: scale(1.15); opacity: .65; } }
.stars { position: relative; font-size: clamp(2.4rem, 8vmin, 4rem); letter-spacing: 6px; }

/* Гра 7: «скажи сам» */
.say-ring { position: absolute; inset: 6px; border-radius: 14px; border: 4px solid var(--accent); animation: breath 3s ease-in-out infinite; pointer-events: none; }
.say-star { position: absolute; right: 4px; top: 2px; font-size: 1.8rem; }

body.reduce-motion .listen-dot, body.reduce-motion .breath, body.reduce-motion .say-ring { animation: none !important; }