/* ==========================================================================
   PLAYRIX MARATHON — компоненты и экраны
   ========================================================================== */

/* ------------------------------------------------------------------ шапка */

/* Фон шапки проявляется только по скроллу (issue #34): вверху страницы
   шапка — часть сцены, без плашки; под прокрученным контентом появляется
   фундамент. Меняется только фон — высота и содержимое стоят на месте
   (сдвиги внутрь, как на сайте Хакатона, не копируем). */
.hdr {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}

.hdr.is-scrolled {
  background: var(--c-scene-hdr);
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* Где можно — полупрозрачный фон с блюром: контент мягко гаснет под шапкой,
   а не обрезается ею. */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .hdr.is-scrolled {
    background: rgba(8, 31, 12, .62);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Кнопки шапки — один калибр (issue #34): одна высота, один кегль, одна
   пилюля; различается только раскраска. */
.hdr .btn {
  height: 36px;
  padding: 0 16px;
  font-size: var(--fs-14);
}

.hdr__in {
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* Лого в шапке — горизонтальная версия Con26 (по гайду: «шапка сайта»),
   всегда двухцветная: playrix зелёным + con'26 белым. Охранное поле —
   высота буквы N, у маленького лого это ~высота самой плашки шапки. */
.hdr__logo {
  display: flex;
  align-items: center;
  color: var(--c-text-inv);
  white-space: nowrap;
}

.hdr__logo:hover { color: var(--c-text-inv); }

.hdr__logo img { height: 30px; width: auto; }

.hdr__spacer { flex: 1; }

.hdr__user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.hdr__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-deep);
  object-fit: cover;
}

.hdr__name {
  font-size: var(--fs-14);
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ каркас */

.main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-10) var(--s-6) var(--s-16);
}

.screen { animation: screen-in .25s ease; }

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

/* ------------------------------------------------------------------ лендинг */

.hero {
  position: relative;
  text-align: center;
  padding: var(--s-16) 0 var(--s-12);
  color: var(--c-text-inv);
}

/* Лого Con26 на лендинге: стоп-стек над заголовком (правило гайда —
   приоритетный знак на титульных экранах). */
.hero__logo {
  width: min(280px, 64vw);
  margin: 0 auto var(--s-6);
}

/* Метка-кикер — капитель Cera с трекингом, зелёным (роль «акцентная
   фраза» из раздела типографики гайда), без плашки. */
.hero__kicker {
  display: inline-block;
  color: var(--c-green);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

.hero h1 {
  max-width: 720px;
  margin: 0 auto var(--s-4);
}

.hero__sub {
  max-width: 560px;
  margin: 0 auto var(--s-8);
  color: rgba(255, 255, 255, .75);
  font-size: var(--fs-18);
}

.hero__note {
  margin-top: var(--s-4);
  font-size: var(--fs-13);
  color: var(--c-text-3);
}

.hero .hero__note { color: rgba(255, 255, 255, .55); }

/* Доп-элементы Con26 (звезда/стрелка/кольцо/сердце, PNG из гайда) —
   декоративные акценты малым масштабом. Прямоугольник безопасности:
   не перекрывают текст, aria-hidden в разметке. Тише и с лёгким наклоном
   (issue #34): идеально ровные «стикеры по углам» — примета сгенерированных
   макетов, живому декору идёт небольшая небрежность посадки. */
.deco {
  position: absolute;
  pointer-events: none;
  opacity: .6;
}

.deco--star   { width: 84px;  left: max(4%, calc(50% - 460px)); top: var(--s-12); rotate: -10deg; }
.deco--arrow  { width: 104px; right: max(4%, calc(50% - 470px)); bottom: var(--s-12); rotate: 8deg; }
.deco--ring   { width: 110px; left: max(2%, calc(50% - 440px)); bottom: var(--s-6); opacity: .5; }
.deco--heart  { width: 76px;  right: max(6%, calc(50% - 430px)); top: var(--s-16); opacity: .55; rotate: 12deg; }

@media (max-width: 900px) { .deco { display: none; } }

/* Бейджи команд на лендинге: лента одинаковых «иконок приложения» */

.badge-row {
  display: flex;
  justify-content: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-10);
}

.badge-row .badge {
  width: 72px;
  height: 72px;
  transition: transform .15s ease;
}

.badge-row .badge:hover { transform: translateY(-4px); }

/* ------------------------------------------------------------------ кнопки */

/* Кнопки Con26: пилюли; основная — зелёная плашка с тёмным текстом
   (приём CTA из гайда), Google остаётся белой для узнаваемости входа. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  font-size: var(--fs-16);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-hover); }

.btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .35);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .08); color: var(--c-text-inv); border-color: rgba(255, 255, 255, .6); }

.btn--google { background: #FFFFFF; color: #14181F; border: 1px solid rgba(0, 0, 0, .08); box-shadow: var(--shadow-1); }
.btn--google:hover { background: #F1F3F6; color: #14181F; }

.btn--big { padding: 14px 32px; font-size: var(--fs-18); }

.btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }

.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ карточки */

/* Карточки Con26: поверхность чуть светлее сцены, тонкая граница,
   заметное скругление (раздел «Элементы» гайда — карточная подача). */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.card--form {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-8);
}

/* ------------------------------------------------------------------ форма */

.field { margin-bottom: var(--s-5); }

.field__label {
  display: block;
  font-size: var(--fs-14);
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.field__label .opt { color: var(--c-text-3); font-weight: 400; }

.field__input,
.field__textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-deep);
  color: var(--c-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field__input:focus,
.field__textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.field__textarea { min-height: 120px; resize: vertical; }

.field__hint {
  margin-top: var(--s-1);
  font-size: var(--fs-12);
  color: var(--c-text-3);
}

.field__counter {
  float: right;
  font-weight: 400;
  color: var(--c-text-3);
}

.field--error .field__input,
.field--error .field__textarea {
  border-color: var(--c-danger);
}

.field__error {
  margin-top: var(--s-1);
  font-size: var(--fs-12);
  color: var(--c-danger);
}

/* Кто вошёл: строка профиля из Google */

.gprofile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  margin-bottom: var(--s-6);
  background: var(--c-surface-2);
  border-radius: var(--r-md);
}

.gprofile__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-surface-3);
  object-fit: cover;
  flex: none;
}

.gprofile__name { font-weight: 700; }

.gprofile__email { font-size: var(--fs-14); color: var(--c-text-2); }

/* ------------------------------------------------------------------ выбор команды */

.teams {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

@media (max-width: 640px) {
  .teams { grid-template-columns: repeat(2, 1fr); }
}

.team {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-3);
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

/* Схема состояний с референса (#2): тихая карточка → ховер «оживает»
   цветом команды → выбрана: полная рамка, свечение, зелёная отметка. */

.team:hover {
  border-color: var(--team-color, var(--c-accent));
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

.team:hover .badge { transform: scale(1.05); }

.team .badge { width: 64px; height: 64px; transition: transform .15s ease; }

.team__name { font-weight: 700; font-size: var(--fs-14); }

.team__count { font-size: var(--fs-12); color: var(--c-text-3); }

.team--selected {
  border-color: var(--team-color, var(--c-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color, var(--c-accent)) 22%, transparent);
}

.team--selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-bright);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

/* ------------------------------------------------------------------ бейдж команды
   Единый формат «иконки приложения»: цвет и глиф приходят из базы. */

.badge {
  border-radius: 22.5%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-1);
}

.badge svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------ экран «готово» */

.done {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  color: var(--c-text-inv);
}

/* Бейдж команды сидит в зелёном свечении — «мягкий акцент» системы */
.done .badge {
  width: 112px;
  height: 112px;
  margin: 0 auto var(--s-5);
  filter: drop-shadow(0 0 28px rgba(40, 210, 35, .22));
}

.done__team { color: rgba(255, 255, 255, .75); font-size: var(--fs-18); margin-bottom: var(--s-6); }

.done__card {
  padding: var(--s-6);
  text-align: left;
  margin-bottom: var(--s-6);
}

.done__row {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-14);
}

.done__row:last-child { border-bottom: 0; }

.done__key { width: 140px; flex: none; color: var(--c-text-2); }

.done__val { min-width: 0; overflow-wrap: anywhere; }

.done__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

.done__next {
  margin-top: var(--s-8);
  font-size: var(--fs-13);
  color: rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------------------ ошибки входа */

/* Единый абзац (issue #40): раньше здесь был flex с иконкой, но с появлением
   mailto-ссылки (#36) текст и адрес садились рядом, как две колонки. */
.auth-error {
  max-width: 480px;
  margin: 0 auto var(--s-6);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-danger-soft);
  color: var(--c-danger);
  font-size: var(--fs-14);
}

/* mailto внутри алерта — в цвет текста, без фирменной зелени (issue #36) */
.auth-error a { color: inherit; text-decoration: underline; }

/* ------------------------------------------------------------------ тосты */

.toasts {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(480px, calc(100vw - 32px));
}

.toast {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: #FFFFFF;
  color: #14181F;
  font-size: var(--fs-14);
  box-shadow: var(--shadow-2);
  animation: screen-in .2s ease;
}

.toast--error { background: #C0342B; color: #fff; }

/* ------------------------------------------------------------------ загрузка */

.app-loading .main::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: var(--s-16) auto;
  border: 3px solid rgba(255, 255, 255, .18);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ------------------------------------------------------------------ подвал

   Кредит Fontfabric — требование EULA Bebas Neue при @font-face
   (см. fonts.css). Одна тихая строка под контентом. */

.credit {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--s-6) var(--s-6);
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, .35);
}

.credit a { color: rgba(255, 255, 255, .5); }
.credit a:hover { color: rgba(255, 255, 255, .75); }

@media (max-width: 640px) {
  .hdr__name { display: none; }
  .main { padding: var(--s-6) var(--s-4) var(--s-12); }
  .card--form { padding: var(--s-5); }
  h1 { font-size: var(--fs-28); }
}

/* ------------------------------------------------------------------ модалки */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(4, 16, 7, .72);
  animation: screen-in .15s ease;
}

.modal__box {
  width: min(440px, 100%);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6) 0;
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-text);
}

.modal__x {
  border: 0;
  background: none;
  color: var(--c-text-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.modal__x:hover { color: var(--c-text); }

.modal__body { padding: var(--s-4) var(--s-6) var(--s-5); }

.modal__text { color: var(--c-text-2); font-size: var(--fs-15); }

.modal__check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--fs-13);
  color: var(--c-text-2);
  cursor: pointer;
}

.modal__check input { accent-color: var(--c-green); }

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: 0 var(--s-6) var(--s-5);
}

/* ------------------------------------------------------------------ голосование
   Хироблок в духе Playrix Hackathon: сверху арт и смысл, ниже — сетка
   карточек «фото + ФИО + голос». Порядок карточек задаёт сервер. */

.vhero {
  position: relative;
  text-align: center;
  padding: var(--s-8) 0 var(--s-6);
}

.vhero__team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  /* воздух до заголовка: имя команды — подпись к маскоту, а не сосед
     крупного «Голосования» (issue #29) */
  margin-bottom: var(--s-12);
}

.vhero__team .badge { width: 40px; height: 40px; }

.vhero__name {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-text);
}

.vhero h1 { max-width: 720px; margin: 0 auto var(--s-3); }

.vhero__sub {
  max-width: 520px;
  margin: 0 auto var(--s-4);
  color: var(--c-text-2);
}

/* Панель-бюллетень: «ваши голоса» и «в финал» — одна карточка в стиле
   сетки участников, вместо трёх строк разного стиля и логики (issue #29). */
.vote__panel {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  text-align: left;
}

.vote__prow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.vote__plabel {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.vote__pcount {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  letter-spacing: .03em;
  color: var(--c-text);
}

.vote__psec--votes .vote__prow { margin-bottom: var(--s-3); }

/* Слоты голосов: заполненный — имя в хронологии, свободный — пунктир.
   Сколько всего, столько и видно: пустой слот объясняет «до кого дотянулся,
   а куда ещё можно». */
.vote__slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.vote__chip {
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--team-color, var(--c-green)) 45%, transparent);
  background: color-mix(in srgb, var(--team-color, var(--c-green)) 12%, transparent);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--c-text);
}

.vote__slot {
  width: 72px;
  height: 27px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, .25);
  color: var(--c-text-3);
  font-size: var(--fs-13);
  line-height: 25px;
  text-align: center;
}

.vote__slot::before { content: "+"; }

/* Сетка карточек участников */
.vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-4);
}

.vcard {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  text-align: center;
  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}

/* Ховер без прыжка (issue #31): сдвиг на 2px без анимации читался как
   дёрганье. Вместо него — рамка и мягкое свечение цветом команды; контент
   стоит на месте. */
.vcard:hover {
  border-color: var(--team-color, var(--c-green));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color, var(--c-green)) 16%, transparent),
              0 10px 28px rgba(0, 0, 0, .35);
}

.vcard--voted {
  border-color: var(--team-color, var(--c-green));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color, var(--c-green)) 22%, transparent);
}

.vcard--me { opacity: .6; }

.vcard__photo {
  position: relative;
  flex: 1 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-deep);
  margin-bottom: var(--s-3);
}

.vcard__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Ответ «почему я» — на обороте фото: ховер/тап переворачивает фото-блок,
   имя/город/кнопка стоят на месте. Пустого ответа — класса --flip нет. */
.vcard__photo--flip { perspective: 1200px; }

.vcard__flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .65, .25, 1);
}

/* Ховер-флип — только там, где ховер есть (issue #34): на таче sticky
   :hover жил после тапа и пересиливал снятый класс — обратный тап не
   возвращал фото. Теперь на таче флип ведёт только класс is-flipped
   (тап по фото в app.js), на десктопе — ховер с микро-задержкой на входе:
   не срабатывает при пролёте курсора через сетку, но виден, когда курсор
   задержался (issue #31). */
@media (hover: hover) {
  .vcard:hover .vcard__flip {
    transform: rotateY(180deg);
    transition-delay: .08s;
  }
}

.vcard__photo--flip:focus-visible .vcard__flip,
.vcard__photo--flip.is-flipped .vcard__flip {
  transform: rotateY(180deg);
}

.vcard__photo--flip:focus-visible { outline: 2px solid var(--team-color, var(--c-green)); outline-offset: 3px; }

.vcard__face {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-deep);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.vcard__face--back {
  transform: rotateY(180deg);
  padding: var(--s-3);
  background: color-mix(in srgb, var(--team-color, var(--c-green)) 12%, var(--c-surface));
  overflow-y: auto;
  /* Нативную полосу прячем: в скруглённых углах она выглядит сломанной
     (issue #34). Прокрутка остаётся; рисует тумб app.js — см. .vcard__thumb. */
  scrollbar-width: none;
  text-align: left;
}

.vcard__face--back::-webkit-scrollbar { display: none; }

/* Плавающий тумб прокрутки в духе macOS: тонкий, со скруглением и отступом
   от углов. Виден всегда, пока контент прокручивается (issue #36) — до
   первой прокрутки тоже: это подсказка «есть продолжение». Высоту и позицию
   считает app.js по scrollTop. */
.vcard__thumb {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .42);
  pointer-events: none;
  z-index: 2;
}

/* Подсказка «фото переворачивается» — только на тач-экранах: там флип по
   тапу, без значка его не найти. На десктопе флип виден по ховеру сам,
   значок — шум (issue #31). Стоит в круглой подложке с блюром: на обороте
   под ней текст, голая иконка на нём терялась (issue #34). */
.vcard__hint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(6, 20, 10, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .85);
  pointer-events: none;
}

@media (hover: hover) {
  .vcard__hint { display: none; }
}

.vcard__why-cap {
  margin-bottom: var(--s-2);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--team-color, var(--c-green));
}

.vcard__why-text {
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--c-text-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .vcard__flip { transition: none; }
}

/* Номер голоса «2/3» — правый верх фото: место этого человека в хронологии
   моих голосов («1/3» — старейший, он слетит при вытеснении). Цвет —
   команды, чтобы отметка читалась на фото и сочеталась с рамкой. */
.vcard__mark {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--team-color, var(--c-green));
  color: var(--c-on-accent);
  font-size: var(--fs-13);
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  letter-spacing: .02em;
}

.vcard__name {
  font-weight: 600;
  overflow-wrap: anywhere;
  margin-bottom: var(--s-3);
}

.vcard .vote__btn { width: 100%; }

/* Кнопка карточки (issue #31): без волосяной рамки — тихая заливка на
   карточке, по ховеру — тон команды; голосована — зелёная плашка. */
.vote__btn {
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--c-text);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.vote__btn:hover {
  background: color-mix(in srgb, var(--team-color, var(--c-green)) 16%, transparent);
  color: var(--team-color, var(--c-green));
}

.vote__btn--on,
.vote__btn--on:hover {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-on-accent);
  font-weight: 700;
}

.vote__btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }

/* Отклик на голос (issue #31): короткий пружинный «пых» карточки,
   значок голоса до-масштабируется следом. */
.vcard--pop { animation: vcard-pop .35s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes vcard-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.vcard--pop .vcard__mark { animation: mark-pop .3s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes mark-pop {
  from { transform: scale(.4); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .vcard--pop,
  .vcard--pop .vcard__mark { animation: none; }
}

.vote__note {
  max-width: 560px;
  margin: var(--s-8) auto 0;
  text-align: center;
  font-size: var(--fs-13);
  color: rgba(255, 255, 255, .5);
}

/* Командный цвет карточек — переменную ставит рендер на .vgrid */
.vgrid { --team-color: var(--c-green); }

/* ------------------------------------------------------------------ результаты */

.vres__top { text-align: center; margin-bottom: var(--s-8); }

.vres__sub { margin-top: var(--s-3); color: var(--c-text-2); }

#results-export-btn { margin-top: var(--s-5); }

.vres__top .btn { margin-top: var(--s-5); }

#results-teams {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  align-items: start;
}

.vres__team {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.vres__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.vres__badge { width: 44px; height: 44px; flex: none; }

.vres__team-name { font-size: var(--fs-28); }

.vres__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
}

.vres__row + .vres__row { border-top: 1px solid var(--c-border); }

/* Десятка — в акценте команды; места 1–3 чуть крупнее */
.vres__row:nth-child(-n+3) { background: color-mix(in srgb, var(--team-color, var(--c-green)) 9%, transparent); }

.vres__rank {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--c-text-3);
  width: 26px;
  text-align: right;
  flex: none;
}

.vres__row:nth-child(-n+3) .vres__rank { color: var(--team-color, var(--c-green)); }

.vres__ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-deep);
  object-fit: cover;
  flex: none;
}

.vres__who { min-width: 0; flex: 1; }

.vres__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vres__city { font-size: var(--fs-12); color: var(--c-text-3); }

.vres__votes {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  color: var(--c-green);
  flex: none;
  min-width: 30px;
  text-align: right;
}

@media (max-width: 640px) {
  #results-teams { grid-template-columns: 1fr; }
  .vote__panel { padding: var(--s-4) var(--s-4) var(--s-5); }
}

/* ------------------------------------------------------------------ язык */

/* Размер и форма — общие с другими кнопками шапки (.hdr .btn, issue #34),
   свой только трекинг капители. */
.btn--lang { letter-spacing: .04em; }


/* ------------------------------------------------------------------ команды на лендинге
   Карточка команды: маскот + название, цвет команды рамкой и подсветкой.
   Пришла на смену ленте бейджей (issue #18). */

.trow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  max-width: 860px;
  margin: var(--s-10) auto 0;
}

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--team-color, var(--c-green)) 55%, transparent);
  border-radius: var(--r-lg);
  transition: transform .15s ease, box-shadow .15s ease;
}

.tcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color, var(--c-green)) 25%, transparent);
}

.tcard__mascot { height: 120px; width: auto; }

.tcard__name {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-text);
  text-align: center;
}

@media (max-width: 640px) {
  .trow { grid-template-columns: repeat(2, 1fr); }
  .tcard__mascot { height: 96px; }
}

/* Маскот своей команды в хироблоке голосования (крупно, вместо группы);
   общая бегущая группа — на экране паузы. Размер ведём по ВЫСОТЕ, не по
   ширине (issue #34): Кэтрин (300×1318) и Остин (300×922) вертикальные и
   по ширине вырастали выше экрана. Потолок один для всех — рост черепахи
   Fishdom: 462px на десктопе, на узких экранах 86vw (та же пропорция:
   старые 56vw ширины × 462/300). Пропорцию держат width/height-атрибуты
   картинки, ширина — auto (srcset 1x/2x подменяет файлы). */
.vhero__mascot {
  height: min(462px, 86vw);
  width: auto;
  margin: 0 auto var(--s-3);
  display: block;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .38));
  pointer-events: none;
}

.hero__mascots {
  width: min(680px, 92%);
  height: auto;
  margin: 0 auto var(--s-5);
  display: block;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .35));
  pointer-events: none;
}

/* Режим «чужая команда» упразднён (#39): неверная ссылка = нет ссылки
   (своя команда или экран с алертом), отдельного просмотра больше нет. */