/* 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[data-brand="uppercase"] { font-size: clamp(48px, 8vw, 82px); letter-spacing: 4px; }
.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; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Компактные настройки главного меню: тот же popover-паттерн, что в
   Penalty Rush iOS. Язык, раскладка джойстика и Telegram consent больше не
   конкурируют с основными режимами игры. */
.menu-settings {
  position: absolute;
  top: calc(14px + var(--tg-top));
  right: 14px;
  z-index: 18;
}
.menu-settings-btn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 25px;
  line-height: 1;
  color: #ffffff;
  background: rgba(28, 40, 73, 0.94);
  border: 2px solid #7381aa;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}
.menu-settings-btn:hover,
.menu-settings-btn[aria-expanded="true"] {
  color: #ffe000;
  background: #31436f;
  border-color: #80e8ff;
}
.menu-settings-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.menu-settings-panel {
  position: absolute;
  top: 54px;
  right: 0;
  width: min(292px, calc(100vw - 28px));
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: rgba(11, 18, 38, 0.98);
  border: 2px solid #7381aa;
  box-shadow: 4px 4px 0 #000;
}
.menu-settings-row {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.menu-settings-label {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #8a92b0;
  text-align: left;
}
.menu-settings-panel .lang-switch {
  position: static;
  display: flex;
  gap: 5px;
  z-index: auto;
}
.menu-settings-panel .lang-btn { min-width: 48px; }
#menu-settings-panel #lefty-switch,
.menu-settings-panel .settings-action {
  position: static;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.25;
  letter-spacing: 1px;
  text-align: center;
  color: #aeb8d4;
  background: #1a2138;
  border: 2px solid #303850;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
}
#menu-settings-panel #lefty-switch:hover,
.menu-settings-panel .settings-action:hover { color: #ffffff; border-color: #4a5478; }
#menu-settings-panel #lefty-switch.on,
.menu-settings-panel .settings-action.on {
  color: #0b1224;
  background: #ffe000;
  border-color: #ffffff;
}

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА */
.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; }

/* Reddit full game: three clear paths, with web multiplayer kept as a normal
   menu mode rather than a competing launch-card CTA. */
html[data-surface="reddit-full-game"] #screen-menu .logo-sub { display: none; }
html[data-surface="reddit-full-game"] #screen-menu .logo { margin-bottom: 28px; }
html[data-surface="reddit-full-game"] #screen-menu .menu-buttons {
  width: min(420px, calc(100vw - 36px));
  gap: 12px;
}
html[data-surface="reddit-full-game"] #screen-menu .menu-buttons .btn { min-height: 54px; }
html[data-surface="reddit-full-game"] #screen-menu #btn-quick {
  min-height: 68px;
  font-size: 22px;
}
html[data-surface="reddit-full-game"] #screen-menu #btn-friend-menu {
  color: #ff9bdb;
  border-color: #ff9bdb;
}
html[data-surface="reddit-full-game"] #screen-menu #btn-friend-menu:hover:not(:disabled) {
  color: #ffffff;
  background: #713d78;
}

/* Reddit mobile WebView часто остаётся portrait даже когда пользователь
   физически переворачивает телефон. Меню не блокируем: после PLAY активируем
   shell с landscape-размерами и поворачиваем только игровую сцену. Это даёт
   16:9 gameplay и touch controls даже без поддержки Screen Orientation API. */
html[data-surface="reddit-full-game"] #rotate-notice {
  display: none !important;
}
html.reddit-force-landscape,
html.reddit-force-landscape body {
  overflow: hidden !important;
}
html.reddit-force-landscape #stage {
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  width: var(--reddit-shell-width, 100dvh);
  height: var(--reddit-shell-height, 100dvw);
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  overflow: hidden;
}
html.reddit-force-landscape #stage > .screen {
  overflow: hidden;
}
html.reddit-force-landscape #stage > #touch-overlay {
  touch-action: none;
}
/* В portrait WebView 100vw остаётся шириной телефона. Для ширины коуча
   используем логическую ширину landscape shell, а позицию и ориентацию
   оставляем общими с iOS: сверху по центру игровой сцены. Весь HUD уже
   поворачивается вместе с #stage, отдельная компенсация ему не нужна. */
html.reddit-force-landscape body.is-touch #train-hud:not(.intro) {
  width: min(440px, max(280px, calc(var(--reddit-shell-width, 844px) - 440px)));
}

.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; }

/* In-app pre-permission поверх меню/результата. Системный Telegram prompt
   открывается только следующим кликом по основной кнопке. */
.app-dialog {
  position: absolute;
  inset: 0;
  z-index: 32;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(18px, calc(env(safe-area-inset-top, 0px) + var(--tg-top)))
    max(18px, env(safe-area-inset-right, 0px))
    max(18px, calc(env(safe-area-inset-bottom, 0px) + var(--tg-bot)))
    max(18px, env(safe-area-inset-left, 0px));
  background: rgba(6, 10, 26, 0.86);
}
.app-dialog-panel {
  width: min(460px, 100%);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: #101830;
  border: 3px solid #ffe000;
  box-shadow: 6px 6px 0 #000;
}
.app-dialog-panel h2 {
  color: #ffe000;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 2px;
}
.app-dialog-panel p {
  color: #c8d0e8;
  font-size: 13px;
  line-height: 1.5;
}
.app-dialog-actions {
  width: 100%;
  display: grid;
  gap: 9px;
}
.app-dialog-actions .btn { width: 100%; }
.tg-optin-icon { font-size: 36px; line-height: 1; }

@media (max-height: 480px) and (orientation: landscape) {
  .app-dialog-panel {
    width: min(620px, 100%);
    padding: 15px 22px;
    gap: 8px;
  }
  .app-dialog-panel h2 { font-size: 18px; }
  .app-dialog-panel p { font-size: 11px; line-height: 1.35; }
  .app-dialog-actions {
    grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr);
  }
  .app-dialog-actions .btn { min-height: 42px; padding: 8px 12px; font-size: 11px; }
  .tg-optin-icon { font-size: 28px; }
}

/* ПОИСК СОПЕРНИКА: лёгкая плашка поверх живого тренажёра (не перекрывает поле) */
#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; }
.room-join-help { display: 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);
}

/* ---------- Режим для левшей: зеркальная раскладка ----------
   Джойстик справа, кнопки слева. Зеркалим позиционированием (left/right),
   НЕ transform: scaleX(-1) — иначе отзеркалятся подписи кнопок.
   Внутри триады УДАР/ПАС тоже меняются местами: у левши дуга большого пальца
   идёт с другой стороны, УДАР должен остаться крайним (самым доступным). */
#touch-overlay.lefty .touch-joy-zone { left: auto; right: 0; }
#touch-overlay.lefty .touch-actions {
  right: auto;
  left: calc(env(safe-area-inset-left, 0px) + 18px);
}
#touch-overlay.lefty .touch-btn-shoot { right: auto; left: 0; }
#touch-overlay.lefty .touch-btn-pass  { left: auto; right: 0; }
#touch-overlay.lefty .touch-btn-switch {
  right: auto;
  left: calc(env(safe-area-inset-left, 0px) + 210px);
}

/* Чип-переключатель раскладки в главном меню (виден только на таче).
   Тот же визуальный язык, что .lang-switch, но в левом верхнем углу. */
.lefty-switch {
  position: absolute;
  top: calc(14px + var(--tg-top));
  left: 14px;
  z-index: 12;
  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;
}
.lefty-switch:hover { color: #ffffff; border-color: #4a5478; }
.lefty-switch.on { background: #ffe000; color: #0b1224; border-color: #ffffff; }
body:not(.is-touch) .lefty-switch { display: none !important; }

/* Одноразовый тост про режим для левшей (первый матч на таче) */
#lefty-toast {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 120px);
  transform: translateX(-50%);
  z-index: 7;
  max-width: min(420px, 84vw);
  padding: 10px 16px;
  background: rgba(10, 16, 36, 0.92);
  border: 2px solid rgba(255, 224, 0, 0.7);
  border-radius: 12px;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#lefty-toast.show { opacity: 1; }

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

/* Экран «поверни устройство»: видимость решает JS по реальному viewport.
   Стили лежат на самом элементе, чтобы overlay работал и в Telegram-клиентах,
   где `is-touch` может появиться позже обычных resize/orientation событий. */
.online-panel {
  width: min(520px, calc(100vw - 32px));
  text-align: center;
}
.online-panel p {
  margin: 12px 0 18px;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
}
.online-room-code {
  margin: 0 auto 16px;
  padding: 10px 14px;
  width: fit-content;
  border: 1px solid rgba(255,224,0,.55);
  border-radius: 8px;
  color: #ffe000;
  font-weight: 800;
  letter-spacing: .04em;
}
.online-actions {
  display: grid;
  gap: 8px;
}

#rotate-notice {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  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); } }

/* Отдельный iOS target запускается системой только в Landscape Left/Right.
   Нативному приложению не нужен блокирующий web-overlay «поверните телефон»:
   главный экран сразу укладывается в safe area короткого iPhone landscape. */
html.runtime-native #rotate-notice { display: none !important; }
html.runtime-native #screen-menu {
  justify-content: center;
  overflow: hidden;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
}
html.runtime-native #screen-menu .lang-switch {
  display: none !important;
}
html.runtime-native #room-link { display: none; }
html.runtime-native .room-join-help {
  display: block;
  flex: 1 1 100%;
  max-width: 620px;
  color: #a8b4d0;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.4px;
  text-align: center;
}
html.runtime-native #screen-menu .lefty-switch {
  top: max(10px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
}
html.runtime-native #screen-menu .menu-settings {
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
}
html.runtime-native #menu-settings-panel #lefty-switch {
  position: static;
  inset: auto;
}
html.runtime-native #screen-menu .logo { margin-bottom: 12px; }
html.runtime-native #screen-menu .logo-fufa[data-brand="uppercase"] {
  font-size: clamp(42px, 13vh, 60px);
  line-height: 0.95;
  letter-spacing: 4px;
  text-shadow: 3px 3px 0 #c03020, 6px 6px 0 #1840a0;
}
html.runtime-native #screen-menu .logo-sub {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.2;
}
html.runtime-native #screen-menu .menu-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  width: min(
    560px,
    calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 80px)
  );
}
html.runtime-native #screen-menu #btn-quick { grid-column: 1 / -1; }
html.runtime-native #screen-menu #btn-friend-menu { grid-column: 1 / -1; }
html.runtime-native #screen-menu .btn-cta {
  min-height: 54px;
  padding: 12px 20px;
  font-size: 20px;
}
html.runtime-native #screen-menu .btn-sec {
  min-height: 48px;
  padding: 9px 10px;
}

@media (max-height: 390px) and (orientation: landscape) {
  html.runtime-native #screen-menu .logo { margin-bottom: 9px; }
  html.runtime-native #screen-menu .logo-fufa[data-brand="uppercase"] { font-size: 42px; }
  html.runtime-native #screen-menu .logo-sub { margin-top: 5px; font-size: 10px; }
  html.runtime-native #screen-menu .menu-buttons { gap: 7px; }
  html.runtime-native #screen-menu .btn-cta { min-height: 50px; padding-block: 9px; }
  html.runtime-native #screen-menu .btn-sec { min-height: 44px; padding-block: 7px; }
}

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

/* Карточки команд — адаптив по реальной ширине, а не жёсткие 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; }
}

/* Full-game iOS: результат Penalty Rush должен целиком помещаться в короткий
   landscape viewport. Вместо вертикальной desktop-карточки используем две
   колонки и учитываем safe area с обеих сторон Dynamic Island. */
@media (max-height: 480px) and (orientation: landscape) {
  html.runtime-native #screen-gk-end {
    justify-content: center;
    overflow: hidden;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(18px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(18px, env(safe-area-inset-left, 0px));
  }
  html.runtime-native .panel.gk-end {
    width: min(700px, 100%);
    max-width: 700px;
    max-height: 100%;
    padding: 14px 22px;
    gap: 7px 20px;
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(260px, 1.2fr);
    grid-template-areas:
      "glove rank"
      "score record"
      "score stats"
      "status actions"
      "exit actions";
    align-items: center;
  }
  html.runtime-native .gk-end-glove {
    grid-area: glove;
    display: block;
    width: 42px;
    height: 42px;
    justify-self: center;
  }
  html.runtime-native .gk-end-rank {
    grid-area: rank;
    font-size: 17px;
    letter-spacing: 3px;
  }
  html.runtime-native .gk-end-scorebox { grid-area: score; }
  html.runtime-native .gk-end-score { font-size: 54px; }
  html.runtime-native .gk-end-score-cap { font-size: 9px; }
  html.runtime-native .gk-end-record {
    grid-area: record;
    font-size: 11px;
    padding: 4px 10px;
  }
  html.runtime-native .gk-end-stats {
    grid-area: stats;
    margin: 0;
    gap: 6px;
  }
  html.runtime-native .gk-end-stat { padding: 5px 3px; }
  html.runtime-native .gk-end-stat-v { font-size: 16px; }
  html.runtime-native #gk-end-status { grid-area: status; }
  html.runtime-native .panel.gk-end > .end-buttons {
    grid-area: actions;
    gap: 6px;
  }
  html.runtime-native .panel.gk-end .btn-big {
    min-height: 44px;
    padding: 8px 14px;
  }
  html.runtime-native .panel.gk-end .end-action {
    min-width: 78px;
    min-height: 42px;
    padding: 5px 9px;
  }
  html.runtime-native .panel.gk-end .end-action-ico { width: 17px; height: 17px; }
  html.runtime-native #gk-exit {
    grid-area: exit;
    margin: 0;
    justify-self: center;
  }

  html.runtime-native #screen-online {
    justify-content: center;
    overflow: hidden;
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(18px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(18px, env(safe-area-inset-left, 0px));
  }
  html.runtime-native .online-panel {
    width: min(700px, 100%);
    max-height: 100%;
    padding: 18px 24px;
    gap: 8px;
  }
  html.runtime-native .online-panel h1 {
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.12;
    letter-spacing: 3px;
  }
  html.runtime-native .online-panel p {
    margin: 4px 0 8px;
    font-size: 13px;
    line-height: 1.35;
  }
  html.runtime-native .online-room-code { margin-bottom: 8px; padding: 7px 11px; }
  html.runtime-native .online-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  html.runtime-native .online-actions .btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
  }
  html.runtime-native #btn-online-update,
  html.runtime-native #btn-online-copy { grid-column: 1 / -1; }
}

/* Тач-устройства: увеличенные тап-таргеты в меню */
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 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 2px 5px;
  background: #101830;
  border: 2px solid #303850;
  color: #e8e8f0;
  font-family: inherit;
  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-you,
.wc-you-chip,
.wc-you-inline {
  color: #0b1224;
  background: #ffe000;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.wc-you {
  position: absolute;
  top: -5px;
  right: -4px;
  padding: 2px 4px;
  font-size: 7px;
  box-shadow: 1px 1px 0 #000;
}
.wc-you-chip { padding: 2px 8px; font-size: 9px; box-shadow: 2px 2px 0 #000; }
.wc-you-inline { padding: 0 3px; font-size: 6px; flex: 0 0 auto; }
.wc-pick-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 8px;
  width: min(720px, 100%);
  padding: 3px;
  background: rgba(6, 10, 26, 0.96);
}
.wc-pick-actions .btn { min-height: 44px; padding: 8px 12px; font-size: 12px; }
.wc-pick-actions #btn-wc-play { font-size: 14px; }

/* Модальные панели: parody roster и опциональная полная сетка. */
.wc-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(14px, env(safe-area-inset-right, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(14px, env(safe-area-inset-left, 0px));
  background: rgba(2, 5, 16, 0.82);
  touch-action: pan-x pan-y;
}
.wc-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 16px 20px;
  background: #0d1428;
  border: 3px solid #ffe000;
  box-shadow: 6px 6px 0 #000;
}
.wc-modal-close {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 2px solid #ffffff;
  background: #b02058;
  color: #ffffff;
  font: bold 24px/1 "Courier New", monospace;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
}
.wc-roster-modal { display: flex; flex-direction: column; gap: 8px; }
.wc-full-panel {
  width: min(1100px, 100%);
  height: min(660px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wc-full-panel > .wc-title { flex: 0 0 auto; padding-inline: 44px; }
.wc-full-panel .wc-bracket {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Панель раскрытой сборной (legacy class) */
.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; }

/* --- Главный экран турнира: путь игрока и один persistent CTA --- */
.wc-bracket-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wc-bracket-head > div { min-width: 0; flex: 1 1 auto; }
.wc-bracket-head .wc-title,
.wc-bracket-head .wc-hint { text-align: left; }
.wc-full-button { flex: 0 0 auto; padding: 8px 12px; font-size: 10px; }
.wc-player-path {
  --accent: #ffe000;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.wc-path-step {
  position: relative;
  min-width: 0;
  padding: 7px 6px 6px;
  background: #101830;
  border: 2px solid #303850;
  box-shadow: 3px 3px 0 #000;
  text-align: center;
}
.wc-path-step::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 2px);
  width: 10px;
  height: 3px;
  background: #303850;
  transform: translateY(-50%);
}
.wc-path-step:first-child::before { display: none; }
.wc-path-step.won { border-color: var(--accent); }
.wc-path-step.won::before,
.wc-path-step.current::before { background: var(--accent); }
.wc-path-step.lost { border-color: #ff5050; }
.wc-path-step.resolved { border-color: #53617f; opacity: 0.78; }
.wc-path-step.locked { opacity: 0.52; }
.wc-path-step.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 3px 3px 0 #000;
  animation: wc-pulse 1.15s ease-in-out 2;
}
.wc-path-round {
  min-height: 20px;
  color: #8090b0;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.5px;
  line-height: 1.15;
}
.wc-path-my,
.wc-path-opp {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
}
.wc-path-my b,
.wc-path-opp b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-path-my i {
  padding: 1px 3px;
  color: #0b1224;
  background: #ffe000;
  font-size: 6px;
  font-style: normal;
  font-weight: bold;
}
.wc-path-score { margin: 2px 0; color: #ffffff; font-size: 18px; font-weight: bold; line-height: 1; }
.wc-path-step.won .wc-path-score { color: #ffe000; }
.wc-path-step.lost .wc-path-score { color: #ff7070; }
.wc-path-state {
  margin-top: 3px;
  color: #80e890;
  font-size: 7px;
  font-weight: bold;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-path-step.lost .wc-path-state { color: #ff7070; }
.wc-path-step.resolved .wc-path-state { color: #9aa6c4; }
.wc-path-step.locked .wc-path-state { color: #6a7494; }
.wc-next-card {
  width: min(460px, 100%);
  padding: 7px 12px;
  border: 2px solid color-mix(in srgb, var(--accent, #80e890) 70%, #ffffff);
  background: #0d1428;
  color: #e8e8f0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
}
.wc-next-card .wc-detail-head { margin-top: 3px; }
.wc-next-card .wc-detail-flag { font-size: 28px; }
.wc-next-card .wc-detail-name { font-size: 13px; }
.wc-next-open { color: #ffe000; font-size: 9px; font-weight: bold; letter-spacing: 1px; }

/* Ростер: 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.15s ease-in-out 2; }
.wc-match.mine.played.player-won { border-left: 3px solid var(--accent, #ffe000); }
@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 {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  padding: 3px;
  background: rgba(6, 10, 26, 0.96);
}
.wc-actions .btn { min-height: 44px; padding: 8px 14px; font-size: 11px; }
.wc-actions .btn-big { flex: 1 1 300px; max-width: 420px; font-size: 15px; }

/* --- Экран чемпиона --- */
.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 { gap: 5px; }
}
@media (max-height: 480px) {
  #screen-wc-pick,
  #screen-wc-bracket,
  #screen-wc-champ { overflow: hidden; }
  .wc-wrap {
    height: 100%;
    justify-content: center;
    padding:
      max(7px, env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      max(7px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
    gap: 5px;
  }
  .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-you { top: -3px; right: -2px; }
  .wc-pick-actions { padding-block: 2px; }
  .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-modal-panel { padding: 11px 16px; }
  .wc-roster-modal { width: min(620px, 100%); }
  .wc-roster-modal .wc-p-stats { display: flex; }
  .wc-full-panel { width: 100%; height: 100%; }
  .wc-full-panel > .wc-title { font-size: 13px; }
  .wc-bracket-head { gap: 7px; }
  .wc-full-button { padding: 6px 9px; }
  .wc-player-path { gap: 6px; }
  .wc-path-step { padding: 5px 4px 4px; }
  .wc-path-step::before { width: 8px; }
  .wc-path-round { min-height: 17px; font-size: 7px; }
  .wc-path-my,
  .wc-path-opp { font-size: 10px; }
  .wc-path-score { font-size: 16px; }
  .wc-path-state { font-size: 6px; }
  .wc-next-card { padding: 5px 10px; }
  .wc-next-card .wc-detail-head { gap: 7px; }
  .wc-next-card .wc-detail-flag { font-size: 22px; }
  .wc-next-card .wc-detail-stars { font-size: 9px; }
  .wc-actions .btn { min-height: 42px; padding: 7px 10px; }
  .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 {
    width: min(720px, calc(100% - 24px));
    max-width: 720px;
    max-height: calc(100% - 16px);
    padding: 12px 18px;
    gap: 5px 14px;
    display: grid;
    grid-template-columns: minmax(140px, 0.65fr) minmax(320px, 1.35fr);
    grid-template-areas:
      "cup title"
      "team pathcap"
      "you path"
      "titles path"
      "status actions"
      "exit actions";
    align-items: center;
  }
  .wc-champ-cup { grid-area: cup; font-size: 46px; }
  .panel.wc-champ h1 { grid-area: title; font-size: 22px; }
  .wc-champ-team { grid-area: team; font-size: 15px; }
  .panel.wc-champ > .wc-you-chip { grid-area: you; justify-self: center; }
  .wc-champ-titles { grid-area: titles; justify-self: center; }
  .wc-champ-path-cap { grid-area: pathcap; }
  .wc-champ-path { grid-area: path; }
  .panel.wc-champ > .end-status { grid-area: status; }
  .panel.wc-champ > .end-buttons {
    grid-area: actions;
    align-self: stretch;
    justify-content: center;
    gap: 6px;
  }
  .panel.wc-champ > .end-buttons .btn-big { min-height: 42px; padding: 7px 12px; }
  .panel.wc-champ > .end-buttons .end-action { min-height: 40px; padding: 5px 9px; }
  .panel.wc-champ > .end-exit { grid-area: exit; justify-self: center; margin: 0; }
  .lineup-flag { width: 50px; height: 50px; font-size: 32px; }
}
@media (max-height: 400px) and (orientation: landscape) {
  .wc-pick-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .wc-card { min-height: 0 !important; }
  .wc-card-flag { font-size: 18px; }
  .wc-card-short { font-size: 9px; }
  .wc-card-stars { font-size: 7px; }
  .wc-pick-actions .btn { min-height: 40px; padding: 6px 8px; font-size: 10px; }
  .wc-pick-actions #btn-wc-play { font-size: 12px; }
  .wc-modal-close { width: 32px; height: 32px; font-size: 21px; }
  .wc-p-row { padding-block: 2px; }
  .wc-path-round { letter-spacing: 0; }
  .wc-champ-path { font-size: 10px; }
  .wc-champ-path .wc-path-row { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-path-step.current,
  .wc-match.current { animation: none; }
}

/* ===================== 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);
}