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

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

   Цвета. Голубой — действие (плашки, взятый номинал, счётчик, ссылки,
   полосы хода) и главное (его игра на главной). «Получилось» — мята,
   «ошибка» — киноварь печати: оба далеко от голубого по тону
   (theme/contrast.py). Голубой текстом — только на ночи; на бумаге
   голубой бывает заливкой и линией, а надписи там — тушью.

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

/* ── 0. ТУШЬ, БУМАГА, ТОН И ЛИНИИ ─────────────────────────────────────────
   Не новые цвета, а смеси палитры: магазин перекрашивается из brand.json
   целиком, и здесь нет ни одного цвета числом. */
:root{
  /* Линия кадра — бумага, чуть приглушённая: сетка из двадцати кадров на
     полке не должна слепить. Главное и выбранное — бумагой в полную силу. */
  --hb-линия:color-mix(in oklab, var(--cream) 74%, var(--deep));
  --hb-линия-тихо:color-mix(in oklab, var(--cream) 30%, var(--deep));
  --hb-линия-шёпот:color-mix(in oklab, var(--cream) 16%, var(--deep));
  /* Тон внутри кадра — серый растра, а не стекло: плоско, как печать. */
  --hb-кадр:var(--stone-2);
  /* Толстая чёрная рамка внутрь — от бумажной кромки к тону. */
  --hb-рамка:inset 0 0 0 3px var(--deep);
  /* Главный кадр — бумага. Тушь рамки не видна на ночи, поэтому снаружи
     её держит тонкая бумажная кромка: лист — рамка — лист, как на странице. */
  --hb-лист:var(--cream);
  --hb-лист-рамка:0 0 0 3px var(--deep), 0 0 0 4.5px var(--cream);
  /* Текст на бумаге: тушь и её серый. Голубой и мята на бумаге надписью
     не бывают — только их тёмные смеси (contrast.py считает). */
  --hb-на-листе:var(--deep);
  --hb-на-листе-тихо:color-mix(in oklab, var(--deep) 66%, var(--cream));
  --hb-синий-на-листе:color-mix(in oklab, var(--lamp) 58%, var(--deep));
  --hb-мята-на-листе:color-mix(in oklab, var(--ore) 44%, var(--deep));
  --hb-киноварь-на-листе:color-mix(in oklab, var(--rust) 66%, var(--deep));
  /* СКРИНТОН — точки 4 px. Светлый — на ночи и в тёмных кадрах, тёмный —
     на бумаге, голубой — у взятого. Гасится сверху градиентом цвета самого
     кадра: маска на двадцати кадрах стоила бы видеокарте дороже. */
  --hb-тон:radial-gradient(circle, color-mix(in oklab, var(--cream) 30%, transparent) 0 .85px, transparent 1.2px) 0 0 / 4px 4px;
  --hb-тон-густо:radial-gradient(circle, color-mix(in oklab, var(--cream) 30%, transparent) 0 1.05px, transparent 1.4px) 0 0 / 4px 4px;
  --hb-тон-синий:radial-gradient(circle, color-mix(in oklab, var(--lamp) 60%, transparent) 0 .9px, transparent 1.25px) 0 0 / 4px 4px;
  --hb-тон-тушь:radial-gradient(circle, color-mix(in oklab, var(--deep) 30%, transparent) 0 .85px, transparent 1.2px) 0 0 / 4px 4px;
  /* ЛИНИИ ДЕЙСТВИЯ — сходящиеся штрихи (фокус манги). Середина пустая:
     штрихи ведут к тому, что случилось, а не лежат на нём. */
  --hb-линии:repeating-conic-gradient(from 3deg, color-mix(in oklab, var(--cream) 70%, transparent) 0 1.1deg,
    transparent 1.1deg 4.2deg, color-mix(in oklab, var(--cream) 45%, transparent) 4.2deg 4.8deg,
    transparent 4.8deg 9deg);
  --hb-линии-синие:repeating-conic-gradient(from 3deg, var(--lamp) 0 1.3deg,
    transparent 1.3deg 4.4deg, color-mix(in oklab, var(--lamp) 70%, transparent) 4.4deg 5deg,
    transparent 5deg 9deg);
  --hb-линии-тушь:repeating-conic-gradient(from 3deg, var(--deep) 0 1.1deg,
    transparent 1.1deg 4.2deg, color-mix(in oklab, var(--deep) 70%, transparent) 4.2deg 4.8deg,
    transparent 4.8deg 9deg);
  /* ОБРАЗЦЫ ТОНА — пять квадратов, как лист образцов скринтона у
     мангаки: редкий растр, густой, штрих, сплошной — и голубой. Это знак
     ступеней: уровень — плотность тона. Рисунок — маской, цвет даёт место. */
  --hb-образцы:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 14'%3E%3Cdefs%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1.5' cy='1.5' r='.6'/%3E%3C/pattern%3E%3Cpattern id='b' width='2.2' height='2.2' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1.1' cy='1.1' r='.8'/%3E%3C/pattern%3E%3Cpattern id='c' width='2.4' height='2.4' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='1.05' height='2.4'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill-rule='evenodd' d='M1 1h12v12H1zM2.6 2.6v8.8h8.8V2.6z'/%3E%3Crect x='2.6' y='2.6' width='8.8' height='8.8' fill='url(%23a)'/%3E%3Cpath fill-rule='evenodd' d='M15 1h12v12H15zM16.6 2.6v8.8h8.8V2.6z'/%3E%3Crect x='16.6' y='2.6' width='8.8' height='8.8' fill='url(%23b)'/%3E%3Cpath fill-rule='evenodd' d='M29 1h12v12H29zM30.6 2.6v8.8h8.8V2.6z'/%3E%3Crect x='30.6' y='2.6' width='8.8' height='8.8' fill='url(%23c)'/%3E%3Cpath fill-rule='evenodd' d='M43 1h12v12H43zM44.6 2.6v8.8h8.8V2.6z'/%3E%3Crect x='44.6' y='2.6' width='8.8' height='8.8'/%3E%3Cpath fill-rule='evenodd' d='M57 1h12v12H57zM58.6 2.6v8.8h8.8V2.6z'/%3E%3Crect x='58.6' y='2.6' width='8.8' height='8.8'/%3E%3C/svg%3E");
  /* Скос плашки действия — как плашка на его баннере. */
  --hb-скос:9px;
  --hb-плашка:polygon(var(--hb-скос) 0, 100% 0, calc(100% - var(--hb-скос)) 100%, 0 100%);
  --hb-плашка-мал:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

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

/* Фокус — не контур: у кадров контур занят бумажной кромкой, и кольцо
   фокуса слилось бы с ней. Голубое кольцо тенью снаружи. */
.app .ore:focus-visible,
.app .gcard:focus-visible,
.app .lob:focus-visible,
.app .лоб-уровни:focus-visible,
.app .ord:focus-visible,
.app .tab:focus-visible{outline:none; box-shadow:0 0 0 3px var(--deep), 0 0 0 5px var(--lamp)}


/* ── 1. НОЧЬ — ТУШЬ, ПО КРАЯМ РАСТР ──────────────────────────────────────
   Один неподвижный слой под всей витриной: фиксированный слой рисуется раз
   и дальше только складывается видеокартой. Ровная тушь; по двум углам
   страницы — поле скринтона, гаснущее к середине (маской один раз на весь
   экран). Больше на фоне ничего нет: фон — бумага выпуска, а не картинка. */
.app::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(140% 90% at 50% 30%, transparent 55%, color-mix(in oklab, var(--deep) 80%, transparent) 100%),
    linear-gradient(180deg, var(--rock) 0%, var(--deep) 70%)}
.app::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--hb-тон); opacity:.55;
  -webkit-mask:radial-gradient(60% 38% at 100% 0%, #000, transparent 100%),
    radial-gradient(64% 34% at 0% 100%, #000, transparent 100%);
          mask:radial-gradient(60% 38% at 100% 0%, #000, transparent 100%),
    radial-gradient(64% 34% at 0% 100%, #000, transparent 100%)}

/* Пыль в свете лампы — мир шахты, а не его. */
.app .motes{display:none !important}

/* Полоса шапки и вкладок липнут к верху и несут свой фон — тушь страницы. */
.app .bar{background:linear-gradient(180deg, var(--rock) 72%, transparent)}
.app .tabs{background:linear-gradient(180deg, transparent 0,
  color-mix(in oklab, var(--rock) 92%, transparent) 10px,
  color-mix(in oklab, var(--rock) 92%, transparent) 62%, transparent)}


/* ── 2. ЗАГОЛОВКИ — ПОДПИСЬ-ПЛАШКА ────────────────────────────────────────
   Заголовок экрана — закадровый текст манги: светлый прямоугольник в
   толстой чёрной рамке, тушью, Unbounded заглавными. Это подпись выпуска
   на каждом экране. Подзаголовки — просто 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:800; letter-spacing:.03em; line-height:var(--lh-tight)}
.app .about-head h2,
.app .screen[data-screen="order"] .order-head h2,
.app .где b{width:fit-content; max-width:100%; padding:6px 11px 5px;
  color:var(--hb-на-листе); background:var(--hb-лист);
  box-shadow:inset 0 0 0 2px var(--deep), 0 0 0 1.5px var(--cream);
  text-wrap:balance}
.app .about-head h2{font-size:var(--fs-base); margin-bottom:8px}
.app .screen[data-screen="order"] .order-head h2{font-size:var(--fs-lg)}
.app .где{align-items:center; gap:10px; padding-top:16px}
.app .где b{font-size:var(--fs-base)}
.app .где span{color:var(--sand); font-weight:600}
.app .vip-h{font-size:var(--fs-sm); letter-spacing:.1em; color:var(--sand); margin-bottom:12px}
.app #digTitle{font-size:var(--fs-base); letter-spacing:.05em}
.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:.03em; text-wrap:balance}
.регионы-верх b{font-size:var(--fs-base); letter-spacing:.06em}
.app .about-head p,
.app .screen[data-screen="order"] .order-head p{color:var(--sand)}


/* ── 3. ШАПКА ПОЛКИ ──────────────────────────────────────────────────────
   Имя — вордмарк бумагой. «Все игры» и «Заказы» — дорога, а не действие:
   тёмная плашка в бумажной кромке, значок бумагой. Голубой на шапке был бы
   ярче цен и кнопки оплаты. */
.app .logo{color:var(--cream); font-family:var(--font-display); font-weight:800;
  font-size:var(--fs-cap); letter-spacing:.18em}
.app .logo svg:not(.слово){color:var(--cream)}
.app .logo .слово{color:var(--cream)}
.app .bar .pill.big,
.app .pill.ghost{color:var(--cream); border:2px solid var(--hb-линия); border-radius:var(--r-in);
  background:var(--deep); box-shadow:none}
.app .pill.ghost{color:var(--sand); border-color:var(--hb-линия-тихо)}
.app .bar .pill.big .ic,
.app .pill.ghost .ic{color:var(--cream)}
.app .bar .pill.big:active,
.app .pill.ghost:active{border-color:var(--lamp)}
.app .back{color:var(--sand); border:2px solid var(--hb-линия-тихо); border-radius:var(--r-in);
  background:var(--deep)}
.app .back .ic{color:var(--cream)}
.app .back:active{border-color:var(--lamp); background:var(--deep)}


/* ── 4. ВКЛАДКИ: выбранная — светлый кадр ────────────────────────────────
   Невыбранные — тёмные плашки в тихой кромке. Выбранная — лист бумаги в
   толстой рамке, надпись тушью: «этот кадр сейчас». Лист едет вместе с
   пилюлей шаблона. */
.app .tabs{padding-bottom:12px}
.app .tab,
.app .tab-pill{border-radius:var(--r-in)}
.app .tab-pill{background:var(--hb-лист);
  box-shadow:inset 0 0 0 2px var(--deep), 0 0 0 1.5px var(--cream)}
.app .tab.on{color:var(--hb-на-листе); font-weight:750}
.app .tab:not(.on){color:var(--sand); border:1.5px solid var(--hb-линия-тихо);
  background:var(--deep); box-shadow:none}
.app .tab:not(.on):active{border-color:var(--lamp)}
.app .tab .ic{color:currentColor}


/* ── 5. КАРТОЧКА НОМИНАЛА — КАДР ─────────────────────────────────────────
   В покое — кадр: бумажная кромка, толстая чёрная рамка, внутри тон, в
   правом нижнем углу — скринтон, как тень в кадре. Цена — крупно, бумагой.
   Взяли — кадр стал «твоим»: кромка голубая, скринтон в углу голубой, вокруг
   пачки на миг сходятся линии действия, «Выбрать» — голубая плашка со
   счётчиком. Погашенный номинал — кадр-воспоминание: сплошной растр. */
.app .ore{border:2px solid var(--hb-линия); background:
    linear-gradient(135deg, var(--hb-кадр) 52%, color-mix(in oklab, var(--hb-кадр) 0%, transparent) 92%),
    var(--hb-тон), var(--hb-кадр);
  box-shadow:var(--hb-рамка);
  transition:scale var(--t-press) var(--ease-out), border-color var(--t-hover) var(--ease-out)}
.app .ore:not(.spent):active{border-color:var(--lamp)}
.app .ore.incart{border-color:var(--lamp); background:
    linear-gradient(135deg, var(--hb-кадр) 46%, color-mix(in oklab, var(--hb-кадр) 0%, transparent) 90%),
    var(--hb-тон-синий), var(--hb-кадр);
  box-shadow:var(--hb-рамка), 0 0 0 1px color-mix(in oklab, var(--lamp) 40%, transparent)}
/* Растр погашенного — за пачкой, а не под буквами: точки под мелкой
   подписью съедали ей контраст. */
.app .ore.spent{border-color:var(--hb-линия-шёпот);
  background:linear-gradient(180deg, transparent 0 38%, color-mix(in oklab, var(--hb-кадр) 60%, var(--deep)) 62%),
    var(--hb-тон), color-mix(in oklab, var(--hb-кадр) 60%, var(--deep)); box-shadow:var(--hb-рамка)}
.app .ore.spent .line1 b,
.app .ore.spent .line1 span{color:var(--sand-dim)}
.app .ore .mark{z-index:2}

/* Линии действия вокруг пачки — на «Выбрать» и «+»: шаблон ставит на пачку
   .clink ровно в миг нажатия (при перерисовке полки его нет — праздник не
   повторяется сам). Штрихи сходятся к пачке и гаснут. */
.app .ore .pile{position:relative}
.app .ore .pile.clink::before{content:""; position:absolute; left:50%; top:50%; z-index:-1;
  width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%; pointer-events:none;
  background:var(--hb-линии-синие);
  -webkit-mask:radial-gradient(closest-side, transparent 34%, #000 44%, #000 70%, transparent 100%);
          mask:radial-gradient(closest-side, transparent 34%, #000 44%, #000 70%, transparent 100%);
  animation:hb-удар 520ms var(--ease-out) both}
@keyframes hb-удар{0%{transform:scale(.55) rotate(0deg); opacity:0} 25%{opacity:.9}
  100%{transform:scale(1.18) rotate(8deg); opacity:0}}

/* Номинал и цена. Цена — главное на карточке: Unbounded, бумагой. */
.app .line1 b{color:var(--cream); font-size:var(--fs-sm); font-weight:700}
.app .grid .ore .line1 b{white-space:normal; text-wrap:balance}
.app .line1 span{margin-top:3px; font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-base); letter-spacing:-.01em; color:var(--cream)}
.app .ore .сложение,
.app .ore .впервые{text-align:center}
.app .ore .впервые{color:var(--lamp)}

/* «Выбрать» — тёмная плашка в тихой кромке: зовёт нажать, но не спорит с
   ценой. Взятый — голубая плашка, счётчик тушью. */
.app .ore .take{border:1.5px solid var(--hb-линия-тихо); border-radius:var(--r-in);
  background:var(--deep); color:var(--cream); font-weight:700; box-shadow:none}
.app .ore:not(.spent):active .take{border-color:var(--lamp); background:var(--deep)}
.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) 70%, transparent)}
.app .ore.incart .take.picked i{background:color-mix(in oklab, var(--deep) 18%, transparent)}
.app .ore.spent .take{background:transparent; border-color:var(--hb-линия-шёпот); color:var(--sand-dim)}

/* Плашка лучшего номинала — голубая вспышка-крик манги: рваный край,
   надпись тушью. Единственный голубой на невзятой карточке. */
.app .ore .mark{padding:5px 9px 4px; border-radius:0; font-family:var(--font-display);
  font-weight:800; letter-spacing:.06em; color:var(--on-lamp); background:var(--lamp);
  box-shadow:none; top:3px; right:3px;
  clip-path:polygon(0% 18%, 9% 24%, 6% 0%, 20% 16%, 31% 2%, 39% 18%, 52% 0%, 60% 18%, 72% 3%,
    79% 19%, 92% 4%, 92% 26%, 100% 30%, 95% 48%, 100% 68%, 92% 74%, 95% 100%, 80% 84%, 70% 100%,
    61% 84%, 49% 100%, 40% 84%, 28% 99%, 20% 83%, 7% 97%, 8% 76%, 0% 72%, 5% 52%)}
.app .ore .gone{border-radius:0; background:var(--deep); color:var(--sand);
  box-shadow:inset 0 0 0 1.5px var(--hb-линия-тихо); top:3px; right:3px}

/* Зачёркнутая цена и выгода — тихо; выгода мятой. */
.app .ore .выгода s{color:var(--sand-dim)}

/* Своя сумма: тот же кадр; кнопка — голубым контуром. */
.app .своя{border:2px solid var(--hb-линия); background:var(--hb-кадр); box-shadow:var(--hb-рамка)}
.app .своя label{color:var(--cream); font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:var(--fs-cap)}
.app .своя input{border:1.5px solid var(--hb-линия-тихо); background:var(--deep); border-radius:var(--r-in)}
.app .своя input:focus{border-color:var(--lamp); box-shadow:none}
.app .своя .take{border:1.5px solid var(--lamp); color:var(--lamp); background:var(--deep);
  border-radius:var(--r-in); font-weight:700}
.app .своя .take:disabled{opacity:.45}

/* Раздел за входом через бота: тот же кадр. */
.app .замок{border:2px solid var(--hb-линия); background:var(--hb-кадр); box-shadow:var(--hb-рамка);
  backdrop-filter:none; -webkit-backdrop-filter:none}
.app .замок .ic{color:var(--cream)}

/* Кому уходит покупка — тёмная плашка с голубой кромкой: это часть покупки. */
.app .who-chip{border:1.5px solid var(--lamp); border-radius:var(--r-in); background:var(--deep); box-shadow:none}
.app .who-chip > svg{color:var(--lamp)}

/* «Вы вошли» (в телеграме, над уровнями и заказами) — кадр; значок
   мятой — это «получилось», кнопка — тёмная плашка в кромке. */
.app .ямоя{border:2px solid var(--hb-линия); border-radius:var(--r-card); background:var(--hb-кадр);
  box-shadow:var(--hb-рамка)}
.app .ямоя-кн{border:1.5px solid var(--hb-линия-тихо); border-radius:var(--r-in); background:var(--deep)}
.app .ямоя-кн:active{border-color:var(--lamp)}

/* Строка про регион и ссылка — голубым: это действие. */
.app .строка-регион{color:var(--sand)}


/* ── 6. ОБЕЩАНИЯ — СВЕДЕНИЯ, А НЕ КНОПКИ ─────────────────────────────────
   Обещания не нажимаются, и это видно: плоско, прямо на ночи — значок
   бумагой и две строки. Никакой плашки, рамки и тени. */
.app .promises > div,
.app .vows:not(.home-vows) > div{border-color:transparent; background:none; box-shadow:none}
.app .promises .ic,
.app .vows .ic{color:var(--cream)}
.app .vows:not(.home-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:not(.home-vows) > div .ic{grid-row:1 / span 2; width:22px; height:22px; margin:0}
.app .vows:not(.home-vows) > div b,
.app .vows:not(.home-vows) > div span{grid-column:2}
.app .home-vows > div{background:none; text-shadow:none}
.app .home-vows > div span,
.app .vows > div span{color:var(--sand)}
.app .row .more{color:var(--lamp); background:transparent; border:1.5px solid var(--lamp);
  border-radius:var(--r-in); font-weight:700}
.app .row h3 .ic{color:var(--cream)}


/* ── 7. ГЛАВНАЯ МАГАЗИНА ─────────────────────────────────────────────── */
.app .home-mark{color:var(--cream)}
/* Имя текстом — пока у художника нет вордмарка (с ним оно уходит к
   читалке экрана): Unbounded, бумагой, крупно — это имя выпуска. */
.app .home-brand{font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg);
  letter-spacing:.32em; color:var(--cream)}
.app .home-о{color:var(--sand)}
/* «ВСЕ ИГРЫ» под именем — вторая тяжёлая строка подряд, а подписывает она
   плитки, до которых ещё полэкрана. */
.app .home-head h2{display:none}

/* Уровни — КНОПКА-КАДР: бумажная кромка, толстая рамка, объём (тень тушью
   снизу), шеврон голубой — туда жмут. Справа — лестница: пять
   образцов тона — от редкого растра до сплошного и голубого: уровень
   здесь — плотность тона, как в лестнице на экране уровней. */
.app .лоб-уровни{padding-right:44px; border:2px solid var(--hb-линия); border-radius:var(--r-card);
  background:
    linear-gradient(90deg, var(--hb-кадр) 50%, color-mix(in oklab, var(--hb-кадр) 0%, transparent) 100%),
    var(--hb-тон), var(--hb-кадр);
  box-shadow:var(--hb-рамка), 0 5px 0 -1px var(--deep), 0 5px 0 1px var(--hb-линия-тихо);
  transition:scale var(--t-press) var(--ease-out), translate var(--t-press) var(--ease-out)}
.app .лоб-уровни:active{scale:1; translate:0 3px;
  box-shadow:var(--hb-рамка), 0 2px 0 -1px var(--deep), 0 2px 0 1px var(--hb-линия-тихо)}
.app .лоб-уровни .лоб-шеврон{right:16px; border-color:var(--lamp)}
.app .home-vows .лоб-уровни .ic{width:24px; height:24px; margin-bottom:6px; color:var(--cream)}
.app .лоб-уровни b{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:var(--fs-sm)}
.app .лоб-уровни > span:not(.лоб-шеврон):not(.menu-tag){color:var(--sand)}
.app .лоб-уровни::after{content:""; position:absolute; right:44px; bottom:14px;
  width:80px; height:16px; pointer-events:none;
  background:linear-gradient(90deg, var(--sand-dim) 0 20%, var(--sand) 20% 40%,
    color-mix(in oklab, var(--cream) 80%, var(--sand)) 40% 60%, var(--cream) 60% 80%, var(--lamp) 80%);
  -webkit-mask:var(--hb-образцы) center / contain no-repeat; mask:var(--hb-образцы) center / contain no-repeat}
.app .лоб-уровни .menu-tag{color:var(--on-lamp); background:var(--lamp); border-radius:var(--r-in); font-weight:800}

/* ПЛИТКИ ИГР — кадры страницы. Свет своей игры (по нему игру и узнают)
   остаётся — неярким пятном за предметом, в тоне кадра; в углу — скринтон. */
.app .gcard{border:2px solid var(--hb-линия); border-radius:var(--r-card);
  background:
    radial-gradient(70% 60% at 50% 30%, color-mix(in oklab, var(--g) 22%, transparent) 0%, transparent 74%),
    linear-gradient(150deg, var(--hb-кадр) 50%, color-mix(in oklab, var(--hb-кадр) 0%, transparent) 94%),
    var(--hb-тон), var(--hb-кадр);
  box-shadow:var(--hb-рамка)}
.app .gcard.big{background:
    radial-gradient(56% 86% at 82% 50%, color-mix(in oklab, var(--g) 24%, transparent) 0%, transparent 72%),
    linear-gradient(110deg, var(--hb-кадр) 44%, color-mix(in oklab, var(--hb-кадр) 0%, transparent) 96%),
    var(--hb-тон), var(--hb-кадр)}
.app .gcard:not(.soon):active,
.app .gcard.жмём{border-color:var(--lamp)}
.app .gcard.now{border-color:var(--cream)}
.app .gcard-txt b{font-family:var(--font-display); font-weight:800; letter-spacing:0;
  text-transform:uppercase}
/* Unbounded заглавными шире шаблонного набора: «BATTLEGROUNDS» на крупной
   плитке заезжало под монету, а «ARENA BREAKOUT: INFINITE» на малой в три
   строки поднималось под предмет. Крупной — кегль по ширине экрана, малой —
   место под предметом держит отступ сверху: плитки ряда растут вместе. */
.app .gcard.big .gcard-txt b{font-size:min(var(--fs-lg), 4.4vw); letter-spacing:.01em}
.app .gcard:not(.big) .gcard-txt b{font-size:var(--fs-sm)}
.app .gcard:not(.big){padding-top:82px}
.app .gcard-txt u{color:var(--sand)}

/* ЕГО ИГРА — первая крупная плитка (features.homeFeatured[0], PUBG:
   BATTLEGROUNDS). Главное на главной — голубым: голубая кромка, за
   предметом неподвижные линии действия, подпись валюты — голубой плашкой
   со скосом. Нажал — линии вспыхивают (пока грузится игра, шаблон держит
   на плитке .жмём). */
.app .gcard.big:first-child{border-color:var(--lamp); padding-bottom:16px;
  box-shadow:var(--hb-рамка), 0 0 0 1px color-mix(in oklab, var(--lamp) 45%, transparent)}
.app .gcard.big:first-child::before{content:""; position:absolute; right:-40px; top:50%; z-index:0;
  width:240px; height:240px; margin-top:-120px; border-radius:50%; pointer-events:none;
  background:var(--hb-линии-синие); opacity:.42;
  -webkit-mask:radial-gradient(closest-side, transparent 30%, #000 42%, #000 62%, transparent 100%);
          mask:radial-gradient(closest-side, transparent 30%, #000 42%, #000 62%, transparent 100%);
  transition:opacity 260ms var(--ease-out), transform 360ms var(--ease-out)}
.app .gcard.big:first-child:active::before,
.app .gcard.big:first-child.жмём::before{opacity:.9; transform:scale(1.08) rotate(6deg)}
.app .gcard.big:first-child .gcard-art{z-index:1}
.app .gcard.big:first-child .gcard-txt u{justify-self:start; margin-top:4px; padding:3px 12px 2px;
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-cap); letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-lamp); background:var(--lamp); clip-path:var(--hb-плашка-мал)}

/* ЛОББИ — две КНОПКИ: тёмный кадр в кромке, объём тушью, шеврон справа. */
.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:2px solid var(--hb-линия); border-radius:var(--r-card); background:var(--hb-кадр);
  box-shadow:var(--hb-рамка), 0 4px 0 -1px var(--deep), 0 4px 0 1px var(--hb-линия-тихо);
  transition:translate var(--t-press) var(--ease-out)}
.app .lob .ic{color:var(--cream); margin:0}
.app .lob:active{scale:1; translate:0 2px}
.app .lob::after{content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
  margin-top:-4px; pointer-events:none; border:solid var(--cream); border-width:0 2px 2px 0;
  transform:rotate(-45deg)}
.app .lob .menu-tag{color:var(--on-lamp); background:var(--lamp); border-radius:var(--r-in); font-weight:800}


/* ── 8. КОРЗИНА-ДОК ──────────────────────────────────────────────────────
   Полоса — нижняя кромка страницы: бумажная линия по верху, сумма бумагой
   Unbounded, одна кнопка — голубая плашка со скосом. Появляясь, плашка
   оставляет за собой линии скорости: один раз, как рывок в кадре. */
.app .dock{background:var(--deep); border-top:2px solid var(--hb-линия)}
.app .dock-in > .ic{color:var(--cream)}
.app .dock-sum b{color:var(--cream); font-family:var(--font-display)}
.app .dock-sum b span{color:inherit}
.app .dock .act{overflow:visible}
.app .dock .act::before{content:""; position:absolute; right:calc(100% + 4px); top:4px; bottom:4px;
  width:46px; pointer-events:none; transform-origin:100% 50%;
  background:repeating-linear-gradient(180deg, var(--lamp) 0 1.5px, transparent 1.5px 5px);
  -webkit-mask:linear-gradient(90deg, transparent, #000); mask:linear-gradient(90deg, transparent, #000);
  opacity:0}
.app .dock:not(.away) .act::before{animation:hb-рывок 700ms var(--ease-out) 180ms both}
@keyframes hb-рывок{0%{transform:scaleX(.2) translateX(30px); opacity:0} 30%{opacity:1}
  100%{transform:scaleX(1) translateX(0); opacity:0}}


/* ── 9. КНОПКИ — ГОЛУБАЯ ПЛАШКА СО СКОСОМ ─────────────────────────────────
   Главная кнопка — плашка, как на его баннере: ровный голубой, скос по
   бокам, надпись тушью заглавными Unbounded (7.1 на светлом краю, 6.5 на
   тёмном). Скос — не украшение ради украшения: так в манге рисуют плашку
   движения, и на ночи её видно раньше всего остального. */
.app .act,
.app .plita-copy,
.вопрос-да,
.накрыльцо-да{background:var(--metal); color:var(--on-lamp); border:0; border-radius:0;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; font-size:var(--fs-md);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-top) 70%, transparent),
    inset 0 -2px 0 color-mix(in oklab, var(--deep) 22%, transparent);
  clip-path:var(--hb-плашка)}
.app .act:disabled:not(.busy){opacity:.45}
/* «Код у вас» — мята, чернила на ней тёмные. */
.app .plita-copy.ok{background:var(--ore); color:var(--on-ore)}
.накрыльцо-да{clip-path:var(--hb-плашка-мал)}


/* ── 10. ЭКРАН ЗАКАЗА — СУММА НА БУМАГЕ ───────────────────────────────────
   Ночь ровная. Позиции — строки, отбитые тихой линией. Сумма к оплате —
   ГЛАВНЫЙ КАДР: светлый лист в толстой рамке, цифра тушью крупно. Это кадр,
   в котором всё решается, — и он на экране один. */
.app .screen[data-screen="order"]::before{background:linear-gradient(180deg, var(--rock) 0%, var(--deep) 100%)}
.app .screen[data-screen="order"] .back{background:var(--deep)}
.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:1.5px solid var(--hb-линия-шёпот)}
.app .screen[data-screen="order"] .stepper button{border:1.5px solid var(--hb-линия-тихо);
  border-radius:var(--r-in); background:var(--deep)}
.app .screen[data-screen="order"] .stepper button:active{border-color:var(--lamp)}
.app .screen[data-screen="order"] .panel{position:relative; border:0; border-radius:var(--r-card);
  background:var(--hb-лист); color:var(--hb-на-листе); box-shadow:var(--hb-лист-рамка), 0 16px 30px -18px #000}
.app .screen[data-screen="order"] .line dt{color:var(--hb-на-листе-тихо)}
.app .screen[data-screen="order"] .line:not(.hidden) + .line{border-top:1.5px solid color-mix(in oklab, var(--deep) 22%, transparent)}
.app .screen[data-screen="order"] .line.hidden + .line{background:none}
.app .screen[data-screen="order"] .line.pay dt{font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-sm); color:var(--hb-на-листе)}
.app .screen[data-screen="order"] .line.pay dd{font-family:var(--font-display); color:var(--hb-на-листе)}
.app .screen[data-screen="order"] .line.cut dt,
.app .screen[data-screen="order"] .line.cut dd{color:var(--hb-мята-на-листе)}
.app .screen[data-screen="order"] .обещание{border-top-color:color-mix(in oklab, var(--deep) 22%, transparent)}
.app .screen[data-screen="order"] .обещание .когда{color:var(--hb-на-листе-тихо)}
.app .screen[data-screen="order"] .обещание .когда .ic{color:var(--hb-на-листе)}
.app .screen[data-screen="order"] .обещание .кому{color:var(--hb-синий-на-листе)}
.app .screen[data-screen="order"] .game-name{font-family:var(--font-display); letter-spacing:.08em; color:var(--cream)}
.app .field label{color:var(--sand)}
.app .field label .чья{color:var(--lamp-hi)}
.app .screen[data-screen="order"] .field input{border:2px solid var(--hb-линия-тихо); border-radius:var(--r-in);
  background:var(--deep)}
.app .screen[data-screen="order"] .field input:focus{border-color:var(--lamp); box-shadow:none;
  background:var(--deep)}
.app .screen[data-screen="order"] .field input.bad,
.app .screen[data-screen="order"] .field input.wrong{border-color:var(--rust); box-shadow:none}
/* Оговорка по игре — киноварью печати, а не голубым: голубой здесь —
   кнопка, и предупреждение читалось бы ещё одним действием. */
.app .game-warn,
.app .screen[data-screen="order"] .game-warn{border:2px solid var(--hb-линия-тихо); border-radius:var(--r-card);
  background:var(--deep); box-shadow:inset 4px 0 0 var(--rust)}
.app .game-warn::before{color:var(--rust)}
.app #gameWarn b{color:var(--rust)}
.app .say.кому.нет{color:var(--rust)}
.app .howto,
.app .screen[data-screen="order"] .howto{border:1.5px solid var(--hb-линия-шёпот); border-radius:var(--r-card);
  background:var(--deep)}


/* ── 11. ХОД ЗАКАЗА — ГЛАВНЫЙ КАДР ───────────────────────────────────────
   Ход заказа — лист бумаги в толстой рамке, в нём лицо художника тушью.
   Ждём — лицо покачивается, по полосе хода бегут штрихи скорости. Готово —
   вокруг лица сходятся голубые линии действия и гаснут, полоса мятная.
   Не вышло — лицо съезжает вбок, полоса и заголовок — киноварью. */
.app .digger{position:relative; z-index:0; border:0; border-radius:var(--r-card);
  background:var(--hb-лист); color:var(--hb-на-листе);
  box-shadow:var(--hb-лист-рамка), 0 16px 30px -18px #000}
.app .digger b{color:var(--hb-на-листе)}
.app .digger > span{color:var(--hb-на-листе-тихо)}
.app .лз{color:var(--hb-на-листе); filter:none}
.app .digger.done .лз.готово{color:var(--hb-на-листе)}
.app .digger.bad .лз.беда{color:var(--hb-на-листе)}
/* Полоса хода — чёрная дорожка, голубая заливка; пока идёт — по заливке
   бегут штрихи (слой едет transform, заливку шаблон тянет шириной). */
.app .digger-bar{height:8px; border-radius:0; overflow:hidden; background:var(--deep);
  box-shadow:0 0 0 1.5px var(--deep)}
.app .digger-bar i{position:relative; overflow:hidden; border-radius:0; background:var(--lamp)}
.app .digger:not(.done):not(.bad) .digger-bar i::after{content:""; position:absolute; inset:0 -40px 0 0;
  pointer-events:none;
  background:repeating-linear-gradient(115deg, color-mix(in oklab, var(--deep) 30%, transparent) 0 3px, transparent 3px 10px);
  animation:hb-бег 700ms linear infinite}
@keyframes hb-бег{from{transform:translateX(-20px)} to{transform:translateX(0)}}
.app .digger.done .digger-bar i{background:var(--ore)}
.app .digger.bad .digger-bar i{background:repeating-linear-gradient(90deg, var(--rust) 0 7px, transparent 7px 11px)}
.app .digger.done #digTitle{color:var(--hb-на-листе)}
.app .digger.bad #digTitle{color:var(--hb-киноварь-на-листе)}

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

/* готово: голубые линии действия сходятся к лицу и гаснут — миг, потом покой
   (след под заголовком мешал бы читать) */
.app .digger.done .digger-face::before{content:""; position:absolute; left:50%; top:50%; z-index:-1;
  width:220px; height:220px; margin:-110px 0 0 -110px; border-radius:50%; pointer-events:none;
  background:var(--hb-линии-синие);
  -webkit-mask:radial-gradient(closest-side, transparent 28%, #000 40%, #000 64%, transparent 100%);
          mask:radial-gradient(closest-side, transparent 28%, #000 40%, #000 64%, transparent 100%);
  animation:hb-вспышка 1100ms var(--ease-out) 80ms both}
@keyframes hb-вспышка{0%{transform:scale(.45) rotate(-6deg); opacity:0} 22%{opacity:1}
  70%{opacity:.5} 100%{transform:scale(1.08) rotate(0deg); opacity:0}}
.app .digger.done .лз.готово{transform-origin:50% 60%; animation:hb-готово 760ms var(--ease-out) both}
@keyframes hb-готово{0%{transform:scale(.6); opacity:0} 55%{transform:scale(1.12); opacity:1}
  100%{transform:scale(1); opacity:1}}
/* блик на очках — голубая звёздочка манги, изредка */
.app .digger.done .лицо-заказа::after{content:""; position:absolute; left:calc(50% + 14px); top:14px;
  width:16px; height:16px; pointer-events:none; background:var(--lamp);
  clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation:hb-блик 3.6s var(--ease-out) 800ms infinite both}
@keyframes hb-блик{0%,62%,100%{transform:scale(0) rotate(0deg); opacity:0}
  70%{transform:scale(1.15) rotate(45deg); opacity:1} 84%{transform:scale(.2) rotate(90deg); opacity:0}}

/* не вышло: лицо съехало вбок, как очки у героя */
.app .digger.bad{box-shadow:0 0 0 3px var(--deep), 0 0 0 4.5px var(--rust), 0 16px 30px -18px #000}
.app .digger.bad .лз.беда{transform-origin:50% 85%; animation:hb-съехало 900ms var(--ease-out) both}
@keyframes hb-съехало{0%{transform:translate(-3px,-6px) rotate(-10deg); opacity:0} 25%{opacity:1}
  55%{transform:translate(2px,2px) rotate(4deg)} 100%{transform:translate(0,0) rotate(-3deg); opacity:1}}

/* Шаги — кадры по порядку. Номер — квадратный кадр: впереди — пустой в
   тихой кромке, идёт — голубая плашка, пройден — мята, сорвался — киноварь. */
.app .trail{border:2px solid var(--hb-линия); border-radius:var(--r-card); background:var(--hb-кадр);
  box-shadow:var(--hb-рамка)}
.app .trail li{position:relative; z-index:0}
.app .trail .pip{width:22px; height:22px; border-radius:0; font-family:var(--font-display); font-weight:800;
  font-style:normal;
  border:1.5px solid var(--hb-линия-тихо); background:var(--deep); color:var(--sand)}
.app .trail li.now .pip{border-color:var(--lamp); background:var(--lamp); color:var(--on-lamp)}
.app .trail li.now .pip::after{content:""; position:absolute; left:-3px; top:6px; width:28px; height:28px;
  z-index:-1; pointer-events:none; border:1.5px solid var(--lamp);
  animation:hb-кадр-пульс 1.6s var(--ease-out) infinite}
@keyframes hb-кадр-пульс{0%{transform:scale(.8); opacity:.9} 100%{transform:scale(1.35); opacity:0}}
.app .trail li.was .pip{border-color:var(--ore); background:var(--ore); color:var(--on-ore)}
.app .trail li.lost .pip{border-color:var(--rust); background:var(--rust); color:var(--on-rust)}

/* Плита выдачи — ГЛАВНЫЙ КАДР: лист, надпись и номинал тушью, код — в
   чёрной плашке бумажным шрифтом, «Скопировать» — голубая плашка. По листу
   один раз проходит голубая вспышка. */
.app .plita{border:0; border-radius:var(--r-card); background:var(--hb-лист); color:var(--hb-на-листе);
  box-shadow:var(--hb-лист-рамка), 0 20px 40px -26px #000}
.app .plita::after{background:linear-gradient(100deg, transparent,
  color-mix(in oklab, var(--lamp) 34%, transparent), transparent)}
.app .plita-top{font-family:var(--font-display); font-weight:800; letter-spacing:.22em; color:var(--hb-на-листе)}
.app .plita-uc{font-family:var(--font-display); background:none; -webkit-background-clip:border-box;
  background-clip:border-box; color:var(--hb-на-листе)}
.app .plita-id{color:var(--hb-на-листе-тихо)}
.app .plita code{border:0; border-radius:var(--r-in); background:var(--deep); color:var(--cream)}
.app .выдача{border-top-color:color-mix(in oklab, var(--deep) 22%, transparent)}
.app .выдача-имя{color:var(--hb-на-листе)}
.app .выдача-как{color:var(--hb-на-листе-тихо)}
.app .выдача-итог{color:var(--hb-на-листе)}
.app .выдача-сбой{color:var(--hb-на-листе); background:color-mix(in oklab, var(--deep) 8%, transparent);
  border-color:color-mix(in oklab, var(--deep) 26%, transparent)}
.app .ежели summary{color:var(--hb-на-листе-тихо);
  text-decoration-color:color-mix(in oklab, var(--deep) 40%, transparent)}
.app .plita .ежели summary:hover{color:var(--hb-на-листе)}
/* Сбой выдачи — печать киноварью: двойная рамка, как у оттиска. Ошибку
   видно не одним цветом, и голубой плашке «Повторить» под ней она не родня. */
.app .note.bad{position:relative; margin-top:12px; padding:13px 14px 13px 16px;
  border-radius:var(--r-card); font-size:var(--fs-md); line-height:var(--lh-text); color:var(--cream);
  border:2px solid var(--rust); background:var(--deep);
  box-shadow:inset 0 0 0 3px var(--deep), inset 0 0 0 4px color-mix(in oklab, var(--rust) 55%, transparent)}


/* ── 12. УРОВНИ — ОТ ПЕРВОЙ ГЛАВЫ ДО ОБЛОЖКИ ТОМА ─────────────────────────
   Карточка уровня — ГЛАВНЫЙ КАДР, лист бумаги: ступень художника тушью,
   имя крупно, скидка — голубой плашкой. У верхней ступени — обложка: по
   верху листа голубой корешок. МОМЕНТ — только при переходе на новую
   ступень (шаблон ставит .новая-ступень): за значком сходятся линии
   действия. Лестница — выпуски: слева у каждой строки корешок, и он
   густеет от редкого растра к сплошной бумаге и к голубой обложке. */
.app .vip-now{position:relative; z-index:0; overflow:hidden; border:0; border-radius:var(--r-card);
  background:var(--hb-лист); color:var(--hb-на-листе);
  box-shadow:var(--hb-лист-рамка), 0 16px 30px -18px #000}
.app .vip-now.lvl4{background:linear-gradient(180deg, var(--lamp) 0 8px, transparent 8px), var(--hb-лист)}
.app .vip-now .ic{width:46px; height:46px; color:var(--hb-на-листе); filter:none; transform-origin:50% 80%}
.app .vip-now b{color:var(--hb-на-листе); font-size:var(--fs-xl)}
.app .vip-now > span,
.app .vip-left{color:var(--hb-на-листе-тихо)}
.app .vip-now em{color:var(--on-lamp); background:var(--lamp); border-radius:0; clip-path:var(--hb-плашка-мал);
  padding:5px 14px; font-family:var(--font-display); font-weight:800; letter-spacing:.02em; box-shadow:none}
.app .vip-bar{height:8px; border-radius:0; background:var(--deep); box-shadow:none}
.app .vip-bar i{border-radius:0; background:var(--lamp); box-shadow:none}
.app .vip-now.empty-id{background:var(--hb-кадр); color:var(--cream);
  box-shadow:0 0 0 2px var(--hb-линия), var(--hb-рамка)}
.app .vip-now.empty-id .ic,
.app .vip-now.empty-id b{color:var(--cream)}
.app .vip-now.empty-id > span{color:var(--sand)}
/* Новая ступень: значок встаёт, за ним сходятся линии действия — один раз. */
.app .vip-now.новая-ступень .ic{animation:hb-готово 760ms var(--ease-out) 160ms both}
.app .vip-now.новая-ступень::before{content:""; position:absolute; left:-58px; top:-50px;
  width:190px; height:190px; z-index:-1; border-radius:50%; pointer-events:none;
  background:var(--hb-линии-синие);
  -webkit-mask:radial-gradient(closest-side, transparent 26%, #000 38%, #000 62%, transparent 100%);
          mask:radial-gradient(closest-side, transparent 26%, #000 38%, #000 62%, transparent 100%);
  animation:hb-вспышка 1100ms var(--ease-out) 160ms both}
.app .vip-sheet,
.app .bindbox{border:2px solid var(--hb-линия); border-radius:var(--r-card); background:var(--hb-кадр);
  box-shadow:var(--hb-рамка)}
.app .vip-p{color:var(--sand)}
/* Ступени не нажимаются: плоские строки, отбитые тихой линией. */
.app .vip-table{gap:0}
.app .vip-row{position:relative; overflow:hidden; padding-left:24px; border:0; border-radius:0;
  background:none; box-shadow:none}
.app .vip-row + .vip-row{border-top:1.5px solid var(--hb-линия-шёпот)}
.app .vip-row::before{content:""; position:absolute; left:2px; top:12px; bottom:12px; width:10px;
  pointer-events:none; box-shadow:0 0 0 1.5px var(--hb-линия-тихо)}
.app .vip-table .vip-row:nth-child(1)::before{background:var(--hb-тон)}
.app .vip-table .vip-row:nth-child(2)::before{background:var(--hb-тон-густо)}
.app .vip-table .vip-row:nth-child(3)::before{background:repeating-linear-gradient(135deg,
  color-mix(in oklab, var(--cream) 55%, transparent) 0 1.5px, transparent 1.5px 4px)}
.app .vip-table .vip-row:nth-child(4)::before{background:var(--cream)}
.app .vip-table .vip-row:nth-child(5)::before{background:var(--lamp); box-shadow:0 0 0 1.5px var(--lamp)}
.app .vip-row span{color:var(--cream); font-family:var(--font-display); font-weight:700}
.app .vip-row u{white-space:nowrap; color:var(--sand)}
.app .vip-row em{color:var(--sand)}
/* Своя ступень — кадр в бумажной кромке: «вы здесь». */
.app .vip-row.on{border-radius:var(--r-card); background:var(--deep);
  box-shadow:inset 0 0 0 2px var(--cream)}
.app .vip-row.on + .vip-row{border-top-color:transparent}
.app .vip-row.on b::after{padding-left:34px; color:var(--lamp); font-weight:700}
.app .vip-table .vip-row:last-child b{font-family:var(--font-display); letter-spacing:.02em; white-space:nowrap}
.app .vip-row b > svg.ic{width:24px !important; height:24px !important; color:var(--cream) !important;
  vertical-align:-7px !important; margin-right:10px !important}
.app .vip-table .vip-row:last-child b > svg.ic{color:var(--lamp) !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:0; color:var(--hb-на-листе); background:var(--hb-лист);
  font-family:var(--font-display); font-weight:800;
  box-shadow:inset 0 0 0 2px var(--deep), 0 0 0 1.5px var(--cream)}
.app .step-n{width:30px; height:30px; font-size:var(--fs-md)}
.app .steps p{color:var(--sand)}
.app .asks details{border:2px solid var(--hb-линия-тихо); border-radius:var(--r-card); background:var(--hb-кадр)}
.app .asks details[open]{border-color:var(--hb-линия)}
.app .asks details[open] summary{color:var(--cream)}
.app .asks details[open] summary::after{border-color:var(--lamp)}
.app .asks p{color:var(--sand)}


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


/* ── 15. ВЫБОР РЕГИОНА И ВОПРОСЫ ─────────────────────────────────────────
   Экраны поверх всего — та же тушь. Выбранный регион — светлый кадр.
   Над вопросом — облачко мысли манги: бумажное, покачивается, думает
   вместе с покупателем; к нему сходятся неподвижные линии. */
.регионы{background:var(--deep)}
.регионы-верх{border-bottom:2px solid var(--hb-линия-тихо)}
.регион{border:2px solid var(--hb-линия-тихо); border-radius:var(--r-card); background:var(--stone);
  color:var(--sand)}
.регион b{color:var(--cream)}
.регион.on{border-color:var(--cream); background:var(--hb-лист); color:var(--hb-на-листе);
  box-shadow:inset 0 0 0 2px var(--deep)}
.регион.on b{color:var(--hb-на-листе)}
.регион.on u{color:var(--hb-на-листе-тихо)}
.регион:not(.on):active{border-color:var(--lamp)}
.регионы .назад{color:var(--cream); border:2px solid var(--hb-линия-тихо); border-radius:var(--r-in);
  background:var(--deep)}
.регионы-поиск input{border:2px solid var(--hb-линия-тихо); border-radius:var(--r-in);
  background:var(--deep); color:var(--cream)}
.регионы-поиск input:focus{outline:none; border-color:var(--lamp)}

.вопрос{background:var(--deep)}
.вопрос-глубь .шар{top:-30%; width:130vw;
  background:var(--hb-линии); opacity:.16;
  -webkit-mask:radial-gradient(closest-side, transparent 18%, #000 30%, #000 60%, transparent 100%);
          mask:radial-gradient(closest-side, transparent 18%, #000 30%, #000 60%, transparent 100%)}
.вопрос-глубь .метка{width:56px; height:44px; border-radius:0; rotate:0deg; opacity:1;
  translate:-50% 0; background:var(--cream);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 44'%3E%3Cpath d='M12 20c-4.4-1-6.7-5.6-4.2-9.3 1.8-2.7 5.4-3.5 8.2-2.2C17.6 3.4 23.5.6 29 2.4c3 1 5.3 3.3 6.2 6.2 3.9-2.3 9.2-1 11.4 3 1.4 2.4 1.3 5.3 0 7.6 3.6 1.7 5 6.1 3 9.6-1.8 3-5.6 4.2-8.8 2.9-1.6 4-6.2 6-10.3 4.6-2.2-.8-3.9-2.4-4.6-4.5-3.8 2.5-9 1.4-11.4-2.5-1-1.6-1.4-3.5-1.1-5.3C11 23.6 11.3 21.7 12 20Z'/%3E%3Ccircle cx='9.5' cy='36.5' r='3.4'/%3E%3Ccircle cx='3.8' cy='41.4' r='2'/%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 56 44'%3E%3Cpath d='M12 20c-4.4-1-6.7-5.6-4.2-9.3 1.8-2.7 5.4-3.5 8.2-2.2C17.6 3.4 23.5.6 29 2.4c3 1 5.3 3.3 6.2 6.2 3.9-2.3 9.2-1 11.4 3 1.4 2.4 1.3 5.3 0 7.6 3.6 1.7 5 6.1 3 9.6-1.8 3-5.6 4.2-8.8 2.9-1.6 4-6.2 6-10.3 4.6-2.2-.8-3.9-2.4-4.6-4.5-3.8 2.5-9 1.4-11.4-2.5-1-1.6-1.4-3.5-1.1-5.3C11 23.6 11.3 21.7 12 20Z'/%3E%3Ccircle cx='9.5' cy='36.5' r='3.4'/%3E%3Ccircle cx='3.8' cy='41.4' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin:20% 100%; animation:hb-облачко 3.4s var(--ease-in-out) infinite}
@keyframes hb-облачко{0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-4px) rotate(2deg)}}
.вопрос-да{margin-top:12px}
.вопрос-нет{background:var(--deep); color:var(--cream); border:2px solid var(--hb-линия-тихо);
  border-radius:var(--r-in)}
.вопрос-нет:active{border-color:var(--lamp)}
.вопрос-тело p{color:var(--sand)}
.шаги-список li span{width:28px; flex-basis:28px}
.шаги-список input{border:2px solid var(--hb-линия-тихо); border-radius:var(--r-in); background:var(--deep)}
.важно-шапка{color:var(--rust)}


/* ── 16. ЗАГРУЗКА И «НА РАБОЧИЙ СТОЛ» ────────────────────────────────── */
/* Заставка — обложка выпуска: к знаку сходятся линии действия (неподвижно,
   знак на заставке и так дышит), по краю — поле скринтона. */
#грузим::before{content:""; position:absolute; left:50%; top:50%; width:620px; height:620px;
  margin:-310px 0 0 -310px; z-index:-1; border-radius:50%; pointer-events:none; opacity:.22;
  background:var(--hb-линии);
  -webkit-mask:radial-gradient(closest-side, transparent 16%, #000 30%, #000 58%, transparent 100%);
          mask:radial-gradient(closest-side, transparent 16%, #000 30%, #000 58%, transparent 100%)}
#грузим > div > svg:first-child{color:var(--cream)}
#грузим .грузим-слово,
#грузим b[data-brand-title]{color:var(--cream)}
/* Ушедшая заставка прозрачна, но не снята, и её дыхание, полоса и фразы
   крутились бы до конца сеанса. */
#грузим.ушёл *{animation:none !important}
.накрыльцо{border:2px solid var(--hb-линия); border-radius:var(--r-card); background:var(--stone);
  box-shadow:var(--hb-рамка), var(--sh-lift); backdrop-filter:none}
.накрыльцо-знак{color:var(--cream)}
.накрыльцо-нет{border-radius:var(--r-in); background:var(--deep); color:var(--sand);
  box-shadow:inset 0 0 0 1.5px var(--hb-линия-тихо)}


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

/* Арт главной — первый кадр выпуска, «на вылет»: во всю ширину экрана, без
   рамки сверху и по бокам — кадр уходит за край страницы. Снизу — толстая
   чёрная рамка и бумажная кромка, край наискось, как у кадра действия.
   Художник рисует тушью по бумаге, и кадр светлый: имя встаёт ПОД кадром, а
   не на него (шаблон заводит его на низ арта) — бумажное имя на бумаге
   пропало бы. Рамка — слоями поверх арта, срез — clip-path: ничего не
   движется и не перерисовывается. */
.app .hero-art:not(:empty){--hb-срез:18px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--hb-срез)), 0 100%)}
.app .hero-art:not(:empty)::before,
.app .hero-art:not(:empty)::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none}
.app .hero-art:not(:empty)::before{background:var(--deep);
  clip-path:polygon(0 calc(100% - 8px), 100% calc(100% - var(--hb-срез) - 8px),
    100% calc(100% - var(--hb-срез) - 2px), 0 calc(100% - 2px))}
.app .hero-art:not(:empty)::after{background:var(--cream);
  clip-path:polygon(0 calc(100% - 2.5px), 100% calc(100% - var(--hb-срез) - 2.5px),
    100% calc(100% - var(--hb-срез)), 0 100%)}
.app .hero-art:not(:empty) + .home-head{margin-top:12px}
/* Арт — во всю свою высоту (доля 750×600). Шаблон держит его не выше 300 px,
   и в колонке монитора (430) художнику срезало бы макушку героя. */
.app .hero-art{height:min(80vw, 344px)}
/* Арт над полкой — узкий кадр «на вылет» под шапкой: сверху и снизу бумажная
   кромка и толстая рамка; край ровный — полоса узкая, скос съел бы ей лицо. */
.app .banner-art:not(:empty)::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, var(--cream) 0 2px, var(--deep) 2px 7px, transparent 7px,
    transparent calc(100% - 7px), var(--deep) calc(100% - 7px) calc(100% - 2px), var(--cream) calc(100% - 2px))}

/* Вордмарк — бумагой, как заголовок на обложке. */
.app .home-слово{color:var(--cream)}
.app .hero-kicker{color:var(--lamp); letter-spacing:.3em}
.app .hero-note{color:var(--sand)}

/* Салют — манга-вспышка: звёздочки бумагой и голубым, голубые штрихи,
   точки. Знаки идут по кругу (✦ ✧ / •), первым в слое стоит зарево,
   поэтому номер ребёнка сдвинут на один. Штрих — не буква, а черта: знак
   прячем, рисуем голубую линию; кувырок по кругу штриху не нужен — он
   летит ребром вперёд, как линия скорости. */
.proboy .zarevo{background:radial-gradient(circle,
  color-mix(in oklab, var(--cream) 90%, transparent),
  color-mix(in oklab, var(--lamp) 45%, transparent) 30%,
  color-mix(in oklab, var(--lamp) 12%, transparent) 55%, transparent 72%)}
/* Звёздочки — бумага в обводке тушью, как в манге: вылетают из-за светлого
   листа на ночь, и видны на обоих. */
.proboy .zerno.глиф{text-shadow:none; -webkit-text-stroke:1.6px var(--deep); paint-order:stroke fill}
.proboy .zerno.глиф:nth-child(4n+2){color:var(--cream); font-size:30px}
.proboy .zerno.глиф:nth-child(4n+3){color:var(--lamp); font-size:24px}
.proboy .zerno.глиф:nth-child(4n){width:4px; height:24px; margin:-12px 0 0 -2px; font-size:0;
  color:transparent; background:var(--lamp); animation-name:vylet, kuvyrk}
.proboy .zerno.глиф:nth-child(4n+1){color:var(--cream); font-size:18px}

/* Карточка стримера — страничка автора в конце тома: кадр с толстой
   рамкой, по верху — полоса скринтона; аватар — в круглой бумажной рамке с
   голубой кромкой, как голубая обводка героя на его баннере. Каналы —
   кнопки: тёмные плашки в кромке, значок бумагой. */
.app .стример{position:relative; overflow:hidden; padding-top:20px; border:2px solid var(--hb-линия);
  border-radius:var(--r-card); background:var(--hb-кадр); box-shadow:var(--hb-рамка)}
.app .стример::before{content:""; position:absolute; left:3px; right:3px; top:3px; height:10px;
  pointer-events:none; background:var(--hb-тон-густо); opacity:.9}
.app .стример-лицо{border:2px solid var(--cream); box-shadow:0 0 0 2px var(--deep), 0 0 0 3.5px var(--lamp)}
.app svg.стример-лицо{color:var(--cream); background:var(--deep)}
.app .стример-имя b{font-size:var(--fs-base); letter-spacing:.04em}
.app .стример-имя span{color:var(--sand)}
.app .стример-ссылка{color:var(--cream); border:1.5px solid var(--hb-линия-тихо); border-radius:var(--r-in);
  background:var(--deep)}
.app .стример-ссылка:active{border-color:var(--lamp)}
.app .стример-ссылка .ic{color:var(--cream)}

/* Пасхалка — облачко реплики манги: бумага, тушь, хвостик вниз. */
.пасхалка{border:0; border-radius:18px; background:var(--hb-лист); color:var(--hb-на-листе);
  font-family:var(--font-display); font-weight:700;
  box-shadow:0 0 0 2px var(--deep), 0 0 0 3.5px var(--cream), 0 14px 30px -16px #000;
  overflow:visible}
.пасхалка::after{content:""; position:absolute; left:50%; bottom:-10px; width:18px; height:12px;
  margin-left:-4px; background:var(--hb-лист);
  clip-path:polygon(0 0, 100% 0, 18% 100%)}


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


/* ── 19. ТЕЛЕФОННАЯ КОЛОНКА НА МОНИТОРЕ ──────────────────────────────────
   Колонка — кадр на странице выпуска: бумажная кромка и толстая рамка.
   По бокам — тушь, к колонке сходятся неподвижные линии действия, по углам
   — поле скринтона. Бока — это фон <html> (в колонке шаблон делает <body>
   прозрачным). */
@media (min-width:600px){
  html[data-телефон] .app::before,
  html[data-телефон] .app::after{left:var(--телефон-поле); right:var(--телефон-поле)}
  html[data-телефон] .app{box-shadow:0 0 0 2px var(--hb-линия), 0 0 0 8px var(--deep),
    0 0 0 9.5px var(--hb-линия-тихо), 0 0 120px -20px #000}
}
@media (min-width:900px){
  html[data-телефон]{background:
    radial-gradient(34% 70% at 50% 50%, var(--deep) 30%, transparent 100%),
    repeating-conic-gradient(from 1deg at 50% 50%, color-mix(in oklab, var(--cream) 7%, transparent) 0 .6deg,
      transparent .6deg 3.4deg, color-mix(in oklab, var(--cream) 4%, transparent) 3.4deg 3.8deg, transparent 3.8deg 6deg),
    var(--deep);
    background-attachment:fixed}
}


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


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