/* ===== ДИЗАЙН-СИСТЕМА: ТОКЕНЫ (источник истины — design-preview.html) ===== */
:root{
  /* фон и поверхности */
  --bg:#FBF7EF; --surface:#FFFFFF; --surface-soft:#F4EFE4;
  /* бренд / акцент / награды */
  --brand:#1F6F50; --brand-ink:#134B36;
  --accent:#C7E03A; --accent-ink:#2C3A00; --accent-deep:#A8C72A;
  --warm:#F2A03D;
  /* семантика */
  --success:#2E9E5B; --success-bg:#E9F7EE;
  --gentle:#6B7A86; --gentle-bg:#F0F2F4;
  /* текст / границы */
  --text:#1C2B23; --muted:#5E6B63;
  --border:#E7E1D4; --border-strong:#D4CCBA;
  /* радиусы / отступы / тени */
  --r-card:16px; --r-btn:14px; --r-pill:999px; --r-sm:10px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --sh-card:0 1px 2px rgba(28,43,35,.04),0 4px 12px rgba(28,43,35,.06);
  --sh-pop:0 6px 20px rgba(28,43,35,.10);
  --sh-brand:0 6px 16px rgba(31,111,80,.18);
  --font-display:'Unbounded',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
}

/* ===== ОБЩИЙ СБРОС ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== БАЗОВЫЕ СТИЛИ ===== */
body {
  font-family: var(--font-body);
  background: linear-gradient(170deg,#FBF7EF 0%,#FaF5E9 60%,#FBF6EC 100%);
  color: var(--text);
  min-height: 100vh;
  padding: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ===== ГЛОБАЛЬНЫЙ ФОКУС С КЛАВИАТУРЫ ===== */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* ===== ВЕРСИЯ СБОРКИ ===== */
.app-version {
  position: fixed;
  bottom: 72px; /* выше нижнего таб-бара, чтобы не перекрывался */
  right: 8px;
  font-size: 0.7rem;
  color: #b9a06a;
  opacity: 0.7;
  pointer-events: none;
  z-index: 8001;
}

/* ===== ЭКРАНЫ ===== */
.screen {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 88px;
}

/* На экране вопроса добавляем отступ снизу под фиксированную кнопку «Дальше»:
   ~80px кнопка + 10px зазор + safe-area. На других экранах этот стиль не нужен. */
#screen-question {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.hidden {
  display: none !important;
}

/* ===== КОНФЕТТИ ===== */
.confetti-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-item {
  position: absolute;
  top: -2rem;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ===== МАСКОТ ЭЙС ===== */
.ace-big {
  /* Убран font-size — размер теперь через width/height для SVG-маскота */
  width: 56px;
  height: 56px;
  display: inline-block;
  flex-shrink: 0;
}

/* SVG-маскот заполняет весь контейнер */
.ace-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Инлайновый маскот в объяснении */
.ace-inline {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Покачивание маскота */
.ace-wobble {
  animation: ace-wobble 2.4s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes ace-wobble {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(6deg); }
  40%       { transform: rotate(-4deg); }
  60%       { transform: rotate(5deg); }
  80%       { transform: rotate(-3deg); }
}

/* Подпрыгивание при верном ответе */
.ace-bounce {
  animation: ace-bounce 0.5s ease-out;
}

@keyframes ace-bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-18px); }
  60%  { transform: translateY(-8px); }
  80%  { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}

/* Пузырь речи */
.ace-bubble {
  position: relative;
  display: inline-block;
  background: var(--surface);
  border: 2px solid var(--warm);
  border-radius: var(--r-card);
  padding: 12px 16px;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
  max-width: 280px;
  margin-left: 12px;
}

/* Хвостик пузыря */
.ace-bubble::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 18px;
  border-width: 7px 14px 7px 0;
  border-style: solid;
  border-color: transparent var(--warm) transparent transparent;
}

.ace-bubble::after {
  content: '';
  position: absolute;
  left: -11px;
  top: 19px;
  border-width: 6px 12px 6px 0;
  border-style: solid;
  border-color: transparent var(--surface) transparent transparent;
}

/* ===== ОНБОРДИНГ ===== */
.onboarding-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 40px;
  text-align: center;
}

.onboarding-wrap .ace-bubble {
  margin-left: 0;
  max-width: 320px;
  font-size: 1.05rem;
  text-align: center;
}

.onboarding-wrap .ace-bubble::before,
.onboarding-wrap .ace-bubble::after {
  display: none;
}

/* ===== МЕНЮ ===== */
h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--brand-ink);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.3;
}

.menu-ace-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
}

/* Звание */
.rank-line {
  text-align: center;
  margin-bottom: 6px;
}

.rank-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-ink);
}

/* Полоса прогресса звания */
.rank-progress-wrap {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 14px;
  overflow: hidden;
  margin-bottom: 6px;
}

.rank-progress-bar {
  height: 100%;
  background: var(--brand);
  border-radius: 8px;
  transition: width 0.5s ease;
  width: 0%;
}

.rank-progress-text {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 20px;
}

/* ===== КНОПКА «ТРЕНИРОВКА ДНЯ» ===== */
.btn-daily {
  display: block;
  width: 100%;
  margin-bottom: 28px;
  font-size: 1.1rem;
  padding: 16px 20px;
}

/* ===== СЕКЦИИ МЕНЮ ===== */
.menu-section {
  margin-bottom: 24px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--border);
}

/* ===== КАРТОЧКИ БЛОКОВ (bento) ===== */
.section-cards {
  /* Сетка узлов карты уровней: 2 колонки на телефоне */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Совместимость — .block-card используется в других местах, оставляем базовый стиль */
.block-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  width: 100%;
}

.block-card:hover,
.block-card:focus {
  border-color: var(--border-strong);
}

/* ===== УЗЛЫ КАРТЫ УРОВНЕЙ ===== */
.level-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px 10px;
  min-height: 96px;
  text-align: center;
  border: 1px solid transparent;
  font-family: var(--font-body);
}

/* Иконка-кружок с эмодзи */
.level-node-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s;
}

/* Подпись блока — максимум 2 строки */
.level-node-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

/* Звёзды блока */
.level-node-stars {
  font-size: 0.78rem;
  letter-spacing: 1px;
}

/* Состояние: пройден (≥1 звезда) */
.level-node.is-done {
  background: var(--success-bg);
  border-color: var(--success);
}

.level-node.is-done .level-node-icon {
  background: var(--brand);
  /* Эмодзи полноцветная — фон темнее подчёркивает иконку */
  filter: none;
}

.level-node.is-done .level-node-name {
  color: var(--brand-ink);
}

/* Состояние: 3 звезды — золотая обводка */
.level-node.is-perfect {
  border-color: var(--warm);
  box-shadow: var(--sh-card), 0 0 0 2px var(--warm);
}

/* Состояние: впереди (недоступен визуально, но кликабелен) */
.level-node.is-todo {
  opacity: 0.7;
  background: var(--surface-soft);
  border-color: var(--border);
}

.level-node.is-todo .level-node-icon {
  background: var(--border);
  filter: grayscale(30%);
}

/* Старые классы карточки (сохраняем пустыми для совместимости) */
.card-label {
  flex: 1;
}

.card-stars {
  margin-left: 10px;
  flex-shrink: 0;
  font-size: 1rem;
  letter-spacing: 1px;
}

/* ===== ЗВЁЗДЫ ===== */
.star {
  font-style: normal;
}

.star-filled {
  color: var(--warm);
}

.star-empty {
  color: var(--border-strong);
}

/* ===== ТОЧКИ-ШАГИ ===== */
.step-dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  /* Уменьшено с 8px → 4px для уплотнения верха на мобильном */
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.dot {
  /* Уменьшено с 12px → 10px для уплотнения — остаётся читаемым */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  transition: background 0.3s ease;
}

/* Цвета точек — имена классов НЕ меняем, их генерит app.js */
.dot-pending {
  background: var(--border);
}

.dot-yellow {
  background: var(--warm);
  box-shadow: 0 0 0 3px rgba(242,160,61,.2);
}

.dot-green {
  background: var(--success);
}

/* ===== СЧЁТЧИК ГЕЙМА ===== */
.game-counter {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  /* Уменьшено с 10px → 6px */
  margin-bottom: 6px;
}

/* ===== ПЛАШКИ СТАВКИ И СЕРИИ ===== */
.badges-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  /* Уменьшено с 14px → 8px */
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.stake-badge {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--brand-ink);
  border-radius: var(--r-pill);
  /* Уменьшен вертикальный padding: 4px → 3px */
  padding: 3px 10px;
  font-size: 0.82rem;
  font-weight: 600;
}

.streak-badge {
  background: #FFF1DF;
  border: 1px solid var(--warm);
  color: #9A5B12;
  border-radius: var(--r-pill);
  /* Уменьшен вертикальный padding: 4px → 3px */
  padding: 3px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}

/* ===== ТЕКСТ ВОПРОСА (bento) ===== */
.question-text-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  /* Уменьшен vertical padding: 18px → 12px; margin: 16px → 10px */
  padding: 12px 16px;
  margin-bottom: 10px;
}

.question-text {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
}

/* ===== ВАРИАНТЫ ОТВЕТОВ ===== */
.options-list {
  display: flex;
  flex-direction: column;
  /* Уменьшен gap: 12px → 8px; margin: 18px → 10px */
  gap: 8px;
  margin-bottom: 10px;
}

/* Кнопка варианта — как .opt в эталоне */
.btn-option {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  /* Уменьшен padding: 16px → 11px; min-height: 64px → 52px */
  padding: 11px 14px;
  min-height: 52px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}

.btn-option:not(:disabled):hover,
.btn-option:not(:disabled):focus {
  border-color: var(--border-strong);
}

.btn-option:not(:disabled):active {
  transform: scale(.99);
}

.btn-option:disabled {
  cursor: default;
}

/* Кружок с буквой варианта */
.option-letter {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--surface-soft);
  color: var(--brand-ink);
  transition: background 0.15s, color 0.15s;
}

.option-text {
  flex: 1;
}

/* Состояние: правильный ответ */
.btn-option.correct {
  border-color: var(--success);
  background: var(--success-bg);
}

.btn-option.correct .option-letter {
  background: var(--success);
  color: #fff;
}

/* Состояние: неверный выбор (не лучший) */
.btn-option.not-best {
  border-color: var(--gentle);
  background: var(--gentle-bg);
  opacity: 0.85;
}

.btn-option.not-best .option-letter {
  background: var(--gentle);
  color: #fff;
}

.not-best-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--gentle);
  margin-top: 2px;
  font-style: italic;
}

/* Анимация правильного ответа — класс нужен app.js, не переименовывать */
@keyframes pop-correct {
  0%   { transform: scale(1) translateY(0); }
  40%  { transform: scale(1.04) translateY(-4px); }
  70%  { transform: scale(0.98) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

.btn-option.pop-correct {
  animation: pop-correct 0.45s ease-out;
}

/* ===== ОБЪЯСНЕНИЕ (ЭЙС ОБЪЯСНЯЕТ) — как .explain в эталоне ===== */
.explanation {
  display: flex;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-card);
  /* Уменьшен vertical padding: 16px → 12px; margin: 18px → 8px
     (кнопка «Дальше» теперь фиксированная — большой отступ не нужен) */
  padding: 12px 14px;
  box-shadow: var(--sh-card);
  margin-bottom: 8px;
  line-height: 1.6;
  align-items: flex-start;
}

.explanation-body {
  flex: 1;
}

.ace-reaction {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 6px;
}

.explanation-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
}

.explanation-text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

/* ===== КНОПКА «ДАЛЬШЕ» — фиксирована внизу (паттерн Duolingo) ===== */
/* Кнопка прилипает к низу экрана и всегда видна без прокрутки после ответа.
   Нижний таб-бар скрыт на экране вопроса, поэтому конфликта нет. */
.next-btn-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  padding: 10px 16px;
  /* Запас для iPhone с нотчем снизу */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.next-btn-wrap .btn {
  max-width: 480px;
  margin: 0 auto;
}

/* ===== БАЗОВЫЕ КНОПКИ ===== */
.btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: var(--r-btn);
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  text-align: center;
}

.btn:active {
  transform: scale(0.98);
}

/* Акцентная кнопка (лайм) — убран оранжевый градиент */
.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  font-family: var(--font-display);
  box-shadow: 0 6px 16px rgba(168,199,42,.35);
}

.btn-accent:hover,
.btn-accent:focus {
  background: var(--accent-deep);
}

.btn-accent:active {
  transform: translateY(1px) scale(.99);
}

/* Нейтральная кнопка */
.btn-neutral {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-neutral:hover,
.btn-neutral:focus {
  border-color: var(--border-strong);
}

/* Outline кнопка */
.btn-outline {
  background: var(--surface);
  color: var(--brand-ink);
  border: 1.5px solid var(--brand);
}

.btn-outline:hover,
.btn-outline:focus {
  background: var(--surface-soft);
}

/* Большая кнопка */
.btn-large {
  font-size: 1.15rem;
  padding: 18px 28px;
  min-width: 200px;
  width: auto;
}

/* ===== ЭКРАН ИТОГОВ ===== */
.result-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  color: var(--brand-ink);
}

.results-ace-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 18px;
}

.results-ace-row .ace-bubble {
  max-width: 280px;
}

/* Очки сессии — фиолетовый убран, теперь бренд-цвет */
.result-points {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--brand);
  margin-bottom: 8px;
}

.result-streak {
  text-align: center;
  font-size: 0.95rem;
  color: var(--warm);
  font-weight: 600;
  margin-bottom: 12px;
}

/* Строка звёзд блока */
.result-stars-row {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 14px;
  color: var(--brand-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stars-label {
  font-weight: 600;
}

.stars-arrow {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Анимация появления новой звезды */
.stars-new .star-filled {
  animation: star-pop 0.5s ease-out;
  display: inline-block;
}

@keyframes star-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); }
}

/* Полоса звания в итогах */
.result-rank-progress {
  margin-bottom: 24px;
}

.result-rank-progress .rank-bar-outer {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 14px;
  overflow: hidden;
  margin-bottom: 6px;
}

/* Убран фиолетовый градиент → бренд-цвет */
.result-rank-progress .rank-bar-inner {
  height: 100%;
  background: var(--brand);
  border-radius: 8px;
  transition: width 0.5s ease;
}

.result-rank-progress .rank-progress-text {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Кнопки итогов */
.result-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== СТРОКА ЗНАЧКОВ НА ИТОГАХ ===== */
.result-badges {
  text-align: center;
  font-size: 0.9rem;
  color: var(--brand-ink);
  font-weight: 600;
  margin-bottom: 10px;
  padding: 6px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* ===== ТОПБАР ВОПРОСА (кнопка выхода) ===== */
.question-topbar {
  display: flex;
  align-items: center;
  /* Уменьшено с 8px → 4px для уплотнения верха на экране вопроса */
  margin-bottom: 4px;
}

/* Кнопка «← В Академию» */
.btn-exit {
  background: transparent;
  border: none;
  color: var(--brand-ink);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 16px 10px 4px;
  min-height: 44px;
  border-radius: var(--r-sm);
  transition: background 0.15s;
  line-height: 1.3;
}

.btn-exit:hover,
.btn-exit:focus {
  background: var(--surface-soft);
}

/* Кнопка «Сразу в Академию →» на онбординге */
.btn-skip {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 6px;
  transition: color 0.15s;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-skip:hover,
.btn-skip:focus {
  color: var(--brand);
}

/* ===== ЗАЛ СЛАВЫ / ПРОФИЛЬ ===== */
.hall-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--brand-ink);
  margin-bottom: 12px;
}

.hall-rank {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  color: var(--brand-ink);
  margin-bottom: 16px;
}

.hall-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

/* Статы — bento-карточки */
.hall-stat {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Число в статах — тёплый цвет, объединяем два правила */
.hall-stat span:first-child {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--warm);
}

.hall-stat-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

.hall-shelf-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 12px;
  text-align: center;
}

/* Метка «только чтение» */
.hall-readonly-label {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Кнопка «Зал slavy» (btn-hall) в меню */
.btn-hall {
  display: block;
  width: 100%;
  margin-bottom: 0;
}

/* ===== МЕНЮ: ДВЕ КНОПКИ В РЯД ===== */
.menu-top-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.menu-top-buttons .btn {
  flex: 1;
  font-size: 0.9rem;
  padding: 13px 10px;
}

/* ===== ПРОФИЛЬ: ПОЛКА 17 ЗНАЧКОВ БЛОКОВ ===== */
.blocks-shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

/* Ячейка значка блока — bento */
.block-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sh-card);
  text-align: center;
  cursor: default;
  transition: border-color 0.15s;
}

/* Горящий значок — блок с 3 звёздами */
.block-badge-lit {
  border-color: var(--warm);
  background: var(--surface-soft);
}

/* Потухший значок */
.block-badge-dim {
  opacity: 0.55;
  filter: grayscale(50%);
}

.block-badge-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.block-badge-name {
  font-size: 0.72rem;
  color: var(--brand-ink);
  font-weight: 600;
  line-height: 1.3;
}

.block-badge-dim .block-badge-name {
  color: var(--muted);
}

.block-badge-stars {
  font-size: 0.75rem;
  letter-spacing: 1px;
}

/* Полка 5 значков: сетка 2 колонки */
.badges-shelf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Карточка значка — bento */
.badge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Полученный значок */
.badge-card.earned {
  border-color: var(--warm);
  background: var(--surface-soft);
}

/* Цель (ещё не получен) */
.badge-card.goal {
  opacity: 0.75;
}

/* Эмодзи значка */
.badge-emoji {
  font-size: 2rem;
  line-height: 1;
}

/* Эмодзи нераскрытого значка */
.badge-emoji-goal {
  filter: grayscale(80%);
  opacity: 0.6;
}

.badge-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.3;
}

.badge-card.goal .badge-name {
  color: var(--muted);
}

.badge-date {
  font-size: 0.75rem;
  color: var(--warm);
}

.badge-hint {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
}

/* ===== ТОСТ ДЛЯ ЗНАЧКОВ ===== */
.badge-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  background: var(--surface);
  border: 2px solid var(--warm);
  border-radius: var(--r-card);
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-ink);
  z-index: 9000;
  white-space: nowrap;
  box-shadow: var(--sh-pop);
  pointer-events: none;
}

.badge-toast-show {
  animation: toast-slide-in 3s ease forwards;
}

@keyframes toast-slide-in {
  0%   { transform: translateX(-50%) translateY(-80px); opacity: 0; }
  12%  { transform: translateX(-50%) translateY(0);     opacity: 1; }
  75%  { transform: translateX(-50%) translateY(0);     opacity: 1; }
  100% { transform: translateX(-50%) translateY(-80px); opacity: 0; }
}

/* ===== ЭКРАН РЕГИСТРАЦИИ (AUTH) ===== */
.auth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 40px;
  text-align: center;
}

/* Пузырь Эйса на auth-экране — без хвостика, шире */
.auth-bubble {
  margin-left: 0;
  max-width: 340px;
  font-size: 1.05rem;
  text-align: center;
}

.auth-bubble::before,
.auth-bubble::after {
  display: none;
}

/* Форма регистрации */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  text-align: left;
}

.auth-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 2px;
}

/* Крупные поля ввода */
.auth-input {
  display: block;
  width: 100%;
  padding: 16px 18px;
  font-size: 1.1rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s;
}

.auth-input:focus {
  border-color: var(--brand);
}

/* У инпутов своя рамка-индикатор — системное кольцо лишнее */
.auth-input:focus-visible {
  outline: none;
}

.auth-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: -4px;
}

/* Ошибка — оставляем красной (семантика ошибки ввода) */
.auth-error {
  font-size: 0.88rem;
  color: #e53e3e;
  font-weight: 600;
  padding: 8px 12px;
  background: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: 8px;
}

.auth-submit-btn {
  margin-top: 8px;
  font-size: 1.15rem;
  padding: 18px 28px;
}

/* ===== ТАБЫ ВЫБОРА РЕЖИМА НА ЭКРАНЕ AUTH ===== */
.auth-tabs {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  max-width: 360px;
}

/* Неактивный таб */
.auth-tab {
  flex: 1;
  padding: 10px 12px;
  min-height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand-ink);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: center;
}

.auth-tab:hover,
.auth-tab:focus {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

/* Активный таб — бренд-цвет (убран оранжевый градиент) */
.auth-tab-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.auth-tab-active:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ===== КНОПКА ЗВУКА ===== */
.btn-sound {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--r-btn);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 10px;
  min-height: 44px;
  min-width: 44px;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}

.btn-sound:hover,
.btn-sound:focus {
  border-color: var(--brand);
  background: var(--surface-soft);
}

.btn-sound:active {
  transform: scale(0.96);
}

/* ===== СТЕНА АКАДЕМИИ ===== */
.wall-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--brand-ink);
  margin-bottom: 20px;
}

.wall-section {
  margin-bottom: 28px;
}

.wall-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--border);
}

.wall-loading {
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  padding: 16px 0;
}

.wall-empty {
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  padding: 16px 0;
}

/* Таблица недельного рейтинга */
.leaderboard-wrap {
  overflow-x: auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.leaderboard-table thead th {
  text-align: left;
  font-weight: 700;
  color: var(--brand-ink);
  padding: 6px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.leaderboard-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* Топ-1 строка */
.leaderboard-table tr.lb-first td  { background: var(--surface-soft); font-weight: 700; }
.leaderboard-table tr.lb-second td { background: var(--surface); }
.leaderboard-table tr.lb-third td  { background: var(--surface); }

.lb-pos {
  font-size: 1.05rem;
  width: 38px;
  text-align: center;
}

.lb-name {
  flex: 1;
}

.lb-pts {
  font-weight: 700;
  color: var(--warm);
  text-align: right;
  white-space: nowrap;
}

/* Кликабельное имя в рейтинге и ленте */
.player-link {
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-color: var(--warm);
  cursor: pointer;
  font-weight: 600;
  text-underline-offset: 2px;
}

.player-link:hover {
  color: var(--brand);
}

/* Карточки событий ленты — bento */
.feed-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feed-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 12px 14px;
}

.feed-emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.feed-body {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}

.feed-date {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ===== ТАБ-БАР ===== */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8000;
  display: flex;
  justify-content: space-around;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(28,43,35,.06);
  padding: 6px 4px env(safe-area-inset-bottom);
}

.tabbar.hidden { display: none !important; }

.tabbar-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  min-height: 56px;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
}

.tabbar-ico { font-size: 1.4rem; line-height: 1; }

.tabbar-btn.active { color: var(--brand); }

/* ===== ЭКРАН «ЕЩЁ» ===== */
.more-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-ink);
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.6rem;
}

.more-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 16px;
  margin-bottom: 12px;
}

.more-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 12px;
  font-size: 1rem;
}

.more-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.more-row-label {
  font-weight: 700;
  color: var(--text);
}

.more-hint {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 8px;
}

.more-card .btn {
  margin-bottom: 8px;
  width: 100%;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 400px) {
  body {
    padding: 10px;
  }

  /* Декоративные крупные элементы — можно уменьшать */
  h1 {
    font-size: 1.35rem;
  }

  /* На маленьких экранах SVG-маскот немного меньше */
  .ace-big {
    width: 48px;
    height: 48px;
  }

  /* Читаемый текст — НЕ уменьшаем на телефоне */
  /* .question-text, .btn-option, .btn — сохраняются из базовых стилей */

  /* Профиль — 2 колонки для полки блоков на маленьких экранах */
  .blocks-shelf {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Зал славы — 1 колонка значков */
  .badges-shelf {
    grid-template-columns: 1fr;
  }

  .menu-top-buttons .btn {
    font-size: 0.8rem;
    padding: 11px 8px;
  }

  /* На 360px узлы карты уровней — компактнее */
  .level-node {
    min-height: 84px;
    padding: 10px 6px 8px;
    gap: 4px;
  }

  .level-node-icon {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }

  .level-node-name {
    font-size: 0.72rem;
  }
}