/* =====================================================================
   «Спидран Java» — пиксельный интерфейс.
   Организация файла:
     1. Токены, шрифты и сброс
     2. Мир на фоне (спуск от неба к Энду)
     3. Пиксельные примитивы (рамки, кнопки, поля)
     4. Шапка и навигация
     5. Экран входа/регистрации
     6. Карта: модули → проекты → уровни
     7. Аватары и подсказки
     8. Статистика
     9. Профиль и админка
    10. Тосты, анимации, адаптив, доступность
   ===================================================================== */

/* --------------------- 1. Токены, шрифты и сброс ----------------------- */
:root {
  --grass-dark:   #3f6b3a;
  --grass-deep:   #2b4a2a;
  --parchment:    #f7e9cd;
  --parchment-2:  #ecd6a9;
  --wood:         #8b5a34;
  --wood-dark:    #5c3a20;
  --ink:          #2b1d12;
  --ink-soft:     #5a4632;
  --gold:         #f2b632;
  --gold-dark:    #c07f14;
  --done:         #4f9e46;
  --done-dark:    #2f6b2c;
  --next:         #f4d59a;   /* следующий шаг — тёплый, «уже рядом» */
  --locked-bg:    #c9cec7;   /* закрытый — приглушённый серо-зелёный */
  --locked-dark:  #5d6472;
  --danger:       #d24b3a;   /* «Выйти», ошибки */
  --danger-dark:  #9a2f22;
  --sound:        #45b3a0;   /* кнопка звука */
  --sound-dark:   #2c7c6e;
  --white:        #fffaf0;

  --px: 4px;                       /* базовый «пиксель» интерфейса */
  /* Tiny5 — настоящий пиксельный шрифт с кириллицей, у которого «С» не
     сливается с «О» (в Pixelify Sans «СПИДРАН» читалось как «ОПИДРАН»).
     Nunito — для длинного текста и цифр. */
  --font-pixel: "Tiny5", "Courier New", monospace;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  /* Цифры пиксельного шрифта («2» легко спутать с «8») выносим в обычный
     шрифт: счётчики и номера уровней нужно читать однозначно. */
  --font-num: "Nunito", "Segoe UI", system-ui, sans-serif;

  --panel: var(--parchment);
  --panel-2: var(--parchment-2);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --bg: var(--grass-dark);
}

/* Ночная палитра: панели темнеют, мир на фоне остаётся тем же. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d2a35;
    --panel: #33404d;
    --panel-2: #29343f;
    --text: #f4ecdc;
    --text-soft: #c3cdd7;
    --parchment: #33404d;
    --parchment-2: #29343f;
    --ink: #0f161d;
    --next: #6b5a33;
    --locked-bg: #2a333d;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden должен побеждать display из классов (.topbar { display:flex }). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);       /* виден только до отрисовки мира */
}

img, svg { image-rendering: pixelated; }

h1, h2, h3, h4, .btn, .topbar__logo-text {
  font-family: var(--font-pixel);
  font-weight: 400;   /* Tiny5 существует только в одном начертании */
  line-height: 1.35;
  letter-spacing: .01em;
}
h1 { font-size: 34px; margin: 0 0 12px; }
h2 { font-size: 27px; margin: 24px 0 12px; }
h3 { font-size: 21px; margin: 18px 0 10px; }
h4 { font-size: 19px; margin: 0; }
/* Числа внутри пиксельных заголовков — обычным шрифтом, иначе «21» читается
   как «81». */
.num { font-family: var(--font-num); font-weight: 800; }

a { color: inherit; }

/* ----------------------- 2. Мир на фоне -------------------------------- */
/*
  Спуск как в Minecraft: небо → трава → земля → камень → глубинный сланец →
  слой алмазов и изумрудов → Энд. Высота слоя задаётся долей от полной
  высоты страницы, поэтому чем ниже прокрутка, тем «глубже» фон.
  Декорации (облака, деревья, руда, звёзды) расставляет static/js/world.js.
*/
#world {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: #7ec0f0;
  /* Слои (небо → трава → земля → камень → сланец → алмазы → Энд) задаются
     в пикселях из static/js/world.js: линия земли должна совпадать с низом
     стартовой поляны. */
}

/* Каждый «блок» мира — квадрат с пиксельной крошкой внутри. */
.w {
  position: absolute;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* Тонкая сетка блоков поверх всего мира — узнаваемая «кубическая» фактура. */
#world::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 32px);
}

/* --------------------- 3. Пиксельные примитивы ------------------------- */
.pixel {
  position: relative;
  background: var(--panel);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--ink),
    0 var(--px) 0 0 var(--ink),
    calc(-1 * var(--px)) 0 0 0 var(--ink),
    var(--px) 0 0 0 var(--ink),
    var(--px) var(--px) 0 0 rgba(0, 0, 0, .35);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 19px;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
    0 8px 0 0 var(--gold-dark);
  transition: transform .08s steps(2), box-shadow .08s steps(2), filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active {
  transform: translateY(4px);
  box-shadow:
    0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
    0 4px 0 0 var(--gold-dark);
}
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.5); }
.btn--sm { padding: 7px 12px; font-size: 17px; }
.btn--wide { width: 100%; }
.btn--ghost {
  background: var(--panel-2); color: var(--text);
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink),
              -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 8px 0 0 rgba(0,0,0,.35);
}
.btn--danger {
  background: var(--danger); color: var(--white);
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink),
              -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 8px 0 0 var(--danger-dark);
}

.iconbtn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-size: 20px; color: var(--white);
  background: var(--sound);
  border: 0; cursor: pointer;
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink),
              -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 6px 0 0 var(--sound-dark);
}
.iconbtn[aria-pressed="false"] { background: var(--locked-dark); box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 6px 0 0 #363c47; }

.field input {
  width: 100%;
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text);
  background: var(--white);
  border: 0;
  box-shadow: inset 0 0 0 4px var(--ink);
}
@media (prefers-color-scheme: dark) { .field input { background: #1f2933; } }
.field input:focus-visible, .btn:focus-visible,
.iconbtn:focus-visible, a:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}
.field input.is-code { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; margin-bottom: 6px; font-size: 15px; color: var(--text-soft); }
.field__error { display: block; margin-top: 6px; font-size: 14px; color: var(--danger); }
.field__hint { display: block; margin-top: 6px; font-size: 14px; color: var(--text-soft); }

.panel { padding: 22px; }
.muted { color: var(--text-soft); }
.center { text-align: center; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* ------------------------ 4. Шапка и навигация ------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  padding: 10px 18px 14px;
  background: var(--wood);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 12px);
  box-shadow: 0 4px 0 0 var(--wood-dark), 0 8px 0 0 rgba(0,0,0,.3);
}
.topbar__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); }
.topbar__logo-mark { font-size: 24px; color: var(--gold); }
.topbar__logo-text { font-size: 26px; letter-spacing: .04em; text-shadow: 3px 3px 0 var(--wood-dark); white-space: nowrap; }

.topbar__nav { display: flex; gap: 6px; margin-inline: auto; }
.topbar__nav a {
  padding: 8px 14px;
  font-family: var(--font-pixel); font-size: 19px;
  color: var(--white); text-decoration: none;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25);
}
.topbar__nav a:hover { background: rgba(0,0,0,.3); }
.topbar__nav a.is-active { color: var(--ink); background: var(--gold); box-shadow: inset 0 -4px 0 var(--gold-dark); }

.topbar__side { display: flex; align-items: center; gap: 10px; }
.topbar__me { display: flex; align-items: center; gap: 8px; color: var(--white); font-size: 16px; }

.topbar__progress {
  position: relative; flex: 1 0 100%;
  height: 22px;
  background: var(--wood-dark);
  box-shadow: inset 0 0 0 4px var(--ink);
}
.topbar__progress-fill {
  height: 100%; width: 0;
  background: var(--done);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 4px, transparent 4px 12px);
  transition: width .5s steps(12);
}
.topbar__progress-label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-num); font-weight: 800; font-size: 15px; color: var(--white);
  text-shadow: 2px 2px 0 var(--ink);
}

.app { max-width: 1100px; margin: 0 auto; padding: 56px 20px 110px; }

/* --------------------- 5. Вход и регистрация --------------------------- */
.gate { max-width: 470px; margin: 5vh auto; }
.gate__title { margin: 0 0 6px; text-align: center; letter-spacing: .04em; }
.gate__sub { margin: 0 0 22px; text-align: center; color: var(--text-soft); }
.gate__tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.gate__tabs button {
  flex: 1; padding: 11px; cursor: pointer;
  font-family: var(--font-pixel); font-size: 19px;
  color: var(--text); background: var(--panel-2); border: 0;
  box-shadow: inset 0 0 0 4px var(--ink);
}
.gate__tabs button.is-active { color: var(--ink); background: var(--gold); }
.gate__hero { display: grid; place-items: center; margin-bottom: 16px; }
.gate__hero img { width: 96px; height: 96px; }

/* ------------------------ 6. Карта обучения ---------------------------- */

/* Стартовая поляна: участники начальной подготовки стоят прямо на траве
   фона (world.js выравнивает линию земли по низу их аватарок), поэтому
   у блока нет ни рамки, ни собственного фона. */
.meadow { margin-bottom: 30px; }
.meadow__head { padding: 0 4px 6px; }
/* Заголовок лежит на светлом небе, поэтому он тёмный со светлой обводкой. */
.meadow__title { margin: 0; font-size: 22px; color: #1d3a14; text-shadow: 2px 2px 0 rgba(255,255,255,.55); }
.meadow__sub { margin: 2px 0 0; font-size: 15px; color: #23431a; text-shadow: 1px 1px 0 rgba(255,255,255,.5); }
.meadow__field {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: 10px 20px;
  padding: 6px 4px 26px;
}
.meadow__hero {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  animation: hop 2.4s steps(3) infinite;
  animation-delay: calc(var(--i, 0) * .25s);
}
.meadow__hero .avatar { background: transparent; box-shadow: none; }
.meadow__hero.is-me .avatar {
  background: rgba(255, 255, 255, .35);
  box-shadow: 0 0 0 3px var(--gold-dark), 0 0 0 6px var(--gold);
}
.meadow__name {
  padding: 1px 6px;
  font-size: 13px; color: var(--white);
  background: rgba(0, 0, 0, .45);
  max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.module { margin-bottom: 64px; }   /* просвет, в котором виден мир на фоне */

/* Табличка модуля — блок той породы, на глубине которой идёт модуль:
   дёрн → камень → обсидиан. Так по вывеске видно, насколько глубоко зашёл
   человек, даже без взгляда на фон. */
.module__sign {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px;
  color: var(--white);
  background-color: var(--wood);
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink),
              -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 6px 6px 0 0 rgba(0,0,0,.3);
}
.module__title { margin: 0; font-size: 24px; text-shadow: 3px 3px 0 rgba(0, 0, 0, .55); }
/* Подзаголовок — тем же пиксельным шрифтом, только мельче и спокойнее. */
.module__sub {
  font-family: var(--font-pixel); font-size: 19px;
  opacity: .85; text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}
.module__counter { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 5px 10px;
  font-family: var(--font-num); font-weight: 800; font-size: 15px;
  background: rgba(0, 0, 0, .42);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .5);
}
.chip--done { background: var(--done-dark); }

/* Модуль 1 — деревянная доска-указатель, как вывеска в майнкрафте:
   светлые доски с прожилками и толстая тёмная рама. Она крупнее остальных:
   это вход в программу. */
.module__sign--1 {
  padding: 22px 22px 24px;
  /* Тёмный дуб: на светлых досках белый текст читался плохо. */
  background-color: #5c4026;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.32) 0 3px, transparent 3px 26px),        /* стыки досок */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 2px, transparent 2px 9px),   /* волокна */
    linear-gradient(to bottom, #66492c 0%, #4a3520 100%);
  box-shadow:
    inset 0 0 0 5px #33220f,
    0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 8px 8px 0 0 rgba(0,0,0,.35);
}
.module__sign--1 .module__title { font-size: 28px; }

/* Модуль 2 — булыжник. */
.module__sign--2 {
  background-color: #6a7076;
  background-image:
    /* Кладка: крупные блоки со швами и разной светимостью. */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.07) 0 30px, rgba(0,0,0,.18) 30px 34px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.05) 0 22px, rgba(0,0,0,.22) 22px 26px),
    radial-gradient(circle at 22% 62%, rgba(0,0,0,.22) 0 9px, transparent 10px),
    radial-gradient(circle at 63% 28%, rgba(255,255,255,.10) 0 8px, transparent 9px),
    linear-gradient(to bottom, #767c82 0%, #5c6268 100%);
}

/* Модуль 3 — портал в Энд: тёмное звёздное «зеркало» в раме из блоков
   с глазами. Самая глубина, дальше уже некуда. */
.module__sign--3 {
  position: relative;
  padding: 22px 18px;
  background-color: #0d0a16;
  background-image:
    radial-gradient(circle at 14% 32%, rgba(160,240,220,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 33% 68%, rgba(206,168,247,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 24%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 58%, rgba(160,240,220,.6) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 30%, rgba(206,168,247,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 47% 80%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    linear-gradient(to bottom, #17102a 0%, #0b0714 55%, #140d24 100%);
}
/* Рама портала: блоки песчаного цвета с бирюзовым «глазом». */
.module__sign--3::before,
.module__sign--3::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 12px;
  background-image:
    /* Глаза эндера в блоках рамы. */
    repeating-linear-gradient(90deg,
      #5ae6cd 0 10px, transparent 10px 40px),
    repeating-linear-gradient(90deg,
      #d8d0a2 0 34px, #a89f74 34px 40px);
  background-position: 15px 0, 0 0;
}
.module__sign--3::before { top: 0; }
.module__sign--3::after { bottom: 0; }

.group { margin-top: 20px; padding-left: 4px; }
.group__title {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
  padding: 7px 14px;
  font-size: 18px; color: var(--text);
  background: var(--parchment-2);
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink);
}

.levels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  padding: 12px 0;
}
.levels::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 4px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 8px, transparent 8px 16px);
  pointer-events: none;
}

.level {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  min-height: 172px;
  text-align: left;
  background: var(--panel);
  border: 0;
  font: inherit; color: var(--text);
  box-shadow:
    0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
    6px 6px 0 0 rgba(0,0,0,.28);
}

/* Четыре состояния: пройден / текущий / следующий / закрыт */
.level--done {
  background: #cfe8bd;
  box-shadow: 0 -4px 0 0 var(--done-dark), 0 4px 0 0 var(--done-dark),
              -4px 0 0 0 var(--done-dark), 4px 0 0 0 var(--done-dark),
              6px 6px 0 0 rgba(0,0,0,.28);
}
.level--current {
  background: #ffe9a8;
  box-shadow: 0 -4px 0 0 var(--gold-dark), 0 4px 0 0 var(--gold-dark),
              -4px 0 0 0 var(--gold-dark), 4px 0 0 0 var(--gold-dark),
              0 0 0 8px rgba(242, 182, 50, .35), 6px 6px 0 0 rgba(0,0,0,.28);
  animation: bob 1.6s steps(4) infinite;
}
.level--next { background: var(--next); }
.level--locked { background: var(--locked-bg); color: var(--text-soft); filter: saturate(.5); }
.level--locked .level__title { opacity: .8; }

@media (prefers-color-scheme: dark) {
  .level--done { background: #2f5d3a; color: #eaf6e2; }
  .level--current { background: #6b5a24; color: #fff4d0; }
  .level--next { color: #f4ead6; }
}

.level__top { display: flex; align-items: center; gap: 8px; }
.level__num {
  display: grid; place-items: center;
  min-width: 32px; height: 30px; padding: 0 7px;
  font-family: var(--font-num); font-weight: 800; font-size: 17px;
  color: var(--white); background: var(--ink);
}
.level--done .level__num { background: var(--done-dark); }
.level--current .level__num { background: var(--gold-dark); }
.level__badge {
  margin-left: auto;
  padding: 3px 8px;
  font-family: var(--font-pixel); font-size: 16px;
  background: rgba(0,0,0,.12);
}
.level__badge--review { background: var(--danger); color: var(--white); }
.level__badge--theory { background: #4a6fb0; color: var(--white); }
.level__badge--check { background: #2f6b9e; color: var(--white); }
.level__badge--market { background: #7a4fb0; color: var(--white); }
.level__badge--month { background: #2f8a7a; color: var(--white); }
.level__badge--prep { background: var(--gold-dark); color: var(--white); }

.level__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px; font-weight: 800; line-height: 1.25;
  /* break-word рвёт слово только если оно не влезает целиком. */
  overflow-wrap: break-word;
}
.level__meta { font-size: 14px; color: var(--text-soft); margin: 0; }
.level__status { margin: auto 0 0; font-family: var(--font-pixel); font-size: 16px; }
.level__action { margin-top: 6px; }
.level__wait { margin: 0; font-size: 13px; color: var(--danger); }

/* --------------------- 7. Аватары и подсказки -------------------------- */
.avatars { display: flex; flex-wrap: wrap; gap: 4px; min-height: 34px; align-items: center; }
.avatar {
  width: 32px; height: 32px;
  /* Подложка намеренно не белая: у некоторых героев светлые волосы и шапки,
     на чисто белом фоне они бы пропадали. */
  background: #dfe7ef;
  box-shadow: 0 0 0 3px var(--ink);
  cursor: pointer;
  transition: transform .1s steps(2);
}
.avatar:hover { transform: translateY(-4px) scale(1.08); z-index: 2; }
.avatar--me {
  box-shadow: 0 0 0 3px var(--gold-dark), 0 0 0 6px var(--gold);
  animation: hop 1.2s steps(3) infinite;
}
.avatar--sm { width: 26px; height: 26px; }
.avatar--lg { width: 72px; height: 72px; }
.avatars__more {
  padding: 0 6px; height: 32px;
  display: grid; place-items: center;
  font-family: var(--font-num); font-weight: 800; font-size: 14px;
  background: rgba(0,0,0,.12);
}

.tip {
  position: fixed; z-index: 60;
  padding: 5px 10px;
  font-size: 14px; color: var(--white);
  background: var(--ink);
  pointer-events: none;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
}

/* ---------------------------- 8. Статистика ---------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card { padding: 16px; }
.card__label { font-size: 14px; color: var(--text-soft); }
.card__value { font-family: var(--font-num); font-weight: 800; font-size: 26px; margin-top: 4px; }
.card__hint { margin-top: 4px; font-size: 14px; }

.verdict { display: inline-block; padding: 3px 8px; font-family: var(--font-pixel); font-size: 16px; color: var(--white); }
.verdict--fast { background: #2f8a7a; }
.verdict--ok { background: var(--done-dark); }
.verdict--slow { background: var(--danger-dark); }
.verdict--none { background: var(--locked-dark); }

.bars { display: flex; flex-direction: column; gap: 9px; }
.bar__row { display: grid; grid-template-columns: minmax(120px, 1.4fr) 3fr auto; gap: 12px; align-items: center; }
.bar__track { position: relative; height: 22px; background: var(--panel-2); box-shadow: inset 0 0 0 3px var(--ink); }
.bar__fill { height: 100%; background: var(--done); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 4px, transparent 4px 12px); }
.bar__fill--slow { background-color: var(--danger); }
.bar__fill--fast { background-color: #2f8a7a; }
.bar__norm { position: absolute; top: -4px; bottom: -4px; width: 4px; background: var(--ink); }
.bar__label { font-size: 15px; }
.bar__value { font-family: var(--font-num); font-weight: 800; font-size: 15px; white-space: nowrap; }

.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th, .table td { padding: 9px 10px; text-align: left; border-bottom: 4px solid rgba(0,0,0,.12); }
.table th { font-family: var(--font-pixel); font-size: 18px; }
.table tr.is-me { background: rgba(242, 182, 50, .28); }
.table code { font-family: var(--font-num); font-weight: 800; font-size: 16px; letter-spacing: .08em; }
.scroll-x { overflow-x: auto; }

/* ------------------------ 9. Профиль и админка ------------------------- */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}
.avatar-grid button {
  padding: 6px; background: var(--white); border: 0; cursor: pointer;
  box-shadow: 0 0 0 4px var(--ink);
}
.avatar-grid button.is-active { box-shadow: 0 0 0 4px var(--gold-dark), 0 0 0 8px var(--gold); }
.avatar-grid img { width: 100%; height: auto; display: block; }

.profile-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 720px) { .profile-grid { grid-template-columns: 1fr; } }

.code-badge {
  display: inline-block; padding: 8px 14px; margin: 8px 0;
  font-family: var(--font-num); font-weight: 800; font-size: 22px; letter-spacing: .1em;
  color: var(--ink); background: var(--gold);
  box-shadow: 0 0 0 4px var(--ink);
}
.state { font-family: var(--font-pixel); font-size: 17px; }
.state--ok { color: var(--done-dark); }
.state--off { color: var(--danger); }

/* ---------------------------- 9b. Оплата ------------------------------- */
/* Плашка о долге висит в шапке, пока долг не закрыт. */
.topbar__debt {
  padding: 6px 10px;
  font-family: var(--font-num); font-weight: 800; font-size: 14px;
  color: var(--white); background: var(--danger);
  box-shadow: inset 0 0 0 3px var(--ink);
  white-space: nowrap;
}
.topbar__debt--wait { background: var(--gold-dark); }
.topbar__debt--guest { background: var(--locked-dark); }
.is-debt { color: var(--danger); }

/* Всё оплачено: панель горит зелёным и ничего не просит. */
.panel--paid {
  background: #cfe8bd;
  color: #1f3b18;
  box-shadow: 0 -4px 0 0 var(--done-dark), 0 4px 0 0 var(--done-dark),
              -4px 0 0 0 var(--done-dark), 4px 0 0 0 var(--done-dark),
              6px 6px 0 0 rgba(0, 0, 0, .28);
}
.panel--paid .muted { color: #35602a; }
.paid__amount {
  margin: 0 0 6px;
  font-family: var(--font-num); font-weight: 800; font-size: 32px;
  color: var(--done-dark);
}
@media (prefers-color-scheme: dark) {
  .panel--paid { background: #2f5d3a; color: #eaf6e2; }
  .panel--paid .muted { color: #bfe0b4; }
  .paid__amount { color: #b6e8a4; }
}

/* Редактор графика платежей в админке. */
.plan__box { padding: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 3px var(--ink); }
.plan { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.plan__total { font-family: var(--font-num); font-weight: 800; }
.plan__row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.plan__num { min-width: 34px; font-family: var(--font-num); font-weight: 800; }
.plan__row input[type="number"] { width: 130px; }
.plan__row input[type="date"] { width: 165px; }
.plan__box select, .plan__row select, .plan__row input {
  padding: 8px; font-family: var(--font-body); font-size: 16px;
  color: var(--text); background: var(--white); border: 0;
  box-shadow: inset 0 0 0 3px var(--ink);
}
@media (prefers-color-scheme: dark) {
  .plan__box select, .plan__row select, .plan__row input { background: #1f2933; }
}

.gate__sep { margin: 20px 0 0; border: 0; border-top: 4px dashed rgba(0, 0, 0, .2); }

.note {
  margin: 12px 0 0; padding: 10px 12px;
  font-size: 15px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.note--wait { border-left: 6px solid var(--gold); }

/* Окно-напоминание об оплате: по центру, поверх всего. */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(12, 10, 8, .72);
  animation: pop .15s steps(3);
}
.modal__box {
  width: min(560px, 100%);
  max-height: 90vh; overflow-y: auto;
  padding: 22px;
}
.modal__title { margin: 0 0 6px; }
.modal__box--wide { width: min(760px, 100%); }
.modal__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

/* Имя участника в таблице — кнопка, открывающая его прохождение. */
.linkish {
  display: flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.linkish:hover span { text-decoration: underline; }
/* Тот же ряд «аватар + имя», но не кнопка: так участник выглядит у гостя. */
.person { display: flex; align-items: center; gap: 8px; }
/* Ник в телеграме — единственный способ связи, поэтому он ссылка. */
.tg-link { color: var(--sound-dark); font-weight: 700; text-decoration: none; }
.tg-link:hover { text-decoration: underline; }
.modal__amount {
  margin: 0 0 10px;
  font-family: var(--font-num); font-weight: 800; font-size: 34px;
  color: var(--danger);
}
.modal__actions { margin-top: 16px; }

/* ------------------ 10. Тосты, анимации, адаптив ----------------------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; flex-direction: column; gap: 10px; }
.toast {
  padding: 11px 16px; max-width: 320px;
  color: var(--white); background: var(--grass-deep);
  box-shadow: 0 0 0 4px var(--ink), 6px 6px 0 rgba(0,0,0,.3);
  animation: pop .18s steps(3);
}
.toast--error { background: var(--danger-dark); }
.toast--gold { background: var(--gold-dark); }

.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 90; }
.boot__inner { text-align: center; color: var(--white); font-family: var(--font-pixel); font-size: 20px; }
.boot__pixel { display: block; width: 24px; height: 24px; margin: 0 auto 16px; background: var(--gold); animation: hop .7s steps(3) infinite; }

@keyframes bob  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hop  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pop  { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(40px); } }
@keyframes twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Блоки на стыке слоёв: сплошной цвет, без картинки. */
.w--block { background-image: none; }
.w--cloud { animation: drift 24s steps(10) infinite alternate; }
.w--star { animation: twinkle 3s steps(2) infinite; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  h1 { font-size: 27px; } h2 { font-size: 22px; } h3 { font-size: 19px; }
  .topbar { gap: 10px; padding: 8px 12px 12px; }
  .topbar__nav { order: 3; flex: 1 0 100%; margin: 0; justify-content: space-between; }
  .topbar__nav a { flex: 1; text-align: center; padding: 9px 6px; font-size: 17px; }
  .topbar__logo-text { font-size: 21px; }
  .app { padding: 16px 12px 60px; }
  .levels { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .level { min-height: 152px; padding: 12px; }
  .level__title { font-size: 16px; }
  .bar__row { grid-template-columns: 1fr; gap: 4px; }
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}