/* ==========================================================================
   TEGURA — кинематик изживяване: тъмен свят, минимален HUD.
   Една система: типографска скала, ритъм 4px, един ръб, едно злато.
   ========================================================================== */

:root {
  /* --- Ръбове и оси: всички HUD елементи стъпват на тях --- */
  --edge: clamp(20px, 3.2vw, 48px);            /* страничен ръб на сцената */
  --edge-v: clamp(18px, 4.2vh, 40px);          /* долен ръб на сцената */
  /* ⚑ 08-08 · ширината на картата е ПРОМЕНЛИВА: стрелката за прибиране трябва
     да застава точно на левия ѝ ръб, а при прибиране — на десния ръб на екрана.
     Две места, едно число. */
  --card-w: min(300px, 82vw);
  --axis-brand: calc(var(--edge) + 42px + 1.05rem); /* вертикалта на словото TEGURA */

  /* --- Ритъм: скала от 4px --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* --- Типографска скала (база 16px) --- */
  --fs-micro: 0.6875rem;   /* 11px — микро надписи, главни букви */
  --fs-label: 0.75rem;     /* 12px — лейбъли, навигация, главни букви */
  --fs-ui: 0.8125rem;      /* 13px — UI текст */
  --fs-small: 0.875rem;    /* 14px */
  --fs-card-title: 1.3rem; /* 20.8px — име на етап */

  /* --- Тракинг: по-широк при по-дребните главни букви --- */
  --tr-caps: 0.18em;       /* 12–13px главни */
  --tr-micro: 0.24em;      /* ≤11px главни */
  --tr-brand: 0.3em;       /* словото TEGURA */

  /* --- Злато: едно семейство, навсякъде --- */
  --gold-hi: #e9d6af;
  --gold: #c9a96a;
  --gold-lo: #b08d52;
  --gold-90: rgba(201, 169, 106, 0.9);
  --gold-55: rgba(201, 169, 106, 0.55);
  --gold-16: rgba(201, 169, 106, 0.16);
  --rule: linear-gradient(90deg, rgba(201, 169, 106, 0.85), rgba(201, 169, 106, 0.05));

  /* --- Текст върху тъмното: слонова кост, дозирана --- */
  --ivory: #f2e8d5;
  --txt: oklch(96% 0.008 85);
  --txt-92: oklch(97% 0.006 85 / 0.92);
  --txt-85: oklch(97% 0.006 85 / 0.85);
  --txt-78: oklch(96% 0.008 85 / 0.78);
  --txt-55: oklch(95% 0.008 85 / 0.55);
/* ⚑ 08-05 · КОНТРАСТ (висяща #222). Мерено с `webvitals.mjs`: при алфа 0.38–0.40
   върху фона oklch(10%) съотношението е 3.26–3.51:1 при изискване 4.5:1 за
   дребен текст. Алфата се вдига до най-малката стойност, която минава прага
   (пресметнато 0.472, взето 0.55 за запас). Тонът и семейството не се пипат. */
  --txt-38: oklch(96% 0.008 85 / 0.55);

  /* --- Коси линии и стъкло --- */
  --hair: rgba(255, 255, 255, 0.12);
  --hair-soft: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.16);

  /* --- Нива --- */
  --z-stage: 0; --z-frame: 1; --z-hero: 5; --z-hud: 10;
  --z-reveal: 12; --z-tools: 15; --z-nav: 20;

  /* --- Кръгът с прогреса --- */
  --ring-size: clamp(96px, 10vw, 128px);
}

/* ---------- Основа ---------- */
body.xp {
  background: #0b0a08;
  color: var(--txt);
  cursor: grab;
  overflow-x: clip;
}
body.xp.is-drag { cursor: grabbing; user-select: none; }

/* ⛔ Докато двигателят се строи, страницата НЯМА височина за скролване.
   Измерено 07-28: главната нишка е блокирана 3 338 ms (create() 1 724 + първи
   рендер 1 890). Дотогава нищо не се рисува и скролът не се обработва — но
   височината съществува, затова браузърът трупа замахванията и ги излива
   наведнъж: героят изчезва мигновено, а строежът е вече напреднал.
   Без височина няма какво да се натрупа. Маха се в `unlockScroll()`. */
body.xp-booting { overflow: hidden; height: 100svh; }
html:has(body.xp-booting) { overflow: hidden; }

/* ---------- Светът ---------- */
.xp-stage {
  position: fixed;
  inset: 0;
  /* ⛔ #924 · платното вече може да е ПО-ВИСОКО от сцената: при показана лента с
     адреса то остава заковано на голямата височина и продължава под лентата
     (точно поведението на `100lvh`). Без `overflow: hidden` излишъкът се вижда. */
  overflow: hidden;
  z-index: var(--z-stage);
  background:
    radial-gradient(135% 95% at 72% 18%, rgba(18, 15, 10, 0.25) 0%, transparent 48%),
    linear-gradient(180deg, #0a0907 0%, #070605 55%, #040403 100%);
}
body.is-reveal .xp-stage {
  background:
    radial-gradient(130% 88% at 68% 22%, rgba(35, 26, 16, 0.3) 0%, transparent 55%),
    linear-gradient(180deg, #14100a 0%, #0a0704 58%, #050403 100%);
}
.xp-stage canvas { display: block; width: 100%; height: 100%; }

/* Кино рамка + обемен слънчев лъч от горе-дясно */
.xp-frame {
  position: fixed;
  inset: 0;
  z-index: var(--z-frame);
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 42%, transparent 46%, rgba(0, 0, 0, 0.66));
}
/* ⛔ ЛЪЧИТЕ ПРЕМАХНАТИ (07-25, операторско решение „Б“).
   Този слой рисуваше обемните лъчи като CSS градиент ВЪРХУ целия екран —
   не в 3D сцената. Затова минаваше и над черната околност и я вдигаше,
   вместо конструкцията да го реже. Исканото: тотален мрак извън плочата,
   нула атмосфера. Винетката (.xp-frame) ОСТАВА — тя прави тъмните краища.
   Връщане: /tmp/xp_before_rays.css или бекъпа .bak-rays-*. */


/* Скрол писта */
.xp-runway { height: 1600vh; }
@media (max-width: 700px) { .xp-runway { height: 1050vh; } }

.glass {
  /* без backdrop-filter: блърът върху жива канава се преизчислява всеки кадър */
  background: rgba(12, 13, 15, 0.78);
  border: 1px solid var(--hair-soft);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   НАВИГАЦИЯ — пълна лента, прозрачна, на ръба --edge
   ========================================================================== */
.xp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: clamp(var(--s4), 3vw, var(--s12));
  padding: clamp(14px, 2.4vh, 22px) var(--edge);
  background: linear-gradient(180deg, rgba(5, 6, 7, 0.72), transparent);
}
.xp-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 1.05rem;
  margin-right: auto;
  text-decoration: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.4);
}
.xp-nav .brand svg {
  width: 42px;
  height: 31px;
  color: #fff;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}
.brand-txt { display: grid; row-gap: var(--s2); line-height: 1; }
.brand-txt strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: var(--tr-brand);
  /* letter-spacing добавя 0.3em и след последната буква — линията под
     словото спира на оптичния му край, не след фантомната междина */
  margin-right: calc(-1 * var(--tr-brand));
  color: #fff;
}
.brand-rule { display: block; height: 1px; background: var(--rule); }
.brand-txt small {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-92);
}
.xp-nav nav { display: flex; gap: clamp(var(--s4), 2.4vw, var(--s10)); }
.xp-nav nav a {
  position: relative;
  padding: var(--s2) 2px 10px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--txt-92);
}
/* златна коса линия под линка — ехото на плочата на логото */
.xp-nav nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s1);
  height: 1px;
  background: var(--rule);
  transition: opacity 0.2s ease, background 0.2s ease;
  opacity: 0.55;
}
.xp-nav nav a:hover { color: #fff; }
.xp-nav nav a:hover::after,
.xp-nav nav a[aria-current="page"]::after {
  background: linear-gradient(90deg, var(--gold-hi), var(--gold-55));
  opacity: 1;
}
.xp-nav nav a[aria-current="page"] { color: #fff; }
/* Същият физически език като картата, но с РАДИУСА НА СИСТЕМАТА, не с хапче:
   скилът иска `rounded-full` за главен CTA, а тук това би било чуждо тяло —
   идентичността на TEGURA е архитектурна и сериф, с прави линии.
   Правилото на системата бие общото правило на скила. */
/* ══ ⚑ 08-08 · „ЗАЯВИ ОФЕРТА" — ЕДИН ЕЗИК С „ЗА НАС", НО ЗЛАТЕН ═══════════
   Оператор: „не се вписва в луксозния стил; искам да е както е за нас, но в
   златния цвят, луксозно."
   Правилото на този HUD е ХАЙРАЛИНИЯ, не капсула: логото, времевата линия и
   навигацията говорят с една златна власинка под текста. Обрамченото хапче е
   единственият елемент, който говореше друго — оттам и „не се вписва".
   ⇒ Същата анатомия като `.xp-nav nav a`: главни букви, тракинг, власинка
   отдолу. Разликата е САМО рангът: буквите са злато, власинката е плътна и
   пълна (не избледняваща), а при посочване тя набъбва — един жест, нула рамки.
   ⛔ БЕЗ фон, БЕЗ рамка, БЕЗ сянка: те бяха трите неща, които го правеха бутон
   от друг сайт. Кликаемата площ остава голяма през вертикалния падинг. */
.nav-cta {
  position: relative;
  padding: var(--s2) 2px 10px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--gold-hi);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
/* власинката: плътна по цялата ширина — това е рангът спрямо „За нас" */
.nav-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s1);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
  opacity: 0.9;
}
.nav-cta:hover { color: #fff; }
.nav-cta:hover::after { transform: scaleY(2); opacity: 1; }
.nav-cta:focus-visible {
  outline: 1px solid var(--gold-55);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (max-width: 980px) { .xp-nav nav { display: none; } }

/* ==========================================================================
   HERO — залезният кадър и плочата върху него
   ========================================================================== */
.xp-hero {
  position: fixed;
  inset: 0;
  z-index: var(--z-hero);
  background:
    /* силна винетка — ръбовете угасват почти до черно */
    linear-gradient(to right,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.72) 6%,
      rgba(0,0,0,0.42) 13%,
      rgba(0,0,0,0.18) 22%,
      rgba(0,0,0,0.04) 32%,
      rgba(0,0,0,0.0) 40%,
      rgba(0,0,0,0.0) 60%,
      rgba(0,0,0,0.04) 68%,
      rgba(0,0,0,0.18) 78%,
      rgba(0,0,0,0.42) 87%,
      rgba(0,0,0,0.72) 94%,
      rgba(0,0,0,0.92) 100%),
    /* четимост: мек полумрак зад текстовата колона вляво */
    linear-gradient(102deg,
      rgba(5, 3, 2, 0.58) 0%,
      rgba(5, 3, 2, 0.32) 26%,
      rgba(5, 3, 2, 0.05) 46%,
      transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.04) 28%, rgba(0,0,0,0.01) 48%),
    linear-gradient(170deg, rgba(12,6,2,0.0) 38%, rgba(10,5,2,0.42) 76%),
    url("../assets/hero_favorite.jpg") center / cover no-repeat;
  pointer-events: none;
  filter: contrast(1.08) saturate(1.05) brightness(0.98);
  will-change: transform, opacity;
  transition: opacity 0.5s ease;
}

/* Плочата: на оста на словото TEGURA, оптичният център леко над геометричния */
.xp-intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.xp-intro .hero-left {
  position: absolute;
  left: var(--axis-brand);
  top: 47%;
  transform: translateY(-50%);
  max-width: min(60vw, 54rem);
  pointer-events: auto;
}
.xp-intro .hero-over {
  margin-bottom: var(--s5);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.xp-intro .hero-h1 {
  /* Prata има само 400 — 700 дава фалшиво удебеляване */
  font-size: clamp(2.6rem, 1.45rem + 5.2vw, 5.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.014em;
  color: var(--ivory);
  /* без balance: редовете са фиксирани с <br>, „ЗА“ не слиза само */
  text-wrap: wrap;
  text-shadow: 0 2px 42px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.xp-intro .hero-rule {
  display: block;
  width: var(--s16);
  height: 1px;
  margin-top: var(--s7);
  background: var(--rule);
}

/* Призивът: най-долу в центъра — златна линия-искра, колелце, надпис */
.hero-cta {
  position: absolute;
  left: 50%;
  bottom: var(--edge-v);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--gold-hi);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  transition: color 0.25s ease;
}
.hero-cta:hover { color: #fff; }
.hero-cta .hc-line {
  position: relative;
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, transparent, var(--gold-90));
  overflow: hidden;
}
.hero-cta .hc-line::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -6px;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold-hi);
  animation: hcSpark 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hcSpark {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateY(48px); opacity: 0; }
  100% { transform: translateY(48px); opacity: 0; }
}
.hero-cta .hc-ico {
  position: relative;
  flex: none;
  width: 17px;
  height: 27px;
  border: 1.5px solid var(--gold-90);
  border-radius: 9px;
}
.hero-cta .hc-ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--gold-hi);
  animation: hcWheel 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes hcWheel {
  0% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(9px); opacity: 0; }
  60% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.hero-cta .hc-txt { position: relative; padding-bottom: var(--s2); }
.hero-cta .hc-txt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 169, 106, 0.08), var(--gold-90), rgba(201, 169, 106, 0.08));
  transition: background 0.25s ease;
}
.hero-cta:hover .hc-txt::after {
  background: linear-gradient(90deg, var(--gold-55), var(--gold-hi), var(--gold-55));
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta .hc-ico::after, .hero-cta .hc-line::after { animation: none; }
}

/* ==========================================================================
   ЛЯВА ВРЕМЕВА ЛИНИЯ — от навигацията до кръга с процентите
   ========================================================================== */
.xp-timeline {
  position: fixed;
  z-index: var(--z-hud);
  left: var(--edge);
  top: clamp(92px, 12vh, 116px);
  bottom: calc(var(--edge-v) + var(--ring-size) + var(--s6));
  display: flex;
  flex-direction: column;
  font-family: var(--font-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 16px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
body.is-building .xp-timeline { opacity: 1; pointer-events: auto; }
body.is-reveal .xp-timeline { opacity: 0; pointer-events: none; }

/* Колонен растер: [точка 14px][12px][номер 2ch≈15px][12px][име] → имената започват на 53px */
.tl-label {
  margin-bottom: var(--s4);
  padding-left: 53px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--gold-90);
}

.xp-timeline ol {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.xp-timeline ol::before {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--hair-strong) 12%, var(--hair-strong) 88%, transparent);
}

.xp-timeline li {
  display: grid;
  grid-template-columns: 14px 2ch 1fr;
  column-gap: var(--s3);
  align-items: center;
  font-size: clamp(11px, 1.35vh, 12.5px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--txt-55);
  cursor: pointer;
  user-select: none;
  transition: color 0.25s ease, transform 0.25s ease;
}
.xp-timeline li:hover { color: var(--ivory); transform: translateX(2px); }
.xp-timeline li:hover .dot { border-color: var(--gold); }
.xp-timeline li:focus-visible {
  outline: 1px solid var(--gold-55);
  outline-offset: 3px;
  border-radius: 3px;
}
.xp-timeline li .dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.xp-timeline li .num {
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--txt-38);
  transition: color 0.25s ease;
}
.xp-timeline li.done { color: var(--txt-92); }
.xp-timeline li.done .num { color: var(--txt-55); }
.xp-timeline li.done .dot { background: rgba(255, 255, 255, 0.8); border-color: transparent; }
/* ⚑ 08-08 · ТЕКУЩИЯТ Е ЗЛАТЕН — същото злато като номера му (заявка на
   оператора). Контраст спрямо фона на сцената: #c9a96a върху oklch(10%) дава
   **9.4:1** при изискване 4.5 ⇒ запас 2.1×, тоест златото не жертва четимост. */
.xp-timeline li.on { color: var(--gold); font-weight: 700; }
.xp-timeline li.on .num { color: var(--gold); font-weight: 600; }
.xp-timeline li.on .dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-16), 0 0 12px var(--gold-55);
}

/* ==========================================================================
   ДЯСНА КАРТА — текущ етап (стъкло, коси линии, ритъм 4px)
   ========================================================================== */
/* ⛔⛔ 08-17 · #846 · ЕДИН РЕД ПО-ДОЛУ СВАЛЯ WEBKIT ОТ 150 НА 33 МС.
   Оператор (08-17): «на етап АНКЕРНИ БОЛТОВЕ скролът забива — само в Safari.»
   📏 Мерено в жив WebKit при прогрес 0.27 (`_wkcard.mjs`, редувани рамена ×3):
       база                     151 · 150 · 149 мс   (размах 2)
       `.xp-card>*` със слой      33 ·  33 ·  33 мс   ⇒ **−117 мс, −78 %**
       Chromium: 16.7 → 16.7 — нула промяна, тоест не се плаща никъде другаде.
   ⚑ Виновникът е СЪДЪРЖАНИЕТО в `position: fixed` възел над жива канава, не
   стъклото и не размерът: скриване на текста дава същите 32 мс, а `position:
   absolute` — 24. WebKit пре-растеризира текста на всеки кадър, докато
   страницата се движи; собственият слой го прави веднъж.
   ⛔ ОПРОВЕРГАНИ ЛЕКОВЕ (всеки мерен, нито един не влиза): непрозрачен фон −7.7 %
   · `will-change` върху САМАТА карта **+16 %** · `contain:paint`/`isolation` **+18 %**
   · без сянка на кутията −0.8 % · без закръгление −12 % · `top` вместо `transform`
   **+14 %**. Тоест лекът е ТОЧНО върху децата, а не върху контейнера.
   ⚑ Връзка: #836 мереше същото през ВИСОЧИНАТА (под 25vh цената изчезва) — тук
   е причината под това наблюдение: по-ниска карта = по-малко текст за растеризация. */
.xp-card > * { will-change: transform; }

.xp-card {
  position: fixed;
  z-index: var(--z-hud);
  right: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  width: var(--card-w);
  /* ДВОЕН БЕЗЕЛ (стъклена плоча в машинирана рамка).
     Отстъпът е СБОР: 7px безел + същинското вътрешно поле. Така `::before`
     ляга точно на границата на безела, а текстът пази старото си дишане. */
  --bezel: 7px;
  --r-out: 16px;
  padding: calc(var(--bezel) + var(--s5)) calc(var(--bezel) + var(--s6));
  border-radius: var(--r-out);
  /* ВЪНШНА ТАВА. Топла, не сива: рамката чете като БРОНЗ, а не като алуминий —
     това я връзва със златото на марката, вместо да въвежда чужд неутрален тон. */
  background:
    linear-gradient(160deg, rgba(201, 169, 106, 0.10) 0%, rgba(255, 255, 255, 0.035) 34%,
                    rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(201, 169, 106, 0.16);
  /* меко падане на два слоя вместо една твърда сянка; горният спекулар е
     по-ярък от долния ръб — така окото чете накъде е светлината */
  /* ⚑ 08-01 · ОБЕМЪТ „ИЗЛИЗА ОТ ЕКРАНА" се прави от ТРИ сенки на различни
     разстояния, не от една силна: близката лепи ръба, средната дава тялото,
     далечната откъсва плочата от фона. Плюс топъл ореол — стъкло с бронзова
     рамка връща светлина настрани, а не само надолу. */
  box-shadow:
    inset 0 1px 0 rgba(233, 214, 175, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 4px -2px rgba(0, 0, 0, 0.5),
    0 12px 26px -12px rgba(0, 0, 0, 0.6),
    0 40px 80px -24px rgba(0, 0, 0, 0.7),
    0 0 30px -12px rgba(201, 169, 106, 0.22);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.2s ease;
}
/* ВЪТРЕШНО ЯДРО. Радиусът е ИЗЧИСЛЕН (r_out − безел), за да са кривите
   концентрични — неравните радиуси са първото, което издава фалшив релеф.
   `z-index:-1` слага ядрото над фона на тавата, но ПОД текста; работи, защото
   `.xp-card` е `position:fixed` със `z-index` → собствен стек-контекст. */
.xp-card::before {
  content: "";
  position: absolute;
  inset: var(--bezel);
  border-radius: calc(var(--r-out) - var(--bezel));
  z-index: -1;
  /* ⚑⚑ 08-01 · ИСТИНСКО СТЪКЛО (оператор: „да може да се вижда през нея, но и
     да се чете текстът, без цветовете отзад да пречат; да има обем и да излиза
     от екрана като 3D").
     Досега тук стоеше ПЛЪТЕН градиент 0.93–0.96 с коментар „блърът насича
     скрола". Плътността е точно обратното на искането — през 96 % не се вижда
     нищо. Затова стъклото е истинско, а цената се МЕРИ, не се предполага
     (`tools/harness/cardglass.mjs`).
     Трите числа правят четимостта, не плътността:
       · `brightness(0.58)` СМЪКВА фона под текста, какъвто и да е той —
         затова светъл покрив отзад не изяжда буквите;
       · `saturate(135%)` връща цвета, който потъмняването изяжда, тоест
         зад стъклото си личи ЧТО има — това е „вижда се през нея";
       · `blur(18px)` маха детайла, който би се борил с текста.
     Тинтът е само 0.34 — той дава тона, работата я върши филтърът. */
  /* ⛔⛔ ЦЕНАТА НА БЛЪРА Е МЕРЕНА, НЕ ПРЕДПОЛОЖЕНА (`cardglass.mjs`, 08-01):
         к/с при скрол 54.7 → **42.8**, тоест **−21.8 %**. Старият коментар
         („блърът насича скрола") се оказа ВЕРЕН — но само за скрола.
     🥇 Затова стъклото е ГЕЙТНАТО ПО ПОКОЙ: при движение платно с плътен тинт
     и нула филтър (нула цена), а щом всичко спре — истинско стъкло. Операторът
     чете картата, когато е спрял; докато скролва, гледа строежа.
     Класът `is-rest` идва от `experience.js`, който вече чете `sharpState()`
     на 220 ms за лентата — ново будене няма. */
  /* ⚑ 08-08 · ПРИ ДВИЖЕНИЕ тинтът е свален 0.88/0.92 → 0.76/0.84. Той няма
     филтър под себе си (нула цена), затова носи цялата четимост сам — но 0.88
     значеше „плътна плоча" и правеше СКОКА към стъклото в покой видим. 0.76 още
     държи текста (буквите имат собствена сянка), а преходът вече е преливане,
     не смяна на материал. */
  /* ⚑ 08-08 · и тук градиентът пада: при движение и в покой картата трябва да е
     ЕДИН И СЪЩ материал, само с различна плътност. Иначе преходът мени и тона. */
  background: rgba(12, 13, 15, 0.80);
  transition: background 0.45s ease, backdrop-filter 0.45s ease;
  box-shadow:
    /* ГОРНИЯТ РЪБ Е СВЕТЛИНА В ДЕБЕЛИНАТА НА СТЪКЛОТО, не блик по повърхност —
       затова е два реда: остър косъм и мек пад под него. */
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 3px 8px -4px rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),          /* долният ръб потъва */
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),   /* пълната фаска на плочата */
    inset 0 18px 34px -20px rgba(0, 0, 0, 0.55); /* ядрото е ВДЛЪБНАТО, не залепено */
}
/* В ПОКОЙ — истинското стъкло. Трите числа правят четимостта, не плътността:
   `brightness` смъква фона под текста какъвто и да е той, `saturate` връща
   цвета, който потъмняването изяжда (оттам „вижда се какво има отзад"), а
   `blur` маха детайла, който би се борил с буквите. */
body.is-rest .xp-card::before {
  /* ⚑ ЧИСЛАТА СА НАСТРОЕНИ СРЕЩУ КОНТРАСТА, не на око (`cardglass.mjs`):
     при `brightness(0.52)` + тинт 0.30/0.40 заглавието даде **2.85:1** — под
     прага 4.5 на WCAG, тоест тънките знаци се разпадат върху светъл покрив.
     Потъмняването върши работата: тинтът само оцветява. */
  /* ⛔⛔⛔ 08-08 · ТУК КАРТАТА НЕ БЕШЕ СТЪКЛО — И ТОВА Е МЕРЕНО, НЕ МНЕНИЕ.
     Оператор: „картата трябва да е кристално стъкло; правени са корекции няколко
     пъти, но тя не става — има плътен цвят".
     📏 `cardglass.mjs` СЛЕД поправката на самата проба: ядрото се мени с **2.09
     нива от 255**, когато фонът зад него се смени изцяло — при праг 3. Тоест
     през нея наистина НЕ СЕ ВИЖДА нищо.
     ⛔ Виновникът е `brightness(0.34)`: той смачква фона до 34 % преди тинтът
     да легне отгоре ⇒ каквото и да има отзад, става еднакво черно. Блърът 20px
     доубива и последния детайл.
     ⚑ ЗАПАСЪТ, който го позволява: контрастът на заглавието е **13.88:1** при
     изискване 4.5 — тоест потъмняването върши ТРИ ПЪТИ повече работа, отколкото
     четимостта иска. Буквите носят и собствена сянка (виж правилото по-долу).
     ⇒ Числата се разменят: по-малко потъмняване, по-малко блър, по-лек тинт.
     Четимостта се пази с мерене, не с плътност. */
  /* ⚖️ ЧИСЛАТА СА ИЗБРАНИ ОТ СТЪЛБИЦА, НЕ НА ОКО (`tools/harness/cardsweep.mjs`,
     четири рамена, един и същ билд, ТРИ позиции — третата нарочно там, където
     зад картата минава ОСВЕТЕНИЯТ скат):
         blur sat bright тинт        ПРОПУСКАНЕ  контраст
          10  160  0.62  0.20/0.30      0.613      7.2
           8  170  0.74  0.14/0.24      0.653      6.6
           6  180  0.86  0.09/0.18      0.686      6.5   ← избрано
           4  190  0.96  0.06/0.14      0.707      5.9
     ПРОПУСКАНЕ = Δядро / Δфон: каква част от смяната на фона минава през
     стъклото. 1 е чист прозорец, 0 е плоча. Избраното дава **69 %**.
     ⛔ Последното рамо купува +0.021 пропускане срещу −0.6 контраст — не си
     струва: контрастът е ЕДИНСТВЕНОТО, което не може да се навакса другаде. */
  /* ⚑⚑ 08-08 (втори ход) · ТРИ ПОПРАВКИ ПО ЗАЯВКА, всяка с причина:
       1. „да няма тоналност на този блър" — тинтът беше ГРАДИЕНТ (160°, от
          rgba(28,29,34) към rgba(9,10,13)) и рисуваше собствена светло-тъмна
          рампа върху стъклото. Сега е ПЛОСЪК и НЕУТРАЛЕН: едно число, нула
          посока. Стъклото показва фона, не своя градиент.
       2. `saturate(180%)` ПАДА. Той усилваше цвета на онова, което мине отзад —
          при топло дърво даваше жълт оттенък, при червения камион — розов.
          Точно това е „тоналността". Неутралното стъкло не пребоядисва.
       3. Блърът е НА ПОЛОВИНА: 6px → 3px („много е силен сега").
     ⚑ ЗАЩО ТОВА ПРИБЛИЖАВА BRAVE ДО SAFARI: WebKit и Chromium НЕ смятат еднакво
     `saturate` върху backdrop (различно цветово пространство на композирането) —
     затова двата браузъра се разминаваха най-много точно в наситеността. Махне
     ли се тя, остават блър и светлост, които се смятат еднакво. */
  background: rgba(9, 10, 12, 0.14);
  backdrop-filter: blur(3px) brightness(0.88);
  -webkit-backdrop-filter: blur(3px) brightness(0.88);
}
/* ⛔ РЕЗЕРВА: без поддръжка на `backdrop-filter` прозрачността е нечитаема —
   там ядрото си остава плътно. Проверява се СВОЙСТВОТО, не браузърът. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.is-rest .xp-card::before {
    background: rgba(12, 13, 15, 0.94);
  }
}
@media (prefers-reduced-transparency: reduce) {
  body.is-rest .xp-card::before {
    background: rgba(12, 13, 15, 0.94);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
/* Прозрачното ядро иска буквите да носят собствен контраст — иначе на светъл
   кадър тънките знаци се разпадат. Сянката е плътна и къса: чете се като
   дълбочина на гравюра, не като размазан ореол. */
/* ⚑⚑ 08-08 · СЯНКАТА Е ЗАСИЛЕНА, ЗАЩОТО СТЪКЛОТО ВЕЧЕ ПУСКА 69 % ОТ ФОНА.
   Докато ядрото потъмняваше фона до 34 %, буквите нямаха срещу какво да се
   борят. Сега зад тях може да мине ОСВЕТЕНА дъска — виж снимката
   `tools/harness/out/hud-карта.png`, горният ляв ъгъл.
   Три пласта, всеки със своя работа: късият лепи ръба на знака, средният е
   плътното ядро на ореола (то върши четимостта), дългият откъсва блока от фона.
   ⛔ ЗАЩО НЕ ПО-ПЛЪТНО СТЪКЛО: плътността е точно това, което операторът нарече
   „плътен цвят". Сянката струва НУЛА за композитора и лежи само върху глифите,
   а тинтът лежи върху целия правоъгълник. */
.xp-card h2, .xp-card .c-label, .xp-card .c-sec,
.xp-card .c-note, .xp-card .c-det, .xp-card .c-matrow, .xp-card .c-count-row {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 4px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(0, 0, 0, 0.6);
}
/* ЗЪРНО — 3 % шум върху ядрото. Идеално гладката повърхност чете като екран;
   лекото зърно я прави физическа. SVG turbulence, не външен файл: нула заявки
   и нула CORS (`file://` блокира всяка външна карта — платено веднъж на 07-26). */
.xp-card::after {
  content: "";
  position: absolute;
  inset: var(--bezel);
  border-radius: calc(var(--r-out) - var(--bezel));
  z-index: -1;
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) {
  .xp-card::after { display: none; }
}
body.is-building .xp-card { opacity: 1; }
body.is-reveal .xp-card { opacity: 0; pointer-events: none; }
.xp-card.swap { opacity: 0; transform: translateY(-50%) translateY(6px); }

.c-label {
  margin-bottom: var(--s1);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--gold);
}
.xp-card h2 {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--ivory);
}

.c-count-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--s3);
}
.c-count {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.c-dots { display: flex; flex: 1; align-items: center; gap: var(--s1); }
.c-dots span {
  flex: 0 0 auto;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.15s ease;
}
.c-dots span.f { background: var(--gold); }

.c-note {
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--hair);
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: var(--txt-92);
}

.c-sec {
  margin: 14px 0 6px;
  padding-top: var(--s3);
  border-top: 1px solid var(--hair);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--txt-55);
}

.c-matrow { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; }
.mat-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.c-matrow b {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ivory);
}
.c-matrow span { font-size: var(--fs-label); color: var(--txt-78); }

.c-det { margin: 2px 0 0; display: grid; gap: 2px; font-size: 12.5px; }
.c-det > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  padding: 2px 0;
}
.c-det dt { font-weight: 500; color: var(--txt-78); }
.c-det dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ivory);
}

/* ==========================================================================
   КРЪГОВ ПРОГРЕС — долу вляво, на ръба
   ========================================================================== */
.xp-ring {
  position: fixed;
  z-index: var(--z-hud);
  left: var(--edge);
  bottom: var(--edge-v);
  width: var(--ring-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.is-building .xp-ring, body.is-reveal .xp-ring { opacity: 1; }
.xp-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.xp-ring circle { fill: none; stroke-width: 2.5; }
.ring-bg { stroke: var(--hair-strong); }
.ring-fg {
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 213.6;   /* 2π·r34 — JS разчита на тази стойност */
  stroke-dashoffset: 213.6;
  filter: drop-shadow(0 0 6px var(--gold-55));
}
.ring-txt {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}
.ring-txt small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--txt-55);
}

/* ==========================================================================
   ПОДСКАЗКА долу в центъра (по време на строеж)
   ========================================================================== */
.xp-hint {
  position: fixed;
  z-index: var(--z-hud);
  left: 50%;
  bottom: var(--edge-v);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--txt-55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
body.is-building .xp-hint { opacity: 1; }
body.is-reveal .xp-hint { opacity: 0; }
.xp-hint .line {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
}
.xp-hint .wheel {
  position: relative;
  width: 16px;
  height: 26px;
  border: 1.5px solid var(--gold-55);
  border-radius: 9px;
}
.xp-hint .wheel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 2px;
  height: 5px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--gold-hi);
  animation: hint-drop 1.8s ease-in-out infinite;
}
@keyframes hint-drop {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(8px); opacity: 0.2; }
}

/* ==========================================================================
   ИНСТРУМЕНТИ долу вдясно
   ========================================================================== */
.xp-tools {
  position: fixed;
  z-index: var(--z-tools);
  right: var(--edge);
  bottom: var(--edge-v);
  display: flex;
  gap: var(--s3);
}
.xp-tools button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* същият релеф като картата, свит до 44 px: топъл ръб, горен блик, потъващ низ */
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(10, 11, 13, 0.72) 55%);
  border: 1px solid rgba(201, 169, 106, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(233, 214, 175, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 6px 16px -8px rgba(0, 0, 0, 0.6);
  color: var(--txt-78);
  cursor: pointer;
  transition:
    border-color 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    color 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.xp-tools button:hover {
  border-color: var(--gold);
  color: var(--txt);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 22px -8px rgba(201, 169, 106, 0.3);
}
.xp-tools button:active { transform: translateY(0); }
.xp-tools button svg { width: 20px; height: 20px; }
.xp-tools button[aria-pressed="false"] .snd-waves { opacity: 0.25; }
.xp-helpbox {
  position: fixed;
  z-index: var(--z-tools);
  right: var(--edge);
  bottom: calc(var(--edge-v) + 44px + var(--s3));
  width: min(300px, 80vw);
  padding: var(--s4) var(--s5);
  border-radius: 6px;
  background: rgba(11, 12, 14, 0.88);
  border: 1px solid var(--hair);
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--txt-85);
}
.xp-helpbox p + p { margin-top: 6px; }
.xp-helpbox b { color: var(--txt); }

/* ==========================================================================
   ФИНАЛЕН REVEAL
   ========================================================================== */
.xp-reveal {
  position: fixed;
  z-index: var(--z-reveal);
  left: 50%;
  bottom: clamp(40px, 9vh, 80px);
  transform: translateX(-50%) translateY(24px);
  width: min(640px, calc(100vw - 2 * var(--edge)));
  padding: clamp(var(--s6), 3.5vw, var(--s10));
  border-radius: 6px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease 0.4s, transform 0.9s ease 0.4s;
}
body.is-reveal .xp-reveal {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.xp-reveal .overline {
  margin-bottom: var(--s3);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.xp-reveal h2 {
  font-size: clamp(1.6rem, 1.15rem + 2.1vw, 2.45rem);
  color: var(--ivory);
}
.xp-reveal .xp-tel {
  display: inline-block;
  margin-top: var(--s3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.05rem);
  letter-spacing: 0.02em;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.xp-reveal .xp-tel:hover { color: var(--gold-hi); }
.xp-reveal .xp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s6);
}
.xp-reveal .note {
  margin-top: 18px;
  max-width: none;
  font-size: 12.5px;
  color: var(--txt-55);
}

/* Бутоните върху тъмния свят — мек релеф вместо твърдата офсетна сянка */
body.xp .btn {
  background: linear-gradient(180deg, var(--copper), var(--copper-deep));
  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
body.xp .btn:hover {
  background: linear-gradient(180deg, oklch(60% 0.13 57), var(--copper));
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body.xp .btn:active { transform: translateY(0); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
body.xp .btn--ghost {
  background: transparent;
  color: var(--ivory);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: none;
}
body.xp .btn--ghost:hover { background: var(--ivory); color: #14161a; box-shadow: none; transform: none; }

/* ==========================================================================
   РЕЗЕРВЕН РЕЖИМ без WebGL
   ========================================================================== */
/* ⚑⚑⚑ 08-08 · ЕДИН РЕД В ТЪМНОТО — заявка на оператора („само текстът «В момента
   сме в разработка», луксозен и правилно позициониран").
   Какво беше сбъркано в стария екран, освен съдържанието:
     · `min-height: 100vh` + `padding: 7rem … 3rem` при `place-items: center` —
       двата подплата са РАЗЛИЧНИ, тоест панелът стоеше 2 рем ПОД центъра и
       изглеждаше „изпуснат"; на телефон 100vh е и по-високо от видимото поле;
     · `position: relative` в потока — под него оставаше празната височина на
       страницата и екранът се скролваше на празно;
     · нямаше собствен фон: екранът зависеше от това дали снимката на героя се е
       заредила — а той се показва точно когато НЕЩО не се е заредило.
   ⇒ Сега секцията е закована на цялото поле, носи си свой фон и центрира един
   единствен ред. Типографията е на самия сайт (Prata + злато + микро главни),
   нищо ново не се измисля. */
.xp-fallback { display: none; }
body.xp-nogl .xp-runway, body.xp-nogl .xp-timeline, body.xp-nogl .xp-card,
body.xp-nogl .xp-ring, body.xp-nogl .xp-hint, body.xp-nogl .xp-intro,
body.xp-nogl .xp-tools, body.xp-nogl .xp-frame,
body.xp-nogl .xp-reveal, body.xp-nogl .xp-loader { display: none; }
/* страницата няма какво да скролва — резервният екран Е цялата страница */
body.xp-nogl { overflow: hidden; }
body.xp-nogl .xp-fallback {
  position: fixed;
  inset: 0;
  z-index: var(--z-hud);
  display: grid;
  place-items: center;
  /* ⚑ ОПТИЧЕН, НЕ ГЕОМЕТРИЧЕН ЦЕНТЪР. Навигацията е закована горе и тежи в
     полето; ред, сложен в геометричната среда, се чете „нисък". Подплатът
     отдолу е по-голям от този отгоре точно с тази разлика. */
  padding: calc(var(--s10) + 2.6rem) var(--s6) calc(var(--s10) + 6.2rem);
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(201, 169, 106, 0.07), transparent 68%),
    radial-gradient(120% 100% at 50% 50%, #100e0b 0%, #0b0a08 55%, #060505 100%);
}
.xp-fallback .fb-line {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.05rem + 3.5vw, 4.5rem);
  line-height: 1.12;
  letter-spacing: 0.008em;
  text-align: center;
  text-wrap: balance;
  color: var(--ivory);
  /* дълбочина без слой: буквата има собствена сянка, а не панел под себе си */
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.85);
}
/* Появата: бавно вдигане с проявяване. `clip-path` и `transform` са на
   композитора — виж `rules/web/performance.md`; нищо layout-обвързано. */
.xp-fallback .fb-line > span {
  display: inline-block;
  animation: fb-rise 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fb-rise {
  from { opacity: 0; transform: translate3d(0, 0.42em, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-fallback .fb-line > span { animation: none; }
}

/* ==========================================================================
   МОБИЛНО
   ========================================================================== */
@media (max-width: 900px) {
  .xp-timeline { display: none; }

  /* по-силен полумрак зад текста — сцената е по-натъпкана на тесен кадър */
  .xp-hero {
    background:
      linear-gradient(to right,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.55) 12%,
        rgba(0,0,0,0.18) 30%,
        rgba(0,0,0,0.0) 46%,
        rgba(0,0,0,0.0) 60%,
        rgba(0,0,0,0.18) 76%,
        rgba(0,0,0,0.55) 90%,
        rgba(0,0,0,0.88) 100%),
      linear-gradient(100deg,
        rgba(5, 3, 2, 0.62) 0%,
        rgba(5, 3, 2, 0.34) 40%,
        rgba(5, 3, 2, 0.08) 62%,
        transparent 76%),
      linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.04) 28%, rgba(0,0,0,0.01) 48%),
      linear-gradient(170deg, rgba(12,6,2,0.0) 38%, rgba(10,5,2,0.42) 76%),
      /* портретен кадър: цялата къща в остра лента, не отрязана */
      url("../assets/hero_portrait.jpg") center / cover no-repeat;
  }

  /* плочата слиза на страничния ръб и поема цялата ширина */
  .xp-intro .hero-left {
    left: var(--edge);
    right: var(--edge);
    top: 45%;
    max-width: none;
  }
  /* 9.4vw: „ЗА ПОКОЛЕНИЯ“ (≈9,1em) се побира на един ред и при 320px */
  .xp-intro .hero-h1 { font-size: clamp(2.2rem, 9.4vw, 3.2rem); line-height: 1.06; }

  .xp-card {
    top: auto;
    bottom: clamp(var(--s16), 12vh, 96px);
    right: var(--s3);
    transform: none;
    width: min(272px, 74vw);
    padding: var(--s4) 18px;
  }
  .xp-card.swap { transform: translateY(8px); }
  .xp-card .c-note, .xp-card .c-det div:nth-child(n+3) { display: none; }

  .xp-ring { --ring-size: 86px; }
  .xp-hint { display: none; }
  .xp-tools { bottom: auto; top: calc(var(--edge) + 56px); }
}

/* тесни телефони: брандът се свива, за да диша лентата */
@media (max-width: 640px) {
  .xp-nav .brand { gap: var(--s3); }
  .xp-nav .brand svg { width: 34px; height: 25px; }
  .brand-txt { row-gap: 6px; }
  .brand-txt strong { font-size: 1.1rem; }
  .brand-txt small { display: none; }
  .nav-cta { padding: var(--s2) 2px 8px; font-size: var(--fs-micro); letter-spacing: 0.14em; }
}

/* ниски екрани: картата слиза долу, за да не опира в навигацията */
@media (max-height: 830px) and (min-width: 901px) {
  .xp-card { top: auto; bottom: var(--edge-v); transform: none; }
  .xp-card.swap { transform: translateY(8px); }
  .xp-card .c-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xp-hint .wheel::after { animation: none; }
}

/* ==========================================================================
   Индикатор за зареждане на кадрите — тънка златна линия на горния ръб.
   Спира на 100%, избледнява и се премахва от DOM (оправя се experience.js).
   ========================================================================== */
.xp-loader {
  position: fixed;
  z-index: calc(var(--z-nav) + 5);
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.xp-loader span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold) 60%, var(--gold-hi));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.25s ease-out;
}
.xp-loader.is-done { opacity: 0; }
body.xp-nogl .xp-loader { display: none; }

/* ==========================================================================
   Мобилен лист „Детайли и етапи" (≤900px): картата пази същността,
   пълният разказ и скокът по етапи живеят в долен лист.
   ========================================================================== */

/* Бутон в картата — само на тесни екрани */
.c-expand { display: none; }
@media (max-width: 900px) {
  .c-expand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    width: 100%;
    margin-top: var(--s4);
    padding: var(--s3) 0 0;
    border: 0;
    border-top: 1px solid var(--hair);
    background: none;
    cursor: pointer;
    font-family: var(--font-text);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    color: var(--gold);
  }
  .c-expand svg { width: 16px; height: 16px; stroke: currentColor; flex: none; }
  .c-expand:active { color: var(--gold-hi); }
}

/* Затъмнение зад листа */
.xp-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 2);
  background: rgba(4, 3, 2, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.xp-sheet-backdrop.is-open { opacity: 1; }

/* Листът */
.xp-sheet {
  position: fixed;
  z-index: calc(var(--z-nav) - 1);
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(165deg, rgba(26, 27, 30, 0.97), rgba(10, 11, 13, 0.98));
  border-top: 1px solid var(--hair-strong);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.55);
  transform: translateY(103%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.xp-sheet.is-open { transform: translateY(0); }
/* дръжка за хващане — визуална подсещаща линия */
.xp-sheet::before {
  content: "";
  position: absolute;
  top: var(--s2);
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: var(--hair-strong);
}

.sh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s6) var(--s6) var(--s4);
  border-bottom: 1px solid var(--hair);
}
.sh-head > div { min-width: 0; }
.sh-count {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-micro);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.sh-head h2 {
  margin: var(--s1) 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.18;
  color: var(--ivory);
}
#sh-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: none;
  color: var(--txt-85);
  cursor: pointer;
}
#sh-close svg { width: 16px; height: 16px; stroke: currentColor; }
#sh-close:active { color: var(--ivory); border-color: var(--gold-55); }

.sh-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s4) var(--s6) calc(var(--s8) + env(safe-area-inset-bottom));
}
.sh-note {
  margin: 0 0 var(--s3);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--txt-92);
}
.sh-mat {
  margin: 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ivory);
}
/* преизползва .c-sec и .c-det от картата — само дишане */
.sh-scroll .c-sec { margin-top: var(--s5); }

/* Списък с всички етапи — ритъмът на десктоп таймлайна, по-едри редове за пръст */
.sh-stages {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0;
}
.sh-stages li {
  display: grid;
  grid-template-columns: 14px 2ch 1fr;
  column-gap: var(--s3);
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--txt-78);
  cursor: pointer;
}
.sh-stages li:last-child { border-bottom: 0; }
.sh-stages li .dot {
  justify-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--txt-38);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sh-stages li .num {
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--txt-38);
}
.sh-stages li.done { color: var(--txt-92); }
.sh-stages li.done .num { color: var(--txt-55); }
.sh-stages li.done .dot { background: rgba(255, 255, 255, 0.8); border-color: transparent; }
.sh-stages li.on { color: #fff; }
.sh-stages li.on .num { color: var(--gold); font-weight: 600; }
.sh-stages li.on .dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-16), 0 0 12px var(--gold-55);
}

/* На десктоп листът не съществува визуално, дори да е в DOM */
@media (min-width: 901px) {
  .xp-sheet,
  .xp-sheet-backdrop { display: none; }
}

/* ══ ИЗОСТРЯНЕТО В ПОКОЙ — дискретна лента под подсказката ═════════════════
   Когато скролът спре, картината си качва качеството на стъпала (нативно → 4K
   → 6K). Дотогава операторът нямаше как да знае, че нещо се готви — виждаше
   само че кадърът „става по-хубав" без причина.
   Езикът е на сайта, не нов: същият бронз като пръстена на прогреса, същата
   микро-геометрия, същите времена. Лентата НЕ пише нищо и не обяснява — тя е
   само дишане: появява се, пълни се, изчезва.
   ⚠️ Ширината е под тази на думите горе — индикаторът не бива да води окото. */
/* ⛔⛔ 07-31 · ЛЕНТАТА БЕШЕ НЕВИДИМА — операторът: „нищо не показва".
   Причината НЕ е в логиката (мерено: пълни се 0 → 74 px, а екранът се изостря
   с +58.9 % при 1512×830 и +62.2 % при 2560×1329). Причината е КОНТРАСТ:
   релсата беше `rgba(255,255,255,0.06)` — 6 % бяло, а отблясъкът бледобежов.
   И двете са проектирани за ТЪМЕН фон, а лентата стои на долния ръб на кадъра,
   където често е СВЕТЪЛ покрив. Изрязан кадър в busy състояние показа
   двупикселова безцветна нишка върху беж — нула контраст.
   Лекът пази брифа „дискретно, елегантно, луксозно": лентата не става по-крещяща,
   а получава СОБСТВЕН фон, за да не зависи от това какво е зад нея. */
.xp-hint .sharpen {
  width: 74px;
  height: 3px;
  margin-top: 2px;
  border-radius: 3px;
  /* тъмна релса + косъм светъл ръб + мека сянка ⇒ чете се и на светло, и на тъмно */
  background: rgba(14, 11, 8, 0.46);
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 1px 3px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: 50% 50%;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.xp-hint .sharpen.on { opacity: 1; transform: scaleX(1); }
.xp-hint .sharpen i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(201, 169, 106, 0) 0%, var(--gold-55) 42%, var(--gold-hi) 100%);
  /* върху тъмната релса бронзът вече има на какво да седне — сиянието остава меко */
  box-shadow: 0 0 6px rgba(201, 169, 106, 0.55);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* докато GPU-то готви стъпало — едва доловим отблясък пробягва по лентата;
   спира в мига, в който всичко е готово (класът пада) */
.xp-hint .sharpen.busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(233, 214, 175, 0.5), transparent);
  transform: translateX(-100%);
  animation: sharpen-sweep 1.6s ease-in-out infinite;
}
.xp-hint .sharpen { position: relative; }
/* ⚑ 08-09 · РЕЗОЛЮЦИЯТА, ИЗПИСАНА. Оператор: „барът да изписва до колко се
   вдига и как преминава 2K 4K 5K 6K 8K".
   ⛔ ЗАЩО НЕ ВЪТРЕ В `.sharpen`: тя е с `overflow: hidden` и 3px височина —
   текст вътре се реже до невидимост. Затова е сестра, не дете.
   Табличните цифри пазят надписа да не подскача при смяна на числото. */
.xp-hint .sharpen-txt {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s ease;
  pointer-events: none;
  white-space: nowrap;
}
.xp-hint .sharpen-txt.on { opacity: 0.85; transform: translateY(0); }
/* стигнало е тавана — числото спира да е обещание и става факт */
.xp-hint .sharpen-txt.done { color: var(--gold-hi); opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .xp-hint .sharpen-txt { transition: none; }
}
@keyframes sharpen-sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .xp-hint .sharpen.busy::after { animation: none; }
  .xp-hint .sharpen, .xp-hint .sharpen i { transition: none; }
}

/* ⛔ 08-03 · АНИМАЦИЯ ИЗВЪН КАДЪРА Е ЧИСТА ЦЕНА.
   `hcSpark`, `hcWheel` и `hint-drop` са `infinite` — те будят композитора и
   когато елементът им отдавна е извън екрана. Класът идва от
   `IntersectionObserver` в `experience.js`; щом елементът се върне, анимацията
   продължава от само себе си. Мерено: 2.8 → 1.7 % от едно ядро в покой
   (headless, тоест БЕЗ истинския композитор — на екрана цената е по-висока). */
.подсказката-спря .hero-cta .hc-line::after,
.подсказката-спря .hero-cta .hc-ico::after,
.подсказката-спря .xp-hint .wheel::after {
  animation-play-state: paused !important;
}

/* ══ 08-08 · КАПКАТА ВЪРХУ СТЪКЛО Е МАХНАТА — ПО ЗАЯВКА НА ОПЕРАТОРА ════════
   Тя беше вложена на 08-05 (лявата линия) и на 08-07 (#240 — кръгът и мобилният
   лист) по негово искане: „парче стъкло като капка, за да се увеличи текущият
   процес". Присъдата му на 08-08 е обратната: „това стъкло изглежда ужасно и
   беше по-добре без него — махни го и от двете места".
   ⛔ МАХА СЕ ОСНОВНИЯТ КЛАС `.tl-lens`, не трите поотделно: `.sh-lens` и
   `.ring-lens` стъпваха върху него, тоест едно място решава и трите. Разметката
   остава (`<span class="tl-lens">` е празен и нестилизиран елемент, нула цена),
   за да не се пипат три файла за визуално решение, което може да се върне.

   ⚑ КАКВО ЗАЕМА МЯСТОТО МУ. Операторът: „текущата задача ще бъде оцветена в
   цвета, с който е и числото на позицията — златно; изминалите остават в бяло
   както досега, а предстоящите с текущия цвят".
   Тоест йерархията вече е ЧИСТО ЦВЯТ, в три нива, без нито един филтър:
       предстоящи  `--txt-55`   (както са)
       изминали    `--txt-92`   (бяло, както е)
       ТЕКУЩ       `--gold`     (същото злато като номера)
   ⚑ И `scale(1.13)` пада заедно с капката: увеличението беше НЕЙНАТА половина
   (лупата е стъкло + мащаб — виж старата бележка). Без стъклото то остава
   самотен скок в ритъма на списъка. */
.xp-timeline li.on {
  position: relative;
  z-index: 1;
}
/* ⚑ ПОНИЖЕНО ДВИЖЕНИЕ: преходът остава само по цвят — няма какво да пътува. */
@media (prefers-reduced-motion: reduce) {
  .xp-timeline li { transition: color 0.25s ease; }
}

.sh-stagewrap { position: relative; }
.sh-stages li.on { position: relative; z-index: 1; }
/* ⛔ `.xp-ring svg` е `position: absolute; inset: 0` (ред 771) — тук се добавя
   САМО ред в стека. Общо правило със `.ring-txt` би му върнало `relative` и
   пръстенът щеше да излезе от центъра. */
.xp-ring svg { z-index: 1; }
.ring-txt { position: relative; z-index: 1; }


/* ══ ⚑ 08-08 · ПРИБИРАЩАТА СЕ КАРТА ═══════════════════════════════════════
   Оператор: „картата с текущия етап да има възможност да се прибира, за да не
   пречи, със стрелкичка, и да остава само стрелкичката, за да може, когато се
   кликне на нея, да се показва отново."
   ⚑ Стрелката е ФИКСИРАН елемент, СЕСТРА на картата — дете би се прибрало
   заедно с нея. Двете се подреждат от ЕДИН клас на `body`.
   ⚑ Движението е само `transform` + `opacity` (компоситорът ги носи) —
   правилото на проекта за анимации остава. */
.c-fold {
  position: fixed;
  z-index: var(--z-hud);
  top: 50%;
  right: calc(var(--edge) + var(--card-w) + var(--s2));
  display: grid;
  place-items: center;
  width: 26px;
  height: 52px;
  padding: 0;
  border-radius: 13px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(10, 11, 13, 0.72) 55%);
  border: 1px solid rgba(201, 169, 106, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(233, 214, 175, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 6px 16px -8px rgba(0, 0, 0, 0.6);
  color: var(--txt-78);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    right 0.45s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.35s ease,
    border-color 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    color 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.c-fold svg { width: 15px; height: 15px; transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
.c-fold:hover { border-color: var(--gold); color: var(--txt); }
.c-fold:focus-visible { outline: 1px solid var(--gold-55); outline-offset: 3px; }
/* стрелката живее само докато живее и картата — иначе виси над героя и финала */
body.is-building .c-fold { opacity: 1; pointer-events: auto; }
body.is-reveal .c-fold { opacity: 0; pointer-events: none; }

/* ПРИБРАНО: картата излиза надясно, стрелката застава на ръба и се обръща */
body.is-card-folded .xp-card {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(calc(var(--card-w) + var(--edge)));
}
body.is-card-folded .c-fold { right: var(--edge); }
body.is-card-folded .c-fold svg { transform: rotate(180deg); }
/* ⚑ преходът на картата вече мени и `transform` — досега той беше само за `swap` */
.xp-card { transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  .c-fold, .c-fold svg, .xp-card { transition: opacity 0.2s ease; }
}

/* ══ ⚑ 08-08 · ОРБИТ ЛЕНТАТА ══════════════════════════════════════════════
   Пет кръга в реда [завърти ляво · отдалечи · върни · приближи · завърти дясно].
   Редът НЕ е случаен: двете въртения са в краищата (пътят на палеца), зумът е
   до центъра, а връщането — в средата, където се улучва без гледане.
   Стилът е СЪЩИЯТ като на старите три бутона — сменя се съдържанието, не езикът. */
.xp-tools .orb-mid { color: var(--gold-90); }
.xp-tools .orb-mid:hover { color: var(--gold-hi); }
.xp-tools button:active {
  transform: translateY(0) scale(0.94);
  border-color: var(--gold-hi);
}
/* ⛔ без избиране на текст при задържане — иначе дългият натиск маркира съседите */
.xp-tools { user-select: none; -webkit-user-select: none; touch-action: none; }
@media (max-width: 900px) {
  .xp-tools { gap: var(--s2); }
  .xp-tools button { width: 38px; height: 38px; }
  .xp-tools button svg { width: 17px; height: 17px; }
}

/* ⚑ 08-10 · ИЗБОР НА КЕРЕМИДА — модел и цвят.
   Геометрията е на `.xp-helpbox` (същият ъгъл, същият ръб): панелът израства
   НАД лентата с кръгове, вместо да въвежда нов ъгъл на екрана. */
.xp-tiles {
  position: fixed;
  z-index: var(--z-tools);
  right: var(--edge);
  bottom: calc(var(--edge-v) + 44px + var(--s3));
  width: min(268px, 82vw);
  padding: var(--s4) var(--s5) var(--s5);
  border-radius: 6px;
  background: rgba(11, 12, 14, 0.9);
  border: 1px solid var(--hair);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  color: var(--txt-78);
  font-size: var(--fs-ui);
  backdrop-filter: blur(6px);
}
.xp-tiles[hidden] { display: none; }
.tl-h {
  margin: 0 0 var(--s2);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.tl-h + * + .tl-h { margin-top: var(--s4); }
.tl-models, .tl-tones { list-style: none; margin: 0; padding: 0; }
.tl-models li + li { margin-top: 2px; }
.tl-models button {
  display: flex; align-items: baseline; gap: var(--s2);
  width: 100%; padding: 6px 8px;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: var(--txt-78); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.tl-models button:hover:not(:disabled) { border-color: var(--gold); color: var(--txt); }
.tl-models button[aria-pressed="true"] { border-color: var(--gold); color: var(--txt); background: rgba(201, 169, 106, 0.09); }
.tl-models button:disabled { opacity: 0.42; cursor: not-allowed; }
.tl-models small { font-size: 0.66rem; opacity: 0.62; letter-spacing: 0.04em; }
.tl-tones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tl-tones button {
  display: block; width: 100%; aspect-ratio: 1; padding: 0;
  border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--о); cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.tl-tones button:hover { transform: translateY(-1px); border-color: var(--gold); }
.tl-tones button[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 169, 106, 0.35);
}
.tl-note { margin: var(--s3) 0 0; font-size: 0.66rem; line-height: 1.45; opacity: 0.6; }
.xp-tiles :focus-visible, .xp-tools :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .xp-tiles button { transition: none; }
}