/* ============================================================
   МАЛАЯ ПАНЕЛЬ — стили интерфейса «Путешествие по Югре»
   Всё в реальных пикселях (экран 1080×1920, портрет).
   Отдельная от большой панели вёрстка: своя структура и оформление.
   ============================================================ */

/* Golos Text — вшитый локально шрифт (вариативный, веса 400–800). Без CDN/интернета. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/golos-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/golos-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/golos-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/golos-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
  /* Тёмная «цифровая» тема: карта лежит в тёмном светящемся поле */
  --bg-deep: #030d0a;             /* базовый почти-чёрный с зеленью */
  --glow: rgba(40, 224, 152, 0.22); /* зелёное свечение под картой */
  --grid: rgba(58, 226, 178, 0.06); /* линии сетки-грида */
  --ink: #eafff6;                 /* светлый текст на тёмном */
  --ink-soft: rgba(196, 226, 212, 0.68);
  --ink-dim: rgba(196, 226, 212, 0.42);
  --font: 'Golos Text', system-ui, "Segoe UI", sans-serif;
}

/* ---------- Экран ---------- */

.screen {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font);
  user-select: none;
  cursor: default;
}

/* ---------- Подложка: тёмная сетка + свечение ---------- */
/* Лежит под всеми экранами (z-index 0). Сквозь прозрачные части
   карты видно тёмное поле с сеткой; под картой — зелёное свечение. */

.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* сетка-грид */
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 64px),
    /* база + виньетка к краям */
    radial-gradient(ellipse 125% 100% at 50% 50%, #06201a 0%, #041310 62%, #020a08 100%);
}

/* мягкое зелёное свечение по центру — «карта светится в темноте» */
.backdrop__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 52% at 50% 46%, var(--glow), transparent 62%),
    radial-gradient(ellipse 60% 26% at 50% 78%, rgba(34, 200, 224, 0.14), transparent 70%);
}

/* ---------- Экраны и переходы ---------- */

.app {
  position: absolute;
  inset: 0;
}

.scr {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.scr--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* окна поверх карты со своим тёмным фоном */
.scr--sub {
  background:
    radial-gradient(ellipse 90% 60% at 50% 40%, #0a281e, transparent 70%),
    var(--bg-deep);
}

/* Экран билета: мягкий светлый радиальный градиент в верхней части фона —
   под билетом, немного выходит за его границы (билет ≈ 87% ширины, центр 50%/22%).
   Лежит на самом фоне (не на билете), верхним слоем поверх общего фона подэкранов. */
.scr[data-screen="ticket"] {
  background:
    radial-gradient(ellipse 82% 34% at 50% 24%, rgba(90, 245, 185, 0.30), transparent 75%),
    radial-gradient(ellipse 90% 60% at 50% 40%, #0a281e, transparent 70%),
    var(--bg-deep);
}

/* Экран «билет готов»: тот же светлый градиент, но опущен ниже — заполняет
   пустое пространство под билетом (где лежит QR-код). */
.scr[data-screen="ticketdone"] {
  background:
    radial-gradient(ellipse 82% 34% at 50% 54%, rgba(90, 245, 185, 0.30), transparent 75%),
    radial-gradient(ellipse 90% 60% at 50% 40%, #0a281e, transparent 70%),
    var(--bg-deep);
}

/* ---------- Карта Югры ---------- */
/* Изображение заполняет высоту экрана (height:100%), по ширине шире
   экрана и выходит за края. Двигается по горизонтали перетаскиванием
   (палец/мышь) — логика в panel.js, смещение через translateX. */

.map {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;   /* жест обрабатываем сами, без нативного скролла */
}

.map.is-dragging {
  cursor: grabbing;
}

/* общий слой: картинка + точки. Смещается целиком (translateX) */
.map__world {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translateX(0px);
  will-change: transform;
}

.map__img {
  display: block;
  height: 100%;
  width: auto;                     /* ширина по пропорции = шире экрана */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;            /* жест ловит .map, не картинка */
}

/* ---------- Точки знаковых мест ---------- */
/* Позиции задаются inline (left/top) в координатах карты 3412×1920.
   Пока декоративные (pointer-events:none) — не мешают тянуть карту;
   интерактив (полёт самолёта к точке) добавим позже. */

.poi {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);   /* left/top указывают на центр кружка */
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid rgba(126, 255, 206, 0.92);
  background: radial-gradient(circle at 50% 38%, rgba(9, 38, 28, 0.82), rgba(4, 18, 14, 0.9));
  color: #f0fff8;
  font-family: var(--font);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 22px rgba(40, 224, 152, 0.7),
              0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  /* «дыхание» свечения — подсказка, что кружок интерактивный */
  animation: poi-breathe 2.6s ease-in-out infinite;
}

/* расходящееся кольцо-«пинг» вокруг кружка */
.poi::before {
  content: "";
  position: absolute;
  inset: -3px;                     /* совпадает с внешней кромкой обводки */
  border-radius: 50%;
  border: 3px solid rgba(126, 255, 206, 0.85);
  animation: poi-ping 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes poi-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(40, 224, 152, 0.55), 0 4px 12px rgba(0, 0, 0, 0.5); }
  50%      { box-shadow: 0 0 40px rgba(40, 224, 152, 0.95), 0 4px 12px rgba(0, 0, 0, 0.5); }
}

@keyframes poi-ping {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.95); opacity: 0; }
  100% { transform: scale(1.95); opacity: 0; }
}

/* лёгкая рассинхронизация, чтобы кружки не пульсировали в унисон */
.poi:nth-of-type(4n+1) { animation-delay: 0s; }
.poi:nth-of-type(4n+2) { animation-delay: 0.65s; }
.poi:nth-of-type(4n+3) { animation-delay: 1.3s; }
.poi:nth-of-type(4n)   { animation-delay: 1.95s; }
.poi:nth-of-type(4n+1)::before { animation-delay: 0s; }
.poi:nth-of-type(4n+2)::before { animation-delay: 0.65s; }
.poi:nth-of-type(4n+3)::before { animation-delay: 1.3s; }
.poi:nth-of-type(4n)::before   { animation-delay: 1.95s; }

/* активная точка (выбрана) — ярче и без пульсации */
.poi--active {
  border-color: #ffffff;
  box-shadow: 0 0 36px rgba(126, 255, 206, 1), 0 4px 12px rgba(0, 0, 0, 0.55);
  animation: none;
}
.poi--active::before { display: none; }

/* ---------- Пунктирный маршрут между точками ---------- */

.route {
  position: absolute;
  left: 0;
  top: 0;
  width: 3412px;
  height: 1920px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.route__line {
  fill: none;
  stroke: rgba(126, 255, 206, 0.5);
  stroke-width: 4;
  stroke-dasharray: 10 20;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(40, 224, 152, 0.5));
  animation: route-flow 2.4s linear infinite;
}

@keyframes route-flow {
  to { stroke-dashoffset: -30; }
}

/* ---------- Самолёт ---------- */

.plane {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  object-fit: contain;            /* МС-21 портретный — вписываем без искажения */
  z-index: 3;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

/* ---------- Карточка места ---------- */

.place-card {
  position: absolute;
  z-index: 20;                    /* поверх карты, облаков, заголовка и кнопок */
  width: 640px;
  display: flex;
  flex-direction: column;
  /* max-height задаётся из JS (positionCard): доступная высота от точки до края
     экрана, чтобы хвостик оставался у точки, а длинный текст прокручивался */
  background: rgba(6, 20, 15, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(126, 255, 206, 0.35);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  color: var(--ink);
  animation: card-in 0.22s ease;
}

.place-card[hidden] { display: none; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.place-card__photo {
  position: relative;
  flex: 0 0 auto;                 /* фото не сжимается */
  height: 300px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(135deg, #123528, #0a2018);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200, 230, 215, 0.4);
  font-size: 34px;
  letter-spacing: 3px;
  text-transform: uppercase;
  overflow: hidden;
}

/* реальное фото места: заполняет плитку, кадрируется по центру */
.place-card__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* подпись-плейсхолдер «ФОТО» — только когда фото нет */
.place-card__photo-label { display: none; }
.place-card__photo--empty .place-card__photo-label { display: block; }
.place-card__photo--empty .place-card__photo-img { display: none; }
/* лёгкое затемнение снизу — для читаемости стрелок/точек поверх фото */
.place-card__photo:not(.place-card__photo--empty)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  z-index: 1;
  pointer-events: none;
}

/* стрелки листания фото */
.place-card__arrow {
  position: absolute;
  bottom: 12px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 34px;
  line-height: 0.7;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease, transform 0.12s ease;
}
.place-card__arrow--prev { left: 18px; }
.place-card__arrow--next { right: 18px; }
.place-card__arrow:active {
  transform: scale(0.9);
  background: rgba(0, 0, 0, 0.6);
}

/* точки-индикаторы количества фото */
.place-card__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 33px;                     /* по центру со стрелками */
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
  pointer-events: none;            /* контейнер не перехватывает клики со стрелок */
}
.place-card__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  pointer-events: auto;            /* но сами точки кликаются */
  transition: background 0.15s ease, transform 0.15s ease;
}
.place-card__dot.is-on {
  background: #eafff6;
  transform: scale(1.5);
}

.place-card__body {
  flex: 1 1 auto;                 /* тело занимает остаток высоты карточки */
  min-height: 0;                  /* чтобы вложенный текст мог сжиматься/прокручиваться */
  display: flex;
  flex-direction: column;
  padding: 30px 34px 38px;
}

.place-card__title {
  margin: 0;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.12;
}

.place-card__sub {
  margin: 8px 0 0;
  font-size: 30px;
  color: rgba(126, 255, 206, 0.85);
}

.place-card__text {
  margin: 18px 0 0;
  font-size: 27px;
  line-height: 1.5;
  color: var(--ink-soft);
  flex: 1 1 auto;                 /* заполняет остаток тела; при нехватке места — прокрутка */
  min-height: 0;
  overflow-y: auto;
  padding-right: 14px;
  touch-action: pan-y;                 /* прокрутка пальцем на киоске */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* тонкий скроллбар в тон теме */
.place-card__text::-webkit-scrollbar { width: 8px; }
.place-card__text::-webkit-scrollbar-thumb {
  background: rgba(126, 255, 206, 0.4);
  border-radius: 4px;
}
.place-card__text::-webkit-scrollbar-track { background: transparent; }

.place-card__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 3;                       /* поверх области фото */
}
.place-card__close:active { transform: scale(0.94); }

/* хвостик-указатель к точке (X задаётся в panel.js через --tail-x) */
.place-card__tail {
  position: absolute;
  left: var(--tail-x, 50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
}
.place-card--below .place-card__tail {
  top: -22px;
  border-bottom: 22px solid rgba(6, 20, 15, 0.94);
}
.place-card--above .place-card__tail {
  bottom: -22px;
  border-top: 22px solid rgba(6, 20, 15, 0.94);
}

/* ---------- Заголовок карты (верхняя тёмная зона, по правому краю) ---------- */

.maphead {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;                      /* над облаками, чтобы текст читался */
  padding: 60px 52px 46px 60px;
  max-width: 780px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;          /* заголовок, текст и кнопка — стопкой справа */
  pointer-events: none;           /* не мешает тянуть карту под ним */
  /* мягкая тёмная подложка от правого-верхнего угла: текст читается,
     даже когда за ним проплывает белое облако */
  background: radial-gradient(135% 155% at 100% 0%,
    rgba(3, 12, 9, 0.72) 0%, rgba(3, 12, 9, 0.34) 42%, transparent 70%);
}

.maphead__title {
  margin: 0;
  font-size: 54px;                /* меньше: длинные названия маршрутов не лезут на кнопку */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0.3px;
  color: #f0fff8;
  text-shadow: 0 0 32px rgba(40, 224, 152, 0.55), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.maphead__text {
  margin: 22px 0 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(210, 236, 224, 0.82);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* ---------- Пушистые облака ---------- */
/* Отдельный слой над картой. Облака плывут независимо от карты
   (карту двигаешь пальцем — облака плывут сами). Создаются в panel.js. */

.clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.cloud {
  position: absolute;
  left: 0;
  height: auto;                    /* ширина задаётся inline, высота по пропорции */
  will-change: transform;
  animation-name: cloud-drift;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes cloud-drift {
  from { transform: translateX(var(--from)); }
  to   { transform: translateX(var(--to)); }
}

/* ---------- Нижние кнопки на карте ---------- */

.mapbar {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 48px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 180px;                      /* широкий центральный «коридор» — чтобы дотянуться до нижних точек */
  pointer-events: none;            /* контейнер не ловит тапы — только сами кнопки */
}

.mapbtn {
  flex: 0 1 400px;                 /* компактнее по ширине */
  min-width: 0;
  height: 176px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;     /* контент по левому краю */
  gap: 22px;
  padding: 0 30px;
  position: relative;
  overflow: hidden;
  pointer-events: auto;            /* кнопки кликаются, а «коридор» между ними — нет */
  border: 1px solid rgba(126, 255, 206, 0.5);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(28, 72, 55, 0.94) 0%, rgba(13, 38, 29, 0.95) 55%, rgba(8, 24, 18, 0.96) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55),
              0 0 44px rgba(40, 224, 152, 0.22),
              inset 0 2px 0 rgba(180, 255, 224, 0.16),
              inset 0 -22px 44px rgba(0, 0, 0, 0.28);
  color: var(--ink);
  font-family: var(--font);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* свечение-источник сверху — кнопка «подсвечена» и заметна */
.mapbtn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -66px;
  width: 82%;
  height: 128px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(126, 255, 206, 0.38), transparent 70%);
  pointer-events: none;
  will-change: opacity;
  animation: mapbtn-glow 3.2s ease-in-out infinite;   /* пульсация свечения */
}
/* диагональный блик — пробегает по кнопке (снизу-слева вверх-направо) */
.mapbtn::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(190, 255, 230, 0.30), transparent);
  filter: blur(9px);                 /* мягкий, размытый блик */
  transform: translateX(-190px) skewX(-18deg);
  animation: mapbtn-shine 8.5s ease-in-out infinite;   /* реже пробегает */
}
.mapbtn:nth-of-type(2)::after { animation-delay: 4.2s; }
.mapbtn:nth-of-type(2)::before { animation-delay: 1.4s; }

.mapbtn__ico, .mapbtn__text { position: relative; z-index: 1; }

@keyframes mapbtn-glow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes mapbtn-shine {
  0%   { transform: translateX(-190px) skewX(-18deg); opacity: 0; }
  4%   { opacity: 0.9; }
  15%  { transform: translateX(600px) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(600px) skewX(-18deg); opacity: 0; }
}

.mapbtn:active {
  transform: scale(0.97);
  border-color: rgba(126, 255, 206, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              0 0 40px rgba(40, 224, 152, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mapbtn__ico {
  flex: none;
  width: 60px;
  height: 60px;
  /* поднимаем иконку на высоту подсказки, чтобы её центр совпал с заголовком */
  margin-bottom: 31px;
  color: #7effce;                 /* бирюзовое свечение иконки */
  filter: drop-shadow(0 0 10px rgba(40, 224, 152, 0.5));
}
.mapbtn__ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mapbtn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;                /* перебиваем дефолтный center у <button> */
}

.mapbtn__action {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.3px;
}

.mapbtn__hint {
  margin-top: 7px;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- Кнопка «На карту» ---------- */

.btn-back {
  position: absolute;
  top: 44px;
  left: 44px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  border-radius: 999px;
  padding: 22px 42px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  color: #1c3a30;
  font-family: var(--font);
  font-size: 38px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.btn-back:active {
  transform: scale(0.97);
}

.btn-back__arrow {
  font-size: 46px;
  line-height: 0.8;
  margin-top: -4px;
}

/* ---------- Кнопка «К маршрутам» (на карте → на заставку) ---------- */
.toroutes {
  position: absolute;
  top: 62px;                      /* по центру первой строки заголовка */
  left: 40px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 24px;
  border: 1px solid rgba(126, 255, 206, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 72, 55, 0.92), rgba(8, 24, 18, 0.94));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 22px rgba(40, 224, 152, 0.2);
  color: var(--ink);
  font-family: var(--font);
  font-size: 27px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.toroutes:active {
  transform: scale(0.97);
  border-color: rgba(126, 255, 206, 0.7);
}
.toroutes__arrow {
  font-size: 34px;
  line-height: 0.7;
  margin-top: -3px;
  color: #7effce;
}

/* ---------- Кнопка «О маршруте» (открывает общий текст маршрута) ---------- */
.mapabout {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;               /* под текстом заголовка, справа */
  pointer-events: auto;           /* maphead отключает события — кнопке возвращаем */
  padding: 14px 30px 14px 18px;
  border: 1px solid rgba(126, 255, 206, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 72, 55, 0.92), rgba(8, 24, 18, 0.94));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(40, 224, 152, 0.2);
  color: var(--ink);
  font-family: var(--font);
  font-size: 31px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.mapabout:active { transform: scale(0.97); }
.mapabout__ico {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-style: italic;
  font-weight: 800;
  font-size: 27px;
  color: #061310;
  background: radial-gradient(circle at 50% 38%, #8effce, #2fe6a8);
}

/* ---------- Карточка «О маршруте» (модальный оверлей) ---------- */
.routeabout {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 60px;
  background: rgba(2, 10, 8, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.routeabout[hidden] { display: none; }
.routeabout__card {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: 100%;
  overflow: auto;
  padding: 64px 60px 56px;
  border-radius: 36px;
  border: 1px solid rgba(126, 255, 206, 0.4);
  background: linear-gradient(180deg, rgba(20, 54, 41, 0.98), rgba(8, 24, 18, 0.99));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(40, 224, 152, 0.2);
  color: var(--ink);
}
.routeabout__close {
  position: absolute;
  top: 26px;
  right: 30px;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 34px;
  cursor: pointer;
}
.routeabout__kicker {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7effce;
  margin-bottom: 14px;
}
.routeabout__title {
  font-size: 58px;
  font-weight: 800;
  line-height: 1.06;
  padding-right: 60px;
}
.routeabout__sub {
  margin-top: 12px;
  font-size: 30px;
  color: var(--ink-soft);
}
.routeabout__body { margin-top: 30px; }
.routeabout__text {
  font-size: 32px;
  line-height: 1.45;
}
.routeabout__tip {
  margin-top: 24px;
  padding: 22px 26px;
  border-radius: 20px;
  background: rgba(126, 255, 206, 0.08);
  border: 1px solid rgba(126, 255, 206, 0.2);
  font-size: 26px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---------- Заглушки окон ---------- */

.stub {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 30px;
  padding: 100px 90px;
}

.stub__ico {
  font-size: 170px;
  line-height: 1;
}

.stub__title {
  font-size: 100px;
  font-weight: 800;
  color: var(--ink);
}

.stub__text {
  font-size: 46px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ============================================================
   ЭКРАНЫ «ПОЖЕЛАНИЯ» (хаб · оставить · прочитать · спасибо)
   ============================================================ */

.wpage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 90px 70px 70px;
}

.wpage__head {
  text-align: center;
  margin: 16px 0 76px;             /* воздух сверху и, особенно, до переключателя */
}

.wpage__title {
  margin: 0;
  font-size: 74px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
}

.wpage__sub {
  margin: 16px 0 0;
  font-size: 33px;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* ---------- Статистика: переключатель + «бублик» + легенда 2 столбца ---------- */

.stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 8px;
}

.stats__toggle {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 64px;
  border-radius: 999px;
  background: rgba(6, 20, 15, 0.6);
  border: 1px solid rgba(126, 255, 206, 0.22);
}
.stats__tab {
  border: none;
  border-radius: 999px;
  padding: 16px 48px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 31px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.stats__tab--on {
  background: rgba(40, 224, 152, 0.18);
  color: #eafff6;
}

.stats__pie {
  position: relative;
  width: 440px;
  height: 440px;
  flex: none;
  border-radius: 50%;
  /* лёгкое зелёное свечение + тёмно-зелёная тень снизу — диаграмма приподнимается
     над фоном, читается на переднем плане */
  box-shadow:
    0 0 60px rgba(40, 224, 152, 0.16),
    0 26px 55px rgba(3, 26, 18, 0.55);
  /* фон-градиент из сегментов задаётся в panel.js */
  animation: stats-pie-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Полупрозрачная зелёная подложка-круг под диаграммой: чуть больше её, без
   размытия. Рисуется как кольцо СТРОГО снаружи диаграммы (радиус 220–250px в боксе
   500px) — над цветными сегментами прозрачно, поэтому сегменты не перекрываются и
   остаются яркими. Жёсткие границы, без растушёвки. */
.stats__pie::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle 250px at center,
    transparent 0 220px,
    rgba(40, 224, 152, 0.06) 220px 250px,
    transparent 250px);
}
@keyframes stats-pie-in {
  from { opacity: 0; transform: scale(0.9) rotate(-14deg); }
  to   { opacity: 1; transform: none; }
}
.stats__pie::after {                /* дырка в центре — «бублик» с гагарой */
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: #061310 url("assets/gagara.svg") center / 58% auto no-repeat;
}

.stats__legend {
  position: relative;
  list-style: none;
  margin: 68px 0 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;          /* заполняем по столбцам сверху вниз, а не построчно */
  gap: 18px 96px;                  /* больше воздуха слева/справа от разделителя */
}
/* тонкий серый разделитель между столбцами */
.stats__legend::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(200, 230, 215, 0.16);
}
.stats__legend li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  color: var(--ink);
  animation: stats-legend-in 0.4s ease both;   /* каскадное появление (задержка — inline) */
}
@keyframes stats-legend-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.stats__legend i {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex: none;
}
.stats__legend span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats__legend b {
  flex: none;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- Крупные кнопки экранов ---------- */

.wpage__actions {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* нижний блок экрана: кнопки + навигация с полоской автовозврата */
.wpage__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 24px;
}

.subnav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.subnav__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(126, 255, 206, 0.32);
  border-radius: 999px;
  padding: 16px 34px;
  background: rgba(6, 20, 15, 0.6);
  color: var(--ink);
  font-family: var(--font);
  font-size: 29px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.subnav__back:active {
  transform: scale(0.97);
  border-color: rgba(126, 255, 206, 0.6);
}
.subnav__arrow {
  font-size: 34px;
  line-height: 0.7;
  margin-top: -3px;
}

/* полоска автовозврата: убывает справа налево к кнопке «На карту» */
.autoback {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 4px;
  background: rgba(126, 255, 206, 0.12);
  overflow: hidden;
}
.autoback__bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(40, 224, 152, 0.65), rgba(126, 255, 206, 0.95));
  transform-origin: left center;
  transform: scaleX(1);
}

.wbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  height: 148px;
  border: 1px solid rgba(126, 255, 206, 0.32);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(11, 34, 26, 0.82), rgba(6, 19, 15, 0.9));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-family: var(--font);
  font-size: 39px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.wbtn:active {
  transform: scale(0.98);
  border-color: rgba(126, 255, 206, 0.6);
}
.wbtn--primary {
  background: linear-gradient(180deg, rgba(18, 58, 44, 0.92), rgba(10, 34, 26, 0.94));
  border-color: rgba(126, 255, 206, 0.5);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5),
              0 0 40px rgba(40, 224, 152, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.wbtn__ico {
  flex: none;
  width: 52px;
  height: 52px;
  color: #7effce;
  filter: drop-shadow(0 0 10px rgba(40, 224, 152, 0.5));
}
.wbtn__ico svg { width: 100%; height: 100%; display: block; }

/* бегущий блик (как на кнопках карты) */
.wbtn--shine { position: relative; overflow: hidden; }
.wbtn--shine::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(190, 255, 230, 0.28), transparent);
  filter: blur(9px);
  transform: translateX(-230px) skewX(-18deg);
  animation: wbtn-shine 8.5s ease-in-out infinite;
}
.wbtn--shine .wbtn__ico, .wbtn--shine .wbtn__label { position: relative; z-index: 1; }
@keyframes wbtn-shine {
  0%   { transform: translateX(-230px) skewX(-18deg); opacity: 0; }
  4%   { opacity: 0.9; }
  15%  { transform: translateX(1060px) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(1060px) skewX(-18deg); opacity: 0; }
}

/* ---------- Форма «Оставить пожелание» ---------- */

.wform__field {
  position: relative;
  margin-top: 44px;
  /* 90 символов укладываются в 3 строки — коробка под 4 строки с запасом */
  min-height: 360px;
  border: 1px solid rgba(126, 255, 206, 0.28);
  border-radius: 26px;
  background: rgba(6, 20, 15, 0.6);
  padding: 34px 40px 56px;
}
.wform__input {
  width: 100%;
  min-height: 240px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 38px;
  line-height: 1.35;
}
.wform__input::placeholder { color: var(--ink-dim); }
.wform__input::-webkit-scrollbar { width: 8px; }
.wform__input::-webkit-scrollbar-thumb { background: rgba(126, 255, 206, 0.4); border-radius: 4px; }
.wform__input::-webkit-scrollbar-track { background: transparent; }
.wform__counter {
  position: absolute;
  right: 34px;
  bottom: 20px;
  font-size: 26px;
  color: var(--ink-dim);
}

/* заголовок формы — по центру */
.wform > .wpage__title { text-align: center; }

/* Мок-клавиатура убрана из потока (ввод — общей шторкой), на её месте осталась
   бы дыра: поле и «откуда вы» центрируем в свободном месте между заголовком
   и нижними кнопками. */
/* сообщение об отказе: мат, ссылка, пустое поле */
.wform__error {
  margin-top: 18px;
  padding: 18px 26px;
  border-radius: 16px;
  border: 1px solid rgba(255, 138, 138, 0.4);
  background: rgba(120, 30, 30, 0.28);
  color: #ffd9d9;
  font-size: 29px;
  text-align: center;
}

.wform__field { margin-top: auto; }
.wform__where { margin-top: 56px; margin-bottom: auto; }
.wform .wpage__foot { margin-top: 0; }
.wform__label {
  display: block;
  font-size: 33px;
  color: var(--ink-soft);
}

/* два поля «Страна» / «Город» — выпадающий список с поиском */
.combos {
  display: flex;
  gap: 24px;
  margin-top: 22px;
}
.combo {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.combo__field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 32px;
  border-radius: 20px;
  border: 1px solid rgba(126, 255, 206, 0.28);
  background: rgba(6, 20, 15, 0.6);
  color: var(--ink);
  font-family: var(--font);
  font-size: 33px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.combo.is-open .combo__field { border-color: rgba(126, 255, 206, 0.6); }
.combo__field.is-error {
  border-color: rgba(255, 94, 94, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 94, 94, 0.2), 0 0 22px rgba(255, 94, 94, 0.24);
}
.combo__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-dim);           /* плейсхолдер */
}
.combo__field.is-filled .combo__value { color: var(--ink); }
.combo__chevron {
  flex: none;
  color: #7effce;
  font-size: 26px;
  transition: transform 0.15s ease;
}
.combo.is-open .combo__chevron { transform: rotate(180deg); }

/* выпадающая панель открывается вверх (поля внизу экрана) */
.combo__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 30;
  display: none;
  flex-direction: column;
  max-height: 700px;
  background: rgba(9, 26, 20, 0.98);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(126, 255, 206, 0.35);
  border-radius: 22px;
  box-shadow: 0 -22px 55px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.combo.is-open .combo__panel { display: flex; }

.combo__search-wrap {
  padding: 20px;
  border-bottom: 1px solid rgba(126, 255, 206, 0.15);
}
.combo__search {
  width: 100%;
  padding: 20px 26px;
  border-radius: 14px;
  border: 1px solid rgba(126, 255, 206, 0.25);
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink);
  font-family: var(--font);
  font-size: 30px;
  outline: none;
}
.combo__search::placeholder { color: var(--ink-dim); }

.combo__list {
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.combo__list::-webkit-scrollbar { width: 8px; }
.combo__list::-webkit-scrollbar-thumb { background: rgba(126, 255, 206, 0.4); border-radius: 4px; }
.combo__list::-webkit-scrollbar-track { background: transparent; }

.combo__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 20px 30px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 31px;
  cursor: pointer;
}
.combo__opt:active { background: rgba(40, 224, 152, 0.16); }
.combo__opt-name { font-size: 31px; line-height: 1.2; }
/* подсветка найденного куска */
.combo__opt-name b { color: #7effce; font-weight: 700; }
/* регион — чтобы различать одноимённые города (Советский, Белоярский) */
.combo__opt-reg { font-size: 23px; color: var(--ink-dim); }

/* заголовок группы («Часто выбирают» / «Все города») */
.combo__group {
  position: sticky;
  top: 0;
  padding: 16px 30px 10px;
  background: rgba(7, 22, 17, 0.98);
  font-size: 23px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
}
.combo__empty {
  padding: 26px 30px;
  color: var(--ink-dim);
  font-size: 29px;
}

/* чипы-надписи (общие) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
}
.chip {
  padding: 20px 36px;
  border-radius: 999px;
  border: 1px solid rgba(126, 255, 206, 0.3);
  background: rgba(6, 20, 15, 0.5);
  color: var(--ink);
  font-family: var(--font);
  font-size: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.chip:active { transform: scale(0.97); }
.chip--on {
  background: rgba(40, 224, 152, 0.18);
  border-color: rgba(126, 255, 206, 0.7);
  color: #eafff6;
}

/* ============================================================
   АВИАБИЛЕТ (посадочный талон)
   ============================================================ */

.tk > .wpage__title, .tk__title { text-align: center; }
/* заголовок блока настроек — сдвигает настройки ниже */
.tk__setup-title {
  margin: 56px 0 0;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  color: var(--ink);
}
.tk__block { margin-top: 42px; }   /* больше воздуха между блоками настроек */

/* ---- сам билет ---- */
.pass {
  position: relative;
  display: flex;
  width: 100%;
  margin-top: 34px;
  aspect-ratio: 1774 / 887;        /* пропорции картинки-талона */
  color: #ffffff;
  font-family: var(--font);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  /* Тёмная тень снизу — для глубины. Края билета остаются резкими. */
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5));
}
/* фон-картинка талона по стилю (форма, аврора/сцена, перфорация — в картинке) */
.pass--s1 { background-image: url("assets/pass/siyanie.png"); }
.pass--s2 { background-image: url("assets/pass/taiga.png"); }
.pass--s3 { background-image: url("assets/pass/zakat.png"); }
.pass--s4 { background-image: url("assets/pass/noch.png"); }

.pass__main {
  flex: 0 0 74%;                   /* до линии перфорации на картинке */
  min-width: 0;
  padding: 30px 44px 30px 74px;    /* левый край больше — текст не жмётся к краю картинки */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.pass__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pass__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.pass__kind {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.82;
  white-space: nowrap;
}
.pass__route {
  display: flex;
  align-items: center;
  gap: 22px;
}
.pass__pt b { display: block; font-size: 48px; font-weight: 800; line-height: 1; }
.pass__pt small { font-size: 22px; opacity: 0.82; }
.pass__pt--r { text-align: right; }
.pass__line {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0 10px, transparent 10px 20px);
}
.pass__line::after {
  content: "✈";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
}
.pass__name-row { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.pass__name-row small { font-size: 18px; opacity: 0.82; text-transform: uppercase; letter-spacing: 2px; }
.pass__name {
  font-size: 40px;
  font-weight: 800;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pass__caption {
  font-size: 30px;
  font-style: italic;
  opacity: 0.95;
}
.pass__stub {
  flex: 0 0 26%;                   /* правее перфорации на картинке */
  padding: 30px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.pass__seat { text-align: center; }
.pass__seat small { display: block; font-size: 21px; opacity: 0.82; text-transform: uppercase; letter-spacing: 1px; }
.pass__seat b { font-size: 46px; font-weight: 800; }
.pass__barcode {
  width: 74%;                      /* уже, чтобы влезал в стуб картинки */
  height: 60px;
  background: repeating-linear-gradient(90deg,
    #fff 0 3px, transparent 3px 7px, #fff 7px 10px, transparent 10px 13px, #fff 13px 19px, transparent 19px 24px);
  opacity: 0.92;
}

/* ---- выбор стиля ---- */
.tk__styles { display: flex; gap: 20px; margin-top: 18px; }
.tkstyle {
  flex: 1 1 0;
  min-width: 0;
  height: 108px;
  position: relative;
  border-radius: 18px;
  border: 3px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.tkstyle:active { transform: scale(0.97); }
.tkstyle.is-on { border-color: #ffffff; box-shadow: 0 0 26px rgba(126, 255, 206, 0.6); }
/* градиенты свотчей (у самого билета фон — картинки) */
.tkstyle--s1 { background: linear-gradient(135deg, #0a2050 0%, #1f6fb0 55%, #2fe6a8 120%); }
.tkstyle--s2 { background: linear-gradient(135deg, #16301a 0%, #2f6b34 55%, #7cc65a 120%); }
.tkstyle--s3 { background: linear-gradient(135deg, #3a1740 0%, #a83b6d 55%, #ff9d4d 120%); }
.tkstyle--s4 { background: linear-gradient(135deg, #0a1442 0%, #2b2f86 55%, #6a6cf0 120%); }
.tkstyle__name {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ---- поле имени ---- */
.tk__name-input {
  width: 100%;
  margin-top: 16px;
  padding: 24px 30px;
  border-radius: 18px;
  border: 1px solid rgba(126, 255, 206, 0.28);
  background: rgba(6, 20, 15, 0.6);
  color: var(--ink);
  font-family: var(--font);
  font-size: 34px;
  outline: none;
}
.tk__name-input::placeholder { color: var(--ink-dim); }

/* ---- экран «готово» ---- */
.tk__final { margin-top: 34px; }
.tk__qrblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;      /* QR+подсказка по центру свободного места */
  gap: 30px;
  flex: 1 1 auto;               /* заполняет пустоту между билетом и кнопками */
}
.pass__qr {
  flex: none;
  /* 300px — чтобы модуль не мельчил: на стойке это ~2,5 мм, телефон берёт
     такой код с расстояния вытянутой руки. Тихая зона в 4 модуля уже внутри
     самого SVG (см. makeQrSvg), тут только небольшой белый кант. */
  width: 300px;
  height: 300px;
  background: #fff;
  border-radius: 20px;
  padding: 12px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
.pass__qr svg { width: 100%; height: 100%; display: block; }
.tk__qrhint {
  font-size: 34px;
  line-height: 1.35;
  color: var(--ink-soft);
  text-align: center;
}

.wform__send { margin-top: auto; }

/* ---------- Лента «Прочитать пожелания» ---------- */

/* «Показать ещё»: лента приходит страницами по 50 */
.wread__more {
  width: 100%;
  margin-top: 8px;
  padding: 26px;
  border-radius: 20px;
  border: 1px dashed rgba(126, 255, 206, 0.35);
  background: rgba(6, 20, 15, 0.5);
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 30px;
  cursor: pointer;
}
.wread__more:active { background: rgba(40, 224, 152, 0.14); }

/* лента пуста или сервер молчит */
.wread__empty {
  padding: 60px 30px;
  text-align: center;
  font-size: 32px;
  line-height: 1.4;
  color: var(--ink-dim);
}

.wread__list {
  flex: 1 1 auto;
  margin: 40px 0 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-right: 12px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.wread__list::-webkit-scrollbar { width: 8px; }
.wread__list::-webkit-scrollbar-thumb { background: rgba(126, 255, 206, 0.4); border-radius: 4px; }
.wread__list::-webkit-scrollbar-track { background: transparent; }

.wcard {
  position: relative;                 /* якорь для сердечка в углу */
  flex: none;
  background: rgba(6, 20, 15, 0.7);
  border: 1px solid rgba(126, 255, 206, 0.22);
  border-radius: 24px;
  padding: 32px 36px;
}
.wcard__text {
  margin: 0;
  font-size: 35px;
  line-height: 1.4;
  color: var(--ink);
  /* пожелание умещается максимум в две строки — читать не открывая */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wcard__from {
  margin-top: 16px;
  padding-right: 120px;               /* не заезжать под сердечко в углу */
  font-size: 28px;
  color: rgba(126, 255, 206, 0.82);
}

/* ---------- Лайк на карточке пожелания ---------- */
.wcard__like {
  position: absolute;
  right: 26px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wcard__like:active { transform: scale(0.96); }
.wcard__likes {
  min-width: 1.2em;
  text-align: right;
  font-size: 25px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.wcard__like.is-liked .wcard__likes { color: #ff6485; }
.wcard__heart {
  position: relative;                 /* якорь для всплывающих сердечек */
  display: inline-flex;
  width: 34px;
  height: 34px;
}
.wcard__heart svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(126, 255, 206, 0.6);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.wcard__like.is-liked .wcard__heart svg {
  fill: #ff6485;
  stroke: #ff6485;
}
.wcard__heart.pop { animation: heart-pop 0.36s ease; }
@keyframes heart-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* всплывающие сердечки при лайке */
.heart-float {
  position: absolute;
  left: 50%;
  top: 0;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  pointer-events: none;
  animation: heart-rise 0.9s ease-out forwards;
}
.heart-float svg { width: 100%; height: 100%; fill: #ff6485; stroke: none; }
@keyframes heart-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -96px) scale(var(--s, 1)); }
}

/* ---------- «Спасибо» ---------- */

.wdone {
  text-align: center;
}
.wdone__center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.wdone__badge {
  width: 160px;
  height: 160px;
  margin-bottom: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #061310;
  background: radial-gradient(circle at 50% 40%, #8effce, #2fe6a8);
  box-shadow: 0 0 50px rgba(40, 224, 152, 0.5);
}
.wdone__badge svg { width: 84px; height: 84px; }
.wdone__actions {
  margin-top: 64px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ============================================================
   ЗАСТАВКА (выбор маршрута) — первый экран и attract-заставка простоя
   Крупный самолёт «парит» над размытой, медленно плывущей картой
   (ощущение полёта на высоте). Снизу — 5 маршрутов.
   ============================================================ */

.scr[data-screen="intro"] {
  background: var(--bg-deep);
  overflow: hidden;
}

/* --- размытая карта-подложка: «летим очень высоко» --- */
.intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* «Земля» под самолётом: две одинаковые копии карты одна над другой в контейнере,
   который непрерывно и медленно едет ВНИЗ на высоту одной копии, затем бесшовно
   повторяется (кадр совпадает) — создаётся ощущение полёта вперёд. */
.intro__ground {
  position: absolute;
  left: -20%;
  top: -100%;               /* верхняя копия — над экраном, нижняя — на экране */
  width: 140%;
  height: 200%;             /* две копии по одному экрану */
  will-change: transform;
  animation: intro-ground-scroll 90s linear infinite;
}
.intro__ground .intro__map {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;              /* каждая копия — один экран */
  object-fit: cover;
  filter: blur(20px) brightness(0.62) saturate(1.05);
  opacity: 0.5;
}
.intro__ground .intro__map:nth-child(1) { top: 0; }     /* верхняя копия */
.intro__ground .intro__map:nth-child(2) { top: 50%; }   /* нижняя (видимая) */
/* мягкое затемнение + зелёное свечение: держим текст и кнопки читаемыми */
.intro__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 44% at 50% 40%, rgba(40, 224, 152, 0.20), transparent 66%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 38%, rgba(2, 10, 8, 0.72) 100%),
    linear-gradient(180deg, rgba(3, 13, 10, 0.42) 0%, transparent 26%, transparent 58%, rgba(3, 13, 10, 0.86) 100%);
}

@keyframes intro-ground-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); }   /* сдвиг на одну копию вниз → бесшовно */
}

/* --- воздушные потоки: тонкие полоски пролетают мимо самолёта --- */
/* Лежат в подложке (под самолётом), поверх затемнения. Параметры каждой
   полоски задаёт panel.js (позиция, длина, скорость, прозрачность). */
.intro__streaks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* передний слой: над самолётом (intro__inner имеет z-index 1) */
.intro__streaks--front {
  z-index: 3;
}
.intro__streaks i {
  position: absolute;
  display: block;
  /* стартовую точку (у носа самолёта) и длину шлейфа задаёт panel.js */
  height: 2px;
  border-radius: 2px;
  /* бирюзовая «голова» слева (по ходу), длинный хвост вправо.
     Без чисто-белого — тонкие белые линии на тёмном дают красноту в JPEG. */
  background: linear-gradient(90deg,
    rgba(150, 255, 214, 0.85) 0%,
    rgba(90, 245, 185, 0.4) 38%,
    rgba(90, 245, 185, 0) 100%);
  filter: blur(0.4px);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: intro-streak;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* Полоска повёрнута на --ang (ось «вверх-вправо → вниз-влево», в тон носу
   самолёта) и едет translateX в своей же системе координат — то есть вдоль
   собственной длины, наискось вниз-влево. Так читается набегающий поток. */
@keyframes intro-streak {
  0%   { transform: rotate(var(--ang, -30deg)) translateX(0);             opacity: 0; }
  10%  { opacity: var(--op, 0.5); }
  90%  { opacity: var(--op, 0.5); }
  100% { transform: rotate(var(--ang, -30deg)) translateX(var(--travel)); opacity: 0; }
}

/* --- облака заставки: время от времени проплывают сверху вниз (за самолётом) --- */
.intro__clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* передний слой облаков: над самолётом (intro__inner z-index 1) */
.intro__clouds--front {
  z-index: 4;
}
.intro__clouds .intro-cloud {
  position: absolute;
  top: 0;
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: intro-cloud-fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes intro-cloud-fall {
  0%   { transform: translateY(var(--from)); opacity: 0; }
  14%  { opacity: var(--op, 0.5); }
  86%  { opacity: var(--op, 0.5); }
  100% { transform: translateY(var(--to)); opacity: 0; }
}
/* на «нырке» в карту облака заставки гаснут вместе с ней */
.scr[data-screen="intro"].is-diving .intro__clouds { opacity: 0; transition: opacity 0.2s ease-in; }

/* --- постоянные полоски у концов крыльев: «крылья разрезают поток» --- */
/* Всегда на месте (позиция — panel.js), пульсируют: активнее/тише, короче/длиннее. */
.wing-streak {
  position: absolute;
  width: 3px;
  height: 130px;
  margin-left: -1.5px;             /* центр полоски — по кончику крыла */
  border-radius: 3px;
  background: linear-gradient(180deg,
    rgba(180, 255, 224, 0.85) 0%,
    rgba(90, 245, 185, 0.4) 45%,
    rgba(90, 245, 185, 0) 100%);
  transform-origin: top center;
  filter: blur(0.5px);
  will-change: opacity, transform;
  animation: wing-streak-pulse 2.6s ease-in-out infinite;
}
@keyframes wing-streak-pulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.75); }
  50%      { opacity: 0.6;  transform: scaleY(1.15); }
}
/* хвостовые — короче крыльевых */
.wing-streak--tail { height: 62px; }

/* выхлоп за двигателями: плоский «толстый» шлейф, плотный сверху и уходящий
   в прозрачность снизу (не дым/облако). Живёт в #wingFollow → качается с самолётом. */
.exhaust {
  position: absolute;
  width: 30px;
  height: 150px;
  margin-left: -15px;               /* центр по двигателю */
  border-radius: 46% 46% 50% 50% / 22% 22% 80% 80%;
  background: linear-gradient(180deg,
    rgba(196, 255, 236, 0.5) 0%,
    rgba(120, 245, 200, 0.28) 34%,
    rgba(120, 245, 200, 0) 100%);
  filter: blur(3px);
  transform-origin: top center;
  will-change: opacity, transform;
  animation: exhaust-flick 1.5s ease-in-out infinite;
}
@keyframes exhaust-flick {
  0%, 100% { opacity: 0.55; transform: scaleY(0.9); }
  50%      { opacity: 0.85; transform: scaleY(1.1); }
}

/* навигационные лампочки на кончиках крыльев: мигают строб-вспышкой (как у
   настоящего самолёта). Живут в #wingFollow → качаются с самолётом. */
.wing-lamp {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;            /* центр — на кончике крыла */
  border-radius: 50%;
  background: currentColor;
  will-change: opacity, box-shadow;
  animation: wing-lamp-blink 2.6s ease-in-out infinite;
}
/* красная — меньше и мягче (размытие → свечение, а не жёсткий кружок) */
.wing-lamp--red {
  color: #ff5a5a;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  filter: blur(1.4px);
}
.wing-lamp--white { color: #eaffff; }
@keyframes wing-lamp-blink {
  0%, 16%, 100% { opacity: 0.12; box-shadow: 0 0 3px 0 currentColor; }   /* почти погашена */
  4%  { opacity: 1; box-shadow: 0 0 12px 4px currentColor; }             /* вспышка */
  8%  { opacity: 0.12; box-shadow: 0 0 3px 0 currentColor; }
  12% { opacity: 1; box-shadow: 0 0 12px 4px currentColor; }             /* двойная вспышка */
}

/* обёртка полосок у крыльев/хвоста: качается синхронно с самолётом
   (та же анимация, что и .intro__plane-img, — одинаковый цикл и старт) */
.wing-follow {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform-origin: 50% 820px;   /* ≈ центр самолёта (уточняется в panel.js) */
  will-change: transform;
  animation: intro-plane-float 6s ease-in-out infinite;
}
.scr[data-screen="intro"].is-diving .wing-follow { opacity: 0; transition: opacity 0.2s ease-in; }
/* на «нырке» в карту полоски ускоряются-растворяются вместе с заставкой */
.scr[data-screen="intro"].is-diving .intro__streaks { opacity: 0; transition: opacity 0.2s ease-in; }

/* --- контент поверх подложки --- */
.intro__inner {
  position: absolute;
  inset: 0;
  /* без z-index: не создаём stacking-контекст, чтобы кнопки (.routes) могли
     подняться над декоративными слоями (полоски/облака/выхлоп) */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 60px 74px;
}

.intro__head {
  flex: 0 0 auto;
  text-align: center;
}
.intro__title {
  font-size: 96px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.5px;
  text-shadow: 0 0 46px rgba(40, 224, 152, 0.5), 0 8px 30px rgba(0, 0, 0, 0.6);
}
.intro__sub {
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 29px;
  line-height: 1.32;
  font-weight: 500;
  color: var(--ink-soft);
}

/* --- самолёт: крупная заглушка, «парит» --- */
.intro__plane {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro__plane-img {
  height: 85%;                  /* чуть меньше зоны — не утыкается в текст/кнопки */
  width: auto;
  max-width: 94%;
  object-fit: contain;
  filter:
    drop-shadow(0 28px 52px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 34px rgba(40, 224, 152, 0.25));
  opacity: 0.98;
  will-change: transform;
  animation: intro-plane-float 6s ease-in-out infinite;
}
/* лёгкое «парение»: покачивание вверх-вниз и чуть по крену */
@keyframes intro-plane-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-26px) rotate(1.5deg); }
}

/* --- список маршрутов --- */
.routes {
  flex: 0 0 auto;
  width: 100%;
  max-width: 900px;
  position: relative;
  z-index: 10;                   /* кнопки — на самом верху (важнее декора) */
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.route-btn {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 0 26px;
  height: 128px;
  position: relative;
  overflow: hidden;
  text-align: left;
  /* Временно 4 маршрута вместо 5 (маршрут 3 скрыт). Высота увеличена
     со 100px до 128px, чтобы 4 кнопки заняли ту же высоту блока, что и
     прежние 5: 4×128 + 3×13(gap) = 551 ≈ 5×100 + 4×13 = 552. При
     возврате 5-го маршрута вернуть height: 100px. */
  border: 1px solid rgba(126, 255, 206, 0.42);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(28, 72, 55, 0.90) 0%, rgba(13, 38, 29, 0.92) 55%, rgba(8, 24, 18, 0.94) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5),
              0 0 30px rgba(40, 224, 152, 0.16),
              inset 0 2px 0 rgba(180, 255, 224, 0.14);
  color: var(--ink);
  font-family: var(--font);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.route-btn:active {
  transform: scale(0.985);
  border-color: rgba(126, 255, 206, 0.7);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 34px rgba(40, 224, 152, 0.26);
}

/* номер маршрута — светящийся кружок слева */
.route-btn__no {
  flex: none;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 800;
  color: #061310;
  background: radial-gradient(circle at 50% 38%, #8effce, #2fe6a8);
  box-shadow: 0 0 26px rgba(40, 224, 152, 0.5);
}

.route-btn__text {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 10px;             /* отодвигаем название правее от кружка с номером */
  display: flex;
  flex-direction: column;
}
.route-btn__name {
  font-size: 31px;
  font-weight: 700;
  line-height: 1.1;
}
.route-btn__hint {
  margin-top: 5px;
  font-size: 21px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-btn__go {
  flex: none;
  font-size: 42px;
  line-height: 1;
  color: #7effce;
  filter: drop-shadow(0 0 10px rgba(40, 224, 152, 0.5));
  margin-right: 8px;             /* чуть от правого края */
  will-change: transform;
  animation: route-go-nudge 2.4s ease-in-out infinite;   /* лёгкое покачивание, помедленнее */
}
/* стрелки у кнопок покачиваются вразнобой */
.route-btn:nth-child(2) .route-btn__go { animation-delay: 0.28s; }
.route-btn:nth-child(3) .route-btn__go { animation-delay: 0.56s; }
.route-btn:nth-child(4) .route-btn__go { animation-delay: 0.84s; }
.route-btn:nth-child(5) .route-btn__go { animation-delay: 1.12s; }
@keyframes route-go-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(9px); }
}

/* «Нырок» в карту при выборе маршрута. Карта уже показана и готова ПОД
   заставкой (panel.js); заставка держится поверх (z-index, принудительно
   видима), приближается зумом и плавно растворяется в карту — мягкий
   кросс-фейд без мгновенного переключения экранов и мигания. */
/* Фаза 1: заставка поверх готовой карты, видима, opacity 1 (стартовое состояние). */
.scr[data-screen="intro"].is-diving {
  z-index: 5;                        /* поверх карты, которая уже активна снизу */
  opacity: 1;
  visibility: visible !important;
  pointer-events: none;
}
/* Фаза 2 (следующий кадр): быстрый ease-out — заставка гаснет и слегка
   приближается, растворяясь в карту. Одна короткая фаза, без обрыва. */
.scr[data-screen="intro"].is-diving.is-diving-go {
  transition: opacity 0.4s ease-out;
  opacity: 0;
}
.scr[data-screen="intro"].is-diving .intro__inner {
  transition: transform 0.4s ease-out;
}
.scr[data-screen="intro"].is-diving.is-diving-go .intro__inner {
  transform: scale(1.12);
}
.scr[data-screen="intro"].is-diving .intro__map {
  transition: transform 0.4s ease-out, filter 0.4s ease-out;
}
.scr[data-screen="intro"].is-diving.is-diving-go .intro__map {
  transform: translate(-4%, -2%) scale(1.14);
  filter: blur(8px) brightness(0.95);
}

/* ============================================================
   ЭКРАННАЯ КЛАВИАТУРА
   Одна на все поля ввода панели (имя на билете, текст пожелания,
   поиск в списках). Лежит поверх экранов, выезжает снизу.
   Раскладка и логика — в panel.js.
   ============================================================ */

/* Ширина ряда: 12 клавиш × 80px + 11 зазоров × 8px = 1048 = 1080 − 2×16.
   Высота шторки: 4 ряда × 108 + 3 × 10 + поля = ~506px из 1920. */
.kb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;                      /* выше всего внутри экрана */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px 26px;
  /* фон непрозрачный: сквозь полупрозрачный просвечивали кнопки под шторкой */
  background: linear-gradient(180deg, #0b241c, #051310);
  border-top: 1px solid rgba(126, 255, 206, 0.28);
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.55);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* закрытая шторка не должна перехватывать тапы по нижним кнопкам карты */
  pointer-events: none;
}
.kb.is-open {
  transform: none;
  pointer-events: auto;
}

.kb__row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.kb__key {
  flex: 0 0 auto;
  width: 80px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(126, 255, 206, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  font-family: var(--font);
  font-size: 40px;
  font-weight: 500;
  cursor: pointer;
  /* тап не должен выделять подпись или вызывать подсветку системы */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.1s ease, transform 0.1s ease;
}
/* регистр переключается классом на шторке — без перерисовки клавиш */
.kb.is-shift .kb__key--ch { text-transform: uppercase; }

.kb__key.is-press {
  background: rgba(40, 224, 152, 0.34);
  border-color: rgba(126, 255, 206, 0.5);
  transform: translateY(2px);
}

.kb__key--shift, .kb__key--back { font-size: 34px; color: var(--ink-soft); }
/* Shift подсвечен, когда включён; при фиксации (двойной тап) — ярче */
.kb.is-shift .kb__key--shift { color: var(--ink); background: rgba(40, 224, 152, 0.18); }
.kb.is-shift-lock .kb__key--shift {
  color: #eafff6;
  background: rgba(40, 224, 152, 0.3);
  border-color: rgba(126, 255, 206, 0.55);
}

.kb__key--srv { width: 132px; font-size: 28px; font-weight: 600; color: var(--ink-soft); }
.kb__key--space {
  flex: 1 1 auto;
  width: auto;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink-dim);
}
.kb__key--done {
  width: 216px;
  font-size: 30px;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(40, 224, 152, 0.3), rgba(40, 224, 152, 0.16));
  border-color: rgba(126, 255, 206, 0.5);
}

/* страница экрана уезжает вверх, если поле попадает под шторку (panel.js) */
.wpage { transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }