/* ═══ TROUBLEMAKER — СЛОЙ ТЕМЫ поверх облика zaboy ═══════════════════════
   «Скромный или БОСС»: бесёнок в короне. Скромник, у которого внутри адское
   пламя, — озорной и дерзкий, а не жуткий. В покое всё сдержанно: густая
   багрово-чёрная ночь, пепельная дымка, снизу тлеют угли, корона набекрень.
   В момент успеха — заказ выдан, своя ступень, нажата его игра — магазин
   становится БОССОМ: корона встаёт ровно и вспыхивает золотом, из-под неё
   взлетает огонь, летят искры и короны.

   Язык темы — его одежда и его огонь:
   • СТРОЧКА — пунктир красной нитью по внутренней кромке: плитки, карточки,
     обещания, строки — нашивки, пришитые к ночи. Строчка же вместо линий-
     разделителей;
   • КЛЕТКА — красно-чёрная, как рукава, — значит «твоё»: манжет под
     выбранной вкладкой, кромка взятого номинала, край корзины, своя ступень,
     выбранный регион, рукав его игры на главной, отворот у обещания «ник»,
     ленты у строк раздела, рукав на заставке;
   • НАШИВКА И БИРКА — тёмная плашка с красным кантом (сумма, «О нас»,
     номера шагов, уровни) и бирка с дыркой (цена, «Мои заказы», строки
     заказа), у его игры — ярлык на вороте;
   • КОРОНА-БЕСЁНОК — боковые зубцы загнуты рожками. Красная и набекрень в
     покое (метка у заголовков, на выбранном номинале, на его игре, над его
     аватаром), ровная и золотая — только в момент БОССА;
   • ВСЁ ГОРИТ — СТАТИЧНО: тёплый отсвет огня по низу плиток, тлеющие
     трещины лавы по их кромке, раскалённая кромка у выбранного, огонь по
     бокам колонки на мониторе. Живой огонь — только в шапке (слой .fx-*,
     не этот файл) и в моменте БОССА. Ни одной кнопки огнём.

   Цвета. Красный — главный: действие, выбранное, значки, строчка. Золото
   короны — ТОЛЬКО момент БОССА. «Получилось» — мята, «ошибка» — угли:
   цвет из семьи огня, но светлее красного и всегда подан иначе — тлеющей
   пунктирной кромкой и значком, а не лаком (theme/contrast.py).
   Красный — в двух тонах, и иначе нельзя: --lamp светлый, им пишут и рисуют
   значки на ночи; заливка под белыми буквами — лак --metal и --lamp-mid,
   темнее. Одного красного, годного на оба места, не существует.

   Правила файла:
   • Всё заперто на корни витрины — .app, .регионы, .вопрос, .накрыльцо,
     #грузим, .proboy (салют), .пасхалка и html[data-телефон]. Этот файл
     сервер подключает и к пульту — голый селектор перекрасил бы чужой экран.
   • Цвет — только токены палитры и смеси из них. Чёрный и белый — для
     теней и бликов, как в шаблоне.
   • Свои переменные — с приставкой --tm-, свои кадры — с приставкой tm-.
   • В кадрах и переходах — только transform / opacity. Бесконечное движение
     живёт ТОЛЬКО внутри экрана: скрытый экран — display:none. Фон, клетка,
     трещины и строчка неподвижны.
   • Слов тема не добавляет: ни одной надписи в content. Декор не ложится
     под цены и надписи кнопок. */

/* ── 0. ПРОИЗВОДНЫЕ ТОНА, КЛЕТКА, КОРОНА, ТРЕЩИНЫ ─────────────────────────
   Не новые цвета, а смеси палитры: магазин перекрашивается из brand.json
   целиком, и здесь нет ни одного цвета числом. */
:root{
  --tm-рамка:color-mix(in oklab, var(--sand) 13%, transparent);
  --tm-рамка-ярко:color-mix(in oklab, var(--sand) 24%, transparent);
  --tm-кромка:color-mix(in oklab, var(--cream) 11%, transparent);
  /* Строчка — красная нить: пунктир по внутренней кромке нашивки. */
  --tm-строчка:color-mix(in oklab, var(--lamp) 30%, transparent);
  /* Стекло ночи: почти непрозрачное, верх светлее — свет падает сверху. */
  --tm-стекло:linear-gradient(180deg,
    color-mix(in oklab, var(--stone-2) 92%, transparent) 0%,
    color-mix(in oklab, var(--stone) 94%, transparent) 55%,
    color-mix(in oklab, var(--stone-deep) 96%, transparent) 100%);
  --tm-красный:color-mix(in oklab, var(--lamp) 60%, transparent);
  --tm-красный-тихо:color-mix(in oklab, var(--lamp) 28%, transparent);
  --tm-выбрано:color-mix(in oklab, var(--lamp) 16%, var(--rock));
  /* Тёплый отсвет огня по низу плитки — как от костра внизу экрана. */
  --tm-тепло:inset 0 -22px 26px -20px color-mix(in oklab, var(--zhar) 42%, transparent);
  /* Раскалённая кромка выбранного: красный контур, оранжевый жар наружу. */
  --tm-накал:inset 0 0 0 1px color-mix(in oklab, var(--lamp) 70%, var(--zhar)),
    0 0 0 1px color-mix(in oklab, var(--lamp) 26%, transparent),
    0 0 20px -6px color-mix(in oklab, var(--zhar) 70%, transparent),
    0 12px 26px -14px var(--lamp-mid);
  /* Лак кнопки: по верхней грани — светлый кант, снизу тень, вокруг — жар. */
  --tm-лак:inset 0 1px 0 color-mix(in oklab, var(--lamp-top) 70%, transparent),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 0 1px color-mix(in oklab, var(--lamp-mid) 80%, transparent),
    0 10px 22px -12px var(--lamp-mid), 0 0 22px -12px var(--zhar);
  /* КЛЕТКА — «буффало», как на его рукавах: красная полоса вдоль и красная
     поперёк, обе наполовину прозрачные. Где сходятся две — красный, где одна
     — тёмно-красный, где ни одной — ночь. Рисунок один на всех; размер
     клетки задаёт место (background-size после background). */
  --tm-клетка-нить:color-mix(in oklab, var(--lamp-mid) 66%, transparent);
  --tm-клетка:
    linear-gradient(90deg, var(--tm-клетка-нить) 50%, transparent 0),
    linear-gradient(0deg, var(--tm-клетка-нить) 50%, transparent 0),
    var(--deep);
  /* Клетка с размером ячейки — для полос, где сверху идёт ещё и стежок:
     там слои пишутся вместе, и размер задаётся каждому слою отдельно. */
  --tm-клетка-5:
    linear-gradient(90deg, var(--tm-клетка-нить) 50%, transparent 0) 0 0 / 5px 5px,
    linear-gradient(0deg, var(--tm-клетка-нить) 50%, transparent 0) 0 0 / 5px 5px,
    var(--deep);
  --tm-клетка-6:
    linear-gradient(90deg, var(--tm-клетка-нить) 50%, transparent 0) 0 0 / 6px 6px,
    linear-gradient(0deg, var(--tm-клетка-нить) 50%, transparent 0) 0 0 / 6px 6px,
    var(--deep);
  /* КНОПКА и СВЕДЕНИЯ различаются с одного взгляда. Кнопка — объёмная:
     светлый кант сверху, тень снизу, шеврон справа, отклик на нажатие.
     Сведения — плоские, прямо на ночи. */
  --tm-объём:inset 0 1px 0 color-mix(in oklab, var(--cream) 15%, transparent),
    inset 0 -2px 0 rgba(0,0,0,.35), 0 8px 16px -10px rgba(0,0,0,.85);
  /* Стежок, которым клетка пришита: светлый пунктир в 1 px по шву. */
  --tm-стежок:repeating-linear-gradient(90deg, color-mix(in oklab, var(--cream) 32%, transparent) 0 3px, transparent 3px 6px);
  --tm-стежок-в:repeating-linear-gradient(180deg, color-mix(in oklab, var(--cream) 32%, transparent) 0 3px, transparent 3px 6px);
  /* КОРОНА-БЕСЁНОК — силуэт для мелких мест: обруч, три зубца с шариками,
     боковые загнуты наружу рожками. Рисунок — маской, цвет даёт место;
     набекрень её ставит место поворотом. */
  --tm-корона:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 17'%3E%3Cpath d='M3.2 12C2.9 9.2 2.2 6.4 1.2 3.9L6.6 8.2L11 2.8L15.4 8.2L20.8 3.9C19.8 6.4 19.1 9.2 18.8 12Z'/%3E%3Crect x='3' y='12.7' width='16' height='3.6' rx='.9'/%3E%3Ccircle cx='1.45' cy='3.3' r='1.3'/%3E%3Ccircle cx='11' cy='2.05' r='1.45'/%3E%3Ccircle cx='20.55' cy='3.3' r='1.3'/%3E%3C/svg%3E");
  /* ТРЕЩИНЫ ЛАВЫ — три разных, без повтора: одна трещина на плитку, от
     нижнего угла, с отростками вверх. Линия — тонкой маской, корка вокруг —
     толстой; толщину держит сам рисунок (vector-effect), длина — по месту. */
  --tm-трещина-а:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.4' d='M0 12.6L10 11.8L17 12.9L27 11.2L35 12.1L45 10.5L54 11.6L63 10.1L72 11L82 9.9L92 10.7L102 10L112 10.6L120 10.3'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.12' d='M45 10.5L48 6.6L50 3.8M82 9.9L85 6.2'/%3E%3C/svg%3E");
  --tm-корка-а:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='5.5' d='M0 12.6L10 11.8L17 12.9L27 11.2L35 12.1L45 10.5L54 11.6L63 10.1L72 11L82 9.9L92 10.7L102 10L112 10.6L120 10.3'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='4.40' d='M45 10.5L48 6.6L50 3.8M82 9.9L85 6.2'/%3E%3C/svg%3E");
  --tm-трещина-б:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.4' d='M120 12.5L111 11.7L103 12.8L94 11L86 12L77 10.4L68 11.5L58 10.2L49 11.1L39 10L28 10.8L18 10.1L8 10.7L0 10.4'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.12' d='M77 10.4L74 6.9L72 4.4M39 10L36 7.2'/%3E%3C/svg%3E");
  --tm-корка-б:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='5.5' d='M120 12.5L111 11.7L103 12.8L94 11L86 12L77 10.4L68 11.5L58 10.2L49 11.1L39 10L28 10.8L18 10.1L8 10.7L0 10.4'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='4.40' d='M77 10.4L74 6.9L72 4.4M39 10L36 7.2'/%3E%3C/svg%3E");
  --tm-трещина-в:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.4' d='M0 12.2L12 11.1L20 12.4L31 10.6L41 11.7L52 10.2L63 11L75 9.8L88 10.6L100 10L120 10.5'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1.12' d='M31 10.6L33 7.4L36 5.2L35 3.4M75 9.8L78 7.1'/%3E%3C/svg%3E");
  --tm-корка-в:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='5.5' d='M0 12.2L12 11.1L20 12.4L31 10.6L41 11.7L52 10.2L63 11L75 9.8L88 10.6L100 10L120 10.5'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='4.40' d='M31 10.6L33 7.4L36 5.2L35 3.4M75 9.8L78 7.1'/%3E%3C/svg%3E");
}

/* Углы — чуть строже шаблонных, как у нашивки. Шкала скруглений шаблона
   объявлена в его :root — перебиваем её только внутри витрины. */
.app, .регионы, .вопрос, .накрыльцо, .пасхалка{--r-card:10px; --r-in:7px}

/* СТРОЧКА — только у нашивок со сведениями, которые надо запомнить: сумма
   к оплате, плита выдачи, карточка уровня (у них она своя, ниже), карточка
   стримера — и у взятого номинала: там она значит «пришит, твоё». У кнопок
   строчки нет: у них объём и шеврон. Строчка на всём подряд перестаёт что-то
   значить. Пунктир контура с отступом внутрь не занимает ни места, ни
   псевдоэлемента; у кнопок контур — фокус, его возвращаем отдельно. */
.app .ore.incart,
.app .стример{outline:1px dashed var(--tm-строчка); outline-offset:-5px}
.app .ore:focus-visible,
.app .gcard:focus-visible,
.app .lob:focus-visible,
.app .лоб-уровни:focus-visible,
.app .ord:focus-visible{outline:2px solid var(--fo-line); outline-offset:2px}


/* ── 1. НОЧЬ: БАГРОВАЯ, С ПЕПЛОМ И УГЛЯМИ ────────────────────────────────
   Один неподвижный слой под всей витриной: фиксированный слой рисуется раз
   и дальше только складывается видеокартой — прокрутка его не трогает.
   Сверху — пепельная дымка, снизу тлеют угли: огонь здесь только светом и
   держится у низа экрана, под корзиной. По краям — виньетка. */
.app::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(150% 100% at 50% 34%, transparent 50%,
      color-mix(in oklab, var(--deep) 74%, transparent) 100%),
    radial-gradient(64% 20% at 90% 4%, color-mix(in oklab, var(--zhar-lo) 13%, transparent), transparent 72%),
    radial-gradient(56% 16% at 6% 22%, color-mix(in oklab, var(--zhar-lo) 9%, transparent), transparent 72%),
    radial-gradient(130% 32% at 50% 106%, color-mix(in oklab, var(--zhar) 20%, transparent) 0%,
      color-mix(in oklab, var(--lamp-lo) 16%, transparent) 42%, transparent 74%),
    linear-gradient(180deg, var(--rock) 0%, var(--deep) 64%)}

/* Пыль в свете лампы — мир шахты, а не его. К тому же бесконечные циклы
   держат видеокарту проснувшейся, а на тёмном экране двухпиксельная точка
   читается битым пикселем. */
.app .motes{display:none !important}

/* Полоса шапки и полоса вкладок липнут к верху и несут свой фон: берём тон
   верха ночи и не глушим его до конца, иначе встала бы тёмная заплата. */
.app .bar{background:linear-gradient(180deg,
  color-mix(in oklab, var(--rock) 96%, transparent) 70%, transparent)}
.app .tabs{background:linear-gradient(180deg, transparent 0,
  color-mix(in oklab, var(--rock) 88%, transparent) 12px,
  color-mix(in oklab, var(--rock) 88%, transparent) 55%, transparent)}


/* ── 2. ЗАГОЛОВКИ — Unbounded заглавными, с его короной ───────────────── */
.app .about-head h2,
.app .screen[data-screen="order"] .order-head h2,
.app .где b,
.app .vip-h,
.app .vip-now b,
.app #digTitle,
.app .bindbox h2,
.app .row h3,
.вопрос-тело h2,
.регионы-верх b{font-family:var(--font-display); text-transform:uppercase;
  font-weight:700; letter-spacing:.04em; line-height:var(--lh-tight)}
/* Перед заголовком экрана — его корона-бесёнок набекрень: подпись магазина
   на каждом экране. Красная и маленькая — это подпись, а не награда. */
.app .about-head h2,
.app .screen[data-screen="order"] .order-head h2,
.app .vip-h,
.app .где b{display:flex; align-items:center; gap:10px}
.app .about-head h2::before,
.app .screen[data-screen="order"] .order-head h2::before,
.app .vip-h::before,
.app .где b::before{content:""; flex:none; width:22px; height:17px; background:var(--lamp);
  -webkit-mask:var(--tm-корона) center / contain no-repeat; mask:var(--tm-корона) center / contain no-repeat;
  rotate:-15deg; translate:0 -2px}
.app .about-head h2{font-size:var(--fs-lg)}
.app .screen[data-screen="order"] .order-head h2{font-size:var(--fs-xl)}
.app .где b{font-size:var(--fs-lg); letter-spacing:.03em}
.app .vip-h{font-size:var(--fs-base); letter-spacing:.07em; margin-bottom:12px}
.app .vip-now b{font-size:var(--fs-xl)}
.app #digTitle{font-size:var(--fs-base); letter-spacing:.06em}
.app .bindbox h2{font-size:var(--fs-md); letter-spacing:.07em}
.app .row h3{font-size:var(--fs-sm); letter-spacing:.1em; color:var(--sand)}
.вопрос-тело h2{font-size:var(--fs-lg); letter-spacing:.04em; text-wrap:balance}
.регионы-верх b{font-size:var(--fs-base); letter-spacing:.07em}


/* ── 3. ШАПКА ПОЛКИ ──────────────────────────────────────────────────────
   Имя — нашивка художника: белые буквы на чёрной плашке с красным кантом,
   как на его кофте. «Все игры» и «Заказы» — дорога, а не действие: тёмная
   плашка с красным значком. Красная заливка сделала бы кнопку самой яркой
   вещью полки — ярче цен и оплаты. */
.app .logo{color:var(--cream); font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-cap); letter-spacing:.16em}
.app .logo svg:not(.слово){color:var(--lamp)}
.app .logo .слово{color:var(--cream)}
.app .bar .pill.big,
.app .pill.ghost{color:var(--cream); border:1px solid var(--tm-рамка); border-radius:var(--r-in);
  background:color-mix(in oklab, var(--stone-2) 72%, transparent);
  box-shadow:inset 0 1px 0 var(--tm-кромка)}
.app .pill.ghost{color:var(--sand)}
.app .bar .pill.big .ic,
.app .pill.ghost .ic{color:var(--lamp)}
.app .back{color:var(--sand); border-color:var(--tm-рамка); border-radius:var(--r-in);
  background:color-mix(in oklab, var(--stone-2) 62%, transparent);
  box-shadow:inset 0 1px 0 var(--tm-кромка)}
.app .back .ic{color:var(--lamp)}
.app .где span{color:var(--sand)}


/* ── 4. ВКЛАДКИ: выбранная — раскалённая, с клетчатым манжетом ───────────
   Выбранная вкладка — не красная заливка, а тёмная середина с раскалённой
   кромкой: подпись остаётся светлой и читается лучше, а заливкой — только
   кнопки. Под ней — манжет из клетки его рукава: «это твоё». Манжет едет
   вместе с пилюлей, потому что живёт в ней. */
.app .tabs{padding-bottom:18px}
.app .tab,
.app .tab-pill{border-radius:var(--r-in)}
.app .tab-pill{background:var(--tm-выбрано); overflow:visible;
  box-shadow:inset 0 -10px 16px -12px color-mix(in oklab, var(--zhar) 60%, transparent), var(--tm-накал)}
.app .tab-pill::after{content:""; position:absolute; left:50%; top:calc(100% + 3px);
  width:30px; height:10px; margin-left:-15px; border-radius:1.5px;
  background:var(--tm-стежок) 0 1px / 100% 1px no-repeat, var(--tm-клетка-5);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--lamp) 32%, transparent), 0 2px 6px -2px rgba(0,0,0,.6)}
.app .tab.on{color:var(--cream)}
.app .tab:not(.on){color:var(--sand); border-color:var(--tm-рамка);
  background:color-mix(in oklab, var(--stone-2) 55%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--cream) 9%, transparent)}
.app .tab:not(.on):active{background:color-mix(in oklab, var(--lamp) 14%, transparent)}


/* ── 5. КАРТОЧКА НОМИНАЛА ────────────────────────────────────────────────
   В покое — нашивка из стекла ночи: строчка по кромке, тёплый отсвет снизу,
   цена — на бирке, светлым. Взяли — номинал стал «твоим»: кромка
   раскаляется, по верху пришивается клетка, на товар садится корона-бесёнок
   набекрень, бирка краснеет, счётчик — красный лак. Кромка и корона
   появляются один раз, когда номинал берут. */
.app .ore{border-color:var(--tm-рамка); background:var(--tm-стекло);
  box-shadow:inset 0 1px 0 var(--tm-кромка), inset 0 -1px 0 rgba(0,0,0,.45),
    inset 0 -18px 22px -20px color-mix(in oklab, var(--zhar) 40%, transparent), var(--sh-card);
  transition:scale var(--t-press) var(--ease-out)}
.app .ore:not(.spent):active{border-color:color-mix(in oklab, var(--lamp) 55%, transparent)}
.app .ore.incart{border-color:transparent;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--lamp) 18%, var(--stone-2)) 0%,
    color-mix(in oklab, var(--lamp) 7%, var(--stone)) 50%,
    color-mix(in oklab, var(--stone-deep) 96%, transparent) 100%);
  box-shadow:inset 0 -20px 24px -18px color-mix(in oklab, var(--zhar) 55%, transparent), var(--tm-накал);
  outline-color:color-mix(in oklab, var(--lamp) 42%, transparent)}
.app .ore.incart::before{content:""; position:absolute; left:0; right:0; top:0; height:10px;
  z-index:1; pointer-events:none;
  background:var(--tm-стежок) 0 100% / 100% 1px no-repeat, var(--tm-клетка-5);
  transform-origin:50% 0; animation:tm-шов 380ms var(--ease-out) backwards}
@keyframes tm-шов{from{transform:scaleX(0); opacity:0} to{transform:scaleX(1); opacity:1}}
/* Корона на товаре: садится сверху набекрень — выбранный коронован. */
.app .ore.incart .pile::after{content:""; position:absolute; left:50%; top:2px; z-index:3;
  width:22px; height:17px; margin-left:-11px; pointer-events:none;
  background:var(--lamp); -webkit-mask:var(--tm-корона) center / contain no-repeat;
  mask:var(--tm-корона) center / contain no-repeat;
  transform:translate(5px,0) rotate(-16deg); transform-origin:50% 100%;
  animation:tm-надели 460ms var(--ease-out) backwards}
@keyframes tm-надели{0%{transform:translate(5px,-14px) rotate(-50deg) scale(.5); opacity:0}
  60%{transform:translate(5px,1px) rotate(-10deg) scale(1.08); opacity:1}
  100%{transform:translate(5px,0) rotate(-16deg) scale(1); opacity:1}}
.app .ore .mark{z-index:2}
.app .ore.spent{border-color:color-mix(in oklab, var(--seam) 60%, transparent);
  background:color-mix(in oklab, var(--deep) 70%, transparent); box-shadow:none}
.app .ore.spent .line1 span{color:var(--sand-dim)}
.app .ore.spent .line1 b{color:var(--sand)}

/* Цена — на БИРКЕ: тёмный ярлык с дыркой слева и острым концом, светлые
   цифры Unbounded (на бирке 18.9). У взятого номинала бирка красная, цифры
   белые (5.4). Бирка стоит по центру, как цена на вещи. */
.app .line1 b{color:var(--cream); font-size:var(--fs-sm)}
/* Длинные названия («1 090 кристаллов» у Genshin) на 360–390 px обрезались
   многоточием — переносим на вторую строку, ровно по словам. */
.app .grid .ore .line1 b{white-space:normal; text-wrap:balance}
.app .line1 span{display:inline-block; margin-top:5px; padding:3px 9px 3px 14px;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-base); letter-spacing:0;
  color:var(--cream); border-radius:3px 5px 5px 3px;
  background:radial-gradient(circle at 6px 50%, color-mix(in oklab, var(--stone-2) 90%, var(--cream)) 0 1.5px, transparent 2.1px),
    var(--deep);
  box-shadow:inset 0 0 0 1px var(--tm-рамка);
  clip-path:polygon(5px 0, 100% 0, 100% 100%, 5px 100%, 0 50%)}
.app .ore.incart .line1 span{color:var(--on-lamp);
  background:radial-gradient(circle at 6px 50%, var(--deep) 0 1.5px, transparent 2.1px), var(--lamp-mid);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-top) 55%, transparent)}
.app .ore.spent .line1 span{background:color-mix(in oklab, var(--deep) 80%, transparent)}
.app .ore .за-штуку{margin-top:4px}
/* Цена, количество и значок стоят по центру — подписи под ними тоже. */
.app .ore .за-штуку,
.app .ore .сложение,
.app .ore .впервые{text-align:center}

/* «Выбрать» — стекло посветлее карточки: зовёт нажать, но не спорит с ценой. */
.app .ore .take{border:1px solid color-mix(in oklab, var(--sand) 22%, transparent);
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--cream) 12%, transparent),
    color-mix(in oklab, var(--cream) 5%, transparent));
  color:var(--cream); font-weight:650;
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--cream) 20%, transparent),
    0 2px 6px -3px rgba(0,0,0,.7)}
.app .ore:not(.spent):active .take{background:color-mix(in oklab, var(--lamp) 24%, transparent);
  border-color:var(--tm-красный-тихо)}
.app .ore.incart .take{border-color:transparent; color:var(--on-lamp); background:var(--metal);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-top) 60%, transparent),
    inset 0 -1px 0 rgba(0,0,0,.2), 0 0 14px -4px var(--zhar)}
.app .ore.spent .take{background:rgba(0,0,0,.24); border-color:color-mix(in oklab, var(--seam) 50%, transparent);
  box-shadow:none}

/* Плашка лучшего номинала — красный лак с короной-бесёнком: лучший коронован. */
.app .ore .mark{font-family:var(--font-display); font-weight:700; letter-spacing:.08em;
  color:var(--on-lamp); background:var(--metal);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-top) 60%, transparent), 0 0 12px -2px var(--zhar)}
.app .ore .mark::before{content:""; flex:none; width:12px; height:9px; margin-right:1px;
  background:currentColor; -webkit-mask:var(--tm-корона) center / contain no-repeat;
  mask:var(--tm-корона) center / contain no-repeat}
.app .ore .gone{background:color-mix(in oklab, var(--seam) 80%, transparent); color:var(--sand)}

/* Своя сумма: то же стекло, кнопка — красным контуром. */
.app .своя{border-color:var(--tm-рамка); background:var(--tm-стекло);
  box-shadow:inset 0 1px 0 var(--tm-кромка), var(--tm-тепло)}
.app .своя .take{border:1px solid var(--tm-красный-тихо); color:var(--lamp);
  background:color-mix(in oklab, var(--lamp) 10%, transparent); font-weight:700}
.app .своя .take:disabled{opacity:.5}

/* Раздел за входом через бота: то же стекло, красный щит. */
.app .замок{border-color:var(--tm-рамка); background:var(--tm-стекло);
  box-shadow:inset 0 1px 0 var(--tm-кромка), var(--sh-card);
  backdrop-filter:none; -webkit-backdrop-filter:none}
.app .замок .ic{color:var(--lamp)}
.app .замок b{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:var(--fs-base)}

/* Кому уходит покупка — красный отсвет на стекле. */
.app .who-chip{border-color:var(--tm-красный-тихо);
  background:color-mix(in oklab, var(--lamp) 9%, var(--stone))}


/* ── 6. ОБЕЩАНИЯ — СВЕДЕНИЯ, А НЕ КНОПКИ ─────────────────────────────────
   Обещания не нажимаются, и это видно: плоско, прямо на ночи — красный
   значок и две строки, без плашки, рамки и тени. Один костюм на весь ряд;
   разные обещания различает значок художника (часы, щит, пламя). На таком
   тихом фоне и видно, что нажимается: плитки игр и кнопка уровней. */
.app .promises > div,
.app .vows > div{border-color:transparent; background:none; box-shadow:none}
.app .promises > div{padding:8px 4px 4px}
.app .promises .ic,
.app .vows .ic{color:var(--lamp)}
/* На главной и в «О нас» — значок слева, две строки справа: ниже кнопки
   уровней и явно не плитка. */
.app .vows > div{display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:10px;
  align-items:center; text-align:left; padding:6px 2px}
.app .vows > div .ic{grid-row:1 / span 2; width:22px; height:22px; margin:0}
.app .vows > div b,
.app .vows > div span{grid-column:2}
.app .row .more{color:var(--lamp); background:transparent;
  border:1px solid var(--tm-красный-тихо); border-radius:var(--r-in);
  font-family:var(--font); font-weight:600; letter-spacing:0; text-transform:none}
.app .row .more:active{background:color-mix(in oklab, var(--lamp) 16%, transparent)}
.app .row h3 .ic{color:var(--lamp)}


/* ── 7. ГЛАВНАЯ МАГАЗИНА ─────────────────────────────────────────────── */
.app .home-mark{color:var(--lamp);
  filter:drop-shadow(0 0 14px color-mix(in oklab, var(--lamp) 38%, transparent))}
.app .home-brand{font-family:var(--font-display); letter-spacing:.34em; color:var(--sand)}
.app .home-о{color:var(--sand)}
/* «ВСЕ ИГРЫ» под именем — вторая тяжёлая строка подряд, а подписывает она
   плитки, до которых ещё полэкрана. Под вордмарком остаётся одна строка —
   чем торгуем. */
.app .home-head h2{display:none}

/* Уровни — НАШИВКА: тёмно-багровая плашка с красным кантом и строчкой,
   значок ступеней — красный. Справа — лестница коронами: пять корон растут и
   выпрямляются, от пепла через красный и огонь к золоту последней, — от
   скромника к боссу. Рисунок — маской, цвет — токенами. Кнопка лежит в ряду
   обещаний (.vows), и общее правило значков ряда красило бы её значок
   иначе — отсюда длинный селектор. */
.app .лоб-уровни{padding-right:44px; border-color:transparent;
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--lamp) 22%, var(--stone-2)) 0%,
    color-mix(in oklab, var(--lamp) 8%, var(--stone-deep)) 100%);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-top) 34%, transparent),
    inset 0 -26px 28px -22px color-mix(in oklab, var(--zhar) 50%, transparent),
    inset 0 -2px 0 rgba(0,0,0,.35), var(--tm-накал);
  transition:scale var(--t-press) var(--ease-out)}
/* Это КНОПКА, и видно это с первого взгляда: раскалённая кромка, объём
   (свет сверху, тень снизу) и шеврон шаблона справа — у нас светлый. Нажал —
   кнопка вжимается, шеврон подаётся вперёд (шаблон), значок вспыхивает. */
.app .лоб-уровни:active{scale:.97}
.app .лоб-уровни .лоб-шеврон{right:16px; border-color:var(--cream)}
.app .home-vows .лоб-уровни .ic{width:24px; height:24px; margin-bottom:6px; color:var(--lamp);
  filter:drop-shadow(0 0 6px color-mix(in oklab, var(--lamp) 45%, transparent));
  transition:transform var(--t-press) var(--ease-out)}
.app .home-vows .лоб-уровни:active .ic{transform:scale(1.18)}
.app .лоб-уровни::after{content:""; position:absolute; right:44px; bottom:14px;
  width:100px; height:24px; pointer-events:none;
  background:linear-gradient(90deg, var(--sand-dim) 0%, var(--lamp) 42%, var(--zhar) 70%, var(--lamp-hi) 88%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28'%3E%3Cdefs%3E%3Cg id='k'%3E%3Cpath d='M3.2 12C2.9 9.2 2.2 6.4 1.2 3.9L6.6 8.2L11 2.8L15.4 8.2L20.8 3.9C19.8 6.4 19.1 9.2 18.8 12Z'/%3E%3Crect x='3' y='12.7' width='16' height='3.6' rx='.9'/%3E%3Ccircle cx='1.45' cy='3.3' r='1.3'/%3E%3Ccircle cx='11' cy='2.05' r='1.45'/%3E%3Ccircle cx='20.55' cy='3.3' r='1.3'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23k' transform='translate(11 18) rotate(-24) scale(0.56) translate(-11 -9)'/%3E%3Cuse href='%23k' transform='translate(34 17.2) rotate(-16) scale(0.67) translate(-11 -9)'/%3E%3Cuse href='%23k' transform='translate(58 16.4) rotate(-9) scale(0.78) translate(-11 -9)'/%3E%3Cuse href='%23k' transform='translate(83 15.6) rotate(-4) scale(0.89) translate(-11 -9)'/%3E%3Cuse href='%23k' transform='translate(108 15) rotate(0) scale(1) translate(-11 -9)'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28'%3E%3Cdefs%3E%3Cg id='k'%3E%3Cpath d='M3.2 12C2.9 9.2 2.2 6.4 1.2 3.9L6.6 8.2L11 2.8L15.4 8.2L20.8 3.9C19.8 6.4 19.1 9.2 18.8 12Z'/%3E%3Crect x='3' y='12.7' width='16' height='3.6' rx='.9'/%3E%3Ccircle cx='1.45' cy='3.3' r='1.3'/%3E%3Ccircle cx='11' cy='2.05' r='1.45'/%3E%3Ccircle cx='20.55' cy='3.3' r='1.3'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23k' transform='translate(11 18) rotate(-24) scale(0.56) translate(-11 -9)'/%3E%3Cuse href='%23k' transform='translate(34 17.2) rotate(-16) scale(0.67) translate(-11 -9)'/%3E%3Cuse href='%23k' transform='translate(58 16.4) rotate(-9) scale(0.78) translate(-11 -9)'/%3E%3Cuse href='%23k' transform='translate(83 15.6) rotate(-4) scale(0.89) translate(-11 -9)'/%3E%3Cuse href='%23k' transform='translate(108 15) rotate(0) scale(1) translate(-11 -9)'/%3E%3C/svg%3E") center / contain no-repeat}
.app .лоб-уровни .menu-tag{color:var(--on-lamp); background:var(--metal); font-weight:700}

/* ПЛИТКИ ИГР. Каждая — нашивка: строчка по кромке, свет своей игры (по нему
   игру и узнают), по низу — тёплый отсвет и тлеющая трещина лавы. */
.app .gcard{border-color:color-mix(in oklab, var(--g) 22%, var(--tm-рамка));
  box-shadow:inset 0 1px 0 var(--tm-кромка), inset 0 -1px 0 rgba(0,0,0,.4),
    inset 0 -28px 30px -24px color-mix(in oklab, var(--zhar) 50%, transparent), var(--sh-card)}
/* Трещина — одна на плитку, от нижнего угла, на половину ширины, с
   отростками вверх. Три рисунка по очереди (от левого угла, от правого,
   короче), чтобы соседние не совпадали. Под тонкой светящейся линией —
   тёмная корка, в узлах тлеют точки ярче. Подпись поднята на 10 px: до
   трещины от неё — не меньше 8. */
.app .gcard:not(.big:first-child){padding-bottom:22px}
.app .gcard:not(.big:first-child)::before,
.app .gcard:not(.big:first-child)::after{content:""; position:absolute; bottom:1px; height:14px;
  z-index:1; pointer-events:none;
  -webkit-mask-position:0 0; mask-position:0 0; -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
/* а — от левого угла, 54 % */
.app .gcard:nth-child(3n+2):not(.big:first-child)::before{left:0; width:54%;
  -webkit-mask-image:var(--tm-корка-а); mask-image:var(--tm-корка-а);
  background:radial-gradient(circle 3.4px at 37.5% 10.5px, var(--lamp-hi) 0 1.1px, color-mix(in oklab, var(--zhar) 90%, transparent) 2px, transparent 3.4px),
    radial-gradient(circle 3.4px at 68.3% 9.9px, var(--lamp-hi) 0 1.1px, color-mix(in oklab, var(--zhar) 90%, transparent) 2px, transparent 3.4px),
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.4) 60%, transparent)}
.app .gcard:nth-child(3n+2):not(.big:first-child)::after{left:0; width:54%;
  -webkit-mask-image:var(--tm-трещина-а); mask-image:var(--tm-трещина-а);
  background:linear-gradient(90deg, var(--zhar), var(--lamp) 55%, color-mix(in oklab, var(--lamp) 10%, transparent))}
/* б — от правого угла, 46 % */
.app .gcard:nth-child(3n):not(.big:first-child)::before{right:0; width:46%;
  -webkit-mask-image:var(--tm-корка-б); mask-image:var(--tm-корка-б);
  background:radial-gradient(circle 3.4px at 64.2% 10.4px, var(--lamp-hi) 0 1.1px, color-mix(in oklab, var(--zhar) 90%, transparent) 2px, transparent 3.4px),
    radial-gradient(circle 3.4px at 32.5% 10px, var(--lamp-hi) 0 1.1px, color-mix(in oklab, var(--zhar) 90%, transparent) 2px, transparent 3.4px),
    linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,.4) 60%, transparent)}
.app .gcard:nth-child(3n):not(.big:first-child)::after{right:0; width:46%;
  -webkit-mask-image:var(--tm-трещина-б); mask-image:var(--tm-трещина-б);
  background:linear-gradient(270deg, var(--zhar), var(--lamp) 55%, color-mix(in oklab, var(--lamp) 10%, transparent))}
/* в — от левого угла, короче, 42 % */
.app .gcard:nth-child(3n+1):not(.big:first-child)::before{left:0; width:42%;
  -webkit-mask-image:var(--tm-корка-в); mask-image:var(--tm-корка-в);
  background:radial-gradient(circle 3.4px at 25.8% 10.6px, var(--lamp-hi) 0 1.1px, color-mix(in oklab, var(--zhar) 90%, transparent) 2px, transparent 3.4px),
    radial-gradient(circle 3.4px at 62.5% 9.8px, var(--lamp-hi) 0 1.1px, color-mix(in oklab, var(--zhar) 90%, transparent) 2px, transparent 3.4px),
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.4) 60%, transparent)}
.app .gcard:nth-child(3n+1):not(.big:first-child)::after{left:0; width:42%;
  -webkit-mask-image:var(--tm-трещина-в); mask-image:var(--tm-трещина-в);
  background:linear-gradient(90deg, var(--zhar), var(--lamp) 55%, color-mix(in oklab, var(--lamp) 10%, transparent))}
.app .gcard:not(.soon):active,
.app .gcard.жмём{border-color:var(--tm-красный); box-shadow:var(--tm-накал)}
.app .gcard-txt b{font-family:var(--font-display); font-weight:700; letter-spacing:.01em}
.app .gcard.big .gcard-txt b{font-size:var(--fs-lg); letter-spacing:.02em}
/* Unbounded шире Onest: на мелкой плитке «Telegram Stars» ломалось бы в две
   строки и въезжало в предмет над собой. */
.app .gcard:not(.big) .gcard-txt b{font-size:var(--fs-md); letter-spacing:0}

/* ЕГО ИГРА — первая крупная плитка (features.homeFeatured[0], Mobile
   Legends) — его рукав: строчка по кромке, по низу — клетчатый манжет в два
   ряда, пришитый стежком, а на заглавной «M» названия сидит корона-бесёнок
   набекрень — как у него на голове. Нажал — МОМЕНТ БОССА: корона встаёт
   ровно и вспыхивает золотом (пока грузится игра, шаблон держит на плитке
   .жмём). Корона меряется от блока подписи: он у шаблона позиционирован. */
.app .gcard.big:first-child{padding-bottom:22px}
.app .gcard.big:first-child::after{content:""; position:absolute; left:0; right:0; bottom:0;
  height:12px; z-index:1; pointer-events:none;
  background:var(--tm-стежок) 0 0 / 100% 1px no-repeat, var(--tm-клетка-6)}
.app .gcard.big:first-child .gcard-txt::before,
.app .gcard.big:first-child .gcard-txt::after{content:""; position:absolute; left:-4px; top:-12px;
  width:22px; height:17px; z-index:2; pointer-events:none;
  -webkit-mask:var(--tm-корона) center / contain no-repeat; mask:var(--tm-корона) center / contain no-repeat;
  transform-origin:50% 100%;
  transition:transform 320ms var(--ease-out), opacity 220ms var(--ease-out)}
.app .gcard.big:first-child .gcard-txt::before{background:var(--lamp); transform:rotate(-18deg)}
.app .gcard.big:first-child .gcard-txt::after{background:var(--lamp-hi); opacity:0;
  transform:translateY(1px) scale(.9)}
.app .gcard.big:first-child:active .gcard-txt::before,
.app .gcard.big:first-child.жмём .gcard-txt::before{transform:rotate(0deg); opacity:0}
.app .gcard.big:first-child:active .gcard-txt::after,
.app .gcard.big:first-child.жмём .gcard-txt::after{transform:translateY(-3px) scale(1.2); opacity:1}

/* ЛОББИ — две КНОПКИ: стекло с красным кантом и объёмом, значок слева,
   шеврон справа. Нажал — вжимается и раскаляется. */
.app .lobby{grid-template-columns:1fr 1fr}
.app .lob{grid-template-columns:auto minmax(0, 1fr) auto; justify-items:start; align-items:center;
  column-gap:9px; text-align:left; padding:13px 30px 13px 13px;
  border-color:color-mix(in oklab, var(--lamp) 32%, transparent); background:var(--tm-стекло);
  box-shadow:var(--tm-объём)}
.app .lob .ic{color:var(--lamp); margin:0}
.app .lob:active{scale:.97; box-shadow:var(--tm-накал)}
.app .lob::after{content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
  margin-top:-4px; pointer-events:none; border:solid var(--sand); border-width:0 2px 2px 0;
  transform:rotate(-45deg)}


/* ── 8. КОРЗИНА-ДОК ──────────────────────────────────────────────────────
   Полоса — первый шаг к деньгам и уже «твоё»: по верхнему краю — клетка,
   сумма светлая, одна кнопка — красный лак. Появляясь, кнопка ловит блик:
   по лаку один раз проходит полоса белого жара. */
.app .dock{background:linear-gradient(180deg, var(--rock) 0%, var(--deep) 60%);
  border-top-color:var(--tm-рамка)}
.app .dock::before{content:""; position:absolute; left:0; right:0; top:-1px; height:10px;
  pointer-events:none; background:var(--tm-стежок) 0 100% / 100% 1px no-repeat, var(--tm-клетка-5)}
.app .dock-in > .ic{color:var(--lamp)}
.app .dock-sum b{color:var(--cream); font-family:var(--font-display)}
/* Разряды итога — span внутри <b>, и общее правило шаблона
   `.dock-sum span{color:var(--sand-dim)}` красило их в цвет подписи. */
.app .dock-sum b span{color:inherit}
.app .dock .act::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:translateX(0); opacity:0}
.app .dock:not(.away) .act::after{animation:tm-блик 900ms var(--ease-out) 260ms both}
@keyframes tm-блик{0%{transform:translateX(0); opacity:0} 12%{opacity:1}
  100%{transform:translateX(420%); opacity:0}}


/* ── 9. КНОПКИ — КРАСНЫЙ ЛАК ─────────────────────────────────────────────
   Главная кнопка — лак: складка наискось и отражённый свет снизу (всё в
   --metal), по верхней грани — светлый кант, вокруг — жар. Белые буквы —
   4.8 на самом светлом месте лака и 6.1 на складке; надпись заглавными
   Unbounded. Шаблон красил кнопку переходом от блика к красному — белые
   буквы на светлом конце не читались бы, поэтому лак ровный по тону. */
.app .act,
.app .plita-copy,
.вопрос-да{background:var(--metal); color:var(--on-lamp);
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:var(--fs-md); box-shadow:var(--tm-лак)}
/* «Код у вас» — мята, и чернила на ней тёмные: шаблон ставил сюда чернила
   лака, а белое на мяте — 1.6. */
.app .plita-copy.ok{background:linear-gradient(140deg, var(--ore-hi), var(--ore)); color:var(--on-ore);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
    0 0 0 1px color-mix(in oklab, var(--ore) 50%, transparent), 0 0 22px -8px var(--ore)}


/* ── 10. ЭКРАН ЗАКАЗА — СУММА НА НАШИВКЕ ──────────────────────────────────
   Ночь ровная: сумма не должна спорить с фоном, угли едва тлеют. Позиции —
   спокойное стекло. Сумма к оплате — нашивка: тёмная плашка, красный кант и
   строчка по краю, как нашивка на его кофте. */
.app .screen[data-screen="order"]::before{
  background:
    radial-gradient(120% 24% at 50% 108%, color-mix(in oklab, var(--zhar) 12%, transparent), transparent 72%),
    linear-gradient(180deg, var(--rock) 0%, var(--deep) 100%)}
.app .screen[data-screen="order"] .back{background:var(--stone); border-color:var(--seam)}
/* Позиции не нажимаются (нажимаются только «−» и «+»): плоские строки,
   разделённые строчкой. */
.app .screen[data-screen="order"] .cart-lines{gap:0}
.app .screen[data-screen="order"] .cart-line{border:0; border-radius:0; padding-left:2px; padding-right:2px;
  background:none; box-shadow:none}
.app .screen[data-screen="order"] .cart-line + .cart-line{border-top:1px dashed var(--tm-строчка)}
.app .screen[data-screen="order"] .panel{position:relative;
  border-color:color-mix(in oklab, var(--lamp) 46%, var(--seam-2));
  background:linear-gradient(180deg, var(--stone-deep), var(--deep));
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--cream) 10%, transparent),
    inset 0 -24px 28px -24px color-mix(in oklab, var(--zhar) 45%, transparent),
    0 0 30px -20px var(--lamp)}
.app .screen[data-screen="order"] .panel::after{content:""; position:absolute; inset:5px;
  pointer-events:none; border-radius:calc(var(--r-card) - 4px);
  border:1px dashed var(--tm-строчка)}
/* Скидки нет — её строка спрятана, но правило шаблона «черта над каждой
   строкой, кроме первой» рисовало черту над «К оплате». */
.app .screen[data-screen="order"] .line.hidden + .line{background:none}
.app .screen[data-screen="order"] .line.pay dt{font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-sm)}
.app .screen[data-screen="order"] .line.pay dd{font-family:var(--font-display); color:var(--cream)}
/* Скидка — выгода покупателя: мятой, а не красным (красный на экране денег
   читался бы как ещё одна цена). */
.app .line.cut dt,
.app .line.cut dd{color:var(--ore)}
.app .screen[data-screen="order"] .game-name{font-family:var(--font-display);
  letter-spacing:.08em; color:var(--lamp)}
.app .field label .чья{color:var(--lamp)}
/* Предупреждение по игре — углями «ошибки», а не красным: красный здесь
   — кнопка, и предупреждение читалось бы ещё одним действием. */
.app .game-warn,
.app .screen[data-screen="order"] .game-warn{
  background:color-mix(in oklab, var(--rust) 9%, var(--stone-deep));
  border-color:color-mix(in oklab, var(--rust) 34%, transparent)}
.app .game-warn::before,
.app .выдача-оговорка::before{color:var(--rust)}
.app #gameWarn b{color:var(--rust)}
.app .say.кому.нет{color:var(--rust)}
.app .обещание .кому{color:var(--lamp)}


/* ── 11. ХОД ЗАКАЗА — ЛИЦА КОРОНЫ И МОМЕНТ БОССА ─────────────────────────
   Лица — корона художника (i-mark-wait / -ok / -fail), и живут они целиком:
   внутрь символа стили не дотягиваются. Ждём — корона покачивается,
   скромник думает. Готово — МОМЕНТ БОССА: корона встаёт ровно и в золоте,
   за ней вспыхивает свет, из-под неё взлетает огонь, разлетаются искры, а
   на острие изредка сверкает блик. Не вышло — корона съезжает, над ней
   поднимается струйка дыма.
   Панель — свой слой (z-index:0): свет и огонь лежат в нём под короной и
   под подписями, но над фоном панели. */
.app .digger{position:relative; z-index:0; border-color:var(--tm-рамка);
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--stone-2) 90%, transparent),
    color-mix(in oklab, var(--deep) 96%, transparent));
  box-shadow:inset 0 1px 0 var(--tm-кромка), inset 0 -30px 34px -30px color-mix(in oklab, var(--zhar) 45%, transparent),
    0 16px 34px -20px #000}
/* Полоса хода — ФИТИЛЬ: по шву из стежков тлеет огонь, на его конце —
   огонёк. Готово — фитиль догорел до конца и «прошит» мятой; не вышло —
   огонь погас: рваный обугленный след углями, огонька нет. Длину полосы
   ставит шаблон (переход по ширине — его); огонёк мерцает только
   transform/opacity и только пока заказ в работе. */
.app .digger-bar{position:relative; height:10px; overflow:visible; border-radius:0; box-shadow:none;
  background:linear-gradient(90deg, color-mix(in oklab, var(--sand) 34%, transparent) 55%, transparent 0)
    0 50% / 8px 2px repeat-x}
.app .digger-bar i{position:relative; height:4px; margin-top:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--lamp-lo), var(--lamp) 60%, var(--zhar));
  box-shadow:0 0 8px color-mix(in oklab, var(--zhar) 65%, transparent)}
.app .digger:not(.done):not(.bad) .digger-bar i::after{content:""; position:absolute; right:-7px; top:50%;
  width:14px; height:14px; margin-top:-7px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--cream) 0 1.6px, color-mix(in oklab, var(--zhar) 95%, transparent) 2.8px,
    color-mix(in oklab, var(--zhar) 35%, transparent) 4.6px, transparent 7px);
  animation:tm-огонёк .9s var(--ease-in-out) infinite}
@keyframes tm-огонёк{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(.72); opacity:.78}}
.app .digger.done .digger-bar i{background:linear-gradient(90deg,
    color-mix(in oklab, var(--ore) 55%, var(--deep)), var(--ore) 60%, var(--ore-hi));
  box-shadow:0 0 10px color-mix(in oklab, var(--ore) 60%, transparent)}
.app .digger.bad .digger-bar i{background:repeating-linear-gradient(90deg, var(--rust) 0 7px, transparent 7px 11px);
  box-shadow:none}
.app .лз{filter:drop-shadow(0 0 12px color-mix(in oklab, currentColor 45%, transparent))
  drop-shadow(0 6px 14px rgba(0,0,0,.55))}

/* ждём: корона покачивается от обруча */
.app .лз.ждём{transform-origin:50% 80%; animation:tm-качается 2.8s var(--ease-in-out) infinite}
@keyframes tm-качается{0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(5deg)}}

/* готово: МОМЕНТ БОССА */
.app .digger.done{border-color:color-mix(in oklab, var(--lamp-hi) 46%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-hi) 34%, transparent),
    inset 0 -30px 34px -30px color-mix(in oklab, var(--zhar) 55%, transparent),
    0 0 40px -18px var(--lamp-hi), 0 16px 34px -20px #000}
.app .digger.done #digTitle{color:var(--lamp-hi)}
.app .digger.done .лз.готово{color:var(--lamp-hi); transform-origin:50% 80%;
  animation:tm-ровно 950ms var(--ease-out) both}
@keyframes tm-ровно{
  0%  {transform:translateY(6px) rotate(-18deg) scale(.72); opacity:0}
  30% {opacity:1}
  55% {transform:translateY(-3px) rotate(4deg) scale(1.1)}
  78% {transform:translateY(0) rotate(-1.5deg) scale(.98)}
  100%{transform:none; opacity:1}}
/* за короной вспыхивает золото и остаётся ровный свет */
.app .digger.done .digger-face::after{content:""; position:absolute; left:50%; top:50%;
  width:150px; height:150px; margin:-75px 0 0 -75px; z-index:-1; border-radius:50%;
  pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--lamp-hi) 50%, transparent),
    color-mix(in oklab, var(--lamp-hi) 16%, transparent) 50%, transparent);
  animation:tm-вспышка 1100ms var(--ease-out) 120ms both}
@keyframes tm-вспышка{0%{transform:scale(.3); opacity:0} 22%{opacity:1}
  100%{transform:scale(1.2); opacity:.32}}
/* из-под короны взлетает огонь — светом, не заливкой; свет гаснет к краям
   внутри своего слоя, и прямой границы нет */
.app .digger.done .digger-face::before{content:""; position:absolute; left:50%; bottom:-14px;
  width:124px; height:108px; margin-left:-62px; z-index:-1; pointer-events:none;
  transform-origin:50% 100%;
  background:radial-gradient(closest-side at 50% 62%, color-mix(in oklab, var(--zhar) 62%, transparent),
    color-mix(in oklab, var(--lamp) 24%, transparent) 55%, transparent);
  animation:tm-взлёт 1300ms var(--ease-out) 80ms both}
@keyframes tm-взлёт{0%{transform:translateY(22px) scale(.6,.3); opacity:0} 40%{opacity:.85}
  100%{transform:translateY(-4px) scale(1,1); opacity:.28}}
/* искры разлетаются от короны один раз: точки лежат вокруг середины, и
   рост слоя уносит их наружу */
.app .digger.done .лицо-заказа::before{content:""; position:absolute; left:50%; top:50%;
  width:200px; height:136px; margin:-68px 0 0 -100px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 12% 28%, var(--lamp-hi) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 88% 20%, var(--cream) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 20% 80%, var(--zhar) 0 1.9px, transparent 2.9px),
    radial-gradient(circle at 82% 76%, var(--lamp-hi) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 4%, var(--lamp-hi) 0 2px, transparent 3px),
    radial-gradient(circle at 3% 55%, var(--cream) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 97% 48%, var(--zhar) 0 1.7px, transparent 2.7px),
    radial-gradient(circle at 34% 10%, var(--zhar) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 68% 8%, var(--cream) 0 1.4px, transparent 2.4px);
  animation:tm-искры 1250ms var(--ease-out) 260ms both}
@keyframes tm-искры{0%{transform:scale(.35); opacity:0} 20%{opacity:1}
  100%{transform:scale(1.28); opacity:0}}
/* корона сверкнула: блик-звезда на правом зубце, потом изредка ещё */
.app .digger.done .лицо-заказа::after{content:""; position:absolute; left:calc(50% + 20px);
  top:4px; width:15px; height:15px; pointer-events:none;
  background:var(--cream);
  clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation:tm-сверк 3.4s var(--ease-out) 700ms infinite both}
@keyframes tm-сверк{0%,64%,100%{transform:scale(0) rotate(0deg); opacity:0}
  70%{transform:scale(1.15) rotate(45deg); opacity:1}
  82%{transform:scale(.2) rotate(90deg); opacity:0}}

/* не вышло: огонь погас (тёплого низа у панели нет), корона съехала, над
   ней струйка дыма — три раза и тишина */
.app .digger.bad{border-color:color-mix(in oklab, var(--rust) 45%, transparent); border-style:dashed;
  box-shadow:inset 0 1px 0 var(--tm-кромка), 0 16px 34px -20px #000}
.app .digger.bad .лз.беда{transform-origin:50% 85%; animation:tm-съехала 900ms var(--ease-out) both}
@keyframes tm-съехала{
  0%  {transform:translate(-3px,-6px) rotate(-14deg); opacity:0}
  25% {opacity:1}
  55% {transform:translate(2px,2px) rotate(5deg)}
  78% {transform:translate(0,0) rotate(-2deg)}
  100%{transform:none; opacity:1}}
.app .digger.bad .лицо-заказа::after{content:""; position:absolute; left:calc(50% - 30px);
  top:-4px; width:40px; height:40px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--zhar-lo) 85%, transparent),
    color-mix(in oklab, var(--zhar-lo) 34%, transparent) 60%, transparent);
  animation:tm-дым 2.4s var(--ease-out) 500ms 3 both}
@keyframes tm-дым{0%{transform:translate(0,6px) scale(.45); opacity:0} 25%{opacity:.8}
  100%{transform:translate(-8px,-30px) scale(1.6); opacity:0}}

/* Шаги — НАШИВКИ НА НИТКЕ. Номер — квадратная нашивка, нитка сверху вниз
   сшивает шаги. Впереди — наметка: пунктир, ещё не пришито. Идёт — красная
   нашивка тлеет. Пройден — «прошит»: мята со строчкой внутри, и нитка до
   него мятная. Сорвался — угли. Строка шага — свой слой (z-index:0), чтобы
   тление легло под нашивку, но над подложкой списка. */
.app .trail{border-color:var(--tm-рамка); box-shadow:inset 0 1px 0 var(--tm-кромка)}
.app .trail li{position:relative; z-index:0}
.app .trail li:not(:last-child)::before{content:""; position:absolute; left:10px; top:32px; bottom:-8px;
  pointer-events:none; border-left:1.5px dashed color-mix(in oklab, var(--sand) 26%, transparent)}
.app .trail li.was:not(:last-child)::before{border-left-color:color-mix(in oklab, var(--ore) 80%, transparent)}
.app .trail .pip{width:21px; height:21px; border-radius:5px; font-family:var(--font-display); font-weight:700;
  border:1px dashed color-mix(in oklab, var(--sand) 38%, transparent); background:var(--stone-deep);
  color:var(--sand)}
.app .trail li.now .pip{position:relative; border:0; background:var(--lamp-mid); color:var(--on-lamp);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-top) 60%, transparent)}
.app .trail li.now .pip::after{content:""; position:absolute; inset:-8px; z-index:-1; border-radius:50%;
  pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--zhar) 62%, transparent), transparent);
  animation:tm-тлеет 2.4s var(--ease-in-out) infinite}
@keyframes tm-тлеет{0%,100%{transform:scale(.88); opacity:.35} 50%{transform:scale(1.08); opacity:1}}
.app .trail li.was .pip{border:0; background:var(--ore); color:var(--on-ore);
  outline:1px dashed color-mix(in oklab, var(--on-ore) 55%, transparent); outline-offset:-4px}
.app .trail li.lost .pip{border:0; background:var(--rust); color:var(--on-rust)}

/* Плита выдачи — трофей БОССА и тоже нашивка: тёмная плита в золотом
   отсвете, строчка по краю, надпись и номинал — золотом, код — в
   пунктирной рамке. Блик по плите шаблон пускает один раз — у нас он
   золотой. */
.app .plita{border-color:color-mix(in oklab, var(--lamp-hi) 44%, transparent);
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--lamp-hi) 14%, var(--stone-deep)) 0%, var(--stone-deep) 58%, var(--deep) 100%);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-hi) 36%, transparent),
    0 0 44px -18px var(--lamp-hi), 0 20px 40px -26px #000}
.app .plita::before{content:""; position:absolute; inset:5px; pointer-events:none;
  border-radius:calc(var(--r-card) - 4px);
  border:1px dashed color-mix(in oklab, var(--lamp-hi) 30%, transparent)}
.app .plita::after{background:linear-gradient(100deg, transparent,
  color-mix(in oklab, var(--lamp-hi) 24%, transparent), transparent)}
.app .plita-top{font-family:var(--font-display); letter-spacing:.24em; color:var(--lamp-hi);
  text-shadow:0 0 12px color-mix(in oklab, var(--lamp-hi) 40%, transparent)}
.app .plita-uc{font-family:var(--font-display);
  background:linear-gradient(150deg, var(--cream) 0%, var(--lamp-hi) 36%,
    color-mix(in oklab, var(--lamp-hi) 70%, var(--zhar)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.app .plita-id{color:var(--sand)}
.app .plita code{border:1px dashed color-mix(in oklab, var(--lamp-hi) 40%, transparent);
  background:rgba(0,0,0,.42); color:var(--cream)}
/* Сбой выдачи — плашка «догоревших углей»: тёмная, с тлеющей пунктирной
   кромкой, полосой слева и значком ✕ в кольце. Ошибку видно не одним
   цветом, и красной кнопке «Повторить» под ней (сплошной лак) она не родня. */
.app .note.bad{position:relative; margin-top:12px; padding:13px 14px 13px 42px;
  border-radius:var(--r-card); font-size:var(--fs-md); line-height:var(--lh-text); color:var(--cream);
  border:1px dashed color-mix(in oklab, var(--rust) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in oklab, var(--rust) 7%, var(--stone-deep)), var(--deep));
  box-shadow:inset 3px 0 0 var(--rust)}
.app .note.bad::before{content:""; position:absolute; left:13px; top:14px; width:18px; height:18px;
  border-radius:50%; pointer-events:none; box-shadow:inset 0 0 0 1.5px var(--rust);
  background:
    linear-gradient(45deg, transparent calc(50% - .8px), var(--rust) calc(50% - .8px) calc(50% + .8px),
      transparent calc(50% + .8px)) 50% 50% / 8px 8px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - .8px), var(--rust) calc(50% - .8px) calc(50% + .8px),
      transparent calc(50% + .8px)) 50% 50% / 8px 8px no-repeat}


/* ── 12. УРОВНИ — ОТ СКРОМНИКА К БОССУ ───────────────────────────────────
   Ступени художника растут: от обруча набекрень до короны в огне. Первая
   ступень — скромник: карточка тихая, красная, корона набекрень. Со второй
   ступени карточка золотая, корона стоит ровно и спокойно; у верхней за ней
   горит огонь. МОМЕНТ БОССА — только при переходе на новую ступень: шаблон
   ставит на карточку признак .новая-ступень, когда ступень выросла с прошлого
   показа (skin.js, ступеньВыросла). Тогда корона встаёт ровно из наклона, за
   ней вспыхивает свет, у верхней ступени поднимается огонь. Обычное открытие
   экрана и первый заход — без вспышки. В лестнице золото — только у верхней
   ступени. */
.app .vip-now{position:relative; z-index:0; overflow:hidden; border-color:var(--tm-красный-тихо);
  background:linear-gradient(168deg,
    color-mix(in oklab, var(--lamp) 14%, var(--stone)),
    color-mix(in oklab, var(--stone-deep) 94%, transparent) 70%);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-top) 24%, transparent),
    inset 0 -30px 34px -30px color-mix(in oklab, var(--zhar) 45%, transparent),
    0 0 36px -22px var(--lamp), var(--sh-lift);
  outline:1px dashed var(--tm-строчка); outline-offset:-6px}
.app .vip-now.lvl1,
.app .vip-now.lvl2,
.app .vip-now.lvl3,
.app .vip-now.lvl4{border-color:color-mix(in oklab, var(--lamp-hi) 40%, transparent);
  outline-color:color-mix(in oklab, var(--lamp-hi) 26%, transparent);
  background:linear-gradient(168deg,
    color-mix(in oklab, var(--lamp-hi) 12%, var(--stone)),
    color-mix(in oklab, var(--stone-deep) 94%, transparent) 70%);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-hi) 30%, transparent),
    inset 0 -30px 34px -30px color-mix(in oklab, var(--zhar) 50%, transparent),
    0 0 40px -22px var(--lamp-hi), var(--sh-lift)}
.app .vip-now .ic{width:44px; height:44px; color:var(--lamp); transform-origin:50% 80%;
  filter:drop-shadow(0 0 10px color-mix(in oklab, var(--lamp) 40%, transparent))
    drop-shadow(0 3px 7px rgba(0,0,0,.5))}
.app .vip-now.lvl1 .ic,
.app .vip-now.lvl2 .ic,
.app .vip-now.lvl3 .ic,
.app .vip-now.lvl4 .ic{color:var(--lamp-hi);
  filter:drop-shadow(0 0 10px color-mix(in oklab, var(--lamp-hi) 40%, transparent))
    drop-shadow(0 3px 7px rgba(0,0,0,.5))}
/* Новая ступень: корона встаёт ровно из наклона (вместо шаблонного «значок
   выскакивает» — тот же признак, свой момент). */
.app .vip-now.новая-ступень .ic{animation:tm-ровно 950ms var(--ease-out) 180ms both}
.app .vip-now.empty-id{border-color:var(--tm-рамка); background:var(--tm-стекло)}
/* …и за ней вспыхивает золото — один раз, на переходе. */
.app .vip-now.новая-ступень::before{content:""; position:absolute; left:-24px; top:-14px;
  width:130px; height:130px; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--lamp-hi) 42%, transparent),
    color-mix(in oklab, var(--lamp-hi) 12%, transparent) 55%, transparent);
  animation:tm-вспышка 1200ms var(--ease-out) 200ms both}
/* Верхняя ступень: за короной ровно горит огонь; на переходе он
   поднимается из-под короны. */
.app .vip-now.lvl4::after{content:""; position:absolute; left:-2px; top:6px;
  width:84px; height:82px; z-index:-1; pointer-events:none; transform-origin:50% 100%;
  background:radial-gradient(closest-side at 50% 62%, color-mix(in oklab, var(--zhar) 70%, transparent),
    color-mix(in oklab, var(--lamp) 28%, transparent) 55%, transparent);
  opacity:.55}
.app .vip-now.новая-ступень.lvl4::after{animation:tm-горит 1400ms var(--ease-out) 260ms both}
@keyframes tm-горит{0%{transform:translateY(22px) scale(.6,.3); opacity:0} 40%{opacity:.9}
  100%{transform:translateY(-2px) scale(1,1); opacity:.55}}
.app .vip-now > span,
.app .vip-left{color:var(--sand)}
.app .vip-now em{color:var(--deep); background:var(--lamp-hi); border-radius:var(--r-in);
  font-family:var(--font-display); font-weight:700; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 14px -4px var(--lamp-hi)}
/* Полоса до следующей — раскаляется от тёмно-красного к огню. */
.app .vip-bar{height:8px; background:color-mix(in oklab, var(--deep) 80%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--sand) 12%, transparent)}
.app .vip-bar i{background:linear-gradient(90deg, var(--lamp-lo), var(--lamp) 60%, var(--zhar));
  box-shadow:0 0 10px var(--lamp)}
.app .vip-sheet,
.app .bindbox{border-color:var(--tm-рамка); background:var(--tm-стекло);
  box-shadow:inset 0 1px 0 var(--tm-кромка)}
/* Ступени не нажимаются: плоские строки, разделённые строчкой. */
.app .vip-table{gap:0}
.app .vip-row{position:relative; overflow:hidden; border:0; border-radius:0; background:none; box-shadow:none}
.app .vip-row + .vip-row{border-top:1px dashed var(--tm-строчка)}
.app .vip-row span{color:var(--lamp); font-family:var(--font-display); font-weight:600}
/* Порог ступени — одной строкой: «от» отрывалось от суммы у длинного имени. */
.app .vip-row u{white-space:nowrap}
/* Своя ступень — раскалённая кромка и клетчатый край слева в два ряда,
   пришитый стежком: «ты здесь». */
.app .vip-row.on{border-radius:var(--r-card); padding-left:22px;
  background:color-mix(in oklab, var(--lamp) 12%, var(--stone)); box-shadow:var(--tm-накал)}
.app .vip-row.on + .vip-row{border-top-color:transparent}
.app .vip-row.on::after{content:""; position:absolute; left:0; top:0; bottom:0; width:10px;
  pointer-events:none; background:var(--tm-стежок-в) 100% 0 / 1px 100% no-repeat, var(--tm-клетка-5)}
/* «Вы здесь» шаблон ставит строкой под названием; перед названием у нас
   значок ступени (26 + 10 px) — строку ставим под буквы, а не под значок. */
.app .vip-row.on b::after{padding-left:36px; color:var(--lamp-top); font-weight:600}
/* Верхняя ступень названа именем БОССА и горит: за её короной — огонь (за
   короной, а не за названием), имя и корона — золотом. Свет гаснет к краям
   внутри своего слоя — среза нет. */
.app .vip-table .vip-row:last-child{z-index:0}
.app .vip-table .vip-row:last-child::before{content:""; position:absolute; left:0; top:-4px;
  width:60px; height:56px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side at 50% 58%, color-mix(in oklab, var(--zhar) 55%, transparent),
    color-mix(in oklab, var(--lamp) 22%, transparent) 55%, transparent)}
.app .vip-table .vip-row.on:last-child::before{left:12px}
.app .vip-table .vip-row:last-child b{font-family:var(--font-display); letter-spacing:.02em;
  color:var(--lamp-hi); white-space:nowrap;
  text-shadow:0 0 12px color-mix(in oklab, var(--lamp-hi) 45%, transparent)}
/* Ступени — рисунок художника; на 18 px их рост не читался. Размер и цвет
   заданы в разметке строкой стиля — перебиваем её. Красные, у верхней —
   золото. */
.app .vip-row b > svg.ic{width:26px !important; height:26px !important; color:var(--lamp) !important;
  vertical-align:-8px !important; margin-right:10px !important}
.app .vip-table .vip-row:last-child b > svg.ic{color:var(--lamp-hi) !important}


/* ── 13. О НАС ───────────────────────────────────────────────────────────
   Шаги — сведения: плоско, прямо на ночи, номер слева, дело справа. Номер —
   маленькая нашивка: красный лак, белая цифра. Вопросы раскрываются — у них
   плашка и стрелка; раскрытый загорается красной полосой слева. */
.app .steps li{border-color:transparent; background:none; box-shadow:none;
  display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:14px;
  align-items:start; padding:10px 2px}
.app .steps li > .step-n{grid-row:1 / span 2; margin:1px 0 0}
.app .steps li > b,
.app .steps li > p{grid-column:2}
.app .steps li > b{margin-bottom:4px}
.app .step-n,
.шаги-список li span{border:0; border-radius:5px; color:var(--on-lamp); background:var(--metal);
  font-family:var(--font-display); font-weight:800;
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-top) 60%, transparent),
    0 0 12px -4px var(--zhar)}
.app .step-n{width:30px; height:30px; font-size:var(--fs-md)}
.app .asks details{border-color:var(--tm-рамка); background:var(--tm-стекло);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--cream) 10%, transparent)}
.app .asks details[open]{border-color:var(--tm-красный-тихо);
  box-shadow:inset 3px 0 0 var(--lamp), inset 0 1px 0 color-mix(in oklab, var(--cream) 10%, transparent)}
.app .asks details[open] summary{color:var(--cream)}
.app .asks details[open] summary::after{border-color:var(--lamp)}


/* ── 14. МОИ ЗАКАЗЫ ──────────────────────────────────────────────────────
   Строка открывает заказ — значит это кнопка: объём и шеврон справа. Полоса
   слева — исход: мята — выдан, угли — сбой или отмена, красный — в
   работе. */
.app .ord{position:relative; padding-right:32px; border-color:color-mix(in oklab, var(--lamp) 22%, transparent);
  background:var(--tm-стекло); box-shadow:inset 3px 0 0 var(--tm-рамка-ярко), var(--tm-объём)}
.app .ord::after{content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
  margin-top:-4px; pointer-events:none; border:solid var(--sand); border-width:0 2px 2px 0;
  transform:rotate(-45deg)}
.app .ord:has(.s-done){box-shadow:inset 3px 0 0 var(--ore), var(--tm-объём)}
.app .ord:has(.s-failed),
.app .ord:has(.s-canceled){box-shadow:inset 3px 0 0 var(--rust), var(--tm-объём)}
.app .ord:has(.s-issuing),
.app .ord:has(.s-paid){box-shadow:inset 3px 0 0 var(--lamp), var(--tm-объём)}
.app .ord:active{scale:.98; border-color:var(--tm-красный)}
.app .ord-sum{font-family:var(--font-display); font-weight:600; color:var(--cream)}
.app .ord-st{border-radius:var(--r-in)}
.app .ord-st.s-issuing,
.app .ord-st.s-paid{color:var(--lamp); background:color-mix(in oklab, var(--lamp) 14%, transparent)}
.app .пусто-плита{border-color:var(--tm-рамка); background:var(--tm-стекло);
  box-shadow:inset 0 1px 0 var(--tm-кромка), var(--tm-тепло), var(--sh-card)}
.app .пусто-плита .ic{color:var(--lamp)}
.app .пусто-плита b{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:var(--fs-base)}


/* ── 15. ВЫБОР РЕГИОНА И ВОПРОСЫ ─────────────────────────────────────────
   Экраны поверх всего — та же ночь с углями снизу. Выбранный регион —
   раскалённая кромка и клетчатый край, как своя ступень. Над вопросом «где
   ваш аккаунт» вместо булавки — его корона-бесёнок набекрень: покачивается,
   думает вместе с покупателем. */
.регионы{background:
  radial-gradient(120% 30% at 50% 108%, color-mix(in oklab, var(--zhar) 13%, transparent), transparent 72%),
  var(--deep)}
.регионы-верх{border-bottom-color:var(--tm-рамка)}
.регион{position:relative; overflow:hidden; border-color:var(--tm-рамка); background:var(--tm-стекло);
  color:var(--sand)}
.регион b{color:var(--cream)}
.регион.on{color:var(--cream); background:var(--tm-выбрано); border-color:transparent;
  box-shadow:var(--tm-накал); padding-left:22px}
.регион.on::after{content:""; position:absolute; left:0; top:0; bottom:0; width:10px;
  pointer-events:none; background:var(--tm-стежок-в) 100% 0 / 1px 100% no-repeat, var(--tm-клетка-5)}
.регион.on u{color:var(--lamp-top)}
/* Значок-символ шаблон запекает в картинку цветом чернил — под свою
   заливку лаком. У нас выбранный ряд тёмный, и тёмный значок на нём тонул.
   Высветляем ТОЛЬКО вклеенные символы: флаги стран — снимки. */
.регион.on img[src^="data:image/svg"]{filter:brightness(0) invert(1)
  drop-shadow(0 0 4px var(--lamp))}
.регион:not(.on):active{background:color-mix(in oklab, var(--lamp) 14%, transparent)}
.регионы .назад{color:var(--sand); border-color:var(--tm-рамка);
  background:color-mix(in oklab, var(--stone-2) 60%, transparent)}
.регионы-поиск input{border-color:var(--tm-рамка);
  background:color-mix(in oklab, var(--stone-2) 50%, transparent); color:var(--cream)}
.регионы-поиск input:focus{outline:none; border-color:var(--fo-line); box-shadow:var(--fo-ring)}

.вопрос{background:
  radial-gradient(120% 30% at 50% 108%, color-mix(in oklab, var(--zhar) 13%, transparent), transparent 72%),
  var(--deep)}
.вопрос-глубь .шар{background:radial-gradient(closest-side circle at 50% 70%,
  color-mix(in oklab, var(--zhar) 9%, transparent),
  color-mix(in oklab, var(--lamp) 5%, transparent) 55%, transparent 100%)}
.вопрос-глубь .метка{width:48px; height:37px; border-radius:0; rotate:0deg; opacity:.95;
  translate:-50% 0; background:var(--lamp);
  -webkit-mask:var(--tm-корона) center / contain no-repeat; mask:var(--tm-корона) center / contain no-repeat;
  transform-origin:50% 90%; animation:tm-думает 3.2s var(--ease-in-out) infinite}
@keyframes tm-думает{0%,100%{transform:rotate(-15deg)} 50%{transform:rotate(-5deg)}}
.вопрос-да{box-shadow:var(--tm-лак)}
.вопрос-нет{background:color-mix(in oklab, var(--stone-2) 70%, transparent);
  border-color:var(--tm-рамка); box-shadow:inset 0 1px 0 var(--tm-кромка)}
.шаги-список li span{width:28px; flex-basis:28px}
.шаги-список input{border-color:var(--tm-рамка);
  background:color-mix(in oklab, var(--stone-2) 50%, transparent)}


/* ── 16. ЗАГРУЗКА И «НА РАБОЧИЙ СТОЛ» ────────────────────────────────── */
/* Заставка — его рукав с нашивкой: поперёк экрана полоса красно-чёрной
   клетки, на ней — вордмарк-нашивка художника и корона, раскалённая добела.
   Неподвижно: знак на заставке и так дышит. Края полосы тают маской, снизу
   тлеют угли. */
#грузим::before{content:""; position:absolute; left:0; right:0; top:50%; height:190px;
  margin-top:-80px; z-index:-1; pointer-events:none; opacity:.55;
  background:var(--tm-клетка); background-size:26px 26px;
  -webkit-mask:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent),
    linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent),
    linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-composite:intersect}
#грузим::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 28% at 50% 108%, color-mix(in oklab, var(--zhar) 20%, transparent),
    color-mix(in oklab, var(--lamp-lo) 14%, transparent) 45%, transparent 74%)}
#грузим > div > svg:first-child{color:var(--cream);
  filter:drop-shadow(0 0 10px color-mix(in oklab, var(--lamp) 70%, transparent))}
#грузим .грузим-слово{color:var(--cream); filter:drop-shadow(0 4px 12px rgba(0,0,0,.75))}
/* Ушедшая заставка прозрачна и невидима, но не снята, и её дыхание, полоса и
   фразы крутились бы до конца сеанса. !important — потому что дыхание и
   полоса заданы прямо в атрибуте style, а его без него не перебить. */
#грузим.ушёл *{animation:none !important}
.накрыльцо{border-color:var(--tm-красный-тихо);
  background:color-mix(in oklab, var(--stone-2) 94%, transparent);
  box-shadow:inset 0 1px 0 var(--tm-кромка), var(--sh-lift)}
.накрыльцо-знак{color:var(--lamp)}
.накрыльцо-да{background:var(--metal); color:var(--on-lamp); box-shadow:var(--tm-лак)}


/* ── 17. ФИРМЕННЫЕ МЕСТА: арт, вордмарк, салют, стример, пасхалка ────────
   Места строит шаблон, рисунки — художник, огонь шапки — слой .fx-*; здесь
   только то, как они живут в его ночи. */

/* Арт растворяется в ночи, а не обрывается краем картинки: низ уходит в
   прозрачность маской, и под ним проступает тот же фон, что у всей витрины.
   Наложить сверху «цвет фона» нельзя — фон не ровный, и полоса легла бы
   заплатой. */
.app .hero-art{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%)}
/* Арт — во всю свою высоту. Шаблон держит полосу не выше 300 px, и в
   колонке монитора (430) корона над его головой уходила бы за верхний край.
   Высота — по доле арта (600/750), но не больше, чем нужно колонке. */
.app .hero-art{height:min(80vw, 344px)}
.app .banner-art{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%)}
/* МОМЕНТ БОССА на арте. Шаблон ставит .hx-ура на рамку арта на 2.4 с —
   после выдачи (при первом показе арта) и на семь нажатий по нему. Корона
   художника живёт в своей группе .hx-sway — той, где лежит её блик
   .hx-glint, — и в эту секунду выпрямляется и приподнимается над головой, а
   потом садится обратно набекрень. Остальные качания (огонь, пряди) не
   трогаем. */
.hx-ура .hx-sway:has(.hx-glint){animation:tm-арт-ровно 2.4s var(--ease-out) both}
@keyframes tm-арт-ровно{
  0%  {transform:rotate(0deg)}
  28% {transform:translate(0,-7px) rotate(-16deg) scale(1.07)}
  72% {transform:translate(0,-7px) rotate(-16deg) scale(1.07)}
  100%{transform:rotate(0deg)}}
/* Вордмарк — нашивка: буквы белые, как на кофте; тёмная тень держит
   плашку на светлом месте арта. Тень неподвижна — фильтр считается раз. */
.app .home-слово{color:var(--cream); filter:drop-shadow(0 3px 10px rgba(0,0,0,.7))}
.app .hero-kicker{color:var(--lamp); letter-spacing:.3em}
.app .hero-note{color:var(--sand)}

/* Салют — искры и короны: короны золотом, искры — огнём и белым, угольки —
   золотом. Знаки идут по кругу (♛ ✦ ✧ •), и первым в слое стоит зарево,
   поэтому номер ребёнка сдвинут на один. */
.proboy .zerno.глиф{text-shadow:0 0 10px color-mix(in oklab, currentColor 70%, transparent),
  0 2px 8px rgba(0,0,0,.5)}
.proboy .zerno.глиф:nth-child(4n+2){color:var(--lamp-hi); font-size:30px}
.proboy .zerno.глиф:nth-child(4n+3){color:var(--zhar); font-size:20px}
.proboy .zerno.глиф:nth-child(4n){color:var(--cream); font-size:18px}
.proboy .zerno.глиф:nth-child(4n+1){color:var(--lamp-hi); font-size:16px}
.proboy .zarevo{background:radial-gradient(circle,
  color-mix(in oklab, var(--cream) 90%, transparent),
  color-mix(in oklab, var(--lamp-hi) 55%, transparent) 30%,
  color-mix(in oklab, var(--zhar) 18%, transparent) 55%, transparent 72%)}

/* Карточка стримера — это он, нашивка со сведениями: строчка по кромке, по
   левому краю — клетка его рукава в два ряда, аватар — в раскалённом кольце,
   на кольце — его корона-бесёнок набекрень. Каналы — кнопки: объём и
   красный значок. */
.app .стример{position:relative; overflow:hidden; padding-left:26px; border-color:var(--tm-рамка);
  background:var(--tm-стекло); box-shadow:inset 0 1px 0 var(--tm-кромка), var(--tm-тепло), var(--sh-card)}
.app .стример::before{content:""; position:absolute; left:0; top:0; bottom:0; width:12px;
  pointer-events:none; background:var(--tm-стежок-в) 100% 0 / 1px 100% no-repeat, var(--tm-клетка-6)}
.app .стример-кто{position:relative}
.app .стример-кто::before{content:""; position:absolute; left:16px; top:-10px; z-index:1;
  width:24px; height:18px; pointer-events:none; background:var(--lamp);
  -webkit-mask:var(--tm-корона) center / contain no-repeat; mask:var(--tm-корона) center / contain no-repeat;
  transform:rotate(-18deg); transform-origin:50% 100%}
/* Аватара ещё нет — в кольце стоит знак магазина, то есть корона. Вторая
   корона над ней — лишняя: пока знак в кольце, своя корона не ставится. */
.app .стример-кто:has(> svg.стример-лицо)::before{content:none}
.app .стример-лицо{border:1.5px solid color-mix(in oklab, var(--lamp) 80%, var(--zhar));
  box-shadow:0 0 0 3px color-mix(in oklab, var(--lamp) 16%, transparent),
    0 0 18px -4px var(--zhar)}
.app .стример-имя b{font-size:var(--fs-base); letter-spacing:.03em}
.app .стример-имя span{color:var(--sand)}
.app .стример-ссылка{color:var(--cream); border-color:color-mix(in oklab, var(--lamp) 30%, transparent);
  border-radius:var(--r-in); background:var(--tm-стекло); box-shadow:var(--tm-объём)}
.app .стример-ссылка:active{box-shadow:var(--tm-накал)}
.app .стример-ссылка .ic{color:var(--lamp)}

/* Пасхалка — строкой в раскалённой рамке. */
.пасхалка{border-color:var(--tm-красный);
  box-shadow:0 0 0 1px color-mix(in oklab, var(--lamp) 30%, transparent),
    0 0 24px -6px var(--zhar), 0 14px 30px -16px #000}


/* ── 18. ТИХИЙ РЕЖИМ ─────────────────────────────────────────────────────
   Кто просил меньше движения — получает тот же смысл без него: корона сразу
   стоит как нарисована, золотой свет и огонь уже горят ровно, искр, блика и
   дыма нет, кромка карточки пришита сразу, корона на товаре уже сидит. */
@media (prefers-reduced-motion:reduce){
  .app .ore.incart::before,
  .app .ore.incart .pile::after,
  .app .dock:not(.away) .act::after,
  .app .лз.ждём,
  .app .digger.done .лз.готово,
  .app .digger.bad .лз.беда,
  .app .digger.done .digger-face::before,
  .app .digger.done .digger-face::after,
  .app .digger.done .лицо-заказа::before,
  .app .digger.done .лицо-заказа::after,
  .app .digger.bad .лицо-заказа::after,
  .app .digger:not(.done):not(.bad) .digger-bar i::after,
  .app .trail li.now .pip::after,
  .app .vip-now.новая-ступень .ic,
  .app .vip-now.новая-ступень::before,
  .app .vip-now.новая-ступень.lvl4::after,
  .вопрос-глубь .метка,
  .hx-ура .hx-sway:has(.hx-glint){animation:none}
  .app .gcard.big:first-child .gcard-txt::before,
  .app .gcard.big:first-child .gcard-txt::after,
  .app .лоб-уровни,
  .app .home-vows .лоб-уровни .ic{transition:none}
  .app .digger.done .digger-face::after,
  .app .vip-now.новая-ступень::before{opacity:.32}
  .app .digger.done .digger-face::before{opacity:.28}
  .app .trail li.now .pip::after{opacity:.7}
  .app .digger.done .лицо-заказа::before,
  .app .digger.done .лицо-заказа::after,
  .app .digger.bad .лицо-заказа::after{opacity:0}
  .вопрос-глубь .метка{transform:rotate(-10deg)}
}


/* ── 19. ТЕЛЕФОННАЯ КОЛОНКА НА МОНИТОРЕ ──────────────────────────────────
   Ночь с углями прибита к окну, и на мониторе угли тлели бы во всю ширину
   экрана, мимо колонки. В колонке ночь живёт в её краях, а по бокам — его
   огонь: жар поднимается снизу вдоль колонки, сверху стоит пепельный дым.
   Бока — это фон <html>; видно его потому, что в колонке шаблон делает
   <body> прозрачным (skin.css, «Телефонная колонка»). */
@media (min-width:600px){
  html[data-телефон] .app::before{left:var(--телефон-поле); right:var(--телефон-поле)}
}
@media (min-width:900px){
  /* Слои прибиты к окну (fixed), а не к длине страницы: иначе огонь горел
     бы в самом низу длинной главной, куда доходят не все. */
  html[data-телефон]{background:
    radial-gradient(22% 62% at calc(50% - 300px) 104%, color-mix(in oklab, var(--zhar) 30%, transparent),
      color-mix(in oklab, var(--lamp) 14%, transparent) 42%, transparent 72%),
    radial-gradient(22% 62% at calc(50% + 300px) 104%, color-mix(in oklab, var(--zhar) 30%, transparent),
      color-mix(in oklab, var(--lamp) 14%, transparent) 42%, transparent 72%),
    radial-gradient(50% 34% at 50% 104%, color-mix(in oklab, var(--lamp-lo) 30%, transparent), transparent 72%),
    radial-gradient(30% 28% at calc(50% - 360px) 4%, color-mix(in oklab, var(--zhar-lo) 14%, transparent), transparent 72%),
    radial-gradient(30% 28% at calc(50% + 360px) 8%, color-mix(in oklab, var(--zhar-lo) 12%, transparent), transparent 72%),
    linear-gradient(180deg, var(--rock), var(--deep) 70%);
    background-attachment:fixed}
}


/* ── 20. МЕСТО ПОД ВРЕМЕННЫЙ БЛОК ДЕМО ───────────────────────────────────
   Ниже ведущий держит временный блок показа (строка о кассе, документы) —
   он должен стоять последним, чтобы перебить всё выше. */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  ВРЕМЕННО — СНЯТЬ ПЕРЕД ЗАПУСКОМ. Тот же блок, что у ANTI-HERO и  ║
   ║  MAGISTOR: владелец просил убирать это на время показа макета     ║
   ║  блогеру. Здесь — с 24.09.2026. Вернуть потом.                    ║
   ╚═══════════════════════════════════════════════════════════════════╝
   Строка о поддельной кассе (#tail в мини-аппе, #sig span на сайте) —
   ВЕРНУТЬ вместе с настоящей кассой. Документы без реквизитов продавца —
   ВЕРНУТЬ обязательно до первой настоящей продажи. */
#tail{display:none !important}
#sig span{display:none !important}
footer.fine{display:none !important}