/* Единая сцена КЛАНСКИ (05.10.2026): фон-картинка, дым, свет и главный экран
   (хаб) в тёмном «стекле». Подключается ПОСЛЕ header.css и auth.css.
   Идея автора: фон не меняется и не исчезает; на нём только слегка идёт дым и
   чуть меняется свет. Герой и фон общие для входа и главной. */

/* ---------- Фон: картинка + живой дым + пульс света ---------- */
.hub-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0b0705; }
.hub-bg-a, .hub-bg-b, .hub-bg-light { position: absolute; inset: -4%; }

.hub-bg-a, .hub-bg-b { background: #0b0705; overflow: hidden; }
/* Полоса с картинкой: ходом управляет bgpan.js через transform (без перерисовки). */
.bgstrip {
  position: absolute; top: 0; bottom: 0; left: -3000px; width: calc(100% + 3000px); pointer-events: none;
  background: url("assets/bg/smoke-loop.webp") 0 bottom / auto 100% repeat-x;
  will-change: transform; backface-visibility: hidden;
}
/* Основной слой: медленный дрейф + параллакс от курсора (--mx/--my ставит
   hub-scene.js). */
.hub-bg-a {
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -8px), 0) scale(1.04);
  animation: hubDrift 38s ease-in-out infinite alternate;
}
/* Второй экземпляр той же картинки: зеркально, другой темп, режим «осветление»
   и маска-градиент — плывущий поверх дым, без видео и без шейдеров. */
.hub-bg-b {
  opacity: 0.38; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 85%, transparent 100%);
  transform: translate3d(calc(var(--mx, 0) * 10px), 0, 0) scaleX(-1) scale(1.12);
  animation: hubDriftB 54s ease-in-out infinite alternate;
}
/* Свет: тёплое пятно за героем, которое медленно дышит. */
.hub-bg-light {
  background:
    radial-gradient(ellipse 40% 55% at 50% 72%, rgba(255, 120, 50, 0.4), transparent 72%),
    radial-gradient(ellipse 36% 40% at 14% 30%, rgba(190, 30, 20, 0.26), transparent 70%),
    radial-gradient(ellipse 36% 40% at 88% 34%, rgba(190, 30, 20, 0.26), transparent 70%);
  mix-blend-mode: screen; opacity: 0.55;
  animation: hubLight 9s ease-in-out infinite;
}
/* Дрейф через отдельное свойство translate (transform занят параллаксом). */
@keyframes hubDrift {
  from { translate: -1.2% 0; }
  to   { translate: 1.2% 0; }
}
@keyframes hubDriftB {
  from { translate: 2% 0; }
  to   { translate: -2% -1%; }
}
@keyframes hubLight {
  0%, 100% { opacity: 0.3; }
  45% { opacity: 0.7; }
  60% { opacity: 0.55; }
}

/* ---------- Холст со сценой ---------- */
.auth-stage { opacity: 0; transition: opacity 1.4s ease; }
.auth-stage.ready { opacity: 1; }
/* Холст не должен ловить клики — под ним форма и панели. */
.auth-stage canvas { pointer-events: none; }
.auth-vignette { background: radial-gradient(ellipse at 50% 55%, transparent 50%, rgba(0, 0, 0, 0.62) 100%); }

/* До проверки токена ничего «чужого» не показываем. */
.booting .auth-layout { opacity: 0; }
.auth-layout.gone { display: none; }

/* Запасной силуэт (без 3D) — по центру. */
.auth-fallback-hero { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; }

/* ---------- Расстановка: герой в центре, информация по бокам ---------- */
:root { --hero-gap: clamp(280px, 32vw, 480px); }

/* Вход: фирменный знак слева, карточка справа, посередине — герой. */
.auth-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--hero-gap) minmax(0, 1fr);
  align-items: center; padding: 0 clamp(14px, 2.4vw, 36px);
}
.auth-brandside {
  grid-column: 1; justify-self: start; max-width: 420px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.auth-brandside-mark { width: 84px; height: auto; filter: drop-shadow(0 0 22px rgba(255, 90, 24, 0.5)); }
.auth-brandside-word { width: min(100%, 380px); height: auto; }
.auth-brandside-text { margin: 0; font-size: 1rem; color: #cdb9a1; max-width: 22em; line-height: 1.5; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
.auth-panel { grid-column: 3; justify-self: end; width: 100%; max-width: 440px; padding: 24px 0; }
.auth-card { animation: none; }
.auth-layout:not(.on) .auth-card { opacity: 0; transform: translateX(46px); pointer-events: none; }
.auth-layout:not(.on) .auth-brandside { opacity: 0; transform: translateX(-46px); }
@media (min-width: 901px) { .auth-brand { display: none; } }

/* ---------- Хаб ---------- */
.hub {
  position: fixed; inset: 0; z-index: 5; display: none; flex-direction: column;
  pointer-events: none; color: var(--k-text, #f4ece2);
  font-family: var(--f-ui, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
body.app .hub { display: flex; }
.hidden { display: none !important; } /* модалка поддержки из shared.js живёт в <body>, не внутри .hub */
.hub a, .hub button { pointer-events: auto; }

.hub .hh-header { pointer-events: auto; position: relative; flex: none; }
.hub [data-reveal-top] { opacity: 0; transform: translateY(-14px); transition: opacity 0.8s ease, transform 0.8s ease; }
body.app-on .hub [data-reveal-top] { opacity: 1; transform: none; transition-delay: 0.15s; }

/* Плавное проявление: каждая панель выезжает чуть позже предыдущей. */
.hub [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.view-home.on [data-reveal] { opacity: 1; transform: none; transition-delay: calc(0.1s + var(--i, 0) * 0.12s); }

/* ======================================================================
   ГЛАВНЫЙ ЭКРАН (макет 1586×992, 07.10.2026). Все размеры — в «u» (см. ui.css):
   колонки прижаты к краям окна, центр (медальоны, кнопки) — к середине.
   ====================================================================== */
.hm-muted { color: var(--k-muted); }

.hm-left { position: absolute; left: calc(50 * var(--u)); top: calc(45 * var(--u)); width: calc(366 * var(--u)); pointer-events: none; }
.hm-left > * { pointer-events: auto; }
.hm-right { position: absolute; right: calc(41 * var(--u)); top: calc(57 * var(--u)); width: calc(401 * var(--u)); pointer-events: none; }
.hm-right > * { pointer-events: auto; }

/* Карточка героя вынесена в herocard.css (общая для главной и кабинета героя, п.14 ТЗ «Классик» №2). */

/* Характеристики */
.ui-card.hm-stats { margin-left: calc(-5 * var(--u)); width: calc(356 * var(--u)); background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hm-stats .ui-card-head { height: calc(49 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: calc(19 * var(--u)); gap: calc(14 * var(--u)); }
.hm-stats .ui-card-head .ic { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.hm-stats .ui-card-body { margin: 0; padding: calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u)); background: linear-gradient(180deg, rgba(6, 3, 2, 0.66), rgba(14, 7, 5, 0.5)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hm-stat { display: grid; grid-template-columns: calc(40 * var(--u)) calc(94 * var(--u)) 1fr calc(54 * var(--u)); gap: calc(8 * var(--u)); align-items: center; height: calc(45 * var(--u)); }
.hm-stat-ico { position: relative; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--sc) 38%, #1a0d07), #0d0605 75%); box-shadow: inset 0 0 0 calc(2 * var(--u)) color-mix(in srgb, var(--sc) 70%, #000), 0 0 calc(9 * var(--u)) color-mix(in srgb, var(--sc) 45%, transparent); }
.hm-stat-ico .ic { width: calc(27 * var(--u)); height: calc(27 * var(--u)); }
.hm-stat-name { font-size: calc(15 * var(--u)); font-weight: 500; color: #fff; white-space: nowrap; }
.hm-stat-name.long { font-size: calc(13.5 * var(--u)); letter-spacing: -0.01em; }
.hm-stat .ui-bar { height: calc(9 * var(--u)); }
.hm-stat .ui-bar > i { background: var(--sg); box-shadow: 0 0 calc(8 * var(--u)) color-mix(in srgb, var(--sc) 60%, transparent); }
.hm-stat-val { text-align: right; font-family: var(--f-num); font-size: calc(24 * var(--u)); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.hm-stat:hover .hm-stat-ico { animation: hmPop 0.5s ease; }
.hm-stat[data-k="strength"] { --sc: #ff9a2a; --sg: linear-gradient(90deg, #ff3b2a, #ff8a3a 70%, #ffb25a); }
.hm-stat[data-k="agility"] { --sc: #3fb4ff; --sg: linear-gradient(90deg, #2d8cff, #62c8ff 70%, #8be0ff); }
.hm-stat[data-k="intuition"] { --sc: #b058ff; --sg: linear-gradient(90deg, #8a46ff, #b97dff 70%, #d9a6ff); }
.hm-stat[data-k="endurance"] { --sc: #2fd86a; --sg: linear-gradient(90deg, #1fb852, #36e07a 70%, #6af5a0); }

/* ---------- Центр: медальоны ---------- */
.hm-medals { position: absolute; top: 0; left: 50%; width: calc(1586 * var(--u)); margin-left: calc(-793 * var(--u)); height: calc(904 * var(--u)); pointer-events: none; }
.hm-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-lines path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hm-line-base { stroke-width: 2; opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
.hm-line-flow { stroke-width: 3; stroke-dasharray: 14 120; animation: hmFlow 3.6s linear infinite; filter: drop-shadow(0 0 3px currentColor); }
.med { position: absolute; width: calc(180 * var(--u)); margin-left: calc(-90 * var(--u)); text-align: center; pointer-events: auto; cursor: default; --mc: #ffa43a; --mn: #ffc94d; }
.med-disc { position: relative; width: calc(98 * var(--u)); height: calc(98 * var(--u)); margin: 0 auto; border-radius: 50%; transition: transform 0.3s ease; }
.med:hover .med-disc { transform: scale(1.07); }
.med-ring {
  position: absolute; inset: 0; border-radius: 50%; animation: hmRingSpin 9s linear infinite;
  background: conic-gradient(var(--mc), color-mix(in srgb, var(--mc) 45%, #000) 24%, var(--mc) 48%, color-mix(in srgb, var(--mc) 40%, #000) 74%, var(--mc));
  -webkit-mask: radial-gradient(circle farthest-side, transparent calc(100% - 4.6 * var(--u)), #000 calc(100% - 4.2 * var(--u)));
  mask: radial-gradient(circle farthest-side, transparent calc(100% - 4.6 * var(--u)), #000 calc(100% - 4.2 * var(--u)));
  filter: drop-shadow(0 0 calc(6 * var(--u)) var(--mc));
}
.med-glow { position: absolute; inset: calc(-8 * var(--u)); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mc) 38%, transparent) 38%, transparent 70%); animation: uiPulse 3.4s ease-in-out infinite; }
.med-bezel { position: absolute; inset: calc(7 * var(--u)); border-radius: 50%; border: calc(1.6 * var(--u)) solid color-mix(in srgb, var(--mc) 55%, #1a0d07); box-shadow: inset 0 0 calc(8 * var(--u)) rgba(0, 0, 0, 0.8); }
.med-face {
  position: absolute; inset: calc(10 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--mc) 52%, #1a0d07) 0%, color-mix(in srgb, var(--mc) 24%, #0b0504) 60%, #090302 100%);
  box-shadow: inset 0 calc(2 * var(--u)) calc(6 * var(--u)) color-mix(in srgb, var(--mc) 40%, transparent);
}
.med-face .ic { width: calc(64 * var(--u)); height: calc(64 * var(--u)); filter: brightness(1.12) saturate(1.1) drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.6)); animation: hmFloat 4.5s ease-in-out infinite; }
.med-label { margin-top: calc(6 * var(--u)); height: calc(24 * var(--u)); line-height: calc(24 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); white-space: nowrap; }
.med-val { margin-top: calc(-2 * var(--u)); font-family: var(--f-num); font-size: calc(40 * var(--u)); font-weight: 700; line-height: calc(46 * var(--u)); color: var(--mn); text-shadow: 0 0 calc(14 * var(--u)) color-mix(in srgb, var(--mc) 60%, transparent), 0 2px 6px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.med[data-k="strength"] { left: calc(545 * var(--u)); top: calc(107 * var(--u)); --mc: #ff9a2a; --mn: #ffc94d; }
.med[data-k="intuition"] { left: calc(1023 * var(--u)); top: calc(107 * var(--u)); --mc: #b058ff; --mn: #b784ff; }
.med[data-k="agility"] { left: calc(541 * var(--u)); top: calc(323 * var(--u)); --mc: #3fb4ff; --mn: #4cc8ff; }
.med[data-k="endurance"] { left: calc(1025 * var(--u)); top: calc(323 * var(--u)); --mc: #2fd86a; --mn: #5cf08a; }
.med[data-k="agility"] .med-val, .med[data-k="endurance"] .med-val { margin-top: calc(3 * var(--u)); }
.med[data-k="intuition"] .med-val { margin-top: 0; }

/* ---------- Правая колонка ---------- */
.hm-right .ui-card { margin-bottom: calc(20 * var(--u)); }
.hm-right .ui-card-head { height: calc(45 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: calc(19 * var(--u)); gap: calc(14 * var(--u)); }
.hm-right .ui-card-head .ic { width: calc(31 * var(--u)); height: calc(31 * var(--u)); }
.hm-right .ui-card-body { margin: 0 calc(1 * var(--u)) calc(1 * var(--u)); border-radius: calc(8 * var(--u)); }
.hm-battle-row { display: grid; grid-template-columns: repeat(3, 1fr); padding: calc(14 * var(--u)) 0 calc(10 * var(--u)) !important; min-height: calc(151 * var(--u)); }
.hm-battle-row > div { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hm-battle-row > div + div::before { content: ""; position: absolute; left: 0; top: 4%; bottom: 4%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent); }
.hm-battle-row .ic { width: calc(36 * var(--u)); height: calc(36 * var(--u)); filter: drop-shadow(0 0 calc(7 * var(--u)) rgba(255, 170, 60, 0.45)); transition: transform 0.25s; }
.hm-battle-row > div:hover .ic { transform: translateY(calc(-3 * var(--u))) scale(1.08); }
.hm-battle-row span { margin-top: calc(7 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 500; color: #e9dccb; }
.hm-battle-row b { margin-top: calc(2 * var(--u)); font-family: var(--f-num); font-size: calc(46 * var(--u)); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hm-battle-row b.t { color: #ffc24a; text-shadow: 0 0 calc(14 * var(--u)) rgba(255, 170, 40, 0.5); }
.hm-battle-row b.win { color: #52e07a; text-shadow: 0 0 calc(14 * var(--u)) rgba(60, 220, 110, 0.5); }
.hm-battle-row b.loss { color: #ff5a6e; text-shadow: 0 0 calc(14 * var(--u)) rgba(255, 70, 90, 0.5); }

.hm-live { margin-left: calc(2 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9dffa8, #22c443 70%); box-shadow: 0 0 calc(9 * var(--u)) #2fe05a; animation: hmLive 2.4s ease-in-out infinite; }
.hm-live.off { background: #6e5d4d; box-shadow: none; animation: none; }
.hm-status .ui-card-body { padding: calc(12 * var(--u)) calc(12 * var(--u)); min-height: calc(54 * var(--u)); }
.hm-status-text { margin: 0; font-size: calc(14.5 * var(--u)); line-height: 1.5; color: #f4ece2; }
.hm-rating-row { display: grid; grid-template-columns: repeat(3, 1fr); padding: calc(20 * var(--u)) 0 calc(22 * var(--u)) !important; text-align: center; }
.hm-rating-row > div { position: relative; }
.hm-rating-row > div + div::before { content: ""; position: absolute; left: 0; top: 4%; bottom: 4%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent); }
.hm-rating-row span { display: block; font-size: calc(17 * var(--u)); color: #e9dccb; }
.hm-rating-row b { display: block; margin-top: calc(8 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 400; color: #fff; line-height: 1; }
.hm-rating-foot {
  display: flex; align-items: center; justify-content: space-between; margin: 0 calc(1 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)) calc(15 * var(--u)) calc(17 * var(--u)); color: #bfb2a2; text-decoration: none; font-size: calc(14.5 * var(--u));
  border-top: 1px solid rgba(255, 130, 50, 0.3); box-shadow: 0 -1px calc(10 * var(--u)) rgba(255, 110, 40, 0.18);
  transition: color 0.2s, background 0.2s;
}
.hm-rating-foot .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #fff; transition: transform 0.2s; }
.hm-rating-foot:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.hm-rating-foot:hover .ic { transform: translateX(calc(4 * var(--u))); }

/* ---------- Низ: настройки, «Магазин / В БОЙ / Кабинет», «Новый сезон» ---------- */
.hm-settings {
  position: absolute; left: calc(46 * var(--u)); bottom: calc(58 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); background: none; border: 0; padding: 0;
  color: #d3c6b6; font: 500 calc(14 * var(--u)) var(--f-ui); cursor: pointer; transition: color 0.2s;
}
.hm-settings-ico { width: calc(37 * var(--u)); height: calc(37 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #3a3430, #17120f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.5); color: #e9e0d6; }
.hm-settings-ico .ic { width: calc(21 * var(--u)); height: calc(21 * var(--u)); transition: transform 0.6s ease; }
.hm-settings:hover { color: #fff; }
.hm-settings:hover .hm-settings-ico .ic { transform: rotate(120deg); }

.hm-cta { position: absolute; left: 50%; margin-left: calc(-395 * var(--u)); width: calc(790 * var(--u)); bottom: calc(72 * var(--u)); height: calc(98 * var(--u)); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cta { position: relative; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; flex: none; transition: filter 0.25s, transform 0.2s; pointer-events: auto; }
.cta-bg { position: absolute; inset: 0; }
.cta-in { position: relative; display: flex; align-items: center; justify-content: center; z-index: 2; }
.cta-in .ic { transition: transform 0.25s; }
.cta:hover .cta-in .ic { transform: scale(1.1) translateY(calc(-2 * var(--u))); }
.cta:active { transform: translateY(calc(2 * var(--u))); }
/* Боковые кнопки: наружу — остриё, внутрь — выемка под «В БОЙ» */
.cta-side { width: calc(205 * var(--u)); height: calc(70 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; filter: drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.6)); }
.cta-side .cta-bg, .cta-side .cta-bg::before { clip-path: polygon(0 50%, calc(30 * var(--u)) 0, 100% 0, calc(100% - calc(26 * var(--u))) 50%, 100% 100%, calc(30 * var(--u)) 100%); }
.cta-side .cta-bg { background: linear-gradient(180deg, rgba(255, 190, 110, 0.85), rgba(150, 80, 30, 0.5) 50%, rgba(255, 170, 80, 0.7)); }
.cta-side .cta-bg::before { content: ""; position: absolute; inset: calc(1.5 * var(--u)); background: linear-gradient(180deg, #2a1d14, #120a07 55%, #1c120c); }
.cta-cab .cta-bg, .cta-cab .cta-bg::before { clip-path: polygon(0 0, calc(100% - calc(30 * var(--u))) 0, 100% 50%, calc(100% - calc(30 * var(--u))) 100%, 0 100%, calc(26 * var(--u)) 50%); }
.cta-shop { margin-right: calc(-3 * var(--u)); padding-left: calc(6 * var(--u)); }
.cta-cab { margin-left: calc(-3 * var(--u)); padding-right: calc(6 * var(--u)); }
.cta-side .cta-in { gap: calc(14 * var(--u)); }
.cta-shop .cta-in { transform: translateX(calc(-4 * var(--u))); }
.cta-cab .cta-in { transform: translateX(calc(-6 * var(--u))); }
.cta-side .cta-in .ic { width: calc(46 * var(--u)); height: calc(46 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.55)); }
.cta-side:hover { filter: brightness(1.18) drop-shadow(0 0 calc(12 * var(--u)) rgba(255, 140, 50, 0.45)); }

.cta-main { z-index: 3; width: calc(372 * var(--u)); height: calc(98 * var(--u)); font-size: calc(42 * var(--u)); font-weight: 700; letter-spacing: 0; filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(255, 90, 20, 0.8)) drop-shadow(0 0 calc(34 * var(--u)) rgba(255, 60, 10, 0.5)); animation: hmFire 2.6s ease-in-out infinite; }
.cta-main .cta-bg, .cta-main .cta-bg::before, .cta-main .cta-bg::after { clip-path: polygon(0 50%, calc(40 * var(--u)) 0, calc(100% - calc(40 * var(--u))) 0, 100% 50%, calc(100% - calc(40 * var(--u))) 100%, calc(40 * var(--u)) 100%); }
.cta-main .cta-bg { background: linear-gradient(180deg, #fff0b0, #ffa22a 22%, #ff4a14 55%, #ff7a1f 80%, #ffd27a); }
.cta-main .cta-bg::before { content: ""; position: absolute; inset: calc(3.5 * var(--u)); background: radial-gradient(ellipse 70% 120% at 50% 50%, #8c1a0b 0%, #4c0c06 55%, #240503 100%); }
.cta-main .cta-bg::after { content: ""; position: absolute; inset: calc(3.5 * var(--u)); background: radial-gradient(ellipse 40% 32% at 50% 0, rgba(255, 190, 90, 0.9), transparent 70%), radial-gradient(ellipse 40% 30% at 50% 100%, rgba(255, 150, 60, 0.8), transparent 70%); animation: uiPulse 2.2s ease-in-out infinite; }
.cta-main .cta-in { gap: calc(18 * var(--u)); text-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.7); }
.cta-main .cta-in .ic { width: calc(68 * var(--u)); height: calc(68 * var(--u)); filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(255, 170, 60, 0.7)); animation: hmFloat 3.2s ease-in-out infinite; }
.cta-main:hover { filter: brightness(1.12) drop-shadow(0 0 calc(18 * var(--u)) rgba(255, 100, 30, 0.9)) drop-shadow(0 0 calc(44 * var(--u)) rgba(255, 70, 10, 0.5)); }
.cta-spark { position: absolute; width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: #ffc46a; box-shadow: 0 0 calc(7 * var(--u)) #ff8a2a; opacity: 0; z-index: 4; animation: hmSpark 2.8s ease-out infinite; }
.cta-spark.s1 { left: 30%; top: 4%; animation-delay: 0s; }
.cta-spark.s2 { left: 46%; top: 0; animation-delay: 0.7s; }
.cta-spark.s3 { left: 62%; top: 4%; animation-delay: 1.3s; }
.cta-spark.s4 { left: 74%; top: 8%; animation-delay: 1.9s; }
.cta-spark.s5 { left: 20%; top: 10%; animation-delay: 2.3s; }

.hm-season {
  position: absolute; right: calc(41 * var(--u)); bottom: calc(71 * var(--u)); width: calc(254 * var(--u)); height: calc(66 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(92 * var(--u));
  background: linear-gradient(90deg, rgba(34, 14, 8, 0.9), rgba(12, 7, 5, 0.86)); border: 1px solid rgba(255, 140, 60, 0.45); border-radius: calc(11 * var(--u)); text-align: left; cursor: pointer; color: #fff; font-family: var(--f-ui);
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.5), inset 0 0 calc(18 * var(--u)) rgba(255, 90, 30, 0.18); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s;
}
.hm-season:hover { border-color: rgba(255, 170, 80, 0.85); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.5), 0 0 calc(22 * var(--u)) rgba(255, 110, 40, 0.4), inset 0 0 calc(18 * var(--u)) rgba(255, 90, 30, 0.25); }
.hm-season-pic { position: absolute; left: 0; top: 0; bottom: 0; width: calc(96 * var(--u)); display: flex; align-items: flex-end; justify-content: center; font-size: calc(40 * var(--u)); background: radial-gradient(circle at 50% 70%, #6a1a0a, #1a0806 75%); -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); mask-image: linear-gradient(90deg, #000 62%, transparent); overflow: hidden; }
.hm-season-pic img { width: 100%; height: 130%; object-fit: cover; object-position: 50% 12%; display: block; transition: transform 0.5s ease; }
.hm-season:hover .hm-season-pic img { transform: scale(1.08); }
.hm-season-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.hm-season-txt b { white-space: nowrap; font-size: calc(16.5 * var(--u)); font-weight: 700; color: #ffc24a; }
.hm-season-txt small { white-space: nowrap; font-size: calc(14 * var(--u)); color: #b9ab9b; }
.hm-season > .ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #ffc24a; transition: transform 0.2s; }
.hm-season:hover > .ic { transform: translateX(calc(4 * var(--u))); }

@keyframes hmRingSpin { to { transform: rotate(360deg); } }
@keyframes hmFlow { from { stroke-dashoffset: 134; } to { stroke-dashoffset: 0; } }
@keyframes hmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-2.5 * var(--u))); } }
@keyframes hmLive { 0%, 100% { box-shadow: 0 0 calc(5 * var(--u)) #2fe05a; } 50% { box-shadow: 0 0 calc(12 * var(--u)) #6dff8a; } }
@keyframes hmGlint { 0%, 70%, 100% { filter: drop-shadow(0 0 calc(7 * var(--u)) rgba(255, 140, 40, 0.5)); } 82% { filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(255, 230, 150, 1)) brightness(1.35); } }
@keyframes hmPop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.14) rotate(-6deg); } }
@keyframes hmFire { 0%, 100% { filter: drop-shadow(0 0 calc(12 * var(--u)) rgba(255, 90, 20, 0.65)) drop-shadow(0 0 calc(30 * var(--u)) rgba(255, 60, 10, 0.35)); } 50% { filter: drop-shadow(0 0 calc(18 * var(--u)) rgba(255, 120, 30, 0.95)) drop-shadow(0 0 calc(42 * var(--u)) rgba(255, 70, 10, 0.55)); } }
@keyframes hmSpark { 0% { opacity: 0; transform: translateY(0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-34 * var(--u))) translateX(calc(8 * var(--u))) scale(0.3); } }

/* ---------- Представления: главная и страницы-фреймы ---------- */
.hub-views { flex: 1; min-height: 0; position: relative; }
.view-home { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-view="home"] .view-home { display: block; }
.view-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none;
  background: transparent; pointer-events: auto; color-scheme: dark;
}
body[data-view="page"] .view-frame { display: block; }

/* ---------- Узкие окна (ноутбуки): колонки чуть уже ---------- */
@media (max-width: 1100px) and (min-width: 901px) {
  .hm-left { left: calc(24 * var(--u)); }
  .hm-right { right: calc(20 * var(--u)); }
}

/* ---------- Телефоны/планшеты (≤900px): одна колонка под героем ---------- */
@media (max-width: 900px) {
  /* backdrop-filter/transform на шапке сделали бы её контейнером для fixed-
     потомка (нижняя панель вкладок из header.css) — на телефонах убираем. */
  .hub .hh-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 7, 5, 0.9); }
  .hub [data-reveal-top], body.app-on .hub [data-reveal-top] { transform: none; }

  .auth-layout { grid-template-columns: 1fr; padding: 0; }
  .auth-brandside { display: none; }
  .auth-panel { grid-column: 1; justify-self: center; }

  body[data-view="home"] .view-home {
    display: flex; flex-direction: column; gap: 12px; pointer-events: auto; overflow-y: auto; overflow-x: hidden;
    padding: 34vh 12px calc(150px + env(safe-area-inset-bottom, 0px)); scrollbar-width: none;
  }
  .hm-left, .hm-right { display: contents; }
  .view-home > *, .hm-left > *, .hm-right > * { flex: none; }
  .hm-left > *, .hm-right > * { pointer-events: auto; }

  /* Размеры на телефоне — в обычных пикселях */
  .hm-hero { order: 1; height: 318px; margin: 0; width: 100%; max-width: 420px; align-self: center; --u: 1px; }
  .hm-medals { order: 2; position: static; width: auto; margin: 0; height: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; --u: 0.62px; }
  .hm-lines { display: none; }
  .med { position: static !important; width: auto; margin: 0; }
  .hm-stats { order: 3; margin: 0; width: 100%; --u: 1px; }
  .hm-battle { order: 4; --u: 0.9px; }
  .hm-status { order: 5; --u: 0.9px; }
  .hm-rating { order: 6; --u: 0.9px; }
  .hm-season { order: 7; position: relative; right: auto; bottom: auto; width: 100%; --u: 1.1px; height: 66px; }
  .hm-settings { order: 8; position: relative; left: auto; bottom: auto; align-self: flex-start; --u: 1.1px; }
  .hm-right .ui-card { margin-bottom: 0; }

  .hm-cta { position: fixed; left: 0; right: 0; margin: 0; width: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); z-index: 6; --u: 0.5px; height: 70px; }
  .cta-side { width: 100px; height: 44px; font-size: 12.5px; }
  .cta-side .cta-in .ic { width: 24px; height: 24px; }
  .cta-side .cta-in { gap: 6px; }
  .cta-shop .cta-in, .cta-cab .cta-in { transform: none; }
  .cta-main { width: 172px; height: 62px; font-size: 24px; }
  .cta-main .cta-in .ic { width: 36px; height: 36px; }
  .cta-main .cta-in { gap: 10px; }
  .cta-side .cta-bg, .cta-side .cta-bg::before { clip-path: polygon(0 50%, 16px 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 16px 100%); }
  .cta-cab .cta-bg, .cta-cab .cta-bg::before { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 14px 50%); }
  .cta-main .cta-bg, .cta-main .cta-bg::before, .cta-main .cta-bg::after { clip-path: polygon(0 50%, 24px 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 24px 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .hub-bg-a, .hub-bg-b, .hub-bg-light { animation: none; }
  .hub [data-reveal], .hub [data-reveal-top] { transition-duration: 0.01s; transition-delay: 0s !important; }
  .hm-av-ring, .med-ring, .med-glow, .med-face .ic, .hm-line-flow, .hm-dot, .hm-live, .hm-row-life .ic, .hm-row-elo .ic, .cta-main, .cta-main .cta-bg::after, .cta-main .cta-in .ic, .cta-spark { animation: none; }
}

/* ---------- Бой 1 на 1 (ТЗ «Классик», п.10): хедер убран, страница боя на весь экран ---------- */
body.duel-fight .hub .hh-header { display: none !important; }
body.duel-fight .hub .view-frame { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; }

/* «Статус» теперь в левой колонке под карточкой героя (п.5 ТЗ «Классик» №2) */
.hm-left .hm-status { margin-bottom: calc(20 * var(--u)); }
.hm-left .hm-status .ui-card-head { height: calc(45 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: calc(19 * var(--u)); gap: calc(14 * var(--u)); }
.hm-left .hm-status .ui-card-head .ic { width: calc(31 * var(--u)); height: calc(31 * var(--u)); }
.hm-left .hm-status .ui-card-body { margin: 0 calc(1 * var(--u)) calc(1 * var(--u)); border-radius: calc(8 * var(--u)); }

/* ---------- Баннер-подсказки под «Статусом» (ТЗ 09.10.2026, п.5) ---------- */
.hm-tips {
  position: relative; overflow: hidden; margin-bottom: calc(20 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(10 * var(--u));
  border: 1px solid rgba(255, 210, 120, 0.55);
  background: linear-gradient(115deg, #ff5a1f, #ffb02e 28%, #ff4d6a 55%, #8a3cff 80%, #ff5a1f); background-size: 300% 100%;
  animation: hmTipsFlow 9s linear infinite;
  box-shadow: 0 0 calc(22 * var(--u)) rgba(255, 120, 40, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -8px 18px rgba(60, 0, 20, 0.35);
}
.hm-tips::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(20, 4, 10, 0.42)); }
.hm-tips-glow {
  position: absolute; top: 0; bottom: 0; width: 34%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg); animation: hmTipsShine 5s ease-in-out infinite;
}
.hm-tips-slides { position: absolute; inset: 0; }
.hm-tip {
  position: absolute; inset: 0; display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
  opacity: 0; transform: translateX(calc(26 * var(--u))); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none;
}
.hm-tip.on { opacity: 1; transform: none; }
.hm-tip-ic { flex: none; width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20, 6, 10, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 calc(12 * var(--u)) rgba(255, 255, 255, 0.4); }
.hm-tip-ic .ic { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.hm-tip-txt { display: flex; flex-direction: column; gap: calc(4 * var(--u)); color: #fff; text-shadow: 0 1px 4px rgba(40, 0, 10, 0.8); line-height: 1.3; min-width: 0; }
.hm-tip-txt b { font-size: calc(19 * var(--u)); letter-spacing: 0.02em; }
.hm-tip-txt span { font-size: calc(15 * var(--u)); font-weight: 500; }
.hm-tips-dots { position: absolute; left: 0; right: 0; bottom: calc(6 * var(--u)); display: flex; justify-content: center; gap: calc(6 * var(--u)); }
.hm-tips-dots i { width: calc(18 * var(--u)); height: calc(4 * var(--u)); border-radius: 2px; background: rgba(255, 255, 255, 0.35); transition: background 0.3s, width 0.3s; }
.hm-tips-dots i.on { background: #fff; width: calc(30 * var(--u)); }
@keyframes hmTipsFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes hmTipsShine { 0%, 50% { left: -40%; } 100% { left: 130%; } }
@media (max-width: 900px) { .hm-tips { order: 5; --u: 1px; height: 128px; } .hm-tip-txt b { font-size: 17px; } .hm-tip-txt span { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .hm-tips, .hm-tips-glow { animation: none; } }


/* ---------- «Эти бойцы хотят подраться с тобой» (правая колонка, под рейтингом) ---------- */
.hm-right .hm-wait { margin-bottom: calc(20 * var(--u)); }
.hm-wait .ui-card-head span { font-size: calc(14.5 * var(--u)); white-space: nowrap; }
.hm-wait-body { padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)) !important; }
.hm-wait-row { display: flex; align-items: center; justify-content: center; text-decoration: none; min-height: calc(86 * var(--u)); }
.hm-wait-av {
  position: relative; flex: none; width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: 50%; overflow: hidden; margin-left: calc(-20 * var(--u));
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: calc(30 * var(--u)); font-weight: 700; color: #fff;
  background: radial-gradient(circle at 50% 30%, #6a2a14, #1a0a06 78%); border: calc(3 * var(--u)) solid #2a1208;
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.55); z-index: calc(10 - var(--k)); transition: transform 0.25s;
}
.hm-wait-av:first-child { margin-left: 0; }
.hm-wait-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.hm-wait-av.live { border-color: #3fe06a; box-shadow: 0 0 calc(14 * var(--u)) rgba(60, 230, 110, 0.55), 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.55); }
.hm-wait-row:hover .hm-wait-av { transform: translateY(calc(-4 * var(--u))); }
.hm-wait-row.shift .hm-wait-av { animation: hmWaitIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--k) * 0.05s); }
@keyframes hmWaitIn { from { opacity: 0; transform: translateX(calc(34 * var(--u))) scale(0.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hm-wait-row.shift .hm-wait-av { animation: none; } }