@layer tokens, reset, shell, components, screens, responsive, motion, overrides;

/* ════════════════════════════════════════════════════════════════════
   ABYSS: Fox Run — styles.css
   Организация: единый каскад через @layer (порядок объявлен ниже).
   Каждый слой собран в ОДИН блок; искать стиль — по баннеру слоя.

     tokens      — дизайн-токены (:root переменные)
     reset       — нормализация и база
     shell       — каркас (рамка, топбар, нав, оверлеи)
     components  — карты, аватар, чипы, кнопки
     screens     — поэкранные стили
     responsive  — медиа-запросы
     motion      — анимации/keyframes
     overrides   — точечные фикс-правила поверх всего (бьют все слои)
   ════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   TOKENS — дизайн-токены: цвета, типографика, размеры, тени, motion-переменные
   ══════════════════════════════════════════════════════════════════════ */
@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #050505;
    --bg-soft: #0b0808;
    --panel: rgba(18, 14, 14, 0.94);
    --panel-soft: rgba(28, 18, 18, 0.82);
    --line: rgba(177, 55, 45, 0.34);
    --line-strong: rgba(232, 67, 54, 0.82);
    --line-gold: rgba(178, 138, 90, 0.34);
    --red: #d83b32;
    --red-dark: #701115;
    --violet: #8050c8;
    --gold: #c09a68;
    /* цвета валют: искры — янтарный жар, осколки — премиальный аметист */
    --ember: #e9a13a;
    --shard: #b98bec;
    --bone: #e5ddd1;
    --muted: #978c82;
    --shadow: 0 16px 36px rgba(0, 0, 0, 0.56);
    --radius: 6px;
    --gap: 8px;
    --frame-max: 460px;
    /* Playwright baseline: Telegram Desktop 384x694 panel - 62px native title = 384x632 viewport. */
    --app-viewport-height: var(--tg-viewport-stable-height, 100dvh);
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.35rem;
    --text-display: 1.75rem;

    /* единая высота панели героя на главном экране и в окне персонажа */
    --hero-h: clamp(200px, 40dvh, 310px);

    /* motion & material system (crimson-gothic-neon) */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
    --glass: linear-gradient(180deg, rgba(24, 16, 16, 0.74), rgba(6, 5, 5, 0.9));
    --glass-soft: linear-gradient(180deg, rgba(20, 14, 14, 0.5), rgba(6, 5, 5, 0.66));
    --ring-crimson: 0 0 0 1px rgba(216, 59, 50, 0.22), 0 0 22px rgba(216, 59, 50, 0.16);
    --ring-gold: 0 0 0 1px rgba(178, 138, 90, 0.3);
    --inset-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 22px rgba(216, 59, 50, 0.06);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RESET — нормализация, box-sizing, базовые html/body/типографика
   ══════════════════════════════════════════════════════════════════════ */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 50% -10%, rgba(170, 24, 24, 0.18), transparent 32rem),
      linear-gradient(135deg, #050505, #0d0808 50%, #050505);
    color: var(--bone);
    font-family: "Segoe UI", Roboto, Arial, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.35;
    touch-action: pan-x pan-y;
  }

  body {
    min-height: var(--app-viewport-height);
  }

  button,
  input {
    min-width: 0;
    font: inherit;
  }

  button {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background:
      linear-gradient(180deg, rgba(48, 23, 22, 0.92), rgba(10, 8, 8, 0.98)),
      #120f0f;
    color: var(--bone);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018);
  }

  button:active {
    transform: translateY(1px);
  }

  button:focus-visible,
  input:focus-visible {
    outline: 2px solid var(--line-strong);
    outline-offset: 1px;
  }

  button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
  }

  input {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    outline: 0;
    background: rgba(5, 5, 5, 0.86);
    color: var(--bone);
  }

  h1,
  h2,
  h3,
  p {
    margin: 0;
    overflow-wrap: anywhere;
  }

  h1,
  h2,
  h3,
  .eyebrow {
    font-family: "Bahnschrift", "Segoe UI Semibold", system-ui, sans-serif;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  h1 {
    font-size: var(--text-xl);
    line-height: 1.02;
  }

  h2 {
    font-size: var(--text-lg);
    line-height: 1.1;
  }

  h3 {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.15;
  }

  strong,
  small,
  span,
  em,
  b,
  p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  small {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.2;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(216, 59, 50, 0.42);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SHELL — каркас приложения: рамка, топбар, нижняя навигация, оверлеи
   ══════════════════════════════════════════════════════════════════════ */
@layer shell {
  .app-shell {
    width: 100%;
    min-height: var(--app-viewport-height);
  }

  .mobile-frame {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(100%, var(--frame-max));
    height: var(--app-viewport-height);
    margin: 0 auto;
    overflow: hidden;
    background:
      linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
      radial-gradient(circle at 50% 18%, rgba(216, 59, 50, 0.13), transparent 17rem),
      rgba(3, 3, 3, 0.98);
    background-size: 34px 34px, 34px 34px, auto, auto;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.84);
  }

  .mobile-frame::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(216, 59, 50, 0.18), transparent 18%, transparent 82%, rgba(216, 59, 50, 0.18)),
      radial-gradient(circle at 50% 0%, rgba(255, 30, 30, 0.08), transparent 24rem);
    opacity: 0.52;
  }

  .mobile-frame.creator-onboarding {
    grid-template-rows: minmax(0, 1fr);
  }

  .creator-onboarding .topbar,
  .creator-onboarding .bottom-nav {
    display: none;
  }

  .creator-onboarding .screen-create {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .topbar {
    z-index: 10;
    display: grid;
    grid-template-columns: 52px minmax(80px, 1fr) auto 32px 32px 32px;
    gap: 5px;
    align-items: center;
    padding: calc(5px + env(safe-area-inset-top)) 6px 5px;
    border-bottom: 1px solid rgba(216, 59, 50, 0.2);
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.99), rgba(5, 5, 5, 0.84));
    backdrop-filter: blur(12px);

    min-height: calc(64px + env(safe-area-inset-top));

  }

  /* кнопка не клипает (бейдж уровня торчит наружу) — клипает внутренняя обёртка */
  .hud-portrait {
    position: relative;
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    overflow: visible;
    border-color: rgba(178, 138, 90, 0.62);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 59, 50, 0.22), rgba(5, 5, 5, 0.94));
  }

  .hud-portrait-crop {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: var(--red);
    font-weight: 900;
  }

  /* уровень игрока — в левом нижнем углу портрета */
  .hud-portrait > b {
    position: absolute;
    z-index: 12;
    bottom: -2px;
    left: -2px;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: #160a0a;
    box-shadow: 0 0 8px rgba(216, 59, 50, 0.65);
    color: var(--bone);
    font-size: 0.58rem;
  }

  .hud-identity {
    display: grid;
    min-width: 0;
    gap: 2px;

    align-content: center;

  }

  /* имя крупно слева, класс — той же строкой с привязкой к правому краю баров */
  .hud-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
  }

  .hud-identity strong,
  .hud-identity small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hud-identity strong {
    font-size: 0.82rem;
    line-height: 1.1;
  }

  .hud-identity small {
    flex: 0 1 auto;
    color: var(--red);
    font-size: 0.55rem;
  }

  .hud-bars {
    display: grid;

    grid-template-columns: 1fr;
    gap: 2px;

  }

  .mini-meter {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(178, 138, 90, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
    line-height: 0;

    height: 8px;

  }

  .mini-meter span {
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--red), #ff8670);
  }

  .mini-meter-energy span,
  .mini-meter-floor span {
    background: linear-gradient(90deg, #9c6428, #ffd385);
  }

  .mini-meter em,
  .mini-meter i {
    display: none;
  }

  .mini-meter .mini-meter-taint {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(99, 49, 176, 0.92), rgba(193, 86, 255, 0.86));
    pointer-events: none;
  }

  .mini-meter.warning {
    border-color: rgba(197, 88, 255, 0.76);
    box-shadow: 0 0 0 1px rgba(197, 88, 255, 0.22);
  }

  .hud-resources {
    display: grid;
    grid-template-columns: repeat(2, 36px);
    gap: 3px;
  }

  .currency {
    display: grid;
    height: 38px;
    min-width: 0;
    place-items: center;
    padding: 2px;
    overflow: hidden;
    border: 1px solid rgba(216, 59, 50, 0.2);
    background: rgba(16, 12, 12, 0.82);
  }

  .currency b {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    font-size: 0.7rem;
    line-height: 1;
  }

  .currency-embers b {
    color: var(--ember);
  }

  .currency-shards b {
    color: var(--shard);
  }

  .currency span {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* единый чип валюты: иконка + значение, цвет по типу валюты.
     Искры — массовая валюта, осколки — премиальная (будущий jetton $ABYSS). */
  .coin {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .coin i {
    font-style: normal;
    line-height: 1;
  }

  .ui-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
  }

  .ui-icon-fallback {
    line-height: 1;
  }

  .coin .ui-icon {
    width: 1.35em;
    height: 1.35em;
    flex: 0 0 1.35em;
  }

  .coin-embers i,
  .coin-embers .ui-icon-fallback {
    color: var(--ember);
  }

  .coin-shards i,
  .coin-shards .ui-icon-fallback {
    color: var(--shard);
  }

  .coin-gram i,
  .coin-gram .ui-icon-fallback {
    color: var(--gold);
  }

  .reward-coins {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .gram-wallet-button,
  .notice-button,
  .settings-button {
    position: relative;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    font-size: 0.68rem;
  }

  .gram-wallet-button {
    font-weight: 900;
  }

  .gram-wallet-button::before {
    content: none;
  }

  .screen {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: screenIn 220ms ease both;
  }

  .screen-home,
  .screen-create,
  .screen-run,
  .screen-combat,
  .screen-profile {
    overflow: hidden;
  }

  .bottom-nav {
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    min-height: calc(58px + env(safe-area-inset-bottom));
    padding: 4px 3px calc(4px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(216, 59, 50, 0.22);
    background: linear-gradient(0deg, rgba(5, 5, 5, 0.99), rgba(5, 5, 5, 0.84));
    backdrop-filter: blur(14px);

    position: relative;
    overflow: visible;
    padding-top: 6px;

  }

  .mobile-frame.is-combat-screen .bottom-nav {
    display: none;
  }

  .bottom-nav button {
    display: grid;
    min-height: 50px;
    place-items: center;
    gap: 0;
    padding: 1px;
    overflow: hidden;
    border-color: transparent;
    background: transparent;
  }

  .bottom-nav button.active {
    border-color: transparent;
    background: radial-gradient(circle at 50% 42%, rgba(216, 59, 50, 0.28), transparent 68%);
  }

  /* Красная точка-напоминание о готовой награде (раздел «Активности»). */
  .bottom-nav button span {
    position: relative;
  }

  .nav-alert {
    position: absolute;
    top: -1px;
    right: -6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 6px rgba(216, 59, 50, 0.85);
  }

  /* the Run button is the primary act of a roguelike — make it pop */
  .bottom-nav .run-primary {
    border-color: var(--line-strong);
    transform: translateY(-7px) scale(1.05);

    position: relative;
    z-index: 3;
    width: 62px;
    height: 62px;
    min-height: 62px;
    align-self: end;
    justify-self: center;
    margin-top: -17px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;

  }

  .bottom-nav .run-primary.active {
    background: transparent;
  }

  .bottom-nav .run-primary span {
    filter: drop-shadow(0 0 6px rgba(255, 72, 62, 0.7));
    animation: pulse 2.6s ease-in-out infinite;

    width: 62px;
    height: 62px;

  }

  .bottom-nav .run-primary small {
    position: absolute;
    z-index: 2;
    bottom: 2px;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(8, 3, 3, 0.78);
    text-shadow: 0 1px 2px #000;

    color: #fff4ed;
    font-weight: 900;

  }

  .bottom-nav span {
    display: block;
    width: 32px;
    height: 32px;
    color: var(--red);
    font-size: 0.95rem;
    line-height: 1;
  }

  .bottom-nav small {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .boot-screen {
    display: grid;
    min-height: var(--app-viewport-height);
    place-content: center;
    gap: 12px;
    padding: 20px;
    background: radial-gradient(circle, rgba(216, 59, 50, 0.18), transparent 24rem), #050505;
    text-align: center;
  }

  .boot-screen p {
    position: relative;
    color: #77716c;
    font-family: "Bahnschrift", system-ui, sans-serif;
    font-size: var(--text-display);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .boot-screen p::after {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--red);
    content: attr(data-title);
    text-shadow: 0 0 18px rgba(216, 59, 50, 0.48);
    white-space: nowrap;
    animation: titleLoad 2.4s var(--ease-out) infinite;
  }

  .boot-loader {
    width: 112px;
    height: 2px;
    margin: 2px auto 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 14px rgba(216, 59, 50, 0.14);
  }

  .boot-loader span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #a82322 18%, #ff5a48 58%, transparent);
    animation: bootScan 1.35s ease-in-out infinite;
  }

  .toast {
    position: absolute;
    z-index: 30;
    right: 10px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 10px;
    padding: 10px;
    border: 1px solid rgba(216, 59, 50, 0.55);
    background: rgba(11, 9, 9, 0.97);
    box-shadow: var(--shadow);
    text-align: center;
  }

  .busy {
    position: absolute;
    z-index: 40;
    top: calc(10px + env(safe-area-inset-top));
    right: 10px;
  }

  .busy span {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(216, 59, 50, 0.28);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: spin 700ms linear infinite;
  }

  .notice-button,
  .settings-button {
    border-color: transparent;
  }

  .notice-button.has-unread {
    border-color: transparent;
    color: var(--red);
  }


  .mobile-frame.is-busy .screen,
  .mobile-frame.is-busy .bottom-nav,
  .mobile-frame.is-busy .topbar {
    pointer-events: none;
  }

  .overlay-root:empty {
    display: none;
  }

  /* xp — единый размер полосы со всеми барами (высота/шрифт из базового .mini-meter),
     отличается только цветом заливки. */
  .mini-meter-xp span {
    background: linear-gradient(90deg, #6a49b4, #c58aff);
  }

  .mini-meter em {
    position: absolute;
    z-index: 2;
    inset: 0 2px;
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 800;
    line-height: 7px;
    text-align: right;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
  }

  .screen-collection {
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   COMPONENTS — переиспользуемые блоки: карты, аватар, чипы валют, кнопки
   ══════════════════════════════════════════════════════════════════════ */
@layer components {
  .eyebrow {
    color: var(--red);
    font-size: var(--text-xs);
    font-weight: 800;
  }

  .primary-cta {
    position: relative;
    width: 100%;
    min-height: 48px;
    border-color: rgba(255, 72, 62, 0.9);
    background:
      linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent),
      linear-gradient(180deg, #8c171a, #290808);
    box-shadow: 0 0 22px rgba(216, 59, 50, 0.24), inset 0 0 20px rgba(255, 44, 32, 0.18);
    color: #fff1ec;
    font-family: "Bahnschrift", system-ui, sans-serif;
    font-size: var(--text-md);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .primary-cta.slim {
    min-height: 40px;
    font-size: var(--text-sm);
  }

  .path-footer,
  .creator-panel,
  .event-panel,
  .combat-hud {
    min-width: 0;
    border: 1px solid var(--line-gold);
    background: linear-gradient(180deg, rgba(17, 13, 12, 0.94), rgba(5, 5, 5, 0.94));
    box-shadow: inset 0 0 18px rgba(216, 59, 50, 0.06);
  }

  .section-head,
  .screen-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gap);
    align-items: center;
    margin-bottom: 8px;
  }

  .screen-title-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .section-head h1,
  .screen-title-row h1 {
    overflow: hidden;
    font-size: var(--text-xl);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section-head small,
  .screen-title-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Единый ряд кнопок-вкладок (Колода/Инвентарь/Активности/Почта) ──
     Кнопки делят всю ширину поровну при любом количестве; бейджи и точки
     выступают за край кнопки, обрезка текста — на внутреннем .tab-label. */
  .tab-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    max-width: 100%;
    padding-top: 6px;
    overflow: visible;
  }

  .tab-row > button {
    position: relative;
    min-width: 0;
    min-height: 34px;
    padding: 3px 3px;
    overflow: visible;
    font-size: 0.58rem;
    white-space: nowrap;
  }

  .tab-row > button .tab-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab-row > button.active {
    border-color: var(--line-strong);
    background: linear-gradient(180deg, rgba(112, 17, 21, 0.72), rgba(16, 12, 12, 0.92));
    box-shadow: 0 0 14px rgba(216, 59, 50, 0.16);
  }

  /* Колода: 8 фильтров → сетка 2×4. */
  .tab-row-wrap {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hand::-webkit-scrollbar,
  .reward-row::-webkit-scrollbar {
    display: none;
  }

  .bar {
    position: relative;
    height: 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.08);
  }

  .bar span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: 100%;
  }

  .bar-fill,
  .bar-hp {
    background: linear-gradient(90deg, var(--red), #ff7664);
    box-shadow: 0 0 14px rgba(216, 59, 50, 0.38);
  }

  .bar-block {
    background: linear-gradient(90deg, rgba(47, 203, 255, 0.86), rgba(133, 229, 255, 0.98));
    box-shadow: 0 0 10px rgba(47, 203, 255, 0.45);
  }

  .bar-block-overflow {
    top: -1px;
    bottom: -1px;
    height: calc(100% + 2px);
    border-right: 1px solid rgba(192, 247, 255, 0.86);
    background: linear-gradient(90deg, rgba(39, 169, 236, 0.94), rgba(113, 224, 255, 0.78));
    opacity: 0.95;
  }

  .bar .bar-status {
    z-index: 3;
    top: 0;
    right: auto;
    bottom: 0;
    left: auto;
    height: 100%;
    opacity: 0.86;
    box-shadow:
      inset 1px 0 rgba(0, 0, 0, 0.42),
      inset -1px 0 rgba(255, 255, 255, 0.18);
    mix-blend-mode: normal;
  }

  .bar-status-poison { background: #61d45d; }
  .bar-status-burn { background: #ff9a3d; }
  .bar-status-bleed { background: #ff3f56; }
  .bar-status-weak { background: #64a7ff; }
  .bar-status-vulnerable { background: #b078ff; }

  .sigil {
    --splash-mask: url("/assets/ui/telegram-splash.svg");
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto;
    border: 1px solid rgba(216, 59, 50, 0.72);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(216, 59, 50, 0.32), inset 0 0 20px rgba(216, 59, 50, 0.08);
    animation: pulse 2s ease-in-out infinite;
  }

  .sigil::before {
    position: absolute;
    inset: 9px;
    content: "";
    background: #77716c;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    mask: var(--splash-mask) center / contain no-repeat;
    -webkit-mask: var(--splash-mask) center / contain no-repeat;
  }

  .sigil::after {
    position: absolute;
    inset: -9px;
    content: "";
    border: 1px solid rgba(216, 59, 50, 0.28);
    border-radius: 50%;
    opacity: 0.76;
    animation: bootRingSpin 7s linear infinite;
  }

  .sigil-mark {
    position: absolute;
    inset: 9px;
    overflow: hidden;
    filter: drop-shadow(0 0 14px rgba(216, 59, 50, 0.46));
    animation: sigilLoad 2.4s var(--ease-out) infinite;
  }

  .sigil-mark::before {
    display: block;
    width: 74px;
    height: 74px;
    content: "";
    background: linear-gradient(135deg, #8c171a, #ff5a48 68%, #ffb1a3);
    mask: var(--splash-mask) center / contain no-repeat;
    -webkit-mask: var(--splash-mask) center / contain no-repeat;
  }

  .empty-state {
    display: grid;
    height: 100%;
    min-height: 0;
    place-content: center;
    gap: 12px;
    padding: 18px;
    text-align: center;
  }

  .run-start-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .run-act-jump {
    display: grid;
    width: 50px;
    min-height: 44px;
    padding: 4px;
    place-content: center;
    border-color: rgba(255, 205, 110, 0.55);
    background: linear-gradient(180deg, rgba(91, 57, 24, 0.92), rgba(31, 19, 12, 0.96));
    color: #ffd385;
  }

  .run-act-jump span {
    font-size: 1.2rem;
    line-height: 1;
  }

  .run-act-jump small {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .run-act-jump:disabled {
    opacity: 0.38;
  }

  /* Достигнут текущий предел контента: сигил горит золотом. */
  .sigil-triumph {
    border-color: rgba(255, 205, 110, 0.8);
    box-shadow: 0 0 34px rgba(255, 190, 90, 0.4), inset 0 0 20px rgba(255, 190, 90, 0.12);
  }

  .sigil-triumph::before {
    background: #d8b878;
  }

  .sigil-triumph::after {
    border-color: rgba(255, 205, 110, 0.34);
  }

  .run-victory h1 {
    color: #ffd385;
  }

  .run-victory .run-summary dd {
    color: #ffd385;
  }

  /* Павший забег: тот же сигил, но погасший — без пульса, обесцвеченный. */
  .sigil-fallen {
    border-color: rgba(120, 116, 112, 0.55);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.45), inset 0 0 18px rgba(0, 0, 0, 0.32);
    filter: grayscale(0.75) brightness(0.85);
    animation: none;
  }

  .sigil-fallen::after {
    animation: none;
    opacity: 0.35;
  }

  /* Итоги павшего забега: компактный ряд статов (акт / комнаты / враги). */
  .run-summary {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    margin: 2px auto 2px;
    max-width: 320px;
  }

  .run-summary > div {
    display: grid;
    gap: 2px;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.02);
  }

  .run-summary dt {
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .run-summary dd {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
  }

  .muted {
    color: var(--muted);
  }

  /* Единый каркас карты во всех экранах: арт занимает гибкий верх,
     описание и инфографика складываются auto-строками снизу. */
  .game-card {
    --rarity: var(--line);
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--rarity);
    border-radius: var(--radius);
    background:
      linear-gradient(180deg, rgba(22, 13, 13, 0.96), rgba(5, 5, 5, 0.99)),
      #090707;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 12px 24px rgba(0, 0, 0, 0.36);
  }

  .game-card::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.025);
  }

  .game-card.full,
  .game-card.feature {
    width: 100%;
    aspect-ratio: 0.66;
    padding: 0;
  }

  .game-card.mini {
    width: 100%;
    aspect-ratio: 0.68;
    padding: 0;
  }

  .game-card.battle {
    width: 112px;
    height: 158px;
    padding: 0;
  }

  .rarity-common {
    /* «обычные» — нейтральный серо-зелёный; красный бережём для легендарок */
    --rarity: rgba(124, 142, 124, 0.62);
  }

  .rarity-rare {
    --rarity: rgba(124, 70, 202, 0.82);
  }

  .rarity-epic {
    --rarity: rgba(192, 154, 104, 0.88);
  }

  .rarity-legendary {
    --rarity: rgba(244, 56, 42, 0.96);
  }

  .rarity-unique {
    --rarity: rgba(255, 255, 255, 0.88);
  }

  .game-card.foil {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 20px rgba(124, 70, 202, 0.28);
  }

  .game-card.minted {
    border-style: double;
  }

  /* стоимость — кружок прижат в левый верхний угол арта */
  .card-cost {
    position: absolute;
    z-index: 5;
    top: 2px;
    left: 2px;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border: 1px solid var(--rarity);
    border-radius: 50%;
    background: rgba(6, 5, 5, 0.9);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 800;
    text-shadow: 0 1px 2px #000;
  }

  /* логотип типа — постоянный кружок в правом верхнем углу во всех режимах */
  .card-type-icon {
    position: absolute;
    z-index: 5;
    top: 2px;
    right: 2px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid var(--rarity);
    border-radius: 50%;
    background: rgba(6, 5, 5, 0.9);
    color: var(--rarity);
    font-size: 0.78rem;
    font-style: normal;
  }

  /* звезды копии — по центру сверху; тип карты остаётся правой иконкой */
  .card-stars {
    position: absolute;
    z-index: 4;
    top: 3px;
    left: 50%;
    max-width: calc(100% - 60px);
    padding: 2px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.82), rgba(5, 5, 5, 0.45));
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.58rem;
    letter-spacing: 0;
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .card-stars i {
    font-style: normal;
  }

  .card-stars i.earned {
    color: #ff9f1a;
    text-shadow: 0 0 8px rgba(255, 139, 26, 0.75);
  }

  .card-star-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
  }

  .card-stars.with-progress {
    display: grid;
    width: 78px;
    gap: 1px;
    padding: 2px 5px 3px;
  }

  .card-level-track {
    display: block;
    width: 100%;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
  }

  .card-level-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b94824, #ffb52e);
    box-shadow: 0 0 6px rgba(255, 151, 31, 0.62);
    transition: width 260ms ease;
  }

  .card-evolution-arrow {
    display: inline-grid;
    width: 10px;
    height: 10px;
    place-items: center;
    margin-left: 2px;
    border-radius: 50%;
    color: #ffd36b;
    font-size: 0.52rem;
    line-height: 1;
  }

  .card-evolution-arrow.waiting {
    opacity: 0.48;
  }

  .card-evolution-arrow.ready {
    background: rgba(255, 151, 31, 0.14);
    text-shadow: 0 0 7px #ff9f1a;
  }

  .card-tags span,
  .badges span {
    max-width: 100%;
    padding: 2px 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 5, 5, 0.68);
    color: var(--bone);
    font-size: 0.5rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .card-art {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
  }

  .card-art::before {
    position: absolute;
    content: "";
    background: #080606 var(--card-art) center 18%/cover no-repeat;
    filter: saturate(1.08) contrast(1.04);

    inset: 0;
    opacity: 0.98;

  }

  .card-art::after {
    position: absolute;
    inset: 0;
    content: "";

    background: linear-gradient(180deg, rgba(5, 5, 5, 0.08), transparent 45%, rgba(5, 5, 5, 0.42));

  }

  /* инфографика снизу: чипы под содержимое (текст не обрезается),
     цвет + иконка кодируют эффект, читается без подписи */
  .card-metrics {
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
    padding: 4px 4px 5px;
  }

  .metric {
    --tone: rgba(255, 255, 255, 0.32);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 1px 5px 1px 4px;
    border: 1px solid var(--tone);
    border-radius: 999px;
    background: rgba(5, 5, 5, 0.82);
    line-height: 1;
    white-space: nowrap;
  }

  .metric i {
    color: var(--tone);
    font-size: 0.62rem;
    font-style: normal;
  }

  .metric b {
    color: #fff;
    font-size: 0.6rem;
    line-height: 1;
  }

  .metric small {
    color: var(--bone);
    font-size: 0.46rem;
    line-height: 1;
    text-transform: uppercase;
  }

  .metric-attack {
    --tone: #e0463c;
    background: rgba(224, 70, 60, 0.16);
  }

  .metric-block {
    --tone: #e6c14d;
    background: rgba(230, 193, 77, 0.16);
  }

  .metric-draw {
    --tone: #5fb0d6;
    background: rgba(95, 176, 214, 0.16);
  }

  .metric-bleed {
    --tone: #d2557a;
    background: rgba(210, 85, 122, 0.16);
  }

  .metric-poison {
    --tone: #67bd6f;
    background: rgba(103, 189, 111, 0.16);
  }

  .metric-burn {
    --tone: #e08a3c;
    background: rgba(224, 138, 60, 0.16);
  }

  .metric-weak {
    --tone: #9a6fd0;
    background: rgba(154, 111, 208, 0.16);
  }

  .metric-self-damage {
    --tone: #ff756b;
    background: rgba(140, 22, 24, 0.28);
  }

  .metric-energy {
    --tone: #f0bd55;
    background: rgba(240, 189, 85, 0.16);
  }

  .metric-hex {
    --tone: #c07af0;
    background: rgba(137, 67, 190, 0.2);
  }

  .metric-shards {
    --tone: var(--shard);
    background: rgba(185, 139, 236, 0.18);
  }

  .metric-reward {
    --tone: var(--gold);
    background: rgba(192, 154, 104, 0.18);
  }

  .metric-cost {
    --tone: #6fd0c0;
    background: rgba(111, 208, 192, 0.16);
  }

  /* описание: разделитель сверху, название по центру, текст под ним */
  .card-body {
    z-index: 2;
    display: grid;
    min-width: 0;
    align-content: start;
    justify-items: center;
    gap: 2px;
    padding: 4px 5px 3px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(7, 6, 6, 0.82), rgba(7, 6, 6, 0.97));
    text-align: center;
  }

  .card-body strong,
  .card-body p {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }

  .card-body strong {
    font-family: "Bahnschrift", system-ui, sans-serif;
    font-size: var(--text-sm);
    line-height: 1.05;
    text-transform: uppercase;
    -webkit-line-clamp: 2;
  }

  .card-body p {
    color: #c9c0b6;
    font-size: 0.58rem;
    line-height: 1.18;
    -webkit-line-clamp: 4;
  }

  .card-tags {
    z-index: 1;
    display: flex;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
  }

  .card-actions {
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    align-items: center;
  }

  .card-actions small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-actions button {
    min-height: 28px;
    padding: 2px 6px;
    font-size: var(--text-xs);
  }

  /* мини — миниатюра-превью: только арт, кружки чуть меньше, без типа-подписи */
  .game-card.mini .card-cost {
    width: 18px;
    height: 18px;
    font-size: 0.5rem;
  }

  .game-card.mini .card-type-icon {
    width: 19px;
    height: 19px;
    font-size: 0.56rem;
  }

  /* Мини-карта: звёздность сокращённо (★N) сверху по центру, между стоимостью и типом. */
  .game-card.mini .card-stars.compact {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    max-width: calc(100% - 42px);
    padding: 1px 5px;
    font-size: 0.5rem;
  }

  .card-stars.compact b {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.5rem;
    line-height: 1;
  }

  .game-card.mini .card-metrics {
    position: absolute;
    z-index: 3;
    right: 2px;
    bottom: 2px;
    left: 2px;
    justify-content: center;
    gap: 1px;
    padding: 0;
  }

  .game-card.mini .metric {
    gap: 1px;
    padding: 1px 2px;
  }

  .game-card.mini .metric small {
    display: none;
  }

  /* боевая карта — компактнее шрифты, инфографика без подписей */
  .game-card.battle .card-cost {
    width: 20px;
    height: 20px;
    font-size: 0.52rem;
  }

  .game-card.battle .card-type-icon {
    width: 21px;
    height: 21px;
    font-size: 0.62rem;
  }

  .game-card.battle .card-stars {
    max-width: calc(100% - 50px);
    font-size: 0.46rem;
  }

  .game-card.battle .card-body {
    gap: 1px;
    padding: 3px 4px;
  }

  .game-card.battle .card-body strong {
    font-size: 0.55rem;
    -webkit-line-clamp: 1;
  }

  .game-card.battle .card-body p {
    font-size: 0.48rem;
    line-height: 1.12;
    -webkit-line-clamp: 3;
  }

  .game-card.battle .card-metrics {
    gap: 2px;
    padding: 2px 3px 3px;
  }

  .game-card.battle .metric {
    padding: 1px 4px;
  }

  .game-card.battle .metric small {
    display: none;
  }

  .game-card.battle .card-tags {
    display: none;
  }

  .deck-card,
  .reward-card,
  .hand-card,
  .shop-offer,
  .collection-pick {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }

  /* В смешанной сетке наград карта равняется по верху с плитками шмотки/реликвии
     (кнопка по умолчанию центрирует содержимое по вертикали). */
  .reward-card {
    display: grid;
    align-content: start;
  }

  .deck-card.selected .game-card,
  .collection-pick.active .game-card {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(216, 59, 50, 0.5), 0 0 24px rgba(216, 59, 50, 0.2);
  }

  .avatar-scene {
    --aura: var(--red);
    --eye-top: 12.4%;
    position: relative;
    z-index: 1;
    width: 210px;
    height: 315px;
    filter: drop-shadow(0 0 24px color-mix(in srgb, var(--aura), transparent 66%));
  }

  .avatar-scene.large {
    width: 220px;
    height: 320px;
  }

  .avatar-scene.creator {
    width: 220px;
    height: 300px;
  }

  .avatar-scene.mini {
    width: 58px;
    height: 82px;
    transform: translate(-9px, -8px);
  }

  /* портрет в шапке: крупный план мордочки — сцена больше кнопки, круг её кадрирует */
  .hud-portrait .avatar-scene.mini {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 116px;
    height: 162px;
    transform: translateX(-50%);
    filter: none;
  }

  .hud-portrait .avatar-scene.mini .avatar-stage-glow {
    display: none;
  }

  .avatar-scene.mini-card {
    width: 82px;
    height: 108px;
    margin: auto;
  }

  .aura-violet {
    --aura: var(--violet);
  }

  .aura-ember {
    --aura: var(--gold);
  }

  .aura-none {
    --aura: #34343c;
  }

  .aura-none .avatar-halo,
  .aura-none .avatar-pedestal {
    opacity: 0.12;
  }

  .aura-none .avatar-stage-glow {
    opacity: 0.18;
  }

  /* arcane halo + magic-circle pedestal — only on the big scene sizes */
  .avatar-halo {
    position: absolute;
    z-index: 0;
    top: 30%;
    left: 50%;
    width: 80%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px dashed color-mix(in srgb, var(--aura), transparent 72%);
    border-radius: 50%;
    box-shadow: inset 0 0 40px color-mix(in srgb, var(--aura), transparent 86%);
    opacity: 0.55;
    animation: runeSpin 28s linear infinite;
  }

  .avatar-pedestal {
    position: absolute;
    z-index: 0;
    bottom: 1.5%;
    left: 50%;
    width: 64%;
    height: 13%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--aura), transparent 52%), transparent 70%);
  }

  .avatar-pedestal::before {
    position: absolute;
    inset: 8% 4%;
    content: "";
    border: 1px solid color-mix(in srgb, var(--aura), transparent 58%);
    border-radius: 50%;
    box-shadow: 0 0 16px color-mix(in srgb, var(--aura), transparent 72%);
  }

  .avatar-stage-glow {
    position: absolute;
    inset: 8% 1% auto;
    z-index: 1;
    height: 62%;
    border-radius: 50%;
    box-shadow: inset 0 0 34px color-mix(in srgb, var(--aura), transparent 74%);
    background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--aura), transparent 80%), transparent 66%);
    animation: auraPulse 2.6s ease-in-out infinite;
  }

  /* figure wrapper holds all raster layers + eyes; idle float lives here */
  .avatar-figure {
    position: absolute;
    z-index: 2;
    inset: 0;
  }

  .avatar-scene.large .avatar-figure,
  .avatar-scene.creator .avatar-figure {
    animation: avatarFloat 5.4s ease-in-out infinite;
  }

  /* Composite layers fill the frame; DOM order = stacking. Bound layers carry the
     Workshop's baked front/back exports (already aligned/scaled to 640×960), flat
     layers fall back to the raw library art — both use the same box. */
  .avatar-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
  }

  /* twin glowing eyes (replaces the old visor-bar look) */
  .avatar-eyes {
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
  }

  .avatar-eyes i {
    position: absolute;
    top: var(--eye-top);
    width: 4.4%;
    height: 2.7%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--eye, #e6a46b) 0 42%, transparent 72%);
    filter: drop-shadow(0 0 6px var(--eye, #e6a46b));
    opacity: 0.85;
    animation: eyeFlicker 6s ease-in-out infinite;
  }

  .avatar-eyes i:first-child {
    left: 43%;
  }

  .avatar-eyes i:last-child {
    right: 43%;
  }

  .eyes-crimson {
    --eye: #ef3a3a;
  }

  .eyes-violet {
    --eye: #a866ff;
  }

  .eyes-ember {
    --eye: #f2a35f;
  }

  .game-card.grid {
    width: 100%;
    aspect-ratio: 0.66;
    padding: 0;
  }

  .game-card.grid .card-tags {
    display: none;
  }

  .game-card.grid .card-body strong {
    font-size: 0.66rem;
    -webkit-line-clamp: 2;
  }

  .game-card.grid .card-body p {
    font-size: 0.54rem;
    line-height: 1.14;
    -webkit-line-clamp: 4;
  }

  .utility-backdrop,
  .sheet-backdrop {
    position: fixed;
    z-index: 40;
    inset: 0;
    width: min(100%, var(--frame-max));
    margin: auto;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
  }

  .utility-panel {
    position: fixed;
    z-index: 41;
    top: calc(52px + env(safe-area-inset-top));
    right: max(0px, calc((100vw - var(--frame-max)) / 2));
    bottom: calc(58px + env(safe-area-inset-bottom));
    width: min(88%, 400px);
    padding: 14px 10px 10px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background:
      radial-gradient(circle at 80% 0%, rgba(216, 59, 50, 0.14), transparent 16rem),
      #090707;
    box-shadow: -18px 0 38px rgba(0, 0, 0, 0.68);
  }

  .utility-panel-scroll {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .utility-panel.utility-gram,
  .utility-panel.utility-notifications,
  .utility-panel.utility-settings {
    right: max(6px, calc((100vw - var(--frame-max)) / 2 + 6px));
    left: max(6px, calc((100vw - var(--frame-max)) / 2 + 6px));
    width: auto;
    padding: 14px 10px 10px;
    box-shadow: 0 0 38px rgba(0, 0, 0, 0.72);
  }

  .utility-panel header {
    margin-bottom: 12px;
  }

  .utility-close,
  .sheet-close {
    position: absolute;
    z-index: 3;
    top: 7px;
    right: 7px;
    width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 1.2rem;
  }

  .nft-preview-modal {
    position: fixed;
    z-index: 41;
    top: calc(10px + env(safe-area-inset-top));
    right: max(10px, calc((100vw - var(--frame-max)) / 2 + 10px));
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: max(10px, calc((100vw - var(--frame-max)) / 2 + 10px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
  }

  .nft-preview-modal img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100% - 42px);
    pointer-events: auto;
    object-fit: contain;
  }

  .nft-preview-modal footer {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    max-width: 100%;
    pointer-events: auto;
    text-align: center;
  }

  .nft-preview-modal footer strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nft-preview-modal footer small {
    color: var(--red);
    white-space: nowrap;
  }

  .utility-list,
  .setting-list {
    display: grid;
    gap: 7px;
  }

  .utility-list article,
  .setting-list article,
  .setting-toggle {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 5px 8px;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 13, 13, 0.84);
    text-align: left;
  }

  .utility-list article.unread {
    border-color: var(--line-strong);
  }

  .utility-list article > span {
    grid-row: span 2;
    color: var(--red);
    font-size: 1rem;
  }

  .utility-list article button {
    grid-column: 2;
  }

  .utility-list p,
  .setting-list small {
    color: var(--muted);
    font-size: var(--text-xs);
  }

  /* Информационные строки настроек (Язык, Помощь) — без фантомной колонки под
     иконку: подпись слева, значение справа, в одну строку. */
  .setting-list .setting-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .setting-list .setting-info strong {
    flex: 0 0 auto;
  }

  .setting-list .setting-info small {
    flex: 1;
    text-align: right;
  }

  /* Сбор технических данных — внизу окна настроек, по центру. */
  .settings-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--muted);
    font-size: var(--text-xs);
    text-align: center;
  }

  /* ── Справка (utility-панель help): аккордеоны страниц + глоссарий. ── */
  .help-topics {
    display: grid;
    gap: 6px;
  }

  .help-topic {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 13, 13, 0.84);
  }

  .help-topic summary {
    padding: 9px 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: var(--text-sm);
    list-style: none;
  }

  .help-topic summary::-webkit-details-marker {
    display: none;
  }

  .help-topic summary::after {
    content: "▾";
    float: right;
    color: var(--muted);
    transition: transform 0.15s;
  }

  .help-topic[open] summary::after {
    transform: rotate(180deg);
  }

  .help-topic-body {
    padding: 0 10px 9px;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.45;
  }

  .help-topic-body p {
    margin: 0 0 7px;
  }

  .help-topic-body ul {
    margin: 0 0 7px;
    padding-left: 16px;
    display: grid;
    gap: 3px;
  }

  .help-glossary {
    margin: 0;
    padding: 0 10px 9px;
    display: grid;
    gap: 6px;
  }

  .help-glossary dt {
    font-weight: 700;
    font-size: var(--text-xs);
  }

  .help-glossary dd {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.4;
  }

  .help-glossary-title {
    margin: 12px 0 6px;
    font-size: var(--text-sm);
  }

  .help-empty {
    color: var(--muted);
    font-size: var(--text-xs);
  }

  /* Контекстная кнопка «?» на сложных экранах: открывает панель «Справка»
     (раздел текущего экрана раскрывается сам). Нарочно приглушённая. */
  .screen-help-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(18, 13, 13, 0.7);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
  }

  .path-title .screen-help-btn {
    position: absolute;
    top: 4px;
    right: 4px;
  }

  .combat-help-btn {
    position: static;
    z-index: 2;
    flex: 0 0 auto;
    pointer-events: auto;
  }

  /* ── Coach-marks обучалки: подсветка якоря + карточка с текстом шага. ──
     Слой живёт в #coach-root поверх экрана, но ПОД utility-панелями (z 40/41 —
     они не видны одновременно, см. pendingTutorialStep) и ПОД .ui-tip (z 200). */
  .coach-layer {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
  }

  .coach-ring {
    position: absolute;
    border: 2px solid var(--gold, #e8c46a);
    border-radius: 10px;
    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.55), 0 0 14px rgba(232, 196, 106, 0.6);
    transition: top 0.2s, left 0.2s, width 0.2s, height 0.2s;
  }

  .coach-card {
    position: absolute;
    padding: 10px 12px;
    border: 1px solid rgba(232, 196, 106, 0.4);
    border-radius: 10px;
    background: rgba(16, 11, 12, 0.96);
    pointer-events: auto;
  }

  .coach-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: var(--text-sm);
    color: var(--gold, #e8c46a);
  }

  .coach-card p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.45;
  }

  .coach-card-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .coach-card-actions .coach-skip {
    background: none;
    border: none;
    color: var(--muted);
    font-size: var(--text-xs);
    text-decoration: underline;
  }

  .coach-card-actions .coach-next {
    padding: 6px 14px;
    border: 1px solid rgba(232, 196, 106, 0.5);
    border-radius: 8px;
    background: rgba(232, 196, 106, 0.12);
    color: var(--gold, #e8c46a);
    font-weight: 700;
    font-size: var(--text-xs);
  }

  /* Предупреждение тестового режима кошелька (B6). */
  .gram-testmode-note {
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #e8c46a, transparent 55%);
    border-radius: 8px;
    background: rgba(232, 196, 106, 0.1);
    color: #f0d79a;
    font-size: var(--text-xs);
    line-height: 1.35;
  }

  .gram-testmode-note b {
    color: #ffe6a8;
  }

  .mail-header small,
  .mail-detail-header small {
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .mail-admin-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    padding: 7px 10px;
    border-color: var(--line-gold);
    background: linear-gradient(110deg, rgba(113, 73, 21, 0.38), rgba(52, 16, 18, 0.84));
    text-align: left;
  }

  .mail-admin-entry span {
    color: var(--gold);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mail-admin-entry strong {
    grid-column: 1;
  }

  .mail-admin-entry b {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--gold);
    font-size: 1rem;
  }

  .mail-tabs {
    margin-bottom: 8px;
  }

  .mail-row {
    --mail-tone: #8f9dad;
    --mail-glow: rgba(143, 157, 173, 0.16);
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    padding: 10px 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 13, 13, 0.84);
    text-align: left;
  }

  .mail-row.has-image {
    grid-template-columns: 28px 48px minmax(0, 1fr);
  }

  .mail-thumb {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    object-fit: cover;
    background: rgba(0, 0, 0, 0.32);
  }

  .mail-row.unread {
    border-color: var(--mail-tone);
    background: linear-gradient(100deg, var(--mail-glow), rgba(18, 13, 13, 0.88));
  }

  .mail-kind {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--mail-tone) 60%, transparent);
    background: var(--mail-glow);
    color: var(--mail-tone);
  }

  .mail-kind svg {
    width: 19px;
    height: 19px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
  }

  .mail-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .mail-copy strong,
  .mail-copy-text,
  .mail-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mail-copy-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .mail-copy small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.5rem;
  }

  .mail-copy em {
    color: var(--gold);
    font-size: 0.52rem;
    font-style: normal;
    white-space: nowrap;
  }

  .mail-unread-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mail-tone);
    box-shadow: 0 0 8px var(--mail-tone);
  }

  .mail-type-mail {
    --mail-tone: #8f9dad;
    --mail-glow: rgba(143, 157, 173, 0.16);
  }

  .mail-accent-crimson {
    --mail-tone: #e35252;
    --mail-glow: rgba(227, 82, 82, 0.17);
  }

  .mail-accent-gold,
  .mail-theme-premium,
  .mail-severity-warning {
    --mail-tone: #d7ae63;
    --mail-glow: rgba(215, 174, 99, 0.17);
  }

  .mail-accent-violet,
  .mail-theme-event {
    --mail-tone: #a879ef;
    --mail-glow: rgba(168, 121, 239, 0.18);
  }

  .mail-severity-info {
    --mail-tone: #6ec4d8;
    --mail-glow: rgba(110, 196, 216, 0.16);
  }

  .mail-severity-critical,
  .mail-theme-standard {
    --mail-tone: #e35252;
    --mail-glow: rgba(227, 82, 82, 0.17);
  }

  .mail-empty {
    display: grid;
    min-height: 180px;
    place-content: center;
    gap: 4px;
    color: var(--muted);
    text-align: center;
  }

  .mail-detail-header {
    --mail-tone: #8f9dad;
    --mail-glow: rgba(143, 157, 173, 0.16);
    display: grid;
    gap: 5px;
    padding-right: 34px;
  }

  .mail-detail-toolbar {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    padding: 0 42px 8px 0;
    background: linear-gradient(180deg, #090707 76%, transparent);
  }

  .mail-detail-toolbar button {
    min-height: 32px;
  }

  .mail-detail-type {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--mail-tone);
  }

  .mail-detail-type .eyebrow {
    display: grid;
    gap: 2px;
    margin: 0;
  }

  .mail-detail-type small {
    color: var(--muted);
    font-size: 0.5rem;
    text-transform: none;
  }

  .mail-detail {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--mail-tone) 42%, rgba(255, 255, 255, 0.09));
    background: linear-gradient(160deg, var(--mail-glow), rgba(18, 13, 13, 0.84) 38%);
  }

  .mail-detail-image {
    width: 100%;
    max-height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    object-fit: cover;
    background: rgba(0, 0, 0, 0.35);
  }

  .mail-formatted-text {
    color: #e4d8d0;
    font-size: var(--text-sm);
    line-height: 1.5;
    white-space: pre-wrap;
  }

  .mail-formatted-text code,
  .mail-copy-text code {
    padding: 1px 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.42);
    color: #f0c982;
    font-family: Consolas, monospace;
  }

  .mail-formatted-text pre {
    max-width: 100%;
    margin: 6px 0;
    padding: 8px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.42);
    white-space: pre;
  }

  .mail-formatted-text pre code {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .tg-spoiler {
    border-radius: 2px;
    background: currentColor;
    transition: background 120ms ease;
  }

  .tg-spoiler:hover,
  .tg-spoiler:focus,
  .tg-spoiler:active {
    background: rgba(255, 255, 255, 0.12);
  }

  .mail-reward {
    display: grid;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--line-gold);
    background: rgba(74, 48, 16, 0.18);
  }

  .mail-reward small,
  .mail-reward p {
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .mail-reward strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--gold);
  }

  .mail-reward-item {
    white-space: nowrap;
  }

  .mail-detail-actions {
    display: grid;
    gap: 6px;
  }

  .setting-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 48px;
  }

  .setting-toggle span {
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .setting-toggle.active span {
    color: var(--red);
  }

  .gram-hub-header {
    display: grid;
    gap: 3px;
    padding-right: 42px;
  }

  .gram-hub-header small {
    color: var(--muted);
  }

  .gram-balance-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid rgba(101, 216, 255, 0.34);
    background:
      radial-gradient(circle at 12% 18%, rgba(101, 216, 255, 0.18), transparent 9rem),
      linear-gradient(145deg, rgba(7, 24, 31, 0.96), rgba(10, 8, 10, 0.98));
  }

  .gram-orb {
    display: grid;
    width: 54px;
    height: 54px;
    grid-row: span 2;
    place-items: center;
    border: 1px solid #77ddff;
    border-radius: 50%;
    color: #a7ebff;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: 0 0 22px rgba(101, 216, 255, 0.25), inset 0 0 18px rgba(101, 216, 255, 0.12);
  }

  .gram-balance-card strong,
  .gram-balance-card small,
  .gram-balance-card span {
    display: block;
  }

  .gram-balance-card strong {
    color: #dff8ff;
    font-size: 1.35rem;
  }

  .gram-balance-card span {
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .gram-balance-card span.connected {
    color: #78e2b2;
  }

  .gram-balance-card button {
    grid-column: 1 / 3;
  }

  .gram-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
  }

  .gram-action-grid button {
    display: grid;
    min-width: 0;
    min-height: 76px;
    place-items: center;
    gap: 2px;
    padding: 7px 3px;
  }

  .gram-action-grid b {
    color: #7ddfff;
    font-size: 1.1rem;
  }

  .gram-action-grid span,
  .gram-action-grid small {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gram-action-grid span {
    font-size: 0.58rem;
    font-weight: 900;
  }

  .gram-action-grid small {
    color: var(--muted);
    font-size: 0.48rem;
  }

  .gram-chain-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.08);
  }

  .gram-chain-card div {
    display: grid;
    min-width: 0;
    gap: 3px;
    padding: 8px 5px;
    background: #0d0a0b;
  }

  .gram-chain-card small,
  .gram-chain-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gram-chain-card small {
    color: var(--muted);
    font-size: 0.48rem;
  }

  .gram-chain-card strong {
    font-size: 0.56rem;
  }

  .gram-scroll-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Раздел свитков подписан заголовком, а не 0.48rem-строчкой `small`: без него
     было непонятно, к чему относятся кнопки крафта и покупки. */
  /* Незавершённый бой блокирует половину игры — состояние должно быть видно
     без попытки что-то сделать. */
  .combat-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 90, 90, 0.35);
    background: rgba(120, 20, 24, 0.9);
    color: var(--ink);
    font-size: 0.66rem;
  }

  .combat-banner[hidden] {
    display: none;
  }

  .listing-price-field {
    display: grid;
    gap: 3px;
    margin: 6px 0;
  }

  .listing-price-field small {
    color: var(--muted);
    font-size: 0.6rem;
  }

  .listing-price-field input {
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #0d0a0b;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
  }

  [data-action].action-busy {
    opacity: 0.45;
    pointer-events: none;
  }

  .gram-scroll-title {
    grid-column: 1 / -1;
    margin: 0;
    padding: 7px 8px 5px;
    background: #0d0a0b;
    color: var(--ink);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
  }

  .gram-scroll-card .confirm-actions {
    grid-column: 1 / -1;
    padding: 6px;
  }

  .gram-scroll-card .confirm-actions button {
    min-width: 0;
    padding: 9px 6px;
    line-height: 1.25;
    white-space: normal;
  }

  .nft-burn-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
  }

  .nft-burn-summary span {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 7px;
    background: #0d0a0b;
  }

  .nft-burn-summary span:last-child {
    grid-column: 1 / -1;
  }

  .nft-burn-summary small {
    color: var(--muted);
    font-size: 0.55rem;
  }

  .nft-burn-summary b {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gram-links article {
    grid-template-columns: minmax(0, 1fr);
  }

  .gram-links article p,
  .gram-links article button {
    grid-column: 1;
  }

  .confirm-panel {
    position: fixed;
    z-index: 41;
    top: 50%;
    right: max(10px, calc((100vw - var(--frame-max)) / 2 + 10px));
    left: max(10px, calc((100vw - var(--frame-max)) / 2 + 10px));
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid var(--line-strong);
    background: #0c0909;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.8);
    transform: translateY(-50%);
  }

  .confirm-panel p:not(.eyebrow) {
    color: #d4c6bb;
  }

  .maintenance-panel {
    border-color: rgba(227, 82, 82, 0.72);
    background: linear-gradient(160deg, #130b0b, #090707 68%);
  }

  .maintenance-panel h2 {
    color: #ffe6d7;
  }

  .maintenance-meta {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .confirm-actions.single {
    grid-template-columns: 1fr;
  }

  .danger-action {
    border-color: #ef443a;
    background: linear-gradient(180deg, #9b1d20, #36090b);
    color: white;
  }

}

/* ══════════════════════════════════════════════════════════════════════
   SCREENS — поэкранные стили: home / character / map / combat / shop / collection / inventory / settings / mail
   ══════════════════════════════════════════════════════════════════════ */
@layer screens {
  /* ════ Character creator — Cyberpunk-style ════ */
  .creator-layout {
    display: grid;
    grid-template-rows: auto minmax(0, 1.05fr) auto minmax(0, 1.2fr) auto;
    height: 100%;
    min-height: 0;
    gap: 8px;
    overflow: hidden;
  }

  .creator-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .creator-head-titles {
    min-width: 0;
  }

  .creator-head-titles h1 {
    overflow: hidden;
    font-size: 1.1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .creator-head-titles p {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .creator-dice {
    width: 42px;
    min-height: 42px;
    padding: 0;
    border-color: var(--line-gold);
    color: var(--red);
    font-size: 0.95rem;
    letter-spacing: -0.08em;
  }

  .creator-stage {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line-gold);
    box-shadow: var(--inset-sheen);
    background:
      radial-gradient(circle at 40% 40%, rgba(216, 59, 50, 0.22), transparent 56%),
      linear-gradient(0deg, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.22) 62%, rgba(5, 5, 5, 0.5)),
      url("/assets/ui/home_bg.webp") center/cover;
  }

  /* cyberpunk scanline veil */
  .creator-stage::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: 0.4;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
  }

  .creator-stage .avatar-scene.creator {
    z-index: 1;
    width: 176px;
    height: 240px;
    transform: translateX(-12px);
  }

  /* same compact one-column stat stack as on the home character panel */
  .creator-stats {
    position: absolute;
    z-index: 2;
    top: 44px;
    right: 8px;
    display: grid;
    gap: 3px;
    width: 64px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* compact stat pill: short label + value (no bars, no implied max), hover = effect */
  .creator-stats li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 5, 5, 0.5);
    backdrop-filter: blur(3px);
    cursor: help;
  }

  .creator-stats li small {
    color: var(--muted);
    font-size: 0.5rem;
  }

  .creator-stats li b {
    color: var(--bone);
    font-size: 0.7rem;
  }

  .creator-nameplate {
    position: absolute;
    z-index: 2;
    bottom: 8px;
    left: 8px;
    display: grid;
    gap: 2px;
    width: min(60%, 210px);
  }

  .creator-nameplate label {
    color: var(--muted);
    font-size: 0.55rem;
    text-transform: uppercase;
  }

  .creator-name-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
  }

  .creator-nameplate input {
    min-height: 38px;
    border-color: var(--line-gold);
    background: rgba(5, 5, 5, 0.72);
    backdrop-filter: blur(4px);
  }

  .creator-nameplate.locked input {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.58);
    cursor: not-allowed;
  }

  .creator-rename {
    width: 38px;
    min-height: 38px;
    padding: 0;
    border-color: var(--line-gold);
    color: var(--gold);
    font-size: 1rem;
  }

  /* section switch (Внешность / Снаряжение / Путь) replaces the old 5 micro-tabs */
  .creator-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .creator-switch button {
    min-height: 42px;
    padding: 4px 2px;
    overflow: hidden;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .creator-switch button.active {
    border-color: var(--line-strong);
    background: linear-gradient(180deg, rgba(112, 17, 21, 0.62), rgba(16, 12, 12, 0.92));
    box-shadow: var(--ring-crimson);
    color: #fff1ec;
  }

  .creator-panel {
    display: grid;
    grid-auto-rows: max-content;
    gap: 8px;
    min-height: 0;
    padding: 9px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* ── category cycler:  LABEL  ‹  value  ›  ── */
  .cyc-list {
    display: grid;
    gap: 7px;
  }

  .cyc-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .cyc-label {
    overflow: hidden;
    color: var(--bone);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.05;
    text-transform: uppercase;
    white-space: normal;
  }

  .cyc-control {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 5px;
    align-items: stretch;
  }

  .cyc-arrow {
    min-height: 36px;
    padding: 0;
    color: var(--red);
    font-size: 1.1rem;
    line-height: 1;
  }

  .cyc-value {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 4px;
    overflow: hidden;
    border: 1px solid var(--line-gold);
    background: rgba(5, 5, 5, 0.5);
    font-size: 0.66rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Путь: class cards (description shown once) + starting relic ── */
  .path-classes {
    display: grid;
    gap: 6px;
  }

  .path-class {
    display: grid;
    gap: 3px;
    padding: 8px;
    text-align: left;
  }

  .path-class strong {
    font-size: 0.74rem;
  }

  .path-class span {
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: 0;
    text-transform: none;
  }

  .path-class.active {
    border-color: var(--line-strong);
    background: linear-gradient(180deg, rgba(112, 17, 21, 0.5), rgba(16, 12, 12, 0.92));
    box-shadow: var(--ring-crimson);
  }

  .path-relic {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid var(--line-gold);
    background: var(--glass-soft);
  }

  .relic-lore {
    color: var(--muted);
    font-size: 0.56rem;
    line-height: 1.22;
  }

  /* ─── Onboarding: full-screen creation (no topbar/nav) → more room ─── */
  .creator-onboarding .creator-layout {
    grid-template-rows: auto minmax(0, 1.05fr) auto minmax(0, 1.15fr) auto;
    gap: 10px;
  }

  .creator-onboarding .creator-head-titles h1 {
    font-size: 1.3rem;
  }

  .creator-onboarding .creator-stage .avatar-scene.creator {
    width: 170px;
    height: 229px;
    transform: translate(-14px, -22px);
  }

  .creator-onboarding .creator-stats {
    top: 44px;
    gap: 3px;
  }

  .creator-onboarding .creator-switch button {
    min-height: 48px;
  }

  .creator-onboarding .cyc-arrow {
    min-height: 40px;
  }

  .creator-onboarding .cyc-value {
    font-size: 0.72rem;
  }

  .creator-onboarding .cyc-label {
    font-size: 0.7rem;
  }

  .creator-onboarding .path-class strong {
    font-size: 0.8rem;
  }

  .creator-onboarding .path-class span {
    font-size: 0.64rem;
  }

  .cards-screen {
    display: grid;
    gap: 8px;
    min-width: 0;

    align-content: start;

    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;

  }

  .filters-ornate {
    border-bottom: 1px solid rgba(178, 138, 90, 0.18);
  }

  .collection-rail {
    display: grid;
    gap: 6px;

    min-height: 0;

  }

  .collection-mini-grid {
    display: grid;
    /* ряды по содержимому и прижаты вверх: при 1–2 рядах ячейка не растягивается
       на всю высоту рельса (иначе карта центрируется, а бейдж «в колоде» уезжает). */
    grid-auto-rows: max-content;
    align-content: start;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;

  }

  .hand {
    display: flex;
    max-width: 100%;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    /* без scroll-snap: привязка к краям карт делала прокрутку рывками
       (карты «прыгали» и наезжали друг на друга). Прокрутка — свободная и плавная. */

    min-height: 0;
    align-items: stretch;
    /* карты не должны прокручиваться по вертикали — только горизонтальная лента */
    overflow-y: hidden;
    padding-bottom: 0;

  }

  .path-screen {
    position: relative;
    display: grid;
    grid-template-rows: 46px minmax(0, 1fr) 62px;
    height: 100%;
    min-height: 0;
    gap: 6px;
    overflow: hidden;
  }

  .path-title {
    position: relative; /* якорь для абсолютной кнопки «?» (.screen-help-btn) */
    display: grid;
    align-content: center;
    text-align: center;
  }

  .path-title h1 {
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .path-title small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .path-map {
    position: relative;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
    border: 1px solid rgba(178, 138, 90, 0.18);
    background:
      radial-gradient(circle at 50% 84%, rgba(216, 59, 50, 0.22), transparent 8rem),
      linear-gradient(180deg, rgba(5, 5, 5, 0.18), rgba(5, 5, 5, 0.9)),
      url("/assets/ui/home_bg.webp") center/cover;
  }

  /* Если у акта есть свой арт, дефолтный home_bg полностью отключается. */
  .path-map.themed {
    background: #050505;
  }

  .path-map::-webkit-scrollbar {
    display: none;
  }

  .path-map-canvas {
    position: relative;
    width: 100%;
    height: var(--map-height);
    min-height: 100%;
  }

  /* Тема акта — единственный фон карты, под линиями и узлами маршрута. */
  .path-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    filter: brightness(0.62) saturate(0.9);
    z-index: 0;
    pointer-events: none;
  }

  .path-backdrop::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.1), rgba(5, 5, 5, 0.54));
    content: "";
  }
  /* Линии и узлы уже position:absolute — поднимаем их над фоновым артом локации. */
  .path-map.themed .path-lines {
    z-index: 1;
  }

  .path-map.themed .path-node {
    z-index: 2;
  }

  .path-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }

  .path-lines line {
    fill: none;
    stroke: rgba(128, 118, 110, 0.28);
    stroke-width: 4px;
    stroke-dasharray: 0.8 1.8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .path-lines line.traveled {
    stroke: rgba(178, 92, 86, 0.62);
    stroke-dasharray: none;
  }

  /* Отрезок, ведущий к активному (доступному) узлу — ярче пройденных. */
  .path-lines line.active {
    stroke: rgba(255, 108, 84, 0.95);
    stroke-dasharray: none;
  }

  .path-lines line.skipped {
    opacity: 0.18;
  }

  .path-node {
    --node-art-size: 62px;
    --node-art-available-size: 64px;
    --node-art-completed-size: 56px;
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0;
    overflow: visible;
    transform: translate(-50%, -50%) rotate(45deg);
    border-color: rgba(178, 138, 90, 0.46);
    /* Near-opaque chip + a dark contrast ring so mid-map nodes never wash out against the
       bright centre of the location art (otherwise the middle reads as an empty "hole"). */
    background: rgba(7, 6, 6, 0.95);
    box-shadow: 0 0 0 3px rgba(4, 4, 4, 0.55), 0 2px 10px rgba(0, 0, 0, 0.6);
    z-index: 2;
  }

  .path-node.battle,
  .path-node.elite,
  .path-node.boss {
    --node-art-size: 58px;
    --node-art-available-size: 60px;
    --node-art-completed-size: 52px;
  }

  /* Иерархия размеров иконок: активный > непройденный > пройденный; боевые узлы компактнее. */
  .path-node-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: var(--node-art-size);
    height: var(--node-art-size);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .path-node.available .path-node-visual {
    width: var(--node-art-available-size);
    height: var(--node-art-available-size);
  }

  .path-node-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
  }

  .path-node-fallback {
    color: var(--red);
    font-size: var(--text-md);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  }

  /* Смещение 21px по обеим осям ромба ≈ 29.4px вниз по экрану: нижний край
     подписи совпадает с нижней вершиной ромба (25px·√2 ≈ 35.4px минус полвысоты пилюли). */
  .path-node small {
    position: absolute;
    top: calc(50% + 21px);
    left: calc(50% + 21px);
    width: 86px;
    padding: 1px 5px;
    overflow: hidden;
    border: 1px solid rgba(178, 138, 90, 0.2);
    border-radius: 999px;
    background: rgba(5, 5, 5, 0.7);
    color: var(--muted);
    font-size: 0.48rem;
    line-height: 1.05;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .path-node.available {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(4, 4, 4, 0.55), 0 0 18px rgba(216, 59, 50, 0.45);
  }

  .path-node.golden-treasure {
    border-color: rgba(255, 202, 92, 0.92);
    box-shadow: 0 0 0 3px rgba(35, 23, 4, 0.72), 0 0 22px rgba(255, 184, 48, 0.58);
  }

  .path-node.golden-treasure .path-node-visual img {
    filter: sepia(0.7) saturate(1.65) brightness(1.16) drop-shadow(0 0 8px rgba(255, 193, 62, 0.85));
  }

  .path-node.golden-treasure small {
    border-color: rgba(255, 202, 92, 0.5);
    color: #ffd77b;
  }

  .path-node:disabled {
    opacity: 1;
  }

  .path-node.completed {
    border-color: rgba(132, 122, 116, 0.38);
    background: rgba(7, 7, 7, 0.92);
    box-shadow: 0 0 0 2px rgba(4, 4, 4, 0.55), 0 1px 7px rgba(0, 0, 0, 0.55);
  }

  .path-node.completed .path-node-visual {
    width: var(--node-art-completed-size);
    height: var(--node-art-completed-size);
  }

  .path-node.completed .path-node-visual img {
    filter: grayscale(0.46) saturate(0.58) brightness(0.72) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.82));
    opacity: 0.9;
  }

  .path-node.completed small {
    border-color: rgba(132, 122, 116, 0.18);
    color: rgba(199, 192, 184, 0.68);
  }

  .path-node.skipped {
    opacity: 0.28;
    filter: grayscale(1) brightness(0.58);
  }

  .path-reward {
    position: absolute;
    z-index: 2;
    top: 56px;
    right: 7px;
    display: grid;
    width: 76px;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--line);
    background: rgba(5, 5, 5, 0.74);
  }

  .path-reward b,
  .path-reward span,
  .path-reward em {
    overflow: hidden;
    font-size: 0.55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .path-reward b {
    color: var(--red);
  }

  .path-reward em {
    color: var(--muted);
    font-style: normal;
  }

  .path-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 6px;
    align-items: center;
    padding: 6px;
  }

  .path-footer strong,
  .path-footer small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .path-footer strong {
    font-size: 0.58rem;
    line-height: 1.1;
  }

  .path-footer button {
    font-size: 0.58rem;
  }

  .path-footer .path-abandon-action {
    min-height: 20px;
    margin-top: 3px;
    padding: 2px 5px;
    font-size: 0.5rem;
  }

  .event-panel {
    position: absolute;
    z-index: 8;
    right: 6px;
    bottom: 68px;
    left: 6px;
    display: grid;
    max-height: calc(100% - 120px);
    gap: 7px;
    padding: 8px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
  }

  .event-panel.golden-treasure {
    border-color: rgba(255, 202, 92, 0.72);
    box-shadow: 0 0 28px rgba(255, 184, 48, 0.2);
  }

  .event-panel.golden-treasure h2,
  .event-panel.golden-treasure .eyebrow {
    color: #ffd77b;
  }

  .event-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .event-choice-grid button {
    display: grid;
    min-height: 94px;
    align-content: start;
    gap: 4px;
    padding: 6px;
    text-align: left;
  }

  .event-choice-grid strong {
    font-size: 0.62rem;
    line-height: 1.08;
  }

  /* Недоступный способ (взлом тайника: не хватает статов/карт/ресурсов). */
  .event-choice-grid button:disabled {
    opacity: 0.45;
    filter: grayscale(0.5);
  }

  .event-choice-grid span {
    color: var(--red);
    font-size: 0.56rem;
    font-weight: 800;
  }

  .reward-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .reward-hint {
    margin: 4px 0 2px;
    color: var(--gold);
    font-size: 0.62rem;
    text-align: center;
  }

  /* Лунный Маркет: ряды по типу лота (карты / шмот / реликвии), 2–3 лота в ряду. */
  .shop-row {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    margin-bottom: 8px;
  }

  /* Карточный лот: полноценный слот карты (как в наградах) + цена под ним. */
  .shop-offer-card {
    display: grid;
    align-content: start;
    gap: 4px;
  }

  .shop-hint {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.58rem;
  }

  .shop-offer {
    display: grid;
    gap: 4px;
  }

  .shop-offer b {
    color: var(--gold);
    font-size: var(--text-xs);
    text-align: center;
  }

  .shop-offer.sold {
    opacity: 0.5;
    cursor: default;
  }

  .shop-offer.sold .shop-price {
    color: var(--muted);
  }

  /* Единый формат плитки лота (карта/шмот/реликвия): визуал + имя + эффект + цена. */
  .shop-offer-tile {
    display: grid;
    grid-template-rows: 1fr auto auto auto;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--rarity, var(--line));
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.52));
    text-align: center;
    min-height: 150px;
  }

  .shop-offer-art {
    display: grid;
    place-items: center;
    min-height: 60px;
    overflow: hidden;
  }

  .shop-offer-art img {
    max-width: 100%;
    max-height: 78px;
    object-fit: contain;
  }

  .shop-offer-glyph {
    font-size: 2.2rem;
    line-height: 1;
  }

  .shop-offer-name {
    font-size: 0.62rem;
    color: var(--ink);
    line-height: 1.2;
  }

  .shop-offer-desc {
    font-size: 0.52rem;
    color: var(--muted);
    line-height: 1.25;
  }

  .shop-offer-tile.relic-negative {
    border-style: dashed;
  }

  .gear-loot-tile {
    display: grid;
    grid-template-rows: var(--gear-loot-art-row, 64px) auto auto minmax(0, 1fr) var(--gear-loot-footer-row, 0);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--gear-loot-height, 160px);
    min-height: var(--gear-loot-height, 160px);
    align-items: start;
    justify-items: center;
    gap: 3px;
    overflow: hidden;
    padding: 7px 6px;
    border: 1px solid var(--rarity, var(--line));
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.54));
    color: var(--ink);
    font: inherit;
    text-align: center;
  }

  .gear-loot-reward {
    --gear-loot-art-row: 62px;
    --gear-loot-height: 160px;
  }

  .gear-loot-market {
    --gear-loot-art-row: 74px;
    --gear-loot-footer-row: 18px;
    --gear-loot-height: 184px;
  }

  .gear-loot-art {
    display: grid;
    width: 100%;
    height: var(--gear-loot-art-row, 64px);
    min-width: 0;
    place-items: center;
    overflow: hidden;
  }

  .gear-loot-art img {
    max-width: min(100%, 88px);
    max-height: calc(var(--gear-loot-art-row, 64px) + 6px);
    object-fit: contain;
  }

  .gear-loot-glyph {
    font-size: 2rem;
    line-height: 1;
  }

  .gear-loot-tile .gear-loot-name {
    max-width: 100%;
    color: var(--ink);
    font-size: 0.57rem;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .gear-loot-rarity {
    color: var(--rarity, var(--muted));
    font-size: 0.48rem;
    line-height: 1;
    text-transform: uppercase;
  }

  .gear-loot-stats {
    display: flex;
    min-width: 0;
    max-width: 100%;
    align-content: start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.46rem;
    line-height: 1.08;
  }

  .gear-loot-stat {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
  }

  .gear-loot-stat i {
    color: var(--rarity, var(--gold));
    font-style: normal;
  }

  .gear-loot-footer {
    display: grid;
    min-height: 18px;
    align-self: end;
    place-items: end center;
  }

  .gear-loot-footer .shop-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
  }

  .sold-label {
    color: var(--muted);
  }

  /* ── Реликвии: орб-иконка (тап → попап .ui-tip). Никакого hover. ── */
  .relic-orb {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--rarity, var(--line));
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.55));
    box-shadow: 0 0 6px -1px var(--rarity, transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .relic-orb-glyph {
    font-size: 0.92rem;
    line-height: 1;
  }

  .relic-orb.relic-negative {
    border-style: dashed;
    filter: saturate(0.8);
  }

  /* Столбик реликвий на карте RUN — левый край, сверху вниз, поверх карты. */
  .map-relics {
    position: sticky;
    top: 8px;
    left: 8px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    width: max-content;
    margin: 8px 0 0 8px;
    gap: 5px;
    pointer-events: none;
  }

  .map-relics .relic-orb {
    pointer-events: auto;
  }

  .combat-relics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
  }

  /* Плитки выбора реликвии (награда/святилище): глиф + имя + редкость + описание. */
  .relic-choice-block {
    margin: 6px 0;
  }

  .relic-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 4px;
  }

  .relic-choice {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 3px;
    padding: 8px 6px;
    border: 1px solid var(--rarity, var(--line));
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
    text-align: center;
  }

  .relic-choice-glyph {
    font-size: 1.7rem;
    line-height: 1;
  }

  .relic-choice b {
    font-size: 0.6rem;
    color: var(--ink);
  }

  .relic-choice-rarity {
    color: var(--rarity, var(--muted));
    font-size: 0.5rem;
    text-transform: uppercase;
  }

  .relic-choice-desc {
    color: var(--muted);
    font-size: 0.52rem;
    line-height: 1.25;
  }

  .relic-choice.relic-negative {
    border-style: dashed;
  }

  .relic-choice.selected {
    box-shadow: 0 0 0 2px var(--rarity, var(--gold));
    background: rgba(0, 0, 0, 0.6);
  }

  .run-skip {
    margin-top: 6px;
  }

  /* Альманах реликвий (вкладка «Реликвии» в коллекции): найденные открыты,
     остальные — под замком. Тап → попап .ui-tip. */
  .relic-almanac-head {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.62rem;
  }

  .relic-almanac-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .relic-almanac-tile {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid var(--rarity, var(--line));
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .relic-almanac-tile.is-new {
    box-shadow: 0 0 0 1px var(--rarity, var(--gold)), 0 0 10px -2px var(--rarity, var(--gold));
  }

  .relic-new-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold, #f4c04a);
    box-shadow: 0 0 6px var(--gold, #f4c04a);
  }

  .almanac-claimbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.32);
  }

  .almanac-claimbar p {
    color: var(--muted);
    font-size: 0.6rem;
    line-height: 1.3;
  }

  .almanac-claimbar button {
    width: 100%;
    white-space: nowrap;
  }

  .relic-almanac-glyph {
    font-size: 1.6rem;
    line-height: 1;
  }

  .relic-almanac-tile b {
    font-size: 0.56rem;
    color: var(--ink);
  }

  .relic-almanac-rarity {
    color: var(--rarity, var(--muted));
    font-size: 0.48rem;
    text-transform: uppercase;
  }

  .relic-almanac-tile.locked {
    opacity: 0.44;
    border-style: dashed;
    filter: grayscale(0.7);
  }

  .relic-almanac-tile.relic-negative {
    border-style: dashed;
  }

  .combat-screen {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 74px 158px 34px;
    height: 100%;
    min-height: 0;
    gap: 6px;
    overflow: hidden;
  }

  .combat-enemy {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 2px;
    min-height: 0;
    padding: 5px 6px 6px;
    overflow: hidden;
    border: 1px solid rgba(216, 59, 50, 0.28);
    background:
      linear-gradient(0deg, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.16)),
      radial-gradient(circle at 50% 32%, rgba(216, 59, 50, 0.2), transparent 13rem),
      #050505;
  }

  /* Фон локации (арт акта) — задний слой боевой сцены под спрайтом врага. */
  .combat-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    opacity: 0.55;
    z-index: 0;
  }

  .combat-enemy-top,
  .combat-enemy-board {
    position: relative;
    z-index: 2;
  }

  .combat-enemy-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px;
    min-height: 27px;
    pointer-events: none;
  }

  .combat-enemy-tools {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    pointer-events: auto;
  }

  .combat-enemy-tools:empty {
    visibility: hidden;
    pointer-events: none;
  }

  .combat-enemy-tools .combat-relics {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3px;
    max-width: min(100%, 318px);
  }

  .combat-enemy-tools .relic-orb {
    width: 27px;
    height: 27px;
  }

  .combat-enemy-tools .relic-orb-glyph {
    font-size: 0.84rem;
  }

  .combat-enemy-board {
    position: relative;
    min-height: 0;
    margin-top: -1px;
    overflow: hidden;
  }

  .combat-enemy-stage {
    position: absolute;
    inset: 0;
  }

  .combat-enemy-actor {
    position: absolute;
    z-index: 2;
    bottom: var(--enemy-row-bottom, 0%);
    left: var(--enemy-x, 50%);
    width: min(var(--enemy-width, 56%), var(--enemy-max-width, 240px), var(--enemy-slot-width, 92%));
    height: var(--enemy-height, 76%);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transform: translateX(-50%) scale(var(--enemy-depth-scale, 1));
    transform-origin: 50% 100%;
    transition: filter 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
  }

  .combat-enemy-actor::after {
    content: "";
    position: absolute;
    inset: 9% 5% 15%;
    border-radius: 999px;
    background: radial-gradient(ellipse at 50% 56%, rgba(255, 218, 140, 0.18), rgba(216, 59, 50, 0.08) 42%, transparent 68%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }

  .combat-enemy-actor.is-selected::after {
    opacity: 1;
  }

  .combat-enemy-actor.is-selected .enemy-actor-art {
    filter: drop-shadow(0 0 30px rgba(255, 210, 128, 0.32)) drop-shadow(0 0 20px rgba(216, 59, 50, 0.24));
  }

  .combat-enemy-actor.is-defeated {
    opacity: 0.48;
    filter: grayscale(0.45);
  }

  .combat-enemy-actor.enemy-row-back {
    z-index: 1;
    opacity: var(--enemy-row-opacity, 0.9);
  }

  .combat-enemy-actor.enemy-row-front {
    z-index: 2;
  }

  .combat-enemy-actor.is-departing {
    z-index: 5;
    pointer-events: none;
    animation: enemyDepart var(--enemy-depart-duration, 480ms) ease-out var(--enemy-depart-delay, 180ms) forwards;
  }

  .combat-enemy-actor.is-departing::after {
    opacity: 0;
  }

  @keyframes enemyDepart {
    from {
      opacity: 0.94;
      filter: grayscale(0);
    }

    to {
      opacity: 0;
      filter: grayscale(1) blur(3px);
    }
  }

  .enemy-actor-art {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.94;
    pointer-events: none;
    filter: drop-shadow(0 0 24px rgba(216, 59, 50, 0.36));
    animation: enemyIdle 3s ease-in-out infinite;
  }

  .enemy-actor-art-elite {
    filter: drop-shadow(0 0 27px rgba(216, 59, 50, 0.44));
  }

  .enemy-actor-art-boss {
    filter: drop-shadow(0 0 31px rgba(216, 59, 50, 0.52));
  }

  .enemy-actor-name {
    position: absolute;
    z-index: 4;
    top: 10px;
    left: 50%;
    max-width: min(90%, 310px);
    color: #fff3e5;
    pointer-events: none;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.92), 0 0 18px rgba(216, 59, 50, 0.34);
    transform: translateX(-50%);
  }

  .enemy-actor-name h1 {
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .enemy-actor-hud {
    position: absolute;
    z-index: 4;
    bottom: 17px;
    left: 50%;
    display: grid;
    gap: 3px;
    width: min(88%, 310px);
    pointer-events: none;
    transform: translateX(-50%);
  }

  .enemy-health-stack {
    position: relative;
    display: grid;
    justify-self: center;
    width: min(96%, 262px);
    height: 22px;
    color: #f9ecdf;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
  }

  .enemy-health-meta {
    position: absolute;
    right: 2px;
    bottom: 5px;
    left: 21px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    min-width: 0;
  }

  .enemy-health-meta > span {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    height: 13px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(5, 5, 5, 0.38);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .enemy-health-rail {
    display: inline-flex;
    align-items: flex-end;
    justify-self: stretch;
    align-self: end;
    height: 20px;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .enemy-range-mark {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 224, 172, 0.46);
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 224, 172, 0.2), transparent 54%),
      rgba(5, 5, 5, 0.72);
    box-shadow: 0 0 12px rgba(255, 192, 104, 0.2), 0 3px 9px rgba(0, 0, 0, 0.36);
  }

  .enemy-range-mark::before,
  .enemy-range-mark::after {
    content: "";
    position: absolute;
    display: block;
  }

  .enemy-range-mark-melee::before,
  .enemy-range-mark-melee::after {
    top: 9px;
    left: 5px;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #9a6a37 0 25%, #ffe1a8 25% 100%);
  }

  .enemy-range-mark-melee::before {
    transform: rotate(-42deg);
  }

  .enemy-range-mark-melee::after {
    transform: rotate(42deg);
  }

  .enemy-range-mark-ranged {
    border-color: rgba(172, 230, 255, 0.48);
    background:
      radial-gradient(circle at 50% 50%, rgba(172, 230, 255, 0.18), transparent 54%),
      rgba(5, 5, 5, 0.72);
    box-shadow: 0 0 12px rgba(94, 201, 255, 0.22), 0 3px 9px rgba(0, 0, 0, 0.36);
  }

  .enemy-range-mark-ranged::before {
    inset: 5px;
    border: 2px solid #ace6ff;
    border-radius: 50%;
  }

  .enemy-range-mark-ranged::after {
    top: 10px;
    left: 10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ace6ff;
  }

  .enemy-health-rail > .enemy-inline-hp {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 4px;
    margin-bottom: 0;
    margin-left: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0 999px 999px 0;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }

  .enemy-health-rail > .enemy-inline-hp .bar-fill,
  .enemy-health-rail > .enemy-inline-hp .bar-hp {
    border-radius: inherit;
    background: linear-gradient(90deg, #df3c37, #ff7c68);
    box-shadow: 0 0 12px rgba(216, 59, 50, 0.42);
  }

  .enemy-condition-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 20px;
  }

  .enemy-intent-chip,
  .enemy-condition-line .status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    min-width: 20px;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(5, 5, 5, 0.62);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.28);
    line-height: 1;
    white-space: nowrap;
  }

  .enemy-intent-chip b {
    overflow: hidden;
    max-width: 9rem;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.86);
    white-space: nowrap;
  }

  .enemy-condition-line .enemy-status-rail {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
  }

  .enemy-condition-line .status-chip {
    gap: 3px;
    padding: 0 6px;
  }

  .enemy-condition-line .status-chip i,
  .enemy-condition-line .status-chip b {
    font-size: 0.56rem;
  }

  /* Общий набор чипов статусов; конкретный контейнер задаёт направление ряда. */
  .enemy-status-rail {
    display: grid;
    gap: 4px;
    justify-items: end;
  }

  .status-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 34px;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(5, 5, 5, 0.76);
    backdrop-filter: blur(3px);
  }

  .status-chip i {
    font-size: 0.66rem;
    font-style: normal;
  }

  .status-chip b {
    font-size: var(--text-xs);
  }

  .status-chip.status-bleed { color: #ff6b6b; }
  .status-chip.status-poison { color: #7bd66a; }
  .status-chip.status-burn { color: #ffa24a; }
  .status-chip.status-weak { color: #6aa6ff; }
  .status-chip.status-vulnerable { color: #c08cff; }

  .combat-hud {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px 44px 48px;
    gap: 5px;
    align-items: center;
    padding: 5px 6px;
    overflow: visible;
  }

  .combat-player-panel {
    display: grid;
    grid-template-columns: 36px minmax(54px, 0.62fr) minmax(0, 1fr) auto;
    grid-template-rows: auto 7px;
    align-items: end;
    min-width: 0;
    gap: 3px 5px;
  }

  .combat-player-avatar {
    width: 34px;
    height: 47px;
    overflow: hidden;
    align-self: end;
    pointer-events: none;
  }

  .combat-player-avatar .avatar-scene.mini {
    width: 58px;
    height: 82px;
    transform: scale(0.56);
    transform-origin: top left;
  }

  .combat-player-vitals {
    display: grid;
    align-content: end;
    min-width: 0;
    gap: 1px;
    line-height: 1.05;
  }

  .combat-player-vitals b,
  .combat-player-vitals small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .combat-player-vitals b {
    color: var(--bone);
    font-size: 0.62rem;
    font-weight: 800;
  }

  .combat-player-vitals small {
    color: var(--muted);
    font-size: 0.52rem;
    text-transform: uppercase;
  }

  .combat-player-status-wrap {
    min-width: 0;
    align-self: center;
    overflow: visible;
  }

  .combat-player-status-wrap .badges {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    max-height: 28px;
    margin-top: 0;
    overflow: visible;
    row-gap: 2px;
  }

  .energy {
    display: grid;
    grid-template-columns: repeat(var(--energy-cols, 2), 9px);
    grid-template-rows: repeat(2, 9px);
    gap: 3px;
    min-height: 21px;
    align-self: center;
    justify-content: end;
    align-content: center;
  }

  .energy span {
    grid-column: var(--energy-col);
    grid-row: var(--energy-row);
    width: 9px;
    height: 9px;
    border: 1px solid rgba(216, 59, 50, 0.42);
    background: rgba(255, 255, 255, 0.04);
    transform: rotate(45deg);
  }

  .energy span.filled {
    background: var(--red);
    box-shadow: 0 0 10px rgba(216, 59, 50, 0.58);
  }

  .energy span.bonus {
    border-color: rgba(255, 198, 102, 0.66);
  }

  .combat-player-panel .player-hp-bar {
    grid-column: 1 / -1;
  }

  .combat-pile {
    position: relative;
    display: grid;
    width: 36px;
    height: 52px;
    padding: 0;
    place-items: center;
    align-self: center;
    border: 0;
    background: transparent;
    color: inherit;
    appearance: none;
    cursor: pointer;
  }

  .combat-pile:active {
    transform: translateY(1px);
  }

  .combat-pile:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 1px;
  }

  .combat-pile img {
    width: 28px;
    height: 42px;
    border-radius: 4px;
    object-fit: cover;
    filter: drop-shadow(0 0 7px rgba(216, 59, 50, 0.26));
  }

  .combat-pile b {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 17px;
    padding: 1px 3px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    background: rgba(5, 5, 5, 0.9);
    color: #fff4ed;
    font-size: 0.58rem;
    line-height: 1.1;
    text-align: center;
  }

  .end-turn-button {
    width: 48px;
    min-height: 40px;
    padding: 2px;
    border-color: var(--line-strong);
    background: linear-gradient(180deg, #8c171a, #2a0909);
    color: white;
    font-size: var(--text-xs);
    font-weight: 900;
  }

  .badges {
    display: flex;
    gap: 3px;
    overflow: hidden;
  }

  /* Карта руки тянется по высоте ряда сетки и сама выводит ширину из соотношения
     сторон (112/158). Так при сжатии окна карты пропорционально уменьшаются, а не
     наезжают друг на друга и не дают вертикальную прокрутку. */
  .hand-card {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    aspect-ratio: 112 / 158;
    position: relative;
    transition: opacity 140ms ease, transform 140ms ease;

  }

  .hand-card .game-card.battle {
    width: 100%;
    height: 100%;
  }

  .hand-card.is-casting {
    opacity: 0.16;
    transform: translateY(-12px) scale(0.94);
  }

  .hand-card.is-dealing-in {
    opacity: 0;
    animation: handCardArrive var(--arrive-dur, 180ms) ease both;
    animation-delay: var(--arrive-delay, 0ms);
  }

  .combat-log {
    display: grid;
    min-height: 0;
    align-content: center;
    gap: 1px;
    padding: 4px 7px;
    overflow: hidden;
    border: 1px solid rgba(216, 59, 50, 0.2);
    background: rgba(5, 5, 5, 0.74);
  }

  .combat-log p {
    overflow: hidden;
    color: #cbbfb2;
    font-size: 0.55rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .combat-reward {
    position: absolute;
    right: 6px;
    bottom: 198px;
    left: 6px;
    max-height: calc(100% - 210px);
    overflow-y: auto;

    z-index: 10;

  }

  .combat-fx-layer {
    position: absolute;
    z-index: 12;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .combat-card-cast {
    position: absolute;
    bottom: 48px;
    left: 50%;
    width: 112px;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 22px rgba(216, 59, 50, 0.44));
    animation: castCard var(--dur, 520ms) cubic-bezier(0.18, 0.78, 0.2, 1) both;
    animation-delay: var(--delay, 0ms);
  }

  .combat-card-motion {
    position: absolute;
    z-index: 13;
    top: var(--from-y, 0px);
    left: var(--from-x, 0px);
    width: var(--motion-w, 72px);
    height: var(--motion-h, auto);
    aspect-ratio: 112 / 158;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 16px rgba(216, 59, 50, 0.36));
    animation-duration: var(--dur, 660ms);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.72, 0.22, 1);
    animation-delay: var(--delay, 0ms);
  }

  .combat-card-motion .game-card.battle,
  .combat-card-motion-back {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
  }

  .motion-draw {
    animation-name: cardDealFromDeck;
  }

  .motion-discard {
    animation-name: cardFlyToDiscard;
  }

  .timeline-step {
    animation-delay: var(--delay, 0ms);
    animation-duration: var(--dur, 320ms);
  }

  .fx-sprite {
    position: absolute;
    z-index: 14;
    width: 126px;
    height: 126px;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: fxSpriteBurst var(--dur, 420ms) ease both;
    animation-delay: var(--delay, 0ms);
  }

  .fx-target-enemy {
    top: 34%;
    left: 50%;
  }

  .fx-target-player {
    top: calc(100% - 182px);
    left: 50%;
  }

  .fx-target-draw,
  .fx-target-hand {
    bottom: 104px;
    left: 44px;
    width: 74px;
    height: 74px;
  }

  .fx-target-discard {
    right: 42px;
    bottom: 104px;
    left: auto;
    width: 74px;
    height: 74px;
    transform: translate(50%, -50%);
  }

  .fx-sprite-slash,
  .fx-sprite-slash-enemy {
    filter: drop-shadow(0 0 18px rgba(255, 64, 54, 0.6));
    animation-name: fxSlash;
  }

  .fx-sprite-impact {
    filter: drop-shadow(0 0 22px rgba(255, 224, 172, 0.62));
  }

  .fx-sprite-shield {
    filter: drop-shadow(0 0 18px rgba(255, 210, 128, 0.54));
    animation-name: fxShield;
  }

  .fx-sprite-poison,
  .fx-sprite-curse {
    filter: drop-shadow(0 0 18px rgba(117, 232, 143, 0.48));
    animation-name: fxStatus;
  }

  .effect-feed {
    position: absolute;
    top: 70px;
    right: 8px;
    display: grid;
    gap: 4px;
  }

  .effect-feed .combat-event-chip {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 4px;
    align-items: center;
    min-width: 104px;
    padding: 4px 6px;
    border: 1px solid var(--line-gold);
    background: rgba(5, 5, 5, 0.78);
    font-size: var(--text-xs);
    animation: effectChip var(--chip-dur, 3000ms) ease both;
    animation-delay: var(--delay, 0ms);
  }

  .effect-feed .tone-harm {
    border-color: rgba(255, 104, 92, 0.52);
    color: #ffd6d1;
  }

  .effect-feed .tone-guard {
    border-color: rgba(255, 210, 128, 0.5);
    color: #ffe0ad;
  }

  .effect-feed .tone-status {
    border-color: rgba(117, 232, 143, 0.46);
    color: #d8ffd9;
  }

  .effect-feed .tone-card {
    border-color: rgba(172, 230, 255, 0.46);
    color: #d8f3ff;
  }

  .effect-feed .tone-crit {
    border-color: rgba(255, 238, 172, 0.76);
    color: #fff1a8;
    box-shadow: 0 0 16px rgba(255, 224, 128, 0.18);
  }

  .effect-feed b {
    color: var(--red);
    text-align: center;
  }

  .combat-enemy-actor.fx-actor-active::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 8% 4% 14%;
    border: 1px solid rgba(255, 224, 172, 0.45);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    animation: fxTargetRing 760ms ease both;
  }

  .combat-enemy-actor.fx-actor-hit .enemy-actor-art {
    animation: enemyHit 520ms ease both, enemyIdle 3s ease-in-out 560ms infinite;
  }

  .combat-enemy-actor.fx-actor-guard::before {
    border-color: rgba(255, 210, 128, 0.72);
    animation-name: fxGuardRing;
  }

  .combat-enemy-actor.fx-actor-status::before {
    border-color: rgba(117, 232, 143, 0.62);
  }

  .combat-enemy-actor.fx-actor-casting .enemy-actor-art {
    animation: enemyCast 620ms ease both, enemyIdle 3s ease-in-out 660ms infinite;
  }

  .combat-player-panel.fx-player-active {
    position: relative;
  }

  .combat-player-panel.fx-player-active::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -4px;
    border: 1px solid rgba(255, 224, 172, 0.35);
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    animation: fxTargetRing 760ms ease both;
  }

  .combat-player-panel.fx-player-hit {
    animation: playerHit 520ms ease both;
  }

  .combat-player-panel.fx-player-guard::after {
    border-color: rgba(255, 210, 128, 0.66);
    animation-name: fxGuardRing;
  }

  .combat-player-panel.fx-player-status::after {
    border-color: rgba(117, 232, 143, 0.58);
  }

  .combat-pile.fx-pile-active img {
    animation: pilePulse 720ms ease both;
  }

  .reward-row {
    display: flex;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .reward-tile {
    display: grid;
    flex: 0 0 72px;
    min-height: 74px;
    place-items: center;
    padding: 2px;
    border: 1px solid var(--line-gold);
    background: rgba(5, 5, 5, 0.68);
  }

  button.reward-tile {
    color: var(--text);
    text-align: center;
  }

  .reward-tile.claimed {
    border-color: var(--line-strong);
  }

  .reward-tile.activity-claim-ready {
    border-color: var(--red);
    box-shadow: inset 0 0 0 1px rgba(216, 59, 50, 0.38);
  }

  .reward-tile b {
    color: var(--red);
    font-size: var(--text-xs);
  }

  .reward-tile > span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
  }

  .reward-tile small {
    font-size: 0.48rem;
  }

  .reward-tile em {
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.45rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .market-screen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .market-toolbar {
    padding-bottom: 7px;
  }

  .market-title-tools {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .market-title-tools > small {
    color: var(--muted);
    font-size: 0.48rem;
  }

  .market-help {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-color: var(--line-gold);
    border-radius: 50%;
    color: var(--gold);
    font-weight: 900;
  }

  .market-tabs {
    margin: 1px 0;
  }

  .market-tabs > button {
    padding-inline: 9px;
  }

  .market-results {
    min-height: 0;
    padding: 7px 1px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .market-result-head {
    min-height: 20px;
    color: var(--muted);
    font-size: 0.58rem;
    text-align: right;
  }

  .market-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    align-items: start;
  }

  .market-card {
    display: grid;
    gap: 5px;
    align-content: start;
    min-width: 0;
    padding: 7px;
    overflow: hidden;
    border: 1px solid var(--rarity, var(--line));
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(24, 17, 17, 0.96), rgba(8, 7, 7, 0.98));
    box-shadow: var(--inset-sheen);
  }

  .market-card-preview {
    position: relative;
    width: min(100%, 108px);
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: none;
  }

  button.market-card-preview:active {
    transform: none;
  }

  .market-card-preview .game-card {
    width: 100%;
  }

  .market-card-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .market-card-copy strong,
  .market-card-copy small,
  .market-card-price small,
  .market-history-row strong,
  .market-history-row small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .market-card-copy strong {
    font-size: 0.68rem;
  }

  .market-card-copy small {
    color: var(--muted);
    font-size: 0.52rem;
  }

  .market-card-copy .market-seller {
    color: #c8bab0;
  }

  .market-status {
    display: inline-flex;
    justify-self: start;
    max-width: 100%;
    min-height: 20px;
    align-items: center;
    padding: 2px 6px;
    overflow: hidden;
    border: 1px solid rgba(178, 138, 90, 0.34);
    border-radius: 999px;
    background: rgba(42, 31, 24, 0.74);
    color: #d8c8bb;
    font-size: 0.48rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .market-status.status-listed,
  .market-status.status-complete,
  .market-status.status-candidate {
    border-color: rgba(97, 178, 125, 0.48);
    color: #a9e7ba;
  }

  .market-status.status-network,
  .market-status.status-wallet,
  .market-status.status-updating {
    border-color: rgba(211, 165, 89, 0.52);
    color: #f0cc8e;
  }

  .market-status.status-failed,
  .market-status.status-review,
  .market-status.status-cancelled {
    border-color: rgba(216, 59, 50, 0.54);
    color: #f4aaa5;
  }

  .market-card-price {
    display: flex;
    gap: 4px;
    align-items: end;
    justify-content: space-between;
    min-width: 0;
  }

  .market-card-price b {
    color: var(--gold);
    font-size: 0.67rem;
    white-space: nowrap;
  }

  .market-card-price small {
    color: var(--muted);
    font-size: 0.46rem;
  }

  .market-card-action {
    width: 100%;
    min-height: 36px;
    padding: 4px 6px;
    font-size: 0.61rem;
  }

  .market-blocker {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    color: #b9aaa0;
    font-size: 0.48rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .market-owned-block {
    display: grid;
    gap: 6px;
    margin-bottom: 13px;
  }

  .market-owned-block > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .market-owned-block h2 {
    margin: 0;
    font-size: 0.83rem;
  }

  .market-owned-block > header > b {
    color: var(--gold);
    font-size: 0.62rem;
  }

  .market-block-empty {
    margin: 0;
    padding: 9px;
    border: 1px dashed var(--line);
    color: var(--muted);
    font-size: 0.58rem;
  }

  .market-history {
    display: grid;
    gap: 6px;
  }

  .market-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    align-items: center;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(14, 11, 11, 0.86);
  }

  .market-history-row > div {
    min-width: 0;
  }

  .market-history-row > div:nth-child(2) {
    text-align: right;
  }

  .market-history-row strong,
  .market-history-row > div:nth-child(2) b {
    font-size: 0.63rem;
  }

  .market-history-row small {
    color: var(--muted);
    font-size: 0.49rem;
  }

  .market-history-row > .market-status {
    grid-column: 1 / -1;
  }

  .market-state {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-height: 190px;
    align-content: center;
    padding: 20px;
    text-align: center;
  }

  .market-state p {
    max-width: 260px;
    margin: 0;
    color: var(--muted);
    font-size: 0.62rem;
  }

  .market-state button {
    min-width: 132px;
  }

  .market-state-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    opacity: 0.78;
  }

  .market-state-icon .ui-icon {
    width: 100%;
    height: 100%;
  }

  .market-stale {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    margin-bottom: 7px;
    padding: 7px;
    border: 1px solid rgba(216, 59, 50, 0.45);
    border-radius: var(--radius);
    color: #e6b0aa;
    font-size: 0.55rem;
  }

  .market-stale button {
    min-height: 30px;
    padding: 4px 8px;
  }

  .market-more {
    width: 100%;
    min-height: 40px;
    margin-top: 9px;
  }

  .market-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }

  .market-range-field {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--muted);
    font-size: 0.54rem;
  }

  .market-range-field input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    outline: 0;
    background: rgba(11, 9, 9, 0.92);
    color: var(--bone);
  }

  .market-range-field input:focus {
    border-color: var(--red);
    box-shadow: var(--ring-crimson);
  }

  .market-sheet-actions > div {
    display: grid;
    gap: 3px;
  }

  .market-range-error {
    color: #f0a29d;
    font-size: 0.5rem;
    line-height: 1.15;
  }

  .nft-preview-trigger {
    position: relative;
  }

  .nft-preview-trigger > span {
    position: absolute;
    z-index: 6;
    right: 2px;
    bottom: 2px;
    padding: 1px 3px;
    border: 1px solid var(--line-gold);
    background: rgba(5, 5, 5, 0.88);
    color: var(--gold);
    font-size: 0.42rem;
  }

  .nft-preview-trigger:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .home-board {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    gap: 8px;
  }

  /* ── HERO: character sheet — avatar centered, panels overlaid → tap = profile.
     Высота общая с панелью героя в окне персонажа (--hero-h) — панели 1:1. ── */
  .home-hero {
    position: relative;
    height: var(--hero-h);
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line-gold);
    box-shadow: var(--inset-sheen);
    cursor: pointer;
  }

  .home-hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    opacity: 0.9;
    background:
      radial-gradient(circle at 50% 38%, rgba(216, 59, 50, 0.2), transparent 54%),
      linear-gradient(0deg, rgba(5, 5, 5, 0.95), rgba(5, 5, 5, 0.1) 60%, rgba(5, 5, 5, 0.42)),
      url("/assets/ui/chamber_bg.webp") center bottom/cover;
  }

  .home-hero-avatar {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: end center;
  }

  .home-hero-avatar .avatar-scene.large {
    align-self: center;
    width: 186px;
    height: 270px;
  }

  /* top-right: relic orb-icon (tap → name/description popover) */
  .hero-relic {
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 8px;
    display: flex;
    align-items: center;
  }

  /* left column: real equipment slots (icons from gear catalog), 1:1 с окном персонажа */
  .hero-gear {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    display: grid;
    align-content: start;
    gap: 4px;
  }

  .equipment-slot {
    position: relative;
    display: grid;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    place-items: center;
    padding: 1px;
    overflow: hidden;
    border: 1px solid;
    background: rgba(5, 5, 5, 0.5);
    font-size: 0.78rem;
    backdrop-filter: blur(3px);
  }

  .equipment-slot.filled,
  .equipment-slot.on {
    border-color: color-mix(in srgb, var(--line-gold), white 18%);
    color: var(--gold);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.05),
      0 0 9px rgba(241, 211, 138, 0.16);
  }

  .equipment-slot.empty,
  .equipment-slot.off {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.24);
  }

  .equipment-slot img {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: contain;
    opacity: 0.98;
    transform: scale(1.06);
  }

  .equipment-slot-icon {
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.88rem;
    line-height: 1;
  }

  .gear-set-tone-ritual {
    --set-a: #d83b32;
    --set-b: #ffd24a;
    --set-glow: rgba(216, 59, 50, 0.42);
  }

  .gear-set-tone-street {
    --set-a: #39b8ff;
    --set-b: #c58aff;
    --set-glow: rgba(57, 184, 255, 0.34);
  }

  .gear-set-tone-void {
    --set-a: #a875ff;
    --set-b: #7ff7e2;
    --set-glow: rgba(168, 117, 255, 0.36);
  }

  .gear-set-tone-default {
    --set-a: #b9aca1;
    --set-b: #f1d38a;
    --set-glow: rgba(241, 211, 138, 0.24);
  }

  .gear-set-badge {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--set-a), white 12%);
    background: linear-gradient(135deg, color-mix(in srgb, var(--set-a), #050505 56%), rgba(5, 5, 5, 0.92));
    box-shadow: 0 0 8px var(--set-glow);
    color: var(--bone);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 2px #000;
  }

  .gear-set-badge i,
  .gear-set-badge b {
    display: block;
    overflow: hidden;
    font-style: normal;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gear-set-badge i {
    color: var(--set-b);
  }

  .gear-set-badge-slot {
    right: 0;
    bottom: 0;
    width: 6px;
    min-width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--set-a);
    box-shadow:
      0 0 4px 1px var(--set-glow),
      0 0 8px color-mix(in srgb, var(--set-a), transparent 35%);
    text-shadow: none;
  }

  .gear-set-badge-slot i {
    display: none;
  }

  .gear-set-badge-slot b {
    display: none;
  }

  /* right column: stats (single column, like the creator) */
  .hero-stats {
    position: absolute;
    z-index: 2;
    top: 44px;
    right: 8px;
    display: grid;
    gap: 3px;
    width: 64px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hero-stats li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 5, 5, 0.5);
    backdrop-filter: blur(3px);
    cursor: help;
  }

  .hero-stats li small {
    color: var(--muted);
    font-size: 0.5rem;
  }

  .hero-stats li b {
    color: var(--bone);
    font-size: 0.7rem;
  }

  /* bottom-right under stats: talent slots (prepared) */
  .hero-talents {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    display: grid;
    gap: 3px;
    justify-items: end;
  }

  .hero-talents > small {
    color: var(--muted);
    font-size: 0.46rem;
    text-transform: uppercase;
  }

  .talent-row {
    display: flex;
    gap: 4px;
  }

  .talent-slot {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(5, 5, 5, 0.5);
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
  }

  .talent-slot.on {
    border: 1px solid var(--line-gold);
    background: rgba(112, 17, 21, 0.5);
    color: var(--gold);
    font-size: 0.7rem;
  }

  /* ── DECK: tap → deck editor (no separate button) ── */
  .home-deck {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 0;
    padding: 9px;
    cursor: pointer;
  }

  .home-deck-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .home-deck-title {
    min-width: 0;
  }

  .home-deck-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .home-deck-kicker .eyebrow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-deck-title h2 {
    overflow: hidden;
    font-size: var(--text-md);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-deck-count {
    text-align: right;
    white-space: nowrap;
  }

  .home-deck-count strong {
    color: var(--red);
    font-size: 1.15rem;
  }

  .home-deck-count strong span {
    color: var(--muted);
    font-size: 0.7rem;
  }

  .home-deck-count small {
    display: block;
    color: var(--muted);
    font-size: 0.5rem;
    text-transform: uppercase;
  }

  /* счётчики коллекции и NFT перенесены в блок колоды */
  .home-deck-tally {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 3px;
    font-style: normal;
  }

  .home-deck-tally span {
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--bone);
    font-size: 0.5rem;
    white-space: nowrap;
  }

  /* best 5 cards, lightly fanned along an arc — sized to nearly fill the panel */
  .home-deck-fan {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 0;
    padding-top: 2px;
  }

  .deck-card {
    position: relative;
    width: auto;
    height: min(100%, 124px);
    min-height: 88px;
    aspect-ratio: 5 / 7;
    margin: 0 -12px;
    border: 1px solid var(--rarity, var(--line-gold));
    background-color: #0c0909;
    background-position: center;
    background-size: cover;
    box-shadow: 0 6px 13px rgba(0, 0, 0, 0.55), inset 0 -28px 20px rgba(5, 5, 5, 0.8);
    transform-origin: bottom center;
  }

  .deck-card.rarity-rare {
    --rarity: #3f78c9;
  }

  .deck-card.rarity-epic {
    --rarity: #9a5cd0;
  }

  .deck-card.rarity-legendary {
    --rarity: #d9a441;
  }

  .deck-card.rarity-unique {
    --rarity: var(--red);
  }

  .deck-card b {
    position: absolute;
    top: 3px;
    left: 3px;
    min-width: 15px;
    padding: 0 3px;
    background: rgba(5, 5, 5, 0.84);
    color: var(--bone);
    font-size: 0.62rem;
    text-align: center;
  }

  .deck-card span {
    position: absolute;
    right: 2px;
    bottom: 2px;
    left: 2px;
    overflow: hidden;
    padding: 1px 2px;
    background: rgba(5, 5, 5, 0.7);
    font-size: 0.5rem;
    line-height: 1.05;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .deck-card:nth-child(1) {
    transform: rotate(-7deg) translateY(7px);
    z-index: 1;
  }

  .deck-card:nth-child(2) {
    transform: rotate(-3.5deg) translateY(2px);
    z-index: 2;
  }

  .deck-card:nth-child(3) {
    z-index: 3;
  }

  .deck-card:nth-child(4) {
    transform: rotate(3.5deg) translateY(2px);
    z-index: 2;
  }

  .deck-card:nth-child(5) {
    transform: rotate(7deg) translateY(7px);
    z-index: 1;
  }

  .home-deck-empty {
    align-self: center;
    color: var(--muted);
    font-size: 0.62rem;
    text-align: center;
  }

  .home-deck-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .build-tags {
    display: flex;
    gap: 4px;
    overflow: hidden;
  }

  .build-tags span {
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--bone);
    font-size: 0.5rem;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .home-deck-value {
    text-align: right;
    white-space: nowrap;
  }

  .home-deck-value strong {
    display: block;
    color: var(--gold);
    font-size: 0.82rem;
  }

  /* ── SECONDARY: прогресс забега слева + сжатые счётчики справа ── */
  .home-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: stretch;
  }

  .run-progress {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
  }

  .run-progress[data-action] {
    cursor: pointer;
  }

  .run-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
  }

  .run-progress-head span {
    overflow: hidden;
    color: var(--bone);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .run-progress-head b {
    color: var(--muted);
    font-size: 0.52rem;
    white-space: nowrap;
  }

  .run-progress.idle {
    opacity: 0.7;
  }

  /* линейная полоса с насечками-этапами */
  .run-progress-track {
    display: flex;
    gap: 3px;
    height: 7px;
  }

  .run-progress-track .stage {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
  }

  .run-progress-track .stage.done {
    background: var(--red);
  }

  .run-progress-track .stage.active {
    background: var(--gold);
    box-shadow: 0 0 6px rgba(217, 164, 65, 0.65);
  }

  /* счётчики забеги/боссы — сжаты по высоте вдвое */
  .home-metric {
    display: grid;
    min-width: 0;
    place-items: center;
    gap: 1px;
    padding: 4px 2px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
  }

  .home-metric.compact {
    grid-auto-flow: column;
    align-items: baseline;
    gap: 4px;
    min-width: 46px;
    padding: 3px 8px;
  }

  .home-metric b {
    color: var(--bone);
    font-size: 0.95rem;
    line-height: 1;
  }

  .home-metric.compact b {
    font-size: 0.85rem;
  }

  .home-metric small {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.46rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cards-screen .screen-title-row {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0;
  }

  .cards-screen .filters-ornate {
    padding-bottom: 5px;
  }

  .collection-empty {
    display: grid;
    min-height: 210px;
    place-content: center;
    gap: 6px;
    padding: 18px;
    border: 1px dashed var(--line);
    background: rgba(12, 9, 9, 0.62);
    text-align: center;
  }

  .collection-empty p {
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .collection-pick {
    position: relative;
  }

  /* «в колоде» — более жирная рамка В ЦВЕТ РЕДКОСТИ (как надетое в инвентаре),
     а не красная: красный бережём для легендарок. */
  .collection-pick.in-deck .game-card {
    border-width: 2px;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--rarity), transparent 35%),
      0 0 14px color-mix(in srgb, var(--rarity), transparent 60%);
  }

  /* «в колоде» — компактная галочка на карте, под кружком стоимости (слева сверху),
     чтобы не прятаться за значком типа карты справа и не уезжать с карты. */
  .deck-state {
    position: absolute;
    z-index: 6;
    top: 29px;
    left: 3px;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgba(8, 10, 9, 0.9);
    color: #8fbf9a;
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  }

  .nft-state {
    position: absolute;
    z-index: 6;
    top: 31px;
    right: 3px;
    display: grid;
    min-width: 25px;
    height: 16px;
    place-items: center;
    padding: 0 4px;
    border: 1px solid rgba(126, 210, 255, 0.76);
    border-radius: 999px;
    background: rgba(8, 10, 12, 0.92);
    color: #bfe8ff;
    font-size: 0.43rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(64, 172, 255, 0.24);
  }

  /* общий каркас нижних шитов (карта в коллекции, предмет в инвентаре) */
  .bottom-sheet {
    position: fixed;
    z-index: 41;
    right: max(0px, calc((100vw - var(--frame-max)) / 2));
    bottom: calc(58px + env(safe-area-inset-bottom));
    left: max(0px, calc((100vw - var(--frame-max)) / 2));
    display: grid;
    gap: 8px;
    padding: 12px 8px 8px;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    background: #090707;
    box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.7);
  }

  /* ── единый шит деталей предмета и карты (render/detailSheet.js) ── */
  .detail-sheet {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-height: min(76dvh, 580px);
    border-top: 2px solid var(--rarity, var(--line-strong));
    border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
    background:
      radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--rarity, transparent), transparent 86%), transparent 56%),
      var(--glass),
      #090707;
  }

  .detail-top {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .detail-card .detail-top {
    grid-template-columns: 132px minmax(0, 1fr);

    gap: 10px;

  }

  .detail-left {
    display: grid;
    gap: 7px;
    min-width: 0;
  }

  .detail-image {
    position: relative;
    width: 120px;
    height: 120px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--rarity, var(--line-gold));
    border-radius: var(--radius);
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rarity, transparent), transparent 74%), rgba(5, 5, 5, 0.6) 72%);
    box-shadow: 0 0 16px color-mix(in srgb, var(--rarity, transparent), transparent 68%), var(--inset-sheen);
    cursor: zoom-in;
  }

  .detail-image > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* карта показывается своим арт-каркасом во всю ширину левой колонки */
  .detail-card .detail-image {
    width: 132px;
    height: auto;
    border: none;
    background: none;
    box-shadow: none;
  }

  .detail-card .detail-image .game-card {
    width: 100%;
  }

  .detail-image-zoom {
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 3;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 5px;
    background: rgba(5, 5, 5, 0.74);
    color: var(--bone);
    font-size: 0.6rem;
  }

  .detail-actions {
    display: grid;
    gap: 5px;
  }

  .detail-actions button {
    width: 100%;
    min-height: 32px;
    font-size: 0.56rem;
  }

  .detail-actions .card-burn-action {
    margin-top: 8px;
  }

  /* правая колонка: шапка + всё тело (статы/описание/набор) сразу под ней */
  .detail-right {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
  }

  .detail-head {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding-right: 26px;
  }

  .detail-head .eyebrow {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--rarity, var(--red));
    letter-spacing: 0.04em;
    text-transform: capitalize;
  }

  .detail-title {
    font-size: var(--text-md);
    font-weight: 800;
    line-height: 1.1;
    color: var(--bone);
  }

  .detail-body {
    display: grid;
    gap: 8px;
  }

  .detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--rarity, var(--gold)), transparent 55%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--rarity, #000), #06050a 86%);
    color: var(--gold);
    font-size: 0.55rem;
    font-weight: 700;
  }

  .stat-chip i {
    font-style: normal;
    color: var(--rarity, var(--gold));
  }

  .stat-chip.muted,
  .stat-chip.rags {
    color: var(--muted);
    border-color: transparent;
  }

  .detail-compare {
    display: grid;
    gap: 5px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(5, 5, 5, 0.4);
  }

  .detail-compare > small {
    color: var(--muted);
    font-size: 0.52rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .cmp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .cmp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.54rem;
    font-weight: 700;
  }

  .cmp-chip i {
    font-style: normal;
  }

  .cmp-chip.up {
    color: #7fe3a6;
    background: color-mix(in srgb, #2fae6e, #06050a 80%);
    border-color: color-mix(in srgb, #2fae6e, transparent 55%);
  }

  .cmp-chip.down {
    color: #ff9a8c;
    background: color-mix(in srgb, #d8453a, #06050a 80%);
    border-color: color-mix(in srgb, #d8453a, transparent 55%);
  }

  .cmp-chip.even {
    color: var(--muted);
  }

  .detail-desc {
    color: #d6cbc0;
    font-size: 0.62rem;
    line-height: 1.35;
  }

  .card-sheet-level .item-sheet-level {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .card-sheet-stars {
    display: inline-flex;
    gap: 1px;
    color: rgba(255, 255, 255, 0.32);
    letter-spacing: 0;
  }

  .card-sheet-stars i {
    font-style: normal;
  }

  .card-sheet-stars i.earned {
    color: #ff9f1a;
    text-shadow: 0 0 8px rgba(255, 139, 26, 0.72);
  }

  /* Поле модов — единый тап-таргет: подпись «открыто/всего» + ряд ячеек. */
  .card-mod-slots {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }

  .card-mod-head {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    flex: 0 0 auto;
    font-size: 0.46rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .card-mod-head b {
    color: var(--bone);
    font-size: 0.6rem;
  }

  .card-mod-head i {
    font-style: normal;
    opacity: 0.5;
  }

  .card-mod-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  /* Ячейка слота: инфографика бонуса (глиф + значение), как у метрик карты.
     --tone приходит от класса .metric-<tone> на заполненной ячейке — не задаём
     его в базовом правиле, иначе оно перекроет тон метрики. */
  .card-mod-slot {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 26px;
    min-width: 26px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--bone);
    line-height: 1;
  }

  .card-mod-slot i {
    font-style: normal;
    line-height: 1;
    font-size: 0.66rem;
  }

  .card-mod-slot b {
    font-size: 0.62rem;
    line-height: 1;
  }

  .card-mod-slot u {
    font-size: 0.42rem;
    text-decoration: none;
    opacity: 0.7;
  }

  .card-mod-slot.filled {
    border-color: color-mix(in srgb, var(--tone, var(--gold)), transparent 42%);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tone, var(--gold)), transparent 74%);
  }

  .card-mod-slot.filled i {
    color: var(--tone, var(--gold));
  }

  .card-mod-slot.filled b {
    color: #fff;
  }

  .card-mod-slot.open {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--rarity, var(--gold)), transparent 42%);
    color: var(--gold);
    justify-content: center;
  }

  .card-mod-slot.locked {
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    opacity: 0.72;
  }

  .card-mod-slot.locked i {
    color: #ffce63;
    font-size: 0.54rem;
  }

  .card-mod-slot.locked b {
    color: var(--muted);
    font-size: 0.56rem;
  }

  .seal-warning {
    color: #ffb7a0;
    font-size: 0.55rem;
    line-height: 1.32;
  }

  .confirm-panel.card-evolution-confirm {
    max-height: calc(var(--app-viewport-height, 100vh) - 36px);
    overflow: auto;
  }

  .card-evolution-cost {
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.035);
  }

  .card-evolution-cost small {
    color: var(--muted);
    font-size: 0.48rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .card-evolution-cost b {
    color: var(--bone);
    font-size: 0.56rem;
  }

  /* Дубли unique показываем мини-картами в сетке, а не растянутыми строками. */
  .unique-duplicate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 8px;
    max-height: 44vh;
    overflow: auto;
    padding: 2px;
  }

  .dup-card {
    display: grid;
    gap: 4px;
    align-content: start;
  }

  .dup-card-meta {
    display: grid;
    justify-items: center;
    gap: 2px;
    text-align: center;
  }

  .dup-card-meta small {
    color: var(--gold);
    font-size: 0.46rem;
    line-height: 1.2;
  }

  .dup-card-fallback {
    display: grid;
    aspect-ratio: 0.68;
    place-items: center;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted);
    font-size: 0.5rem;
    text-align: center;
  }

  .card-evolve-slots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .card-evolve-slot {
    display: grid;
    align-content: center;
    gap: 2px;
    min-height: 54px;
    padding: 6px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.035);
    color: var(--bone);
  }

  .card-evolve-slot.active {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(232, 184, 92, 0.18);
  }

  .card-evolve-slot.empty b {
    color: var(--gold);
    font-size: 1.1rem;
    line-height: 1;
  }

  .card-evolve-slot.filled {
    position: relative;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 62px;
    padding: 5px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--gold), transparent 45%);
    text-align: left;
  }

  .card-evolve-slot small {
    color: var(--muted);
    font-size: 0.46rem;
    line-height: 1.15;
  }

  .card-fodder-list {
    display: grid;
    gap: 5px;
    max-height: 158px;
    overflow: auto;
  }

  .card-fodder-choice {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 2px 7px;
    align-items: center;
    height: auto;
    min-height: 44px;
    padding: 1px 7px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.035);
    text-align: left;
  }

  .card-fodder-choice small {
    grid-column: 1;
    color: var(--muted);
    font-size: 0.48rem;
    word-break: break-all;
  }

  .card-fodder-choice b {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: var(--gold);
    font-size: 0.48rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .card-fodder-choice.selected {
    border-color: color-mix(in srgb, var(--gold), transparent 35%);
    background: rgba(255, 159, 26, 0.1);
  }

  .evolution-main-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .evolution-main-row > div:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .evolution-main-row h2,
  .evolution-main-row p {
    margin: 0;
  }

  .evolution-main-row small,
  .evolution-review-main span {
    color: var(--muted);
    font-size: 0.48rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .evolution-main-row > div:last-child > b {
    color: var(--gold);
    font-size: 0.72rem;
  }

  .evolution-main-row p,
  .evolution-copy-explainer {
    font-size: 0.54rem;
    line-height: 1.32;
  }

  .evolution-copy-explainer {
    font-size: 0.59rem;
  }

  .evolution-main-card,
  .evolution-result-card {
    width: 76px;
    margin-inline: auto;
  }

  .card-evolve-slot img,
  .card-fodder-choice img,
  .evolution-consume-list img {
    width: 100%;
    aspect-ratio: 0.68;
    border-radius: 3px;
    object-fit: cover;
  }

  .card-evolve-slot span,
  .card-fodder-choice span,
  .evolution-consume-list span {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .card-evolve-slot span b {
    overflow: hidden;
    font-size: 0.48rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-evolve-slot.filled span small {
    font-size: 0.5rem;
    line-height: 1.2;
  }

  .card-evolve-slot > i {
    position: absolute;
    top: 2px;
    right: 3px;
    color: #ffb09d;
    font-size: 0.62rem;
    font-style: normal;
  }

  .card-fodder-picker,
  .card-evolution-requirements {
    display: grid;
    gap: 5px;
  }

  .card-fodder-picker h3,
  .card-evolution-requirements h3,
  .evolution-review > h3 {
    color: var(--bone);
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .card-fodder-choice > img {
    display: block;
    width: 28px;
    height: 40px;
    aspect-ratio: auto;
    justify-self: center;
    object-fit: contain;
  }

  .card-fodder-choice > img,
  .card-fodder-choice > span,
  .card-fodder-choice > b {
    align-self: center;
  }

  .card-fodder-choice > span {
    align-content: center;
    grid-auto-rows: max-content;
    overflow: visible;
  }

  .card-fodder-choice > span strong {
    overflow: hidden;
    color: var(--bone);
    font-size: 0.54rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-fodder-choice > span small {
    grid-column: auto;
    line-height: 1.2;
    word-break: normal;
  }

  .card-fodder-choice em {
    color: #ffb09d;
    font-size: 0.43rem;
    font-style: normal;
    line-height: 1.3;
  }

  .card-fodder-choice.in-deck em,
  .card-evolve-slot.in-deck small,
  .evolution-consume-list article.in-deck small {
    color: #ffbd4a;
  }

  .card-fodder-choice > b {
    grid-row: auto;
    grid-column: auto;
  }

  .evolution-requirement-chips,
  .evolution-main-deltas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .evolution-requirement-chips > span,
  .evolution-main-deltas > span {
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
  }

  .evolution-requirement-chips i,
  .evolution-main-deltas small {
    color: var(--muted);
    font-size: 0.54rem;
    font-style: normal;
    line-height: 1.1;
  }

  .evolution-requirement-chips b,
  .evolution-main-deltas b {
    color: var(--bone);
    font-size: 0.58rem;
    line-height: 1.1;
  }

  .evolution-requirement-chips > .met b,
  .evolution-main-deltas > .modifier b {
    color: #ffbd4a;
  }

  .evolution-requirement-chips > .missing {
    border-color: rgba(225, 77, 54, 0.42);
    background: rgba(115, 28, 20, 0.12);
  }

  .evolution-requirement-chips > .missing b {
    color: #ff8e78;
  }

  .evolution-main-deltas {
    margin-top: 1px;
  }

  .evolution-review-main {
    display: grid;
    gap: 3px;
    padding: 7px 8px;
    border-left: 2px solid var(--gold);
    background: rgba(255, 159, 26, 0.06);
  }

  .evolution-consume-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .evolution-consume-list article {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 5px;
    align-items: center;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
  }

  .evolution-consume-list b,
  .evolution-consume-list small {
    overflow: hidden;
    font-size: 0.46rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .evolution-consume-list small {
    color: var(--muted);
  }

  .evolution-danger-note,
  .evolution-error {
    padding: 7px 8px;
    border: 1px solid rgba(225, 77, 54, 0.38);
    background: rgba(115, 28, 20, 0.16);
    color: #ffb7a6 !important;
    font-size: 0.53rem;
    line-height: 1.35;
  }

  .evolution-sticky-actions {
    position: sticky;
    z-index: 2;
    bottom: -1px;
    padding-top: 6px;
    background: linear-gradient(180deg, transparent, #0c0909 34%);
  }

  .evolution-running,
  .evolution-result {
    place-items: center;
    text-align: center;
  }

  .evolution-running .evolution-main-card,
  .evolution-result-card {
    width: 104px;
  }

  .evolution-star-burst {
    color: #ffd26a;
    font-size: 1.5rem;
    line-height: 1;
    text-shadow: 0 0 18px #ff8c1a;
  }

  .evolution-result .evolution-main-deltas,
  .evolution-result .confirm-actions {
    width: 100%;
  }

  .card-rules {
    display: grid;
    gap: 5px;
    padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--rarity, var(--line)), transparent 48%);
    border-radius: var(--radius);
    background: rgba(5, 5, 5, 0.46);
  }

  .card-rules h3 {
    color: var(--bone);
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .card-rules ul {
    display: grid;
    gap: 4px;
    padding-left: 14px;
  }

  .card-rules li {
    color: #cfc3b8;
    font-size: 0.52rem;
    line-height: 1.3;
  }

  .detail-traits {
    display: grid;
    gap: 4px;
  }

  .trait-row {
    display: grid;
    gap: 1px;
  }

  .trait-row b {
    color: var(--bone);
    font-size: 0.56rem;
  }

  .trait-row small {
    color: var(--muted);
    font-size: 0.5rem;
  }

  .detail-meta {
    display: flex;
    gap: 12px;
  }

  .detail-meta span {
    display: grid;
    gap: 1px;
  }

  .detail-meta small {
    color: var(--muted);
    font-size: 0.5rem;
  }

  .detail-meta b {
    color: var(--bone);
    font-size: 0.56rem;
  }

  .detail-card .detail-left {
    gap: 5px;
  }

  .detail-card .detail-actions {
    gap: 4px;
  }

  .detail-card .detail-actions button {
    min-height: 30px;
    font-size: 0.62rem;
  }

  .detail-card .detail-right {
    gap: 6px;
  }

  .detail-card .detail-head {
    gap: 4px;
  }

  .detail-card .detail-head .eyebrow {
    font-size: 0.62rem;
  }

  .detail-card .detail-title {
    font-size: calc(var(--text-md) + 1px);
  }

  .detail-card .item-sheet-level {
    font-size: 0.61rem;
  }

  .detail-card .detail-body {
    gap: 6px;
  }

  .detail-card .detail-stats {
    gap: 3px;
  }

  .detail-card .stat-chip {
    gap: 3px;
    padding: 2px 7px;
    font-size: 0.61rem;
  }

  .detail-card .detail-desc {
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .detail-card .card-mod-slots {
    gap: 6px;
    padding: 3px 1px;
  }

  .detail-card .card-mod-head {
    font-size: 0.52rem;
  }

  .detail-card .card-mod-head b {
    font-size: 0.66rem;
  }

  .detail-card .card-mod-row {
    gap: 5px;
  }

  .detail-card .card-mod-slot {
    padding: 0 5px;
  }

  .detail-card .card-mod-slot i {
    font-size: 0.72rem;
  }

  .detail-card .card-mod-slot b {
    font-size: 0.68rem;
  }

  .detail-card .card-mod-slot u {
    font-size: 0.48rem;
  }

  .detail-card .card-mod-slot.locked i {
    font-size: 0.6rem;
  }

  .detail-card .card-mod-slot.locked b {
    font-size: 0.62rem;
  }

  .detail-card .seal-warning {
    font-size: 0.61rem;
    line-height: 1.28;
  }

  .detail-card .card-rules {
    gap: 4px;
    padding: 5px 6px;
  }

  .detail-card .card-rules h3 {
    font-size: 0.64rem;
  }

  .detail-card .card-rules ul {
    gap: 3px;
    padding-left: 12px;
  }

  .detail-card .card-rules li {
    font-size: 0.58rem;
    line-height: 1.24;
  }

  .detail-card .trait-row b {
    font-size: 0.62rem;
  }

  .detail-card .trait-row small {
    font-size: 0.56rem;
    line-height: 1.22;
  }

  .detail-card .detail-meta {
    gap: 10px;
  }

  .detail-card .detail-meta small {
    font-size: 0.56rem;
  }

  .detail-card .detail-meta b {
    font-size: 0.62rem;
  }

  /* полноэкранный просмотр картинки/карты */
  .full-image-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 24px;
    background: rgba(3, 2, 4, 0.93);
    cursor: zoom-out;
  }

  .full-image-stage {
    max-width: min(92vw, 480px);
    max-height: 80dvh;
    border-radius: var(--radius);
    object-fit: contain;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
  }

  .full-image-label {
    color: var(--bone);
    font-size: 0.72rem;
    text-align: center;
  }

  .full-image-close {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    right: 14px;
  }

  /* Полноразмерный просмотр персонажа (A6): прячем интерфейс, фигуру можно
     двигать пальцем и масштабировать двумя пальцами (пинч). */
  /* Полноразмерный просмотр — крупный показ, закрытие нажатием в любом месте. */
  .avatar-fs-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, rgba(40, 10, 14, 0.55), rgba(3, 2, 4, 0.97) 70%);
    cursor: zoom-out;
  }

  .avatar-fs-figure .avatar-scene.large {
    width: calc(82dvh * 0.6875);
    height: 82dvh;
  }

  /* Слой персонажа в окне профиля, который можно двигать пальцем и масштабировать. */
  .profile-fixed-hero .avatar-pan {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: end center;
    touch-action: none;
  }

  .avatar-pan-figure {
    transform-origin: center center;
    will-change: transform;
  }

  /* Маленькие полупрозрачные кнопки (центровка + просмотр) в углу превью. */
  .avatar-box-controls {
    position: absolute;
    z-index: 7;
    right: 7px;
    bottom: 7px;
    display: flex;
    gap: 6px;
  }

  .avatar-box-btn {
    display: grid;
    width: 26px;
    height: 26px;
    min-height: 26px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 7px;
    background: rgba(8, 8, 10, 0.42);
    color: var(--bone);
    font-size: 0.82rem;
    line-height: 1;
    backdrop-filter: blur(3px);
  }

  /* Подсказка по тапу (A5) — мобайл без курсора, нативный title не работает. */
  .ui-tip {
    position: fixed;
    z-index: 200;
    max-width: 200px;
    padding: 5px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: rgba(8, 8, 10, 0.96);
    color: var(--bone);
    font-size: 0.52rem;
    line-height: 1.3;
    text-align: center;
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 120ms ease, transform 120ms ease;
  }

  .ui-tip.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Компактный поповер по тапу — общий вид с .ui-tip, но с разметкой и тапами. */
  .ui-popover {
    position: fixed;
    z-index: 201;
    width: max-content;
    max-width: min(260px, calc(100vw - 16px));
    padding: 8px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: rgba(8, 8, 10, 0.97);
    color: var(--bone);
    text-align: left;
    backdrop-filter: blur(3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 120ms ease, transform 120ms ease;
    pointer-events: none;
  }

  .ui-popover.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mod-pop-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line);
  }

  .mod-pop-head b {
    color: var(--bone);
    font-size: 0.6rem;
  }

  .mod-pop-head span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.46rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mod-pop-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mod-pop-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
  }

  .mod-pop-row.locked {
    opacity: 0.74;
  }

  .mod-pop-num {
    display: grid;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    font-size: 0.5rem;
  }

  .mod-pop-row b {
    color: var(--bone);
    font-size: 0.56rem;
  }

  .mod-pop-row small {
    color: var(--muted);
    font-size: 0.5rem;
    line-height: 1.3;
  }

  .mod-pop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }

  .pile-pop {
    display: grid;
    gap: 6px;
    max-width: 230px;
  }

  .pile-pop-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line);
  }

  .pile-pop-head b {
    color: var(--bone);
    font-size: 0.62rem;
  }

  .pile-pop-head span {
    flex: 0 0 auto;
    color: var(--gold);
    font-size: 0.52rem;
    font-weight: 800;
  }

  .pile-pop p {
    color: var(--muted);
    font-size: 0.54rem;
    line-height: 1.35;
  }

  .rarity-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rarity, var(--red));
    box-shadow: 0 0 6px color-mix(in srgb, var(--rarity, var(--red)), transparent 40%);
  }

  /* уровень: подпись + тонкий прогресс-бар в тон редкости */
  .item-level {
    display: grid;
    gap: 3px;
  }

  .item-sheet-level {
    color: var(--muted);
    font-size: 0.55rem;
  }

  .item-level-bar {
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
  }

  .item-level-bar i {
    display: block;
    height: 100%;
    background: var(--rarity, var(--gold));
    box-shadow: 0 0 8px color-mix(in srgb, var(--rarity, var(--gold)), transparent 50%);
  }

  /* Универсальный счётчик-бейдж: почта, статы, перки — единый вид.
     Отличается только привязкой к углу конкретной кнопки. */
  .notice-button b,
  .tab-row > button > b {
    position: absolute;
    display: grid;
    min-width: 14px;
    height: 14px;
    place-items: center;
    padding: 0 3px;
    border-radius: 50%;
    background: var(--red);
    color: white;
    font-size: 0.45rem;
  }

  .notice-button b {
    top: -4px;
    right: 0;
  }

  .tab-row > button > b {
    top: -3px;
    right: -2px;
  }

  /* Красная точка на вкладке, где ждёт награда или новый предмет. */
  .tab-row > button .tab-alert {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 6px rgba(216, 59, 50, 0.85);
  }

  .profile-tab-content {

    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;

    padding-right: 2px;

  }

  .profile-overview {
    display: grid;
    gap: 7px;
  }

  .activities-screen {
    display: grid;
    grid-template-rows: auto 40px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    gap: 7px;
  }

  .activity-content {
    min-height: 0;
    overflow-y: auto;
  }

  .activity-season,
  .activity-list {
    display: grid;
    gap: 7px;
  }

  .activity-hero,
  .daily-card,
  .future-grid article {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--line-gold);
    background:
      linear-gradient(90deg, rgba(5, 5, 5, 0.95), rgba(5, 5, 5, 0.24)),
      url("/assets/ui/home_bg.webp") center/cover;
  }

  .activity-rewards {
    padding: 6px;
    border: 1px solid var(--line);
  }

  .activity-season-track {
    min-height: 88px;
  }

  .activity-list article {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 68px;
    gap: 5px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    background: var(--panel);
  }

  .activity-list article > span {
    color: var(--red);
  }

  .activity-list article .bar,
  .activity-list article p,
  .activity-list article small {
    grid-column: 2;
  }

  .activity-list article button {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-height: 34px;
    padding: 3px;
    font-size: 0.52rem;
  }

  .activity-list article button.activity-claim-ready {
    border-color: var(--red);
    color: var(--gold);
  }

  .rewarded-ad-quest {
    border-color: var(--line-gold) !important;
    background: linear-gradient(90deg, rgba(70, 45, 10, 0.16), rgba(5, 5, 5, 0.92)) !important;
  }

  .rewarded-ad-quest > span {
    color: var(--gold) !important;
  }

  .daily-card {
    place-items: center;
    min-height: 260px;
    text-align: center;
  }

  .daily-card > span {
    color: var(--gold);
    font-size: 2rem;
  }

  .future-grid {
    display: grid;
    gap: 8px;
  }

  .combat-lock {
    position: absolute;
    z-index: 9;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    pointer-events: all;
  }

  .flee-button {
    width: 44px;
    min-height: 36px;
    padding: 2px;
    border-color: rgba(216, 59, 50, 0.36);
    color: #d7aaa4;
    font-size: 0.46rem;
  }

  .hand-card.unaffordable {
    filter: saturate(0.3) brightness(0.43);
  }

  .hand-card.unaffordable::after {
    position: absolute;
    z-index: 5;
    inset: 0;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
  }

  .energy-warning {
    position: absolute;
    z-index: 6;
    right: 4px;
    bottom: 4px;
    left: 4px;
    padding: 3px;
    border: 1px solid rgba(216, 59, 50, 0.45);
    background: rgba(24, 5, 6, 0.92);
    color: #ffc2ba;
    font-size: 0.46rem;
    text-align: center;
  }

  .hand-card.is-pending {
    opacity: 0.45;
    pointer-events: none;
  }

  /* контейнер аватара — 1:1 с .home-hero-avatar на главном */
  .profile-fixed-hero .profile-avatar-drop {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: end center;
    transition: background 140ms ease, box-shadow 140ms ease;
  }

  .profile-fixed-hero .profile-avatar-drop.drag-over {
    background: radial-gradient(circle at 50% 48%, rgba(216, 59, 50, 0.32), transparent 9rem);
    box-shadow: inset 0 0 26px rgba(216, 59, 50, 0.38);
  }

  /* Подсказку дропа держим по центру аватара (поверх всего), чтобы она не
     наезжала на нижние боксы УР/АТК/ЗАЩ (.hero-combat, bottom:5px). */
  .profile-drop-hint {
    position: absolute;
    z-index: 8;
    top: 50%;
    left: 50%;
    display: none;
    width: 156px;
    padding: 3px 5px;
    border: 1px solid var(--line-strong);
    background: rgba(5, 5, 5, 0.86);
    color: var(--bone);
    font-size: 0.46rem;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .profile-avatar-drop.drag-over .profile-drop-hint {
    display: block;
  }

  /* слоты экипировки: размер и отступ 1:1 со слотами на главном экране */
  .profile-equipment {
    position: absolute;
    z-index: 6;
    top: 8px;
    display: grid;
    gap: 4px;
  }

  .profile-equipment-left {
    left: 8px;
  }

  .profile-equipment-slot {
    border-style: dashed;
    background: rgba(5, 5, 5, 0.68);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  }

  .profile-equipment-slot.filled {
    border-style: solid;
    border-color: var(--line-gold);
  }

  .profile-equipment-slot.drag-over {
    border-color: #fff;
    background: rgba(112, 17, 21, 0.88);
    box-shadow: 0 0 16px rgba(216, 59, 50, 0.72);
    transform: scale(1.08);
  }

  .profile-tab-content-inventory {
    padding-right: 0;
    overflow: hidden;
  }

  .profile-tab-content-inventory .real-inventory {
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }

  .inventory-scroll {
    display: grid;
    min-height: 0;
    align-content: start;
    gap: 6px;
    padding-right: 2px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .profile-tab-content-inventory .real-inventory-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .profile-tab-content-inventory .inventory-item {
    min-height: 94px;
    padding: 0;
    border-radius: var(--radius);
    box-shadow: var(--inset-sheen);
    transition: transform 130ms var(--ease-out), box-shadow 130ms var(--ease-out);
  }

  .profile-tab-content-inventory .inventory-item:active {
    transform: scale(0.96);
  }

  .profile-tab-content-inventory .inventory-item img {
    padding: 19px 5px;
    object-fit: contain;
    opacity: 0.95;
  }

  /* ВЕРХ плитки: имя — главное, цвет по редкости, свечение от аффиксов; значок аффиксов справа */
  .profile-tab-content-inventory .inv-tile-top {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    gap: 3px;
    padding: 3px 2px 9px;
    background: linear-gradient(to bottom, rgba(6, 5, 8, 0.97), rgba(6, 5, 8, 0.5) 62%, transparent);
  }

  .profile-tab-content-inventory .inv-tile-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: none;
    color: var(--rarity, var(--bone));
    font-size: 0.5rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92);
    white-space: nowrap;
  }

  /* НИЗ плитки: набор (приглушён) слева + уровень-пилюля справа */
  .profile-tab-content-inventory .inv-tile-bottom {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 9px 2px 2px;
    background: linear-gradient(to top, rgba(6, 5, 8, 0.95), rgba(6, 5, 8, 0.4) 62%, transparent);
  }

  /* Значок принадлежности к слоту — над пилюлей уровня, в углу плитки. Тот же
     набор глифов, что и у слотов экипировки на экране персонажа. */
  .profile-tab-content-inventory .inv-tile-slot {
    position: absolute;
    z-index: 4;
    right: 2px;
    bottom: 15px;
    color: var(--rarity, var(--bone));
    font-size: 0.62rem;
    font-style: normal;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    opacity: 0.92;
    pointer-events: none;
  }

  .profile-tab-content-inventory .inv-tile-level {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 4px;
    border: 1px solid color-mix(in srgb, var(--rarity, var(--line)), transparent 40%);
    border-radius: 4px;
    background: color-mix(in srgb, var(--rarity, #1a1014), #050505 78%);
    color: var(--bone);
    font-size: 0.42rem;
    font-weight: 800;
    font-style: normal;
    line-height: 1.5;
  }

  /* свечение имени от аффиксов (Diablo-стиль) — без значка-счётчика на плитке */
  .profile-tab-content-inventory .inventory-item.affixed {
    --affix-tone: #7fc8ff;
  }
  .profile-tab-content-inventory .inventory-item.affix-tier-2 {
    --affix-tone: #b98bff;
  }
  .profile-tab-content-inventory .inventory-item.affix-tier-3 {
    --affix-tone: #ffcf66;
  }
  .profile-tab-content-inventory .inventory-item.affixed .inv-tile-name {
    text-shadow: 0 0 8px color-mix(in srgb, var(--affix-tone), transparent 28%), 0 1px 3px rgba(0, 0, 0, 0.92);
  }

  /* НАДЕТО — рамка в цвет редкости чуть толще + скромная галочка в углу */
  .profile-tab-content-inventory .inventory-item.equipped {
    border-width: 2px;
    box-shadow: var(--inset-sheen);
  }

  .profile-tab-content-inventory .inv-tile-worn {
    position: absolute;
    z-index: 5;
    top: 2px;
    right: 2px;
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--rarity, var(--line)), transparent 40%);
    border-radius: 50%;
    background: rgba(8, 10, 9, 0.82);
    color: color-mix(in srgb, #8fbf9a, var(--bone) 35%);
    font-size: 0.46rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
  }

  /* бейдж «в сундуке» — та же сущность, что галка надетого, но буква «С» и янтарный тон */
  .profile-tab-content-inventory .inv-tile-stashed {
    color: #e8c46a;
  }

  /* имя экипированного/отложенного не залезает под бейдж */
  .profile-tab-content-inventory .inventory-item.equipped .inv-tile-top,
  .profile-tab-content-inventory .inventory-item.stashed .inv-tile-top {
    padding-right: 18px;
  }

  .profile-tab-content-inventory .inventory-item.stash-cell {
    border-color: color-mix(in srgb, #e8c46a, transparent 55%);
    background: radial-gradient(circle at 50% 38%, rgba(232, 196, 106, 0.16), transparent 70%);
  }

  /* лист персонажа: герой той же высоты, что на главном (--hero-h) */
  .persona-screen {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 40px minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    gap: 7px;
    overflow: hidden;
  }

  /* фон 1:1 с .home-hero::before */
  .profile-fixed-hero {
    position: relative;
    display: grid;
    height: var(--hero-h);
    min-height: 0;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line-gold);
    box-shadow: var(--inset-sheen);
    background:
      radial-gradient(circle at 50% 38%, rgba(216, 59, 50, 0.2), transparent 54%),
      linear-gradient(0deg, rgba(5, 5, 5, 0.95), rgba(5, 5, 5, 0.1) 60%, rgba(5, 5, 5, 0.42)),
      url("/assets/ui/chamber_bg.webp") center bottom/cover;
  }

  /* аватар 1:1 с главным экраном */
  .profile-fixed-hero .avatar-scene.large {
    align-self: center;
    width: 186px;
    height: 270px;
  }

  /* Имя — в свободный правый верхний угол (над списком статов, top:44px),
     чтобы не перекрывать обзор персонажа. */
  .profile-hero-name {
    position: absolute;
    z-index: 7;
    top: 7px;
    right: 8px;
    left: auto;
    display: flex;
    max-width: calc(100% - 92px);
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    color: var(--bone);
    text-align: right;
    text-shadow: 0 2px 4px #000, 0 0 12px rgba(216, 59, 50, 0.45);
    transform: none;
  }

  .profile-hero-name strong {
    display: block;
    overflow: hidden;
    max-width: 100%;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-name-edit {
    width: 24px;
    min-height: 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #ffd24a;
    font-size: 0.95rem;
    text-shadow: 0 1px 3px #000;
  }

  .inventory-item.dragging {
    opacity: 0.34;
  }

  .app-shell {
    -webkit-touch-callout: none;
  }

  /* Никакого системного «открыть картинку», выделения и нативного драга картинок
     по всему приложению — не только внутри .app-shell. */
  img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
  }

  /* Плитки инвентаря: долгий тап = перетаскивание на персонажа. Картинка не ловит
     события (их получает кнопка), поэтому ОС не предлагает меню для изображения. */
  [data-drag-item] {
    -webkit-touch-callout: none;
  }

  [data-drag-item] img {
    pointer-events: none;
  }

  .drag-ghost {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 92px;
    min-height: 100px;
    opacity: 0.84;
    pointer-events: none;
    transform-origin: top left;
  }

  .collection-toolbar {
    position: relative;
    z-index: 5;
    display: grid;
    gap: 7px;
    padding-bottom: 2px;
    background: rgba(5, 5, 5, 0.96);
  }

  .collection-title-row {
    align-items: center;
    min-height: 38px;
  }

  .collection-title-copy {
    min-width: 0;
  }

  .collection-title-copy .eyebrow {
    margin-bottom: 1px;
  }

  .collection-title-copy h1 {
    line-height: 0.95;
  }

  .collection-title-tools {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .collection-deck-count {
    display: grid;
    flex: 0 0 auto;
    gap: 0;
    min-width: 44px;
    text-align: right;
  }

  .collection-deck-count small {
    color: var(--muted);
    font-size: 0.44rem;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .collection-deck-count b {
    color: var(--bone);
    font-size: 0.76rem;
    line-height: 1.2;
  }

  .collection-sort-trigger {
    display: flex;
    gap: 5px;
    align-items: center;
    max-width: 150px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(178, 138, 90, 0.36);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(30, 23, 20, 0.92), rgba(12, 9, 9, 0.94));
    color: var(--bone);
    box-shadow: var(--inset-sheen);
  }

  .collection-sort-trigger i {
    flex: 0 0 auto;
    color: var(--gold);
    font-size: 0.78rem;
    font-style: normal;
  }

  .collection-sort-trigger span {
    overflow: hidden;
    font-size: 0.54rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .collection-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: stretch;
  }

  .collection-search-box {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    min-height: 38px;
    padding: 0 5px 0 7px;
    border: 1px solid rgba(178, 138, 90, 0.3);
    border-radius: var(--radius);
    background: rgba(13, 10, 10, 0.9);
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.34);
  }

  .collection-search-box:focus-within {
    border-color: rgba(216, 59, 50, 0.72);
    box-shadow: var(--ring-crimson), inset 0 1px 8px rgba(0, 0, 0, 0.34);
  }

  .collection-search-box > i {
    color: var(--gold);
    font-size: 1rem;
    font-style: normal;
  }

  .collection-search-box input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bone);
    font: inherit;
    font-size: 0.72rem;
  }

  .collection-search-box input::placeholder {
    color: #746b64;
  }

  .collection-search-box input::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
  }

  .collection-search-box button {
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1rem;
  }

  .collection-search-box input:placeholder-shown + button {
    visibility: hidden;
    pointer-events: none;
  }

  .collection-filter-trigger {
    position: relative;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--glass);
    color: var(--bone);
  }

  .collection-filter-trigger i {
    color: var(--gold);
    font-size: 0.85rem;
    font-style: normal;
    transform: rotate(90deg);
  }

  .collection-filter-trigger span {
    font-size: 0.6rem;
    font-weight: 800;
  }

  .collection-filter-trigger b {
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 0.5rem;
  }

  .collection-filter-trigger.active {
    border-color: var(--line-strong);
    box-shadow: var(--ring-crimson);
  }

  .collection-quick-filters,
  .collection-active-chips {
    display: flex;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .collection-quick-filters::-webkit-scrollbar,
  .collection-active-chips::-webkit-scrollbar {
    display: none;
  }

  .collection-quick-filters button,
  .collection-active-chip {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(151, 140, 130, 0.24);
    border-radius: 999px;
    background: rgba(18, 14, 14, 0.88);
    color: #b8ada3;
    font-size: 0.57rem;
    font-weight: 750;
    white-space: nowrap;
  }

  .collection-quick-filters button b {
    margin-left: 3px;
    color: var(--gold);
    font-size: 0.52rem;
  }

  .collection-quick-filters button.active {
    border-color: rgba(216, 59, 50, 0.76);
    background: linear-gradient(180deg, rgba(111, 23, 25, 0.84), rgba(44, 11, 13, 0.9));
    color: #fff3ea;
    box-shadow: var(--ring-crimson);
  }

  .collection-active-chips {
    padding-bottom: 1px;
  }

  .collection-active-chip {
    display: flex;
    gap: 6px;
    align-items: center;
    border-color: rgba(178, 138, 90, 0.42);
    color: var(--bone);
  }

  .collection-active-chip i {
    color: var(--gold);
    font-size: 0.8rem;
    font-style: normal;
    line-height: 1;
  }

  .cards-screen .collection-rail {
    min-height: 0;
    padding-top: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .collection-query-sheet {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    max-height: min(82dvh, 680px);
    padding: 0;
    overflow: hidden;
    border-top: 2px solid var(--line-strong);
    border-radius: 12px 12px 0 0;
    background:
      radial-gradient(100% 65% at 0 0, rgba(216, 59, 50, 0.12), transparent 56%),
      #090707;
  }

  .collection-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(178, 138, 90, 0.18);
    background: rgba(9, 7, 7, 0.94);
  }

  .collection-sheet-head .eyebrow {
    margin-bottom: 1px;
  }

  .collection-sheet-head h2 {
    font-size: 1.05rem;
    line-height: 1;
  }

  .collection-sheet-head > button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(20, 14, 14, 0.86);
    color: var(--muted);
    font-size: 1.15rem;
  }

  .collection-sheet-scroll {
    display: grid;
    gap: 14px;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .collection-filter-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .collection-filter-group legend {
    margin-bottom: 7px;
    color: var(--gold);
    font-size: 0.56rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .collection-filter-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .collection-filter-choice {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 0 9px 0 10px;
    border: 1px solid rgba(151, 140, 130, 0.26);
    border-radius: 999px;
    background: rgba(19, 15, 15, 0.9);
    color: #b8ada3;
    font-size: 0.61rem;
  }

  .collection-filter-choice i {
    display: grid;
    width: 15px;
    height: 15px;
    place-items: center;
    border: 1px solid rgba(151, 140, 130, 0.32);
    border-radius: 50%;
    color: #746b64;
    font-size: 0.48rem;
    font-style: normal;
  }

  .collection-filter-choice.active {
    border-color: rgba(216, 59, 50, 0.74);
    background: rgba(82, 18, 20, 0.68);
    color: #fff2e8;
    box-shadow: var(--ring-crimson);
  }

  .collection-filter-choice.active i {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
  }

  .collection-sheet-actions {
    display: grid;
    grid-template-columns: minmax(92px, 0.36fr) minmax(0, 1fr);
    gap: 7px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(178, 138, 90, 0.2);
    background: rgba(9, 7, 7, 0.98);
    box-shadow: 0 -10px 22px rgba(0, 0, 0, 0.28);
  }

  .collection-sheet-actions button {
    min-height: 42px;
  }

  .collection-sort-sheet {
    max-height: min(74dvh, 570px);
  }

  .collection-sort-options {
    display: grid;
    min-height: 0;
    padding: 6px 10px;
    overflow-y: auto;
  }

  .collection-sort-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(178, 138, 90, 0.14);
    background: transparent;
    color: #b8ada3;
    text-align: left;
  }

  .collection-sort-option i {
    color: var(--gold);
    font-size: 0.8rem;
    font-style: normal;
    text-align: center;
  }

  .collection-sort-option.active {
    color: #fff1e6;
  }

  .collection-sort-hint {
    margin: 0;
    padding: 5px 12px 11px;
    color: var(--muted);
    font-size: 0.52rem;
    line-height: 1.35;
  }

  /* характеристики: компактная сетка 2×3, всё видно без скролла */
  .profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .profile-stat-grid article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    gap: 6px;
    align-items: center;
    min-width: 0;
    min-height: 52px;
    padding: 5px 6px;
    border: 1px solid var(--line);
    background: var(--panel);
  }

  .profile-stat-grid article > b {
    color: var(--bone);
    font-size: 1.1rem;
    line-height: 1;
    text-align: center;
  }

  .profile-stat-grid article > b.boosted {
    color: var(--gold);
  }

  .profile-stat-grid article > div {
    min-width: 0;
  }

  .profile-stat-grid article span {
    display: block;
    overflow: hidden;
    color: var(--gold);
    font-size: 0.52rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .profile-stat-grid article small {
    display: block;
    overflow: hidden;
    color: #b9aca1;
    font-size: 0.46rem;
    line-height: 1.25;
  }

  .profile-stat-grid article > button {
    width: 30px;
    min-height: 30px;
    padding: 0;
    font-size: 0.9rem;
  }

  /* без очков кнопка не нужна, но место держит — сетка не прыгает */
  .profile-stat-grid article > button.ghost {
    visibility: hidden;
  }

  .real-inventory {
    display: grid;
    gap: 7px;
  }

  .real-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .inventory-item {
    position: relative;
    display: grid;
    min-height: 122px;
    align-content: end;
    gap: 2px;
    padding: 5px;
    overflow: hidden;
    text-align: left;
  }

  .inventory-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.54;
  }

  .inventory-item span,
  .inventory-item small {
    z-index: 2;
    overflow: hidden;
    padding: 2px;
    background: rgba(5, 5, 5, 0.78);
    font-size: 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* набор — теперь в нижней ленте слева, приглушённый (без акцента) */
  .inventory-item .gear-set-badge-inventory {
    position: static;
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 28px);
    height: 13px;
    gap: 3px;
    padding: 0 5px;
    border: 1px solid color-mix(in srgb, var(--set-a), transparent 62%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--set-a), #050505 82%);
    box-shadow: none;
    opacity: 0.72;
    font-size: 0.38rem;
    letter-spacing: 0.01em;
  }

  .inventory-item .gear-set-badge-inventory i {
    min-width: 0;
    max-width: 28px;
    font-size: 0.38rem;
  }

  .inventory-item .gear-set-badge-inventory b {
    flex: 0 0 auto;
    font-size: 0.38rem;
  }

  /* экипировка обозначается рамкой в тон редкости — без отдельной «галочки» */
  .inventory-item.selected,
  .inventory-item.equipped,
  .inventory-item.stashed {
    border-color: color-mix(in srgb, var(--rarity, var(--line-strong)), white 8%);
    box-shadow: var(--inset-sheen), 0 0 0 1px color-mix(in srgb, var(--rarity, var(--line-strong)), transparent 40%);
  }

  /* арт сундука заполняет плитку, оставляя место верхней и нижней подписям */
  .inventory-item.stash-cell {
    position: relative;
  }

  .inventory-item.stash-cell .stash-cell-art {
    padding: 16px 2px 14px;
    object-fit: contain;
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.78));
  }

  /* пустой слот сундука — та же коробка, что и плитка инвентаря, только пунктиром */
  .inventory-item.slot-empty {
    border: 1px dashed color-mix(in srgb, var(--line), transparent 25%);
    background: rgba(255, 255, 255, 0.015);
    box-shadow: none;
  }
  /* слоты сундука в теле стандартного шита: сетка-обёртка, плитки — те же, что в инвентаре */
  .stash-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .item-set-info {
    display: grid;
    gap: 5px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--set-a), white 10%);
    border-radius: var(--radius);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--set-a), #050505 72%), rgba(5, 5, 5, 0.84)),
      radial-gradient(circle at 100% 0, var(--set-glow), transparent 56%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  }

  .item-set-head,
  .item-set-counts,
  .item-set-bonuses {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .item-set-head {
    justify-content: space-between;
  }

  .item-set-head strong {
    overflow: hidden;
    color: var(--set-b);
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .item-set-head b {
    color: var(--bone);
    font-size: 0.62rem;
  }

  .item-set-counts span,
  .item-set-bonuses span {
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(5, 5, 5, 0.46);
    color: var(--muted);
    font-size: 0.48rem;
    line-height: 1.3;
  }

  .item-set-bonuses span.active {
    border-color: color-mix(in srgb, var(--set-b), white 12%);
    color: var(--bone);
    box-shadow: 0 0 8px var(--set-glow);
  }

  /* перки: три компактных ряда, умещаются без скролла */
  .real-talents {
    display: grid;
    gap: 4px;
  }

  .real-talents article {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 44px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    background: var(--panel);
  }

  .talent-icon {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid var(--line-strong);
    color: var(--red);
    font-size: 0.78rem;
  }

  .real-talents article strong {
    display: block;
    overflow: hidden;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .real-talents article small {
    display: block;
    overflow: hidden;
    color: #b9aca1;
    font-size: 0.44rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .talent-rank {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  .talent-rank b {
    color: var(--gold);
    font-size: 0.56rem;
  }

  .talent-rank em {
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--muted);
    font-size: 0.42rem;
    font-style: normal;
  }

  .talent-rank button {
    width: 26px;
    min-height: 26px;
    padding: 0;
  }

  .talent-rank button.talent-max {
    font-size: 0.48rem;
    font-weight: 800;
  }

  .profile-appearance,
  .profile-training {
    display: grid;
    gap: 6px;
  }

  .profile-appearance-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
  }

  .profile-appearance .cyc-list {
    gap: 5px;
  }

  .profile-appearance .cyc-row {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 6px;
  }

  .profile-appearance .cyc-arrow {
    min-height: 31px;
  }

  .profile-appearance .cyc-value {
    padding: 2px 4px;
    font-size: 0.6rem;
  }

  .profile-appearance .primary-cta {
    min-height: 36px;
  }

  .training-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--line);
    background: var(--panel);
  }

  .training-event strong {
    display: block;
    color: var(--bone);
    font-size: 0.7rem;
  }

  .training-event small {
    color: var(--muted);
    font-size: 0.52rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — медиа-запросы и адаптив под узкое окно Telegram
   ══════════════════════════════════════════════════════════════════════ */
@layer responsive {
  @media (max-height: 760px) {
    .topbar {
      min-height: calc(52px + env(safe-area-inset-top));
    }

    .bottom-nav {
      min-height: calc(54px + env(safe-area-inset-bottom));
    }

    .bottom-nav button {
      min-height: 46px;
    }

    .creator-onboarding .creator-stage .avatar-scene.creator {
      width: 110px;
      height: 148px;
      transform: translate(-10px, -31px);
    }

    .creator-onboarding .creator-switch button {
      min-height: 42px;
    }

    .creator-onboarding .cyc-arrow {
      min-height: 36px;
    }

    /* Бой: на низких окнах (десктопный Telegram открывает узкое по высоте окно)
       поджимаем фикс-блоки HUD/руки/лога, чтобы враг и карты не обрезались. */
    .combat-screen {
      grid-template-rows: minmax(0, 1fr) 68px 132px 30px;
      gap: 4px;
    }
  }

  @media (max-height: 600px) {
    .combat-screen {
      grid-template-rows: minmax(0, 1fr) 62px 112px 28px;
      gap: 3px;
    }

    .combat-hud {
      padding: 4px;
    }
  }

  @media (max-width: 410px) {
    .topbar {
      grid-template-columns: 46px minmax(60px, 1fr) auto 28px 28px 28px;
      gap: 3px;
      padding-inline: 4px;
    }

    .screen {
      padding: 7px;
    }

    .collection-mini-grid {
      gap: 5px;
    }

    .hud-resources {
      grid-template-columns: repeat(2, 30px);
    }

    .gram-wallet-button,
    .notice-button,
    .settings-button {
      width: 30px;
      height: 30px;
      min-height: 30px;
    }

    .hud-portrait {
      width: 46px;
      height: 46px;
      min-height: 46px;
    }
  }

  @media (min-width: 700px) {
    .mobile-frame {
      border-right: 1px solid rgba(216, 59, 50, 0.28);
      border-left: 1px solid rgba(216, 59, 50, 0.28);
    }
  }

  /* компактный лист персонажа для невысоких экранов (10:16 меньше ~620px) */
  @media (max-height: 620px) {
    .hero-stats {
      top: 40px;
      gap: 2px;
      width: 56px;
    }

    .hero-stats li {
      padding: 1px 4px;
    }

    .hero-stats li b {
      font-size: 0.6rem;
    }

    .hero-stats li small {
      font-size: 0.44rem;
    }

    .hero-talents > small {
      display: none;
    }

    .talent-slot {
      width: 22px;
      height: 22px;
      font-size: 0.7rem;
    }

    .hero-gear,
    .profile-equipment {
      top: 6px;
      left: 6px;
      gap: 3px;
    }

    .equipment-slot {
      width: 25px;
      min-width: 25px;
      height: 25px;
      min-height: 25px;
      font-size: 0.62rem;
    }

    .gear-set-badge-slot {
      right: 0;
      bottom: 0;
      width: 5px;
      min-width: 5px;
      height: 5px;
    }

    .gear-set-badge-slot b {
      font-size: 0.29rem;
    }
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MOTION — анимации, @keyframes, reduced-motion
   ══════════════════════════════════════════════════════════════════════ */
@layer motion {
  @keyframes pulse {
    0%,
    100% {
      opacity: 0.82;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
  }

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

  @keyframes sigilLoad {
    0%,
    12% {
      clip-path: inset(0 100% 0 0);
    }
    72%,
    100% {
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes titleLoad {
    0%,
    12% {
      width: 0;
    }
    72%,
    100% {
      width: 100%;
    }
  }

  @keyframes bootScan {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

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

  @keyframes screenIn {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes auraPulse {
    0%,
    100% {
      opacity: 0.58;
      transform: scale(0.98);
    }
    50% {
      opacity: 1;
      transform: scale(1.03);
    }
  }

  @keyframes avatarFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-1.4%);
    }
  }

  @keyframes runeSpin {
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes eyeFlicker {
    0%,
    44%,
    100% {
      opacity: 0.85;
    }
    47% {
      opacity: 0.35;
    }
    50% {
      opacity: 0.9;
    }
  }

  @keyframes enemyIdle {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-4px) scale(1.012);
    }
  }

  @keyframes castCard {
    0% {
      opacity: 0;
      transform: translate(-50%, 32px) scale(0.72);
    }
    35% {
      opacity: 1;
      transform: translate(-50%, -80px) scale(1.04);
    }
    76% {
      opacity: 1;
      transform: translate(-50%, -84px) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -92px) scale(0.92);
    }
  }

  @keyframes evolutionArrowGlow {
    0%,
    100% {
      transform: translateY(0) scale(1);
      box-shadow: 0 0 0 rgba(255, 159, 26, 0);
    }
    50% {
      transform: translateY(-1px) scale(1.12);
      box-shadow: 0 0 8px rgba(255, 159, 26, 0.62);
    }
  }

  @keyframes evolutionSlotIn {
    from {
      opacity: 0;
      transform: translateY(4px) scale(0.94);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes evolutionPulse {
    0%,
    100% {
      transform: scale(1);
      filter: drop-shadow(0 0 6px rgba(255, 125, 20, 0.3));
    }
    50% {
      transform: scale(1.045);
      filter: drop-shadow(0 0 20px rgba(255, 177, 45, 0.78));
    }
  }

  @keyframes evolutionReveal {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.9) rotateY(12deg);
      filter: brightness(1.8) blur(2px);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1) rotateY(0);
      filter: brightness(1) blur(0);
    }
  }

  @keyframes evolutionStarBurst {
    0% {
      opacity: 0;
      transform: scale(0.25) rotate(-35deg);
    }
    60% {
      opacity: 1;
      transform: scale(1.3) rotate(8deg);
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
  }

  .card-evolution-arrow.ready {
    animation: evolutionArrowGlow 1.8s ease-in-out infinite;
  }

  .card-evolve-slot.filled {
    animation: evolutionSlotIn 180ms ease-out both;
  }

  .evolution-pulse {
    animation: evolutionPulse 1.1s ease-in-out infinite;
  }

  .evolution-result-card {
    animation: evolutionReveal 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .evolution-star-burst {
    animation: evolutionStarBurst 620ms 120ms ease-out both;
  }

  @keyframes cardDealFromDeck {
    0% {
      opacity: 0;
      transform: translate(0, 0) rotate(var(--from-rot, -8deg)) scale(var(--from-scale, 0.58));
    }
    18% {
      opacity: 1;
    }
    78% {
      opacity: 1;
      transform: translate(var(--mid-move-x, 106px), var(--mid-move-y, 113px)) rotate(var(--mid-rot, -2deg)) scale(var(--mid-scale, 1.04));
    }
    100% {
      opacity: 0;
      transform: translate(var(--move-x, 126px), var(--move-y, 138px)) rotate(var(--to-rot, 1deg)) scale(var(--to-scale, 0.98));
    }
  }

  @keyframes cardFlyToDiscard {
    0% {
      opacity: 1;
      transform: translate(0, 0) rotate(var(--from-rot, -3deg)) scale(var(--from-scale, 0.98));
    }
    16% {
      opacity: 1;
      transform: translate(var(--mid-move-x, 13px), var(--mid-move-y, -5px)) rotate(var(--mid-rot, 8deg)) scale(var(--mid-scale, 0.9));
    }
    76% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate(var(--move-x, 83px), var(--move-y, -58px)) rotate(var(--to-rot, 12deg)) scale(var(--to-scale, 0.5));
    }
  }

  @keyframes handCardArrive {
    0% {
      opacity: 0;
      transform: translateY(10px) scale(0.96);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes effectChip {
    0% {
      opacity: 0;
      transform: translateX(16px);
    }
    12%,
    84% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(-10px);
    }
  }

  @keyframes fxSpriteBurst {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5) rotate(-8deg);
    }
    28%,
    72% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.04) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.28) rotate(8deg);
    }
  }

  @keyframes fxSlash {
    0% {
      opacity: 0;
      transform: translate(-62%, -46%) scale(0.45) rotate(-16deg);
    }
    28%,
    62% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.1) rotate(-7deg);
    }
    100% {
      opacity: 0;
      transform: translate(-38%, -56%) scale(1.36) rotate(6deg);
    }
  }

  @keyframes fxShield {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.45);
    }
    32%,
    74% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.02);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.24);
    }
  }

  @keyframes fxStatus {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.6) rotate(-4deg);
    }
    30%,
    78% {
      opacity: 0.94;
      transform: translate(-50%, -50%) scale(1) rotate(0);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.18) rotate(5deg);
    }
  }

  @keyframes fxTargetRing {
    0% {
      opacity: 0;
      transform: scale(0.92);
    }
    25%,
    72% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.08);
    }
  }

  @keyframes fxGuardRing {
    0% {
      opacity: 0;
      transform: scale(0.82);
    }
    28%,
    78% {
      opacity: 1;
      transform: scale(1.02);
      box-shadow: 0 0 24px rgba(255, 210, 128, 0.34);
    }
    100% {
      opacity: 0;
      transform: scale(1.16);
    }
  }

  @keyframes enemyHit {
    0%,
    100% {
      transform: translateX(0) scale(1);
      filter: drop-shadow(0 0 24px rgba(216, 59, 50, 0.36));
    }
    34% {
      transform: translateX(-7px) scale(0.985);
      filter: drop-shadow(0 0 30px rgba(255, 64, 54, 0.62));
    }
    62% {
      transform: translateX(5px) scale(1.012);
    }
  }

  @keyframes enemyCast {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    42% {
      transform: translateY(-8px) scale(1.045);
      filter: drop-shadow(0 0 32px rgba(255, 210, 128, 0.52));
    }
  }

  @keyframes playerHit {
    0%,
    100% {
      transform: translateX(0);
    }
    32% {
      transform: translateX(4px);
    }
    58% {
      transform: translateX(-3px);
    }
  }

  @keyframes pilePulse {
    0%,
    100% {
      transform: translateY(0) scale(1);
      filter: drop-shadow(0 0 7px rgba(216, 59, 50, 0.26));
    }
    46% {
      transform: translateY(-4px) scale(1.08);
      filter: drop-shadow(0 0 14px rgba(172, 230, 255, 0.5));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }

    .combat-fx-layer .combat-card-cast {
      display: none !important;
    }

    .combat-fx-layer .combat-card-motion {
      display: none !important;
    }

    .hand-card.is-dealing-in {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .combat-fx-layer .fx-sprite {
      animation: none !important;
      opacity: 0.82 !important;
    }

    .combat-fx-layer .combat-event-chip {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* in-app "reduced motion" setting (mirrors the OS preference) */
  .mobile-frame.reduced-motion *,
  .mobile-frame.reduced-motion *::before,
  .mobile-frame.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mobile-frame.reduced-motion .combat-fx-layer .combat-card-cast {
    display: none !important;
  }

  .mobile-frame.reduced-motion .combat-fx-layer .combat-card-motion {
    display: none !important;
  }

  .mobile-frame.reduced-motion .hand-card.is-dealing-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .mobile-frame.reduced-motion .combat-fx-layer .fx-sprite {
    animation: none !important;
    opacity: 0.82 !important;
  }

  .mobile-frame.reduced-motion .combat-fx-layer .combat-event-chip {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Telegram inline sharing -------------------------------------------------- */
.share-context-button {
  border: 1px solid rgba(255, 113, 148, 0.42);
  border-radius: 12px;
  background: rgba(31, 13, 31, 0.9);
  color: #ffb2c5;
  min-height: 38px;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.home-deck-share.share-context-button {
  flex: 0 0 auto;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.share-victory-shortcut {
  color: inherit;
}

.avatar-fs-actions {
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 18px;
  bottom: max(22px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
}

.avatar-fs-actions .primary-cta {
  width: min(100%, 360px);
}

.share-sheet {
  max-height: min(92%, 780px);
  overflow-y: auto;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.share-sheet header {
  padding-right: 42px;
}

.share-poster-preview,
.share-view-poster {
  display: block;
  width: min(100%, 390px);
  aspect-ratio: 4 / 5;
  margin: 14px auto;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.44);
}

.share-poster-missing {
  display: grid;
  place-items: center;
  min-height: 220px;
  margin: 14px 0;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  color: #ab9cb9;
}

.share-sheet-note {
  margin: 10px 0 16px;
  color: #b9aebe;
  font-size: 12px;
  line-height: 1.45;
}

.share-sheet-actions {
  display: grid;
  gap: 9px;
}

.share-view-overlay {
  position: absolute;
  z-index: 75;
  inset: 0;
  display: grid;
  align-items: stretch;
  padding: 12px;
  background: rgba(3, 2, 8, 0.92);
  backdrop-filter: blur(14px);
}

.share-view-card {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(30, 16, 39, 0.98), rgba(8, 6, 16, 0.99));
  padding: 20px 16px max(22px, env(safe-area-inset-bottom));
}

.share-view-card > header {
  padding-right: 42px;
}

.share-view-card > header h2,
.share-view-detail h3 {
  margin: 4px 0;
}

.share-view-card > header small,
.share-view-detail p,
.share-view-detail small {
  color: #b9aebe;
}

.share-view-detail {
  margin: 14px 0;
}

.share-view-detail h4 {
  margin: 18px 0 8px;
}

.share-view-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.share-view-metrics div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 9px 11px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
}

.share-view-metrics dt {
  color: #aa9bb6;
  font-size: 11px;
}

.share-view-metrics dd {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.share-view-cards {
  display: grid;
  gap: 6px;
  max-height: 300px;
  margin: 8px 0 18px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.share-view-cards li {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.share-view-cards small {
  color: #a99bb5;
}

.share-view-error {
  align-self: center;
  text-align: center;
  padding-top: 48px;
}

.setting-toggle.danger {
  border-color: rgba(255, 68, 95, 0.42);
  color: #ff8ca1;
}

.setting-toggle.danger span {
  color: #ff657e;
}

/* ══════════════════════════════════════════════════════════════════════
   OVERRIDES — точечные правила поверх слоёв (механики, бой, восхождение, подсказки)
   ══════════════════════════════════════════════════════════════════════ */
@layer overrides {

/* ── Механики: производные статы, перки, снаряжение, бой ── */

/* Боевой блок внутри панели персонажа — компактно, 2 узких ряда, идентично
   на главном и в профиле (отличаются только окружающие доп-поля экрана). */
.hero-combat {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hero-combat-top {
  display: flex;
  gap: 4px;
}
.hero-combat-top span {
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: 2px 5px;
  border: 1px solid var(--line-gold);
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(4px);
}
.hero-combat-top b {
  color: var(--bone);
  font-size: 0.72rem;
  line-height: 1;
}
.hero-combat-top i {
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.4rem;
  font-style: normal;
  text-transform: uppercase;
}
.hero-combat-top .hc-power {
  background: linear-gradient(160deg, rgba(216, 59, 50, 0.45), rgba(5, 5, 5, 0.8));
}
.hero-combat-top .hc-power b {
  color: #ffd24a;
}
.hero-combat-bot {
  display: flex;
  gap: 3px;
}
.hero-combat-bot span {
  padding: 1px 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 5, 5, 0.64);
  backdrop-filter: blur(3px);
  color: var(--bone);
  font-size: 0.48rem;
  line-height: 1.4;
  white-space: nowrap;
}
/* материал-ячейка (прах горнила) в инвентаре — тот же каркас плитки, тон горнила */
.inventory-item.material-cell {
  --rarity: rgba(224, 156, 86, 0.85);
  cursor: pointer;
}
.inventory-item.material-cell img {
  opacity: 1 !important;
  object-fit: contain !important;
}

/* контраст + единый акцент по редкости (тёмный шмот сливался с фоном) */
.inventory-item {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rarity, #8a78b4), #050505 80%), rgba(9, 7, 12, 0.96)) !important;
  border: 1px solid color-mix(in srgb, var(--rarity, #8a78b4), transparent 56%);
}
.inventory-item img {
  opacity: 0.97 !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}
/* НАДЕТО — рамка в цвет редкости, просто чуть толще (без вырвиглазных колец) */
.inventory-item.equipped {
  border-width: 2px;
  border-color: var(--rarity, #c58aff) !important;
  box-shadow: var(--inset-sheen);
}
.inventory-item.selected {
  border-color: var(--rarity, #c58aff) !important;
  box-shadow: var(--inset-sheen), 0 0 0 1px var(--rarity, #c58aff), 0 0 14px color-mix(in srgb, var(--rarity, #c58aff), transparent 50%);
}
.profile-equipment-slot {
  background: radial-gradient(circle at 50% 40%, rgba(110, 88, 140, 0.4), rgba(12, 10, 18, 0.9) 74%) !important;
}
.profile-equipment-slot img {
  opacity: 1 !important;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
}
.equipment-slot.filled,
.gear-slot.on {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 238, 184, 0.18), rgba(124, 96, 158, 0.54) 48%, rgba(12, 10, 18, 0.92) 78%) !important;
}
.equipment-slot.filled img,
.gear-slot.on img {
  opacity: 1 !important;
  filter:
    brightness(1.24)
    contrast(1.16)
    saturate(1.28)
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 5px rgba(241, 211, 138, 0.28));
  transform: scale(1.16);
}

.item-salvage {
  margin-top: 6px;
  width: 100%;
  min-height: 34px;
  font-size: 0.58rem;
  opacity: 0.85;
}

.intent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(255, 90, 90, 0.14);
  border: 1px solid rgba(255, 90, 90, 0.3);
}
.intent span {
  opacity: 0.6;
  text-transform: uppercase;
  font-size: 9px;
}
.intent-defend {
  background: rgba(90, 160, 255, 0.14);
  border-color: rgba(90, 160, 255, 0.3);
}
.intent-buff {
  background: rgba(255, 200, 90, 0.14);
  border-color: rgba(255, 200, 90, 0.3);
}
.intent-debuff {
  background: rgba(180, 120, 255, 0.16);
  border-color: rgba(180, 120, 255, 0.32);
}
.status-badges.player-status {
  margin-top: 0;
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 2px;
}
.status-badges.player-status span {
  flex: 0 1 auto;
  min-width: 0;
  background: rgba(180, 120, 255, 0.16);
  border-radius: 8px;
  padding: 1px 5px;
  font-size: 9px;
  line-height: 1.15;
}
.effect-feed .tone-crit b {
  color: #ffd24a;
}

/* список «сгорит» в подтверждении восхождения */
.descent-burn {
  margin: 6px 0;
  padding-left: 16px;
  font-size: 0.72rem;
  display: grid;
  gap: 3px;
}
.descent-burn small {
  opacity: 0.6;
}
.confirm-panel .muted {
  opacity: 0.6;
  font-size: 0.66rem;
}

.ascent-economy {
  display: grid;
  gap: 4px;
  margin: 8px 0 10px;
  padding: 8px;
  border: 1px solid rgba(197, 88, 255, 0.24);
  background: rgba(54, 24, 77, 0.22);
}
.descent-start-act {
  margin: 0;
  font-size: 0.72rem;
}
.descent-start-act b {
  color: #ffd385;
}
.start-act-picker {
  margin: 0;
  padding: 7px;
  border: 1px solid rgba(255, 211, 133, 0.25);
}
.start-act-picker legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.62rem;
}
.start-act-picker div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 6px;
}
.start-act-picker button {
  min-height: 36px;
  padding: 6px;
}
.start-act-picker button[aria-pressed="true"] {
  border-color: #ffd385;
  background: rgba(135, 76, 24, 0.48);
  color: #ffe6ad;
}
.ascent-economy b {
  color: #ffd385;
  font-size: 0.78rem;
}
.ascent-economy span,
.ascent-economy em {
  color: #d4c6bb;
  font-size: 0.66rem;
  font-style: normal;
}
/* Энергия и стоимость старта — одна строка через разделитель; стоимость выделена. */
.ascent-economy .ascent-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.ascent-economy .ascent-dot {
  color: var(--muted);
  font-style: normal;
}
.ascent-economy .ascent-cost {
  color: #ff9e66;
  font-size: 0.78rem;
  font-weight: 600;
}
.ascent-economy .ascent-cost .num {
  color: #ffd24a;
  font-size: 0.9rem;
}
/* Правило: числа чуть жирнее и в тематическом цвете (энергия — золото,
   скверна — фиолет, прах — золото). */
.ascent-economy .num,
.descent-burn .num {
  font-weight: 800;
}
.ascent-economy .ascent-taint,
.ascent-economy .ascent-taint + em {
  font-size: 0.66rem;
}
.ascent-economy .num-taint,
.confirm-panel .num-taint {
  color: #c58bff;
  font-size: 0.8rem;
  font-weight: 800;
}
.descent-burn .num {
  color: var(--ink);
}
.descent-burn .num-dust {
  color: #ffd385;
  font-weight: 800;
}
/* Заголовок списка сгорания: всегда одна строка, максимально широкая — размер
   подгоняется под ширину панели (100vw с капом --frame-max минус поля/паддинги). */
.confirm-panel .descent-burn-title {
  font-size: clamp(0.62rem, calc((min(100vw, var(--frame-max)) - 48px) / 23.5), 1.02rem);
  white-space: nowrap;
}
/* Кнопка «Начать подъём · −N ⚡»: одна строка, размер подстраивается под полу-ширину панели. */
.confirm-actions .danger-action {
  white-space: nowrap;
  font-size: clamp(0.6rem, calc((min(100vw, var(--frame-max)) - 55px) / 2 / 11.8), 0.9rem);
}
.ascent-economy em {
  color: #d9a4ff;
}
/* Одноразовая подсказка для десктопного Telegram: окно открывается узким по высоте,
   программно высоту не задать — предлагаем растянуть окно вручную. */
.height-hint {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 66px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(92%, var(--frame-max));
  padding: 8px 10px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: rgba(8, 8, 10, 0.97);
  color: var(--bone);
  font-size: 0.7rem;
  line-height: 1.25;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.height-hint button {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
.height-hint button:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Игровой экран «Активности»: дар 7×4, ежедневные бейджи, рейтинг-подиум, подписки. */
  .activity-subhead { margin: 14px 2px 6px; font-size: 13px; letter-spacing: .03em; opacity: .8; text-transform: uppercase; }
  .daily-head { display: flex; align-items: center; gap: 8px; }
  .daily-head h2 { margin: 0; flex: 1; }
  .daily-head small { opacity: .75; }
  .daily-note { margin: 4px 0 8px; font-size: 12px; opacity: .7; }
  .daily-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 6px; background: rgba(120,90,160,.28); color: #d7c4f0; vertical-align: middle; }
  .gift-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 8px 0 12px; }
  .gift-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.03); color: inherit; font: inherit; min-height: 46px; }
  .gift-day b { font-size: 10px; opacity: .7; }
  .gift-reward { font-size: 10px; font-weight: 700; text-align: center; line-height: 1.2; }
  .gift-embers { color: var(--gold, #e7b84b); }
  .gift-shards { color: #7fd0ff; }
  .gift-dust { color: #c9a06a; }
  .gift-day.claimed { opacity: .5; }
  .gift-day.claimed .gift-check { position: absolute; top: 2px; right: 4px; color: #6ad39a; font-size: 10px; }
  .gift-day.current { border-color: var(--gold, #e7b84b); background: linear-gradient(180deg, rgba(231,184,75,.24), rgba(128,59,20,.16)); box-shadow: 0 0 0 1px var(--gold, #e7b84b) inset, 0 0 14px rgba(231,184,75,.18); cursor: pointer; }
  .gift-day.current:focus-visible { outline: 2px solid #fff2ad; outline-offset: 2px; }
  .social-quest .social-actions { display: flex; gap: 6px; }
  .rating-tabs { margin-bottom: 8px; }
  .rating-caption { margin: 0 2px 10px; font-size: 12px; opacity: .7; }
  .rating-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; margin-bottom: 10px; }
  .podium-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.04); text-align: center; }
  .podium-slot.rank-1 { order: 2; padding-top: 16px; border-color: rgba(231,184,75,.5); }
  .podium-slot.rank-2 { order: 1; }
  .podium-slot.rank-3 { order: 3; }
  .podium-slot .podium-medal { font-size: 20px; }
  .podium-slot strong { font-size: 12px; }
  .podium-slot em { font-style: normal; font-weight: 700; color: var(--gold, #e7b84b); }
  .podium-slot.me { box-shadow: 0 0 0 1px #7fd0ff inset; }
  .rating-list { display: flex; flex-direction: column; gap: 5px; }
  .rating-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
  .rating-row strong { flex: 1; font-size: 13px; }
  .rating-row .rating-rank { width: 22px; text-align: center; font-weight: 700; opacity: .8; }
  .rating-row small { opacity: .75; }
  .rating-row.me { border-color: #7fd0ff; background: rgba(127,208,255,.08); }
}
.nft-art-panel {
  max-width: min(94vw, 760px);
}

.nft-art-candidates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.nft-art-choice {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.34);
  color: inherit;
}

.nft-art-choice.selected {
  border-color: #f14b59;
  box-shadow: 0 0 0 2px rgba(241, 75, 89, 0.22);
}

.nft-art-choice img {
  display: block;
  width: 100%;
  aspect-ratio: 32 / 45;
  object-fit: cover;
  border-radius: 10px;
}