/* =========================================================
   Игры Алёнки — дизайн-система и стили
   Чистый CSS, без зависимостей. Адаптив: desktop / tablet / mobile.
   ========================================================= */

:root {
  /* Палитра — яркая, но гармоничная */
  --c-pink:    #ff7eb6;
  --c-pink-d:  #f0568f;
  --c-purple:  #a78bfa;
  --c-purple-d:#7c5cf0;
  --c-blue:    #4cc9f0;
  --c-blue-d:  #2a9fd6;
  --c-green:   #5fd068;
  --c-green-d: #3aa844;
  --c-yellow:  #ffd23f;
  --c-orange:  #ff9f43;
  --c-orange-d:#c2410c;   /* доступный оранжевый для текста на светлом (WCAG ≥4.5:1) */
  --c-gold:    #e6a700;   /* золотой акцент (рамки/фон) */
  --c-gold-d:  #8a6200;   /* тёмное золото для текста на светлом (WCAG ≥4.5:1) */
  --c-red:     #ff6b6b;

  --ink:       #3a2a4d;   /* основной тёмный текст */
  --ink-soft:  #6b5b7a;
  --paper:     #ffffff;
  --paper-2:   #fff7fb;

  --ok:        #5fd068;
  --warn:      #ffb84d;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;

  --shadow-1: 0 6px 0 rgba(0,0,0,0.06), 0 10px 24px rgba(124,92,240,0.16);
  --shadow-2: 0 10px 0 rgba(0,0,0,0.07), 0 18px 40px rgba(124,92,240,0.22);
  --shadow-press: 0 2px 0 rgba(0,0,0,0.06), 0 6px 14px rgba(124,92,240,0.18);

  --font: "Segoe UI Rounded", "Nunito", "Baloo 2", "Comic Sans MS",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --tap: 64px; /* минимальная зона нажатия */
}

* { box-sizing: border-box; }

/* атрибут hidden должен побеждать display из правил ниже */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(160deg, #fde7f4 0%, #e7f0ff 45%, #e9fff0 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
}

/* ---------- Декоративный фон ---------- */
.bg-decor { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  opacity: 0.45;
  animation: floaty 12s ease-in-out infinite;
}
.blob-1 { width: 38vmax; height: 38vmax; left: -10vmax; top: -8vmax;
  background: radial-gradient(circle at 30% 30%, var(--c-pink), transparent 70%); }
.blob-2 { width: 30vmax; height: 30vmax; right: -8vmax; top: 20vmax;
  background: radial-gradient(circle at 30% 30%, var(--c-blue), transparent 70%);
  animation-delay: -4s; }
.blob-3 { width: 34vmax; height: 34vmax; left: 30vmax; bottom: -14vmax;
  background: radial-gradient(circle at 30% 30%, var(--c-yellow), transparent 70%);
  animation-delay: -8s; }

@keyframes floaty {
  0%,100% { transform: translateY(0) translateX(0) scale(1); }
  50%     { transform: translateY(-3vmax) translateX(2vmax) scale(1.06); }
}

/* ---------- Каркас приложения ---------- */
.app-shell {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 20px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Верхняя панель ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: clamp(8px, 2vw, 18px);
}
.topbar__title {
  flex: 1;
  text-align: center;
  margin: 0;
  font-size: clamp(1.2rem, 4.4vw, 2rem);
  color: var(--c-purple-d);
  text-shadow: 0 2px 0 #fff;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__btn {
  border: none;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  min-height: 48px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topbar__btn:active { transform: translateY(3px); box-shadow: var(--shadow-press); }
.topbar__btn:focus-visible { outline: 4px solid var(--c-purple); outline-offset: 3px; }
.topbar__sound { min-width: 48px; justify-content: center; font-size: 1.3rem; padding: 0; }
.topbar__avatar { min-width: 48px; justify-content: center; font-size: 1.5rem; padding: 0; }
.topbar__back-ico { font-size: 1.3rem; line-height: 1; }
.topbar__btn[aria-pressed="false"] { opacity: .65; }

/* ---------- Экран ---------- */
.screen { flex: 1; outline: none; }
.appfoot {
  text-align: center;
  color: var(--ink-soft);
  font-size: .85rem;
  padding: 14px 0 8px;
  opacity: .8;
}

/* =========================================================
   МЕНЮ
   ========================================================= */
.menu__hello {
  text-align: center;
  margin: clamp(6px, 2vw, 18px) 0 clamp(14px, 3vw, 26px);
}
.menu__hello h2 {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 3.2rem);
  color: var(--c-pink-d);
  text-shadow: 0 3px 0 #fff, 0 4px 10px rgba(240,86,143,.25);
  animation: pop-in .5s ease both;
}
.menu__hello p {
  margin: 8px 0 0;
  font-size: clamp(1rem, 3.4vw, 1.4rem);
  color: var(--ink-soft);
  font-weight: 700;
}

.menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 2.4vw, 22px);
}

.game-card {
  position: relative;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: pop-in .5s ease both;
}
.game-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--accent, var(--c-pink));
}
.game-card:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--shadow-2); }
.game-card:active { transform: translateY(-1px); box-shadow: var(--shadow-press); }
.game-card:focus-visible { outline: 4px solid var(--c-purple); outline-offset: 3px; }

.game-card__emoji {
  font-size: clamp(3rem, 9vw, 4.4rem);
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.12));
}
.game-card__title {
  font-size: clamp(1.2rem, 3.6vw, 1.6rem);
  font-weight: 800;
  margin-top: 4px;
}
.game-card__desc { color: var(--ink-soft); font-size: .98rem; font-weight: 600; }
.game-card__best {
  margin-top: auto;
  font-size: .85rem;
  font-weight: 800;
  color: var(--accent-d, var(--c-pink-d));
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Адаптивная рекомендация: мягкое выделение одной карточки + бейдж. */
.game-card--recommended {
  box-shadow: 0 0 0 3px var(--c-yellow, #ffd84d), var(--shadow-2);
  animation: rec-pulse 2.2s ease-in-out infinite;
}
.game-card--recommended:hover { box-shadow: 0 0 0 3px var(--c-yellow, #ffd84d), var(--shadow-2); }
.game-card__rec {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: clamp(.62rem, 2.4vw, .75rem); font-weight: 900; line-height: 1;
  color: #6b4b00; background: var(--c-yellow, #ffd84d);
  border-radius: 999px; padding: 5px 9px; box-shadow: var(--shadow-1);
  white-space: nowrap; pointer-events: none;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--c-yellow, #ffd84d), var(--shadow-2); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 216, 77, .55), var(--shadow-2); }
}
@media (prefers-reduced-motion: reduce) { .game-card--recommended { animation: none; } }

/* стаггеред-анимация карточек */
.game-card:nth-child(1){animation-delay:.04s}
.game-card:nth-child(2){animation-delay:.10s}
.game-card:nth-child(3){animation-delay:.16s}
.game-card:nth-child(4){animation-delay:.22s}
.game-card:nth-child(5){animation-delay:.28s}

/* =========================================================
   ИГРЫ — общий каркас
   ========================================================= */
.gscreen {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(16px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vw, 22px);
  animation: pop-in .35s ease both;
}

/* старт-экран игры */
.gstart { text-align: center; align-items: center; }
.gstart__emoji { font-size: clamp(4rem, 16vw, 6rem); line-height: 1; }
.gstart__title { margin: 0; font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--c-purple-d); }
.gstart__rules { color: var(--ink-soft); font-size: clamp(1rem, 3.4vw, 1.25rem); max-width: 30ch; margin: 0 auto; font-weight: 600; }
.gstart__rules-row { display: inline-flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* кнопка озвучки 🔊 — не перекрывает текст, отдельная круглая кнопка */
.btn-speak {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: var(--shadow-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-speak:hover { filter: brightness(1.05); }
.btn-speak:active { transform: translateY(3px); box-shadow: var(--shadow-press); }
.btn-speak:focus-visible { outline: 4px solid var(--c-yellow); outline-offset: 3px; }

/* состояния озвучки: загрузка аудио (EL) и активное «говорит сейчас» */
.btn-speak.is-loading {
  animation: speak-spin .8s linear infinite;
  opacity: .85;
}
.btn-speak.is-speaking {
  background: #7bd88f;            /* мягкий зелёный — «звучит» */
  color: #0c4a23;
  animation: speak-pulse 1s ease-in-out infinite;
}
@keyframes speak-spin  { to { transform: rotate(360deg); } }
@keyframes speak-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .btn-speak.is-loading, .btn-speak.is-speaking { animation: none; }
  .btn-speak.is-speaking { box-shadow: 0 0 0 4px #7bd88f; }
}

/* Кнопка «ответить голосом» — рядом с кнопкой озвучки, тот же круглый стиль. */
.btn-mic {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  background: var(--c-purple, #b58cff);
  color: #fff;
  border-radius: 999px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: var(--shadow-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-mic:hover { filter: brightness(1.06); }
.btn-mic:active { transform: translateY(3px); box-shadow: var(--shadow-press); }
.btn-mic:focus-visible { outline: 4px solid var(--c-yellow); outline-offset: 3px; }
/* активное прослушивание — заметная «красная» пульсация */
.btn-mic.is-listening {
  background: #ff6b6b;
  animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, .55); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-mic.is-listening { animation: none; box-shadow: 0 0 0 4px #ff6b6b; }
}

/* Игра «Назови букву»: крупная буква по центру + большая кнопка микрофона. */
.speak-letter {
  text-align: center;
  font-size: clamp(5rem, 30vw, 11rem);
  font-weight: 900;
  line-height: 1;
  color: var(--c-purple, #b58cff);
  margin: clamp(8px, 3vw, 20px) 0;
}
.btn-mic--big {
  display: flex;
  margin: clamp(6px, 2vw, 14px) auto 0;
  width: clamp(72px, 22vw, 96px);
  height: clamp(72px, 22vw, 96px);
  min-width: clamp(72px, 22vw, 96px);
  font-size: clamp(2rem, 9vw, 2.8rem);
}
/* Слово в игре «Прочитай слово»: крупно, но мельче одиночной буквы и переносится. */
.speak-word {
  text-align: center;
  font-size: clamp(2.6rem, 14vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--c-blue, #4dabf7);
  margin: clamp(8px, 3vw, 20px) 0;
  word-break: break-word;
}

/* кнопки */
.btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  border-radius: 999px;
  min-height: var(--tap);
  padding: 0 clamp(22px, 4vw, 34px);
  font-size: clamp(1.1rem, 3.6vw, 1.35rem);
  color: #fff;
  background: var(--c-purple-d);
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: var(--shadow-press); }
.btn:focus-visible { outline: 4px solid var(--c-yellow); outline-offset: 3px; }
.btn--big { font-size: clamp(1.3rem, 5vw, 1.7rem); min-height: 76px; }
.btn--pink   { background: var(--c-pink-d); }
.btn--green  { background: var(--c-green-d); }
.btn--blue   { background: var(--c-blue-d); }
.btn--ghost  { background: #fff; color: var(--c-purple-d); box-shadow: var(--shadow-1); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* HUD: прогресс + счёт */
.ghud {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ghud__progress {
  flex: 1;
  min-width: 140px;
  height: 16px;
  background: #efe6f5;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
}
.ghud__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-green), var(--c-blue));
  border-radius: 999px;
  transition: width .4s cubic-bezier(.34,1.56,.64,1);
}
.ghud__score {
  font-weight: 800;
  color: var(--c-purple-d);
  font-size: 1.05rem;
  white-space: nowrap;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* вопрос-блок */
.gprompt {
  text-align: center;
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 800;
  color: var(--ink);
  min-height: 1.4em;
}
.gprompt small { display:block; font-size: .6em; color: var(--ink-soft); font-weight: 700; margin-top: 4px; }

/* строка «задание + 🔊»: кнопка сбоку, текст по центру, без наложений */
.gprompt-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.gprompt-row .gprompt { flex: 0 1 auto; }

/* визуал задания (например, считаемые предметы) */
.gstage {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 1.6vw, 14px);
  justify-content: center;
  align-items: center;
  min-height: 90px;
  padding: 10px;
}
.gstage .count-item {
  font-size: clamp(2.4rem, 9vw, 4rem);
  line-height: 1;
  animation: pop-in .35s ease both;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.12));
}
.gstage .word-card {
  text-align: center;
}
.gstage .word-card .word-emoji { font-size: clamp(4rem, 18vw, 7rem); line-height: 1; display:block; }
.gstage .word-card .word-text {
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  font-weight: 800;
  color: var(--c-purple-d);
  letter-spacing: 1px;
}
.gstage .word-card .word-text .first { color: var(--c-pink-d); }

/* сетка вариантов ответа */
.goptions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(10px, 2vw, 16px);
}
.goptions--2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; margin: 0 auto; width: 100%; }

.option {
  position: relative;
  border: 4px solid transparent;
  cursor: pointer;
  background: var(--paper);
  border-radius: var(--radius-md);
  min-height: var(--tap);
  padding: clamp(12px, 2vw, 18px);
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(1.6rem, 6vw, 2.6rem);
}
.option:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.option:active { transform: translateY(0); box-shadow: var(--shadow-press); }
.option:focus-visible { outline: 4px solid var(--c-purple); outline-offset: 3px; }
.option svg { width: clamp(56px, 16vw, 96px); height: clamp(56px, 16vw, 96px); display: block; }
.option .opt-num { font-size: clamp(2.2rem, 9vw, 3.6rem); }
.option .opt-letter { font-size: clamp(2.6rem, 11vw, 4rem); font-weight: 900; }
.option .opt-emoji { font-size: clamp(2.6rem, 12vw, 4.2rem); line-height: 1; }

.option[disabled] { cursor: default; }
.option.is-correct {
  border-color: var(--ok);
  background: #eafff0;
  animation: correct-pop .5s ease;
}
.option.is-wrong {
  border-color: var(--c-red);
  background: #fff0f0;
  animation: shake .45s ease;
  opacity: .85;
}
.option.is-dim { opacity: .35; filter: grayscale(.3); }

/* всплывающая реакция */
.gfeedback {
  text-align: center;
  font-size: clamp(1.2rem, 4.6vw, 1.7rem);
  font-weight: 800;
  min-height: 1.6em;
  transition: opacity .2s ease;
}
.gfeedback.ok  { color: var(--c-green-d); }
.gfeedback.bad { color: var(--c-orange); }
.gfeedback .emoji { font-size: 1.3em; }

/* =========================================================
   ЭКРАН РЕЗУЛЬТАТА
   ========================================================= */
.gresult { text-align: center; align-items: center; }
.gresult__emoji { font-size: clamp(4rem, 18vw, 7rem); line-height: 1; animation: bounce 1s ease infinite; }
.gresult__title { margin: 0; font-size: clamp(1.8rem, 7vw, 2.6rem); color: var(--c-pink-d); }
.gresult__msg { color: var(--ink-soft); font-size: clamp(1.05rem, 3.6vw, 1.3rem); font-weight: 700; }
.gresult__stars { font-size: clamp(2.6rem, 12vw, 4.2rem); letter-spacing: 6px; }
.gresult__stars .star-on  { filter: drop-shadow(0 4px 6px rgba(255,180,0,.5)); animation: star-pop .5s ease both; }
.gresult__stars .star-off { opacity: .25; filter: grayscale(1); }
.gresult__stars .star-on:nth-child(1){animation-delay:.1s}
.gresult__stars .star-on:nth-child(2){animation-delay:.3s}
.gresult__stars .star-on:nth-child(3){animation-delay:.5s}
.gresult__score { font-size: clamp(1.1rem, 4vw, 1.4rem); font-weight: 800; color: var(--c-purple-d); }

/* =========================================================
   ИГРА «ПАМЯТЬ» (мемори)
   ========================================================= */
.memory-board {
  display: grid;
  gap: clamp(8px, 1.8vw, 14px);
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
}
.mcard {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none;
  background: transparent;
  cursor: pointer;
  perspective: 700px;
  padding: 0;
  font-family: inherit;
}
.mcard:focus-visible { outline: 4px solid var(--c-purple); outline-offset: 3px; border-radius: var(--radius-sm); }
.mcard__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.34,1.4,.64,1);
  border-radius: var(--radius-sm);
}
.mcard.is-up .mcard__inner,
.mcard.is-matched .mcard__inner { transform: rotateY(180deg); }
.mcard__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
}
.mcard__back {
  background: linear-gradient(135deg, var(--c-purple), var(--c-blue));
  color: #fff;
  font-size: clamp(1.6rem, 7vw, 2.6rem);
}
.mcard__front {
  background: #fff;
  transform: rotateY(180deg);
  font-size: clamp(2rem, 9vw, 3.4rem);
}
.mcard.is-matched .mcard__front { background: #eafff0; animation: correct-pop .5s ease; }
.mcard.is-matched { cursor: default; }
.mcard.is-locked { cursor: default; }

/* =========================================================
   КОНФЕТТИ
   ========================================================= */
.fx-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.confetti {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 16px;
  border-radius: 3px;
  will-change: transform, opacity;
  animation: confetti-fall linear forwards;
}

/* =========================================================
   АНИМАЦИИ
   ========================================================= */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes correct-pop {
  0%{ transform: scale(1); } 40%{ transform: scale(1.12); } 100%{ transform: scale(1); }
}
@keyframes shake {
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); } 40%{ transform: translateX(8px); }
  60%{ transform: translateX(-6px); } 80%{ transform: translateX(6px); }
}
@keyframes bounce {
  0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); }
}
@keyframes star-pop {
  from{ transform: scale(0) rotate(-30deg); opacity: 0; }
  to  { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .9; }
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 640px) {
  .topbar__back-txt { display: none; }       /* на телефоне только стрелка */
  .menu__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .goptions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .menu__grid { grid-template-columns: 1fr; }
}

/* планшет — 2 колонки карточек крупно */
@media (min-width: 641px) and (max-width: 900px) {
  .menu__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Уважение к настройкам пользователя */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .blob { animation: none; }
}

/* =========================================================
   НАГРАДЫ — блок на экране результата
   ========================================================= */
.reward-block {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  margin: 4px auto 0;
  max-width: 420px;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-1);
  border: 3px solid #eee;
}
.reward-block--new {
  border-color: var(--c-yellow);
  background: linear-gradient(135deg, #fffaf0, #fff);
  animation: reward-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.reward-block__icon {
  font-size: clamp(2.2rem, 9vw, 3rem);
  line-height: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.15));
}
.reward-block--new .reward-block__icon { animation: bounce 1s ease infinite; }
.reward-block__info { min-width: 0; }
.reward-block__status {
  font-weight: 800;
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  color: var(--c-purple-d);
}
.reward-block--new .reward-block__status { color: var(--c-orange-d); }
.reward-block__name {
  font-weight: 700;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* =========================================================
   НАГРАДЫ — вход в альбом из меню
   ========================================================= */
.album-entry {
  margin-top: clamp(12px, 2.4vw, 22px);
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);            /* тёмный текст для контраста на ярком баннере */
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 2.4vw, 20px) clamp(16px, 3vw, 26px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-yellow), var(--c-orange));
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: pop-in .5s ease both;
}
.album-entry:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.album-entry:active { transform: translateY(0); box-shadow: var(--shadow-press); }
.album-entry:focus-visible { outline: 4px solid var(--c-purple); outline-offset: 3px; }
.album-entry__icon { font-size: clamp(2.4rem, 9vw, 3.2rem); line-height: 1; flex: 0 0 auto;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.2)); }
.album-entry__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.album-entry__title { font-size: clamp(1.2rem, 4vw, 1.6rem); font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.album-entry__desc { font-size: clamp(.85rem, 3vw, 1rem); font-weight: 700; opacity: .95; }

/* Лента: событие + ряд кудос-реакций (пункт 31). */
.feed-item { display: flex; flex-direction: column; gap: 6px; }
.kudos-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 4px 4px; }
.kudos-btn { padding: 6px 12px; font-size: clamp(1.1rem, 4vw, 1.4rem); line-height: 1; min-width: 44px; }
.kudos-btn--done { background: var(--c-green, #7bc47f); box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.kudos-btn[disabled] { opacity: .55; cursor: default; }
.kudos-bar__hint { font-size: clamp(.8rem, 3vw, .95rem); font-weight: 700; opacity: .95; }

/* Рейтинг друзей (пункт 39): переключатель метрик + строки таблицы. */
.leaderboard-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 4px 8px; }
.leaderboard-metric { padding: 6px 14px; font-size: clamp(.95rem, 3.5vw, 1.2rem); line-height: 1; }
.leaderboard-metric--active { background: var(--c-green, #7bc47f); box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.leaderboard-select { font-weight: 800; }
.leaderboard-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.leaderboard-row__rank { flex: 0 0 auto; font-weight: 900; font-size: clamp(1.1rem, 4vw, 1.5rem);
  color: var(--c-orange-d); min-width: 44px; }
.leaderboard-row__who { flex: 1; min-width: 0; font-weight: 800; font-size: clamp(1rem, 3.5vw, 1.3rem); }
.leaderboard-row__score { flex: 0 0 auto; font-weight: 900; font-size: clamp(1.1rem, 4vw, 1.5rem);
  background: rgba(255,255,255,.92); color: var(--c-orange-d); border-radius: 999px; padding: 6px 14px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08); }

/* Общие цели/челленджи (пункт 42): карточка + кооп progress-bar. */
.challenge-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.challenge-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.challenge-metric { font-weight: 800; font-size: clamp(1rem, 3.5vw, 1.3rem); }
.challenge-row__amount { flex: 0 0 auto; font-weight: 900; font-size: clamp(.95rem, 3.2vw, 1.2rem);
  color: var(--c-orange-d); }
.challenge-bar { position: relative; height: 16px; border-radius: 999px; overflow: hidden;
  background: rgba(0,0,0,.12); box-shadow: inset 0 2px 4px rgba(0,0,0,.12); }
.challenge-bar__fill { height: 100%; border-radius: 999px; background: var(--c-green, #7bc47f);
  transition: width .35s ease; min-width: 0; max-width: 100%; }

/* Задания куратора (пункт 44): карточка задания + бейдж «Просрочено» (переиспользует .challenge-bar). */
.assignment-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.assignment-row__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.assignment-target { font-weight: 800; font-size: clamp(1rem, 3.5vw, 1.3rem); min-width: 0;
  overflow-wrap: anywhere; flex: 1 1 auto; }
.assignment-row__count { flex: 0 0 auto; font-weight: 900; font-size: clamp(.95rem, 3.2vw, 1.2rem);
  color: var(--c-orange-d); }
.assignment-row__due { font-size: clamp(.85rem, 3vw, 1rem); font-weight: 700; opacity: .9; }
.assignment-badge { flex: 0 0 auto; font-weight: 800; font-size: clamp(.75rem, 2.6vw, .9rem);
  border-radius: 999px; padding: 2px 10px; }
.assignment-badge--overdue { background: rgba(220,60,60,.16); color: #b02a2a; }

/* Форма создания задания куратором (пункт 44 client): минимальные поля в духе .gscreen__detail/.btn-row. */
.assignment-create__kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.assignment-create__kind { padding: 6px 14px; font-size: clamp(.95rem, 3.5vw, 1.15rem); }
.assignment-create__kind--active { background: var(--c-green, #7bc47f); box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.assignment-create__label { display: block; font-weight: 700; margin: 8px 0 4px; opacity: .9; }
.assignment-create__field { width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px 10px;
  font-size: clamp(.95rem, 3.5vw, 1.15rem); font-weight: 700; border-radius: 10px;
  border: 2px solid rgba(0,0,0,.12); background: rgba(255,255,255,.92); }

/* Дашборд прогресса заданий по детям (пункт 44 client): строка ребёнка + компактные статусы (бар —
   переиспользует .challenge-bar). */
.dashboard-child-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.dashboard-child-row__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.dashboard-child__who { font-weight: 800; font-size: clamp(1rem, 3.5vw, 1.3rem); flex: 1 1 auto;
  min-width: 0; overflow-wrap: anywhere; }
.dashboard-child__count { flex: 0 0 auto; font-weight: 900; font-size: clamp(.95rem, 3.2vw, 1.2rem);
  color: var(--c-orange-d); }
.dashboard-child__overdue { flex: 0 0 auto; }
.dashboard-child__dots { display: flex; flex-wrap: wrap; gap: 4px; }
.dashboard-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
  height: 22px; border-radius: 999px; font-size: clamp(.8rem, 2.8vw, 1rem); font-weight: 800;
  background: rgba(0,0,0,.06); }
.dashboard-dot--done { background: rgba(110,190,120,.22); color: #2e7d32; }
.dashboard-dot--overdue { background: rgba(220,60,60,.16); color: #b02a2a; }
.dashboard-dot--pending { background: rgba(0,0,0,.08); color: #555; }

.album-entry__count {
  flex: 0 0 auto;
  font-weight: 900;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  background: rgba(255,255,255,.92);
  color: var(--c-orange-d);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
  white-space: nowrap;
}

/* =========================================================
   НАГРАДЫ — экран альбома
   ========================================================= */
.album { text-align: center; }
.album__head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.album__trophy { font-size: clamp(3rem, 12vw, 4.4rem); line-height: 1;
  animation: bounce 1.4s ease infinite; }
.album__title { margin: 0; font-size: clamp(1.6rem, 6vw, 2.2rem); color: var(--c-orange-d); }
.album__progress {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  color: var(--c-purple-d);
  background: #fff;
  border-radius: 999px;
  padding: 6px 18px;
  box-shadow: var(--shadow-1);
}
.album__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(12px, 2.4vw, 18px);
}
.reward-card {
  border-radius: var(--radius-md);
  padding: clamp(14px, 2.4vw, 22px) 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-1);
  animation: pop-in .4s ease both;
}
.reward-card--got {
  background: #fff;
  border: 3px solid var(--c-green);
}
.reward-card--locked {
  background: #f1edf6;
  border: 3px dashed #cfc4dc;
}
.reward-card__icon {
  font-size: clamp(2.8rem, 11vw, 4rem);
  line-height: 1;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.12));
}
.reward-card--locked .reward-card__icon { opacity: .8; filter: grayscale(.3); }
.reward-card__name {
  font-weight: 800;
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  color: var(--ink);
}
.reward-card--locked .reward-card__name { color: var(--ink-soft); }
.reward-card__desc {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.25;
}

/* мобильная ширина: вход в альбом компактнее, альбом в 2 колонки */
@media (max-width: 640px) {
  .album__grid { grid-template-columns: repeat(2, 1fr); }
  .album-entry__desc { display: none; }
}
@media (max-width: 360px) {
  .album__grid { grid-template-columns: 1fr; }
}

@keyframes reward-pop {
  from { opacity: 0; transform: scale(.7) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* =========================================================
   ЗОЛОТЫЕ НАГРАДЫ — результат (стек из двух блоков) и золотой блок
   ========================================================= */
.reward-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.reward-stack .reward-block { margin-top: 0; }

.reward-block--gold {
  border-color: var(--c-gold);
  background: linear-gradient(135deg, #fff3cd, #fff);
}
/* объявлено ПОСЛЕ .reward-block--new — золотой статус читаемого тёмно-золотого цвета */
.reward-block--gold .reward-block__status { color: var(--c-gold-d); }

/* =========================================================
   ЗОЛОТЫЕ НАГРАДЫ — секции альбома
   ========================================================= */
.album__section { margin-top: clamp(10px, 2vw, 18px); }
.album__section-title {
  margin: 0 0 10px;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 800;
  color: var(--c-purple-d);
}
.album__section--gold .album__section-title { color: var(--c-gold-d); }

/* открытая золотая карточка визуально отличается от закрытой и от базовой */
.reward-card--gold {
  background: linear-gradient(135deg, #fff3cd, #fff);
  border: 3px solid var(--c-gold);
}
.reward-card--gold .reward-card__name { color: var(--c-gold-d); }

/* очень узкие экраны (320–360px): не допускаем наложений */
@media (max-width: 360px) {
  .reward-block { gap: 10px; padding: 12px 14px; }
  .reward-block__icon { font-size: clamp(2rem, 11vw, 2.6rem); }
}

/* =========================================================
   ПРОФИЛЬ — экран выбора имени и аватара
   ========================================================= */
.profile {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vw, 22px);
  align-items: stretch;
}
.profile__hero { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile__avatar {
  font-size: clamp(3.4rem, 16vw, 5rem);
  line-height: 1;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.16));
  animation: bounce 1.6s ease infinite;
}
.profile__hello {
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  font-weight: 800;
  color: var(--c-pink-d);
  text-align: center;
  text-shadow: 0 2px 0 #fff;
  word-break: break-word;
}
.profile__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.profile__label {
  font-weight: 800;
  color: var(--c-purple-d);
  font-size: clamp(1rem, 3.6vw, 1.2rem);
}
.profile__label--center { text-align: center; }
.profile__input {
  font-family: inherit;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 700;
  color: var(--ink);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 3px solid #e6d8f0;
  background: #fff;
  min-height: 56px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-1);
}
.profile__input:focus-visible {
  outline: none;
  border-color: var(--c-purple);
  box-shadow: 0 0 0 4px rgba(167,139,250,.3);
}
.profile__avatars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 2vw, 14px);
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.avatar-choice {
  border: 4px solid transparent;
  background: #fff;
  border-radius: var(--radius-md);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  min-height: 52px;
}
.avatar-choice__emoji { font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1; }
.avatar-choice:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.avatar-choice:active { transform: translateY(0); }
.avatar-choice:focus-visible { outline: 4px solid var(--c-purple); outline-offset: 2px; }
.avatar-choice.is-active {
  border-color: var(--c-green);
  background: #eafff0;
}

/* на узких экранах аватары в 3 колонки — крупнее и без тесноты */
@media (max-width: 480px) {
  .profile__avatars { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   ПИТОМЕЦ-КОМПАНЬОН — виджет в меню
   Маленькая карточка между приветствием и сеткой игр.
   ========================================================= */
.pet-widget {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 18px);
  margin: 0 0 clamp(14px, 3vw, 24px);
  padding: clamp(12px, 2.4vw, 18px) clamp(14px, 3vw, 22px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff 0%, var(--paper-2) 100%);
  box-shadow: var(--shadow-1);
  border: 3px solid rgba(167, 139, 250, .35);
  animation: pop-in .5s ease both;
}
.pet-widget__avatar {
  flex: 0 0 auto;
  font-size: clamp(2.6rem, 10vw, 3.6rem);
  line-height: 1;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .18));
  animation: bounce 1.8s ease infinite;
}
.pet-widget__body { flex: 1; min-width: 0; }
.pet-widget__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pet-widget__name {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 800;
  color: var(--c-purple-d);
}
.pet-widget__level {
  flex: 0 0 auto;
  font-size: clamp(.8rem, 3vw, 1rem);
  font-weight: 900;
  color: var(--c-purple-d);
  background: rgba(167, 139, 250, .18);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}
.pet-widget__speech-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.pet-widget__speech {
  margin: 4px 0 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(124, 92, 240, .10);
  font-size: clamp(.85rem, 3vw, 1.05rem);
  font-weight: 700;
  color: var(--c-purple-d);
  line-height: 1.25;
}
/* внутри строки с кнопкой облачко тянется, а внешние отступы держит строка */
.pet-widget__speech-row .pet-widget__speech { margin: 0; flex: 1 1 auto; min-width: 0; }
/* компактная кнопка озвучки реплики питомца */
.btn-speak--mini { width: 40px; height: 40px; min-width: 40px; font-size: 1.1rem; }
.pet-widget__speech--happy {
  background: linear-gradient(135deg, rgba(255, 210, 63, .35), rgba(255, 159, 67, .30));
  color: var(--c-orange-d);
  animation: pop-in .4s ease both;
}
.pet-widget__mood {
  margin: 2px 0 8px;
  font-size: clamp(.9rem, 3.2vw, 1.1rem);
  font-weight: 700;
  color: var(--ink-soft);
}
.pet-widget__bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(124, 92, 240, .14);
  overflow: hidden;
}
.pet-widget__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-purple), var(--c-pink));
  transition: width .4s ease;
  min-width: 0;
}
.pet-widget__tasks {
  margin-top: 6px;
  font-size: clamp(.78rem, 2.8vw, .95rem);
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---- Виджет ежедневной цели / серии (streak) ---- */
.streak-widget {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 18px);
  margin: 0 0 clamp(14px, 3vw, 24px);
  padding: clamp(12px, 2.4vw, 18px) clamp(14px, 3vw, 22px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff 0%, var(--paper-2) 100%);
  box-shadow: var(--shadow-1);
  border: 3px solid rgba(255, 159, 67, .35);
  animation: pop-in .5s ease both;
}
.streak-widget--done {
  border-color: rgba(95, 208, 104, .55);
  background: linear-gradient(135deg, rgba(255, 210, 63, .25), rgba(95, 208, 104, .18));
}
.streak-widget__icon {
  flex: 0 0 auto;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 1;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .18));
}
.streak-widget--done .streak-widget__icon { animation: bounce 1.8s ease infinite; }
.streak-widget__body { flex: 1; min-width: 0; }
.streak-widget__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.streak-widget__title {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 800;
  color: var(--c-orange-d);
}
.streak-widget__streak {
  flex: 0 0 auto;
  font-size: clamp(.8rem, 3vw, 1rem);
  font-weight: 900;
  color: var(--c-orange-d);
  background: rgba(255, 159, 67, .18);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}
.streak-widget__bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 159, 67, .16);
  overflow: hidden;
  margin: 8px 0 6px;
}
.streak-widget__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-orange), var(--c-yellow));
  transition: width .4s ease;
  min-width: 0;
}
.streak-widget--done .streak-widget__bar-fill {
  background: linear-gradient(90deg, var(--c-green), var(--c-yellow));
}
.streak-widget__status {
  font-size: clamp(.85rem, 3vw, 1.05rem);
  font-weight: 700;
  color: var(--ink-soft);
}
.streak-widget--done .streak-widget__status { color: var(--c-green-d); }

/* =========================================================
   АККАУНТЫ — экран выбора игрока (несколько детских профилей)
   ========================================================= */
.accounts { display: flex; flex-direction: column; gap: clamp(12px, 2.4vw, 18px); }
.accounts__title {
  font-size: clamp(1.3rem, 5vw, 1.8rem); font-weight: 900; color: var(--ink);
  text-align: center; margin: clamp(6px, 2vw, 12px) 0;
}
.accounts__status {
  text-align: center; font-weight: 700; color: var(--ink-soft);
  font-size: clamp(.9rem, 3vw, 1.05rem);
}
.accounts__list { display: flex; flex-direction: column; gap: clamp(10px, 2vw, 14px); }
.account-card {
  width: 100%; border: 3px solid transparent; cursor: pointer; font-family: inherit;
  text-align: left; color: var(--ink); display: flex; align-items: center; gap: 16px;
  padding: clamp(12px, 2.2vw, 18px) clamp(14px, 3vw, 22px);
  border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.account-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.account-card:active { transform: translateY(0); box-shadow: var(--shadow-press); }
.account-card:focus-visible { outline: 4px solid var(--c-purple); outline-offset: 3px; }
.account-card[disabled] { opacity: .6; cursor: default; transform: none; }
.account-card.is-active { border-color: var(--c-green); background: linear-gradient(135deg, #fff, #eafbe9); }
.account-card__avatar { font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1; flex: 0 0 auto;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
.account-card__name { flex: 1; min-width: 0; font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card__badge {
  flex: 0 0 auto; font-weight: 900; font-size: clamp(.8rem, 3vw, 1rem);
  background: var(--c-green); color: #fff; border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
.album-entry--accounts { background: linear-gradient(135deg, var(--c-purple, #b58cff), var(--c-blue, #8ec5ff)); }
.album-entry--auth { background: linear-gradient(135deg, var(--c-green, #5fd068), var(--c-blue, #8ec5ff)); }
.album-entry--lobby { background: linear-gradient(135deg, var(--c-blue, #8ec5ff), var(--c-purple, #b58cff)); }

/* =========================================================
   АККАУНТ — экран #/auth (регистрация / вход)
   ========================================================= */
.auth { display: flex; flex-direction: column; gap: clamp(12px, 2.4vw, 18px); max-width: 460px; margin: 0 auto; width: 100%; }
.auth__title {
  font-size: clamp(1.3rem, 5vw, 1.8rem); font-weight: 900; color: var(--ink);
  text-align: center; margin: clamp(6px, 2vw, 12px) 0;
}
.auth__hint {
  text-align: center; color: var(--ink-soft); font-weight: 700;
  font-size: clamp(.85rem, 2.8vw, 1rem); line-height: 1.4;
}
.auth__tabs { display: flex; gap: 8px; }
.auth__tab {
  flex: 1; cursor: pointer; font-family: inherit; font-weight: 800;
  font-size: clamp(1rem, 3.5vw, 1.2rem); color: var(--c-purple-d);
  background: #fff; border: 3px solid transparent; border-radius: var(--radius-lg);
  padding: clamp(10px, 2vw, 14px); box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.auth__tab.is-active { border-color: var(--c-green); background: linear-gradient(135deg, #fff, #eafbe9); }
.auth__tab:focus-visible { outline: 4px solid var(--c-purple); outline-offset: 3px; }
.auth__tab[disabled] { opacity: .6; cursor: default; }
.auth__form { display: flex; flex-direction: column; gap: clamp(10px, 2vw, 14px); }
.auth__input {
  width: 100%; font-family: inherit; font-size: clamp(1.05rem, 4vw, 1.3rem);
  color: var(--ink); background: #fff; border: 3px solid #e7e0f5;
  border-radius: var(--radius-lg); padding: clamp(12px, 2.4vw, 16px) clamp(14px, 3vw, 18px);
  box-shadow: var(--shadow-1); box-sizing: border-box;
}
.auth__input:focus { outline: none; border-color: var(--c-purple); }
.auth__input[disabled] { opacity: .6; }
.auth__status {
  text-align: center; font-weight: 800; min-height: 1.4em;
  font-size: clamp(.9rem, 3vw, 1.05rem); color: var(--ink-soft); margin: 0;
}
.auth__status--err { color: #d6336c; }
.auth__status--ok { color: var(--c-green-d); }
.auth__card {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  padding: clamp(14px, 3vw, 22px); border: 3px solid var(--c-green);
}
.auth__who { color: var(--ink-soft); font-weight: 700; font-size: clamp(.85rem, 2.8vw, 1rem); }
.auth__login { color: var(--ink); font-weight: 900; font-size: clamp(1.2rem, 5vw, 1.6rem); word-break: break-word; }

/* =========================================================
   ЛОББИ — экран #/lobby (игра по сети: комнаты)
   ========================================================= */
.lobby { display: flex; flex-direction: column; gap: clamp(12px, 2.4vw, 18px); max-width: 460px; margin: 0 auto; width: 100%; }
.lobby__title {
  font-size: clamp(1.3rem, 5vw, 1.8rem); font-weight: 900; color: var(--ink);
  text-align: center; margin: clamp(6px, 2vw, 12px) 0;
}
.lobby__hint {
  text-align: center; color: var(--ink-soft); font-weight: 700;
  font-size: clamp(.85rem, 2.8vw, 1rem); line-height: 1.4;
}
.lobby__or { text-align: center; color: var(--ink-soft); font-weight: 800; }
.lobby__form { display: flex; flex-direction: column; gap: clamp(10px, 2vw, 14px); }
.lobby__input {
  width: 100%; font-family: inherit; font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  color: var(--ink); background: #fff; border: 3px solid #e7e0f5; text-align: center;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 900;
  border-radius: var(--radius-lg); padding: clamp(12px, 2.4vw, 16px) clamp(14px, 3vw, 18px);
  box-shadow: var(--shadow-1); box-sizing: border-box;
}
.lobby__input:focus { outline: none; border-color: var(--c-purple); }
.lobby__status {
  text-align: center; font-weight: 800; min-height: 1.4em;
  font-size: clamp(.9rem, 3vw, 1.05rem); color: var(--ink-soft); margin: 0;
}
.lobby__status--err { color: #d6336c; }
.lobby__code-card {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  padding: clamp(14px, 3vw, 22px); border: 3px solid var(--c-blue, #8ec5ff);
}
.lobby__code-label { color: var(--ink-soft); font-weight: 700; font-size: clamp(.85rem, 2.8vw, 1rem); }
.lobby__code {
  color: var(--ink); font-weight: 900; letter-spacing: .18em;
  font-size: clamp(2rem, 11vw, 3.2rem); line-height: 1;
}
.lobby__code-hint { color: var(--ink-soft); font-weight: 700; font-size: clamp(.8rem, 2.6vw, .95rem); text-align: center; }
.lobby__members-title { font-weight: 900; color: var(--ink); font-size: clamp(1rem, 3.6vw, 1.25rem); }
.lobby__members { display: flex; flex-direction: column; gap: clamp(8px, 1.6vw, 12px); }
.lobby__member {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.6vw, 18px); border: 3px solid transparent;
}
.lobby__member.is-host { border-color: var(--c-yellow, #ffd23f); background: linear-gradient(135deg, #fff, #fffbe6); }
.lobby__member-ico { font-size: clamp(1.4rem, 6vw, 1.9rem); line-height: 1; flex: 0 0 auto; }
.lobby__member-name { flex: 1; min-width: 0; font-weight: 800; color: var(--ink);
  font-size: clamp(1rem, 3.6vw, 1.25rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby__member-badge {
  flex: 0 0 auto; font-weight: 900; font-size: clamp(.75rem, 2.6vw, .95rem);
  background: var(--c-yellow, #ffd23f); color: #6b4e00; border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.lobby__member.is-ready { border-color: var(--c-green, #5fd068); }
.lobby__ready-badge {
  flex: 0 0 auto; font-weight: 800; font-size: clamp(.72rem, 2.4vw, .9rem);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
  background: #eee; color: var(--ink-soft, #6b6b7a);
}
.lobby__ready-badge.is-ready { background: var(--c-green, #5fd068); color: #0c3b12; }
/* Выбор игры (host) */
.lobby__games { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: clamp(8px, 1.6vw, 12px); }
.lobby__game {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-family: inherit;
  background: #fff; border: 3px solid transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  padding: clamp(8px, 1.8vw, 12px); color: var(--ink); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.lobby__game:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.lobby__game:focus-visible { outline: 4px solid var(--c-purple); outline-offset: 3px; }
.lobby__game[disabled] { opacity: .6; cursor: default; transform: none; }
.lobby__game.is-selected { border-color: var(--c-green, #5fd068); background: linear-gradient(135deg, #fff, #eafbe9); }
.lobby__game-emoji { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1; }
.lobby__game-title { font-weight: 800; font-size: clamp(.8rem, 2.8vw, .98rem); text-align: center; }
/* Выбранная игра (read-only, не-host) */
.lobby__selected {
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); padding: clamp(12px, 2.4vw, 16px); border: 3px solid var(--c-blue, #8ec5ff);
}
.lobby__selected-emoji { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1; flex: 0 0 auto; }
.lobby__selected-name { font-weight: 900; color: var(--ink); font-size: clamp(1.05rem, 4vw, 1.35rem); }
/* Баннер «все готовы» */
.lobby__banner {
  text-align: center; font-weight: 900; color: #0c3b12;
  background: linear-gradient(135deg, #eafbe9, #d7f6d0); border: 3px solid var(--c-green, #5fd068);
  border-radius: var(--radius-lg); padding: clamp(10px, 2.2vw, 14px); font-size: clamp(.95rem, 3.2vw, 1.1rem);
}

/* =========================================================
   РОДИТЕЛЬСКИЙ ДАШБОРД — экран #/parent (спокойный «взрослый» вид)
   ========================================================= */
.parent { display: flex; flex-direction: column; gap: clamp(12px, 2.4vw, 18px); }
.parent__intro {
  text-align: center; color: var(--ink-soft); font-weight: 700;
  font-size: clamp(.9rem, 3vw, 1.05rem);
}
.parent__status {
  text-align: center; color: var(--ink-soft); font-weight: 700;
  font-size: clamp(.95rem, 3.2vw, 1.1rem); padding: clamp(10px, 3vw, 22px) 0;
}
.parent__cards { display: flex; flex-direction: column; gap: clamp(10px, 2vw, 14px); }
/* Подсветка слабых тем в разбивке статистики (#39): спокойный тёплый акцент,
   не тревожный красный. Только для новой пометки; базовые строки — обычный поток. */
.parent__stats-row--weak {
  background: #fff7e6; border: 1px solid #ffd591;
  border-radius: 10px; padding: 6px 10px;
}
.parent__stats-weak-badge { color: #d46b08; font-size: .85em; margin-left: 8px; }
.pcard {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  padding: clamp(12px, 2.4vw, 18px) clamp(14px, 3vw, 22px);
  display: flex; flex-direction: column; gap: clamp(10px, 2vw, 14px);
}
.pcard__head { display: flex; align-items: center; gap: 12px; }
.pcard__avatar { font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1; flex: 0 0 auto;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.16)); }
.pcard__name { font-size: clamp(1.15rem, 4vw, 1.5rem); font-weight: 800; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__metrics {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 2vw, 12px);
}
@media (min-width: 520px) { .pcard__metrics { grid-template-columns: repeat(4, 1fr); } }
.pcard__metric {
  background: var(--bg, #fff7fb); border-radius: var(--radius, 16px);
  padding: clamp(8px, 2vw, 12px); text-align: center; min-width: 0;
}
.pcard__metric-val { font-size: clamp(1.1rem, 4vw, 1.4rem); font-weight: 900; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__metric-label { font-size: clamp(.75rem, 2.6vw, .9rem); font-weight: 700; color: var(--ink-soft); }
.pcard__history { margin-top: clamp(6px, 1.6vw, 10px); display: flex; flex-direction: column; gap: 6px; }
.pcard__history-title { font-size: clamp(.85rem, 3vw, 1rem); font-weight: 800; color: var(--ink-soft); }
.pcard__history-empty { font-size: clamp(.8rem, 2.8vw, .95rem); font-weight: 700; color: var(--ink-soft); opacity: .85; }
.pcard__day { display: flex; align-items: center; gap: 10px; }
.pcard__day-date { flex: 0 0 auto; width: 3.2em; font-size: clamp(.78rem, 2.6vw, .92rem);
  font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pcard__day-bar { flex: 1; min-width: 0; height: 12px; border-radius: 999px;
  background: rgba(0,0,0,.06); overflow: hidden; }
.pcard__day-bar-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-yellow, #ffd84d), var(--c-orange, #ff9f43)); }
.pcard__day-stars { flex: 0 0 auto; font-size: clamp(.78rem, 2.6vw, .92rem); font-weight: 800;
  color: var(--ink); white-space: nowrap; }

/* =========================================================
   РАЗГОВОР С ПУШКОМ — экран #/pet-chat (диалог голосом + LLM)
   ========================================================= */
.petchat { gap: clamp(12px, 2.4vw, 18px); align-items: stretch; }
.petchat__history {
  flex: 1 1 auto; min-height: clamp(220px, 42vh, 460px); max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: clamp(8px, 2vw, 12px);
  background: #fff; border-radius: var(--radius-lg, 22px); box-shadow: var(--shadow-1);
  padding: clamp(10px, 2.6vw, 18px); -webkit-overflow-scrolling: touch;
}
.petchat__row { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.petchat__row--pet { align-self: flex-start; }
.petchat__row--child { align-self: flex-end; flex-direction: row-reverse; }
.petchat__avatar { font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1; flex: 0 0 auto;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.14)); }
.petchat__bubble {
  font-size: clamp(1rem, 3.4vw, 1.2rem); font-weight: 700; line-height: 1.3;
  padding: clamp(8px, 2.2vw, 12px) clamp(12px, 3vw, 16px); border-radius: 20px;
  word-break: break-word; white-space: pre-wrap;
}
.petchat__bubble--pet { background: var(--bg, #fff3f9); color: var(--ink);
  border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 2px rgba(167,139,250,.25); }
.petchat__bubble--child { background: linear-gradient(135deg, var(--c-pink), var(--c-purple));
  color: #fff; border-bottom-right-radius: 6px; }
.petchat__bubble--think { display: inline-flex; gap: 5px; align-items: center; }
.petchat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-purple, #a78bfa);
  display: inline-block; animation: petchat-dot 1s infinite ease-in-out; }
.petchat__dot:nth-child(2) { animation-delay: .15s; }
.petchat__dot:nth-child(3) { animation-delay: .3s; }
@keyframes petchat-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .petchat__dot { animation: none; } }

.petchat__controls { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 16px); flex-wrap: wrap; justify-content: center; }
.petchat__mic { flex: 0 0 auto; }
.btn-mic.is-busy { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
.petchat__inputrow { flex: 1 1 240px; min-width: 0; display: flex; gap: 8px; }
.petchat__input {
  flex: 1 1 auto; min-width: 0; font-size: clamp(1rem, 3.4vw, 1.15rem); font-weight: 700;
  padding: clamp(10px, 2.6vw, 14px) clamp(12px, 3vw, 16px); border-radius: 999px;
  border: 3px solid rgba(167,139,250,.4); background: #fff; color: var(--ink); outline: none;
}
/* Заметный клавиатурный фокус поля ввода: кольцо box-shadow (без сдвига вёрстки) +
   усиление цвета рамки. Появляется только при :focus-visible (клавиатура), не при клике. */
.petchat__input:focus-visible { border-color: var(--c-purple); box-shadow: 0 0 0 4px rgba(167,139,250,.35); }
.petchat__input:disabled { opacity: .6; }
.petchat__send {
  flex: 0 0 auto; background: var(--c-purple-d); padding: 0; width: clamp(44px, 12vw, 52px);
  height: clamp(44px, 12vw, 52px); border-radius: 50%; font-size: 1.3rem; line-height: 1;
}
.petchat__send:disabled { opacity: .5; cursor: not-allowed; }
.petchat__home { align-self: center; }

/* Визуально скрыто, но доступно скринридерам (для aria-live статусов озвучки). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- UI групп (пункт 17): экран куратора #/curator и детский #/join-group ---------- */
.gscreen__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gscreen__input {
  flex: 1 1 180px; min-width: 0; padding: 12px 14px;
  font-size: clamp(1rem, 3.4vw, 1.15rem); font-weight: 600;
  border: 2px solid var(--c-purple, #9b7bd8); border-radius: var(--radius-md, 12px);
  background: #fff; color: var(--ink, #333);
}
.gscreen__list { display: flex; flex-direction: column; gap: 10px; }
.gscreen__detail {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 12px; border-top: 2px dashed var(--c-purple, #9b7bd8);
}
.gscreen__hint { margin: 0; color: var(--ink-soft, #666); font-weight: 700; }
.gscreen__label { flex: 1 1 140px; font-weight: 600; }
.gscreen__error { margin: 0; color: #c0392b; font-weight: 700; }
.gscreen__notice { margin: 0; color: #2a7d3f; font-weight: 700; }
.btn--small { padding: 6px 12px; font-size: .95rem; min-width: 0; }
.btn--danger { background: #e26a6a; color: #fff; }

/* =========================================================
   СОЦ-ЭКРАНЫ: адаптив/доступность на узких viewport 320–414px
   (Фаза 8, пункт 50). Родительский дашборд (лимиты/PIN), личные
   сообщения 1:1, PIN-модалка куратора. Без horizontal overflow;
   перенос длинного текста и кнопок; touch target ≥44px.
   ========================================================= */

/* --- Родительский дашборд: лимиты времени/сложности/соц-функций --- */
.parent__limits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: clamp(12px, 2.4vw, 20px);
  padding-top: 12px;
  border-top: 2px dashed var(--c-purple, #9b7bd8);
}
.parent__limits-title { font-weight: 800; font-size: clamp(1rem, 3.6vw, 1.2rem); }
.parent__limits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.parent__hint { margin: 4px 0 0; color: var(--ink-soft, #666); font-weight: 700; font-size: clamp(.82rem, 3vw, .95rem); }
.parent__stats-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.parent__pin-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.parent__pin-input {
  flex: 1 1 120px;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 1.4rem;
  letter-spacing: .4em;
  text-align: center;
  border: 2px solid var(--c-purple, #9b7bd8);
  border-radius: var(--radius-md, 12px);
}

/* --- Сообщения 1:1 (#/messages): перенос длинного clean-текста, без overflow-x --- */
.msg-list { display: flex; flex-direction: column; gap: 8px; }
.msg-row { display: flex; flex-direction: column; max-width: 100%; min-width: 0; }
.msg-row--out { align-items: flex-end; }
.msg-row--in { align-items: flex-start; }
.msg-bubble {
  display: inline-block;
  max-width: 85%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--paper, #fff);
  box-shadow: var(--shadow-1);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
.msg-row--out .msg-bubble { background: linear-gradient(135deg, var(--c-green, #7bd88f), #5fc77a); }
.msg-time { font-size: .72rem; color: var(--ink-soft, #888); margin-top: 2px; }
.msg-composer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg-composer .msg-input, .msg-input { flex: 1 1 160px; min-width: 0; box-sizing: border-box; }

/* --- PIN-модалка куратора: помещается в любой viewport (inline-стиль в curator.js — fallback) --- */
.gscreen__pin-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .45);
  z-index: 9999;
}
.gscreen__pin-card {
  box-sizing: border-box;
  width: 90%;
  max-width: min(280px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 18px;
  border-radius: 14px;
  background: #fff; color: #222;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
.gscreen__pin-card .btn-row { flex-wrap: wrap; }

/* --- Узкие viewport (320–414px): стек строк/кнопок, touch targets, без overlap --- */
@media (max-width: 414px) {
  /* родительские лимиты: метка занимает строку, Вкл/Выкл переносятся ниже (не наезжают на 320px) */
  .parent__limits-grid { gap: 6px; }
  .parent__limits-grid .parent__stats-name { flex: 1 1 100%; }
  /* строки соц-экранов (ввод + кнопка) стекаются в колонку */
  .gscreen__row { flex-direction: column; align-items: stretch; }
  .gscreen__row > .btn, .gscreen__row > input { width: 100%; }
  /* списки друзей/куратора: action-кнопки переносятся под запись, не выходят за экран */
  .album-entry { gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
  .album-entry__count { white-space: normal; }
  /* реакции/рейтинг: перенос вместо горизонтального overflow */
  .kudos-bar, .leaderboard-bar, .leaderboard-row { flex-wrap: wrap; }
  /* плотные ряды мелких кнопок — touch target не меньше 44px по обеим сторонам */
  .gscreen .btn--small { min-height: 44px; min-width: 44px; }
  /* сообщения: пузырь на всю ширину, composer переносится */
  .msg-bubble { max-width: 100%; }
}