/* FUFA 26 — ретро-стиль 90-х */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #0a0e1e;
  font-family: "Courier New", monospace;
  color: #e8e8f0;
  overflow: hidden;
  overscroll-behavior: none;
}

#stage {
  position: relative;
  /* Размер сцены = реальная видимая область. CSS-фолбэки (vw/vh/dvh) на случай,
     если JS ещё не выставил --app-vw/--app-vh; финальное значение — из visualViewport
     (js/main.js → sizeViewport), что чинит обрезку поля в мобильных браузерах (iOS Chrome),
     где vh/dvh/vw считаются неровно из-за адресной строки и выреза. */
  width: 100vw;
  width: var(--app-vw, 100vw);
  height: 100vh;
  height: 100dvh;
  height: var(--app-vh, 100dvh);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a0e1e;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 26, 0.92);
  z-index: 10;
  overflow-y: auto;
}

.hidden { display: none !important; }

/* ЛОГО */
.logo { text-align: center; margin-bottom: 36px; }
.logo-fufa {
  font-size: 92px;
  font-weight: bold;
  letter-spacing: 8px;
  color: #ffe000;
  text-shadow: 5px 5px 0 #c03020, 10px 10px 0 #1840a0;
}
.logo-fufa span { color: #ffffff; font-size: 64px; margin-left: 12px; }
.logo-sub { margin-top: 10px; font-size: 14px; letter-spacing: 4px; color: #80e890; }

.menu-buttons { display: flex; flex-direction: column; gap: 14px; width: 380px; }
.menu-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
/* Соло-режимы (Пенальти / Тренировка) — на полную ширину под парой мультиплеерных кнопок:
   убирает «дырку» при нечётном числе кнопок и разделяет категории (соц. мультиплеер vs соло). */
.menu-secondary #btn-gk,
.menu-secondary #btn-solo { grid-column: 1 / -1; }
.menu-footer { margin-top: 40px; font-size: 11px; color: #5a6080; letter-spacing: 1px; }

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА */
.lang-switch {
  position: absolute;
  top: calc(14px + var(--tg-top));
  right: 14px;
  display: flex;
  gap: 6px;
  z-index: 12;
}
.lang-btn {
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 6px 11px;
  background: #1a2138;
  color: #8a92b0;
  border: 2px solid #303850;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
}
.lang-btn:hover { color: #ffffff; border-color: #4a5478; }
.lang-btn.active { background: #ffe000; color: #0b1224; border-color: #ffffff; }

/* КНОПКИ */
.btn {
  font-family: inherit;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 2px;
  padding: 12px 22px;
  background: #1840a0;
  color: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
  transition: transform 0.05s;
}
.btn:hover:not(:disabled) { background: #2858d0; transform: translate(-1px, -1px); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-big { font-size: 17px; padding: 15px 26px; }
.btn-cta { font-size: 24px; padding: 22px 26px; letter-spacing: 3px; }
.btn-small { font-size: 12px; padding: 7px 12px; }
/* вторичные пункты меню — мельче и приглушённее, чтобы не конкурировали с главной кнопкой */
.btn-sec { font-size: 12px; letter-spacing: 1px; padding: 11px 12px; background: #283150; border-width: 2px; box-shadow: 3px 3px 0 #000; }
.btn-sec:hover:not(:disabled) { background: #364268; }
.btn-dim { background: #303850; }
.btn-dim:hover:not(:disabled) { background: #404a68; }
.btn-accent { background: #b02058; border-color: #ffe000; color: #ffffff; }
.btn-accent:hover:not(:disabled) { background: #d83070; }

/* ПАНЕЛИ */
.panel {
  background: #101830;
  border: 3px solid #ffe000;
  box-shadow: 6px 6px 0 #000;
  padding: 36px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.panel h1 { font-size: 42px; letter-spacing: 4px; }
.panel h2 { font-size: 22px; letter-spacing: 3px; color: #ffe000; }

/* ПОИСК СОПЕРНИКА: лёгкая плашка поверх живого тренажёра (не перекрывает поле) */
#search-hud {
  position: absolute;
  top: calc(10px + var(--tg-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: rgba(10, 16, 36, 0.82);
  border: 2px solid #ffe000;
  box-shadow: 3px 3px 0 #000;
  text-align: center;
  max-width: 94vw;
}
.search-hud-row { display: flex; align-items: center; gap: 10px; }
.search-hud-text { font-size: 13px; letter-spacing: 2px; color: #ffe000; }
.search-hud-count {
  font-size: 18px; font-weight: bold; color: #ffffff;
  min-width: 24px; text-align: center;
}
.search-hud-sub { font-size: 11px; color: #80e890; letter-spacing: 0.5px; }
.search-spinner {
  width: 13px; height: 13px;
  border: 3px solid #404a68; border-top-color: #ffe000; border-radius: 50%;
  animation: search-spin 0.8s linear infinite;
}
@keyframes search-spin { to { transform: rotate(360deg); } }

/* КОУЧ: пошаговая подсказка тренажёра */
#coach {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + var(--tg-bot));
  z-index: 14;
  width: min(560px, 92vw);
  background: rgba(10, 16, 36, 0.88);
  border: 2px solid #303850;
  box-shadow: 3px 3px 0 #000;
  padding: 12px 16px;
  text-align: center;
}
#coach.coach-ok { border-color: #40d860; }
.coach-step { font-size: 10px; letter-spacing: 1px; color: #6a7494; }
.coach-do {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: bold; color: #ffffff; margin: 4px 0 3px;
  flex-wrap: wrap;
}
.coach-why { font-size: 12px; color: #b0bcd8; line-height: 1.45; }
.coach-cap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 9px;
  font-size: 13px; font-weight: bold; color: #0b1224;
  background: #ffe000; border: 2px solid #ffffff; box-shadow: 2px 2px 0 #000;
}
.coach-cap-touch { min-width: auto; letter-spacing: 1px; }
.coach-check { color: #40d860; font-size: 20px; font-weight: bold; }

/* Цвет чипа = цвет реальной тач-кнопки (только на тач; на десктопе клавиша жёлтая). */
.coach-cap-touch.coach-cap-pass   { background: #40a050; color: #fff; }
.coach-cap-touch.coach-cap-shoot  { background: #c83020; color: #fff; }
.coach-cap-touch.coach-cap-lob    { background: #1840a0; color: #fff; }
.coach-cap-touch.coach-cap-switch { background: #303850; color: #fff; }
.coach-cap-touch.coach-cap-stick  { background: #ffe000; color: #0b1224; }

/* На узких/низких экранах коуч компактнее, чтобы не налезать на тач-кнопки */
@media (max-height: 480px) {
  #coach { bottom: calc(8px + var(--tg-bot)); padding: 8px 12px; }
  .coach-do { font-size: 13px; }
  .coach-why { font-size: 11px; }
}

/* ===== Единый HUD тренажёра (#train-hud) + затемнение фона (#train-scrim) =====
   Десктоп: контейнер — пустышка (нулевой бокс), #search-hud/#coach остаются
   абсолютными (верх/низ) относительно #stage. Тач: контейнер становится
   позиционированной flex-колонкой сверху с учётом выреза — наложение невозможно. */
#train-hud { display: block; }
#train-hud.hidden { display: none; }

/* Затемнение поля на фазе ожидания (FIFA-вход); плавно гаснет к тренировке. */
#train-scrim {
  position: absolute; inset: 0; z-index: 13;
  background: rgba(6, 10, 26, 0.72);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
#train-scrim.on { opacity: 1; pointer-events: auto; }
#train-scrim.hidden { display: none; }

/* На фазе входа коуч скрыт (показываем только карточку поиска). */
#train-hud.intro #coach { display: none; }

/* Тач: контейнер — flex-колонка сверху, дети статичны → гарантированно без наложений. */
body.is-touch #train-hud {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px + var(--tg-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(440px, 92vw);
  transition: top 0.5s ease, transform 0.5s ease, gap 0.5s ease;
}
body.is-touch #train-hud #search-hud,
body.is-touch #train-hud #coach {
  position: static; transform: none;
  left: auto; right: auto; top: auto; bottom: auto;
  width: 100%;
}
/* Пилл поиска на тач — компактный, с подзаголовком (контекст: можно потренироваться) */
body.is-touch #search-hud { padding: 6px 14px; gap: 2px; border-radius: 14px; }
body.is-touch .search-hud-text { font-size: 11px; letter-spacing: 1px; }
body.is-touch .search-hud-count { font-size: 15px; }
body.is-touch .search-hud-sub {
  font-size: 10px; opacity: 0.9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90vw;
}
body.is-touch .coach-why {
  font-size: 10px; opacity: 0.8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Play-фаза на тач: HUD ужимаем в две тонкие полоски сверху, чтобы центр поля
   (где камера держит управляемого игрока) был свободен. Подзаголовок поиска
   убираем — контекст уже дан на интро-карточке. */
body.is-touch #train-hud:not(.intro) .search-hud-sub { display: none; }
body.is-touch #train-hud:not(.intro) #search-hud { padding: 3px 10px; }
body.is-touch #train-hud:not(.intro) #btn-search-cancel { padding: 3px 9px; font-size: 10px; }
/* Play-фаза: кнопки действий уже показаны (правый нижний кластер НАВЕС/ПАС/УДАР).
   Центрированная HUD-колонка не должна на них налезать в коротком landscape —
   резервируем место под кластер по обе стороны от центра (симметрично, чтобы остаться по центру). */
body.is-touch #train-hud:not(.intro) { width: min(440px, calc(100vw - 440px)); }
body.is-touch #train-hud:not(.intro) .search-hud-row { flex-wrap: nowrap; }
body.is-touch #train-hud:not(.intro) .search-hud-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.is-touch #coach { padding: 6px 12px; }
body.is-touch .coach-step { font-size: 9px; letter-spacing: 0.5px; }
body.is-touch .coach-do { font-size: 13px; margin: 1px 0 0; }
body.is-touch .coach-cap-touch { min-width: auto; height: 24px; padding: 0 8px; font-size: 12px; }

/* Фаза входа (.intro) на тач: крупная карточка поиска по центру экрана,
   затем снятие класса плавно ужимает её в плашку сверху (морф). */
body.is-touch #train-hud.intro {
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 0;
}
body.is-touch #train-hud.intro #search-hud {
  padding: 16px 22px; border-radius: 16px; border-width: 3px;
  background: rgba(10, 16, 36, 0.92);
}
body.is-touch #train-hud.intro .search-hud-text { font-size: 15px; letter-spacing: 2px; }
body.is-touch #train-hud.intro .search-hud-count { font-size: 22px; }
body.is-touch #train-hud.intro .search-hud-sub { font-size: 12px; opacity: 1; }
body.is-touch #train-hud.intro .search-spinner { width: 16px; height: 16px; }

/* Подсветка кнопки, которую сейчас нужно нажать (фокус внимания) */
.touch-btn.hl {
  border-color: #ffe000;
  animation: touch-pulse 1s ease-in-out infinite;
}
@keyframes touch-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 224, 0, 0.65); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 224, 0, 0); }
}

input {
  font-family: inherit;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  text-align: center;
  padding: 10px;
  width: 240px;
  background: #060a18;
  color: #ffe000;
  border: 3px solid #404a68;
  text-transform: uppercase;
}
input:focus { outline: none; border-color: #ffe000; }

/* ЛОББИ */
.lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
  max-width: 980px;
  width: 100%;
}
.room-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  flex-wrap: wrap;
  justify-content: center;
}
.room-info b { color: #ffe000; font-size: 22px; letter-spacing: 4px; }
#room-link { font-size: 11px; letter-spacing: 0; width: 300px; text-transform: none; }
.lobby-status { color: #80e890; font-size: 14px; min-height: 18px; }

.team-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}
.team-card {
  background: #101830;
  border: 3px solid #303850;
  padding: 12px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.1s;
}
.team-card:hover { border-color: #6080c0; }
.team-card.picked-me { border-color: #ffe000; box-shadow: 0 0 0 2px #ffe000; }
.team-card.picked-opp { border-color: #ff5050; opacity: 0.75; cursor: default; }
.team-badge {
  width: 52px; height: 52px;
  object-fit: contain;
  margin-bottom: 8px;
  image-rendering: auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.team-name { font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.team-motto { font-size: 10px; color: #8090b0; font-style: italic; margin-bottom: 8px; min-height: 24px; }
.team-roster { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: #b8c0d8; }
.team-tag {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: bold; color: #ffe000;
}
.picked-opp .team-tag { color: #ff5050; }

.lobby-actions { display: flex; gap: 12px; margin-top: 6px; }
.duel-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #b0bcd8; cursor: pointer; user-select: none;
}
.duel-toggle input { accent-color: #ffe000; width: 15px; height: 15px; cursor: pointer; }
.controls-hint {
  font-size: 11px;
  color: #6a7494;
  max-width: 640px;
  text-align: center;
  line-height: 1.6;
}
.controls-hint b { color: #8090b0; }

/* КОНЕЦ МАТЧА */
.panel-end { max-width: 460px; }
.end-score { font-size: 30px; font-weight: bold; letter-spacing: 3px; }
.end-series { font-size: 15px; color: #ffe000; }
.end-status { font-size: 13px; color: #80e890; min-height: 16px; }

/* Действия на экране конца матча: один явный primary + лёгкий тулбар соц-действий. */
.end-buttons { display: flex; flex-direction: column; gap: 14px; align-items: center; width: 100%; }
.end-buttons .btn-big { width: 100%; }

/* Тулбар соц-действий: горизонтально, визуально легче primary-кнопки. */
.end-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.end-action {
  font-family: inherit;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 88px;
  padding: 9px 12px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #aeb8d4;
  background: #161d33;
  border: 2px solid #2a3354;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: transform 0.05s, color 0.12s, border-color 0.12s, background 0.12s;
}
.end-action:hover:not(:disabled) { color: #fff; border-color: #4a5478; background: #1d2540; }
.end-action:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.end-action:disabled { opacity: 0.5; cursor: default; }
.end-action.hidden { display: none !important; }
.end-action-ico { width: 22px; height: 22px; color: #7f8ab0; }
.end-action:hover:not(:disabled) .end-action-ico { color: #ffe000; }
.end-action-ico svg { width: 100%; height: 100%; display: block; }
.end-action-cap { white-space: nowrap; }

/* «В меню» — тихая текстовая ссылка, не конкурирует с действиями. */
.end-exit {
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  color: #6a7494;
  background: none;
  border: none;
  box-shadow: none;
  padding: 6px 10px;
  margin-top: 2px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.end-exit:hover { color: #b0bcd8; }

/* ===== Экран конца режима «ВРАТАРЬ»: цепляющая карточка результата ===== */
#screen-gk-end {
  /* Полупрозрачный скрим: затемняет живое поле, но оставляет его видимым. */
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(255, 224, 0, 0.08), rgba(4, 8, 20, 0) 60%),
    rgba(5, 9, 22, 0.82);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
.panel.gk-end {
  max-width: 380px;
  gap: 12px;
  border-color: #ffe000;
  /* Слегка прозрачная панель — поле деликатно просвечивает по краям карточки. */
  background: linear-gradient(180deg, rgba(19, 28, 56, 0.94) 0%, rgba(12, 18, 40, 0.94) 100%);
  box-shadow: 6px 6px 0 #000, 0 0 0 100vmax rgba(4, 8, 20, 0.18);
}
.gk-end-glove {
  width: 78px;
  height: 78px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.6));
  animation: gk-glove-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes gk-glove-pop {
  0% { transform: scale(0.3) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.gk-end-rank {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #80f0ff;
  text-shadow: 2px 2px 0 #000;
}
.gk-end-scorebox { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gk-end-score {
  font-size: 72px;
  font-weight: bold;
  line-height: 0.9;
  color: #fff;
  text-shadow: 4px 4px 0 #000, 0 0 22px rgba(255, 224, 0, 0.35);
  animation: gk-score-pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes gk-score-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.gk-end-score-cap { font-size: 12px; letter-spacing: 4px; color: #8090b0; }
.gk-end-record {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #0b1224;
  background: #ffe000;
  padding: 5px 14px;
  box-shadow: 3px 3px 0 #000;
  animation: gk-record-flash 0.9s ease-in-out infinite alternate;
}
@keyframes gk-record-flash {
  0% { transform: rotate(-2deg) scale(1); }
  100% { transform: rotate(2deg) scale(1.05); }
}
.gk-end-record.hidden { display: none !important; }
.gk-end-stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 2px 0 4px;
}
.gk-end-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid #28304c;
}
.gk-end-stat-v { font-size: 22px; font-weight: bold; color: #ffe000; }
.gk-end-stat-l { font-size: 9px; letter-spacing: 2px; color: #8090b0; }

/* На коротких/мобильных landscape ужимаем карточку, чтобы не скроллить. */
@media (max-height: 480px) {
  .panel.gk-end { max-width: 460px; padding: 16px 28px; gap: 7px; }
  .gk-end-glove { width: 36px; height: 36px; }
  .gk-end-score { font-size: 46px; }
  .gk-end-rank { font-size: 18px; letter-spacing: 3px; }
  .gk-end-score-cap { font-size: 10px; }
  .gk-end-record { font-size: 12px; padding: 4px 12px; }
  .gk-end-stats { gap: 8px; margin: 0; }
  .gk-end-stat { padding: 6px 4px; }
  .gk-end-stat-v { font-size: 17px; }
  .panel.gk-end .end-buttons { gap: 8px; }
  .panel.gk-end .btn-big { padding: 10px; }
}
/* Совсем низкие экраны (≈360px landscape): прячем декоративную перчатку. */
@media (max-height: 400px) {
  .panel.gk-end { padding: 12px 26px; gap: 6px; }
  .gk-end-glove { display: none; }
  .gk-end-score { font-size: 40px; }
}

/* Гербы клубов под счётом (вместо моделек игроков) */
.end-figures {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  width: 100%;
  padding: 4px 0 2px;
}
.end-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  opacity: 0.5;
  filter: saturate(0.7);
  transition: opacity 0.2s, filter 0.2s;
}
.end-fig-badge {
  height: 84px;
  width: 84px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
}
.end-fig-name { font-size: 12px; letter-spacing: 1px; color: #8090b0; font-weight: bold; }
.end-fig-tag {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #0b1224;
  background: #ffe000;
  border-radius: 3px;
  padding: 1px 6px;
  opacity: 0;
  min-height: 13px;
}
/* «Моя» команда: ярче, крупнее, с подсвеченной плашкой-именем и бейджем YOU */
.end-fig.mine {
  opacity: 1;
  filter: none;
}
.end-fig.mine .end-fig-badge {
  height: 104px;
  width: 104px;
  filter: drop-shadow(0 0 10px var(--mine, #ffe000)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
}
.end-fig.mine .end-fig-name { color: var(--mine, #ffe000); }
.end-fig.mine .end-fig-tag { opacity: 1; background: var(--mine, #ffe000); }

/* Таблица сравнения статов */
.end-stats { display: flex; flex-direction: column; gap: 3px; width: 100%; font-size: 13px; }
.stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.stat-row.stat-head { font-weight: bold; letter-spacing: 1px; border-bottom: 1px solid #2a3a5a; padding-bottom: 4px; margin-bottom: 2px; }
.stat-row .sv { font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 3px; }
.stat-row .sv-l { text-align: right; }
.stat-row .sv-r { text-align: left; }
.stat-row .sl { color: #8090b0; font-size: 11px; letter-spacing: 1px; text-align: center; white-space: nowrap; }
.stat-row .sv.win { color: #ffe000; }
/* Подсветка колонки команды, за которую играл игрок */
.end-stats.me-left .stat-row .sv-l,
.end-stats.me-right .stat-row .sv-r {
  background: color-mix(in srgb, var(--mine, #ffe000) 14%, transparent);
  font-weight: bold;
}

/* ===================== СОСТАВЫ КОМАНД (интро) ===================== */
/* Минималистичный тёмный оверлей: две панели + VS. Анимация A (broadcast slide-in). */
#screen-lineup {
  gap: 14px;
  padding: 16px;
  /* затемнение поверх живого поля; чуть плотнее дефолта .screen для чистого минимала */
  background: rgba(6, 10, 26, 0.95);
}
.lineup-title {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 6px;
  color: #ffe000;
  text-shadow: 2px 2px 0 #000;
  opacity: 0;
}
.lineup-subtitle {
  margin-top: -6px;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #80e890;
  text-shadow: 1px 1px 0 #000;
  opacity: 0;
}
.lineup-wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 920px;
}
.lineup-panel {
  flex: 1 1 0;
  min-width: 0;
  background: #0d1428;
  border: 2px solid var(--accent, #303850);
  box-shadow: 4px 4px 0 #000;
  display: flex;
  flex-direction: column;
  opacity: 0;
}
.lineup-left { border-left-width: 5px; }
.lineup-right { border-right-width: 5px; }

.lineup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent, #303850) 22%, #0d1428);
  border-bottom: 2px solid color-mix(in srgb, var(--accent, #303850) 50%, #0d1428);
}
.lineup-right .lineup-head { flex-direction: row-reverse; text-align: right; }
.lineup-badge {
  width: 66px; height: 66px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: auto;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  padding: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #6080c0) 60%, transparent);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  opacity: 0;
}
.lineup-head-text { min-width: 0; flex: 1 1 auto; }
.lineup-team-name {
  font-size: 16px; font-weight: bold; letter-spacing: 1px;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lineup-team-motto {
  font-size: 10px; font-style: italic; color: #8090b0;
  margin-top: 2px; line-height: 1.3;
}

.lineup-roster { display: flex; flex-direction: column; padding: 4px 6px 6px; }
.lineup-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  border-top: 1px solid #18213c;
  opacity: 0; /* проявляется по очереди (animation-delay из JS) */
}
.lineup-row:first-child { border-top: none; }
.lineup-right .lineup-row { direction: rtl; }
.lineup-right .lineup-row > * { direction: ltr; }

.lineup-fig {
  height: 34px; width: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.lineup-num {
  font-size: 13px; font-weight: bold;
  width: 26px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: #0b1224;
  background: var(--accent, #6080c0);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.lineup-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lineup-right .lineup-meta { text-align: right; }
.lineup-name {
  font-size: 12px; font-weight: bold; color: #e8e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lineup-role { font-size: 9px; letter-spacing: 1px; color: #7a86a8; font-weight: bold; }
.lineup-stats { display: flex; gap: 5px; flex: 0 0 auto; }
.lineup-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 34px; }
.lineup-stat i {
  font-style: normal; font-size: 7px; letter-spacing: 0.5px; color: #6a7494;
}
.lineup-bar { width: 100%; height: 4px; background: #1b2440; border-radius: 2px; overflow: hidden; }
.lineup-bar b { display: block; height: 100%; background: var(--accent, #6080c0); }

.lineup-vs {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
}
.lineup-vs-text {
  font-size: 40px; font-weight: bold; letter-spacing: 2px;
  color: #fff;
  text-shadow: 3px 3px 0 #c03020, 6px 6px 0 #1840a0;
  opacity: 0;
}
.lineup-vs-sub {
  font-size: 10px; letter-spacing: 2px; color: #ffe000;
  border: 1px solid #3a4564; border-radius: 3px; padding: 2px 8px;
  opacity: 0;
}

/* --- Анимация A: broadcast slide-in (запускается классом .lineup-play) --- */
.lineup-play .lineup-title { animation: luTitle 0.6s ease-out 0.15s forwards; }
.lineup-play .lineup-subtitle { animation: luFade 0.5s ease-out 0.45s forwards; }
.lineup-play .lineup-left { animation: luSlideL 0.65s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.lineup-play .lineup-right { animation: luSlideR 0.65s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.lineup-play .lineup-badge { animation: luBadge 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.55s forwards; }
.lineup-play .lineup-vs-text { animation: luVs 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 1.15s forwards; }
.lineup-play .lineup-vs-sub { animation: luFade 0.45s ease-out 1.55s forwards; }
.lineup-play .lineup-row { animation: luRow 0.5s ease-out both; }

/* --- Выход: панели разъезжаются (класс .lineup-exit) --- */
.lineup-exit .lineup-left { animation: luOutL 0.5s ease-in forwards; }
.lineup-exit .lineup-right { animation: luOutR 0.5s ease-in forwards; }
.lineup-exit .lineup-vs,
.lineup-exit .lineup-subtitle,
.lineup-exit .lineup-title { animation: luOut 0.45s ease-in forwards; }

@keyframes luTitle { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes luSlideL { from { opacity: 0; transform: translateX(-120%); } to { opacity: 1; transform: none; } }
@keyframes luSlideR { from { opacity: 0; transform: translateX(120%); } to { opacity: 1; transform: none; } }
@keyframes luBadge { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes luVs { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes luFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes luRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes luOut { to { opacity: 0; } }
@keyframes luOutL { to { opacity: 0; transform: translateX(-120%); } }
@keyframes luOutR { to { opacity: 0; transform: translateX(120%); } }

@media (max-width: 720px) {
  .lineup-stats { display: none; }
  .lineup-team-name { font-size: 13px; }
  .lineup-vs-text { font-size: 28px; }
  .lineup-badge { width: 50px; height: 50px; }
}

/* ПОДСКАЗКА В ИГРЕ */
#game-help {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.45);
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 860px) {
  .team-cards { grid-template-columns: repeat(2, 1fr); }
  .logo-fufa { font-size: 56px; }
  .logo-fufa span { font-size: 40px; }
  .menu-buttons { width: 300px; }
}

/* ===================== СЕНСОРНОЕ УПРАВЛЕНИЕ ===================== */

/* Оверлей существует только на тач-устройствах (создаётся в touch.js). */
#touch-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;                 /* выше canvas/подсказок, ниже экранов меню (z-index:10) */
  pointer-events: none;       /* кликабельны только активные зоны/кнопки */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#touch-overlay.hidden { display: none !important; }
body:not(.is-touch) #touch-overlay { display: none !important; }

/* Левая половина — зона плавающего джойстика */
.touch-joy-zone {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 45%;
  pointer-events: auto;
  touch-action: none;
}
.touch-joy-base {
  position: absolute;
  width: 124px; height: 124px;
  margin-left: -62px; margin-top: -62px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
}
.touch-joy-base.hidden { display: none; }
.touch-joy-knob {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255, 224, 0, 0.85);
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  will-change: transform;
}

/* Правая зона — кластер кнопок действий (триада, как в PES) */
.touch-actions {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  width: 184px; height: 184px;
  pointer-events: none;
}
.touch-btn {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  font-family: inherit;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  color: #ffffff;
  background: rgba(24, 64, 160, 0.78);
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.touch-btn:disabled { opacity: 0.4; }
.touch-btn.dim { opacity: 0.4; }
.touch-btn.pressed { transform: scale(0.9); background: rgba(40, 88, 208, 0.95); }

/* раскладка триады внутри .touch-actions (диаметр 76px) */
.touch-btn-shoot, .touch-btn-pass, .touch-btn-lob { width: 76px; height: 76px; }
.touch-btn-shoot { right: 0;   top: 54px; background: rgba(200, 48, 32, 0.82); } /* УДАР — правее */
.touch-btn-pass  { left: 0;    top: 54px; background: rgba(64, 160, 80, 0.82); } /* ПАС — левее */
.touch-btn-lob   { left: 54px; top: 0;    } /* НАВЕС — сверху */

/* кнопка смены игрока — отдельно слева от кластера */
.touch-btn-switch {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 210px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
  width: 64px; height: 64px;
  font-size: 12px;
  background: rgba(48, 56, 80, 0.82);
}

/* На тач-устройствах прячем клавиатурные подсказки (коуч тренажёра НЕ прячем — он адаптируется) */
body.is-touch .controls-hint,
body.is-touch #game-help { display: none !important; }

/* Экран «поверни устройство»: видимость решает JS по реальному viewport.
   Стили лежат на самом элементе, чтобы overlay работал и в Telegram-клиентах,
   где `is-touch` может появиться позже обычных resize/orientation событий. */
#rotate-notice {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(6, 10, 26, 0.96);
  text-align: center;
}
@media (orientation: portrait) {
  body.is-touch #rotate-notice,
  body.in-telegram #rotate-notice { display: flex; }
}
.rotate-ico { font-size: 64px; color: #ffe000; animation: rotate-spin 2.4s linear infinite; }
.rotate-text { font-size: 18px; font-weight: bold; letter-spacing: 2px; line-height: 1.6; }
.rotate-text span { font-size: 12px; font-weight: normal; color: #80e890; letter-spacing: 1px; }
@keyframes rotate-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ===================== АДАПТАЦИЯ МЕНЮ ПОД МОБИЛКУ ===================== */

/* Карточки команд — адаптив по реальной ширине, а не жёсткие 4 колонки */
.team-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Низкая высота (телефон в landscape): ужимаем меню/лобби, чтобы влезало без скролла */
@media (max-height: 480px) {
  .screen { justify-content: flex-start; padding: 10px 0; }
  .logo { margin-bottom: 14px; }
  .logo-fufa { font-size: 40px; letter-spacing: 4px; text-shadow: 3px 3px 0 #c03020, 6px 6px 0 #1840a0; }
  .logo-fufa span { font-size: 28px; }
  .logo-sub { font-size: 11px; margin-top: 6px; }
  .menu-buttons { width: min(380px, 84vw); gap: 10px; }
  .btn-cta { font-size: 19px; padding: 17px 20px; }
  .menu-footer { margin-top: 16px; }
  .lobby { gap: 8px; padding: 10px; }
  .panel { padding: 18px 24px; gap: 12px; }
  .team-card { padding: 8px; }
  .team-roster { font-size: 9px; }
  .duel-toggle { font-size: 11px; }
  .controls-hint { display: none; }

  /* Экран конца матча на низком ландшафте: компактнее, чтобы влезало без скролла. */
  .panel-end { gap: 8px; }
  .panel-end h1 { font-size: 24px; letter-spacing: 2px; }
  .end-score { font-size: 19px; letter-spacing: 2px; }
  .end-figures { gap: 16px; padding: 0; }
  .end-fig { gap: 3px; }
  .end-fig-badge { height: 50px; width: 50px; }
  .end-fig.mine .end-fig-badge { height: 60px; width: 60px; }
  .end-fig-name { font-size: 10px; }
  .end-fig-tag { font-size: 9px; min-height: 11px; }
  .end-stats { font-size: 11px; gap: 1px; }
  .stat-row .sl { font-size: 10px; }
  .end-series { font-size: 12px; }
  .end-buttons { gap: 8px; }
  .end-buttons .btn-big { font-size: 15px; padding: 11px 18px; }
  .end-action { min-width: 76px; padding: 6px 10px; font-size: 9px; }
  .end-action-ico { width: 18px; height: 18px; }
  .end-exit { font-size: 11px; padding: 4px 8px; }
}

/* Низкий И широкий экран (телефон в ландшафте): экран конца матча — в две
   колонки (слева итог+гербы+кнопки, справа таблица статов), чтобы всё влезало
   по высоте без скролла. На портрете/высоком экране остаётся обычный стек. */
@media (max-height: 480px) and (min-width: 600px) {
  .panel-end {
    max-width: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title  title"
      "score  score"
      "figs   stats"
      "series stats"
      "status stats"
      "btns   btns"
      "exit   exit";
    column-gap: 28px;
    row-gap: 6px;
    align-items: center;
    justify-items: center;
  }
  .panel-end > #end-title { grid-area: title; }
  .panel-end > #end-score { grid-area: score; }
  .panel-end > #end-figures { grid-area: figs; }
  .panel-end > #end-stats { grid-area: stats; align-self: center; }
  .panel-end > #end-series { grid-area: series; }
  .panel-end > #end-status { grid-area: status; }
  .panel-end > .end-buttons { grid-area: btns; }
  .panel-end > #btn-exit { grid-area: exit; }
}

/* Тач-устройства: увеличенные тап-таргеты в меню */
body.is-touch .btn { min-height: 48px; }
body.is-touch .team-card { min-height: 44px; }
body.is-touch input,
body.is-touch select { min-height: 44px; }

/* ===================== РЕЖИМ «ЧМ 2026» ===================== */

/* Кнопка в меню: полная ширина, с кубком и бейджем «продолжить» */
.btn-wc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: #ffe000;
}
.btn-wc-cup { font-size: 16px; }
.wc-menu-badge {
  font-size: 9px;
  letter-spacing: 1px;
  color: #0b1224;
  background: #ffe000;
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* Общий каркас экранов ЧМ */
.wc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  width: 100%;
  max-width: 860px;
}
.wc-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #ffe000;
  text-shadow: 2px 2px 0 #000;
  text-align: center;
}
.wc-hint { font-size: 11px; color: #8090b0; text-align: center; line-height: 1.5; }
.wc-back { margin-top: 4px; }

/* --- Выбор сборной: грид 32 карточек --- */
.wc-pick-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
  width: 100%;
}
.wc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 2px 5px;
  background: #101830;
  border: 2px solid #303850;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.05s;
}
.wc-card:hover { border-color: #6080c0; }
.wc-card.picked { border-color: #ffe000; box-shadow: 0 0 0 2px #ffe000; transform: translateY(-2px); }
.wc-card-flag { font-size: 26px; line-height: 1.1; }
.wc-card-short { font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #e8e8f0; }
.wc-card-stars { font-size: 8px; letter-spacing: 1px; color: #ffe000; }
.wc-card-stars .off { color: #3a4564; }

/* Панель раскрытой сборной (выбор) и следующего соперника (сетка) */
.wc-detail {
  width: 100%;
  max-width: 560px;
  background: #0d1428;
  border: 2px solid #3a4564;
  box-shadow: 4px 4px 0 #000;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wc-detail-head { display: flex; align-items: center; gap: 12px; }
.wc-detail-flag { font-size: 40px; line-height: 1; }
.wc-detail-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wc-detail-name { font-size: 16px; font-weight: bold; letter-spacing: 1px; }
.wc-detail-stars { font-size: 12px; letter-spacing: 2px; color: #ffe000; }
.wc-detail-stars .off { color: #3a4564; }
.wc-detail-stars .wc-hard { font-size: 10px; color: #ff8850; letter-spacing: 1px; margin-left: 8px; }
.wc-next-cap { font-size: 10px; letter-spacing: 2px; color: #80e890; font-weight: bold; }

/* Ростер: 5 строк (номер, имя+роль, мини-бары статов) */
.wc-roster { display: flex; flex-direction: column; }
.wc-p-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 2px;
  border-top: 1px solid #18213c;
}
.wc-p-num {
  font-size: 11px; font-weight: bold;
  width: 24px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #0b1224;
  background: var(--accent, #6080c0);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.wc-p-meta { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.wc-p-name { font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-p-role { font-size: 9px; letter-spacing: 1px; color: #7a86a8; font-weight: bold; }
.wc-p-stats { display: flex; gap: 5px; }
.wc-p-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 34px; }
.wc-p-stat i { font-style: normal; font-size: 7px; letter-spacing: 0.5px; color: #6a7494; }
.wc-p-bar { width: 100%; height: 4px; background: #1b2440; border-radius: 2px; overflow: hidden; }
.wc-p-bar b { display: block; height: 100%; background: var(--accent, #6080c0); }

/* --- Сетка турнира: два крыла по 4 колонки (1/16→полуфинал), финал в центре;
       горизонтальный скролл на мобильных --- */
.wc-bracket {
  display: flex;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
/* Колонки сжимаются до 64px, чтобы оба крыла влезали без скролла где возможно */
.wc-round-col {
  flex: 1 1 96px;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 4px;
}
.wc-round-col.center { align-self: stretch; justify-content: center; gap: 8px; }
.wc-round-col.center .wc-match { border-color: #3a4468; }
.wc-round-cap {
  font-size: 8px;
  letter-spacing: 1px;
  color: #6a7494;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 2px;
}
.wc-match {
  background: #101830;
  border: 1px solid #262f4e;
  border-radius: 3px;
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wc-match.mine { border-color: var(--accent, #ffe000); box-shadow: 0 0 0 1px var(--accent, #ffe000); }
.wc-match.current { animation: wc-pulse 1.2s ease-in-out infinite; }
@keyframes wc-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--accent, #ffe000); }
  50%      { box-shadow: 0 0 8px 2px var(--accent, #ffe000); }
}
.wc-trow {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  line-height: 1.35;
}
.wc-trow .wc-flag { font-size: 12px; }
.wc-trow .wc-short { flex: 1 1 auto; font-weight: bold; letter-spacing: 0.5px; color: #b8c0d8; white-space: nowrap; overflow: hidden; }
.wc-trow .wc-score { font-weight: bold; color: #ffffff; font-variant-numeric: tabular-nums; }
.wc-trow.winner .wc-short { color: #ffe000; }
.wc-trow.loser { opacity: 0.45; }
.wc-trow.me .wc-short { color: var(--accent, #ffe000); }
.wc-trow.tbd { opacity: 0.4; }
/* анимация «доигрывания» чужих результатов: счёт проявляется с прыжком */
.wc-match.reveal { animation: wc-reveal 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes wc-reveal {
  0% { transform: scale(0.92); opacity: 0.2; }
  100% { transform: scale(1); opacity: 1; }
}

.wc-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* --- Экран чемпиона --- */
.panel.wc-champ {
  max-width: 420px;
  border-color: #ffe000;
  gap: 10px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 224, 0, 0.12), rgba(16, 24, 48, 0) 60%),
    #101830;
}
.panel.wc-champ h1 { color: #ffe000; font-size: 32px; letter-spacing: 3px; }
.wc-champ-cup {
  font-size: 84px;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
  animation: wc-cup-pop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes wc-cup-pop {
  0% { transform: scale(0.2) rotate(-14deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.wc-champ-team { font-size: 20px; font-weight: bold; letter-spacing: 1px; }
.wc-champ-titles {
  font-size: 12px; font-weight: bold; letter-spacing: 2px;
  color: #0b1224; background: #ffe000;
  padding: 3px 12px; box-shadow: 2px 2px 0 #000;
}
.wc-champ-path-cap { font-size: 10px; letter-spacing: 2px; color: #80e890; font-weight: bold; }
.wc-champ-path { display: flex; flex-direction: column; gap: 2px; width: 100%; font-size: 12px; }
.wc-champ-path .wc-path-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.wc-champ-path .wc-path-round { text-align: right; color: #8090b0; font-size: 10px; letter-spacing: 1px; }
.wc-champ-path .wc-path-score { font-weight: bold; color: #ffe000; font-variant-numeric: tabular-nums; }
.wc-champ-path .wc-path-opp { text-align: left; color: #b8c0d8; }

/* Флаг-эмодзи на экране конца матча (у сборных нет badge.png) */
.end-fig-flag { font-size: 64px; line-height: 84px; height: 84px; }
.end-fig.mine .end-fig-flag { font-size: 80px; line-height: 104px; height: 104px; }

/* Флаг вместо герба на экране составов */
.lineup-flag {
  width: 66px; height: 66px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; line-height: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #6080c0) 60%, transparent);
  opacity: 0;
}
.lineup-play .lineup-flag { animation: luBadge 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.55s forwards; }

/* Адаптация ЧМ-экранов под мобильный landscape */
@media (max-width: 860px) {
  .wc-pick-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-height: 480px) {
  .wc-wrap { padding: 8px 10px; gap: 6px; }
  .wc-title { font-size: 15px; letter-spacing: 2px; }
  .wc-hint { font-size: 10px; }
  .wc-card-flag { font-size: 20px; }
  .wc-card { padding: 4px 2px 3px; }
  .wc-detail { padding: 7px 10px; gap: 5px; }
  .wc-detail-flag { font-size: 30px; }
  .wc-detail-name { font-size: 13px; }
  .wc-p-stats { display: none; }
  .wc-round-col { flex-basis: 80px; min-width: 56px; }
  .wc-trow { font-size: 9px; gap: 3px; }
  .wc-trow .wc-flag { font-size: 11px; }
  .panel.wc-champ { gap: 6px; padding: 14px 24px; }
  .wc-champ-cup { font-size: 52px; }
  .panel.wc-champ h1 { font-size: 22px; }
  .wc-champ-team { font-size: 15px; }
  .lineup-flag { width: 50px; height: 50px; font-size: 32px; }
}

/* ===================== TELEGRAM MINI APP ===================== */
/* --tg-vh и --tg-top проставляет js/tg.js из viewportStableHeight/contentSafeAreaInset. */
:root { --tg-vh: 100dvh; --tg-top: 0px; --tg-bot: 0px; }

/* Высота сцены — по стабильной высоте вьюпорта Telegram (без прыжков при появлении клавиатуры).
   В Telegram ширину держим как 100vw (вырез/инсеты обрабатывает сам клиент), перебивая --app-vw. */
body.in-telegram #stage { height: var(--tg-vh); width: 100vw; }

/* Экраны меню/лобби/конца матча не должны заезжать под верхнюю панель Telegram. */
body.in-telegram .screen { padding-top: var(--tg-top); }

/* Кнопка смены игрока в тач-раскладке — приподнять над нижней кромкой Telegram. */
body.in-telegram .touch-btn-switch {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 44px);
}