/* ═══ GENTLEMAN — СЛОЙ ТЕМЫ поверх облика zaboy ══════════════════════════ Мир магазина — арена, где он только что выиграл: фиолетовая ночь, два прожектора крест-накрест (розовый слева, голубой справа), жёлтый неон вывески и оранжевый — цвет действия. Покупатель здесь — MVP раунда. Приправа из Standoff 2 — язык тактического HUD, без чужих знаков: • РЕТИКЛЬ — четыре уголка рамки прицела — значит «цель»: карточка номинала, выбранная вкладка, выбранный регион, крупная плитка игры, текущая ступень, сумма к оплате, ход заказа и плита с кодом. Взял номинал — рамка «захватывает» его и загорается жёлтым; • УГОЛОК — один уголок слева сверху — значит «сводка»: обещания, шаги, кнопки лобби, листы правил. Так цель и справка не путаются с одного взгляда; • СЕТКА — еле видная сетка с перекрестиями. Проявляется она там, где по ней идёт свет прожектора: HUD виден в луче, а в темноте почти пропадает; • СЧЁТ РАУНДОВ — полосы хода и уровня разбиты на деления; • ЖЕТОН — номера шагов и хода заказа в восьмигранном жетоне табло. Цвета: оранжевый — только там, где действуют (кнопки, выбранное); жёлтый неон — цены и «захват»; розовый и голубой — ТОЛЬКО свет, ни одной кнопки. «Получилось» — мята, «ошибка» — красный: оба далеко от оранжевого по тону (contrast.py). Правила файла: • Всё заперто на корни витрины — .app, .регионы, .вопрос, .накрыльцо, #грузим, .proboy (салют) и .пасхалка. Этот файл сервер подключает и к пульту, а у пульта свои .say, .more, .ghost — голый селектор перекрасил бы чужой экран. • Цвет — только токены палитры и смеси из них. Чёрный и белый — для теней и бликов, как в шаблоне. • Свои переменные — с приставкой --gm-, свои кадры — с приставкой gm-: короткое общее имя однажды совпало с переменной шаблона, и все плитки залило цветом текста. Имена кадров общие на всю страницу, чужие кадры совпавшее имя подменило бы молча. • В кадрах — только transform / translate / scale / rotate / opacity. Бесконечное движение живёт ТОЛЬКО внутри экрана: скрытый экран — display:none, и там не крутится ничего. Фон неподвижен. • Цена и количество — главное на карточке: их делаем крупнее и ярче. */ /* ── 0. ПРОИЗВОДНЫЕ ТОНА И РЕТИКЛЬ ─────────────────────────────────────── Не новые цвета, а смеси палитры: магазин перекрашивается из brand.json целиком, и здесь нет ни одного цвета числом. */ :root{ --gm-рамка:color-mix(in oklab, var(--sand) 15%, transparent); --gm-рамка-ярко:color-mix(in oklab, var(--sand) 30%, transparent); --gm-кромка:color-mix(in oklab, var(--cream) 13%, transparent); /* Фиолетовое стекло: почти непрозрачное, чтобы свет прожекторов жил в зазорах, а не под ценой; сверху светлее — свет арены падает сверху. */ --gm-стекло: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%); --gm-жар:color-mix(in oklab, var(--lamp) 68%, transparent); --gm-жар-тихо:color-mix(in oklab, var(--lamp) 30%, transparent); --gm-выбрано:color-mix(in oklab, var(--lamp) 16%, var(--rock)); --gm-неон:color-mix(in oklab, var(--lamp-hi) 60%, transparent); /* Свечение оранжевой кнопки: тонкая кромка и мягкий ореол под ней. */ --gm-ореол:0 0 0 1px color-mix(in oklab, var(--lamp) 55%, transparent), 0 10px 22px -12px var(--lamp), 0 0 24px -14px var(--lamp-hi); /* Ретикль: цвет, длина штриха и толщина. Цвет меняют хозяева (карточка в корзине, выбранная вкладка) — сам рисунок один на всех, ниже. */ --gm-ret:color-mix(in oklab, var(--sand) 42%, transparent); --gm-ret-l:9px; --gm-ret-w:1.5px; } /* Углы тактические, а не окатанные: карточки и кнопки острее, чем в шаблоне. Шкала скруглений шаблона объявлена в его :root — перебиваем её только внутри витрины, пульт живёт со своей. */ .app, .регионы, .вопрос, .накрыльцо, .пасхалка{--r-card:8px; --r-in:6px} /* РЕТИКЛЬ — четыре уголка рамки прицела. Один рисунок на все места: восемь штрихов градиентами, без картинок. Цвет берётся у хозяина (--gm-ret), поэтому «захват» — это смена одной переменной. */ .app .ore::after, .app .tab-pill::before, .app .gcard.big::after, .app .digger::after, .app .plita::before, .app .vip-now::after, .app .vip-row.on::after, .app .стример-кто::before, .app .screen[data-screen="order"] .panel::after, .регион.on::after{ content:""; position:absolute; pointer-events:none; background: linear-gradient(var(--gm-ret), var(--gm-ret)) 0 0 / var(--gm-ret-l) var(--gm-ret-w) no-repeat, linear-gradient(var(--gm-ret), var(--gm-ret)) 0 0 / var(--gm-ret-w) var(--gm-ret-l) no-repeat, linear-gradient(var(--gm-ret), var(--gm-ret)) 100% 0 / var(--gm-ret-l) var(--gm-ret-w) no-repeat, linear-gradient(var(--gm-ret), var(--gm-ret)) 100% 0 / var(--gm-ret-w) var(--gm-ret-l) no-repeat, linear-gradient(var(--gm-ret), var(--gm-ret)) 0 100% / var(--gm-ret-l) var(--gm-ret-w) no-repeat, linear-gradient(var(--gm-ret), var(--gm-ret)) 0 100% / var(--gm-ret-w) var(--gm-ret-l) no-repeat, linear-gradient(var(--gm-ret), var(--gm-ret)) 100% 100% / var(--gm-ret-l) var(--gm-ret-w) no-repeat, linear-gradient(var(--gm-ret), var(--gm-ret)) 100% 100% / var(--gm-ret-w) var(--gm-ret-l) no-repeat} /* УГОЛОК — сводка, а не цель: один уголок слева сверху. */ .app .promises > div::before, .app .home-vows > div::before, .app .vows > div::before, .app .steps li::before, .app .lob::before, .app .bindbox::before, .app .vip-sheet::before{ content:""; position:absolute; left:6px; top:6px; width:8px; height:8px; pointer-events:none; border-left:1.5px solid var(--gm-жар); border-top:1.5px solid var(--gm-жар)} .app .promises > div, .app .home-vows > div, .app .vows > div, .app .bindbox, .app .vip-sheet{position:relative} /* ── 1. НОЧЬ АРЕНЫ ─────────────────────────────────────────────────────── Два неподвижных слоя под всей витриной. Фиксированный слой рисуется один раз и дальше только складывается видеокартой — прокрутка его не трогает. Нижний — воздух арены: ночь светлее сверху, где висит свет, и темнее к полу; из верхних углов крест-накрест идут два луча — розовый слева, голубой справа, — у источника горит засветка; внизу — дымка над сценой. Лучи — конические градиенты от точки над краем экрана; к низу их гасит общая виньетка сверху стопки, как гаснет настоящий луч в дыму. Верхний — сетка HUD. Маска вырезает из слоя сетку с перекрестиями, а заливка слоя — те же лучи, только ярче: сетка проявляется там, где по ней идёт свет, и почти пропадает в темноте. Маске нужна только прозрачность, поэтому внутри рисунка чёрный, а цвет даёт заливка слоя токенами. */ .app::before, .app::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none} .app::before{ background: /* виньетка: гасит лучи к полу и по краям */ radial-gradient(150% 105% at 50% -8%, transparent 40%, color-mix(in oklab, var(--deep) 78%, transparent) 100%), /* засветка у источников */ radial-gradient(46% 20% at 2% -3%, color-mix(in oklab, var(--zhar) 20%, transparent) 0%, transparent 72%), radial-gradient(46% 20% at 98% -3%, color-mix(in oklab, var(--zhar-lo) 16%, transparent) 0%, transparent 72%), /* розовый луч: узкое ядро и широкий ореол */ conic-gradient(from 143deg at 3% -5%, transparent 0deg, color-mix(in oklab, var(--zhar) 13%, transparent) 5deg, color-mix(in oklab, var(--zhar) 13%, transparent) 7deg, transparent 12deg), conic-gradient(from 136deg at 3% -5%, transparent 0deg, color-mix(in oklab, var(--zhar) 6%, transparent) 10deg, color-mix(in oklab, var(--zhar) 6%, transparent) 16deg, transparent 26deg), /* голубой луч */ conic-gradient(from 205deg at 97% -5%, transparent 0deg, color-mix(in oklab, var(--zhar-lo) 11%, transparent) 5deg, color-mix(in oklab, var(--zhar-lo) 11%, transparent) 7deg, transparent 12deg), conic-gradient(from 198deg at 97% -5%, transparent 0deg, color-mix(in oklab, var(--zhar-lo) 5%, transparent) 10deg, color-mix(in oklab, var(--zhar-lo) 5%, transparent) 16deg, transparent 26deg), /* дымка над сценой */ radial-gradient(130% 34% at 50% 106%, color-mix(in oklab, var(--seam-2) 50%, transparent) 0%, transparent 72%), linear-gradient(180deg, var(--rock) 0%, var(--deep) 58%)} .app::after{ background: conic-gradient(from 136deg at 3% -5%, transparent 0deg, color-mix(in oklab, var(--zhar) 20%, transparent) 10deg, color-mix(in oklab, var(--zhar) 20%, transparent) 16deg, transparent 26deg), conic-gradient(from 198deg at 97% -5%, transparent 0deg, color-mix(in oklab, var(--zhar-lo) 18%, transparent) 10deg, color-mix(in oklab, var(--zhar-lo) 18%, transparent) 16deg, transparent 26deg), linear-gradient(180deg, color-mix(in oklab, var(--cream) 2.5%, transparent), color-mix(in oklab, var(--cream) 1%, transparent) 70%); /* сетка ∩ затухание книзу */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none' stroke='black'%3E%3Cpath d='M0 32.5H64M32.5 0V64' stroke-opacity='.5' stroke-dasharray='1 3'/%3E%3Cpath d='M32.5 26.5v12M26.5 32.5h12' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 64px 64px repeat, linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.12) 100%); -webkit-mask-composite:source-in; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none' stroke='black'%3E%3Cpath d='M0 32.5H64M32.5 0V64' stroke-opacity='.5' stroke-dasharray='1 3'/%3E%3Cpath d='M32.5 26.5v12M26.5 32.5h12' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 64px 64px repeat, linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.12) 100%); mask-composite:intersect} /* Пыль в свете лампы — мир шахты, а не арены. К тому же двадцать четыре бесконечных цикла держат видеокарту проснувшейся, а на тёмном экране двухпиксельная точка читается битым пикселем. */ .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) 86%, transparent) 12px, color-mix(in oklab, var(--rock) 86%, transparent) 55%, transparent)} /* ── 2. ЗАГОЛОВКИ — Unbounded заглавными, с меткой HUD ───────────────── Перед заголовком экрана — оранжевая планка, как у панели в интерфейсе игры: «здесь начинается блок». Разрядка сдержанная — это табло, а не вывеска. */ .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{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{content:""; flex:none; width:4px; height:1em; border-radius:1px; background:linear-gradient(180deg, var(--lamp-hi), var(--lamp)); box-shadow:0 0 10px -1px var(--lamp)} .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(--lamp-hi)} .app .bar .pill.big, .app .pill.ghost{color:var(--cream); border:1px solid var(--gm-рамка); background:color-mix(in oklab, var(--stone-2) 70%, transparent); box-shadow:inset 0 1px 0 var(--gm-кромка)} .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(--gm-рамка); background:color-mix(in oklab, var(--stone-2) 60%, transparent); box-shadow:inset 0 1px 0 var(--gm-кромка)} .app .back .ic{color:var(--lamp)} .app .где span{color:var(--sand)} /* ── 4. ВКЛАДКИ: выбранная — в прицеле ─────────────────────────────────── Выбранная вкладка — не заливка, а метка прицела: тёмная середина с оранжевым отсветом, четыре уголка ретикля и засечка под ней — нижний штрих перекрестия. Подпись остаётся светлой: так читается лучше, чем тёмная буква на яркой заливке, а оранжевый заливкой — только у кнопок. Уголки и засечка едут вместе с пилюлей, потому что живут в ней. */ .app .tabs{padding-bottom:14px} .app .tab, .app .tab-pill{border-radius:var(--r-in)} .app .tab-pill{background:var(--gm-выбрано); overflow:visible; box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--lamp) 50%, transparent), inset 0 0 16px -6px var(--gm-жар), 0 0 18px -8px var(--lamp); --gm-ret:var(--lamp-hi); --gm-ret-l:7px} .app .tab-pill::before{inset:-3px} .app .tab-pill::after{content:""; position:absolute; left:50%; top:calc(100% + 4px); width:2px; height:6px; margin-left:-1px; border-radius:1px; background:var(--lamp-hi); box-shadow:0 0 6px var(--lamp-hi); animation:gm-дых 2.6s ease-in-out infinite} .app .tab.on{color:var(--cream)} .app .tab:not(.on){color:var(--sand); border-color:var(--gm-рамка); background:color-mix(in oklab, var(--stone-2) 55%, transparent); box-shadow:inset 0 1px 0 color-mix(in oklab, var(--cream) 10%, transparent)} .app .tab:not(.on):active{background:color-mix(in oklab, var(--lamp) 14%, transparent)} @keyframes gm-дых{0%,100%{opacity:.5} 50%{opacity:1}} /* ── 5. КАРТОЧКА НОМИНАЛА — цель ───────────────────────────────────────── Фиолетовое стекло под светом арены: верх светлее, по верхней грани — кромка. В углах — ретикль. Нажал — рамка сжимается на цели; взял — «захват»: рамка съезжается снаружи и загорается жёлтым неоном, карточка светится оранжевым. Захват играет один раз — когда карточка берётся. */ .app .ore{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка), inset 0 -1px 0 rgba(0,0,0,.45), var(--sh-card); transition:scale var(--t-press) var(--ease-out), border-color 200ms var(--ease-out), box-shadow 220ms var(--ease-out)} .app .ore::after{inset:4px; z-index:1; transition:transform var(--t-press) var(--ease-out)} /* Под кнопкой — запас на нижние уголки: полоса «−/+» у взятой карточки выросла до 36 px (под палец), и уголки ретикля легли вплотную к ней. */ .app .grid .ore:not(.item){padding-bottom:11px} .app .ore:not(.spent):active::after{transform:scale(.95)} .app .ore .mark{z-index:2} .app .ore:not(.spent):active{border-color:color-mix(in oklab, var(--lamp) 55%, transparent)} .app .ore.incart{--gm-ret:var(--lamp-hi); border-color:color-mix(in oklab, var(--lamp) 62%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--lamp) 17%, var(--stone-2)) 0%, color-mix(in oklab, var(--lamp) 6%, var(--stone)) 50%, color-mix(in oklab, var(--stone-deep) 96%, transparent) 100%); box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-hi) 45%, transparent), 0 0 0 1px color-mix(in oklab, var(--lamp) 26%, transparent), 0 12px 26px -14px var(--lamp), 0 0 22px -12px var(--lamp)} .app .ore.incart::after{animation:gm-захват 380ms var(--ease-out) backwards} @keyframes gm-захват{0%{transform:scale(1.14); opacity:0} 60%{opacity:1} 100%{transform:scale(1); opacity:1}} .app .ore.spent{--gm-ret:transparent; 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); text-shadow:none} .app .ore.spent .line1 b{color:var(--sand)} /* Цена и количество — главное. Количество — светлым, цена — жёлтым неоном вывески: Unbounded, крупнее прежнего и с лёгким свечением, как буквы над сценой. На стекле жёлтый даёт 11.6 — ярче некуда. */ .app .line1 b{color:var(--cream); font-size:var(--fs-sm)} .app .line1 span{margin-top:3px; font-family:var(--font-display); font-weight:600; font-size:var(--fs-base); letter-spacing:0; color:var(--lamp-hi); text-shadow:0 0 12px color-mix(in oklab, var(--lamp-hi) 35%, transparent)} .app .ore .за-штуку{margin-top:3px} /* Цена, количество и значок стоят по центру — подписи под ними тоже: иначе «1,42 ₽» висела у левого края под центрованной ценой и читалась чужой. */ .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) 22%, 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(--gm-жар-тихо)} .app .ore.incart .take{border-color:transparent; color:var(--on-lamp); background:var(--metal); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.18), 0 0 14px -4px var(--lamp)} .app .ore.spent .take{background:rgba(0,0,0,.24); border-color:color-mix(in oklab, var(--seam) 50%, transparent); box-shadow:none} /* Плашка выгодного номинала — жёлтая неоновая табличка со звездой MVP. */ .app .ore .mark{font-family:var(--font-display); font-weight:700; letter-spacing:.08em; color:var(--on-lamp); background:var(--lamp-hi); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 12px -2px var(--gm-неон)} .app .ore .mark::before{content:""; flex:none; width:8px; height:8px; margin-right:1px; background:currentColor; clip-path:polygon(50% 0, 62% 36%, 100% 38%, 69% 60%, 80% 98%, 50% 76%, 20% 98%, 31% 60%, 0 38%, 38% 36%)} .app .ore .gone{background:color-mix(in oklab, var(--seam) 80%, transparent); color:var(--sand-dim)} /* Своя сумма: то же стекло, кнопка — оранжевым контуром. */ .app .своя{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка)} .app .своя .take{border:1px solid var(--gm-жар-тихо); color:var(--lamp); background:color-mix(in oklab, var(--lamp) 10%, transparent); font-weight:700} .app .своя .take:disabled{opacity:.5} /* Раздел за входом через бота (кодовый раздел на сайте): тот же язык — стекло, оранжевый щит. */ .app .замок{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка), var(--sh-card); backdrop-filter:none; -webkit-backdrop-filter:none} .app .замок .ic{color:var(--lamp); filter:drop-shadow(0 0 8px color-mix(in oklab, var(--lamp) 55%, transparent))} .app .замок b{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:var(--fs-base)} /* Кому уходит покупка — оранжевый отсвет на стекле. */ .app .who-chip{border-color:var(--gm-жар-тихо); background:color-mix(in oklab, var(--lamp) 9%, var(--stone))} /* ── 6. ГЛАВНАЯ РАЗДЕЛА ──────────────────────────────────────────────── */ .app .promises > div{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка)} .app .promises .ic{color:var(--lamp)} .app .row .more{color:var(--lamp); background:transparent; border:1px solid var(--gm-жар-тихо); 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) 55%, transparent))} .app .home-brand{font-family:var(--font-display); letter-spacing:.34em; color:var(--sand)} .app .home-о{color:var(--sand)} /* «ВСЕ ИГРЫ» под именем — вторая тяжёлая строка подряд, а подписывает она плитки, до которых ещё 250 пикселей. Там, где над ней стоит арт с именем, под именем остаётся одна строка — чем торгуем. */ .app .hero-art:not(:empty) + .home-head h2{display:none} .app .home-vows > div{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка)} .app .home-vows .ic{color:var(--lamp)} /* Уровни — кнопка, и выглядит оранжевой панелью HUD: контур, отсвет и справа пять растущих делений — ступени растут, как ранг. */ .app .лоб-уровни{border-color:var(--gm-жар); background:linear-gradient(135deg, color-mix(in oklab, var(--lamp) 17%, var(--stone)) 0%, color-mix(in oklab, var(--stone-deep) 94%, transparent) 100%); box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-hi) 30%, transparent), 0 0 24px -12px var(--lamp)} .app .лоб-уровни:active{scale:.98} .app .лоб-уровни .ic{width:24px; height:24px; margin-bottom:6px; color:var(--lamp-hi); filter:drop-shadow(0 0 6px color-mix(in oklab, var(--lamp-hi) 50%, transparent))} .app .лоб-уровни::after{content:""; position:absolute; right:16px; bottom:16px; width:44px; height:22px; pointer-events:none; background: linear-gradient(var(--lamp-hi), var(--lamp-hi)) 0 100% / 6px 30% no-repeat, linear-gradient(var(--lamp-hi), var(--lamp-hi)) 25% 100% / 6px 47% no-repeat, linear-gradient(var(--lamp), var(--lamp)) 50% 100% / 6px 64% no-repeat, linear-gradient(var(--gm-жар), var(--gm-жар)) 75% 100% / 6px 82% no-repeat, linear-gradient(var(--gm-жар-тихо), var(--gm-жар-тихо)) 100% 100% / 6px 100% no-repeat; filter:drop-shadow(0 0 6px color-mix(in oklab, var(--lamp) 45%, transparent))} .app .лоб-уровни .menu-tag{color:var(--on-lamp); background:var(--lamp-hi); font-weight:700} /* Плитки игр: свет своей игры остаётся (по нему игру и узнают), сверху — кромка, по нажатию — оранжевый. Крупные плитки — цели: в ретикле. */ .app .gcard{border-color:color-mix(in oklab, var(--g) 22%, var(--gm-рамка)); box-shadow:inset 0 1px 0 var(--gm-кромка), inset 0 -1px 0 rgba(0,0,0,.4), var(--sh-card)} .app .gcard.big{--gm-ret:color-mix(in oklab, var(--cream) 34%, transparent); --gm-ret-l:12px} .app .gcard.big::after{inset:6px; z-index:1} /* Первая крупная — главная игра магазина (features.homeFeatured[0], у него Standoff 2): её ретикль горит неоном, как у взятой цели. */ .app .gcard.big:first-child{--gm-ret:var(--lamp-hi); border-color:color-mix(in oklab, var(--lamp-hi) 30%, var(--gm-рамка))} .app .gcard:not(.soon):active, .app .gcard.жмём{border-color:var(--gm-жар); --gm-ret:var(--lamp-hi); box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-hi) 40%, transparent), 0 0 0 1px var(--gm-жар-тихо), 0 0 26px -8px var(--lamp)} .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} /* Две кнопки лобби — в две колонки. */ .app .lobby{grid-template-columns:1fr 1fr} .app .lob{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка)} .app .lob .ic{color:var(--lamp)} .app .lob:active{border-color:var(--gm-жар-тихо)} /* ── 8. КОРЗИНА-ДОК ────────────────────────────────────────────────────── Полоса — первый шаг к деньгам: плотная ночь, светлая черта сверху, сумма светлым, и одна оранжевая кнопка. Появляясь, кнопка ловит блик — по ней один раз проходит полоса света, как луч прожектора по металлу. */ .app .dock{background:linear-gradient(180deg, var(--rock) 0%, var(--deep) 60%); border-top-color:var(--gm-рамка)} .app .dock::before{content:""; position:absolute; left:8%; right:8%; top:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--zhar) 60%, transparent) 30%, color-mix(in oklab, var(--zhar-lo) 60%, transparent) 70%, transparent)} .app .dock-in > .ic{color:var(--lamp)} .app .dock-sum b{color:var(--cream)} /* Разряды итога — span внутри , и общее правило шаблона `.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,.55), transparent); transform:translateX(0); opacity:0} .app .dock:not(.away) .act::after{animation:gm-блик 900ms var(--ease-out) 260ms both} @keyframes gm-блик{0%{transform:translateX(0); opacity:0} 12%{opacity:1} 100%{transform:translateX(420%); opacity:0}} /* ── 9. КНОПКИ — ОРАНЖЕВЫЙ МЕТАЛЛ ──────────────────────────────────────── Главная кнопка — металл: светлый верх, складка посередине, отражённый свет снизу (всё в --metal). Надпись — тёмными чернилами (8.0 на лампе, 5.5 на складке) и заглавными 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:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.2), var(--gm-ореол)} .app .plita-copy{box-shadow:inset 0 1px 0 rgba(255,255,255,.42), var(--gm-ореол)} .app .plita-copy.ok{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(60% 26% at 0% -4%, color-mix(in oklab, var(--zhar) 9%, transparent) 0%, transparent 70%), radial-gradient(60% 26% at 100% -4%, color-mix(in oklab, var(--zhar-lo) 8%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--rock) 0%, var(--deep) 100%)} /* Верхний слой ночи (сетка) лежит в стопке ПОСЛЕ подложки заказа и проступал бы сквозь неё. На экране денег сетки нет. */ .app:has(> .screen.show[data-screen="order"])::after{display:none} .app .screen[data-screen="order"] .back{background:var(--stone); border-color:var(--seam)} .app .screen[data-screen="order"] .cart-line{border-color:var(--seam); box-shadow:inset 0 1px 0 color-mix(in oklab, var(--cream) 11%, transparent)} .app .screen[data-screen="order"] .panel{position:relative; --gm-ret:var(--lamp-hi); --gm-ret-l:10px; border-color:color-mix(in oklab, var(--lamp) 30%, var(--seam-2)); box-shadow:inset 0 1px 0 color-mix(in oklab, var(--cream) 14%, transparent), 0 0 34px -20px var(--lamp)} .app .screen[data-screen="order"] .panel::after{inset:-5px} /* Скидки нет — её строка спрятана, но общее правило шаблона «черта над каждой строкой, кроме первой» всё равно рисовало черту над «К оплате», и плита выглядела обрезанной сверху. */ .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"] .game-name{font-family:var(--font-display); letter-spacing:.08em; color:var(--lamp-hi)} .app .field label .чья{color:var(--lamp-hi)} /* Предупреждение по игре — красным отсветом «ошибки», а не оранжевым: оранжевый здесь — кнопка, и предупреждение читалось бы ещё одним действием. */ .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. ХОД ЗАКАЗА ────────────────────────────────────────────────────── Лица состояния (прицел ищет / победа / промах) ставит шаблон; здесь — панель вокруг них в ретикле, полоса хода делениями, как счёт раундов, и шаги — строками ленты событий. Ретикль говорит цветом: ждём — оранжевый, готово — мята, не вышло — красный. */ .app .digger{position:relative; --gm-ret:var(--lamp); --gm-ret-l:12px; border-color:var(--gm-рамка); 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(--gm-кромка), 0 16px 34px -20px #000} .app .digger::after{inset:6px} .app .digger.done{--gm-ret:var(--ore)} .app .digger.bad{--gm-ret:var(--rust)} .app .digger-bar{position:relative; height:6px; border-radius:1px; background:color-mix(in oklab, var(--deep) 80%, transparent); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--sand) 10%, transparent)} .app .digger-bar i{border-radius:1px; background:linear-gradient(90deg, var(--lamp-lo), var(--lamp) 60%, var(--lamp-hi)); box-shadow:0 0 10px var(--lamp)} /* Деления: сквозные прорези поверх полосы — полоса читается счётом раундов, а не загрузкой. */ .app .digger-bar::after, .app .vip-bar::after{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--stone-deep) calc(10% - 2px) 10%)} .app .digger.done .digger-bar i{background:linear-gradient(90deg, color-mix(in oklab, var(--ore) 60%, var(--deep)), var(--ore) 60%, var(--ore-hi)); box-shadow:0 0 10px var(--ore)} .app .digger.bad .digger-bar i{background:var(--rust); box-shadow:none} /* Шаги — лента событий: строки с полосой слева, номер — в восьмигранном жетоне. Идёт — оранжевый, пройден — мята, сорвался — красный. */ .app .trail{border-color:var(--gm-рамка); box-shadow:inset 0 1px 0 var(--gm-кромка)} .app .trail li{position:relative} .app .trail li + li{border-top:1px dashed color-mix(in oklab, var(--sand) 12%, transparent)} .app .trail .pip{border:0; border-radius:0; width:20px; height:20px; font-family:var(--font-display); font-weight:700; background:color-mix(in oklab, var(--sand) 18%, transparent); color:var(--sand); clip-path:polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%)} .app .trail li.now .pip{background:var(--lamp); color:var(--on-lamp)} .app .trail li.was .pip{background:var(--ore); color:var(--on-ore)} .app .trail li.lost .pip{background:var(--rust); color:var(--on-rust)} .app .trail li.now b{color:var(--lamp-hi)} /* Плита с кодом — трофей раунда: панель в ретикле, надпись над кодом — жёлтым неоном, код — в пунктирной рамке, как поле ввода в игре. */ .app .plita{--gm-ret:var(--lamp-hi); --gm-ret-l:12px; border-color:color-mix(in oklab, var(--lamp) 40%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--lamp) 11%, var(--stone-deep)) 0%, var(--stone-deep) 55%, var(--deep) 100%); box-shadow:inset 0 1px 0 color-mix(in oklab, var(--lamp-hi) 38%, transparent), 0 0 40px -18px var(--lamp), 0 20px 40px -26px #000} .app .plita::before{inset:6px; z-index:1} .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) 45%, transparent)} .app .plita-uc{font-family:var(--font-display)} .app .plita code{border:1px dashed color-mix(in oklab, var(--lamp-hi) 45%, transparent); background:rgba(0,0,0,.4); color:var(--cream)} /* Сбой выдачи — красная плашка: беда видна, но не кричит. */ .app .note.bad{margin-top:12px; padding:13px 14px; border-radius:var(--r-card); font-size:var(--fs-md); line-height:var(--lh-text); color:var(--cream); border:1px solid color-mix(in oklab, var(--rust) 40%, transparent); background:color-mix(in oklab, var(--rust) 10%, var(--stone-deep))} .app .лз{filter:drop-shadow(0 0 14px color-mix(in oklab, currentColor 55%, transparent)) drop-shadow(0 6px 14px rgba(0,0,0,.55))} /* ── 12. УРОВНИ ────────────────────────────────────────────────────────── Лестница — ранги: ступени растут, как звание в игре. Текущая ступень — в ретикле; верхняя названа его именем и горит жёлтым неоном вывески. Полоса до следующей — деления, как счёт раундов. */ .app .vip-now{position:relative; --gm-ret:var(--lamp-hi); --gm-ret-l:12px; border-color:var(--gm-жар-тихо); 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-hi) 28%, transparent), 0 0 36px -20px var(--lamp), var(--sh-lift)} .app .vip-now::after{inset:6px} .app .vip-now.empty-id{--gm-ret:color-mix(in oklab, var(--sand) 40%, transparent); background:var(--gm-стекло); border-color:var(--gm-рамка)} .app .vip-now .ic{color:var(--lamp-hi); width:40px; height:40px; filter:drop-shadow(0 0 10px color-mix(in oklab, var(--lamp-hi) 45%, transparent))} .app .vip-now > span, .app .vip-left{color:var(--sand)} .app .vip-now em{color:var(--on-lamp); background:var(--lamp-hi); 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{position:relative; height:8px; border-radius:1px; 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{border-radius:1px; background:linear-gradient(90deg, var(--lamp-lo), var(--lamp) 60%, var(--lamp-hi)); box-shadow:0 0 10px var(--lamp)} .app .vip-sheet, .app .bindbox{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка)} .app .vip-row{position:relative; border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 color-mix(in oklab, var(--cream) 12%, transparent)} .app .vip-row span{color:var(--lamp-hi); font-family:var(--font-display); font-weight:600} /* Порог ступени — одной строкой: «от» отрывалось от суммы, когда рядом стояло длинное имя верхней ступени. */ .app .vip-row u{white-space:nowrap} .app .vip-row.on{--gm-ret:var(--lamp-hi); border-color:var(--gm-жар); background:color-mix(in oklab, var(--lamp) 13%, var(--stone)); box-shadow:inset 0 0 14px -6px var(--gm-жар), 0 0 18px -8px var(--lamp)} .app .vip-row.on::after{inset:-4px} /* «Вы здесь» шаблон ставит отдельной строкой под названием; у нас перед названием значок ступени (26 + 10 px) — строку ставим под буквы, а не под значок, и красим неоном ретикля. */ .app .vip-row.on b::after{padding-left:36px; color:var(--lamp-hi); font-weight:600} .app .vip-table .vip-row:last-child{border-color:color-mix(in oklab, var(--lamp-hi) 34%, transparent); background:linear-gradient(135deg, color-mix(in oklab, var(--lamp-hi) 12%, var(--stone)), var(--stone-deep) 75%)} .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) 55%, transparent)} /* Ступени — знаки рангов художника; на 18 px их рост не читался. Размер задан в разметке строкой стиля — перебиваем её. */ .app .vip-row b > svg.ic{width:26px !important; height:26px !important; vertical-align:-8px !important; margin-right:10px !important} /* ── 13. О НАС ─────────────────────────────────────────────────────────── Номера шагов — в восьмигранном жетоне, как номер на табло игры: оранжевый жетон, тёмная цифра. (Трафаретная перемычка поперёк цифры пробовалась и снята: разрезанная «3» читалась как «з».) Вопрос раскрывается — строка загорается оранжевой полосой слева, стрелка поворачивается к ответу. */ .app .steps li{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка); display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:14px; align-items:start; padding:16px 15px 16px 16px} /* Шаги стоят списком задач раунда: жетон с номером слева, дело — справа, а не столбиком одно под другим. */ .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{position:relative; border:0; border-radius:0; color:var(--on-lamp); background:var(--lamp); font-family:var(--font-display); font-weight:800; clip-path:polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%)} .app .step-n{width:30px; height:30px; font-size:var(--fs-md)} .app .asks details{position:relative; border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 color-mix(in oklab, var(--cream) 12%, transparent)} .app .asks details[open]{border-color:var(--gm-жар-тихо); box-shadow:inset 3px 0 0 var(--lamp), inset 0 1px 0 color-mix(in oklab, var(--cream) 12%, transparent)} .app .asks details[open] summary{color:var(--lamp-hi)} .app .asks details[open] summary::after{border-color:var(--lamp)} .app .vows > div{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка)} .app .vows .ic{color:var(--lamp)} /* ── 14. МОИ ЗАКАЗЫ — лента событий ────────────────────────────────────── Каждый заказ — строка ленты: полоса слева цвета исхода (мята — выдан, красный — сбой или отмена, оранжевый — в работе). */ .app .ord{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 3px 0 0 var(--gm-рамка-ярко), inset 0 1px 0 var(--gm-кромка)} .app .ord:has(.s-done){box-shadow:inset 3px 0 0 var(--ore), inset 0 1px 0 var(--gm-кромка)} .app .ord:has(.s-failed), .app .ord:has(.s-canceled){box-shadow:inset 3px 0 0 var(--rust), inset 0 1px 0 var(--gm-кромка)} .app .ord:has(.s-issuing), .app .ord:has(.s-paid){box-shadow:inset 3px 0 0 var(--lamp), inset 0 1px 0 var(--gm-кромка)} .app .ord:active{border-color:var(--gm-жар-тихо)} .app .ord-sum{font-family:var(--font-display); font-weight:600; color:var(--lamp-hi)} .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(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка), 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. ВЫБОР РЕГИОНА И ВОПРОСЫ ───────────────────────────────────────── Экраны поверх всего — та же арена: сверху отсвет прожекторов, выбранное — в ретикле, как вкладка. Над вопросом вместо булавки на глобусе — прицел: «где ваш аккаунт» спрашивает тот же HUD. */ .регионы{background: radial-gradient(60% 30% at 0% -6%, color-mix(in oklab, var(--zhar) 12%, transparent) 0%, transparent 70%), radial-gradient(60% 30% at 100% -6%, color-mix(in oklab, var(--zhar-lo) 10%, transparent) 0%, transparent 70%), var(--deep)} .регионы-верх{border-bottom-color:var(--gm-рамка)} .регион{position:relative; border-color:var(--gm-рамка); background:var(--gm-стекло); color:var(--sand)} .регион b{color:var(--cream)} .регион.on{--gm-ret:var(--lamp-hi); color:var(--cream); background:var(--gm-выбрано); border-color:transparent; box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--lamp) 55%, transparent), 0 0 18px -8px var(--lamp)} .регион.on::after{inset:-3px} .регион.on u{color:var(--lamp-hi)} /* Значок-символ шаблон запекает в картинку цветом чернил — под свою заливку металлом. У нас выбранный ряд тёмный, и тёмный значок на нём тонул. Высветляем ТОЛЬКО вклеенные символы: флаги стран — снимки. */ .регион.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(--gm-рамка); background:color-mix(in oklab, var(--stone-2) 60%, transparent)} .регионы-поиск input{border-color:var(--gm-рамка); 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(60% 30% at 0% -6%, color-mix(in oklab, var(--zhar) 12%, transparent) 0%, transparent 70%), radial-gradient(60% 30% at 100% -6%, color-mix(in oklab, var(--zhar-lo) 10%, transparent) 0%, transparent 70%), var(--deep)} /* Пятно света вместо глобуса: мягкое, без края — гаснет внутри своего круга (closest-side), и на фоне не остаётся очерченного диска. */ .вопрос-глубь .шар{background:radial-gradient(closest-side circle at 50% 70%, color-mix(in oklab, var(--lamp-hi) 9%, transparent), color-mix(in oklab, var(--lamp) 3%, transparent) 55%, transparent 100%)} /* Прицел вместо булавки: кольцо, четыре штриха и точка в центре. */ .вопрос-глубь .метка{width:40px; height:40px; rotate:0deg; border-radius:50%; opacity:.9; translate:-50% 0; background: radial-gradient(circle, var(--lamp-hi) 0 2px, transparent 2.5px), linear-gradient(var(--lamp-hi), var(--lamp-hi)) 50% 0 / 1.5px 10px no-repeat, linear-gradient(var(--lamp-hi), var(--lamp-hi)) 50% 100% / 1.5px 10px no-repeat, linear-gradient(var(--lamp-hi), var(--lamp-hi)) 0 50% / 10px 1.5px no-repeat, linear-gradient(var(--lamp-hi), var(--lamp-hi)) 100% 50% / 10px 1.5px no-repeat; box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--lamp-hi) 70%, transparent), 0 0 18px -2px color-mix(in oklab, var(--lamp-hi) 60%, transparent); animation:gm-поиск 4.8s ease-in-out infinite} @keyframes gm-поиск{0%,100%{transform:translate(0,0)} 25%{transform:translate(9px,3px)} 50%{transform:translate(-4px,7px)} 75%{transform:translate(-8px,-2px)}} .вопрос-да{box-shadow:inset 0 1px 0 rgba(255,255,255,.42), var(--gm-ореол)} .вопрос-нет{background:color-mix(in oklab, var(--stone-2) 70%, transparent); border-color:var(--gm-рамка); box-shadow:inset 0 1px 0 var(--gm-кромка)} .шаги-список li span{width:28px; flex-basis:28px} .шаги-список input{border-color:var(--gm-рамка); background:color-mix(in oklab, var(--stone-2) 50%, transparent)} /* ── 16. ЗАГРУЗКА И «НА РАБОЧИЙ СТОЛ» ────────────────────────────────── */ /* Заставка — сцена до выхода: два луча сходятся на знаке, за ним — отсвет вывески. Без движения: знак на ней и так дышит. */ #грузим::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(circle 130px at 50% 46%, color-mix(in oklab, var(--lamp-hi) 12%, transparent), transparent 70%), conic-gradient(from 143deg at 3% -5%, transparent 0deg, color-mix(in oklab, var(--zhar) 9%, transparent) 6deg, transparent 13deg), conic-gradient(from 204deg at 97% -5%, transparent 0deg, color-mix(in oklab, var(--zhar-lo) 8%, transparent) 6deg, transparent 13deg)} /* Ушедшая заставка прозрачна и невидима, но не снята, и её дыхание, полоса и фразы крутились бы до конца сеанса. Экран ушёл — движение на нём стоит. !important — потому что дыхание и полоса заданы прямо в атрибуте style, а его без него не перебить. */ #грузим.ушёл *{animation:none !important} #грузим .грузим-слово{color:var(--lamp-hi); filter:drop-shadow(0 0 12px color-mix(in oklab, var(--lamp-hi) 40%, transparent))} .накрыльцо{border-color:var(--gm-жар-тихо); background:color-mix(in oklab, var(--stone-2) 94%, transparent); box-shadow:inset 0 1px 0 var(--gm-кромка), var(--sh-lift)} .накрыльцо-знак{color:var(--lamp)} .накрыльцо-да{box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 0 16px -6px var(--lamp)} /* ── 17. ФИРМЕННЫЕ МЕСТА: арт, вордмарк, лица, салют, стример ─────────── Места строит шаблон, рисунки — художник; здесь только то, как они живут на арене. */ /* Арт растворяется в ночи, а не обрывается краем картинки: низ уходит в прозрачность маской, и под ним проступает тот же фон, что у всей витрины (лучи и сетка). Наложить сверху «цвет фона» нельзя — фон не ровный, и полоса легла бы заплатой. */ .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, и шире 375 арт срезался сверху и снизу: на мониторе (колонка 430) вывеска с его именем над сценой уходила за край наполовину. Высота — по доле арта (600/750), но не больше, чем нужно колонке. */ .app .hero-art{height:min(80vw, 344px)} .app .banner-art{ -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 68%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 68%, transparent 100%)} /* Вордмарк на арте — неоновая вывеска арены: жёлтый неон, тёмная тень держит буквы на светлом, мягкий ореол — свечение трубки. Тень неподвижна — фильтр считается раз. */ .app .home-слово{color:var(--lamp-hi); filter:drop-shadow(0 2px 8px rgba(0,0,0,.75)) drop-shadow(0 0 16px color-mix(in oklab, var(--lamp-hi) 40%, transparent))} .app .hero-kicker{color:var(--lamp); letter-spacing:.3em; text-shadow:0 0 12px color-mix(in oklab, var(--lamp) 60%, transparent)} .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:28px} .proboy .zerno.глиф:nth-child(4n+3){color:var(--zhar); font-size:20px} .proboy .zerno.глиф:nth-child(4n){color:var(--zhar-lo); font-size:18px} .proboy .zerno.глиф:nth-child(4n+1){color:var(--lamp); font-size:18px} .proboy .zarevo{background:radial-gradient(circle, color-mix(in oklab, var(--cream) 90%, transparent), color-mix(in oklab, var(--lamp-hi) 50%, transparent) 30%, color-mix(in oklab, var(--zhar) 16%, transparent) 55%, transparent 72%)} /* Карточка стримера — он в прицеле: аватар в ретикле и оранжевом кольце, имя его же написанием («GentlemaN» — с большой N на конце), каналы — кнопки HUD. */ .app .стример{border-color:var(--gm-рамка); background:var(--gm-стекло); box-shadow:inset 0 1px 0 var(--gm-кромка), var(--sh-card)} .app .стример-кто{position:relative; --gm-ret:var(--lamp-hi); --gm-ret-l:8px} .app .стример-кто::before{left:-5px; top:50%; width:62px; height:62px; margin-top:-31px} .app .стример-лицо{border:1.5px solid var(--lamp); box-shadow:0 0 0 3px color-mix(in oklab, var(--lamp) 16%, transparent), 0 0 18px -4px var(--lamp)} .app .стример-имя b{font-size:var(--fs-base); letter-spacing:.03em} .app .стример-имя span{color:var(--sand)} .app .стример-ссылка{color:var(--cream); border-color:var(--gm-рамка); border-radius:var(--r-in); background:color-mix(in oklab, var(--stone-2) 70%, transparent); box-shadow:inset 0 1px 0 var(--gm-кромка)} .app .стример-ссылка:active{background:color-mix(in oklab, var(--lamp) 18%, transparent); border-color:var(--lamp)} .app .стример-ссылка .ic{color:var(--lamp)} /* Пасхалка — строкой в оранжевой рамке. */ .пасхалка{border-color:var(--gm-жар); box-shadow:0 0 0 1px color-mix(in oklab, var(--lamp) 30%, transparent), 0 0 24px -6px var(--lamp), 0 14px 30px -16px #000} /* ── 18. ТИХИЙ РЕЖИМ ───────────────────────────────────────────────────── Кто просил меньше движения — получает тот же смысл без него: засечка вкладки горит ровно, захват сразу на месте, блик и прицел стоят. */ @media (prefers-reduced-motion:reduce){ .app .tab-pill::after, .app .ore.incart::after, .app .dock:not(.away) .act::after, .вопрос-глубь .метка{animation:none} .app .ore.incart::after{transform:none; opacity:1} .app .ore::after{transition:none} } /* ── 19. ТЕЛЕФОННАЯ КОЛОНКА НА МОНИТОРЕ ────────────────────────────────── Лучи и сетка прибиты к окну, и на мониторе прожекторы светили бы из углов экрана, мимо колонки. В колонке арена живёт в её краях, снаружи — ровная ночь. */ @media (min-width:600px){ html[data-телефон]{background:var(--deep)} html[data-телефон] .app::before, html[data-телефон] .app::after{left:var(--телефон-поле); right:var(--телефон-поле)} } /* ── 20. МЕСТО ПОД ВРЕМЕННЫЙ БЛОК ДЕМО ─────────────────────────────────── Ниже ведущий кладёт временный блок показа (строка о кассе, документы) — он должен стоять последним, чтобы перебить всё выше. */ /* ── ПРАВКИ ПО РАЗБОРУ КРИТИКА ────────────────────────────────────────── */ /* Прицел значит «выбрано»: уголки остаются только у номинала в корзине (.ore.incart), у остальных карточек и у сводок их нет — иначе прицел на всём подряд перестаёт что-то значить. */ .app .ore{--gm-ret:transparent} .app .promises > div::before, .app .home-vows > div::before, .app .vows > div::before, .app .steps li::before, .app .lob::before{content:none} .app .tab-pill::after{content:none} /* Узкий Android: «1 155 алмаз…» — у дорогих пакетов пропадала единица. */ @media (max-width:370px){ .app .ore .line1 b{font-size:11px; letter-spacing:-.02em} } /* Формы кнопок одного рода: у «тактических» углов нет круглых пилюль. */ .app .back, .app .pill.ghost{border-radius:var(--r-in)} /* Монитор: арена не обрывается у краёв колонки — лучи и сетка по бокам. */ @media (min-width:900px){ html[data-телефон]{background: radial-gradient(40% 70% at 12% 0%, color-mix(in oklab, var(--lamp) 10%, transparent), transparent 70%), radial-gradient(40% 70% at 88% 0%, color-mix(in oklab, var(--lamp-hi) 8%, transparent), transparent 70%), radial-gradient(60% 50% at 50% 100%, color-mix(in oklab, var(--seam-2) 45%, transparent), transparent 70%), var(--deep)} } /* ╔═══════════════════════════════════════════════════════════════════╗ ║ ВРЕМЕННО — СНЯТЬ ПЕРЕД ЗАПУСКОМ. Тот же блок, что у ANTI-HERO и ║ ║ MAGISTOR: владелец просил убирать это на время показа макета ║ ║ блогеру. Здесь — с 23.09.2026. Вернуть потом. ║ ╚═══════════════════════════════════════════════════════════════════╝ Строка о поддельной кассе (#tail в мини-аппе, #sig span на сайте) — ВЕРНУТЬ вместе с настоящей кассой. Документы без реквизитов продавца — ВЕРНУТЬ обязательно до первой настоящей продажи. */ #tail{display:none !important} #sig span{display:none !important} footer.fine{display:none !important}