:root {
  --bg: #f7fbff;
  --ink: #14212b;
  --muted: #5f7180;
  --surface: #ffffff;
  --surface-soft: #edf8f6;
  --line: #d9e5ec;
  --blue: #1d6fd6;
  --blue-deep: #164a94;
  --mint: #37b99a;
  --coral: #ff7a59;
  --yellow: #ffd66b;
  --shadow: 0 18px 48px rgba(20, 33, 43, 0.1);
  --container: 1180px;
}

/* ---------- Umka landing palette (warm beige) ---------- */
.umka-landing {
  --bg: #f6efe2;
  --ink: #2a1d0f;
  --muted: #7a6a55;
  --surface: #ffffff;
  --line: #e7dcc7;
  --accent: #d97a2c;
  --accent-deep: #b55f15;
  --accent-soft: #fff1de;
  --mint: #4fb7a0;
  --shadow: 0 18px 44px rgba(80, 50, 20, 0.10);
  background: var(--bg);
  color: var(--ink);
}

.umka-landing a { color: inherit; }

.umka-landing .button {
  border-radius: 14px;
  padding: 0 22px;
  min-height: 50px;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.umka-landing .button-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 14px 30px rgba(217, 122, 44, 0.28);
}
.umka-landing .button-primary:hover { background: var(--accent-deep); }
.umka-landing .button-ghost {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  color: var(--ink);
}
.umka-landing .button-ghost:hover {
  background: #fff;
  border-color: var(--accent);
}

.umka-landing .hero {
  background: linear-gradient(180deg, #faf3e6 0%, #f6efe2 100%);
  border-bottom: 1px solid var(--line);
  padding: 28px 0 64px;
  min-height: auto;
}
.umka-landing .hero-label,
.umka-landing .section-label {
  color: var(--accent-deep);
  letter-spacing: 0.04em;
}
.umka-landing .brand-copy span,
.umka-landing .hero-nav a,
.umka-landing .proof-card span,
.umka-landing .session-card-top span,
.umka-landing .metric-key,
.umka-landing .preset-band,
.umka-landing .footer p,
.umka-landing .footer-links a {
  color: var(--muted);
}
.umka-landing .hero-nav a:hover { color: var(--accent-deep); }

.umka-landing .proof-card,
.umka-landing .preset-card,
.umka-landing .session-card,
.umka-landing .metric-card,
.umka-landing .doctor-card,
.umka-landing .rail-card,
.umka-landing .game-card,
.umka-landing .stage {
  box-sizing: border-box;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.umka-landing .proof-card { padding: 18px; border-radius: 20px; }
.umka-landing .preset-card { padding: 24px; }
.umka-landing .preset-session {
  margin: 4px 0 10px;
  font-weight: 800;
  color: var(--accent-deep);
}
.umka-landing .stage { padding: 26px; box-shadow: var(--shadow); }
.umka-landing .stage-main { border-top: 5px solid var(--accent); }

.umka-landing .preset-card:hover,
.umka-landing .game-card:hover,
.umka-landing .doctor-card:hover,
.umka-landing .metric-card:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 122, 44, 0.45);
  box-shadow: 0 22px 48px rgba(80, 50, 20, 0.12);
}

.umka-landing .preset-grid,
.umka-landing .metrics-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.umka-landing .preset-card { border-top: 5px solid var(--accent); }
.umka-landing .preset-card:nth-child(2) { border-top-color: var(--mint); }
.umka-landing .preset-card:nth-child(3) { border-top-color: #c98a3a; }
.umka-landing .preset-card:nth-child(4) { border-top-color: #8a5a2b; }

.umka-landing .metric-card { padding: 22px; border-left: 5px solid var(--accent); }
.umka-landing .metric-card:nth-child(2n) { border-left-color: var(--mint); }
.umka-landing .metric-card:nth-child(3n) { border-left-color: #c98a3a; }

.umka-landing .section { padding: 78px 0; }
.umka-landing .section-light { background: #fbf6ec; }

/* ---------- Games carousel ----------
   Карусель состоит из 3 элементов: кнопки-стрелки слева/справа,
   слайдер посередине и точки-индикаторы снизу. На мобильном кнопки
   уменьшаются и прижимаются к контенту, на десктопе они отдельно. */
.umka-landing .games-carousel {
  position: relative;
  padding: 0 56px;       /* место под кнопки навигации с обеих сторон */
}
@media (max-width: 720px) {
  /* На узком экране кнопки внутри прокрутки занимают слишком много места,
     поэтому уводим их в углы поверх слайдера и уменьшаем визуально. */
  .umka-landing .games-carousel { padding: 0 8px; }
}
.umka-landing .carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(31, 31, 31, 0.12);
  background: #fff;
  color: #1f1f1f;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: background 120ms ease, transform 120ms ease;
  z-index: 2;
  /* margin-top компенсирует точки-индикаторы снизу, чтобы кнопка
     попадала по центру именно карточек, а не общей высоты блока. */
  margin-top: -14px;
}
.umka-landing .carousel-nav:hover { background: #fbf6ec; transform: translateY(-50%) scale(1.05); }
.umka-landing .carousel-nav:active { transform: translateY(-50%) scale(0.96); }
.umka-landing .carousel-prev { left: 4px; }
.umka-landing .carousel-next { right: 4px; }
@media (max-width: 720px) {
  .umka-landing .carousel-nav {
    width: 36px;
    height: 36px;
    font-size: 22px;
    background: rgba(255, 255, 255, 0.92);
  }
  .umka-landing .carousel-prev { left: -4px; }
  .umka-landing .carousel-next { right: -4px; }
}

.umka-landing .carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.umka-landing .carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(31, 31, 31, 0.18);
  padding: 0;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.umka-landing .carousel-dot:hover { background: rgba(31, 31, 31, 0.32); }
.umka-landing .carousel-dot.is-active {
  background: #d97a2c;
  transform: scale(1.4);
}

/* ---------- Games catalog ---------- */
.umka-landing .games-slider-wrap {
  position: relative;
  margin: 0 -16px;
}
/* Fade-градиент справа отключён: теперь подсказку прокрутки даёт сама
   кнопка carousel-next, а градиент мешал точкам-индикаторам и тенью
   накладывался на ховер последней видимой карточки. */
.umka-landing .games-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  padding: 4px 32px 14px 16px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.umka-landing .games-slider::-webkit-scrollbar { height: 6px; }
.umka-landing .games-slider::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}
.umka-landing .games-slider::-webkit-scrollbar-track { background: transparent; }
.umka-landing .games-slider .game-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}
@media (max-width: 720px) {
  .umka-landing .games-slider .game-card { flex-basis: 85vw; }
}
.umka-landing .game-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
}
.umka-landing .game-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--accent-soft);
  font-size: 1.7rem;
}
.umka-landing .game-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.umka-landing .game-body strong { font-size: 1.02rem; line-height: 1.2; }
.umka-landing .game-domain {
  align-self: start;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 12px;
  background: #f1e6d0;
  color: var(--accent-deep);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
.umka-landing .game-body p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.umka-landing .catalog-foot {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* ---------- Dashboard mock ---------- */
.umka-landing .dashboard-mock {
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  padding: 26px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 22px;
}
.umka-landing .dashboard-mock-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-end;
}
.umka-landing .dashboard-mock-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.umka-landing .dashboard-mock-head strong {
  display: block;
  font-family: "Literata", serif;
  font-size: 1.6rem;
  margin-top: 4px;
}
.umka-landing .dashboard-mock-tag {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 800;
  font-size: 0.88rem;
}
.umka-landing .dashboard-mock-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.umka-landing .mock-stat {
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fbf6ec;
  border: 1px solid var(--line);
  display: grid;
  gap: 2px;
  min-width: 0;
}
.umka-landing .mock-stat span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.umka-landing .mock-stat strong {
  font-family: "Literata", serif;
  font-size: 1.6rem;
  line-height: 1;
}
.umka-landing .mock-stat em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--muted);
}
.umka-landing .mock-stat .mock-up { color: #1f8a6b; font-weight: 800; }

.umka-landing .dashboard-mock-chart {
  padding: 18px;
  border-radius: 20px;
  background: #fbf6ec;
  border: 1px solid var(--line);
}
.umka-landing .mock-chart-title {
  font-weight: 800;
  margin-bottom: 12px;
}
.umka-landing .mock-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.umka-landing .mock-bars li {
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr 44px;
  gap: 12px;
  align-items: center;
  font-size: 0.92rem;
}
.umka-landing .mock-bar {
  height: 10px;
  border-radius: 999px;
  background: #f1e6d0;
  overflow: hidden;
}
.umka-landing .mock-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #e8a05a);
}
.umka-landing .mock-bars b { text-align: right; font-weight: 800; }
.umka-landing .dashboard-mock-note {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: #4a2f10;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- Doctor / specialist ---------- */
.umka-landing .doctor-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.umka-landing .doctor-cards { display: grid; gap: 16px; }
.umka-landing .doctor-card { padding: 22px; }
.umka-landing .doctor-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.umka-landing .doctor-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.umka-landing .doctor-badges span {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}
.umka-landing .doctor-actions { margin-top: 22px; }

/* ---------- CTA ---------- */
.umka-landing .section-cta {
  background: linear-gradient(135deg, #b55f15 0%, #8a4510 100%);
  color: #fff;
  padding: 56px 0;
}
.umka-landing .section-cta .section-label,
.umka-landing .section-cta p { color: rgba(255, 255, 255, 0.85); }
.umka-landing .section-cta .button-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}
.umka-landing .section-cta .button-ghost:hover { background: rgba(255, 255, 255, 0.18); }

.umka-landing .cta-shell-compact {
  display: block;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.umka-landing .cta-shell-compact .section-label {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.85);
}
.umka-landing .cta-shell-compact h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
}
.umka-landing .cta-shell-compact .cta-lead {
  margin: 0 auto 18px;
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.umka-landing .cta-shell-compact .cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.umka-landing .section-cta { padding: 48px 0; }
@media (max-width: 720px) {
  .umka-landing .section-cta { padding: 40px 0; }
  .umka-landing .cta-shell-compact h2 { font-size: 1.45rem; }
}

/* ---------- Footer (compact) ---------- */
.umka-landing .footer {
  padding: 14px 0;
  background: #2a1d0f;
  color: #fff;
}
.umka-landing .footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.umka-landing .footer p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
}
.umka-landing .footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.umka-landing .footer-links a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}
.umka-landing .footer-links a:hover { color: #fff; }

/* ---------- Overflow safety ---------- */
.umka-landing .hero-copy,
.umka-landing .hero-stage,
.umka-landing .session-copy,
.umka-landing .session-panel,
.umka-landing .doctor-panel,
.umka-landing .doctor-cards,
.umka-landing .cta-copy {
  min-width: 0;
}
.umka-landing img,
.umka-landing svg { max-width: 100%; height: auto; }

@media (max-width: 1020px) {
  .umka-landing .doctor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .umka-landing .section { padding: 56px 0; }
  .umka-landing .dashboard-mock { padding: 18px; }
  .umka-landing .mock-bars li {
    grid-template-columns: 90px 1fr 40px;
    font-size: 0.85rem;
  }
}
@media (max-width: 560px) {
  .umka-landing .footer-row { gap: 8px; }
  .umka-landing .footer p,
  .umka-landing .footer-links a { font-size: 0.82rem; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-width: 320px;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-glow { display: none; }

.container {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.hero {
  min-height: 92svh;
  padding: 24px 0 48px;
  background:
    linear-gradient(90deg, rgba(247, 251, 255, 0.98) 0%, rgba(247, 251, 255, 0.9) 42%, rgba(237, 248, 246, 0.82) 100%),
    url("assets/branding/hero-journey.svg") right 8% center / min(48vw, 620px) no-repeat;
  border-bottom: 1px solid var(--line);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 56px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
}

.brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 33, 43, 0.08);
}

.brand-copy {
  display: grid;
  gap: 2px;
}

.brand-copy strong {
  font-family: "Literata", serif;
  font-size: 1.25rem;
}

.brand-copy span,
.hero-nav a,
.proof-card span,
.section-label,
.session-card-top span,
.metric-key,
.rail-kicker,
.preset-band,
.footer p,
.footer-links a {
  color: var(--muted);
}

.hero-nav,
.topbar-actions,
.hero-actions,
.doctor-badges,
.cta-actions,
.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-nav a {
  font-size: 0.95rem;
  font-weight: 700;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: #ffffff;
  background: var(--blue);
  box-shadow: 0 12px 28px rgba(29, 111, 214, 0.22);
}

.button-primary:hover {
  background: var(--blue-deep);
}

.button-ghost {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.78fr);
  gap: 48px;
  align-items: start;
}

.hero-copy,
.hero-stage,
.session-copy,
.session-panel,
.doctor-panel,
.doctor-cards,
.cta-copy {
  min-width: 0;
}

.hero-copy {
  max-width: 650px;
  padding: 18px 0 0;
}

.hero-label,
.section-label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 14px;
}

.hero-copy h1,
.section-head h2,
.session-copy h2,
.doctor-panel h2,
.cta-copy h2 {
  font-family: "Literata", serif;
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0;
}

.hero-copy h1 {
  font-size: 4.2rem;
}

.hero-lead {
  max-width: 560px;
  margin: 22px 0 0;
  font-size: 1.18rem;
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.hero-actions {
  margin-top: 30px;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 34px;
}

.proof-card,
.preset-card,
.session-card,
.metric-card,
.doctor-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.proof-card {
  padding: 14px;
}

.proof-card strong,
.rail-card strong,
.doctor-card h3,
.preset-card h3,
.metric-card .metric-key,
.session-card-top strong {
  display: block;
  margin-top: 6px;
}

.hero-stage {
  display: grid;
  gap: 18px;
}

.stage {
  border-radius: 8px;
  padding: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.stage-main {
  border-top: 5px solid var(--mint);
}

.stage-top,
.session-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stage-tag,
.stage-state,
.doctor-badges span,
.domain-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  border: 1px solid var(--line);
  background: #fff;
}

.stage-state {
  color: #096b5b;
  background: #e2f7f1;
}

.stage-main h2 {
  font-family: "Literata", serif;
  font-size: 1.8rem;
  margin: 18px 0;
}

.profile-list,
.feature-list {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
  margin: 0;
}

.profile-list li,
.feature-list li {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.profile-list span,
.feature-list li,
.hero-lead,
.section-head p,
.session-copy p,
.doctor-panel p,
.cta-copy p,
.preset-card p,
.metric-card p,
.doctor-card p {
  color: var(--muted);
  line-height: 1.62;
}

.stage-visual,
.section-figure,
.doctor-board {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.stage-visual img,
.section-figure img,
.doctor-board img {
  width: 100%;
  height: auto;
}

.stage-visual img {
  max-height: 320px;
  object-fit: contain;
}

.stage-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.rail-card {
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
}

.rail-card-soft {
  border-top: 4px solid var(--blue);
}

.rail-card-accent {
  border-top: 4px solid var(--coral);
}

.section {
  padding: 72px 0;
}

.section-light {
  background: #ffffff;
}

.section-head {
  max-width: 820px;
  margin-bottom: 32px;
}

.section-head h2,
.session-copy h2,
.doctor-panel h2,
.cta-copy h2 {
  font-size: 2.65rem;
}

.preset-grid,
.metrics-grid,
.doctor-cards {
  display: grid;
  gap: 16px;
}

.preset-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.preset-card,
.metric-card {
  padding: 20px;
  min-width: 0;
}

.preset-band {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 800;
}

.preset-card:nth-child(1) { border-top: 5px solid var(--mint); }
.preset-card:nth-child(2) { border-top: 5px solid var(--blue); }
.preset-card:nth-child(3) { border-top: 5px solid var(--coral); }
.preset-card:nth-child(4) { border-top: 5px solid var(--yellow); }

.session-grid,
.doctor-grid,
.cta-shell {
  display: grid;
  gap: 34px;
}

.session-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.82fr);
  align-items: start;
}

.session-panel {
  display: grid;
  gap: 16px;
}

.session-card {
  padding: 22px;
}

.session-card-warm {
  background: #fff7df;
}

.domain-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card {
  border-left: 5px solid var(--mint);
}

.metric-card:nth-child(2),
.metric-card:nth-child(6) {
  border-left-color: var(--blue);
}

.metric-card:nth-child(3),
.metric-card:nth-child(4) {
  border-left-color: var(--coral);
}

.section-figure {
  margin-top: 24px;
}

.section-figure img {
  max-height: 420px;
  object-fit: contain;
}

.doctor-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: start;
}

.doctor-panel {
  padding: 0;
}

.doctor-badges {
  margin-top: 22px;
}

.doctor-cards {
  grid-template-columns: 1fr;
}

.doctor-board img {
  max-height: 330px;
  object-fit: contain;
}

.doctor-card {
  padding: 20px;
}

.doctor-card h3 {
  margin: 0 0 10px;
  font-size: 1.16rem;
}

.section-cta {
  background: var(--blue-deep);
  color: #fff;
  padding: 44px 0;
}

.cta-shell {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
}

.section-cta .cta-copy h2 {
  max-width: 720px;
  font-size: clamp(1.85rem, 3vw, 2.6rem);
}

.section-cta .cta-copy p {
  max-width: 640px;
}

.section-cta .section-label,
.section-cta p {
  color: rgba(255, 255, 255, 0.78);
}

.section-cta .button-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

.footer {
  padding: 18px 0;
  background: #0f1b24;
  color: #fff;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer p,
.footer-links a {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1120px) {
  .hero {
    background:
      linear-gradient(90deg, rgba(247, 251, 255, 0.98), rgba(237, 248, 246, 0.92)),
      url("assets/branding/hero-journey.svg") right 2rem bottom 2rem / 420px no-repeat;
  }

  .hero-grid,
  .session-grid,
  .doctor-grid,
  .cta-shell {
    grid-template-columns: 1fr;
  }

  .preset-grid,
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-copy h1 {
    font-size: 3.35rem;
  }
}

@media (max-width: 860px) {
  .container {
    width: min(var(--container), calc(100% - 28px));
  }

  .hero {
    min-height: auto;
    padding-bottom: 34px;
    background: linear-gradient(180deg, #f7fbff, #edf8f6);
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 34px;
  }

  .topbar-actions,
  .hero-actions,
  .cta-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-nav {
    display: none;
  }

  .hero-copy h1 {
    font-size: 2.55rem;
  }

  .hero-lead,
  .profile-list span,
  .feature-list li,
  .preset-card p,
  .metric-card p,
  .doctor-card p,
  .cta-copy p {
    overflow-wrap: anywhere;
  }

  .section-head h2,
  .session-copy h2,
  .doctor-panel h2,
  .cta-copy h2 {
    font-size: 2.05rem;
  }

  .hero-proof,
  .stage-rail,
  .preset-grid,
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .hero-stage {
    margin-top: 8px;
  }

  .footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .container {
    width: min(var(--container), calc(100% - 20px));
  }

  .topbar-actions,
  .hero-actions,
  .cta-actions,
  .button {
    width: 100%;
    max-width: 100%;
  }

  .button {
    white-space: normal;
    text-align: center;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .hero-copy h1 {
    font-size: 2.15rem;
  }

  .hero-lead {
    font-size: 1rem;
  }

  .section {
    padding: 48px 0;
  }

  .stage,
  .preset-card,
  .session-card,
  .metric-card,
  .doctor-card {
    padding: 16px;
  }
}

/* Internal product surfaces */
.auth-page,
.account-page,
.games-page,
.onboarding-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at 8% 12%, rgba(55, 185, 154, 0.15), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(29, 111, 214, 0.12), transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, #eef8f6 100%);
  color: var(--ink);
}

.auth-page input,
.auth-page select,
.auth-page textarea,
.account-page input,
.account-page select,
.account-page textarea,
.games-page input,
.games-page select,
.games-page textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.auth-page input:focus,
.auth-page select:focus,
.auth-page textarea:focus,
.account-page input:focus,
.account-page select:focus,
.account-page textarea:focus,
.games-page input:focus,
.games-page select:focus,
.games-page textarea:focus {
  border-color: rgba(29, 111, 214, 0.68);
  box-shadow: 0 0 0 4px rgba(29, 111, 214, 0.12);
}

.auth-page label,
.account-page label,
.admin-page label {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: #263645;
}

.auth-header,
.account-header {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.logo-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 33, 43, 0.1);
}

.logo-text {
  display: block;
  font-family: "Literata", serif;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.logo-subtitle,
.section-subtitle,
.auth-note,
.auth-hint,
.admin-role-note,
.muted {
  color: var(--muted);
  line-height: 1.55;
}

.account-nav,
.topbar-actions,
.auth-step-actions,
.button-row,
.admin-filter-actions,
.account-hero-actions,
.games-hero-actions,
.admin-user-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.auth-shell,
.account-shell,
.games-shell-page,
.onboarding-shell,
.legal-document-container {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
  padding: 16px 0 72px;
}

.auth-card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.78fr);
  overflow: hidden;
  border: 1px solid rgba(217, 229, 236, 0.9);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.auth-card-single {
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.72fr);
}

.auth-info {
  position: relative;
  padding: 42px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 214, 107, 0.34), transparent 27%),
    radial-gradient(circle at 90% 90%, rgba(55, 185, 154, 0.18), transparent 32%),
    linear-gradient(135deg, #f4fbff 0%, #eefaf6 100%);
}

.auth-info::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: 28px;
  width: 180px;
  height: 130px;
  opacity: 0.9;
  background: url("assets/branding/hero-journey.svg") center / contain no-repeat;
  pointer-events: none;
}

.auth-info-compact::after {
  width: 140px;
  height: 100px;
}

.auth-badge,
.eyebrow,
.dashboard-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(29, 111, 214, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue-deep);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-info h1 {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 18px 0 16px;
  font-family: "Literata", serif;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.auth-info p {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.auth-highlight-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.auth-stat,
.account-meta > div,
.games-email-chip {
  border: 1px solid rgba(217, 229, 236, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  padding: 13px 15px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(20, 33, 43, 0.06);
}

.auth-side-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.auth-side-metrics .metric-card {
  padding: 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
}

.auth-forms {
  padding: 30px;
  background: rgba(255, 255, 255, 0.88);
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 22px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #edf8f6;
}

.auth-tab {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.auth-tab.active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 8px 24px rgba(20, 33, 43, 0.1);
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: grid;
  gap: 14px;
}

.auth-form-head h2 {
  margin: 0 0 6px;
  font-size: 1.55rem;
  line-height: 1.15;
}

.auth-field,
.account-form,
.admin-filter-form,
.report-filter,
.teacher-student-card {
  display: grid;
  gap: 8px;
}

.auth-inline-actions {
  display: flex;
  justify-content: flex-end;
}

.auth-text-link {
  color: var(--blue);
  font-weight: 900;
}

.auth-form button[type="submit"],
.auth-step-actions button[type="submit"],
.auth-step-actions button[type="button"],
.account-form button,
.admin-filter-form button,
.admin-compact-form button,
.admin-password-form button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 0 16px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(29, 111, 214, 0.22);
}

.auth-step-actions button[type="button"],
.admin-filter-form button[type="submit"] + a,
.ghost-button {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}

.auth-alert,
.account-alert {
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 800;
}

.auth-alert.error,
.account-alert.error {
  border-color: #ffd0d0;
  background: #fff1f1;
  color: #9f1d1d;
}

.auth-alert.success,
.account-alert.success {
  border-color: #b7f0dc;
  background: #ecfdf5;
  color: #07634f;
}

.auth-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0;
}

.auth-step-pill {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}

.auth-step-pill.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.auth-step {
  display: none;
  gap: 14px;
}

.auth-step.active {
  display: grid;
}

.auth-checkbox,
.admin-checkbox {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
}

.auth-checkbox input,
.admin-checkbox input {
  width: auto;
  min-height: auto;
  margin-top: 4px;
}

.cta-button,
.ghost-button,
.account-nav a,
.account-nav button,
.admin-user-actions-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 16px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.cta-button {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
}

.ghost-button,
.account-nav a,
.account-nav button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
}

.account-hero,
.games-hero,
.onboarding-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 22px;
  padding: 30px;
  border: 1px solid rgba(217, 229, 236, 0.92);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.account-hero h1,
.games-hero h1,
.onboarding-hero h1 {
  max-width: 760px;
  margin: 10px 0 12px;
  font-family: "Literata", serif;
  font-size: clamp(2rem, 4vw, 3.65rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.account-meta {
  display: grid;
  gap: 12px;
}

.label,
.stat-label,
.games-session-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-grid,
.user-dashboard-grid,
.admin-metrics-grid,
.games-preview-grid,
.dashboard-focus-grid,
.admin-user-card-grid,
.onboarding-grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.user-dashboard-grid,
.admin-metrics-grid,
.games-preview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-focus-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.admin-user-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-span-3 { grid-column: span 3; }
.dashboard-span-4 { grid-column: span 4; }
.dashboard-span-5 { grid-column: span 5; }
.dashboard-span-6 { grid-column: span 6; }
.dashboard-span-7 { grid-column: span 7; }
.dashboard-span-8 { grid-column: span 8; }
.dashboard-span-12 { grid-column: span 12; }

.account-card,
.dashboard-panel,
.dashboard-focus-card,
.dashboard-rail-card,
.stat-card,
.admin-stat-card,
.games-preview-card,
.games-side-card,
.games-history-card,
.games-embed-card,
.admin-user-tools,
.admin-user-card,
.report-detail,
.onboarding-step-card,
.onboarding-side-card,
.onboarding-actions-panel,
.legal-document-container {
  min-width: 0;
  border: 1px solid rgba(217, 229, 236, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  padding: 20px;
  box-shadow: 0 12px 34px rgba(20, 33, 43, 0.07);
}

.stat-card,
.admin-stat-card {
  border-left: 5px solid var(--mint);
}

.stat-value {
  display: block;
  margin-top: 6px;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}

.dashboard-chip-row,
.games-session-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-chip,
.games-session-stat {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 11px;
  color: #334a5e;
  font-size: 0.82rem;
  font-weight: 800;
}

.account-list,
.dashboard-rail-list,
.account-chat-list,
.games-bullets,
.games-session-list,
.games-analytics-list,
.admin-role-list,
.admin-teacher-link-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-list > div,
.account-chat-list li,
.games-analytics-item,
.games-session-item,
.admin-role-item,
.admin-teacher-link-list > div {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f9fcff;
  padding: 13px;
}

.admin-tools-head,
.admin-user-card-head,
.games-history-head,
.games-embed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.admin-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-table {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.admin-table-head,
.admin-table-row {
  min-width: 780px;
  display: grid;
  grid-template-columns: 1.4fr 0.72fr 0.72fr 0.9fr;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
}

.admin-table-head {
  background: #edf8f6;
  font-weight: 900;
}

.admin-table-row + .admin-table-row {
  border-top: 1px solid var(--line);
}

.admin-page {
  background:
    radial-gradient(circle at 8% 12%, rgba(72, 202, 178, 0.18), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(255, 181, 68, 0.14), transparent 28%),
    linear-gradient(180deg, #effbfb 0%, #f7fbff 48%, #f4f8f8 100%);
}

.admin-page .account-shell {
  padding-top: 8px;
  padding-bottom: 36px;
}

.admin-page .section-heading-row {
  margin-top: 28px;
}

.admin-page .admin-user-tools {
  overflow: hidden;
  padding: 0;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 26px 70px rgba(19, 64, 86, 0.12);
}

.admin-page .admin-tools-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
  gap: 24px;
  margin: 0;
  padding: 24px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 181, 68, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 250, 248, 0.88));
}

.admin-page .admin-filter-form {
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(217, 229, 236, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(20, 33, 43, 0.08);
}

.admin-page .admin-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.admin-page .admin-filter-actions .ghost-button,
.admin-page .admin-filter-actions button {
  justify-content: center;
}

.admin-page .admin-role-list {
  gap: 8px;
}

.admin-page .admin-role-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fcff, #eefaf7);
  font-weight: 850;
}

.admin-page .admin-table {
  box-shadow: 0 14px 32px rgba(20, 33, 43, 0.06);
}

.admin-page .admin-table-head {
  background: linear-gradient(90deg, #edf8f6, #f4f9ff);
}

.admin-page .admin-table-row {
  transition: background 0.16s ease;
}

.admin-page .admin-table-row:hover {
  background: #f7fbff;
}

.admin-page .admin-user-card-grid {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  align-items: start;
  gap: 18px;
  margin-top: 0;
  padding: 20px;
}

.admin-page .admin-user-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.92));
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.admin-page .admin-user-card .muted,
.admin-page .admin-user-card-head > div,
.admin-page .admin-user-card-head h4 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-page .admin-user-card:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 111, 214, 0.22);
  box-shadow: 0 22px 54px rgba(19, 64, 86, 0.13);
}

.admin-page .admin-create-card {
  border-color: rgba(29, 111, 214, 0.2);
  background:
    radial-gradient(circle at 100% 0%, rgba(29, 111, 214, 0.1), transparent 34%),
    linear-gradient(180deg, #ffffff, #f7fbff);
}

.admin-page .admin-user-card-head {
  align-items: center;
  margin: 0;
}

.admin-page .admin-user-card-head h4 {
  margin: 0 0 4px;
  font-size: 1.06rem;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(217, 229, 236, 0.92);
  background: #f7fbff;
  color: #334a5e;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.role-pill.role-admin {
  border-color: rgba(29, 111, 214, 0.2);
  background: #eaf2ff;
  color: #164a94;
}

.role-pill.role-doctor {
  border-color: rgba(55, 185, 154, 0.28);
  background: #e9faf4;
  color: #08745f;
}

.role-pill.role-parent {
  border-color: rgba(255, 181, 68, 0.32);
  background: #fff4dc;
  color: #845300;
}

.role-pill.role-create {
  border-color: rgba(29, 111, 214, 0.28);
  background: var(--blue);
  color: #fff;
}

.admin-page .admin-user-actions-row {
  margin: 0;
}

.admin-page .admin-user-actions-row .ghost-button {
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  font-weight: 900;
}

.admin-page .admin-user-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-page .admin-user-meta span {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(217, 229, 236, 0.86);
  border-radius: 14px;
  background: #f5f9fc;
  color: #365064;
  font-size: 0.84rem;
  font-weight: 850;
}

.admin-page .admin-edit-panel {
  overflow: hidden;
  border: 1px solid rgba(217, 229, 236, 0.92);
  border-radius: 20px;
  background: rgba(248, 252, 255, 0.88);
}

.admin-page .admin-edit-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 0 14px;
  color: #164a94;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.admin-page .admin-edit-panel summary::-webkit-details-marker {
  display: none;
}

.admin-page .admin-edit-panel summary::after {
  content: "Открыть";
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: #536b7f;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-page .admin-edit-panel[open] summary::after {
  content: "Скрыть";
  background: #eaf2ff;
  color: #164a94;
}

.admin-page .admin-edit-panel .account-form {
  padding: 14px;
  border-top: 1px solid var(--line);
}

.admin-page .admin-role-field[data-show-for=""] {
  display: none !important;
}

.admin-page .admin-manage-form {
  gap: 12px;
}

.admin-page .admin-role-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.admin-page .admin-checkbox-row {
  gap: 8px;
}

.admin-page .admin-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-weight: 850;
}

.admin-page .admin-secondary-actions {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(230px, 1fr);
  align-items: end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.admin-page .admin-compact-form,
.admin-page .admin-password-form {
  margin: 0;
}

.admin-page .admin-password-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.admin-page .admin-password-form input {
  min-width: 0;
}

.admin-page .admin-compact-form button {
  border: 1px solid #ffd1c4;
  background: #fff7f3;
  color: #9f3d1e;
  box-shadow: none;
}

.admin-page .admin-password-form button {
  border: 1px solid rgba(29, 111, 214, 0.18);
  background: #edf5ff;
  color: #164a94;
  box-shadow: none;
}

.admin-page .admin-manage-form .cta-button {
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(29, 111, 214, 0.2);
}

.admin-page input,
.admin-page select {
  min-height: 44px;
}

.games-preview-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.games-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(20, 33, 43, 0.11);
}

.games-preview-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 15px;
  background: #edf8f6;
  font-size: 1.35rem;
}

.games-catalog-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--soft-shadow);
  padding: clamp(18px, 3vw, 28px);
}

.games-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.games-catalog-link {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: 15px;
  border-radius: 22px;
  border: 1px solid rgba(213, 226, 236, 0.9);
  background:
    radial-gradient(circle at 12% 16%, rgba(55, 185, 154, 0.16), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #ffffff, #f8fbfd);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(32, 47, 61, 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.games-catalog-link:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 159, 28, 0.55);
  box-shadow: 0 20px 48px rgba(32, 47, 61, 0.13);
}

.games-catalog-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #ecfdf5;
  font-weight: 900;
  font-size: 1.45rem;
}

.games-catalog-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.games-catalog-body strong {
  font-size: 1rem;
  line-height: 1.12;
}

.games-catalog-body span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.games-catalog-body .games-catalog-mission {
  color: #243446;
  font-size: 0.86rem;
  line-height: 1.28;
  font-weight: 850;
}

.games-catalog-body em {
  width: max-content;
  border-radius: 999px;
  padding: 3px 9px;
  background: #fff2d8;
  color: #8a5400;
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 900;
}

.games-iframe {
  width: 100%;
  height: min(900px, calc(100svh - 130px));
  min-height: 620px;
  border: 0;
  border-radius: 18px;
  background: #fff;
}

.games-sync-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 11px;
  background: #ecfdf5;
  color: #07634f;
  font-size: 0.82rem;
  font-weight: 900;
}

.onboarding-copy {
  min-width: 0;
}

.onboarding-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.onboarding-side-card {
  align-self: stretch;
}

.onboarding-side-card h2,
.onboarding-step-card h3,
.account-card h2,
.dashboard-panel h2,
.games-preview-card h3,
.games-side-card h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.2;
}

.onboarding-step-card {
  position: relative;
  overflow: hidden;
  padding-top: 52px;
}

.onboarding-step-card::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -48px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(55, 185, 154, 0.12);
}

.onboarding-step-index {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}

.onboarding-actions-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}

.inline-form {
  display: inline-flex;
}

.empty-state-card {
  border: 1px dashed rgba(95, 113, 128, 0.35);
  border-radius: 18px;
  background: rgba(237, 248, 246, 0.55);
  padding: 18px;
}

.empty-state-card.compact {
  padding: 14px;
}

.legal-document-container {
  margin-top: 16px;
  line-height: 1.7;
}

.legal-document-container h1 {
  margin-top: 0;
  font-family: "Literata", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.legal-document-container h2 {
  margin-top: 28px;
}

.simple-footer {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  text-align: center;
  font-size: 0.86rem;
}

.simple-footer p {
  margin: 0;
}

@media (max-width: 1020px) {
  .auth-card,
  .auth-card-single,
  .account-hero,
  .games-hero,
  .onboarding-hero,
  .dashboard-focus-grid {
    grid-template-columns: 1fr;
  }

  .user-dashboard-grid,
  .admin-metrics-grid,
  .games-preview-grid,
  .games-catalog-grid,
  .admin-user-card-grid,
  .onboarding-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page .admin-tools-head,
  .admin-page .admin-user-card-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-span-3,
  .dashboard-span-4,
  .dashboard-span-5,
  .dashboard-span-6,
  .dashboard-span-7,
  .dashboard-span-8 {
    grid-column: span 12;
  }
}

@media (max-width: 680px) {
  .auth-header,
  .account-header,
  .auth-shell,
  .account-shell,
  .games-shell-page,
  .onboarding-shell,
  .legal-document-container {
    width: min(var(--container), calc(100% - 20px));
  }

  .auth-header,
  .account-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .account-nav,
  .topbar-actions,
  .auth-step-actions,
  .button-row,
  .account-hero-actions,
  .games-hero-actions,
  .admin-user-actions-row,
  .onboarding-actions-panel {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .cta-button,
  .ghost-button,
  .account-nav a,
  .account-nav button,
  .auth-form button[type="submit"],
  .auth-step-actions button,
  .inline-form {
    width: 100%;
  }

  .auth-info,
  .auth-forms,
  .account-hero,
  .games-hero,
  .onboarding-hero,
  .account-card,
  .dashboard-panel,
  .dashboard-focus-card,
  .dashboard-rail-card,
  .stat-card,
  .admin-stat-card,
  .games-preview-card,
  .games-side-card,
  .games-history-card,
  .games-embed-card,
  .admin-user-tools,
  .admin-user-card,
  .onboarding-step-card,
  .onboarding-side-card,
  .onboarding-actions-panel,
  .legal-document-container {
    padding: 18px;
  }

  .auth-forms {
    order: -1;
  }

  .auth-info::after {
    position: static;
    display: block;
    width: 100%;
    height: 120px;
    margin-top: 16px;
  }

  .auth-info h1,
  .account-hero h1,
  .games-hero h1,
  .onboarding-hero h1 {
    font-size: 1.85rem;
    letter-spacing: -0.035em;
  }

  .auth-side-metrics,
  .user-dashboard-grid,
  .admin-metrics-grid,
  .games-preview-grid,
  .games-catalog-grid,
  .admin-inline-fields,
  .admin-user-card-grid,
  .onboarding-grid {
    grid-template-columns: 1fr;
  }

  .admin-tools-head,
  .admin-user-card-head,
  .games-history-head,
  .games-embed-head {
    display: grid;
  }

  .admin-page .admin-tools-head {
    padding: 16px;
  }

  .admin-page .admin-user-card-grid {
    padding: 12px;
  }

  .admin-page .admin-filter-actions,
  .admin-page .admin-user-meta,
  .admin-page .admin-secondary-actions,
  .admin-page .admin-password-form {
    grid-template-columns: 1fr;
  }

  .section-cta {
    padding: 32px 0;
  }

  .admin-table-head,
  .admin-table-row {
    min-width: 680px;
  }

  .games-iframe {
    height: calc(100svh - 96px);
    min-height: 620px;
    border-radius: 14px;
  }
}

/* Tiltball game (mirror of in-play styles) */
.tiltball-stage{
  width: min(720px, 100%);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}
.tiltball-status{ display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.tiltball-canvas-wrap{
  position: relative;
  width: min(360px, 90vw);
  height: min(440px, 70vh);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.82), rgba(255,255,255,0) 28%),
    linear-gradient(160deg, #fff4e3 0%, #ffd4a8 100%);
  box-shadow: 0 18px 36px rgba(127,82,40,0.18), 0 10px 26px rgba(40,30,20,0.18);
  border: 3px solid rgba(255,255,255,0.78);
  overflow: hidden;
  touch-action: none;
}
.tiltball-canvas-wrap::before{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 0 0 2px rgba(122,76,43,0.08);
  pointer-events: none;
  z-index: 1;
}
.tiltball-canvas-wrap::after{
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 10px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(81,58,36,0.24), transparent 70%);
  pointer-events: none;
}
.tiltball-canvas{ display: block; width: 100%; height: 100%; position: relative; z-index: 0; }
.tiltball-permission-btn{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 22px;
  border-radius: 18px;
  border: none;
  background: #ff8b3d;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255,139,61,0.36);
  cursor: pointer;
  z-index: 5;
}
.tiltball-permission-btn.is-hidden{ display: none; }
.tiltball-controls{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tiltball-controls .btn{ border-radius: 16px; }


/* === Модалка подтверждения разрушающих действий ===
   WHY: разрушающие сабмиты (удаление ребёнка из группы, деактивация
   пользователя, сброс пароля) ранее срабатывали без подтверждения,
   из-за чего случайный клик стоил данных. <dialog> даёт нативный
   фокус-trap и Escape, поэтому достаточно лёгкого стиля поверх. */
.umka-confirm {
  border: none;
  border-radius: 18px;
  padding: 0;
  background: #faf3e6;
  color: #2b1d10;
  box-shadow: 0 24px 48px rgba(60, 32, 10, 0.22);
  max-width: 420px;
  width: calc(100% - 32px);
}
.umka-confirm::backdrop {
  background: rgba(43, 29, 16, 0.45);
}
.umka-confirm-form {
  padding: 24px 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.umka-confirm-form h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #2b1d10;
}
.umka-confirm-form p {
  margin: 0;
  color: #5a4630;
  line-height: 1.45;
}
.umka-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.cta-button.danger {
  background: #d44;
  color: #fff;
  border-color: #d44;
}
.cta-button.danger:hover,
.cta-button.danger:focus {
  background: #b33;
  border-color: #b33;
  color: #fff;
}

/* === Пагинация и сортировка таблицы пользователей ===
   WHY: до пагинации админка отдавала фиксированные 30 строк без
   возможности дойти до старых записей. Минимальный стиль в палитре
   проекта, чтобы не вводить новый дизайн-язык. */
.umka-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 6px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: #5a4630;
}
.umka-pagination a,
.umka-pagination span.umka-pagination-current {
  padding: 6px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #2b1d10;
  background: #f1e6d2;
  border: 1px solid #e5d6bd;
}
.umka-pagination a:hover {
  background: #e8d8bd;
  color: #2b1d10;
}
.umka-pagination .is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.umka-sort-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.umka-sort-link:hover {
  color: #d97a2c;
}
.umka-sort-arrow {
  font-size: 0.8em;
  color: #d97a2c;
}

/* WHY (Фаза D): доменный отчёт. Тёплая палитра — bar-fill #d97a2c,
   фон карточки чуть светлее основного фона, скругления 16/24px чтобы
   попадать в общий язык дашборда. */
.domain-report .domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.domain-card {
  background: #fbf3e2;
  border: 1px solid #ecdfc4;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.domain-card .domain-name {
  font-weight: 700;
  color: #2b1d10;
  font-size: 0.98rem;
}
.domain-card .domain-bar {
  height: 10px;
  background: #f1e6d2;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.domain-card .domain-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f0a55a 0%, #d97a2c 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.domain-card .domain-meta {
  font-size: 0.88rem;
  color: #6f5a3e;
}
.domain-card .domain-meta strong {
  color: #2b1d10;
}

/* WHY (Фаза D): недельный бар-чарт. Фиксированная высота 160px, бары
   растягиваются от низа — flex-end. CSS-only, без JS-библиотек. */
.weekly-report .weekly-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  align-items: end;
}
.weekly-report .weekly-chart-wide {
  grid-template-columns: repeat(14, minmax(0, 1fr));
}
.weekly-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.weekly-bar {
  width: 100%;
  height: 160px;
  background: #f1e6d2;
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid #ecdfc4;
}
.weekly-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #f0a55a 0%, #d97a2c 100%);
  border-radius: 10px 10px 0 0;
  transition: height 0.4s ease;
  min-height: 2px;
}
.weekly-day-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #2b1d10;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.weekly-day-date {
  font-size: 0.74rem;
  color: #6f5a3e;
}
.weekly-day-meta {
  font-size: 0.72rem;
  color: #8a7350;
}
@media (max-width: 720px) {
  .weekly-report .weekly-chart-wide {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .weekly-bar {
    height: 120px;
  }
}

/* =========================================================================
   ABC game (азбука) и Counting game (учим счёт).
   WHY: визуальная палитра подчинена общему стилю Умки (бежевый фон, скругления 24px),
   но цвет «героя экрана» (буквы/цифры) — пастельный из палитры через inline-style,
   чтобы JS мог менять цвет по букве/цифре без перегенерации классов.
   ========================================================================= */

.abc-shell,
.counting-shell {
  /* WHY: единый адаптивный flex-контейнер — на больших экранах вертикальная композиция,
     на мобильных всё центрируется и сжимается без отдельной мобильной разметки. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 20px 16px;
  background: #f6efe2;
  border-radius: 24px;
}

.abc-prompt,
.counting-prompt {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2b1d10;
  text-align: center;
}

.abc-letter {
  /* WHY: 140px — буква читается через комнату, фон — пастель, скругление 24 в стиле сайта. */
  font-size: 140px;
  line-height: 1;
  font-weight: 800;
  color: #2b1d10;
  background: #f3e9d2;
  border-radius: 24px;
  padding: 18px 36px;
  min-width: 160px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(43, 29, 16, 0.08);
}

.abc-word {
  /* WHY: эмодзи + слово в одну строку, крупно — слово ребёнок ещё не читает,
     но визуально связывает букву с образом. */
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #6e4a1b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.abc-word .abc-emoji { font-size: 2.4rem; }

.abc-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px; /* WHY: ≥16px — палец ребёнка не задевает соседнюю кнопку. */
  margin-top: 8px;
}
.abc-choices.is-hidden { display: none; }

.abc-choice {
  /* WHY: 96×96 — комфортный target-size для 3-летки; шрифт 56px — буква легко читается. */
  width: 96px;
  height: 96px;
  font-size: 56px;
  font-weight: 800;
  color: #2b1d10;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.abc-choice:active { transform: scale(0.96); }
.abc-choice.correct { border-color: #2e7d32; background: #caffbf !important; }
.abc-choice.wrong   { border-color: #c62828; opacity: 0.7; }
.abc-choice.hint    { border-color: #d97a2c; box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.25); }

.abc-next-btn {
  /* WHY: отдельная кнопка «Дальше» — в режиме знакомства родитель/ребёнок сами решают темп. */
  background: #d97a2c;
  color: #fff;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 16px;
}
.abc-next-btn.is-hidden { display: none; }

/* ---- Counting ---- */

.counting-stimulus {
  /* WHY: stimulus меняется по режиму — items (ряд предметов) или digit (большая цифра).
     Базовый контейнер flex, остальное добавляется модификатором класса. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 100px;
}

.counting-item {
  /* WHY: 60px — крупно, чтобы ребёнок мог пересчитать пальцем по экрану. */
  font-size: 60px;
  line-height: 1;
  margin: 4px;
}

.counting-digit {
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  color: #2b1d10;
  background: #f3e9d2;
  border-radius: 24px;
  padding: 16px 36px;
  min-width: 140px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(43, 29, 16, 0.08);
}

.counting-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.counting-num-choice {
  /* WHY: 88×88 — крупный «кнопочный» size, число читается за полсекунды. */
  width: 88px;
  height: 88px;
  font-size: 52px;
  font-weight: 800;
  color: #2b1d10;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.counting-num-choice:active { transform: scale(0.96); }
.counting-num-choice.correct { border-color: #2e7d32; background: #caffbf !important; }
.counting-num-choice.wrong   { border-color: #c62828; opacity: 0.7; }
.counting-num-choice.hint    { border-color: #d97a2c; box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.25); }

.counting-group-choice {
  /* WHY: группа предметов в режимах B/C — это «карточка» с внутренним flex-wrap,
     min-height обеспечивает одинаковую высоту даже если N=1 в одной из карточек. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-width: 140px;
  min-height: 120px;
  padding: 12px;
  background: #fff;
  border: 3px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.counting-group-choice .counting-item { font-size: 38px; margin: 2px; }
.counting-group-choice:active { transform: scale(0.97); }
.counting-group-choice.correct { border-color: #2e7d32; background: #eaffe0; }
.counting-group-choice.wrong   { border-color: #c62828; opacity: 0.75; }
.counting-group-choice.hint    { border-color: #d97a2c; box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.25); }

@media (max-width: 720px) {
  /* WHY: на телефоне всё меньше — но не ниже эргономического минимума 64×64 для пальца. */
  .abc-letter { font-size: 96px; padding: 12px 24px; min-width: 120px; }
  .abc-word { font-size: 1.2rem; }
  .abc-word .abc-emoji { font-size: 1.8rem; }
  .abc-choice { width: 72px; height: 72px; font-size: 40px; }
  .counting-digit { font-size: 84px; padding: 12px 24px; min-width: 100px; }
  .counting-item { font-size: 44px; }
  .counting-num-choice { width: 70px; height: 70px; font-size: 38px; }
  .counting-group-choice { min-width: 110px; min-height: 96px; }
  .counting-group-choice .counting-item { font-size: 30px; }
}

/* =========================================================================
   Syllables / Pattern / Double-rule (новые игры).
   WHY: единый стиль с ABC/Counting — те же скругления 24px, та же пастель,
   акцент #d97a2c. Минимум новых правил, максимум переиспользования.
   ========================================================================= */

.syllables-shell,
.pattern-shell,
.doublerule-shell {
  /* WHY: общий контейнер — flex-колонка по центру, как в abc/counting. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 20px 16px;
  background: #f6efe2;
  border-radius: 24px;
}

.syllables-prompt,
.pattern-prompt {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2b1d10;
  text-align: center;
}

/* ---- Syllables ---- */
.syllables-card {
  /* WHY: одна большая карточка ~180px высоты, скруглённая, тап-friendly.
     Фон задаёт JS (пастель из палитры) — поэтому здесь только структура. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  min-height: 180px;
  padding: 18px 28px;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(43, 29, 16, 0.08);
  transition: transform 0.12s ease;
}
.syllables-card:active { transform: scale(0.97); }
.syllables-card.is-hidden { display: none; }

.syllables-emoji {
  /* WHY: 140px — крупно для младших детей, читается через комнату. */
  font-size: 140px;
  line-height: 1;
}
.syllables-text {
  /* WHY: слог 60px заглавными — образ устной речи и зрительный «якорь» к звуку. */
  font-size: 60px;
  font-weight: 800;
  color: #2b1d10;
  letter-spacing: 0.04em;
}

.syllables-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}
.syllables-choices.is-hidden { display: none; }

.syllables-choice {
  /* WHY: режим B — 3 кнопки по ~110px, эмодзи 64px. ≥64px = target-size минимум. */
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.syllables-choice .syllables-choice-emoji { font-size: 64px; line-height: 1; }
.syllables-choice:active { transform: scale(0.96); }
.syllables-choice.correct { border-color: #2e7d32; background: #caffbf !important; }
.syllables-choice.wrong   { border-color: #c62828; opacity: 0.7; }
.syllables-choice.hint    { border-color: #d97a2c; box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.25); }

.syllables-next-btn {
  /* WHY: «Дальше» крупная — для малыша главный элемент управления в режиме A. */
  background: #d97a2c;
  color: #fff;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 16px;
  font-size: 1.1rem;
  min-height: 64px;
}

/* ---- Pattern ---- */
.pattern-strip {
  /* WHY: ряд элементов узора + «?»; gap ≥12px, чтобы было ощущение «отдельных ячеек». */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 18px;
}
.pattern-cell {
  font-size: 70px;
  line-height: 1;
  min-width: 80px;
  text-align: center;
}
.pattern-cell-q {
  /* WHY: «пропуск» — выделяем визуально (бледный фон + пунктир), чтобы ребёнок видел,
     что именно сюда нужно подобрать элемент. */
  font-weight: 800;
  color: #d97a2c;
  background: #fdf3e6;
  border: 3px dashed #d97a2c;
  border-radius: 16px;
  padding: 0 12px;
}

.pattern-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}
.pattern-choice {
  /* WHY: 96×96 — комфортный target. Эмодзи 56px — крупно. */
  width: 96px;
  height: 96px;
  font-size: 56px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.pattern-choice:active { transform: scale(0.96); }
.pattern-choice.correct { border-color: #2e7d32; background: #caffbf !important; }
.pattern-choice.wrong   { border-color: #c62828; opacity: 0.7; }
.pattern-choice.hint    { border-color: #d97a2c; box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.25); }

/* ---- Double-rule ---- */
.doublerule-instruction {
  /* WHY: крупная инструкция со словами-акцентами (цвет/форма). */
  font-size: 1.5rem;
  font-weight: 700;
  color: #2b1d10;
  text-align: center;
  padding: 14px 18px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(43, 29, 16, 0.05);
}
.doublerule-instruction .dr-accent {
  /* WHY: акцентное слово (цвет/форма) выделено крупнее и жирнее — глаз ребёнка
     сразу цепляется за два «правила». Цвет цветового слова задаёт JS inline. */
  font-weight: 800;
  text-transform: lowercase;
}

.doublerule-grid {
  /* WHY: CSS-переменная --cols задаётся из JS по размеру сетки (2 или 3 колонки). */
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(80px, 1fr));
  gap: 16px;
  justify-items: center;
  padding: 12px;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
}
.doublerule-item {
  /* WHY: 80×80px эмодзи в большой кнопке — тап-friendly минимум. */
  width: 88px;
  height: 88px;
  font-size: 64px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.doublerule-item:active { transform: scale(0.96); }
.doublerule-item.correct { border-color: #2e7d32; background: #caffbf !important; }
.doublerule-item.wrong   { border-color: #c62828; opacity: 0.7; }
.doublerule-item.hint    { border-color: #d97a2c; box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.25); }

@media (max-width: 720px) {
  /* WHY: на мобильном уменьшаем стимулы, но сохраняем target ≥64px. */
  .syllables-emoji { font-size: 96px; }
  .syllables-text { font-size: 44px; }
  .syllables-card { min-height: 150px; min-width: 180px; padding: 14px 22px; }
  .syllables-choice { width: 88px; height: 88px; }
  .syllables-choice .syllables-choice-emoji { font-size: 48px; }
  .pattern-cell { font-size: 50px; min-width: 60px; }
  .pattern-choice { width: 72px; height: 72px; font-size: 42px; }
  .doublerule-instruction { font-size: 1.2rem; padding: 10px 14px; }
  .doublerule-item { width: 72px; height: 72px; font-size: 48px; }
}

/* =========================================================================
   НОВЫЕ ИГРЫ: categoryodd / seasons / pairs / pairsmemory / connectdots
   WHY: используем общий стиль шеллов (центрированная колонка, пастельный фон),
   target-size ≥64px на всех кнопках, gap ≥16px между кликабельными элементами.
   ========================================================================= */

.categoryodd-shell,
.seasons-shell,
.pairs-shell,
.memory-shell,
.dots-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 20px 16px;
  background: #f6efe2;
  border-radius: 24px;
}

.categoryodd-prompt,
.seasons-prompt,
.pairs-prompt,
.memory-prompt,
.dots-prompt {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2b1d10;
  text-align: center;
}

/* ---- categoryodd ---- */
.categoryodd-grid {
  /* WHY: 4 карточки в ряд на десктопе, 2×2 на узких — адаптивно через auto-fit. */
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 560px;
}
.categoryodd-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 130px;
  padding: 12px 8px;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.categoryodd-card:active { transform: scale(0.96); }
.categoryodd-emoji { font-size: 64px; line-height: 1; }
.categoryodd-label { font-size: 16px; font-weight: 600; color: #2b1d10; }
.categoryodd-card.correct { border-color: #2e7d32; background: #caffbf !important; }
.categoryodd-card.wrong   { border-color: #c62828; opacity: 0.7; }
.categoryodd-card.hint    { border-color: #d97a2c; box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.25); }

/* ---- seasons ---- */
.seasons-stimulus {
  /* WHY: большой блок-стимул — эмодзи 120px или подпись «☀ ЛЕТО». */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 12px 24px;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
}
.seasons-big { font-size: 120px; line-height: 1; }
.seasons-bigword {
  font-size: 2rem;
  font-weight: 800;
  color: #2b1d10;
  text-align: center;
  letter-spacing: 0.04em;
}
.seasons-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.seasons-choice {
  /* WHY: 110×110 кнопки — крупный target, читаемая подпись/эмодзи. */
  min-width: 110px;
  min-height: 70px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2b1d10;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.seasons-choice.is-emoji { font-size: 56px; min-width: 96px; min-height: 96px; padding: 8px; }
.seasons-choice:active { transform: scale(0.96); }
.seasons-choice.correct { border-color: #2e7d32; background: #caffbf !important; }
.seasons-choice.wrong   { border-color: #c62828; opacity: 0.7; }
.seasons-choice.hint    { border-color: #d97a2c; box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.25); }

/* ---- pairs ---- */
.pairs-stimulus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 14px 24px;
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 320px;
}
.pairs-emoji { font-size: 140px; line-height: 1; }
.pairs-word { font-size: 24px; font-weight: 700; color: #2b1d10; }
.pairs-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.pairs-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 110px;
  min-height: 130px;
  padding: 12px 8px;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.pairs-choice:active { transform: scale(0.96); }
.pairs-choice-emoji { font-size: 64px; line-height: 1; }
.pairs-choice-label { font-size: 16px; font-weight: 600; color: #2b1d10; }
.pairs-choice.correct { border-color: #2e7d32; background: #caffbf !important; }
.pairs-choice.wrong   { border-color: #c62828; opacity: 0.7; }
.pairs-choice.hint    { border-color: #d97a2c; box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.25); }

/* ---- pairsmemory ---- */
.memory-grid {
  /* WHY: --cols задаёт JS (2 для 6 карт, 4 для 12) — единая адаптивная сетка. */
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(72px, 1fr));
  gap: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 440px;
}
.memory-card {
  /* WHY: 84×84 — крупный target для пальцев малыша, эмодзи 48px. */
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 72px;
  background: #f3e9d2;
  border: 3px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.memory-card-back,
.memory-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  line-height: 1;
}
.memory-card-back { color: #d97a2c; font-weight: 800; font-size: 40px; }
.memory-card-face { display: none; }
.memory-card[data-state="revealed"] .memory-card-back,
.memory-card[data-state="matched"] .memory-card-back { display: none; }
.memory-card[data-state="revealed"] .memory-card-face,
.memory-card[data-state="matched"] .memory-card-face { display: flex; }
.memory-card[data-state="matched"] { border-color: #2e7d32; background: #caffbf; }
.memory-card[data-state="revealed"] { border-color: #d97a2c; }
.memory-card:active { transform: scale(0.96); }

/* ---- connectdots ---- */
.dots-board {
  /* WHY: канва-обёртка фиксированной пропорции, SVG растягивается через viewBox. */
  width: 100%;
  max-width: 440px;
  aspect-ratio: 10 / 9;
  background: #fff;
  border-radius: 18px;
  padding: 8px;
}
.dots-svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}
.dot-circle {
  cursor: pointer;
}
.dot-circle > circle {
  fill: #f3e9d2;
  stroke: #d97a2c;
  stroke-width: 2.5;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.dot-circle[data-state="next"] > circle { stroke: #d97a2c; stroke-width: 3.5; }
.dot-circle.hint > circle { fill: #fdf3e6; stroke-width: 4; }
.dot-circle[data-state="done"] > circle,
.dot-circle.done > circle { fill: #caffbf; stroke: #2e7d32; }
.dot-text {
  font-size: 22px;
  font-weight: 800;
  fill: #2b1d10;
  user-select: none;
  pointer-events: none;
}
.dot-line {
  stroke: #d97a2c;
  stroke-width: 4;
  stroke-linecap: round;
}

@media (max-width: 720px) {
  /* WHY: на мобильном уменьшаем стимулы, но target ≥64px сохраняем. */
  .categoryodd-grid { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .categoryodd-card { min-height: 110px; }
  .categoryodd-emoji { font-size: 52px; }
  .seasons-big { font-size: 88px; }
  .seasons-bigword { font-size: 1.5rem; }
  .seasons-stimulus { min-height: 130px; }
  .seasons-choice { min-width: 90px; padding: 12px 14px; font-size: 1rem; }
  .seasons-choice.is-emoji { font-size: 44px; min-width: 80px; min-height: 80px; }
  .pairs-emoji { font-size: 96px; }
  .pairs-stimulus { min-height: 140px; }
  .pairs-choice { min-width: 96px; min-height: 110px; }
  .pairs-choice-emoji { font-size: 48px; }
  .memory-card-back { font-size: 32px; }
  .memory-card-face { font-size: 36px; }
  .dots-board { aspect-ratio: 1 / 1; }
  .dot-text { font-size: 18px; }
}

/* =====================================================================
   WHY: стили для 4 новых игр. Цель — кнопки ≥64×64px, зазор ≥16px,
   адаптив на мобильном. Без внешних библиотек, без новых шрифтов.
   ===================================================================== */

/* ---- Найди отличия (view-differences) ---- */
.diff-shell { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.diff-prompt { font-size: 1.3rem; font-weight: 700; color: #2b1d10; text-align: center; }
.diff-progress { text-align: center; color: #6b4a26; font-weight: 600; }
.diff-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.diff-scene {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #cfe8ff 0%, #e8f5d0 100%);
  border: 3px solid #d97a2c;
  border-radius: 16px;
  overflow: hidden;
  min-height: 220px;
}
.diff-emoji {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 44px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
/* WHY: только diff-target кликабелен и достаточно крупен для тапа (≥64px по площади). */
.diff-target {
  pointer-events: auto;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  min-width: 64px;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.diff-target.found {
  background: rgba(46, 125, 50, 0.25);
  box-shadow: 0 0 0 3px #2e7d32 inset;
}
.diff-target.hint {
  animation: diff-pulse 0.9s ease-in-out 2;
}
@keyframes diff-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 122, 44, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(217, 122, 44, 0.45); }
}

/* ---- Лабиринт Умки (view-maze) ---- */
.maze-shell { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.maze-prompt { font-size: 1.3rem; font-weight: 700; color: #2b1d10; }
.maze-board {
  --maze-size: 5;
  display: grid;
  grid-template-columns: repeat(var(--maze-size), 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  width: min(420px, 92vw);
  aspect-ratio: 1 / 1;
  padding: 8px;
  background: #f4e4cd;
  border: 3px solid #d97a2c;
  border-radius: 16px;
  outline: none;
}
.maze-cell {
  background: #fff8ec;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
  /* WHY: клетки ≥48px на десктопе, ≥40px на мобильном — для тапа допустимо. */
  min-width: 40px;
  min-height: 40px;
}
.maze-cell.wall { background: #6b4a26; cursor: default; }
.maze-cell.goal { background: #ffe9a8; }
.maze-cell.bear { background: #b6e3a1; }
.maze-cell.hint { box-shadow: 0 0 0 3px #d97a2c inset; animation: diff-pulse 0.9s ease-in-out 2; }

.maze-board {
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.7), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #f7efd8, #e7d9b8);
  border-color: rgba(171, 116, 52, 0.62);
  border-radius: 18px;
  box-shadow: 0 14px 26px rgba(99, 70, 36, 0.16), inset 0 0 0 2px rgba(255,255,255,0.4);
}
.maze-cell {
  background: linear-gradient(180deg, #fff9ea, #f3e2bd);
  border-radius: 9px;
  position: relative;
  box-shadow: inset 0 -3px 0 rgba(134, 92, 44, 0.08);
  transition: transform 0.12s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.maze-cell.wall {
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.16), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #81613c, #5d4022);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.1), inset 0 -5px 0 rgba(0,0,0,0.12);
}
.maze-cell.goal {
  background: radial-gradient(circle at 50% 45%, #fff7b6, #ffd166 72%);
  box-shadow: 0 0 0 4px rgba(255,209,102,0.18), inset 0 -3px 0 rgba(161,111,30,0.12);
}
.maze-cell.trail:not(.bear):not(.goal) {
  background: linear-gradient(180deg, #e8f6d5, #d4ebb6);
}
.maze-cell.available:not(.bear):not(.goal) {
  box-shadow: 0 0 0 4px rgba(46,196,182,0.18), inset 0 -3px 0 rgba(134, 92, 44, 0.08);
}
.maze-cell.available:not(.bear):not(.goal)::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(46,196,182,0.62);
}
.maze-cell.bear {
  background: radial-gradient(circle at 50% 46%, #dff8cc, #a9df8d 76%);
  transform: scale(1.03);
  box-shadow: 0 0 0 5px rgba(46,196,182,0.16), inset 0 -3px 0 rgba(64,126,72,0.12);
}
.maze-cell.hint {
  box-shadow: 0 0 0 5px rgba(217, 122, 44, 0.28) inset, 0 0 0 5px rgba(255,159,28,0.16);
}
.maze-cell.bump { animation: mazeWallBump 340ms ease both; }

.maze-dpad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: repeat(2, 54px);
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.maze-move {
  border: 2px solid rgba(67, 50, 32, 0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #e5fbff);
  box-shadow: 0 7px 14px rgba(63, 90, 104, 0.15);
  color: #244155;
  font-size: 28px;
  font-weight: 900;
  min-height: 54px;
  touch-action: manipulation;
  cursor: pointer;
}
.maze-move:active {
  transform: translateY(2px);
  box-shadow: 0 3px 8px rgba(63, 90, 104, 0.14);
}
.maze-move.up { grid-column: 2; grid-row: 1; }
.maze-move.left { grid-column: 1; grid-row: 2; }
.maze-move.right { grid-column: 3; grid-row: 2; }
.maze-move.down { grid-column: 2; grid-row: 2; }

@keyframes mazeWallBump{
  0%, 100%{ transform: translateX(0); }
  35%{ transform: translateX(-3px); }
  70%{ transform: translateX(3px); }
}

/* ---- Музыкальная мелодия (view-melody) ---- */
.melody-shell { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.melody-prompt { font-size: 1.4rem; font-weight: 700; color: #2b1d10; text-align: center; }
.melody-keys {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.melody-key {
  /* WHY: клавиша ≥80×120 — комфортно для детского пальца, зазор 16px. */
  width: 80px;
  height: 120px;
  border: 3px solid #2b1d10;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 0 #2b1d10;
}
.melody-key:active,
.melody-key.active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2b1d10;
  filter: brightness(1.25);
}
.melody-key.hint {
  box-shadow: 0 4px 0 #2b1d10, 0 0 0 5px rgba(217, 122, 44, 0.55);
}

/* ---- Симон говорит (view-simon) ---- */
.simon-shell { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.simon-bear { font-size: 72px; line-height: 1; }
.simon-prompt {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2b1d10;
  background: #fff8ec;
  padding: 14px 18px;
  border-radius: 16px;
  border: 3px solid #d97a2c;
  max-width: 540px;
  text-align: center;
}
/* WHY: круг-таймер для режима B. Реализован через conic-gradient по CSS-переменной --p (0..1). */
.simon-timer {
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.simon-timer.active {
  width: 56px;
  height: 56px;
  opacity: 1;
  border-radius: 50%;
  background: conic-gradient(#06d6a0 calc(var(--p, 0) * 360deg), #e8d6b9 0);
  border: 3px solid #2b1d10;
}
.simon-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 16px;
  max-width: 420px;
  width: 100%;
}
.simon-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* WHY: target ≥120×120, зазор 16px — соответствует требованиям интерфейса для детей. */
  min-width: 120px;
  min-height: 120px;
  padding: 14px;
  background: #fff8ec;
  border: 3px solid #2b1d10;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.simon-target:active { transform: scale(0.96); }
.simon-emoji { font-size: 56px; line-height: 1; }
.simon-label { font-size: 1rem; font-weight: 600; color: #2b1d10; }
.simon-target.hint { box-shadow: 0 0 0 4px rgba(217, 122, 44, 0.55); }

@media (max-width: 720px) {
  /* WHY: на мобильном — отличия друг под другом, лабиринт уже, клавиши/таргеты компактнее. */
  .diff-boards { grid-template-columns: 1fr; }
  .diff-scene { min-height: 200px; }
  .diff-emoji { font-size: 36px; }
  .maze-board { width: min(360px, 96vw); }
  .maze-cell { font-size: 22px; min-width: 32px; min-height: 32px; }
  .maze-dpad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(2, 50px); }
  .maze-move { min-height: 50px; font-size: 25px; }
  .melody-key { width: 64px; height: 100px; }
  .simon-bear { font-size: 56px; }
  .simon-prompt { font-size: 1.1rem; padding: 12px 14px; }
  .simon-targets { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .simon-target { min-width: 100px; min-height: 100px; padding: 10px; }
  .simon-emoji { font-size: 44px; }
}

/* ===== Phase 1: Privacy & Consent ===== */
/* Юридические документы: типографика, оптимизированная для длинного чтения. */
.legal-doc {
  max-width: 760px;
  margin: 40px auto 80px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
}
.legal-doc h1 {
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 12px;
}
.legal-doc h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 36px 0 12px;
}
.legal-doc h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 24px 0 10px;
}
.legal-doc p,
.legal-doc ul,
.legal-doc ol,
.legal-doc dl,
.legal-doc table { margin: 0 0 14px; }
.legal-doc ul,
.legal-doc ol { padding-left: 24px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc .legal-meta {
  background: #f5f7fb;
  border-left: 3px solid #4a6bff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 15px;
  color: #2c3344;
}
.legal-doc dl.privacy-org {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  background: #fafafa;
  padding: 14px 18px;
  border-radius: 8px;
}
.legal-doc dl.privacy-org dt { font-weight: 700; }
.legal-doc dl.privacy-org dd { margin: 0; }
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.legal-doc table th,
.legal-doc table td {
  border: 1px solid #e4e6eb;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-doc table th { background: #f5f7fb; font-weight: 700; }
.legal-doc code {
  background: #f1f2f6;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

/* Чекбокс согласия — крупная кликабельная область, текст и квадрат
   выровнены по верху, чтобы длинное предложение читалось аккуратно. */
.consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
}
.consent-checkbox input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.consent-checkbox span { flex: 1; }
.consent-checkbox a { color: #4a6bff; text-decoration: underline; }

/* Модалка повторного согласия после обновления политики. */
.umka-policy-update {
  border: none;
  border-radius: 14px;
  padding: 0;
  max-width: 520px;
  width: calc(100% - 40px);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.25);
  color: #1a1a1a;
}
.umka-policy-update-form {
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.umka-policy-update-form h3 {
  margin: 0;
  font-size: 20px;
}
.umka-policy-update-form p { margin: 0; font-size: 15px; line-height: 1.5; }
.umka-policy-update-form a { color: #4a6bff; }
.umka-policy-update-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* ===== Фаза 2: импорт детей специалистом + раскрытие ФИО ===== */
/* WHY: визуально отделяем блок «опасной» массовой операции от обычных карточек,
   чтобы специалист не путал «Добавить одного ребёнка» и «Загрузить CSV на 100». */
.import-section {
  border: 1px solid #e4ddf5;
  background: #fafaff;
}
.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}
.import-preview-table th,
.import-preview-table td {
  border: 1px solid #e6e6ef;
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.import-preview-table th { background: #f3f3fa; }
.import-status-ok { background: #f0fbf2; }
.import-status-ok td { color: #1f5a2d; }
.import-status-skip { background: #fff5f5; }
.import-status-skip td { color: #8a3d3d; }

.fio-toggle {
  font-size: 13px;
}
/* WHY: мягкий бордер и приглушённый фон, чтобы блок ФИО визуально воспринимался
   как «чувствительная» информация, а не часть основной карточки. */
.fio-block {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed #b9b1d6;
  border-radius: 8px;
  background: #fbfaff;
  font-size: 14px;
  line-height: 1.5;
}

/* WHY (Фаза 3): секция «Управление данными» — заметная, но не алярмирующая.
   Мягкий бордер и небольшой отступ выделяют её среди обычных карточек, но
   красный цвет применяется только к самой кнопке через .danger-action. */
.data-deletion-section {
  border: 1px solid #e1d6cf;
  background: #fff8f3;
}

.data-deletion-section h3 {
  margin-top: 0;
}

/* WHY: статус «ожидает» — жёлтоватый фон с иконкой, чтобы родитель сразу
   увидел, что запрос уже в системе и повторять не нужно. */
.deletion-status-pending {
  display: inline-block;
  padding: 10px 14px;
  background: #fff4d6;
  border: 1px solid #e7c870;
  border-radius: 8px;
  color: #6b4f0d;
  font-size: 14px;
  line-height: 1.5;
}

.deletion-status-pending strong {
  display: block;
  margin-bottom: 4px;
}

/* WHY: статус «выполнено» — нейтральный серый, без алярма; это нормальный
   ход истории в админ-журнале. */
.deletion-status-completed {
  display: inline-block;
  padding: 4px 8px;
  background: #eef0f3;
  border-radius: 6px;
  color: #4a5568;
  font-size: 13px;
}

/* WHY: используем существующий .admin-table для рамки/сетки, добавляем
   только верхний отступ блока, чтобы он не слипался с предыдущей карточкой. */
.admin-deletion-queue {
  margin-top: 8px;
}

/* WHY: красноватая кнопка для опасных действий (удаление, исполнение
   запроса). hover ярче — даёт визуальный сигнал, что действие необратимо. */
.danger-action {
  background: #c0392b;
  border-color: #a93226;
  color: #fff;
}

.danger-action:hover,
.danger-action:focus {
  background: #a93226;
  border-color: #922b21;
  color: #fff;
}

.ghost-button.danger-action {
  background: transparent;
  color: #c0392b;
  border-color: #c0392b;
}

.ghost-button.danger-action:hover,
.ghost-button.danger-action:focus {
  background: #c0392b;
  color: #fff;
}

/* WHY: Пакет A — 4 ретро-аркадные игры. Общие стили:
   border-radius: 8px (не 24, чтобы выглядело «пиксельно»), яркие первичные цвета.
   Кнопки управления ≥64×64, зазор ≥16, под пальцами детей.
   Canvas — фиксированный соотношением сторон, адаптив через max-width: 100%. */
.wolfeggs-shell, .frog-shell, .bubbles-shell, .snakelite-shell,
.pacmunch-shell, .pongumka-shell, .tetrismini-shell {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 16px;
}
.wolfeggs-status, .frog-status, .bubbles-status, .snakelite-status,
.pacmunch-status, .pongumka-status, .tetrismini-status {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.wolfeggs-stage, .frog-stage, .bubbles-stage, .snakelite-stage,
.pacmunch-stage, .pongumka-stage, .tetrismini-stage {
  border: 3px solid #2a2a2a; border-radius: 8px; overflow: hidden;
  background: #f7fbff; max-width: 100%;
}
.wolfeggs-canvas, .frog-canvas, .bubbles-canvas, .snakelite-canvas,
.pacmunch-canvas, .pongumka-canvas, .tetrismini-canvas {
  display: block; max-width: 100%; height: auto; image-rendering: pixelated;
}
.frog-canvas, .bubbles-canvas, .snakelite-canvas,
.pacmunch-canvas, .pongumka-canvas, .tetrismini-canvas { touch-action: none; }
/* WHY: Пакет B — для pacmunch и tetrismini тот же крестообразный layout кнопок,
   что и у frog/snakelite (стрелки). Кнопки 64×64, зазор 16 — правило тактильной зоны. */
.pacmunch-pads, .tetrismini-pads {
  display: grid;
  grid-template-areas: ". up ." "left down right";
  grid-template-columns: 64px 64px 64px;
  grid-template-rows: 64px 64px;
  gap: 16px;
}
.pacmunch-pad, .tetrismini-pad {
  min-width: 64px; min-height: 64px;
  font-size: 28px; font-weight: bold;
  background: #ffd166; color: #1a1a2e;
  border: 3px solid #1a1a2e; border-radius: 8px;
  cursor: pointer; transition: transform 0.08s;
  touch-action: manipulation; user-select: none;
}
.pacmunch-pad:active, .tetrismini-pad:active { transform: scale(0.94); background: #ffeaa0; }
.pacmunch-pad.is-selected, .tetrismini-pad.is-selected {
  background: #80d8ff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.75), 0 0 0 4px rgba(47,128,237,0.18);
}
.pacmunch-pad[data-dir="up"],    .tetrismini-pad[data-dir="up"]    { grid-area: up; }
.pacmunch-pad[data-dir="left"],  .tetrismini-pad[data-dir="left"]  { grid-area: left; }
.pacmunch-pad[data-dir="down"],  .tetrismini-pad[data-dir="down"]  { grid-area: down; }
.pacmunch-pad[data-dir="right"], .tetrismini-pad[data-dir="right"] { grid-area: right; }
/* 4 кнопки углов для wolfeggs — сетка 2×2 */
.wolfeggs-pads {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  width: 100%; max-width: 320px;
}
.wolfeggs-pad {
  min-width: 64px; min-height: 64px; padding: 14px;
  font-size: 32px; font-weight: bold;
  background: #ff9f1c; color: #1a1a2e;
  border: 3px solid #1a1a2e; border-radius: 8px;
  cursor: pointer; transition: transform 0.08s;
  touch-action: manipulation; user-select: none;
}
.wolfeggs-pad:active { transform: scale(0.94); background: #ffd166; }
/* 4 кнопки направления для frog/snakelite — крестообразный layout */
.frog-pads, .snakelite-pads {
  display: grid;
  grid-template-areas: ". up ." "left down right";
  grid-template-columns: 64px 64px 64px;
  grid-template-rows: 64px 64px;
  gap: 16px;
}
.frog-pad, .snakelite-pad {
  min-width: 64px; min-height: 64px;
  font-size: 28px; font-weight: bold;
  background: #06d6a0; color: #1a1a2e;
  border: 3px solid #1a1a2e; border-radius: 8px;
  cursor: pointer; transition: transform 0.08s;
  touch-action: manipulation; user-select: none;
}
.frog-pad:active, .snakelite-pad:active { transform: scale(0.94); background: #80d8ff; }
.frog-pad.is-selected, .snakelite-pad.is-selected {
  background: #fff3b0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.75), 0 0 0 4px rgba(6,214,160,0.22);
}
.wolfeggs-pad:focus-visible, .frog-pad:focus-visible, .snakelite-pad:focus-visible, .pongumka-pad:focus-visible,
.pacmunch-pad:focus-visible, .tetrismini-pad:focus-visible {
  outline: 4px solid #2f80ed;
  outline-offset: 3px;
}
.frog-pad[data-dir="up"], .snakelite-pad[data-dir="up"] { grid-area: up; }
.frog-pad[data-dir="left"], .snakelite-pad[data-dir="left"] { grid-area: left; }
.frog-pad[data-dir="down"], .snakelite-pad[data-dir="down"] { grid-area: down; }
.frog-pad[data-dir="right"], .snakelite-pad[data-dir="right"] { grid-area: right; }

.bubbles-stage, .pacmunch-stage, .snakelite-stage, .pongumka-stage, .tetrismini-stage {
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff3b0, #ffd166);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.6), 0 14px 28px rgba(32,42,51,0.16);
}
.bubbles-canvas, .pacmunch-canvas, .snakelite-canvas, .pongumka-canvas, .tetrismini-canvas {
  border-radius: 12px;
  image-rendering: auto;
}
.bubbles-stage {
  background: linear-gradient(180deg, #e8fbff, #80d8ff);
  user-select: none;
  cursor: grab;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.7), 0 16px 32px rgba(47,128,237,0.18);
}
.bubbles-stage:active { cursor: grabbing; }
.pacmunch-stage {
  background: linear-gradient(180deg, #d8fff5, #ffd166);
}
.pongumka-stage {
  background: linear-gradient(180deg, #d8fff5, #80d8ff);
}
.tetrismini-stage {
  background: linear-gradient(180deg, #ffe7a3, #ffb703);
}
.tetrismini-pad[data-dir="up"] {
  background: #bde0fe;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.75);
}
.pongumka-pads {
  display: grid;
  grid-template-columns: 76px 76px;
  gap: 14px;
}
.pongumka-pad {
  min-width: 76px;
  min-height: 64px;
  border: 3px solid #1a1a2e;
  border-radius: 8px;
  background: #80d8ff;
  color: #1a1a2e;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.75);
}
.pongumka-pad.is-selected,
.pongumka-pad:active {
  background: #fff3b0;
  transform: scale(0.96);
}

/* Wolf Eggs: standalone LCD-toy redesign, isolated from the other retro games. */
.wolfeggs-shell {
  width: min(660px, 100%);
  gap: 12px;
  padding: 10px;
}
.wolfeggs-status {
  gap: 8px;
  width: min(560px, 100%);
}
.wolfeggs-status .egg-meter {
  min-width: 102px;
  padding: 8px 10px;
  border: 2px solid rgba(32,42,51,0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff9e8, #f3dec1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 12px rgba(38,31,24,0.08);
  color: #3b3028;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}
.wolfeggs-status .value {
  display: inline-block;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 5px;
  background: #d9e5be;
  color: #243424;
  font-variant-numeric: tabular-nums;
}
.wolfeggs-stage {
  position: relative;
  padding: clamp(30px, 6vw, 42px) clamp(14px, 3vw, 22px) clamp(14px, 3vw, 22px);
  border: 0;
  border-radius: 26px;
  background: linear-gradient(180deg, #ffce75 0%, #f79d32 54%, #d86a24 100%);
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,0.42),
    inset 0 -8px 0 rgba(104,42,18,0.18),
    0 18px 36px rgba(54,38,24,0.22);
}
.wolfeggs-stage::before {
  content: "ЭЛЕКТРОНИКА";
  position: absolute;
  left: 24px;
  top: 9px;
  z-index: 2;
  color: rgba(87,42,22,0.68);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.wolfeggs-stage::after {
  content: "";
  position: absolute;
  inset: clamp(30px, 6vw, 42px) clamp(14px, 3vw, 22px) clamp(14px, 3vw, 22px);
  border-radius: 14px;
  border: 3px solid rgba(48,37,29,0.75);
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.18);
}
.wolfeggs-canvas {
  position: relative;
  z-index: 0;
  width: min(440px, 88vw);
  border-radius: 16px;
  background: #dfe9c5;
  image-rendering: auto;
  touch-action: none;
}
.wolfeggs-pads {
  gap: 10px;
  max-width: 360px;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,229,189,0.78));
  border: 1px solid rgba(120,74,28,0.16);
}
.wolfeggs-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 10px 8px;
  background: linear-gradient(180deg, #fff6d8, #ffc15a);
  font-size: 30px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.85), 0 7px 0 #9b5c16, 0 10px 18px rgba(63,38,16,0.16);
  transition: transform 0.08s, filter 0.12s, background-color 0.08s, box-shadow 0.12s;
}
.wolfeggs-pad span { line-height: 1; }
.wolfeggs-pad small {
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wolfeggs-pad.is-selected {
  background: linear-gradient(180deg, #d8fff5, #35d6b8);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.85), 0 7px 0 #15806d, 0 0 0 4px rgba(46,196,182,0.18);
}
.wolfeggs-pad.is-cue {
  animation: wolfeggsCue 640ms ease-in-out infinite alternate;
}
@keyframes wolfeggsCue {
  from { transform: translateY(0); filter: saturate(1); }
  to { transform: translateY(-2px); filter: saturate(1.35); }
}

@media (max-width: 720px) {
  /* WHY: на узких экранах кнопки немного меньше, но не <64 (правило тактильной зоны). */
  .wolfeggs-pad, .frog-pad, .snakelite-pad, .pacmunch-pad, .tetrismini-pad { font-size: 24px; }
  .wolfeggs-pads { max-width: 320px; gap: 8px; }
  .wolfeggs-pad small { font-size: 10px; }
  .frog-pads, .snakelite-pads, .pacmunch-pads, .tetrismini-pads {
    grid-template-columns: 64px 64px 64px;
    grid-template-rows: 64px 64px;
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .app { padding: 8px; }
  .game-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
    align-items: start;
    gap: 10px;
    width: 100%;
    max-width: calc(100vw - 16px);
    overflow: hidden;
    padding: 14px 12px;
  }
  .game-title { width: 100%; }
  .game-title h2,
  .game-title p,
  .guide-card p { overflow-wrap: anywhere; }
  .game-head .quiet-toggle {
    justify-self: start;
    margin-left: 0;
  }
  .game-head .tags { width: 100%; }
  .guide-card,
  .game-shell {
    width: 100%;
    max-width: calc(100vw - 16px);
  }
  .game-shell { padding: 8px; }
  .wolfeggs-shell, .frog-shell, .bubbles-shell, .snakelite-shell,
  .pacmunch-shell, .pongumka-shell, .tetrismini-shell {
    gap: 10px;
    padding: 0;
  }
  .wolfeggs-status, .frog-status, .bubbles-status, .snakelite-status,
  .pacmunch-status, .pongumka-status, .tetrismini-status { gap: 8px; }
  .wolfeggs-stage, .frog-stage, .bubbles-stage, .snakelite-stage,
  .pacmunch-stage, .pongumka-stage, .tetrismini-stage {
    display: flex;
    justify-content: center;
    max-height: min(42svh, 340px);
  }
  .wolfeggs-canvas, .frog-canvas, .bubbles-canvas, .snakelite-canvas,
  .pacmunch-canvas, .pongumka-canvas, .tetrismini-canvas {
    width: auto;
    max-width: 100%;
    height: min(42svh, 340px);
    max-height: min(42svh, 340px);
  }
  .overlay { padding: 10px; }
  .overlay-card { padding: 18px 16px; border-radius: 20px; }
}