:root {
  --bg: #fff8ec;
  --bg-2: #fffdf8;   /* низ страницы — чуть светлее верха */
  --card: #ffffff;
  --line: #f0e2c8;
  --text: #3b2f4a;
  --muted: #7d7189;
  --accent: #ffc93c;
  --sky-1: #7fcfff;
  --sky-2: #d4f0ff;
  /* плашки логотипа и языков: днём светлые, ночью тёмные */
  --logo-bg: #ffffff;
  --logo-shadow: #ead9b8;
  --logo-text: #3b2f4a;
  --grass: #6cc35a;
  --grass-dark: #5ab04a;
  --chip-bg: #ffe9b0;
  --chip-text: #8a5a00;
  --radius: 28px;
}

/* Ночь: включается кнопкой-луной в шапке (js/site.js) */
:root[data-theme="night"] {
  --bg: #1c2140;
  --bg-2: #151933;
  --card: #272d55;
  --line: #3a4170;
  --text: #f4f1ff;
  --muted: #b7b3d6;
  --sky-1: #121a3d;
  --sky-2: #3d4c8c;
  --logo-bg: #2a2550;
  --logo-shadow: #0b1230;
  --logo-text: #f4f1ff;
  --grass: #2f5a44;
  --grass-dark: #264d3a;
  --chip-bg: #3a4170;
  --chip-text: #ffe27a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Тоти улетает за край экрана — без горизонтальной прокрутки */
html { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- Фон страницы: мягкий переход сверху вниз и бледный узор по всей странице ----------
   Узор (днём облачка и листики, ночью звёзды) — редкий, плиткой 640×640, неподвижный при прокрутке; карточки лежат поверх */
body { background-image: linear-gradient(var(--bg), var(--bg-2)); background-attachment: fixed; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--deco) 0 0 / 640px 640px repeat; }
:root { --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg transform='translate(40 60) scale(1.2)' fill='rgba(127,207,255,0.22)'%3E%3Cellipse cx='30' cy='22' rx='30' ry='14'/%3E%3Ccircle cx='20' cy='14' r='12'/%3E%3Ccircle cx='38' cy='10' r='15'/%3E%3C/g%3E%3Cpath transform='translate(420 200) rotate(-20)' d='M0 0C6-14 22-18 30-16 28-6 18 6 0 0Z' fill='rgba(108,195,90,0.18)'/%3E%3Cg transform='translate(360 420) scale(1)' fill='rgba(127,207,255,0.22)'%3E%3Cellipse cx='30' cy='22' rx='30' ry='14'/%3E%3Ccircle cx='20' cy='14' r='12'/%3E%3Ccircle cx='38' cy='10' r='15'/%3E%3C/g%3E%3Cpath transform='translate(110 470) rotate(30)' d='M0 0C6-14 22-18 30-16 28-6 18 6 0 0Z' fill='rgba(108,195,90,0.18)'/%3E%3C/svg%3E"); }
:root[data-theme="night"] { --deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cpath transform='translate(60 70) scale(1.2)' d='M10 0l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z' fill='rgba(255,227,122,0.22)'/%3E%3Ccircle cx='400' cy='140' r='2.5' fill='rgba(244,241,255,0.18)'/%3E%3Cpath transform='translate(470 360) scale(1)' d='M10 0l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z' fill='rgba(255,227,122,0.22)'/%3E%3Ccircle cx='150' cy='420' r='2' fill='rgba(244,241,255,0.18)'/%3E%3Cpath transform='translate(260 560) scale(0.9)' d='M10 0l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z' fill='rgba(255,227,122,0.22)'/%3E%3C/svg%3E"); }

/* ---------- Шапка: небо и звери (рисует parade.js) ---------- */
.hero {
  position: relative;
  height: 330px;   /* на телефоне ниже — см. @media (max-width: 600px) */
  overflow: hidden;
  background: linear-gradient(var(--sky-1), var(--sky-2));
}
#parade { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .wrap {
  position: relative; padding-top: 6px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}

/* Солнце днём, луна ночью — это и есть переключатель */
.sky-toggle {
  flex: none;
  width: 64px; height: 64px;
  padding: 0; border: none; border-radius: 50%;
  cursor: pointer;
  background: #ffe27a;
  box-shadow: 0 0 0 10px rgba(255, 226, 122, 0.35), 0 0 0 22px rgba(255, 226, 122, 0.15);
  transition: transform 0.25s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.sky-toggle:hover { transform: scale(1.08) rotate(-12deg); }
.sky-toggle:active { transform: scale(0.94); }
.sky-toggle:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
:root[data-theme="night"] .sky-toggle {
  background:
    radial-gradient(circle at 34% 38%, #ddd6a6 0 6px, transparent 7px),
    radial-gradient(circle at 64% 66%, #ddd6a6 0 4px, transparent 5px),
    radial-gradient(circle at 66% 30%, #ddd6a6 0 3px, transparent 4px),
    #f6f0c8;
  box-shadow: 0 0 0 10px rgba(246, 240, 200, 0.15), 0 0 0 22px rgba(246, 240, 200, 0.06);
}

/* Логотип: буквы-кубики, из-за плашки выглядывает тираннозавр (рисует parade.js) */
.brand { position: relative; display: block; padding-top: 24px; text-decoration: none; }
#logo-dino { position: absolute; left: 2px; top: 0; width: 56px; height: 42px; }
.logo {
  position: relative;
  display: flex; gap: 1px;
  padding: 3px 16px 6px 20px;
  border-radius: 999px;
  background: var(--logo-bg);
  box-shadow: 0 5px 0 var(--logo-shadow);
  font-size: clamp(24px, 4.5vw, 30px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.logo span { display: inline-block; }
/* днём буквы на белой плашке — с тёмной подложкой снизу, чтобы жёлтая и зелёная читались */
:root:not([data-theme="night"]) .logo span { text-shadow: 0 2px 0 rgba(59, 47, 74, 0.28); }
.logo span:nth-child(1) { color: #ff6b5a; transform: rotate(-6deg); }
.logo span:nth-child(2) { color: #ffb52e; transform: translateY(2px) rotate(4deg); }
.logo span:nth-child(3) { color: #5fd36a; transform: rotate(-4deg); }
.logo span:nth-child(4) { color: #4aaef5; transform: translateY(2px) rotate(5deg); }
.logo span:nth-child(5) { color: #c08cff; transform: rotate(-3deg); }
.logo span:nth-child(6) { color: #ff7ac3; transform: translateY(2px) rotate(4deg); }
.logo span:nth-child(7) { color: #2fbfb0; transform: rotate(-4deg); }

/* ---------- Каталог ---------- */
.section-head { display: flex; align-items: center; gap: 12px; margin: 36px 0 22px; }
.section-head h2 { margin: 0; font-size: 30px; font-weight: 900; }
.count {
  padding: 4px 12px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
  font-size: 15px; font-weight: 700;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}

.card {
  --c: var(--accent);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 4px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--line);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.4s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-6px) rotate(-0.6deg);
  border-color: var(--c);
  box-shadow: 0 14px 0 var(--c);
  outline: none;
}
.card:active { transform: translateY(2px); box-shadow: 0 4px 0 var(--c); }

.cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sky-2); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.card:hover .cover img { transform: scale(1.06); }

.play {
  position: absolute; right: 14px; bottom: 14px;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--c); color: var(--text);
  border: 4px solid var(--card);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}
.play svg { width: 26px; height: 26px; margin-left: 4px; }
.card:hover .play, .card:focus-visible .play { transform: scale(1.12); }

.info { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 22px; flex: 1; }
.info h3 { margin: 0; font-size: 23px; font-weight: 900; }
.info p { margin: 0; color: var(--muted); font-size: 16px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.tag {
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 22%, var(--card));
  color: var(--text);
  font-size: 13px; font-weight: 700;
}

/* Заглушка «скоро» */
.card.soon {
  align-items: center; justify-content: center; gap: 6px;
  min-height: 280px; padding: 24px; text-align: center;
  background: transparent; border: 4px dashed var(--line); box-shadow: none; color: var(--muted);
}
.card.soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.card.soon .big { width: 56px; height: 56px; object-fit: contain; }
.card.soon strong { color: var(--text); font-size: 20px; font-weight: 800; }

.empty { color: var(--muted); }

/* ---------- Край полянки: трава из шапки мягкими кустиками уходит в страницу ----------
   Цвет — как у травы в parade.js (SCENE.grass / edge); форма — маска с круглыми кустиками, повторяется по ширине */
.grass-edge { position: relative; height: 54px; margin-top: -2px; pointer-events: none; }
.grass-edge::before, .grass-edge::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: var(--tuft) 0 0 / 150px 54px repeat-x; mask: var(--tuft) 0 0 / 150px 54px repeat-x;
}
/* задний ряд — отдельные тёмные кустики между передними (сплошная часть спрятана под передним рядом).
   Форма чуть шире своего квадрата (-2…122): соседние повторы перекрываются, без светлых швов-полосок */
.grass-edge::before { --tuft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath d='M-2 -2H122V14C112 14 110 40 103 40S95 14 89 14 84 42 76 42 70 14 64 14 57 38 50 38 44 14 38 14 31 43 24 43 17 14 11 14 4 14 0 14H-2Z'/%3E%3C/svg%3E"); background: var(--grass-dark); -webkit-mask-position: 59px 0; mask-position: 59px 0; }
/* низ страницы — та же трава, перевёрнутая: кустики растут вверх, полянка закрывает страницу */
.grass-foot { margin-top: 0; transform: scaleY(-1); }
.grass-edge::after { --tuft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath d='M-2 -2H122V20C114 20 112 30 106 30S99 22 94 22 87 34 80 34 72 24 66 24 58 30 52 30 45 21 40 21 33 36 26 36 18 24 12 24 5 20 0 20H-2Z'/%3E%3C/svg%3E"); background: var(--grass); }

/* ---------- Меню разделов: «пилюли» в форме кнопки «Дальше» ---------- */
.menu {
  position: relative; z-index: 1;
  display: flex; justify-content: center; gap: 10px;
  margin: -76px auto 0; padding: 0 16px;
}
.menu a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 20px 8px 14px;
  background: var(--card); color: var(--text);
  border: 3px solid var(--line); border-radius: 999px;
  box-shadow: 0 4px 0 var(--line);
  font-size: 17px; font-weight: 800; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.menu a:hover { transform: translateY(-2px); }
.menu a.on { background: var(--accent); border-color: #e0a91a; box-shadow: 0 4px 0 #e0a91a; color: #3b2f4a; }
.menu .ico { width: 26px; height: 26px; }

.section-head .more { margin-left: auto; color: var(--text); font-weight: 800; text-decoration: none; }
.section-head .more:hover { text-decoration: underline; }

/* ---------- Главная: директор ---------- */
.director {
  display: grid; grid-template-columns: minmax(200px, 340px) 1fr; align-items: center; gap: 12px 28px;
  margin-top: 40px;
}
.director-pic { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, #63b84b 22%, var(--card)), var(--card) 70%); border: 4px solid var(--line); }
.director-pic canvas { display: block; width: 100%; height: 100%; }
/* облако с речью: форму рисует home.js под размер блока, текст печатается по буквам */
.dialog {
  position: relative; isolation: isolate; cursor: pointer;
  margin: 24px 12px 24px 40px;
  padding: 26px 22px 8px;
}
.cloud { position: absolute; left: 0; top: 0; z-index: -1; overflow: visible; pointer-events: none; }
.cloud .fill { fill: var(--card); stroke: var(--line); stroke-width: 4; stroke-linejoin: round; }
.cloud .shadow { fill: var(--line); }
.dialog-name {
  position: absolute; left: 14px; top: -22px;
  padding: 4px 16px 6px; border-radius: 999px;
  background: #63b84b; color: #fff; box-shadow: 0 4px 0 #3f8a2f;
  font-size: 18px; font-weight: 900; letter-spacing: 0.02em;
}
.dialog-text {
  margin: 0; min-height: 4.4em;
  font-size: clamp(19px, 2.4vw, 23px); font-weight: 700; line-height: 1.45;
}
.dialog-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.dialog-dots { display: flex; gap: 6px; margin-right: auto; }
.dialog-dots i { position: relative; overflow: hidden; width: 10px; height: 10px; border-radius: 999px; background: var(--line); transition: width 0.2s ease; }
.dialog-dots i.on { width: 30px; background: color-mix(in srgb, #63b84b 35%, var(--line)); }
/* заполняется, пока идёт отсчёт до следующей реплики */
.dialog-dots i b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #63b84b; transition: width 0.1s linear; }
.say.voice { padding: 8px 12px; }
/* динамик-картинка (assets/icons/voice.png) вместо эмодзи 🔊; .off — голос выключен */
.speaker-img { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.25em; background: url(../assets/icons/voice.png) center / contain no-repeat; }
[data-theme="night"] .speaker-img { background-image: url(../assets/icons/voice-night.png); }
/* голос выключен — та же жёлтая колонка, перечёркнутая красной чертой */
.speaker-img.off { background-image: linear-gradient(135deg, transparent 44%, #e2483d 44%, #e2483d 56%, transparent 56%), url(../assets/icons/voice.png); }
[data-theme="night"] .speaker-img.off { background-image: linear-gradient(135deg, transparent 44%, #e2483d 44%, #e2483d 56%, transparent 56%), url(../assets/icons/voice-night.png); }
.no-voice .voice { display: none !important; }   /* озвучка выключена (VOICE в site.js) */
.no-voice .voice.recorded { display: inline-flex !important; }   /* но у Dinobek есть свои записи (home.js) */
.say.next { background: var(--accent); border-color: #e0a91a; color: #3b2f4a; }

/* ---------- Кинотеатр Динобека (js/cinema.js): мультик за занавесом, перед экраном стоят учителя ---------- */
/* кнопка «Мультик» — значок внизу круга с Динобеком */
.director-pic { position: relative; }
.say.movie {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); white-space: nowrap;
  background: #63b84b; border-color: #3f8a2f; color: #fff; box-shadow: 0 4px 0 #3f8a2f; font-size: 18px; font-weight: 900;
}
.say.movie[hidden] { display: none; }
.say.movie:hover { border-color: #3f8a2f; transform: translateX(-50%) translateY(-2px); }
.cinema {
  position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 16px;
  background: rgba(20, 22, 48, 0.9);
}
.cinema.show { display: grid; }
body.cinema-on { overflow: hidden; }
.cinema-hall { position: relative; margin-top: 44px; width: min(100%, 960px, calc((100vh - 260px) * 16 / 9)); }
.cinema-screen {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 22px;
  background: #0f1230; border: 6px solid #8a3324; box-shadow: 0 8px 0 #4e1a12;
}
.cinema-screen video { display: block; width: 100%; height: 100%; background: #0f1230; }
.curtain {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 51%; pointer-events: none;
  background: repeating-linear-gradient(90deg, #c8402f 0 18px, #a8311f 18px 30px, #d24a38 30px 40px);
  transition: transform 1.1s cubic-bezier(0.6, 0.05, 0.3, 1);
}
.curtain.left { left: 0; box-shadow: inset -10px 0 14px rgba(0, 0, 0, 0.25); }
.curtain.right { right: 0; box-shadow: inset 10px 0 14px rgba(0, 0, 0, 0.25); }
.cinema.open .curtain.left { transform: translateX(-100%); }
.cinema.open .curtain.right { transform: translateX(100%); }
/* конец мультика: поверх закрытого занавеса Динобек зовёт на урок */
.cinema-end { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; gap: 18px; padding: 16px; text-align: center; color: #fff; }
.cinema-end[hidden] { display: none; }
.cinema-end p { margin: 0; font-size: clamp(20px, 3.2vw, 32px); font-weight: 900; line-height: 1.25; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.cinema-end-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cinema-close {
  position: absolute; right: 0; top: -56px; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--line); background: var(--card); color: var(--text);
  font: inherit; font-size: 20px; font-weight: 900; cursor: pointer;
}
.cinema-row { display: flex; justify-content: space-around; align-items: flex-end; height: clamp(60px, 12vw, 120px); margin-top: 6px; }
.cinema-row canvas { width: 15%; height: 100%; }
.toti-toast.cinema-toast { z-index: 60; }
@media (prefers-reduced-motion: reduce) { .curtain { transition: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.say {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  border: 3px solid var(--line); background: var(--bg); color: var(--text);
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.say:hover { border-color: var(--accent); }

.big-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.big-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; padding: 8px 16px;
  border-radius: 22px; text-decoration: none; color: #3b2f4a;
  font-size: clamp(19px, 2.6vw, 22px); font-weight: 900;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.big-btn .ico { width: 38px; height: 38px; }
/* иконки из assets/icons в фильтрах и метках «Учимся / Играем» */
.filters .ico, .tag .ico { width: 20px; height: 20px; margin-right: 6px; vertical-align: -5px; }
.tag .ico { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.big-btn.to-learn { background: #7fd6ff; box-shadow: 0 6px 0 #3a9bd1; }
.big-btn.to-play { background: #ffc93c; box-shadow: 0 6px 0 #e0a91a; }
.big-btn:hover { transform: translateY(-3px); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }

/* ---------- Карточки героев ---------- */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.hero-card {
  --c: var(--accent);
  display: flex; flex-direction: column;
  background: var(--card); color: inherit; text-decoration: none;
  border: 4px solid var(--line); border-radius: 24px; box-shadow: 0 6px 0 var(--line);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hero-card:hover, .hero-card:focus-visible { transform: translateY(-5px) rotate(-1deg); border-color: var(--c); box-shadow: 0 11px 0 var(--c); outline: none; }
.hero-pic { display: block; aspect-ratio: 4 / 3; background: linear-gradient(color-mix(in srgb, var(--c) 18%, var(--card)), var(--card)); }
.hero-pic canvas { display: block; width: 100%; height: 100%; }
.hero-info { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 14px; }
.hero-info b { font-size: 20px; font-weight: 900; }
.hero-info span { color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.3; }

/* ---------- Карусель учителей на главной ---------- */
.carousel { position: relative; }
.car-track {
  --gap: 18px;
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 10px 2px 20px; margin: -10px -2px 0;
  scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track > .hero-card { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); scroll-snap-align: start; }
.car-btn {
  position: absolute; top: calc(50% - 34px); z-index: 1;
  width: 52px; height: 52px; padding: 0 0 4px;
  border-radius: 50%; border: 4px solid var(--line); background: var(--card); color: var(--text);
  box-shadow: 0 5px 0 var(--line);
  font: inherit; font-size: 34px; font-weight: 900; line-height: 1; cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.car-btn:hover { transform: scale(1.08); border-color: var(--accent); }
.car-btn.prev { left: -18px; }
.car-btn.next { right: -18px; }
.car-btn:disabled { opacity: 0; pointer-events: none; }
.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.car-dots[hidden] { display: none; }
.car-dots button {
  width: 12px; height: 12px; padding: 0; border: 0; border-radius: 999px;
  background: var(--line); cursor: pointer; transition: width 0.2s ease, background 0.2s ease;
}
.car-dots button.on { width: 30px; background: var(--accent); }

@media (max-width: 900px) {
  .car-track > .hero-card { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}

/* ---------- Страница героя ---------- */
.back-link { display: inline-block; margin-top: 34px; color: var(--text); font-weight: 800; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.profile {
  --c: var(--accent);
  display: grid; grid-template-columns: minmax(220px, 400px) 1fr; gap: 20px 32px; align-items: start;
  margin-top: 16px;
}
.profile-pic {
  aspect-ratio: 1; border-radius: 32px; border: 4px solid var(--line); box-shadow: 0 8px 0 var(--line);
  background: linear-gradient(color-mix(in srgb, var(--c) 25%, var(--card)), var(--card));
}
.profile-pic canvas { display: block; width: 100%; height: 100%; }
.profile h1 { margin: 0; font-size: clamp(36px, 6vw, 52px); font-weight: 900; line-height: 1.1; }
.profile h2 { margin: 22px 0 6px; font-size: 20px; font-weight: 900; }
.profile p { margin: 0; font-size: 17px; line-height: 1.55; }
.profile .lead { margin-top: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 !important; }
.chip { padding: 4px 12px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); font-size: 14px !important; font-weight: 800; }
.chip.accent { background: color-mix(in srgb, var(--c) 30%, var(--card)); color: var(--text); }
.phrase {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding: 14px 16px 14px 20px;
  border-radius: 22px; background: color-mix(in srgb, var(--c) 16%, var(--card)); border: 3px dashed color-mix(in srgb, var(--c) 60%, var(--line));
}
.phrase p { flex: 1; font-size: 19px !important; font-weight: 800; }
.phrase .say { padding: 8px 12px; font-size: 20px; }
/* «Послушать» под характером и биографией — живой голос героя (hero-page.js) */
.profile .listen { margin-top: 10px; }
.profile .listen[hidden] { display: none; }
.profile .phrase .listen { margin-top: 0; }
.profile .listen.on { border-color: color-mix(in srgb, var(--c) 70%, var(--line)); background: color-mix(in srgb, var(--c) 16%, var(--card)); }

/* ---------- Каталог игр ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 22px; }
.filters button {
  padding: 8px 18px; border-radius: 999px;
  border: 3px solid var(--line); background: var(--card); color: var(--text);
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.filters button.on { background: var(--accent); border-color: #e0a91a; color: #3b2f4a; }
.info .teacher { color: var(--text); font-size: 14px; font-weight: 700; }
.tag.kind { background: var(--chip-bg); color: var(--chip-text); }

/* ---------- «Добавить на экран телефона» (js/install.js) ---------- */
.install {
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  margin-top: 36px; padding: 18px 48px 18px 18px;
  background: var(--card); border: 4px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 0 var(--line);
}
.install[hidden] { display: none; }
.install-icon { flex: none; width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 4px 0 var(--line); }
.install-body { flex: 1; }
.install h2 { margin: 0; font-size: 22px; font-weight: 900; }
.install p { margin: 4px 0 10px; color: var(--muted); font-size: 15px; }
.install-close {
  position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; padding: 0 0 3px;
  border: 0; border-radius: 50%; background: var(--bg); color: var(--muted);
  font: inherit; font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer;
}
.install-close:hover { color: var(--text); }
.install-os h3 { margin: 0 0 4px; font-size: 16px; font-weight: 900; }
.install-os ol { margin: 0; padding-left: 22px; font-size: 15px; font-weight: 600; }
.install-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.install-steps .install-os { padding: 14px 16px; border-radius: 20px; background: var(--card); border: 3px solid var(--line); }

/* ---------- Секретная панда (js/panda.js): выглядывает из-за верхнего края блока ---------- */
.panda {
  position: absolute; left: 0; top: 0; z-index: 29;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.panda[hidden] { display: none; }
.panda canvas { display: block; width: 100%; height: 100%; }
/* пока панду не нашли: тёмный силуэт и «?» (альбом, карточка друга, страница героя) */
.hero-card.secret { cursor: default; }
.hero-card.secret:hover { transform: none; border-color: var(--line); box-shadow: 0 6px 0 var(--line); }
.hero-card.secret .hero-pic, .profile-pic.secret { position: relative; }
.hero-card.secret canvas, .profile-pic.secret canvas { filter: brightness(0); opacity: 0.22; }
.secret-q {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  color: var(--accent); font-size: 44px; font-weight: 900; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.sticker .secret-q { font-size: 30px; }
.profile-pic.secret .secret-q { font-size: 96px; }

/* ---------- Какаду Тоти (js/toti.js): летает поверх страницы ---------- */
.toti {
  position: absolute; left: 0; top: 0; z-index: 30;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.toti[hidden] { display: none; }
.toti canvas { display: block; width: 100%; height: 100%; }
.toti-feather {
  position: absolute; z-index: 31; width: 10px; height: 16px; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: #fff; border: 2px solid #2a1a12;
  animation: feather-fall 1.4s ease-in forwards;
}
@keyframes feather-fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x), 70px) rotate(var(--r)); opacity: 0; }
}
.toti-pop {
  position: absolute; z-index: 31; pointer-events: none; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; background: var(--card); color: var(--text);
  border: 3px solid var(--accent); font-size: 15px; font-weight: 900;
  transform: translateX(-50%); animation: toti-pop 1.3s ease forwards;
}
@keyframes toti-pop { 0% { opacity: 0; margin-top: 10px; } 20% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; margin-top: -16px; } }
.toti-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; width: max-content; max-width: calc(100% - 32px);
  padding: 12px 22px; border-radius: 28px; text-align: center;
  background: var(--accent); color: #3b2f4a; box-shadow: 0 6px 0 #e0a91a;
  font-size: 18px; font-weight: 900;
  transform: translateX(-50%); animation: toti-toast 3.6s ease forwards;
}
@keyframes toti-toast { 0% { opacity: 0; transform: translate(-50%, 20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 10px); } }
@media (prefers-reduced-motion: reduce) {
  .toti-feather, .toti-pop, .toti-toast { animation-duration: 0.01s; animation-delay: 0s !important; }
  .toti-toast { animation: none; }
}

/* ---------- Подвал ---------- */
/* ---------- Справа в шапке: язык и солнце/луна ---------- */
.top-right { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.lang-switch {
  display: flex; padding: 3px; gap: 2px;
  border-radius: 999px; background: var(--logo-bg); box-shadow: 0 4px 0 var(--logo-shadow);
}
.lang-switch button {
  min-width: 40px; padding: 5px 9px; border: 0; border-radius: 999px;
  background: transparent; color: var(--logo-text); opacity: 0.75;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.03em; cursor: pointer;
}
.lang-switch button:hover { opacity: 1; }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: #3b2f4a; opacity: 1; }

/* ---------- Задание дня на главной ---------- */
.daily {
  --c: var(--accent);
  display: flex; align-items: center; gap: 8px 18px;
  margin-top: 28px; padding: 10px 22px 10px 10px;
  background: color-mix(in srgb, var(--c) 14%, var(--card));
  border: 4px solid color-mix(in srgb, var(--c) 55%, var(--line)); border-radius: var(--radius);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 55%, var(--line));
}
.daily-pic { flex: none; width: 170px; aspect-ratio: 4 / 3; }
.daily-pic canvas { display: block; width: 100%; height: 100%; }
.daily-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; padding: 6px 0; }
.daily-label { padding: 4px 12px; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 800; }
.daily-text { margin: 0; font-size: clamp(20px, 2.6vw, 26px); font-weight: 900; line-height: 1.2; }
.daily-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.daily-bar a { text-decoration: none; }
.daily-bonus { color: var(--muted); font-size: 15px; font-weight: 800; }
.daily-done { color: #3f9a2f; font-size: 16px; font-weight: 800; }
.daily.done .daily-text { opacity: 0.6; }

/* ---------- Карта школы на главной (js/map.js): полянка с тропинкой, учителя и их звёздочки ---------- */
.school-map .section-head { margin-bottom: 16px; }
.map-scene {
  position: relative; isolation: isolate;
  display: grid; gap: 4px 10px; padding: 34px 16px 18px;
  border: 4px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 0 var(--line);
  overflow: hidden;
}
.map-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.map-stop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 4px 8px; color: var(--text); text-decoration: none;
  transition: transform 0.15s;
}
.map-stop.low { margin-top: 36px; }
.map-stop:hover { transform: translateY(-3px); }
.map-pic { display: block; width: 100%; max-width: 150px; height: 110px; }
.map-pic canvas { display: block; width: 100%; height: 100%; }
.map-name {
  padding: 4px 12px; border-radius: 999px;
  background: var(--card); border: 3px solid color-mix(in srgb, var(--c) 55%, var(--line));
  font-size: 15px; font-weight: 900; text-align: center; line-height: 1.15;
}
.map-stars { display: flex; align-items: center; gap: 1px; font-size: 17px; line-height: 1; }
.map-stars i { font-style: normal; color: rgba(59, 47, 74, 0.2); }
.map-stars i.on { color: #ffc93c; text-shadow: 0 1px 0 #e0a91a; }
/* у всех пройденных уровней — золотая табличка, как пункт меню */
.map-stop.done .map-name { background: var(--accent); border-color: #e0a91a; color: #3b2f4a; }
/* «Сюда!» над учителем — жёлтая табличка, тихонько покачивается */
.map-next {
  position: absolute; top: -26px; left: 50%; z-index: 1;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--accent); border: 3px solid #e0a91a; color: #3b2f4a;
  font-size: 14px; font-weight: 900;
  transform: translateX(-50%); animation: map-bob 2.4s ease-in-out infinite;
}
.map-next::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -6px;
  border: 6px solid transparent; border-top-color: #e0a91a;
}
@keyframes map-bob { 50% { transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .map-next { animation: none; } }
[data-theme="night"] .map-stars i { color: rgba(244, 241, 255, 0.22); }

/* ---------- Герой недели и новинка на главной ---------- */
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; align-items: stretch; }
.spotlight.solo { grid-template-columns: 1fr; }
.spotlight.solo .new-game { display: none; }
.week-hero {
  --c: var(--accent);
  display: flex; flex-direction: column;
  background: var(--card); border: 4px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 0 var(--line);
  overflow: hidden;
}
.week-pic { aspect-ratio: 16 / 9; background: linear-gradient(color-mix(in srgb, var(--c) 28%, var(--card)), var(--card)); }
.week-pic canvas { display: block; width: 100%; height: 100%; }
.week-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 4px 20px 22px; flex: 1; }
.week-label { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 30%, var(--card)); font-size: 14px; font-weight: 800; }
.week-hero h2 { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.15; }
.week-phrase { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; color: var(--muted); }
.week-go { margin-top: auto; text-decoration: none; }
.new-game, .new-game .card { display: flex; flex-direction: column; height: 100%; }
/* метка «Новинка!» в углу обложки */
.new-badge {
  position: absolute; left: 14px; top: 14px;
  padding: 5px 14px; border-radius: 999px;
  background: #ff5a7a; color: #fff; border: 3px solid var(--card);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
  font-size: 16px; font-weight: 900; transform: rotate(-4deg);
}

/* ---------- Мои звёзды и альбом наклеек ---------- */
.stars-box {
  margin-top: 36px; padding: 20px 22px 22px;
  background: var(--card); border: 4px solid var(--line); border-radius: 28px; box-shadow: 0 8px 0 var(--line);
}
.stars-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stars-head h2 { margin: 0; font-size: 26px; font-weight: 900; }
/* звезда-картинка (assets/icons/star.png) вместо эмодзи ⭐ — размером с текст рядом */
.star-img { width: 1.1em; height: 1.1em; object-fit: contain; vertical-align: -0.2em; }
.stars-count { padding: 4px 14px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); font-size: 22px; font-weight: 900; }
.stars-hint { margin: 6px 0 12px; color: var(--muted); font-size: 15px; }
.stars-progress { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 800; color: var(--muted); }
.stars-bar { flex: 1; max-width: 320px; height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.stars-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffc93c, #ffa620); }
.sticker-sets { display: grid; gap: 14px; margin: 16px 0 18px; }
.sticker-set-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sticker-set-head h3 { margin: 0; font-size: 18px; font-weight: 900; }
.sticker-set-head span { color: var(--muted); font-size: 13px; font-weight: 800; }
.sticker-set.done .sticker-set-head span { color: #3f9a2f; }
.sticker-set.done .sticker-set-head span::before { content: ""; display: inline-block; width: 1.3em; height: 1.3em; margin-right: 4px; vertical-align: -0.3em; background: url(../assets/icons/ui/medal.png) center / contain no-repeat; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; }
.sticker {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0;
  border-radius: 20px; background: color-mix(in srgb, var(--accent) 18%, var(--card));
  border: 3px solid var(--line); cursor: pointer; font: inherit;
}
.sticker:disabled { cursor: default; }
.sticker img { width: 82%; height: 82%; object-fit: contain; }
/* имя зверя всплывает над наклейкой после нажатия */
.sticker-name {
  position: absolute; left: 50%; bottom: calc(100% - 4px); z-index: 2;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--text); color: var(--bg); font-size: 13px; font-weight: 800;
  opacity: 0; transform: translate(-50%, 6px); pointer-events: none;
}
.sticker.say-name .sticker-name { animation: name-pop 1.6s ease forwards; }
@keyframes name-pop { 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
.sticker.locked { background: var(--bg); border-style: dashed; }
.sticker.locked img { filter: brightness(0); opacity: 0.18; }
.stars-play { text-decoration: none; }

/* «Мои рисунки» на главной: плитка «Нарисовать» и рисунки из альбома холста (лист бумаги — белый и ночью) */
.drawings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.drawing {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px;
  background: #fff; border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line);
  transition: transform 0.15s ease;
}
.drawing:hover { transform: translateY(-3px); }
.drawing img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drawing.new {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: transparent; border: 3px dashed var(--line); box-shadow: none; color: var(--text); text-decoration: none;
}
.drawing.new .drawing-ico { width: 40px; height: 40px; object-fit: contain; }
.drawing.new b { font-size: 17px; font-weight: 900; }

/* ---------- Для родителей ---------- */
.parents-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 40px; padding: 16px 20px;
  border-radius: 24px; border: 3px dashed var(--line);
}
.parents-strip h2 { margin: 0; font-size: 18px; font-weight: 900; }
.parents-strip ul { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; flex: 1; }
.parents-strip li { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.parents-strip li::before {
  content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; background: #5fd36a; color: #fff; font-size: 13px; font-weight: 900;
}
/* «Подробнее» — кнопка в стиле «Дальше» */
.parents-more { text-decoration: none; white-space: nowrap; }
.parents-page { max-width: 760px; }
.parents-page h1 { margin: 36px 0 8px; font-size: clamp(32px, 5vw, 44px); font-weight: 900; }
.parents-page h2 { margin: 28px 0 6px; font-size: 22px; font-weight: 900; }
.parents-page p, .parents-page li { font-size: 17px; line-height: 1.6; }
.parents-page .lead { font-size: 19px; font-weight: 600; }
.teach-list { padding-left: 20px; }
.teach-list a { color: var(--text); }
.footer a { color: var(--muted); font-weight: 700; }

.footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  margin-top: 64px; padding-top: 24px; padding-bottom: 8px;
  color: var(--muted); font-size: 14px; font-weight: 600;
}

@media (max-width: 600px) {
  .hero { height: 230px; }
  .sky-toggle { width: 46px; height: 46px; }
  .top-right { gap: 8px; margin-top: 24px; }
  .lang-switch button { min-width: 32px; padding: 4px 6px; font-size: 12px; }
  .stars-box { padding: 16px; }
  .drawings-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stars-head h2 { font-size: 22px; }
  .sticker-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .grid { grid-template-columns: 1fr; }
  .spotlight { grid-template-columns: 1fr; gap: 26px; }
  .install { padding: 14px 44px 14px 14px; gap: 12px; }
  .install-icon { width: 48px; height: 48px; border-radius: 12px; }
  .install h2 { font-size: 19px; }
  .map-scene { padding: 32px 8px 12px; row-gap: 30px; }
  .map-pic { height: 92px; }
  .map-name { font-size: 14px; padding: 3px 10px; }
  .daily { flex-direction: column; align-items: stretch; padding: 8px 16px 16px; }
  .daily-pic { width: 42%; margin: 0 auto -6px; }
  .week-hero h2 { font-size: 24px; }
  .section-head h2 { font-size: 26px; }
  .menu { gap: 6px; padding: 0 12px; }
  .menu a { flex: 1; gap: 5px; padding: 7px 8px; font-size: 14px; }
  .menu .ico { width: 22px; height: 22px; }
  .director, .profile { grid-template-columns: 1fr; }
  .profile-pic { aspect-ratio: 4 / 3; }
  .director-pic { width: 60%; margin: 0 auto; }
  .dialog { margin: 56px 14px 24px; }
  .big-actions { gap: 12px; }
  .big-btn { min-height: 58px; gap: 8px; padding: 6px 10px; }
  .big-btn .ico { width: 32px; height: 32px; }
  .hero-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .car-track { --gap: 12px; }
  .car-track > .hero-card { flex-basis: 62%; }
  .car-btn { width: 44px; height: 44px; font-size: 28px; }
  .car-btn.prev { left: -8px; }
  .car-btn.next { right: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Ксилофон Чиги на главной (home.js): пластинки укорачиваются к высоким нотам ---------- */
.xylo-go { flex: none; text-decoration: none; }
.xylo-bars { display: flex; align-items: center; justify-content: center; gap: 8px; height: 170px; max-width: 640px; margin: 12px auto 4px; }
.xbar {
  flex: 1 1 0; max-width: 72px; min-width: 0; height: var(--h, 100%); padding: 0;
  border: 0; border-radius: 16px; background: var(--c); cursor: pointer; touch-action: manipulation;
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.14), 0 5px 0 rgba(0, 0, 0, 0.14);
  background-image: radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.65) 0 7%, transparent 8%), radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.65) 0 7%, transparent 8%);
}
.xbar:focus-visible { outline: 3px solid #ffc93c; outline-offset: 3px; }
.xbar.hit { animation: xbar-hit 0.3s ease; }
@keyframes xbar-hit { 40% { transform: scale(1.08, 0.97); filter: brightness(1.25); } }
@media (max-width: 600px) {
  .xylo-bars { gap: 5px; height: 150px; }
  .xbar { border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) { .xbar.hit { animation: none; } }