/* realpdd — прототип.
Тёмная тема по умолчанию: предмет продукта — пасмурный кадр из-за руля,
на белом полотне он читается как скан документа. Светлая осталась
переключателем и держит плотность и типографику Яндекс Метрики. */
:root{
/* Светлая: тёплый нейтральный грунт, белые карточки с волосяной рамкой.
Жёлтый остаётся акцентом только заливкой; жёлтым текстом на светлом
ничего не пишем — для этого есть тёмное золото --gold. */
--bg:#f6f5f2; --panel:#ffffff; --panel-2:#edebe6; --line:#e6e3dd;
--text:#1d1c1a; --muted:#6f6c66;
--accent:#ffdb4d; --on-accent:#1d1c1a;
--green:#2f7a3c; --green-bg:#e6f4e9; --green-line:#b9dfc3;
--red:#c0392b; --red-bg:#fbeae8; --red-line:#f1c4bf;
--stage-bg:#0d0d0c;
--radius:10px; --gap:12px; --maxw:1080px;
}
html[data-theme="dark"]{
--bg:#17171a; --panel:#1f1f23; --panel-2:#2a2a30; --line:#33333b;
--text:#f2f1ef; --muted:#96959d;
--accent:#ffdb4d; --on-accent:#1a1a1a;
--green:#5ed67f; --green-bg:#1c3324; --green-line:#2f5c3d;
--red:#ff7a72; --red-bg:#3a1f1e; --red-line:#5f2f2c;
--stage-bg:#000000;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100%;
transition:background-color .15s linear,color .15s linear;overflow-x:hidden;
}
body.in-game{overflow:hidden}
a{color:inherit}
img{max-width:100%;display:block}
/* курсор-колесо */
html.fx-on,html.fx-on a,html.fx-on button{cursor:none}
#fxCanvas{position:fixed;inset:0;pointer-events:none;z-index:9998}
#fxBurst{position:fixed;inset:0;pointer-events:none;z-index:9999}
.card.is-wrong{animation:cardShake .38s cubic-bezier(.36,.07,.19,.97)}
.card.is-wrong::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 2px var(--red-line),inset 0 0 46px rgba(220,60,60,.28);animation:redFlash .55s ease-out forwards}
@keyframes cardShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes redFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.card.is-wrong{animation:none}.card.is-wrong::after{animation:none;opacity:.5}}
#fxWheelUnused{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;will-change:transform;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
/* ---------- Бренд ---------- */
.brand{font-weight:800;letter-spacing:-.02em;font-size:28px;white-space:nowrap;text-decoration:none}
.brand--sm{font-size:18px}
.brand__pdd{background:var(--accent);color:var(--on-accent);padding:0 .18em;border-radius:4px}
/* ---------- Шапка сайта ---------- */
.site{
position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
padding:11px 20px;background:var(--bg);border-bottom:1px solid var(--line);
}
.site__nav{display:flex;gap:16px;font-size:14.5px}
.site__nav a{color:var(--muted);text-decoration:none}
.site__nav a:hover{color:var(--text)}
.site__right{margin-left:auto;display:flex;align-items:center;gap:8px}
.iconbtn{
border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:8px;
width:31px;height:31px;display:grid;place-items:center;cursor:pointer;font-size:13px;line-height:1;
}
.iconbtn:hover{border-color:var(--text)}
.iconbtn.is-off{opacity:.34}
.tgbtn{color:#2AABEE}
.tgbtn:hover{color:#1c8fd0;border-color:#2AABEE}
/* ---------- Кнопки ---------- */
.btn{
display:inline-block;font:inherit;cursor:pointer;text-decoration:none;text-align:center;
border-radius:var(--radius);padding:11px 20px;border:1px solid transparent;
}
.btn--sm{padding:7px 14px;font-size:14px}
.btn--accent{background:var(--accent);color:var(--on-accent);font-weight:700}
.btn--accent:hover{filter:brightness(1.06)}
.btn--primary{background:var(--text);color:var(--bg);font-weight:600;flex:1 1 200px}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--text)}
.btn.is-disabled{opacity:.45;pointer-events:none}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.link{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)}
.link--back{display:inline-block;margin-bottom:14px;color:var(--muted);font-size:14px;text-decoration:none}
/* ---------- Типографика страниц ---------- */
.h1{font-size:34px;line-height:1.15;letter-spacing:-.02em;margin-bottom:10px}
.h2{font-size:22px;margin:34px 0 12px;letter-spacing:-.01em}
.page{max-width:var(--maxw);margin:0 auto;padding:30px 20px 60px}
.page--narrow{max-width:520px;text-align:center}
.page--art{max-width:760px}
.page__lead,.band__lead{color:var(--muted);max-width:70ch;margin-bottom:14px}
.muted{color:var(--muted);font-size:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.row .btn{flex:1 1 130px}
.note{
background:var(--panel);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
padding:11px 15px;margin:16px 0;font-size:14px;color:var(--muted);max-width:76ch;
}
.note--warn{border-left-color:var(--red)}
.tag{display:inline-block;font-size:11px;border:1px solid var(--line);border-radius:20px;
padding:2px 9px;color:var(--muted);white-space:nowrap}
.tag--free{border-color:var(--green-line);color:var(--green)}
/* ---------- Герой ---------- */
.hero{
max-width:var(--maxw);margin:0 auto;padding:44px 20px 26px;
display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;
}
.hero__h{font-size:46px;line-height:1.06;letter-spacing:-.03em}
.hero__p{color:var(--muted);margin:16px 0 22px;max-width:52ch}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.hero__mini{color:var(--muted);font-size:13px;margin-top:12px}
.hero__shot{position:relative;border-radius:14px;overflow:hidden;background:var(--stage-bg);aspect-ratio:16/9}
.hero__shot img{width:100%;height:100%;object-fit:cover}
.hero__shot::after{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.34) 100%)}
.hero__rec{position:absolute;top:10px;left:12px;display:flex;align-items:center;gap:6px;
font:600 10px/1 Arial;letter-spacing:.14em;color:#fff;text-shadow:0 1px 4px #000}
.hero__rec i{width:7px;height:7px;border-radius:50%;background:#ff4a3d;animation:rec 1.6s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.15}}
/* ---------- Блоки ---------- */
.band{max-width:var(--maxw);margin:0 auto;padding:26px 20px}
.band--cta{text-align:center;padding:46px 20px 70px}
.grid{display:grid;gap:12px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.tile{
display:block;background:var(--panel);border:1px solid transparent;border-radius:var(--radius);
padding:16px;text-decoration:none;transition:border-color .12s,transform .12s;
}
a.tile:hover{border-color:var(--text);transform:translateY(-2px)}
.tile__ico{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
background:var(--panel-2);margin-bottom:10px;font-size:17px}
.tile b{display:block;margin-bottom:4px}
.tile p{color:var(--muted);font-size:14px}
.tile--sm{padding:13px 15px}
.tile.is-locked{opacity:.45}
.city{display:block;text-decoration:none;border-radius:var(--radius);padding:8px;
background:var(--panel);border:1px solid transparent;transition:border-color .12s}
.city:hover,.city.is-on{border-color:var(--accent)}
.city__img{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/10;margin-bottom:8px}
.city__img img{width:100%;height:100%;object-fit:cover}
.city__tint{position:absolute;inset:0}
.city b{display:block;font-size:14.5px}
.city p{color:var(--muted);font-size:12.5px;margin:2px 0 6px}
.citybig{
display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
background:var(--panel);border:2px solid transparent;border-radius:14px;overflow:hidden;
transition:border-color .12s,transform .12s;
}
.citybig:hover{transform:translateY(-2px)}
.citybig.is-on{border-color:var(--accent)}
.citybig__img{position:relative;aspect-ratio:16/9}
.citybig__img img{width:100%;height:100%;object-fit:cover}
.citybig__name{position:absolute;left:14px;bottom:12px;font-weight:800;font-size:22px;color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.8)}
.citybig__body{padding:12px 15px 15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.citybig__body p{flex:1 1 100%;font-size:14px;color:var(--muted)}
/* ---------- ПДД ---------- */
.pddlist{display:grid;gap:6px}
.pddrow{
display:flex;align-items:flex-start;gap:12px;padding:11px 14px;background:var(--panel);
border:1px solid transparent;border-radius:var(--radius);text-decoration:none;transition:border-color .12s;
}
a.pddrow:hover{border-color:var(--text)}
.pddrow--static{cursor:default}
.pddrow__n{flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:var(--panel-2);
display:grid;place-items:center;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pddrow b{display:block;font-size:15px;font-weight:600}
.pddrow__lead{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.pddrow .tag{margin-left:auto;flex:0 0 auto;align-self:center}
.clause{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.clause__n{flex:0 0 auto;width:52px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}
.clause p{max-width:70ch;line-height:1.6}
.clause__note{margin-top:8px;font-size:14px;color:var(--muted);border-left:2px solid var(--line);padding-left:12px}
.artcta{background:var(--panel);border-radius:14px;padding:20px;margin:28px 0 18px}
.artcta b{display:block;font-size:18px}
.artcta p{color:var(--muted);margin:5px 0 14px}
/* ---------- Тарифы ---------- */
.plan{background:var(--panel);border:2px solid transparent;border-radius:14px;padding:20px;
display:flex;flex-direction:column;gap:10px}
.plan--hot{border-color:var(--accent)}
.plan b{font-size:16px}
.plan__p{font-size:34px;font-weight:800;letter-spacing:-.02em}
.plan ul{list-style:none;display:grid;gap:6px;font-size:14px;color:var(--muted);flex:1 1 auto}
.plan li::before{content:"— ";color:var(--accent)}
/* ---------- Рейтинг ---------- */
.top{width:100%;border-collapse:collapse;font-size:15px}
.top th{text-align:left;color:var(--muted);font-size:12.5px;font-weight:600;padding:8px 10px}
.top td{padding:10px;border-top:1px solid var(--line)}
.top tr.is-me{background:var(--panel)}
.top tr.is-me td{color:var(--accent)}
.share{width:100%;border-radius:14px;border:1px solid var(--line);margin-top:8px}
/* ---------- Ачивки ---------- */
.ach{
position:fixed;right:18px;bottom:18px;z-index:9990;display:flex;gap:11px;align-items:center;
background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:12px 16px;
box-shadow:0 8px 30px rgba(0,0,0,.35);animation:achin .35s cubic-bezier(.2,1.4,.4,1);max-width:300px;
}
.ach__ico{font-size:22px;color:var(--accent)}
.ach__hint{color:var(--muted);font-size:13px}
.ach.is-out{animation:achout .4s forwards}
@keyframes achin{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes achout{to{opacity:0;transform:translateY(10px)}}
/* ================= ТРЕНАЖЁР ================= */
.screen{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:var(--bg)}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.top__left,.top__right{display:flex;align-items:center;gap:9px}
.chip{font-size:12px;background:var(--panel-2);border-radius:20px;padding:3px 10px;color:var(--muted)}
.chip--city{border:1px solid var(--line);background:transparent}
.stat{font-size:14px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.stat b{color:var(--text)}
.stat--score{font-weight:700;color:var(--on-accent);background:var(--accent);
border-radius:8px;padding:3px 10px;transition:transform .18s ease}
.stat--score.is-bump{transform:scale(1.14)}
.ring{position:relative;width:38px;height:38px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg);display:block}
.ring__bg{fill:none;stroke:var(--panel-2);stroke-width:3}
.ring__fg{fill:none;stroke:var(--text);stroke-width:3;stroke-linecap:round;
transition:stroke .3s}
.ring.is-low .ring__fg{stroke:var(--red)}
/* Первый круг — бонусное окно: кольцо зелёное и бежит заметно быстрее.
Переход между кругами намеренно резкий: человек должен увидеть,
что бонус кончился, а не гадать. */
.ring.is-bonus .ring__fg{stroke:var(--green);transition:none}
.ring.is-bonus .ring__num{color:var(--green);font-size:12px}
.ring.is-bonus{animation:bonuspulse 1.1s ease-in-out infinite}
@keyframes bonuspulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 5px rgba(94,214,127,.55))}}
.ring__num{position:absolute;inset:0;display:grid;place-items:center;
font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.ring.is-low .ring__num{color:var(--red)}
.progress{display:flex;gap:6px;padding:9px 16px;overflow-x:auto;flex:0 0 auto;scrollbar-width:none}
.progress::-webkit-scrollbar{display:none}
.pg{flex:0 0 auto;width:29px;height:29px;border-radius:8px;background:var(--panel-2);
display:grid;place-items:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.pg.is-ok{background:var(--green-bg);color:var(--green)}
.pg.is-bad{background:var(--red-bg);color:var(--red)}
.pg.is-now{background:var(--text);color:var(--bg);font-weight:700}
.card{
flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--gap);
padding:4px 16px 12px;max-width:900px;width:100%;margin:0 auto;
/* До ответа всё умещается в экран — проверяется замером. После ответа
появляется разбор; вместо того чтобы сплющивать кадр в нечитаемую
полоску, разрешаем прокрутку внутри карточки. */
overflow-y:auto;scrollbar-width:thin;
}
.card__meta{color:var(--muted);font-size:13px;flex:0 0 auto;display:flex;gap:8px;
align-items:center;white-space:nowrap;overflow:hidden}
.card__badge{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:1px 8px;
overflow:hidden;text-overflow:ellipsis}
.stage{
position:relative;flex:1 1 auto;background:var(--stage-bg);border-radius:var(--radius);overflow:hidden;
/* Кадр — предмет продукта. Ужимается, но не исчезает: ниже порога
подсветка знака и разметки перестаёт читаться. */
min-height:clamp(150px,26vh,340px);
/* Пропорция задаётся из app.js по самому снимку. Жёсткие 16:9
обрезали воздух сверху и снизу у наших кадров 2.67:1 —
картинка ужималась вдвое и разглядеть в ней было нечего. */
aspect-ratio:var(--shot, 16/9);
}
.stage__img,.stage__video{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;background:var(--stage-bg)}
.stage__video{display:none}
.stage.is-video .stage__img{display:none}
.stage.is-video .stage__video{display:block}
.stage__overlay,.stage__tint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.28) 100%)}
.stage__rec{position:absolute;top:9px;left:11px;display:flex;align-items:center;gap:6px;
font:600 10px/1 Arial;letter-spacing:.14em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.stage__rec i{width:7px;height:7px;border-radius:50%;background:#ff4a3d;animation:rec 1.6s ease-in-out infinite}
.stage__city{position:absolute;top:9px;right:11px;font:600 10px/1 Arial;letter-spacing:.1em;
text-transform:uppercase;color:#fff;opacity:.75;text-shadow:0 1px 4px rgba(0,0,0,.8)}
/* Кнопка сверки: пользователь должен иметь возможность увидеть, что
мы не подменили билет, а перерисовали ровно эту схему. */
.stage__orig{position:absolute;top:8px;right:10px;z-index:3;
background:rgba(0,0,0,.62);color:#fff;border:1px solid rgba(255,255,255,.28);
font:600 11px/1 inherit;letter-spacing:.02em;padding:6px 10px;border-radius:999px;
cursor:pointer;backdrop-filter:blur(4px);transition:background .15s,border-color .15s}
.stage__orig:hover{background:rgba(0,0,0,.82);border-color:rgba(255,255,255,.5)}
.stage__orig.is-on{background:#ffd24a;color:#1a1a1a;border-color:#ffd24a}
.stage.has-orig .stage__city{top:34px}
.stage.is-orig .stage__overlay{display:none}
.stage__badge{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.75);color:#fff;
font-size:12px;padding:5px 10px;border-radius:6px;max-width:76%}
.stage__peek{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.3);
color:#fff;font-size:72px;font-weight:800;text-shadow:0 2px 20px rgba(0,0,0,.7)}
.stage__skeleton{position:absolute;inset:0;
background:linear-gradient(100deg,#141414 30%,#1e1e1e 50%,#141414 70%);background-size:300% 100%;
animation:sk 1.2s linear infinite}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}
.pointsfly.is-bonus{color:#8dff9f}
.pointsfly{position:absolute;right:12px;top:12px;font-weight:800;font-size:22px;color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.75);animation:fly 1s ease-out forwards;pointer-events:none}
@keyframes fly{0%{opacity:0;transform:translateY(10px) scale(.9)}
18%{opacity:1;transform:translateY(0) scale(1.06)}100%{opacity:0;transform:translateY(-26px) scale(1)}}
.card__q{font-size:19px;line-height:1.35;font-weight:700;flex:0 0 auto}
.options{list-style:none;display:grid;gap:8px;flex:0 0 auto}
.opt{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;font:inherit;color:inherit;
cursor:pointer;background:var(--panel);border:1px solid transparent;border-radius:var(--radius);
padding:11px 13px;transition:background .1s,border-color .1s}
.opt:hover:not(:disabled){background:var(--panel-2)}
.opt:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.opt:disabled{cursor:default}
.opt__key{flex:0 0 auto;width:21px;height:21px;border-radius:5px;background:var(--panel-2);
color:var(--muted);font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.opt.is-correct{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.opt.is-wrong{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.opt.is-correct .opt__key,.opt.is-wrong .opt__key{background:transparent}
.review{flex:0 0 auto;border-top:1px solid var(--line);padding-top:10px}
.review__text{font-size:14px;line-height:1.5;max-width:72ch}
.review__clause{font-size:13px;color:var(--muted);margin-top:4px}
.review__actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.review__hint{font-size:12px;color:var(--muted);margin-left:auto}
.legal{flex:0 0 auto;padding:7px 16px 9px;color:var(--muted);font-size:11px;text-align:center}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.card.is-wrong .stage{animation:shake .32s ease}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.012)}100%{transform:scale(1)}}
.card.is-ok .stage{animation:pop .34s ease}
@keyframes blink{0%,45%{opacity:1}55%,100%{opacity:0}}
.ov-blink{animation:blink .9s steps(1,end) infinite}
/* ---------- Подвал ---------- */
.foot{border-top:1px solid var(--line);background:var(--panel);margin-top:20px}
.foot__in{max-width:var(--maxw);margin:0 auto;padding:30px 20px 40px;
display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.foot__in b{display:block;margin-bottom:8px;font-size:14px}
.foot__in a{display:block;color:var(--muted);font-size:14px;text-decoration:none;margin-bottom:5px}
.foot__in a:hover{color:var(--text)}
.foot__note{color:var(--muted);font-size:13px;margin-top:10px;max-width:40ch}
@media (prefers-reduced-motion:reduce){*,*::after{animation:none !important;transition:none !important}}
/* ---------- Мобильная раскладка ---------- */
@media (max-width:900px){
.hero{grid-template-columns:1fr;padding-top:26px}
.hero__h{font-size:34px}
.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
.foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.site{padding:9px 12px;gap:10px}
.site__nav{display:none}
.h1{font-size:27px}
.hero__h{font-size:29px}
.page,.band,.hero{padding-left:14px;padding-right:14px}
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
.card{padding:4px 12px 10px;gap:10px}
.card__q{font-size:17px}
.opt{padding:10px 11px;font-size:15px}
.opt__key{display:none} /* на телефоне палец, а не клавиатура */
.review__text{font-size:13px}
.review__hint{display:none}
.pg{width:27px;height:27px;font-size:12px}
.top{padding:7px 12px;gap:7px}
.chip{display:none}
.card__badge{display:none}
.ring{width:34px;height:34px}
.ach{left:12px;right:12px;max-width:none}
.foot__in{grid-template-columns:1fr}
}
@media (max-height:700px){
.card__q{font-size:16px}
.opt{padding:9px 11px}
.legal{display:none}
}
/* ---------- Сюжет ---------- */
.chapters{display:grid;gap:6px}
.chapter{
display:flex;align-items:center;gap:13px;padding:12px 15px;background:var(--panel);
border:1px solid transparent;border-radius:var(--radius);text-decoration:none;transition:border-color .12s;
}
.chapter:hover{border-color:var(--text)}
.chapter.is-locked{opacity:.4;pointer-events:none}
.chapter.is-done{border-color:var(--green-line)}
.chapter__n{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--panel-2);
display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.chapter.is-done .chapter__n{background:var(--green-bg);color:var(--green)}
.chapter__body{flex:1 1 auto;min-width:0}
.chapter__body b{display:block;font-size:15.5px}
.chapter__place{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.chapter__cards{flex:0 0 auto;font-size:12px;color:var(--muted)}
.cut{margin:18px 0 20px}
/* Кат-сцены вертикальные 9:16 — их смотрят с телефона, и каждая сразу
годится в рилс. Карточки тренажёра при этом остаются 16:9: там содержание
живёт по бокам, и обрезка в вертикаль сломала бы дорожную ситуацию. */
.cut__stage{
display:grid;place-items:center;background:var(--panel);border-radius:14px;padding:16px;
}
.cut__poster{
position:relative;aspect-ratio:9/16;width:min(280px,62vw);border-radius:12px;
background:var(--stage-bg);display:grid;place-items:center;overflow:hidden;text-align:center;
background-image:repeating-linear-gradient(45deg,#141414 0 12px,#191919 12px 24px);
}
.cut__len{position:absolute;top:10px;left:0;right:0;text-align:center;font:600 10px/1 Arial;letter-spacing:.13em;
color:#fff;opacity:.6;text-transform:uppercase}
.cut__todo{color:#6f6d68;font-size:14px}
.cut__beat{color:var(--muted);font-size:14px;margin:12px 0 4px;max-width:70ch}
.cut__len2{color:var(--muted);font-size:12px;opacity:.75;margin-bottom:12px}
.dialog{display:grid;gap:8px}
.dialog__l{background:var(--panel);border-radius:10px;padding:10px 14px;max-width:74ch;line-height:1.5}
.dialog__l b{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:2px}
.dialog__l.is-hero{background:transparent;border:1px solid var(--line)}
.spoiler{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.spoiler summary{cursor:pointer;color:var(--muted);font-size:14px}
.spoiler pre{white-space:pre-wrap;background:var(--panel);border-radius:10px;padding:14px;
margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted)}
/* ---------- Платный барьер ---------- */
.tag--pay{border-color:var(--accent);color:var(--accent)}
.paybox{
background:var(--panel);border:2px solid var(--accent);border-radius:14px;
padding:22px;margin:24px 0 16px;
}
.paybox__tag{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent);margin-bottom:8px}
.paybox__h{display:block;font-size:24px;letter-spacing:-.01em}
.paybox__p{color:var(--muted);margin:8px 0 12px;max-width:60ch}
/* Мелкий шрифт, который на самом деле важнее крупного: он отделяет
художественную реплику администратора от того, что человек покупает. */
.paybox__fine{font-size:12.5px;line-height:1.5;color:var(--muted);
border-left:2px solid var(--line);padding-left:12px;margin:0 0 16px;max-width:62ch}
.paysum{background:var(--panel);border-radius:14px;padding:6px 18px;margin:18px 0 14px;text-align:left}
.paysum__row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
border-bottom:1px solid var(--line);font-size:15px}
.paysum__row:last-child{border-bottom:none}
.paysum__row b{color:var(--muted);font-weight:600;white-space:nowrap}
.paysum__row--total b{color:var(--accent);font-size:22px}
.paysum__row--total span{font-weight:600}
/* ---------- Модальное окно ---------- */
body.is-modal{overflow:hidden}
.modal{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.62);
display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.modal__box{position:relative;background:var(--bg);border:1px solid var(--line);
border-radius:16px;padding:26px;max-width:400px;width:100%;max-height:90vh;overflow-y:auto}
.modal__x{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--muted);
font-size:16px;cursor:pointer;line-height:1;padding:4px}
.modal__x:hover{color:var(--text)}
.modal__h{font-size:22px;margin-bottom:6px}
.modal__p{color:var(--muted);font-size:14px;margin-bottom:16px}
.modal__alt{margin-top:14px;font-size:14px;color:var(--muted);text-align:center}
.modal__fine{margin-top:14px;font-size:12px;color:var(--muted);border-left:2px solid var(--line);
padding-left:10px;line-height:1.45}
.form{display:grid;gap:12px}
.field{display:grid;gap:5px}
.field span{font-size:13px;color:var(--muted)}
.field input{
font:inherit;padding:11px 13px;border-radius:var(--radius);border:1px solid var(--line);
background:var(--panel);color:var(--text);width:100%;
}
.field input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.45}
.check input{margin-top:2px;accent-color:var(--accent);width:16px;height:16px;flex:0 0 auto}
.linkbtn{background:none;border:none;color:var(--text);text-decoration:underline;
text-decoration-color:var(--accent);text-underline-offset:3px;cursor:pointer;font:inherit;padding:0}
/* ---------- Билеты ---------- */
.tickets{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.tk{position:relative;display:block;background:var(--panel);border:1px solid transparent;
border-radius:var(--radius);padding:12px 14px 15px;text-decoration:none;overflow:hidden;
transition:border-color .12s,transform .12s}
a.tk:hover{border-color:var(--text);transform:translateY(-2px)}
.tk b{display:block;font-size:15px}
.tk span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.tk i{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);display:block}
.tk.is-soon{opacity:.4;pointer-events:none}
.tk.is-done{border-color:var(--green-line)}
/* ---------- Кабинет ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 8px}
.kpi{background:var(--panel);border-radius:var(--radius);padding:16px;text-align:center}
.kpi b{display:block;font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
/* ---------- Стена лимита ---------- */
.limit{margin:auto;max-width:460px;text-align:center;padding:20px 0}
.limit__h{display:block;font-size:24px;letter-spacing:-.01em;margin-bottom:8px}
.limit__p{color:var(--muted);margin-bottom:6px}
.limit__fine{margin-top:16px;font-size:12.5px;color:var(--muted)}
.limit .row{justify-content:center}
/* заход 99: в ряду три кнопки с очень разными подписями — «Оплатить»,
«Билет № 1 — бесплатно», «Читать правила». Общее правило .row .btn
делит ширину поровну (flex:1 1 130px): короткой подписи достаётся
лишняя ширина, длинная не влезает и переносится на вторую строку.
Кнопки выходят разной высоты, а текст в короткой встаёт выше соседнего —
это и читается как «кнопка кривая, текст уехал». Здесь кнопка равна своей
подписи, текст центрируется по обеим осям, высота у всех одна. */
.limit .row .btn{
flex:0 1 auto;
display:inline-flex;align-items:center;justify-content:center;
min-height:46px;padding:8px 20px;line-height:1.25;
}
@media (max-width:560px){
/* На телефоне кнопки встают столбиком во всю ширину. Пополам они не
делятся: «Билет № 1 — бесплатно» в половину экрана не влезает и рвётся
на две строки — кнопки опять разной высоты. Столбик читается сверху
вниз по важности и у всех одна высота. */
.limit .row{flex-direction:column;align-items:stretch}
.limit .row .btn{flex:0 0 auto;width:100%}
}
.stat b{color:var(--text)}
@media (max-width:560px){
.kpis{grid-template-columns:repeat(2,1fr)}
.tickets{grid-template-columns:repeat(2,1fr)}
.modal__box{padding:20px}
}
/* ---------- статические SEO-страницы ---------- */
body.seo{max-width:820px;margin:0 auto;padding:18px 16px 48px}
.seo__top{padding:8px 0 14px}
.seo__crumbs{font-size:13px;opacity:.7;margin-bottom:14px}
.seo__crumbs a{color:inherit}
.seo__card h1{font-size:22px;margin:0 0 6px}
.seo__card h2{font-size:18px;font-weight:600;margin:28px 0 12px}
.seo__card h1+p{margin-top:0}
.seo__card h3{font-size:15px;margin:20px 0 6px;opacity:.75}
.seo__card img{width:100%;height:auto;border-radius:12px;margin:0 0 14px}
.seo__opts,.seo__list{padding-left:22px;margin:0 0 14px}
.seo__opts li,.seo__list li{margin:6px 0}
.seo__opts li.is-right{color:var(--green)}
.seo__ans{margin:10px 0 18px}
.seo__cta{margin:18px 0}
.seo__near{font-size:14px;opacity:.8;margin-top:22px}
.seo__near a{display:inline-block;min-width:26px;text-align:center;margin:2px;padding:2px 6px;
border:1px solid var(--line);border-radius:6px;color:inherit;text-decoration:none}
.seo__faq{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0}
.seo__faq summary{cursor:pointer;font-weight:600;list-style:none}
.seo__faq summary::-webkit-details-marker{display:none}
.seo__faq summary::before{content:"+\00a0";opacity:.6}
.seo__faq[open] summary::before{content:"\2013\00a0"}
.seo__faq p{margin:10px 0 2px;opacity:.85}
.seo__card p{line-height:1.6}
.seo__foot{margin-top:36px;font-size:13px;opacity:.55}
/* ---------- главная: десять бесплатных ---------- */
.band__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.band__cnt{font-size:14px;opacity:.6;white-space:nowrap}
.band__note{margin-top:14px;font-size:13px;opacity:.6;line-height:1.5}
.qlist{display:grid;gap:8px;margin-top:14px}
.qrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);
border-radius:12px;background:var(--card-bg,rgba(255,255,255,.02));color:inherit;
text-decoration:none;transition:.12s}
.qrow:hover{border-color:var(--accent,#7aa2f7)}
.qrow__n{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:50%;
border:1px solid var(--line);font-size:12px;opacity:.7}
.qrow.is-done .qrow__n{background:var(--green-bg);color:var(--green);border-color:transparent}
.qrow.is-done .qrow__n::before{content:"✓"}
.qrow.is-done .qrow__n{font-size:0}
.qrow.is-done .qrow__n::before{font-size:13px}
.qrow__body{flex:1;min-width:0;display:grid;gap:2px}
.qrow__body b{font-size:13px;font-weight:600}
.qrow__t{font-size:12px;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow__pic{flex:0 0 72px;width:72px;height:41px;border-radius:6px;object-fit:cover;
object-position:center}
.qrow__pic--txt{background:repeating-linear-gradient(45deg,var(--line),var(--line) 2px,
transparent 2px,transparent 7px);opacity:.5}
.qlist__cta{margin-top:16px}
/* ---------- плитки режимов ---------- */
.mode{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;
color:inherit;text-decoration:none;transition:.12s}
.mode:hover{border-color:var(--accent,#7aa2f7)}
.mode__img{display:block;aspect-ratio:9/16;background:#111}
.mode__img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.mode__img.is-empty{background:repeating-linear-gradient(45deg,#1b1b1e,#1b1b1e 8px,#151517 8px,#151517 16px)}
.mode b{display:block;padding:12px 14px 4px;font-size:15px}
.mode p{margin:0;padding:0 14px 14px;font-size:13px;opacity:.7;line-height:1.45}
/* ---------- цены ---------- */
.price{border:1px solid var(--line);border-radius:14px;padding:16px}
.price--best{border-color:var(--accent,#7aa2f7)}
.price b{display:block;font-size:14px;opacity:.75}
.price__v{display:block;font-size:26px;font-weight:700;margin:6px 0 8px}
.price p{margin:0;font-size:13px;opacity:.7;line-height:1.45}
/* ---------- лист наград ---------- */
.awards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}
.award{border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;
opacity:.45}
.award.is-got{opacity:1;border-color:var(--accent,#7aa2f7)}
.award__ico{display:block;font-size:26px;line-height:1;margin-bottom:8px}
.award b{display:block;font-size:13px}
.award p{margin:4px 0 0;font-size:11px;opacity:.65;line-height:1.35;min-height:1em}
/* ---------- оверлей награды ---------- */
.awardpop{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
background:rgba(0,0,0,.62);opacity:0;transition:opacity .2s}
.awardpop.is-in{opacity:1}
.awardpop.is-out{opacity:0}
.awardpop__box{width:min(360px,88vw);background:var(--bg,#1c1f25);border:1px solid var(--line);
border-radius:16px;padding:26px 22px 18px;text-align:center;
transform:translateY(10px);transition:transform .2s}
.awardpop.is-in .awardpop__box{transform:none}
.awardpop__ico{display:block;font-size:44px;line-height:1;color:#ffdb4d}
.awardpop__kicker{display:block;margin-top:10px;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;opacity:.55}
.awardpop__t{display:block;font-size:19px;margin:6px 0 4px}
.awardpop__h{margin:0 0 18px;font-size:13px;opacity:.7;line-height:1.45}
.awardpop__row{display:grid;gap:8px}
@media (max-width:640px){
.awards{grid-template-columns:repeat(2,1fr)}
.qrow__pic{flex-basis:56px;width:56px;height:32px}
}
@media (prefers-reduced-motion:reduce){
.awardpop,.awardpop__box{transition:none}
}
.chlist{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px;counter-reset:none}
.chrow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.chrow b{font-size:14px}
.chrow span{grid-column:1;font-size:12px;opacity:.6}
.chrow em{grid-row:1/3;grid-column:2;font-style:normal;font-size:13px;opacity:.7;white-space:nowrap}
.chrow.is-free em{color:var(--green)}
/* ---------- галерея: горизонталь = другой билет ---------- */
.gal{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;margin-top:16px}
.gal__stage{min-width:0}
.gal__nav{height:44px;border:1px solid var(--line);border-radius:12px;background:transparent;
color:inherit;font-size:22px;line-height:1;cursor:pointer;transition:.12s}
.gal__nav:hover{border-color:var(--accent,#7aa2f7)}
.gal__dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.dot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--line);
background:transparent;cursor:pointer}
.dot.is-done{background:var(--green)}
.dot.is-on{outline:2px solid var(--accent,#7aa2f7);outline-offset:2px}
/* ---------- карточка вопроса на главной ---------- */
.qcard{border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px}
.qcard__meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;opacity:.6}
.qcard__topic{opacity:.75}
.qcard__shot{margin:12px 0;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#111}
.qcard__shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.qcard__q{font-size:17px;margin:10px 0 12px;font-weight:600;line-height:1.35}
.qcard__opts{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.qcard__opts .opt{width:100%;text-align:left}
.qcard__why{margin-top:14px;padding:12px 13px;border-left:3px solid var(--line);
border-radius:0 8px 8px 0;background:rgba(127,127,127,.07);font-size:13px;line-height:1.5}
.qcard__why p{margin:0}
.qcard__cl{display:block;margin-top:6px;opacity:.6;font-size:12px}
/* ---------- карточка билета ---------- */
.tcard{border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center}
.tcard__kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.tcard__n{display:block;font-size:30px;margin:6px 0 2px}
.tcard__s{margin:0 0 14px;font-size:13px;opacity:.7}
.tcard__blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.tblock{border:1px solid var(--line);border-radius:10px;padding:8px 4px;font-size:11px;opacity:.8}
.tblock i{display:block;font-style:normal;font-size:14px;margin-top:3px}
.tblock.is-empty{opacity:.35}
.tblock.is-done{border-color:var(--green);color:var(--green)}
/* ---------- фрейм с промптом вместо ещё не снятого кадра ---------- */
.mode__img{position:relative}
.pbox{display:none;position:absolute;inset:0;flex-direction:column;background:#101013;
padding:8px;gap:6px}
.mode__img.is-prompt .pbox{display:flex}
.mode__img.is-prompt{background:#101013}
.pbox__top{display:flex;align-items:center;justify-content:space-between;gap:8px;
font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.55;color:#e9ecf1}
.pbox__copy{border:1px solid #3a3f4a;background:transparent;color:#e9ecf1;border-radius:6px;
padding:3px 8px;font-size:10px;cursor:pointer;text-transform:none;letter-spacing:0}
.pbox__copy:hover{border-color:#7aa2f7}
.pbox__txt{flex:1;width:100%;resize:none;border:0;background:transparent;color:#aab0bb;
font:400 10px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;outline:0;padding:0}
@media (max-width:640px){
.gal{grid-template-columns:36px 1fr 36px;gap:6px}
.gal__nav{height:38px;font-size:19px}
.tcard__blocks{gap:6px}
}
/* ---------- главная: билет первым экраном ---------- */
.band--first{padding-top:8px}
.h1--tight{font-size:24px;line-height:1.2;margin:0}
.band--first .band__head{align-items:flex-start}
.gal__stage{display:flex;align-items:flex-start}
.gal__stage .qcard{width:100%}
/* оверлей стрелок поверх кадра карточки */
.qcard__shot{position:relative}
.qcard__shot svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* точки: зелёная — верно, красная — ошибка */
.dot.is-ok{background:var(--green);border-color:transparent}
.dot.is-bad{background:var(--red);border-color:transparent}
.dot.is-done{background:var(--green)}
/* ---------- оживление на наведении ----------
Всё через transform и opacity: они не заставляют браузер пересчитывать
раскладку, поэтому не роняют страницу так, как это делал курсор со шлейфом. */
.mode{position:relative;transition:transform .28s cubic-bezier(.2,.7,.3,1),
border-color .28s, box-shadow .28s}
.mode__img img{transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .35s}
.mode::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));opacity:.85;transition:opacity .3s}
.mode b,.mode p{position:relative;z-index:2}
@media (hover:hover){
.mode:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.mode:hover .mode__img img{transform:scale(1.06);filter:saturate(1.08) brightness(1.05)}
.mode:hover::after{opacity:.55}
}
/* ---------- гараж ---------- */
.vault{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.vbox{border:1px solid var(--line);border-radius:14px;overflow:hidden;
transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s, box-shadow .28s}
.vbox__img{position:relative;aspect-ratio:9/16;background:#111;overflow:hidden}
.vbox__img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .4s}
.vbox__img.is-fallback{background:
repeating-linear-gradient(90deg,#241f1c,#241f1c 14px,#1c1815 14px,#1c1815 28px)}
/* Закрытый кейс не размывается и не сереет: это настоящее место, и оно должно
выглядеть настоящим. Закрытость читается по самому кадру — ворота заперты. */
.vbox__tag{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:999px;
font-size:10px;letter-spacing:.06em;text-transform:uppercase;
background:rgba(8,8,10,.72);color:#d8dbe2;backdrop-filter:blur(3px)}
.vbox.is-open .vbox__tag{background:rgba(30,120,60,.85);color:#eafff0}
.vbox__body{padding:11px 12px 13px}
.vbox__body b{display:block;font-size:13px}
.vbox__t{display:block;font-size:11px;opacity:.6;margin:2px 0 8px;line-height:1.3}
.vbox__bar{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.vbox__bar i{display:block;height:100%;background:var(--green);transition:width .6s}
.vbox__n{display:block;font-size:11px;opacity:.5;margin-top:5px}
.vbox__line{display:block;font-style:normal;font-size:11px;opacity:.75;margin-top:7px;line-height:1.4}
.vbox.is-open{border-color:var(--green)}
@media (hover:hover){
.vbox:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.vbox.is-open:hover .vbox__img img{transform:scale(1.05)}
.vbox:not(.is-open):hover .vbox__lock{opacity:.8}
}
/* фрейм промпта под вертикальный кадр */
.pbox__txt{font-size:9px;line-height:1.3}
@media (max-width:900px){ .vault{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .vault{grid-template-columns:repeat(2,1fr);gap:10px} }
@media (prefers-reduced-motion:reduce){
.mode,.mode__img img,.vbox,.vbox__img img,.vbox__lock{transition:none}
.mode:hover,.vbox:hover{transform:none}
}
/* ---------- УХ: шапка блока, отступы, высота сцены ---------- */
.band--first{padding-top:14px}
.band--first .band__head{align-items:baseline;gap:16px;margin-bottom:6px}
.h1--tight{font-size:26px;line-height:1.25;margin:0;letter-spacing:-.01em}
.band__cnt{font-size:13px;opacity:.55;white-space:nowrap;font-variant-numeric:tabular-nums}
.band--first .band__lead{margin:0 0 4px;max-width:62ch;font-size:14px;line-height:1.5;opacity:.7}
/* сцена подстраивается под карточку и меняет высоту плавно */
.gal{align-items:start;margin-top:14px}
.gal__stage{overflow:hidden;transition:height .26s cubic-bezier(.2,.7,.3,1)}
.gal__nav{align-self:center}
/* место под разбор зарезервировано всегда — ответ не двигает низ карточки */
.qcard{padding:14px 16px 14px}
.qcard__meta{margin-bottom:10px;line-height:1.4}
.qcard__q{font-size:17px;margin:12px 0 12px}
.qcard__opts{gap:7px}
.qcard__why{margin-top:12px;min-height:62px;display:flex;flex-direction:column;justify-content:center}
.qcard__why[hidden]{display:flex;visibility:hidden}
.gal__dots{margin-top:14px}
@media (prefers-reduced-motion:reduce){ .gal__stage{transition:none} }
@media (max-width:640px){
.h1--tight{font-size:21px}
.band--first .band__head{flex-direction:column;gap:2px}
.qcard__why{min-height:78px}
}
/* промпт-фрейм внутри кейса */
.vbox__img{position:relative}
.vbox__img .pbox{padding:7px}
.vbox__img .pbox__txt{font-size:8px;line-height:1.3}
.vbox__img.is-prompt .pbox{display:flex}
.vbox__img.is-prompt{background:#101013}
.vbox__body{padding:11px 12px 13px}
/* ---------- кейсы: оживление на наведении ----------
Только transform, opacity и filter — раскладку они не трогают, поэтому
семь карточек с наведением не роняют страницу. */
.vbox{position:relative;isolation:isolate}
.vbox__img::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 38%,transparent 62%,rgba(0,0,0,.42));
transition:opacity .35s;opacity:.9}
.vbox__sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vbox__sheen i{position:absolute;top:-30%;bottom:-30%;width:38%;left:-45%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
transform:skewX(-12deg);opacity:0}
.vbox__hint{position:absolute;left:8px;right:8px;bottom:8px;padding:7px 9px;border-radius:9px;
font-size:11px;line-height:1.35;color:#e8ebf1;background:rgba(8,8,10,.78);
opacity:0;transform:translateY(6px);transition:opacity .28s,transform .28s;pointer-events:none}
.vbox__tag{transition:opacity .25s}
@media (hover:hover){
.vbox:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.42);
border-color:rgba(255,255,255,.22)}
.vbox:hover .vbox__img img{transform:scale(1.06);filter:brightness(1.1) saturate(1.06)}
.vbox:hover .vbox__img::after{opacity:.55}
.vbox:hover .vbox__sheen i{animation:sheen .85s cubic-bezier(.3,.6,.3,1) forwards}
.vbox:hover .vbox__hint{opacity:1;transform:none}
.vbox:hover .vbox__tag{opacity:0}
.vbox.is-open:hover{border-color:var(--green)}
}
@keyframes sheen{ from{left:-45%;opacity:0} 25%{opacity:1} to{left:115%;opacity:0} }
@media (prefers-reduced-motion:reduce){
.vbox,.vbox__img img,.vbox__hint{transition:none}
.vbox:hover{transform:none}
.vbox:hover .vbox__img img{transform:none}
.vbox:hover .vbox__sheen i{animation:none}
}
/* ---------- кнопка «смотреть» на открытом кейсе ---------- */
.vbox__play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
border:0;border-radius:50%;background:rgba(10,10,12,.62);cursor:pointer;padding:0;
display:grid;place-items:center;backdrop-filter:blur(3px);
transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s;z-index:3}
.vbox__play i{width:0;height:0;margin-left:3px;
border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
@media (hover:hover){ .vbox:hover .vbox__play{transform:scale(1.12);background:rgba(10,10,12,.8)} }
/* ---------- оверлей открытия кейса и лайтбокс ---------- */
.vaultpop{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;padding:16px;
background:rgba(0,0,0,.72);opacity:0;transition:opacity .22s}
.vaultpop.is-in{opacity:1}
.vaultpop.is-out{opacity:0}
.vaultpop__box{width:min(360px,92vw);background:var(--bg,#1c1f25);border:1px solid var(--line);
border-radius:16px;overflow:hidden;transform:translateY(12px);transition:transform .22s;
max-height:92vh;overflow-y:auto}
.vaultpop.is-in .vaultpop__box{transform:none}
.vaultpop__media{background:#000;aspect-ratio:9/16;max-height:62vh}
.vaultpop.is-plain .vaultpop__media{max-height:78vh}
.vaultpop__media video,.vaultpop__media img{width:100%;height:100%;object-fit:contain;display:block}
.vaultpop__kicker{display:block;padding:14px 18px 0;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;opacity:.55}
.vaultpop__t{display:block;padding:4px 18px 0;font-size:19px}
.vaultpop__line{margin:6px 0 0;padding:0 18px;font-size:13px;opacity:.75;line-height:1.45}
.vaultpop__note{margin:8px 0 0;padding:0 18px;font-size:12px;opacity:.5;line-height:1.4}
.vaultpop__row{display:grid;gap:8px;padding:16px 18px 18px}
.vaultpop.is-plain .vaultpop__row{padding:12px}
@media (prefers-reduced-motion:reduce){ .vaultpop,.vaultpop__box{transition:none} }
/* ---------- фрейм карточки: кадр всегда, стрелки на месте ---------- */
.qcard__shot{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
background:#111;margin:12px 0}
.qcard__shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.qcard__shot.is-plain img{filter:brightness(.62) saturate(.7)}
.qcard__shot.is-empty{background:
repeating-linear-gradient(45deg,#17171a,#17171a 8px,#141416 8px,#141416 16px)}
.qcard__plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#c9cdd6;
background:rgba(8,8,10,.55);padding:5px 12px;border-radius:999px;backdrop-filter:blur(3px)}
.gal__stage{overflow:hidden}
.gal__nav{align-self:center;position:sticky;top:auto}
/* ---------- плитки режимов: видео, градиент, кнопка ---------- */
.mode{display:block;position:relative;border:1px solid var(--line);border-radius:14px;
overflow:hidden;color:inherit;text-decoration:none}
.mode__img{position:relative;display:block;aspect-ratio:9/16;background:#111}
.mode__img img,.mode__vid{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;display:block}
.mode__vid{opacity:0;transition:opacity .35s}
.mode.is-playing .mode__vid{opacity:1}
.mode__grad{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 32%,
rgba(0,0,0,.45) 62%,rgba(0,0,0,.86) 100%)}
.mode__cap{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 14px;z-index:2}
.mode__cap b{display:block;font-size:17px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.mode__cap p{margin:4px 0 10px;font-size:12px;line-height:1.4;color:#dfe3ea;
text-shadow:0 1px 10px rgba(0,0,0,.6)}
.mode__btn{display:inline-block;padding:8px 14px;border-radius:999px;font-size:13px;
font-weight:600;color:#1a1a1a;background:#ffdb4d;
transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s}
.mode__img.is-prompt .mode__grad,.mode__img.is-prompt .mode__cap{display:none}
@media (hover:hover){
.mode:hover{border-color:rgba(255,255,255,.24)}
.mode:hover .mode__btn{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,219,77,.28)}
.mode:hover .mode__grad{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,transparent 38%,
rgba(0,0,0,.4) 64%,rgba(0,0,0,.88) 100%)}
}
/* ---------- кейсы: метка ролика, кнопка перехода, бонус ---------- */
.vbox__film{position:absolute;right:8px;top:8px;padding:3px 7px;border-radius:6px;
font-size:10px;letter-spacing:.05em;background:rgba(8,8,10,.75);color:#e6e9ef;z-index:3}
.vbox__go{display:inline-block;margin-top:9px;font-size:12px;color:var(--accent,#7aa2f7);
text-decoration:none}
.vbox__go:hover{text-decoration:underline}
.vbox.is-bonus{border-style:dashed}
.vbox.is-bonus .vbox__tag{background:rgba(120,90,20,.85);color:#ffe9a8}
.vbox.is-bonus.is-open{border-style:solid;border-color:#ffdb4d}
/* ---------- приветственное открытие первого места ---------- */
.vbox.is-opening .vbox__img img{animation:vopen .6s ease forwards}
.vbox.is-opening .vbox__tag,.vbox.is-opening .vbox__film{opacity:0;transition:opacity .3s}
@keyframes vopen{
0%{transform:none;filter:none}
45%{transform:scale(1.04);filter:brightness(1.25)}
100%{transform:scale(1.02);filter:brightness(1.05)}
}
.vtoast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,14px);z-index:10002;
display:flex;align-items:center;gap:12px;padding:11px 12px 11px 16px;border-radius:14px;
background:rgba(18,19,23,.94);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.5);
opacity:0;transition:opacity .3s, transform .3s;max-width:min(460px,92vw)}
.vtoast.is-in{opacity:1;transform:translate(-50%,0)}
.vtoast b{font-size:13px;white-space:nowrap}
.vtoast span{font-size:12px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtoast .btn{padding:7px 14px;font-size:13px;white-space:nowrap}
.vbox.is-welcome{border-color:rgba(255,219,77,.5)}
@media (max-width:640px){ .vtoast{left:12px;right:12px;transform:translateY(14px);max-width:none}
.vtoast.is-in{transform:none} .vtoast span{display:none} }
@media (prefers-reduced-motion:reduce){
.vbox.is-opening .vbox__img img{animation:none}
.vtoast{transition:none}
}
/* ---------- немое превью ролика в карточке кейса ---------- */
.vbox__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center;display:block;opacity:0;transition:opacity .35s;z-index:1}
.vbox.is-peeking .vbox__vid{opacity:1}
.vbox.is-peeking .vbox__img img{opacity:0;transition:opacity .35s}
.vbox__play{z-index:4}
.vbox.is-peeking .vbox__play{opacity:0;transition:opacity .25s}
.vbox.is-peeking .vbox__hint,.vbox.is-peeking .vbox__tag{opacity:0}
/* ---------- шапка: три зоны, меню строго по центру ---------- */
.site{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
padding:10px 18px}
.site .brand{justify-self:start}
.site__nav{justify-self:center;display:flex;gap:22px;font-size:14px;white-space:nowrap}
.site__nav a{color:var(--muted);text-decoration:none;padding:6px 2px;position:relative;
transition:color .18s}
.site__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .2s}
.site__nav a:hover{color:var(--text)}
.site__nav a:hover::after{transform:scaleX(1)}
.site__right{justify-self:end;margin-left:0;display:flex;align-items:center;gap:8px}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px}
.site__right .btn{height:34px;display:inline-flex;align-items:center;padding:0 14px;
font-size:13.5px;white-space:nowrap}
@media (max-width:900px){
.site{grid-template-columns:auto 1fr;padding:9px 12px}
.site__nav{display:none}
.site__right{grid-column:2}
}
/* ---------- галерея: стрелки прибиты к центру кадра ---------- */
.gal{position:relative;display:block;margin-top:14px}
.gal__stage{height:auto!important;transition:none}
.gal__nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
z-index:5;background:rgba(14,15,18,.72);backdrop-filter:blur(4px)}
.gal__nav--prev{left:-52px}
.gal__nav--next{right:-52px}
@media (max-width:1080px){
.gal__nav--prev{left:6px}
.gal__nav--next{right:6px}
}
/* ---------- кейс: курсор-ключ и вход в ролик ---------- */
.vbox[data-play]{cursor:url("data:image/svg+xml;utf8,\
") 8 8, pointer}
.vbox__play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
border-radius:50%;background:rgba(10,10,12,.6);display:grid;place-items:center;
backdrop-filter:blur(3px);z-index:4;pointer-events:none;
transition:transform .25s cubic-bezier(.2,.7,.3,1), opacity .25s}
.vbox__play i{width:0;height:0;margin-left:4px;
border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
@media (hover:hover){ .vbox[data-play]:hover .vbox__play{transform:scale(1.14)} }
/* лайтбокс: подпись под роликом */
.vaultpop__row .vaultpop__t{padding:0;margin:0 0 2px;font-size:16px}
.vaultpop__row .vaultpop__line{padding:0;margin:0 0 10px}
/* ============================================================
ГЛАВНАЯ КАК ИГРОВОЙ ЛЕНДИНГ
Первый экран — баннер и одна кнопка. Шапка поверх него: пункты
разделов главной и пункты отдельных страниц разведены чертой,
чтобы человек видел, что одно листает, а другое уводит.
============================================================ */
/* ---------- шапка ---------- */
.site{
background:color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter:saturate(1.3) blur(10px);
-webkit-backdrop-filter:saturate(1.3) blur(10px);
}
.site__nav{gap:4px;align-items:center}
.site__nav .nav{
display:inline-flex;align-items:center;height:32px;padding:0 12px;
border-radius:8px;font-size:14px;font-weight:600;letter-spacing:.01em;
color:var(--muted);text-decoration:none;white-space:nowrap;
transition:color .16s, background-color .16s;
}
.site__nav .nav::after{display:none} /* подчёркивание из старой шапки не нужно */
.site__nav .nav:hover{color:var(--text);background:var(--panel)}
.site__nav .nav--anchor{color:var(--text)}
.site__nav .nav--anchor::before{
content:"";width:5px;height:5px;margin-right:7px;border-radius:50%;
background:var(--accent);opacity:.55;transition:opacity .16s, transform .16s;
}
.site__nav .nav--anchor:hover::before{opacity:1;transform:scale(1.35)}
.site__sep{width:1px;height:18px;margin:0 8px;background:var(--line);flex:0 0 1px}
@media (max-width:1180px){ .site__nav .nav{padding:0 9px;font-size:13.5px} }
/* ---------- баннер ---------- */
.hero2{
position:relative;width:100%;
min-height:clamp(430px, 60vh, 620px);
display:flex;align-items:center;
background:#1a0a10;overflow:hidden;isolation:isolate;
}
.hero2__pic{position:absolute;inset:0;z-index:0}
.hero2__pic img{width:100%;height:100%;object-fit:cover;object-position:60% center}
/* Читаемость текста не отдаём на волю картинки: слева кладём собственный
градиент, поэтому заголовок держится на любой замене баннера. */
.hero2__pic::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg, rgba(12,4,8,.94) 0%, rgba(12,4,8,.86) 26%,
rgba(12,4,8,.42) 48%, rgba(12,4,8,0) 66%),
linear-gradient(0deg, rgba(12,4,8,.55) 0%, transparent 34%);
}
.hero2__in{
position:relative;z-index:1;
width:100%;max-width:var(--maxw);margin:0 auto;padding:56px 20px 74px;
}
.hero2__kick{
font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent);margin:0 0 10px;
}
.hero2__h{
font-size:clamp(40px, 6.4vw, 74px);line-height:.94;letter-spacing:-.035em;
font-weight:900;color:#fff;margin:0;
}
.hero2__h span{
display:inline-block;margin-left:.14em;padding:.06em .12em .1em;
line-height:1;background:var(--accent);color:#1a1a1a;border-radius:8px;
transform:rotate(-1.6deg);
}
.hero2__sub{
margin:14px 0 0;font-size:clamp(15px,1.6vw,19px);font-weight:600;color:#f0eae6;
}
.hero2__p{
margin:12px 0 0;max-width:44ch;font-size:15px;line-height:1.55;color:#cdc5c2;
}
.hero2__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hero2__cta--sm{margin-top:16px}
.hero2__mini{margin-top:12px;font-size:13px;color:#a9a19f}
.btn--lg{height:50px;padding:0 26px;display:inline-flex;align-items:center;
font-size:16px;border-radius:10px}
.btn--accent.btn--lg{box-shadow:0 10px 30px rgba(255,219,77,.22)}
.btn--glass{
background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);color:#fff;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--glass:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
.hero2__scroll{
position:absolute;z-index:2;right:calc(50% - var(--maxw)/2 + 20px);bottom:26px;
display:flex;align-items:center;gap:9px;
background:none;border:0;padding:0;cursor:pointer;
font:inherit;font-size:12.5px;color:rgba(255,255,255,.62);transition:color .18s;
}
.hero2__scroll:hover{color:#fff}
.hero2__scroll i{
width:20px;height:30px;border:1.6px solid currentColor;border-radius:11px;position:relative;
}
.hero2__scroll i::after{
content:"";position:absolute;left:50%;top:6px;width:2.4px;height:6px;margin-left:-1.2px;
border-radius:2px;background:currentColor;animation:wheelDrop 1.7s ease-in-out infinite;
}
@keyframes wheelDrop{0%,100%{transform:translateY(0);opacity:1}
55%{transform:translateY(9px);opacity:.15}}
@media (max-width:1140px){ .hero2__scroll{right:20px} }
/* На телефоне баннер не подложка, а картинка сверху: текст поверх такой
плотной сцены не читается, сколько градиента на него ни клади. */
@media (max-width:760px){
.hero2{display:block;min-height:0;background:var(--bg)}
.hero2__pic{position:relative;inset:auto;aspect-ratio:16/10}
.hero2__pic img{object-position:64% center}
.hero2__pic::after{background:linear-gradient(0deg,
var(--bg) 0%, rgba(0,0,0,0) 26%)}
.hero2__in{padding:4px 16px 30px}
.hero2__h{font-size:clamp(34px,11vw,48px)}
.hero2__p{max-width:none;color:var(--muted)}
.hero2__sub{color:var(--text)}
.hero2__mini{color:var(--muted)}
.hero2__cta .btn--lg{flex:1 1 100%;justify-content:center}
.btn--glass{background:transparent;border-color:var(--line);color:var(--text)}
.hero2__scroll{display:none}
}
@media (prefers-reduced-motion:reduce){ .hero2__scroll i::after{animation:none} }
/* ---------- раздел: текст слева, кадр справа ---------- */
.tagline{
display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.h2--lead{margin:0 0 10px;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em}
.h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
.duo{display:grid;grid-template-columns:1fr 280px;gap:30px;align-items:center}
.duo__pic .mode__img{aspect-ratio:4/5}
.band__head--tight{margin:34px 0 10px}
@media (max-width:860px){
.duo{grid-template-columns:1fr;gap:20px;align-items:start}
.duo__pic{max-width:280px}
}
/* ============================================================
ВТОРОЙ ЗАХОД: плотность, шапка, баннер, иконки вместо кадров
============================================================ */
:root{ --display:"Oswald","Arial Narrow",system-ui,sans-serif; }
/* ---------- шапка: не в край, и справа есть чем дышать ---------- */
.site{ padding-inline:max(20px, calc(50% - 660px)); padding-block:9px }
.site__right{gap:12px}
.site__right .btn{height:38px;padding:0 18px;font-size:14px;border-radius:9px}
.iconbtn{width:38px;height:38px;flex:0 0 38px;border-radius:9px}
.site__nav{gap:6px}
.site__nav .nav{height:34px;padding:0 13px}
.site__sep{margin:0 10px}
/* ---------- баннер: ниже, с растворёнными краями ---------- */
.hero2{min-height:clamp(300px, 39vw, 440px)}
.hero2__pic img{object-position:58% center}
/* Три градиента вместо одного: слева — под текст, сверху — под шапку,
снизу — чтобы полоса растворялась в странице, а не обрывалась линейкой. */
.hero2__pic::after{
background:
linear-gradient(90deg, rgba(10,4,7,.95) 0%, rgba(10,4,7,.80) 18%,
rgba(10,4,7,.34) 34%, rgba(10,4,7,0) 48%),
linear-gradient(180deg, rgba(10,4,7,.70) 0%, rgba(10,4,7,0) 20%),
linear-gradient(0deg, var(--bg) 0%, rgba(10,4,7,.30) 13%, rgba(10,4,7,0) 32%);
}
.hero2__in{padding:30px 20px 42px;
padding-inline:max(20px, calc(50% - 660px))}
.hero2__kick{font-size:11.5px;letter-spacing:.2em;margin-bottom:8px}
.hero2__h{font-family:var(--display);font-weight:700;letter-spacing:.005em;
font-size:clamp(38px, 5vw, 62px);line-height:.98}
.hero2__h span{margin-left:.1em;padding:.04em .1em .08em;transform:rotate(-1.4deg)}
.hero2__sub{margin-top:10px;font-size:clamp(14px,1.4vw,17px)}
.hero2__p{margin-top:10px;max-width:36ch;font-size:14.5px;line-height:1.5}
.hero2__cta{margin-top:20px}
.btn--lg{height:46px;padding:0 22px;font-size:15px}
.hero2__scroll{right:max(20px, calc(50% - 660px));bottom:20px}
/* ---------- заголовки ---------- */
.h1,.h2,.h2--lead,.hero2__sub{font-family:var(--display);letter-spacing:.005em}
.h1{font-weight:700}
.h2,.h2--lead{font-weight:600}
.h2--lead{font-size:clamp(24px,2.7vw,34px);text-transform:none}
.tagline{letter-spacing:.2em}
/* ---------- строки с иконками вместо вертикального кадра ---------- */
.duo{grid-template-columns:1fr 380px;align-items:start;gap:40px}
.feats{list-style:none;display:grid;gap:15px;margin:0;padding:0}
.feat{display:grid;grid-template-columns:38px 1fr;gap:13px;align-items:start}
.feat__i{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
background:var(--panel);border:1px solid var(--line);color:var(--accent)}
.ico{width:20px;height:20px;display:block}
.feat b{display:block;font-size:14.5px;line-height:1.3}
.feat i{display:block;font-style:normal;font-size:13px;line-height:1.45;
color:var(--muted);margin-top:3px}
@media (max-width:860px){ .duo{grid-template-columns:1fr;gap:22px} .duo__pic{max-width:none} }
/* ---------- заглушка вопроса без иллюстрации ---------- */
.qcard__shot.is-plain,.qcard__shot.is-empty{
background:linear-gradient(180deg,#1d1d23 0%,#151519 58%,#101014 100%)}
/* transform из старого правила иначе уводит блок на пол-экрана вверх и влево */
.qcard__plate{position:absolute;inset:0;left:0;top:0;transform:none;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;text-align:center;pointer-events:none;padding:16px;
background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
.qcard__plate b{font-family:var(--display);font-weight:700;
font-size:clamp(40px,6vw,76px);line-height:1;color:transparent;
-webkit-text-stroke:1.4px rgba(255,255,255,.16);letter-spacing:.02em}
.qcard__plate i{font-style:normal;font-size:11.5px;letter-spacing:.22em;
text-transform:uppercase;color:rgba(255,255,255,.34)}
/* ---------- страница «Билеты» ---------- */
.tstrip{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:18px 0 22px}
.tchip{width:38px;height:34px;border-radius:8px;border:1px solid var(--line);
background:var(--panel);color:var(--muted);font:600 13.5px/1 inherit;cursor:pointer;
transition:.15s}
.tchip:hover{color:var(--text);border-color:var(--muted)}
.tchip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tchip.is-done{color:var(--green);border-color:var(--green-line)}
.tcard{max-width:520px;margin:0 auto}
.tcard__n{font-family:var(--display);font-weight:700}
.qdots{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:14px 0 4px}
.qdot{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
font-size:11.5px;color:var(--muted);background:var(--panel-2)}
.qdot.is-ok{background:var(--green-bg);color:var(--green)}
.qdot.is-bad{background:var(--red-bg);color:var(--red)}
/* ---------- курсор: автомобильный ключ, не ключ от сундука ---------- */
.vbox[data-play]{cursor:url("data:image/svg+xml;utf8,\
") 6 6, pointer}
/* ---------- карточка машины в попапе кейса ---------- */
.carspec{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.carspec span{font-size:12.5px;padding:5px 10px;border-radius:999px;
background:var(--panel-2);color:var(--muted)}
.carstory{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--text)}
.carprice{margin:10px 0 0;font-size:13px;color:var(--accent)}
.carprice i{font-style:normal;color:var(--muted)}
/* ============================================================
СЮЖЕТНЫЙ РЕЖИМ: ЛЕНТА ГЛАВЫ
Вертикаль — история. Горизонталь внутри главы занята только
тестом. Ниже теста разметки просто нет, пока не ответили.
============================================================ */
.story{padding-bottom:60px}
/* ---------- полоса глав ---------- */
.chapbar{position:sticky;top:var(--hh,56px);z-index:20;
background:color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--line)}
.chapbar__in{max-width:var(--maxw);margin:0 auto;padding:9px 20px;
display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.chapbar__in::-webkit-scrollbar{display:none}
.chchip{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
height:34px;padding:0 12px;border-radius:9px;white-space:nowrap;
border:1px solid var(--line);background:var(--panel);color:var(--muted);
font:600 13px/1 inherit;cursor:pointer;transition:.16s}
.chchip i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.6}
.chchip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chchip.is-on i{opacity:.75}
.chchip.is-locked{cursor:default;opacity:.5}
.chchip.is-locked span{max-width:0;overflow:hidden;opacity:0;transition:.2s}
.chchip.is-locked:hover span{max-width:180px;opacity:1;margin-left:0}
.chip__lock{width:13px;height:13px;flex:0 0 13px}
.chchip.is-shake{animation:chipShake .4s}
@keyframes chipShake{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}
75%{transform:translateX(-2px)}}
/* ---------- счётчик и панель сборки ---------- */
.shud{position:sticky;top:var(--cb,108px);z-index:19;
background:color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--line)}
.shud__in{max-width:var(--maxw);margin:0 auto;padding:10px 20px;
display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.shud__col{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.shud__col i{font-style:normal;font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted)}
.shud__col b{font-family:var(--display);font-weight:600;font-size:19px;
font-variant-numeric:tabular-nums}
.shud__col--you b{color:var(--accent)}
.shud__parts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.part{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;
border-radius:999px;border:1px dashed var(--line);color:var(--muted);font-size:12px}
.part i{width:7px;height:7px;border-radius:50%;border:1.4px solid currentColor}
.part.is-got{border-style:solid;color:var(--accent)}
.part.is-got i{background:currentColor;border-color:currentColor}
@media (max-width:760px){
/* Панель сборки на телефоне уходит в одну прокручиваемую строку: две строки
съедали пол-экрана и липкая шапка становилась выше самой ленты. */
.shud__in{padding:8px 16px;gap:18px}
.shud__parts{margin-left:0;width:100%;order:3;flex-wrap:nowrap;
overflow-x:auto;scrollbar-width:none}
.shud__parts::-webkit-scrollbar{display:none}
.part{flex:0 0 auto}
.shud__col b{font-size:17px}
}
/* ---------- лента ---------- */
.feed{max-width:640px;margin:0 auto;padding:26px 20px 0}
.chhead{margin-bottom:30px}
.chhead__p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.55}
.bt{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.bt.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.bt{opacity:1;transform:none;transition:none}}
.bt--shot{margin:0 0 26px}
.sframe{position:relative;aspect-ratio:9/16;max-height:74vh;margin:0 auto;
border-radius:14px;overflow:hidden;background:#0e0e12;
display:flex;align-items:center;justify-content:center}
.sframe img,.sframe video{width:100%;height:100%;object-fit:cover;display:block}
.sframe--open{aspect-ratio:9/16;max-height:70vh}
.sprompt{display:none;position:absolute;inset:0;flex-direction:column;padding:14px;
background:repeating-linear-gradient(45deg,#17171c,#17171c 9px,#141419 9px,#141419 18px)}
.sframe.is-prompt .sprompt{display:flex}
.sprompt__top{display:flex;align-items:center;justify-content:space-between;gap:10px;
font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#8d8d97;
margin-bottom:9px}
.sprompt__copy{flex:0 0 auto;height:28px;padding:0 11px;border-radius:7px;
border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
color:#e8e8ee;font:600 12px/1 inherit;cursor:pointer;text-transform:none;letter-spacing:0}
.sprompt__copy:hover{background:rgba(255,255,255,.13)}
.sprompt__txt{flex:1;width:100%;resize:none;border:0;border-radius:9px;padding:11px 12px;
background:#0d0d11;color:#a9adb8;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.bt--shot figcaption{margin-top:9px;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);text-align:center}
.bt--line{margin:0 0 16px;max-width:82%}
.bt--line.is-me{margin-left:auto;text-align:right}
.bt--line b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin-bottom:5px}
.bt--line p{margin:0;padding:12px 15px;border-radius:13px;background:var(--panel);
font-size:16px;line-height:1.45}
.bt--line.is-me p{background:var(--panel-2)}
.bt--think{margin:0 0 18px;padding:0 2px;color:var(--muted);font-style:italic;
font-size:15.5px;line-height:1.6}
.bt--sfx{margin:26px 0;text-align:center;font-size:13px;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted)}
.bt--note{margin:0 0 20px;padding:13px 15px;border-left:2px solid var(--accent);
background:var(--panel);border-radius:0 10px 10px 0;font-size:13.5px;
line-height:1.55;color:var(--muted)}
.bt--end{margin:34px 0 10px;padding:28px 20px;text-align:center;border-radius:14px;
background:#0d0d11;color:#f2f1ef;font-family:var(--display);font-weight:600;
font-size:clamp(19px,3.4vw,26px);line-height:1.35}
/* ---------- ворота ---------- */
.bt--gate{margin:30px 0;padding:18px 16px 16px;border-radius:14px;
border:1px solid var(--line);background:var(--panel)}
.gate__hint{margin:0 0 10px;font-size:12.5px;letter-spacing:.05em;color:var(--muted)}
.bt--gate .qcard{border:0;padding:0;background:none}
.gate__lock{margin:14px 0 0;text-align:center;font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted)}
.bt--gate .opt.is-ok{background:var(--green-bg);border-color:var(--green-line);color:var(--green)}
.bt--gate .opt.is-bad{background:var(--red-bg);border-color:var(--red-line);color:var(--red)}
/* ---------- карточка открытого гаража ---------- */
.bt--open{margin:30px 0}
.opencard{margin-top:14px;padding:16px;border-radius:14px;border:1px solid var(--line);
background:var(--panel)}
.opencard__t{display:block;font-family:var(--display);font-weight:600;font-size:21px;
margin:6px 0 4px}
.opencard__line{margin:0 0 14px;color:var(--muted);font-style:italic;font-size:14.5px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px;
padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.twocol__h{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin-bottom:7px}
.twocol p{margin:0;font-size:13.5px;line-height:1.5}
.twocol__p{color:var(--muted)}
.twocol__p--big{color:var(--accent);font-size:15px;font-weight:600}
.twocol__note{margin-top:6px;font-size:11.5px;color:var(--muted);opacity:.75}
.opencard .carspec{margin-top:12px}
@media (max-width:560px){ .twocol{grid-template-columns:1fr;gap:12px} }
.bt--next{margin:34px 0 0;padding:20px;border-radius:14px;border:1px dashed var(--line);
text-align:center}
.bt--next p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.55}
/* ============================================================
ТРЕТИЙ ЗАХОД: меню, баннер-карточка 21:9, шапки глав,
карточка вопроса в две колонки
============================================================ */
/* ---------- меню: подчёркивание вместо точек ---------- */
/* Меню ровно по центру экрана: боковые колонки равной доли, марка
прижата влево, кнопки вправо. Ширина марки и правого блока разная,
поэтому колонка auto слева ломала бы центровку. */
.site{grid-template-columns:1fr auto 1fr;gap:20px}
.site .brand,.site__right{min-width:0}
.site .brand{justify-self:start}
.site__right{justify-self:end}
.site__nav{gap:2px;min-width:0;flex-wrap:nowrap;justify-self:center}
.site__nav .nav{padding:0 11px;font-size:13.5px;color:var(--muted);position:relative}
.site__nav .nav--anchor::before{display:none}
.site__nav .nav::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;
height:2px;border-radius:2px;background:var(--accent);
transform:scaleX(0);transform-origin:center;transition:transform .18s;display:block}
.site__nav .nav:hover{color:var(--text);background:transparent}
.site__nav .nav:hover::after{transform:scaleX(.45)}
.site__nav .nav.is-here{color:var(--text)}
.site__nav .nav.is-here::after{transform:scaleX(1)}
.site__sep{display:none}
@media (max-width:1320px){ .site__nav .nav{padding:0 8px;font-size:13px}
.site__nav .nav::after{left:8px;right:8px} }
@media (max-width:1120px){ .site__nav{display:none} }
/* ---------- баннер: карточка, а не полоса во всю ширину ---------- */
.hero2{max-width:1340px;margin:14px auto 0;border-radius:18px;overflow:hidden;
aspect-ratio:21/9;min-height:0;align-items:center}
.hero2__pic img{object-position:62% center}
.hero2__pic::after{
background:
linear-gradient(90deg, rgba(10,4,7,.95) 0%, rgba(10,4,7,.88) 22%,
rgba(10,4,7,.46) 40%, rgba(10,4,7,0) 56%),
linear-gradient(0deg, rgba(10,4,7,.45) 0%, rgba(10,4,7,0) 30%)}
.hero2__in{padding:0 clamp(24px,3.4vw,48px);max-width:none}
.hero2__h{font-size:clamp(32px,3.6vw,56px)}
.hero2__p{max-width:32ch;font-size:14px}
.hero2__cta{margin-top:18px}
.hero2__scroll{right:clamp(24px,3.4vw,48px);bottom:18px}
@media (max-width:900px){
.hero2{aspect-ratio:auto;margin:0;border-radius:0;display:block}
.hero2__pic{position:relative;inset:auto;aspect-ratio:16/10}
.hero2__in{padding:4px 16px 30px}
}
/* ---------- шапка страницы и главы: 21:9 с заголовком слева ---------- */
.page--flush{padding:0}
.cover{position:relative;max-width:1340px;margin:14px auto 0;border-radius:18px;
overflow:hidden;aspect-ratio:21/9;background:#0e0e12;display:flex;align-items:center}
.cover__pic{position:absolute;inset:0}
.cover__pic img{width:100%;height:100%;object-fit:cover;object-position:60% center;display:block}
.cover__pic::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg, rgba(8,8,11,.94) 0%, rgba(8,8,11,.86) 22%,
rgba(8,8,11,.44) 40%, rgba(8,8,11,0) 58%),
linear-gradient(0deg, rgba(8,8,11,.5) 0%, rgba(8,8,11,0) 34%)}
.cover__pic.is-prompt::after{display:none}
.cover__pic.is-prompt{background:repeating-linear-gradient(45deg,
#17171c,#17171c 9px,#141419 9px,#141419 18px)}
/* В шапке показываем только кнопку: сам промпт лёг бы под заголовок. */
.cover .sprompt{display:none}
.cover__pic.is-prompt .sprompt{display:block;inset:auto;right:14px;bottom:14px;
padding:0;background:none;width:auto}
.cover .sprompt__top{margin:0}
.cover .sprompt__top span{display:none}
.cover .sprompt__txt{display:none}
.cover__in{position:relative;z-index:2;padding:0 clamp(24px,3.4vw,48px);max-width:640px}
.cover__h{font-family:var(--display);font-weight:700;letter-spacing:.005em;
font-size:clamp(28px,3.4vw,50px);line-height:1.02;color:#fff;margin:2px 0 0}
.cover__p{margin:12px 0 0;max-width:44ch;color:#cfc9c6;font-size:14.5px;line-height:1.55}
.cover__in .btn{margin-top:20px}
@media (max-width:900px){
.cover{aspect-ratio:auto;margin:0;border-radius:0;display:block}
.cover__pic{position:relative;inset:auto;aspect-ratio:16/10}
.cover__pic::after{background:linear-gradient(0deg, var(--bg) 0%, rgba(8,8,11,0) 44%)}
.cover__in{padding:6px 16px 4px;max-width:none}
.cover__h{color:var(--text)}
.cover__p{color:var(--muted)}
}
/* ---------- карточка вопроса: кадр слева, вопрос справа ---------- */
/* Две колонки — ТОЛЬКО в галерее на главной, где карточка широкая. Медиазапрос
смотрит на окно, а не на контейнер, поэтому в узкой ленте сюжета такая же
вёрстка разваливалась: кадр в треть ширины и половина карточки пустая. */
@media (min-width:900px){
.gal .qcard{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
grid-template-areas:"meta meta" "shot body";column-gap:22px;align-items:start}
.gal .qcard__meta{grid-area:meta}
.gal .qcard__shot{grid-area:shot;margin:10px 0 0}
.gal .qcard__body{grid-area:body;margin-top:10px}
.gal .qcard__q{margin-top:0}
}
.qcard__plate b{font-size:clamp(30px,3.4vw,54px)}
/* ---------- список глав на посадочной ---------- */
.chlist2{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.chrow2{display:grid;grid-template-columns:92px 1fr auto auto;gap:14px;align-items:center;
padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
opacity:.6}
.chrow2.is-open{opacity:1;border-color:var(--accent)}
.chrow2 b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chrow2 span{font-size:15.5px;font-weight:600}
.chrow2 em{font-style:normal;font-size:13px;color:var(--muted)}
.chrow2__go{color:var(--accent);font-weight:600;text-decoration:none;font-size:14px}
.chrow2__lock{font-size:13px;color:var(--muted)}
@media (max-width:640px){
.chrow2{grid-template-columns:1fr auto;gap:4px 12px}
.chrow2 b{grid-column:1/-1}
.chrow2 em{display:none}
}
/* ---------- аватар говорящего ---------- */
.bt--line{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:start;max-width:86%}
.bt--line.is-me{grid-template-columns:1fr;margin-left:auto}
.av{width:38px;height:38px;border-radius:50%;overflow:hidden;position:relative;
background:var(--panel-2);display:grid;place-items:center;flex:0 0 38px;margin-top:20px}
.av img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.av i{font-style:normal;font-weight:700;font-size:14px;color:var(--muted)}
.av:not(.is-empty) i{display:none}
.av.is-empty i{display:block}
.bt__say{min-width:0}
.feed__hint{margin:0 0 26px;color:var(--muted);font-size:14px;line-height:1.55}
/* Шапка главы ниже посадочной: над ней уже стоят две липкие полосы,
и полноразмерные 21:9 съедали весь первый экран. */
.story .cover{aspect-ratio:auto;height:clamp(200px,24vw,320px);margin-top:0;
border-radius:0;max-width:none}
.story .cover__in{max-width:var(--maxw);margin:0 auto;width:100%;
padding-inline:max(20px, calc(50% - 660px))}
.story .cover__h{font-size:clamp(26px,3vw,42px)}
.story .cover__p{margin-top:6px;font-size:13px;letter-spacing:.08em;
text-transform:uppercase;color:#b9b2af}
@media (max-width:900px){ .story .cover{height:auto} }
/* ============================================================
БИЛЕТ В ЛЕНТЕ СЮЖЕТА И МЕТКА «ПЕРЕСНЯТЬ»
Правила оформления карточки билета — в TICKET_CARD.md, читать
обязательно перед любой правкой .qcard.
============================================================ */
/* Карточка билета внутри главы: одна колонка, по центру, кадр 16:9. */
.bt--gate{max-width:560px;margin:30px auto}
.bt--gate .qcard{display:block;max-width:none}
/* Единственное разрешённое исключение из «кадр всегда 16:9»: в ленте карточка
одна и прыгать ей не с чем, а полная высота не давала увидеть варианты и
вопрос одновременно. Обоснование — в TICKET_CARD.md. */
.bt--gate .qcard__shot{margin:10px 0 0;aspect-ratio:16/9;max-height:210px}
.bt--gate .qcard__plate b{font-size:44px}
.bt--gate .qcard__body{margin-top:14px}
.bt--gate .qcard__q{margin:0 0 12px;font-size:17px;line-height:1.35}
.bt--gate .qcard__opts{display:grid;gap:8px}
.bt--gate .opt{width:100%}
/* Метка «переснять»: кадр есть, но он не годится по преемственности. */
.redo{position:absolute;left:12px;top:12px;z-index:3;
padding:5px 10px;border-radius:7px;font:700 11px/1 inherit;letter-spacing:.1em;
text-transform:uppercase;background:var(--red);color:#fff;
box-shadow:0 4px 14px rgba(0,0,0,.35)}
.sframe.is-prompt .redo{background:var(--accent);color:var(--on-accent)}
.redo__why{display:block;margin-top:5px;font-size:11.5px;letter-spacing:0;
text-transform:none;color:var(--red);line-height:1.45;max-width:44ch;
margin-inline:auto}
/* ============================================================
ДЕТАЛЬ, РАЗВИЛКА, СПИСОК КАДРОВ
============================================================ */
/* Деталь — кадр поменьше кадра сцены: это находка, а не сцена. */
.bt--part{margin:0 0 26px}
.sframe--part{aspect-ratio:4/5;max-height:52vh;max-width:420px}
.partmark{position:absolute;left:12px;top:12px;z-index:3;padding:5px 10px;
border-radius:7px;font:700 11px/1 inherit;letter-spacing:.1em;text-transform:uppercase;
background:var(--accent);color:var(--on-accent)}
.sframe--part.is-prompt .partmark{display:none}
.bt--part figcaption{margin-top:9px;font-size:14px;line-height:1.5;color:var(--text);
text-align:center;font-style:italic}
/* Развилка */
.bt--fork{margin:26px 0;padding:16px;border:1px solid var(--line);border-radius:14px;
background:var(--panel);display:grid;gap:9px}
.fork__h{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fork__o{text-align:left;padding:12px 14px;border-radius:11px;border:1px solid var(--line);
background:var(--panel-2);color:var(--text);font:inherit;font-size:15px;line-height:1.4;
cursor:pointer;transition:.15s}
.fork__o:hover{border-color:var(--muted)}
.fork__o.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.bt--fork.is-done .fork__o:not(.is-on){opacity:.45;pointer-events:none}
.fork__note{font-size:12px;color:var(--muted)}
/* Список кадров для производства */
.shots{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.shot{display:grid;grid-template-columns:34px 1fr auto auto;gap:12px;align-items:center;
padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.shot__n{width:34px;height:28px;display:grid;place-items:center;border-radius:7px;
background:var(--panel-2);color:var(--muted);font:600 13px/1 inherit}
.shot__b b{display:block;font-size:15px}
.shot__b i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.shot__redo{display:block;font-style:normal;font-size:12.5px;color:var(--red);margin-top:4px}
.shot__st{font-size:12.5px;color:var(--muted);white-space:nowrap}
.shot__st.is-ok{color:var(--green)}
.shot__st.is-no{color:var(--muted);opacity:.7}
.shot__txt{position:absolute;left:-9999px;width:10px;height:10px;opacity:0}
@media (max-width:720px){
.shot{grid-template-columns:34px 1fr;gap:8px 12px}
.shot__st{grid-column:2}
.shot .btn{grid-column:2;justify-self:start}
}
/* .page--narrow центрирует текст — списку кадров это не нужно. */
.shots,.shot,.shot__b{text-align:left}
.shots .btn{white-space:nowrap}
/* ---------- телефон: шапка сайта и липкие полосы не должны съедать экран ---------- */
@media (max-width:700px){
.site{gap:8px;padding-inline:12px;padding-block:7px}
.site__right{gap:6px}
.site__right .btn{height:32px;padding:0 11px;font-size:12.5px;border-radius:8px}
.iconbtn{width:32px;height:32px;flex:0 0 32px;border-radius:8px}
.brand--sm{font-size:16px}
.chapbar__in{padding:6px 12px;gap:5px}
.chchip{height:30px;padding:0 10px;font-size:12.5px}
/* Счётчик и чек-лист — в одну строку: две строки забирали пол-экрана. */
.shud__in{padding:6px 12px;gap:10px;flex-wrap:nowrap;align-items:center}
.shud__col i{display:none}
.shud__col b{font-size:14px;white-space:nowrap}
.shud__parts{order:0;margin-left:auto;width:auto;flex:1 1 auto;
justify-content:flex-end;flex-wrap:nowrap;overflow-x:auto}
.part{padding:4px 9px;font-size:11.5px}
.part i{width:6px;height:6px}
.feed{padding:18px 14px 0}
.bt--line{max-width:100%}
.sframe--part{max-width:none}
}
/* ============================================================
ЧЕТВЁРТЫЙ ЗАХОД: одна ширина, один модуль страницы
Раздел = шапка 21:9 + колонка var(--maxw). Никаких «своих»
ширин по страницам — из этого и получалась каша.
============================================================ */
:root{ --maxw:1180px; }
.page{max-width:var(--maxw);margin:0 auto;padding:28px 24px 24px}
.page--narrow{max-width:var(--maxw)}
.page--flush{max-width:none;padding:0}
.band,.band--page{max-width:var(--maxw);margin:0 auto;padding:26px 24px}
.band--page{padding-top:30px;padding-bottom:36px}
.band--page .duo{grid-template-columns:1fr 400px;gap:44px}
.cover{max-width:none;margin:0;border-radius:0}
.cover__in{max-width:var(--maxw);margin:0 auto;width:100%;
padding-inline:max(24px, calc(50% - var(--maxw)/2 + 24px))}
.cover__p{max-width:56ch}
/* Воздух перед подвалом: кнопка «Начать экзамен» упиралась в него. */
.foot{margin-top:72px}
.page--flush + .foot,.foot__in{padding-top:34px}
/* Строки с иконками: две строки описания максимум, иначе блоки разной высоты
и весь столбец «прыгает». */
.feats{gap:18px}
.feat i{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden}
/* ---------- награды: предмет, а не звезда ---------- */
.awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));
gap:14px;margin-top:18px}
.award{padding:0 0 14px;border:1px solid var(--line);border-radius:14px;
background:var(--panel);overflow:hidden;text-align:center}
.award__pic{position:relative;aspect-ratio:1;background:var(--panel-2);
display:grid;place-items:center}
.award__pic img{width:100%;height:100%;object-fit:cover;display:block;
filter:grayscale(1) brightness(.55)}
.award.is-got .award__pic img{filter:none}
.award__pic.is-empty::after{content:"";position:absolute;inset:0;
background:repeating-linear-gradient(45deg,#1b1b20,#1b1b20 9px,#17171c 9px,#17171c 18px)}
.award__star{position:absolute;right:9px;top:8px;z-index:2;font-size:17px;
line-height:1;color:var(--muted);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.award.is-got .award__star{color:var(--accent)}
.award b{display:block;padding:12px 12px 0;font-size:14.5px;line-height:1.25}
.award p{margin:5px 0 0;padding:0 12px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.award.is-got{border-color:var(--accent)}
/* ---------- рейтинг: строки, а не таблица ---------- */
.board{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.board{width:min(860px,100%)}
.brow{display:grid;grid-template-columns:38px minmax(0,1fr) auto 76px 76px 76px;gap:14px;
align-items:center;padding:12px 16px;border:1px solid var(--line);
border-radius:12px;background:var(--panel)}
.brow.is-me{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.brow__n{width:38px;height:30px;display:grid;place-items:center;border-radius:8px;
background:var(--panel-2);color:var(--muted);font:600 13.5px/1 inherit}
.brow__who b{display:block;font-size:15.5px}
.brow__who i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.brow__aw{display:flex;gap:6px}
.tbadge{width:30px;height:30px;border-radius:8px;overflow:hidden;position:relative;
background:var(--panel-2);display:grid;place-items:center;flex:0 0 30px}
.tbadge img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.tbadge i{font-style:normal;font-size:13px;color:var(--muted)}
.tbadge:not(.is-empty) i{display:none}
.brow__s,.brow__k,.brow__g{text-align:right}
.brow__s b,.brow__k b,.brow__g b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.brow__s i,.brow__k i,.brow__g i{font-style:normal;font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted)}
.brow__g b{color:var(--accent)}
/* Реплика между строк: не выделяется рамкой, чтобы не читаться как участник. */
.bsay{list-style:none;padding:2px 0 6px 52px}
.topsay{margin:6px 0 2px}
@media (max-width:720px){
.brow{grid-template-columns:34px 1fr auto;gap:8px 12px}
.brow__aw{grid-column:2/-1;order:4}
.brow__k{display:none}
.bsay{padding-left:0}
}
/* ---------- универсальная заглушка вопроса ---------- */
.qcard__uni{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
display:block;filter:brightness(.5) saturate(.75)}
.qcard__plate i{display:none}
.qcard__plate b{-webkit-text-stroke:1.4px rgba(255,255,255,.3)}
/* Шапка раздела не должна занимать первый экран целиком: 21:9 во всю ширину
даёт 600+ px и содержимое уходит за сгиб. Высота фиксируется, кадр кроется. */
.cover{aspect-ratio:auto;height:clamp(210px,23vw,330px)}
.story .cover{height:clamp(200px,22vw,300px)}
@media (max-width:900px){ .cover,.story .cover{height:auto} }
/* ============================================================
ШАПКА — СНОВА КАРТОЧКА
Во всю ширину экрана связь между текстом и кадром плывёт: на
широком мониторе затемнение уезжает, заголовок ложится на
светлую часть фотографии. В карточке эта связь жёсткая.
============================================================ */
.cover{max-width:1340px;margin:14px auto 0;border-radius:18px;overflow:hidden;
aspect-ratio:21/9;height:auto}
.story .cover{max-width:1340px;margin:14px auto 0;border-radius:18px;
aspect-ratio:21/9;height:auto}
.cover__in{max-width:620px;margin:0;width:auto;
padding-inline:clamp(26px,3.2vw,48px)}
.story .cover__in{max-width:620px;margin:0;padding-inline:clamp(26px,3.2vw,48px)}
/* Затемнение внутри карточки: доля кадра всегда одна и та же. */
.cover__pic::after{
background:
linear-gradient(90deg, rgba(8,8,11,.96) 0%, rgba(8,8,11,.90) 26%,
rgba(8,8,11,.52) 44%, rgba(8,8,11,0) 62%),
linear-gradient(0deg, rgba(8,8,11,.55) 0%, rgba(8,8,11,0) 34%)}
.cover__p{max-width:40ch}
@media (max-width:900px){
.cover,.story .cover{max-width:none;margin:0;border-radius:0;
aspect-ratio:auto;height:auto;display:block}
.cover__in,.story .cover__in{max-width:none;padding:6px 16px 4px}
}
/* ============================================================
ШАПКА-ИЛЛЮСТРАЦИЯ: заголовок нарисован в кадре
Текст поверх такой картинки дублирует название и лезет на
персонажей, поэтому под ней идёт обычный блок с воздухом.
============================================================ */
.cover--art{display:block;height:auto;aspect-ratio:2128/912}
.cover--art .cover__pic{position:absolute;inset:0}
.cover--art .cover__pic::after{display:none}
.cover--art .cover__pic img{object-position:center}
/* Заголовок для поиска, но не для глаз: он уже есть в иллюстрации. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.phead{margin:0 0 34px;max-width:72ch}
.phead .tagline{margin-bottom:10px}
.lede{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--text);
max-width:64ch}
.phead__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.band--page{padding-top:36px;padding-bottom:48px}
/* Воздух между блоками страницы: раньше всё слипалось в одну простыню. */
.band--page > * + *{margin-top:34px}
.band--page .duo{margin-top:38px}
.band--page .h2{margin-top:0}
@media (max-width:900px){
.cover--art{aspect-ratio:auto}
.cover--art .cover__pic{position:relative;inset:auto;aspect-ratio:2128/912}
.phead{margin-bottom:26px}
.band--page{padding-top:24px}
}
.tstrip__hint{margin:0 0 12px;font-size:13px;letter-spacing:.04em;color:var(--muted);
text-align:center}
/* Шапка и контент по одной сетке: разная ширина читается как сбой вёрстки. */
.cover,.story .cover{max-width:var(--maxw);margin-top:18px}
/* ============================================================
ШАПКИ РАЗДЕЛОВ НИЖЕ
21:9 при ширине 1180 даёт 505 px — половина первого экрана
уходит на картинку. Кадрируем по высоте, точку кадрирования
смещаем вверх: заголовок в этих иллюстрациях лежит в верхней
половине и при обычном центре обрезался бы.
============================================================ */
.cover--art{aspect-ratio:auto;height:clamp(210px,22vw,320px)}
/* Точка кадрирования у верхней кромки: заголовок в этих иллюстрациях
лежит в верхней трети и при центре обрезался бы. */
.cover--art .cover__pic img{object-position:center 12%}
@media (max-width:900px){
.cover--art{height:auto}
.cover--art .cover__pic{aspect-ratio:2128/912}
.cover--art .cover__pic img{object-position:center}
}
/* Шапка с текстом поверх тоже не должна быть в полный 21:9 — под ней ещё
должен помещаться первый экран контента. */
.cover{aspect-ratio:auto;height:clamp(240px,25vw,360px)}
@media (max-width:900px){ .cover{height:auto} }
/* ============================================================
ПЯТЫЙ ЗАХОД
1. Шапка: кадр целиком, а не обрезанный. Размытая копия того же
кадра заполняет ширину, поверх — сам кадр без кропа, поэтому
у героев не отрезает ноги.
2. Билет везде одинаковый: кадр сверху, вопрос и варианты под ним.
Так же, как на настоящем экзамене — человек привыкает к форме.
3. Лента главы — комикс: панели, а не сплошной текст.
============================================================ */
/* ---------- 1. шапка с блюр-подложкой ---------- */
.cover{aspect-ratio:auto;height:clamp(260px,29vw,400px);
background:#0c0c10;overflow:hidden}
.cover--art{height:clamp(260px,29vw,400px)}
.cover__pic{position:absolute;inset:0}
.cover__bg{position:absolute;inset:-8%;width:116%;height:116%;
object-fit:cover;filter:blur(38px) saturate(.9) brightness(.45);transform:scale(1.06)}
.cover__fg{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;object-position:right center}
.cover__pic::after{content:"";position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(90deg, rgba(8,8,11,.97) 0%, rgba(8,8,11,.90) 24%,
rgba(8,8,11,.45) 42%, rgba(8,8,11,0) 60%),
linear-gradient(0deg, rgba(8,8,11,.55) 0%, rgba(8,8,11,0) 30%)}
.cover__in{max-width:min(560px,48%)}
@media (max-width:900px){
.cover,.cover--art{height:auto;display:block}
.cover__pic{position:relative;inset:auto;aspect-ratio:2128/912}
.cover__fg{object-position:center}
.cover__pic::after{background:linear-gradient(0deg, var(--bg) 0%, rgba(8,8,11,0) 46%)}
.cover__in{max-width:none;padding:6px 16px 4px}
}
/* ---------- 2. один формат билета ---------- */
@media (min-width:900px){
.gal .qcard{display:block}
.gal .qcard__shot{margin:10px 0 0}
.gal .qcard__body{margin-top:14px}
}
.qcard{max-width:720px;margin:0 auto}
.qcard__shot{aspect-ratio:16/9;max-height:300px}
.qcard__q{margin:0 0 12px;font-size:17px;line-height:1.35}
.qcard__opts{display:grid;gap:8px}
.bt--gate{max-width:none}
.bt--gate .qcard{max-width:720px}
.bt--gate .qcard__shot{max-height:300px}
/* ---------- 3. лента главы как комикс ---------- */
.feed{max-width:720px}
.bt--shot,.bt--part,.bt--open{
border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:hidden;
background:#0c0c10;box-shadow:0 18px 40px rgba(0,0,0,.45);
transform:translateY(22px) scale(.985)}
.bt--shot.is-in,.bt--part.is-in,.bt--open.is-in{transform:none}
.bt--shot .sframe,.bt--part .sframe{border-radius:0;margin:0}
.bt--shot figcaption,.bt--part figcaption{margin:0;padding:10px 14px 12px;
background:#0c0c10}
/* Реплика — облачко с хвостиком, как в комиксе. */
.bt--line .bt__say p{position:relative;border-radius:14px}
.bt--line:not(.is-me) .bt__say p::before{content:"";position:absolute;left:-6px;top:14px;
width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
.bt--line.is-me .bt__say p::after{content:"";position:absolute;right:-6px;top:14px;
width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
.bt--think{padding:12px 16px;border-left:2px solid var(--line);
background:color-mix(in srgb,var(--panel) 60%,transparent);border-radius:0 12px 12px 0}
.bt--sfx{margin:30px 0;font-family:var(--display);font-weight:600;font-size:15px;
letter-spacing:.2em;color:var(--accent);opacity:.85}
/* ============================================================
ШАПКА: КАДР ЦЕЛИКОМ, БЕЗ ОБРЕЗКИ
Старое правило .cover__pic img{object-fit:cover} по специфичности
перебивало .cover__fg{object-fit:contain} — из-за этого инструктору
срезало голову. Селектор усилен, высота поднята.
============================================================ */
.cover,.cover--art{height:clamp(300px,32vw,460px)}
.cover__pic .cover__bg{position:absolute;inset:-8%;width:116%;height:116%;
object-fit:cover;object-position:center;
filter:blur(40px) saturate(.9) brightness(.42);transform:scale(1.06)}
.cover__pic .cover__fg{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;object-position:right center}
@media (max-width:900px){
.cover,.cover--art{height:auto}
.cover__pic .cover__fg{position:relative;object-position:center}
}
/* ---------- билеты: видно объём работы, а не только готовое ---------- */
.tsum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 22px}
.tsum span{padding:14px 16px;border:1px solid var(--line);border-radius:12px;
background:var(--panel);text-align:center}
.tsum b{display:block;font-family:var(--display);font-weight:600;font-size:26px;
font-variant-numeric:tabular-nums}
.tsum i{display:block;font-style:normal;font-size:12px;letter-spacing:.06em;
color:var(--muted);margin-top:3px}
.tchip.is-off{opacity:.32;border-style:dashed}
.tchip.is-off:hover{opacity:.55}
.qdot.is-todo{background:transparent;border:1px dashed var(--line);color:var(--muted);
opacity:.5}
.tcard{max-width:560px}
.btn.is-disabled{opacity:.45;pointer-events:none}
@media (max-width:720px){ .tsum{grid-template-columns:repeat(2,1fr)} }
.tcard__ph{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--muted)}
/* ============================================================
ЭКРАН ТРЕНАЖЁРА — В ТОЙ ЖЕ СЕТКЕ, ЧТО ВЕСЬ САЙТ
Геометрия карточки фиксирована: кадр, вопрос, варианты и
разбор всегда занимают одно и то же место. Кнопка «Следующий
вопрос» стоит на одной высоте от вопроса к вопросу — иначе
человек каждый раз ищет её заново.
============================================================ */
.screen .top{padding-inline:max(20px, calc(50% - 660px))}
.screen .progress{padding-inline:max(20px, calc(50% - 660px))}
.card{
max-width:720px;padding:6px 20px 20px;gap:14px;
overflow-y:auto;overscroll-behavior:contain;
}
/* Кадр всегда одного размера — и с фотографией, и без неё. */
.card .stage{flex:0 0 auto;width:100%;height:clamp(170px,23vh,280px);
aspect-ratio:auto;min-height:0;border-radius:12px}
.card .stage__img,.card .stage__video{object-fit:contain}
/* Вопрос — место под три строки, варианты — под четыре. Это покрывает
подавляющее большинство билетов, и карточка перестаёт дышать. */
.card__q{font-size:18px;line-height:1.35;min-height:calc(3 * 1.35em)}
.options{min-height:216px;align-content:start}
.options .opt{min-height:48px}
/* заход 100: на невысоком окне (ноутбук, да ещё с полосой обновления
браузера сверху) забронированные минимумы — кадр, три строки под вопрос,
216 пикселей под варианты — вместе перестают влезать, и карточка опять
становится прокручиваемой до ответа. Место под ровное дыхание карточки
хорошо, когда оно есть; когда его нет, важнее видеть кадр целиком.
Минимумы снимаем, кадр ужимаем — но не ниже порога читаемости знаков. */
@media (min-width:721px) and (max-height:780px){
/* Через #quiz — не для красоты: ниже по файлу («заход 44», крупный
тренажёр) те же минимумы задаются ещё раз обычным классом и по порядку
перебивают это послабление. Селектор с id весит больше и не зависит
от того, кто в файле окажется ниже. */
#quiz .card .stage{height:clamp(140px,19vh,220px)}
#quiz .card__q{min-height:0}
#quiz .options{min-height:0}
}
/* Разбор всегда в потоке, просто пустой до ответа. Кнопка не прыгает. */
.review{min-height:150px;visibility:hidden;opacity:0;
transition:opacity .18s;border-top:1px solid var(--line);padding-top:12px}
.review.is-on{visibility:visible;opacity:1}
/* заход 100: место под разбор бронировалось всегда, даже пока разбора нет.
Полтораста пустых пикселей плюс кадр, вопрос и варианты не влезали в
невысокое окно — карточка становилась прокручиваемой ДО ответа, и колесо
уводило кадр за верхний край, а под вариантами зияла пустота (жалоба
владельца: «ушёл билет, хотя внизу ничего нету, там не должно быть
скролла»). Кнопка «Следующий вопрос» лежит внутри самого разбора, а
варианты прижаты к верху — то есть бронь ничего не удерживала от
прыжка. Пока не ответили, разбор места не занимает: прокручивать
нечего, и кадр никуда не уезжает. */
.review:not(.is-on){min-height:0;padding-top:0;border-top-color:transparent}
.review__actions{margin-top:12px}
/* Шапка тренажёра: меньше чипов, крупнее то, что действительно нужно. */
.top .chip--city{display:none}
.top__right .stat{font-size:13px}
@media (max-width:820px){
.screen .top,.screen .progress{padding-inline:14px}
.card{padding:4px 14px 16px;gap:11px}
.card .stage{height:clamp(150px,22vh,230px)}
.card__q{font-size:16.5px;min-height:calc(3 * 1.35em)}
.options{min-height:200px}
.review{min-height:128px}
}
/* Заглушка в тренажёре — та же универсальная картинка, приглушённая, чтобы её
не приняли за содержание вопроса. */
.card .stage.is-plain .stage__img{object-fit:cover;filter:brightness(.42) saturate(.7)}
.card .stage.is-plain::before{content:"вопрос без иллюстрации";position:absolute;
inset:auto 0 10px;z-index:2;text-align:center;font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:rgba(255,255,255,.34)}
/* Кнопка прижата к низу блока разбора фиксированной высоты: длина разбора
больше не двигает её на 20–30 px от вопроса к вопросу. */
.review{display:flex;flex-direction:column}
.review__actions{margin-top:auto}
/* На заглушке нет ни съёмки, ни города — метки REC и названия города там врут. */
.card .stage.is-plain .stage__rec,
.card .stage.is-plain .stage__city{display:none}
/* ── заход 41: билеты одним списком ────────────────────────────────
Было: плитки-числа, лента 1–40, карусель по одному билету и кнопка
«пройти» — четыре способа сделать одно и то же на одном экране.
Стало: сорок строк, одна строка — один билет, вся строка кликабельна. */
.tlead{max-width:70ch;margin:0 auto 22px;text-align:center;color:var(--muted);
font-size:15px;line-height:1.6}
.tlead b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.tlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:6px;overflow:hidden;max-width:var(--maxw);margin:0 auto}
@media (min-width:760px){.tlist{grid-template-columns:1fr 1fr}}
.trow{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;
padding:13px 16px;background:var(--card);text-decoration:none;color:inherit;
transition:background .14s}
.trow:hover,.trow:focus-visible{background:var(--card2,#1b1b1e)}
.trow:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.trow__n{font-family:var(--display);font-size:17px;color:var(--muted);
font-variant-numeric:tabular-nums;letter-spacing:.02em}
.trow__t{display:block;font-family:var(--display);font-weight:500;font-size:16px;
letter-spacing:.01em}
.trow__bar{display:block;height:3px;margin-top:7px;background:var(--line);border-radius:2px;
overflow:hidden}
.trow__bar i{display:block;height:100%;background:var(--gold);border-radius:2px}
.trow__st{font-size:13px;color:var(--muted);white-space:nowrap;
font-variant-numeric:tabular-nums}
.trow.is-done .trow__n{color:var(--gold)}
.trow.is-done .trow__st{color:var(--gold)}
.trow.is-part .trow__st{color:var(--ink)}
/* ── заход 42: главная как витрина ─────────────────────────────────
Было: герой, пять «полос» с двухколоночной вёрсткой, галерея гаража,
карусель демо-вопросов, плитки и прайс — семь разных ритмов на одной
странице. Стало: четыре широких баннера подряд, под каждым три строки
сути и ровно одно действие. */
.home{max-width:var(--maxw);margin:0 auto;padding:0 16px 64px;
display:flex;flex-direction:column;gap:26px}
@media (min-width:900px){.home{gap:34px;padding-bottom:80px}}
.bn{position:relative;display:block;text-decoration:none;color:#fff;
border-radius:var(--radius);overflow:hidden;background:var(--stage-bg);
min-height:270px;isolation:isolate}
.bn--hero{min-height:340px;margin-top:16px}
@media (min-width:760px){.bn{min-height:320px}.bn--hero{min-height:420px}}
.bn__pic{position:absolute;inset:0}
.bn__pic img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;
transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.bn:hover .bn__pic img{transform:scale(1.03)}
.bn::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(96deg,rgba(8,7,9,.94) 0%,rgba(8,7,9,.86) 34%,
rgba(8,7,9,.35) 62%,rgba(8,7,9,.1) 100%)}
.bn__in{position:relative;z-index:2;display:flex;flex-direction:column;
align-items:flex-start;gap:10px;padding:26px 22px;max-width:34rem}
@media (min-width:760px){.bn__in{padding:40px 36px;gap:12px}}
.bn__kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
color:var(--accent);font-weight:600}
.bn__h{font-size:clamp(22px,3.2vw,34px);line-height:1.15;font-weight:700;
letter-spacing:-.01em;text-wrap:balance}
/* Заголовок в две строки, а не в четыре: три четверти обложки под текст —
это уже не обложка. Кегль подрезан, колонке дана ширина под фразу
целиком, и кадру осталось чем дышать. */
.bn--hero .bn__h{font-size:clamp(23px,2.6vw,32px);line-height:1.2}
.bn--hero .bn__in{max-width:min(640px,54%)}
.bn--hero .bn__p{max-width:40ch}
@media (max-width:760px){.bn--hero .bn__in{max-width:100%}}
.bn__p{font-size:15px;line-height:1.5;color:#d8d3cf;max-width:36ch}
.bn__btn{margin-top:6px;display:inline-block;background:var(--accent);
color:var(--on-accent);font-weight:700;font-size:15px;padding:11px 22px;
border-radius:8px;transition:transform .15s}
.bn:hover .bn__btn{transform:translateY(-1px)}
.about{display:grid;gap:22px}
@media (min-width:900px){.about{grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}}
.about__t p{color:var(--muted);margin-top:12px;max-width:62ch}
.about__t .h2{margin-top:8px}
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{background:var(--bg);padding:16px 18px}
.fact b{display:block;font-size:15px;margin-bottom:4px}
.fact p{font-size:14px;line-height:1.45;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.cta b{display:block;font-size:18px;margin-bottom:6px}
.cta p{color:var(--muted);font-size:15px;max-width:60ch}
.cta__btns{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.about__t .h2--lead{font-size:clamp(22px,2.6vw,30px);line-height:1.2}
/* ── заход 43: экзамен, билеты и баннеры ───────────────────────────
1. Шаги по вопросам больше не уезжают за экран — переносятся рядами.
2. На экзамене шаг показывает «отвечено», а не «верно/неверно»:
правильность человек узнаёт в конце, как в ГИБДД.
3. Иконки в шапке тренажёра разведены — было впритык. */
.progress{display:flex;flex-wrap:wrap;gap:6px;overflow:visible;
padding:10px max(16px, calc(50% - 660px));justify-content:flex-start}
.progress .pg{flex:0 0 auto;min-width:34px;height:32px;padding:0 8px;border:0;
border-radius:7px;background:var(--panel);color:var(--muted);font:600 13px/1 inherit;
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
font-variant-numeric:tabular-nums;transition:background .14s,color .14s}
.progress .pg:hover{background:var(--panel-2);color:var(--text)}
.progress .pg.is-done{background:var(--panel-2);color:var(--text);
box-shadow:inset 0 0 0 1px var(--accent)}
.progress .pg.is-ok{background:var(--green-bg);color:var(--green)}
.progress .pg.is-bad{background:var(--red-bg);color:var(--red)}
.progress .pg.is-now{background:var(--accent);color:var(--on-accent);font-weight:800}
.progress .pg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top__right{gap:16px}
.top__right .stat{padding:0 2px;white-space:nowrap}
.top__right .stat--score{padding:3px 10px;border-radius:7px;background:var(--accent);
color:var(--on-accent);font-weight:700;font-variant-numeric:tabular-nums}
.top__right .ring{margin-left:4px}
.top__right #btnQuit{margin-left:4px}
@media (max-width:620px){.top__right{gap:10px}}
/* выбранный, но ещё не проверенный ответ — экзамен */
.opt.is-picked{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.opt.is-picked .opt__key{background:var(--accent);color:var(--on-accent)}
/* разбор ошибок после экзамена */
.wlist{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.wrow{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
background:var(--panel)}
.wrow__h{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;font-size:14px}
.wrow__h span{color:var(--muted)}
.wrow__q{margin:8px 0 12px;font-size:16px;line-height:1.4}
.wrow__a{display:grid;gap:8px}
@media (min-width:700px){.wrow__a{grid-template-columns:1fr 1fr}}
.wans{display:block;padding:10px 12px;border-radius:8px;font-size:14px;line-height:1.4;
border-left:3px solid var(--line);background:var(--bg)}
.wans i{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.wans--no{border-left-color:var(--red)}
.wans--ok{border-left-color:var(--green)}
.wrow__x{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.5}
/* ── билеты: зебра, иначе сорок одинаковых строк не читаются ── */
.tlist{gap:0;background:transparent}
.trow{border-bottom:1px solid var(--line);padding:15px 18px;gap:16px}
.trow:nth-child(4n+1),.trow:nth-child(4n+2){background:var(--panel)}
.trow:nth-child(4n+3),.trow:nth-child(4n+4){background:var(--bg)}
.trow:hover{background:var(--panel-2)}
.trow__n{font-size:18px}
.trow__t{font-size:16px}
.trow__st{font-size:14px}
@media (max-width:759px){
.trow:nth-child(2n+1){background:var(--panel)}
.trow:nth-child(2n){background:var(--bg)}
}
/* ── баннеры: картинка целиком, а не обрезок ──────────────────────
Фон — та же картинка, размытая и притушенная; поверх она же целиком,
прижата вправо. Ничего не режется, и пустого места не остаётся. */
.bn__pic{position:absolute;inset:0;overflow:hidden}
.bn__pic .bn__bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;
filter:blur(34px) saturate(.9) brightness(.55);transform:scale(1.05)}
.bn__pic .bn__fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
object-position:right center;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.bn:hover .bn__pic .bn__fg{transform:scale(1.02)}
/* Затемнение только под текстом: к середине уже сходит на нет, герои и
кадр стоят в своём свете. Раньше тень доходила до 78% и топила картинку. */
.bn::after{background:linear-gradient(96deg,rgba(8,7,9,.93) 0%,rgba(8,7,9,.86) 26%,
rgba(8,7,9,.38) 42%,rgba(8,7,9,0) 54%)}
@media (max-width:700px){
.bn__pic .bn__fg{object-position:right bottom}
.bn::after{background:linear-gradient(180deg,rgba(8,7,9,.94) 0%,rgba(8,7,9,.72) 46%,
rgba(8,7,9,.4) 100%)}
}
.awards--sm{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.awards--sm .award b{font-size:14px}
.awards--sm .award p{font-size:12.5px}
/* награды на странице сюжета — чипами: картинок ещё нет,
а двадцать четыре пустых квадрата выглядят как поломка */
.awchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.awchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:13.5px}
.awchip i{font-style:normal;color:var(--muted)}
.awchip.is-got{color:var(--text);border-color:rgba(255,219,77,.45);background:var(--panel-2)}
.awchip.is-got i{color:var(--accent)}
/* экран результата: сначала цифра, потом уже картинка для сторис —
раньше картинка 1080×1350 занимала весь экран и прятала разбор */
.res{text-align:center;padding:26px 0 22px;border-bottom:1px solid var(--line);margin-bottom:18px}
.res__n{display:block;font-size:clamp(34px,7vw,56px);font-weight:800;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;line-height:1}
.res__t{font-size:clamp(19px,3vw,26px);margin-top:8px}
.res__s{color:var(--muted);margin-top:8px;font-size:15px;max-width:52ch;margin-inline:auto}
.res.is-ok .res__n{color:var(--green)}
.res.is-bad .res__n{color:var(--red)}
.sharebox{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius);
padding:14px 16px;background:var(--panel)}
.sharebox summary{cursor:pointer;font-size:15px;color:var(--muted)}
.sharebox summary:hover{color:var(--text)}
.sharebox .share{display:block;max-width:260px;margin:14px auto;border-radius:10px}
.sharebox .btn{display:block;max-width:260px;margin:0 auto;text-align:center}
.wlist,.wrow,.wrow *{text-align:left}
.wrow__h b{font-size:14px}
/* ── заход 44: тренажёр крупнее ────────────────────────────────────
Люди готовятся к экзамену не от хорошей жизни и часто в очках.
Вопрос, варианты и номера — всё поднято на пару шагов. */
.card__q{font-size:23px;line-height:1.32}
.opt{padding:15px 18px;font-size:18px;line-height:1.4;gap:13px}
.opt__key{width:26px;height:26px;font-size:14px;flex:0 0 auto}
.options{gap:11px;min-height:236px}
.review__text{font-size:16px;line-height:1.5}
.review__clause{font-size:15px}
#btnNext{font-size:17px;padding:14px 26px}
.progress .pg{min-width:42px;height:40px;font-size:16px;padding:0 11px;border-radius:9px}
@media (max-width:900px){
.card__q{font-size:20px}
.opt{padding:13px 14px;font-size:17px}
.options{min-height:0}
.progress .pg{min-width:38px;height:36px;font-size:15px}
}
/* ── таймер: крупные цифры вместо мелкого кольца ── */
.top__right .ring{width:auto;height:auto;display:flex;align-items:center;gap:10px}
.top__right .ring svg{display:none}
.ring__num{position:static;font-size:26px;font-weight:800;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;color:var(--text);line-height:1}
.ring.is-low .ring__num{color:var(--red)}
.ring.is-bonus .ring__num{color:var(--accent)}
.top__done{font-size:13px;color:var(--muted);white-space:nowrap;line-height:1.25;
font-variant-numeric:tabular-nums}
.top__done b{color:var(--text);font-weight:700}
@media (max-width:760px){
.ring__num{font-size:21px}
.top__done{display:none}
}
/* ── смена билета прямо в тренажёре ── */
.deckbar{display:flex;align-items:center;gap:8px}
.deckbar__b{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
background:var(--panel);color:var(--text);font-size:20px;line-height:1;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center}
.deckbar__b:hover{background:var(--panel-2)}
.deckbar__b:disabled{opacity:.35;cursor:default}
.deckbar__t{font-size:17px;font-weight:700;min-width:104px;text-align:center;
font-variant-numeric:tabular-nums}
@media (max-width:620px){.deckbar__t{min-width:0;font-size:15px}
.deckbar__b{width:34px;height:34px}}
/* ── билеты с готовыми кадрами — первыми и с меткой ── */
.trow__shot{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
background:rgba(255,219,77,.16);color:var(--accent);font-size:12px;font-weight:700;
vertical-align:2px}
/* ═══ заход 45: воздух, отсутствие скролла, иерархия кнопок ═══════════
Три жалобы одного корня: всё прижато друг к другу, а лишний воздух
в пустых местах гонит страницу в скролл. Лечим адресно. */
/* Билет в шапке тренажёра стоял вплотную к логотипу и читался как часть
логотипа. Отбиваем воздухом и тонкой линией. */
.top__left{gap:14px}
.top__left .deckbar{margin-left:8px;padding-left:16px;border-left:1px solid var(--line)}
.deckbar{gap:10px}
.deckbar__t{min-width:118px}
@media (max-width:620px){
.top__left{gap:10px}
.top__left .deckbar{margin-left:2px;padding-left:10px}
}
/* Заглушка «вопрос без иллюстрации» занимала высоту настоящего кадра —
двести пикселей пустоты на каждом текстовом вопросе, и вся карточка
уезжала за экран. Держим высоту постоянной, но низкой. */
.card .stage.is-plain{aspect-ratio:auto;height:74px;min-height:0}
.card .stage.is-plain .stage__img{height:74px}
.card .stage.is-plain::before{font-size:11px;letter-spacing:.2em}
@media (max-width:620px){.card .stage.is-plain{height:58px}
.card .stage.is-plain .stage__img{height:58px}}
/* Сорок билетов в один столбец — это гарантированный скролл. На широком
экране раскладываем в колонки: список виден целиком. */
@media (min-width:760px){
.tlist{grid-template-columns:1fr 1fr;align-content:start}
}
/* Одна яркая кнопка на экран. «Регистрация» в шапке — жёлтая обводка:
видно, что это действие, но главную кнопку страницы она не перебивает. */
.btn--ring{background:transparent;color:var(--accent);font-weight:700;
box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn--ring:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
/* Обложка страницы — заставка, а не половина экрана. 21:9 на десктопе
съедало 480 пикселей до первой строки и гнало список в скролл. */
.cover{aspect-ratio:auto;min-height:0;height:clamp(190px,20vw,262px);margin-top:10px}
@media (max-width:720px){.cover{height:clamp(170px,52vw,240px)}}
.band--page{padding-top:22px}
/* Строка билета в одну линию: номер, название, полоса, счёт. Три этажа
на строку — это сорок билетов высотой в три экрана. */
@media (min-width:1180px){
.tlist{grid-template-columns:repeat(3,1fr)}
.trow{grid-template-columns:30px 1fr auto;gap:10px;padding:9px 13px}
.trow__st{grid-column:auto;margin-top:0}
.trow__body{display:grid;grid-template-columns:1fr;gap:0}
.trow__t{font-size:14px}
.trow__bar{margin-top:5px;height:2px}
.trow__st{font-size:11.5px}
.trow__n{font-size:14px}
.trow__shot{font-size:10.5px}
}
/* Список билетов — плотный блок под шапкой, без лишнего воздуха сверху. */
.tlead{margin:0 auto 12px;font-size:13.5px;max-width:78ch;text-align:center}
/* Список билетов помещается в экран целиком — значит и снизу воздух мерный. */
@media (min-width:1180px){.band--page{padding-top:18px;padding-bottom:22px}}
/* Одна яркая кнопка на экран. Четыре жёлтых баннера подряд спорят друг с
другом, и глазу негде остановиться: заливку оставляем только герою,
остальным — стеклянная кнопка на своём кадре. */
.bn:not(.bn--hero) .bn__btn{background:transparent;color:#fff;
box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.55);backdrop-filter:blur(3px)}
.bn:not(.bn--hero):hover .bn__btn{box-shadow:inset 0 0 0 1.4px var(--accent);color:var(--accent)}
.bn__btn{margin-top:14px;padding:11px 22px}
/* Текст в баннере не должен прилипать к кнопке: строка «дед даёт задачу»
упиралась в «Пройти сюжет» и читалась как её подпись. */
.bn__in{gap:0}
.bn__kick{margin-bottom:10px}
.bn__h{margin-bottom:12px;display:block}
.bn__p{display:block;max-width:46ch;line-height:1.55}
/* Кнопки отделены от текста: раньше «Играть» стояла впритык к абзацу и
читалась как его последняя строка. */
.bn--hero .bn__p{margin-bottom:8px}
.bn--hero .bn__btn{margin-top:20px}
/* Обложка: текст и кнопки внутри неё, а не «прилипли» и не срезаны нижней
кромкой. Ставим вертикальные поля и даём обложке расти под содержимое —
так лид и кнопка «Играть главу 1» перестают слипаться. */
.cover{height:auto;min-height:clamp(190px,20vw,262px);align-items:center}
.cover__in{padding-block:clamp(26px,3vw,40px);max-width:min(680px,56%)}
.cover__h{margin:6px 0 0}
.cover__p{margin-top:12px;max-width:42ch;line-height:1.6}
.cover__in .btn{margin-top:0}
.cover__p ~ .btn{margin-top:22px}
.cover__in .phead__cta,.cover__in>div:last-child{margin-top:18px}
/* Кнопки в обложке — ряд с воздухом, а не встык. */
.cover__in a.btn + a.btn,.cover__in .btn + .btn{margin-left:12px}
@media (max-width:720px){
.cover__in{max-width:100%;padding-block:24px}
.cover__in a.btn + a.btn,.cover__in .btn + .btn{margin-left:0;margin-top:10px}
}
/* ── Правила: не оглавление тома, а карта ────────────────────────────
Двадцать шесть разделов подряд — стена. Разбиваем на девять групп по
смыслу и кладём в две колонки: справа всё равно было пусто. */
.pgrps{margin-top:6px}
@media (min-width:980px){.pgrps{columns:2;column-gap:30px}}
@media (min-width:1360px){.pgrps{columns:3}}
.pgrps--flat{columns:1 !important}
/* Колонки, а не сетка: группы разной высоты, и в сетке между ними
оставались дыры в полэкрана. */
.pgrp{break-inside:avoid;-webkit-column-break-inside:avoid;
display:inline-block;width:100%;margin-bottom:20px}
.pgrp__h{margin:0 0 8px;font-family:var(--display);font-size:14px;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent);font-weight:600;
display:flex;flex-direction:column;gap:3px}
.pgrp__h i{font-style:normal;font-size:13.5px;letter-spacing:0;text-transform:none;
color:var(--muted);font-weight:400}
.pgrps .pddlist{gap:4px}
.pgrps .pddrow{padding:10px 12px;align-items:flex-start}
.pgrps .pddrow b{font-size:16px;line-height:1.32}
.pgrps .pddrow__lead{font-size:13.5px;line-height:1.42;margin-top:3px}
.pgrps .pddrow .tag{align-self:flex-start;margin-top:2px;font-size:12px;padding:3px 10px}
.note{margin-bottom:18px}
/* За каждой машиной человек, а не сумма. Фамилия крупно, история — рядом. */
.carowner{margin:12px 0 0;font-size:13.5px;line-height:1.5;
padding-left:11px;border-left:2px solid var(--accent)}
.carowner b{display:block;color:var(--accent);font-weight:700;letter-spacing:.01em}
.carowner i{font-style:normal;color:var(--muted)}
/* ═══ заход 46: реплики облачком, ритм отступов, бледные линии ══════
Три жалобы одного корня. Первая: реплика в прямоугольнике — это плашка,
а не речь. Вторая: между блоками воздуха столько же, сколько внутри, и
непонятно, что к чему относится. Третья: линии и рамки бьют по глазам
сильнее, чем содержимое, которое они разделяют. */
/* Волосяная линия. --line (#33333b) оказалась заметнее текста, который
она разделяет: сорок таких линий на экране — это забор, а не сетка. */
:root{ --hair:rgba(0,0,0,.08); --hair-2:rgba(0,0,0,.05); }
html[data-theme="dark"]{ --hair:rgba(255,255,255,.07); --hair-2:rgba(255,255,255,.045); }
/* ── реплика: аватарка и облачко с хвостиком ────────────────────── */
.say{display:flex;gap:12px;align-items:flex-start;margin:0 0 24px}
.say__face{flex:0 0 auto;width:54px;height:54px;border-radius:50%;object-fit:cover;
object-position:50% 20%;background:var(--panel-2);box-shadow:0 0 0 1px var(--hair)}
.say.is-noface{padding-left:0}
.say.is-noface .say__bub::before{display:none}
/* Острый угол смотрит на того, кто говорит; остальные три — скруглены.
Хвостик — тот же цвет, что пузырь: отдельная фигура слева сверху. */
.say__bub{position:relative;background:var(--panel);
border-radius:3px 18px 18px 18px;padding:13px 18px 14px;
max-width:66ch;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.say__bub::before{content:"";position:absolute;left:-9px;top:0;
width:10px;height:16px;background:var(--panel);
clip-path:polygon(100% 0, 100% 100%, 0 0)}
.say__who{display:block;font-family:var(--display);font-size:11.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.say__tx{margin:0;font-size:16px;line-height:1.6;color:var(--text)}
.say--wide .say__bub{max-width:none}
@media (max-width:620px){
.say{gap:10px;margin-bottom:20px}
.say__face{width:42px;height:42px}
.say__bub{padding:11px 14px 12px;border-radius:3px 15px 15px 15px}
.say__tx{font-size:16px}
}
/* ── ритм: внутри группы тесно, между группами просторно ────────── */
/* Баннер и три довода под ним — одно целое, зазора между ними нет. */
.hgrp{display:flex;flex-direction:column}
.hgrp .bn{border-radius:var(--radius) var(--radius) 0 0}
.hgrp .facts{border-radius:0 0 var(--radius) var(--radius);border-top:0}
/* Между обложкой и первым блоком было шестьдесят пикселей пустоты плюс
собственные поля тизера — экран открывался провалом. Общий зазор ужат,
а тизер к обложке подтянут отдельно: это продолжение одной мысли. */
.home{gap:34px}
@media (min-width:900px){.home{gap:44px;padding-bottom:96px}}
.bn--hero + .teaser{margin-top:-12px}
/* Заголовок раздела не должен сидеть на предыдущем абзаце. */
.band + .band{margin-top:16px}
.band--page{padding-top:28px;padding-bottom:34px}
.band__head{margin-bottom:14px}
.band__lead{margin-bottom:20px}
.h2{margin-bottom:10px}
.duo{gap:34px}
@media (min-width:900px){.duo{gap:56px}}
.about{gap:30px}
@media (min-width:900px){.about{gap:52px}}
.cta{margin-top:8px;padding:26px}
/* ── линии: видно, но не в глаза ─────────────────────────────────── */
.facts{background:var(--hair);border-color:var(--hair)}
.foot{border-top:1px solid var(--hair)}
.cta{border-color:var(--hair)}
.tlist,.trow{border-color:var(--hair)}
.trow{border-bottom-color:var(--hair)}
.pddrow{border-color:var(--hair)}
.stick,.qcard,.vbox{border-color:var(--hair)}
/* Подчёркивание активного пункта меню было в полную яркость акцента —
ярче, чем сам пункт. Оставляем как ориентир, но бледным. */
.site__nav .nav::after{height:1.5px;background:var(--accent);opacity:.42}
.site__nav .nav.is-here::after{opacity:.55}
.site__nav .nav:hover::after{opacity:.3}
/* Жёлтая обводка «Регистрации» соревновалась с главной кнопкой страницы. */
.btn--ring{box-shadow:inset 0 0 0 1px rgba(255,219,77,.55);color:var(--accent)}
.btn--ring:hover{box-shadow:inset 0 0 0 1px var(--accent)}
/* Полосы у машин и разборов — тонкие и приглушённые. */
.carowner{border-left-width:2px;border-left-color:rgba(255,219,77,.45);padding-left:12px}
.carowner b{color:var(--text)}
/* № вместо дубля числа: слева знак, число — в названии билета. */
.trow__n{color:var(--muted);opacity:.5;font-size:15px}
.trow__t{letter-spacing:.01em}
/* Столбца с номером больше нет — номер стоит в названии со знаком «№».
Две колонки вместо трёх: название и счёт. */
@media (min-width:1180px){
.trow{grid-template-columns:1fr auto}
.trow__body{min-width:0}
}
.trow{grid-template-columns:1fr auto}
/* Метка «есть кадр» была ярче названия билета, к которому относится. */
.trow__shot{background:rgba(255,219,77,.10);color:rgba(255,219,77,.75);
font-weight:600;font-size:11px}
/* На телефоне вторая колонка была фиксированной в 380 пикселей и вылезала
за экран — страница ехала вбок. Ниже 900 колонки складываются. */
@media (max-width:899px){
/* .band--page .duo — две точки специфичности, поэтому и одиночный .duo
его не перебивал: страница ехала вбок именно из-за этой пары. */
.duo,.band--page .duo{grid-template-columns:1fr;gap:26px}
.duo__pic{max-width:100%;min-width:0}
.feats{gap:14px}
.feat{grid-template-columns:34px 1fr;gap:11px}
}
/* ── заход 47: реплика не липнет к абзацу ────────────────────────────
Пузырь стоял вплотную к последней строке абзаца выше: аватарка вплотную
к тексту читается как наезд. Реплика — отдельный такт, ей нужен воздух
сверху не меньше, чем снизу. */
.say{margin:26px 0 26px}
.say:first-child{margin-top:0}
/* Реплика-подводка идёт своей строкой во всю ширину под блоком «О проекте»,
а не втискивается в узкую колонку под абзацем. */
.say--lead{margin:4px 0 8px;max-width:var(--maxw)}
.say--lead .say__bub{max-width:74ch}
.say--lead .say__face{width:60px;height:60px}
@media (max-width:620px){.say--lead .say__face{width:46px;height:46px}}
/* Колонка фактов больше не висит в одиночестве у верхнего края: она
выравнивается по заголовку, а не по служебной надписи над ним. */
@media (min-width:900px){
.about{align-items:start}
.about .facts{margin-top:26px}
}
/* ═══ заход 48: знаки в Правилах, воздух в билетах ═══════════════════ */
/* Приложения: вместо серого кружка — сам знак. Кирпич у запрещающих,
главная дорога у приоритета: группа узнаётся раньше, чем прочитана. */
.pddrow--sign .pddrow__n{width:44px;height:44px;background:transparent;
border-radius:0;display:grid;place-items:center;flex:0 0 auto}
.pddrow--sign .pddrow__n img{width:40px;height:40px;display:block;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.pddrow--sign{align-items:center;padding-block:11px}
.pgrp--wide{width:100%;break-inside:auto;display:block}
.pgrp--wide + .pgrp--wide{margin-top:26px}
@media (min-width:900px){.pddlist--two{display:grid;grid-template-columns:1fr 1fr;gap:6px}}
/* Билеты: сорок строк подряд читаются как забор. Каждая пятёрка —
отдельная стопка, между стопками воздух. */
.tlist{gap:0;background:transparent;border:0;border-radius:0;
display:grid;row-gap:14px}
@media (min-width:720px){.tlist{grid-template-columns:1fr 1fr;column-gap:20px}}
@media (min-width:1180px){.tlist{grid-template-columns:repeat(3,1fr);column-gap:22px}}
.tgrp{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
border-radius:8px;overflow:hidden;align-content:start}
.tgrp__h{font-family:var(--display);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);opacity:.7;
padding:0 0 6px 2px;background:transparent;border:0}
.trow{border-bottom:0}
/* Подвал не должен начинаться сразу под последней строкой списка. */
.foot{margin-top:96px}
@media (max-width:760px){.foot{margin-top:64px}}
.pddrow--sign .pddrow__n svg{width:40px;height:40px;display:block}
/* Ключи «Коллекционера» на экране итога. */
.keysbox{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
margin:18px 0;padding:16px 18px;border-radius:12px;
background:rgba(255,219,77,.06);border:1px solid rgba(255,219,77,.28)}
.keysbox__n{font-size:30px;font-weight:800;color:#ffdb4d;line-height:1;min-width:44px}
.keysbox > div{flex:1;min-width:220px}
.keysbox p{margin-top:3px;font-size:14px;opacity:.75;line-height:1.5}
/* Кнопка «Назад» слева в шапке тренажёра: справа её не находили. */
.backbtn{display:inline-flex;align-items:center;gap:6px;
padding:6px 12px 6px 8px;border-radius:8px;cursor:pointer;
background:transparent;border:1px solid var(--line);color:var(--muted);
font:inherit;font-size:14px;line-height:1}
.backbtn:hover{color:var(--text);border-color:var(--muted)}
.backbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.backbtn span{display:none}.backbtn{padding:6px 8px}}
/* Наставники: правый нижний угол, как виджет чата. Крестик убирает
их насовсем — выбор запоминается. */
.coach{position:fixed;right:18px;bottom:18px;z-index:70;width:min(350px,86vw);
background:rgba(20,20,20,.94);border:1px solid var(--line);border-radius:14px;
overflow:hidden;backdrop-filter:blur(6px);box-shadow:0 22px 50px rgba(0,0,0,.5)}
.coach[hidden]{display:none !important}
.coach__top{display:flex;align-items:center;gap:8px;padding:9px 12px;
border-bottom:1px solid var(--line)}
.coach__ttl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);margin-right:auto}
.coach__ttl::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
background:#ffdb4d;margin-right:8px;vertical-align:middle}
.coach__x{background:none;border:0;color:var(--muted);font-size:14px;cursor:pointer;
line-height:1;padding:4px 6px;border-radius:6px}
.coach__x:hover{color:var(--text);background:rgba(255,255,255,.07)}
.coach__feed{display:flex;flex-direction:column;gap:10px;padding:12px;
max-height:min(50dvh,420px);overflow:auto}
.coach__line{display:flex;align-items:flex-start;gap:11px;
animation:coachIn .3s ease both}
.coach__line:nth-child(2){animation-delay:.45s}
.coach__line:nth-child(3){animation-delay:.9s}
@keyframes coachIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.coach__line img{width:38px;height:38px;border-radius:50%;object-fit:cover;
object-position:50% 22%;flex:0 0 auto}
.coach__line b{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--muted);margin-bottom:3px}
.coach__line--ded b{color:#c9a06a}
.coach__line--instr b{color:#c46b6b}
.coach__line--insp b{color:#6e8fc4}
.coach__line p{font-size:14px;line-height:1.5}
.coach__show{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;
align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:30px;
background:rgba(20,20,20,.92);border:1px solid var(--line);cursor:pointer;
color:var(--muted);font:inherit;font-size:12px;letter-spacing:.08em;
text-transform:uppercase;backdrop-filter:blur(6px)}
.coach__show[hidden]{display:none !important}
.coach__show:hover{color:var(--text);border-color:#ffdb4d55}
.coach__show img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 22%}
@media (max-width:700px){
.coach{right:10px;left:10px;bottom:10px;width:auto}
.coach__feed{max-height:32dvh}
.coach__show{right:12px;bottom:12px}
}
/* Фон тренажёра: тема билета задаёт кадр, чтобы сорок билетов
не выглядели одним и тем же экраном. */
/* .screen залит непрозрачным var(--bg), поэтому фон кладём не под него,
а внутрь: два слоя поверх заливки и под содержимым. */
/* position тут не трогаем: .screen стоит fixed, и подменять его нельзя —
экран съезжает. Нужен только свой контекст наложения. */
#quiz{isolation:isolate}
#quiz::before,#quiz::after{content:"";position:absolute;inset:0;pointer-events:none}
#quiz::before{z-index:0;background:var(--bgshot,none) center 42%/cover no-repeat;
opacity:.5;filter:saturate(.7) blur(1px)}
#quiz::after{z-index:1;
background:linear-gradient(180deg,rgba(12,12,12,.55),rgba(12,12,12,.8) 42%,rgba(12,12,12,.95))}
#quiz > *{position:relative;z-index:2}
/* Карточка вопроса поверх кадра должна остаться читаемой. */
#quiz .card{background:rgba(20,20,20,.9);backdrop-filter:blur(7px)}
/* Игра приезжает целой страницей в iframe: у неё свои глобальные стили,
и слить их с сайтом в один документ нельзя — поедут оба. */
/* Игра занимает экран целиком: своя шапка у неё уже есть, и вторая сверху
читалась как задвоенное меню. Выход обратно — кнопка «На сайт» внутри. */
.gamewrap{position:fixed;inset:0;z-index:30;background:#050405}
.gameframe{width:100%;height:100%;border:0;display:block}
body.is-game{overflow:hidden}
body.is-game .site{display:none}
/* ── выпадающие меню в шапке ─────────────────────────────────────
Разделы с внутренними экранами не плодят второй ряд ссылок: они
раскрываются на месте. */
.navdrop{position:relative;display:inline-flex}
.nav--drop::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;
border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:translateY(-2px) rotate(45deg);opacity:.55}
.drop{position:absolute;left:0;top:100%;margin-top:8px;min-width:186px;z-index:80;
display:flex;flex-direction:column;padding:6px;border-radius:12px;
background:var(--panel,#151016);border:1px solid var(--hair,#2a1f26);
box-shadow:0 22px 50px rgba(0,0,0,.5);
opacity:0;visibility:hidden;transform:translateY(-5px);
transition:opacity .14s ease,transform .14s ease,visibility .14s}
.drop--right{left:auto;right:0}
.navdrop:hover .drop,.navdrop:focus-within .drop{
opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;
color:var(--mist,#a9a09a);text-decoration:none;white-space:nowrap}
.drop a:hover{color:var(--paper,#f2ede7);background:rgba(242,183,5,.1)}
@media (max-width:900px){
.drop{display:none}
.nav--drop::after{display:none}
}
/* Ключи в шапке. Раньше цифра «+1» на итоге ни о чём не говорила —
теперь у неё есть лицо, и то же лицо стоит наверху на каждой странице. */
.keybar{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;
border-radius:8px;border:1px solid var(--line);color:var(--muted);
text-decoration:none;font-size:14px;transition:color .15s,border-color .15s}
.keybar:hover{color:var(--text);border-color:#ffdb4d66}
.keybar.has-keys{color:#ffdb4d;border-color:#ffdb4d55}
.keybar b{font-variant-numeric:tabular-nums;font-weight:700}
/* Начисление ключа — вспышка бейджа вместо попапа Деда (заход 95): дед
теперь только просит донат, а ключи просто ярко мигают в шапке. */
@keyframes keyflash{
0%{box-shadow:0 0 0 0 #ffdb4d00;transform:scale(1)}
30%{box-shadow:0 0 0 6px #ffdb4d55;transform:scale(1.14)}
100%{box-shadow:0 0 0 0 #ffdb4d00;transform:scale(1)}
}
.keybar.is-flash{color:#ffdb4d;border-color:#ffdb4d;animation:keyflash .9s ease-out}
.keyico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.keysbox__n{display:inline-flex;align-items:center;gap:5px}
.keysbox__n .keyico{width:26px;height:26px;stroke-width:1.6}
/* «При чём тут ключи» — для тех, кто пришёл на билеты из поиска
и про игру ничего не знает. */
.whykeys{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
margin:34px 0 0;padding:24px;border-radius:16px;
background:rgba(255,219,77,.055);border:1px solid rgba(255,219,77,.24)}
.whykeys .say{margin:0;max-width:64ch}
/* Коллекция под таблицей рейтинга: очки — про сегодня, коллекция — про всё. */
.mycol{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.mycol__h{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.mycol__h .h2{margin:0;margin-right:auto}
.mycol__top{display:grid;gap:12px;margin-bottom:14px;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mycol__big{padding:14px 16px;border-radius:12px;background:var(--card,#1a1a1a);
border:1px solid var(--line)}
.mycol__big b{display:block;font-size:30px;line-height:1;font-weight:700;
font-variant-numeric:tabular-nums}
.mycol__big span{display:block;font-size:12.5px;opacity:.6;margin-top:5px}
.mycol__grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mycol__i{padding:13px 15px;border-radius:12px;background:var(--card,#1a1a1a);
border:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.mycol__i b{font-size:24px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.mycol__i b i{font-style:normal;font-size:14px;opacity:.45}
.mycol__i > span{font-size:12px;letter-spacing:.05em;text-transform:uppercase;opacity:.6}
.mycol__bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:3px}
.mycol__bar i{display:block;height:100%;transition:width .5s ease}
/* ── рулетка на главной ───────────────────────────────────────────
Механизм тот же, что в игре: держишь кнопку, шкала ходит, отпустил —
лента поехала. Разница одна — здесь она ничего не открывает. */
.teaser{margin:22px 0 0;padding:28px 0 32px;border-radius:18px;
background:linear-gradient(180deg,rgba(255,219,77,.05),rgba(20,20,20,0) 60%);
border:1px solid var(--line);overflow:hidden}
.teaser__lead{padding:0 clamp(18px,4vw,38px);max-width:64ch}
.teaser__lead .h2{margin:6px 0 10px}
.teaser__lead p{opacity:.74;line-height:1.62}
.teaser__say{padding:20px clamp(18px,4vw,38px) 0}
.teaser__say .say{margin:0;max-width:60ch}
/* overflow обязателен: маска прячет ленту только на вид, а сама она
торчит наружу и перехватывает клики по кнопке под собой. */
.teaser__roll{position:relative;margin:22px 0 0;overflow:hidden;
-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.teaser__strip{display:flex;gap:12px;padding:4px 0;width:max-content;will-change:transform}
.tsc{position:relative;flex:0 0 auto;width:clamp(140px,16vw,200px);aspect-ratio:3/4;
border-radius:13px;overflow:hidden;background:#14130f;border:1px solid var(--line);
display:flex;align-items:flex-end;box-shadow:0 14px 32px rgba(0,0,0,.55)}
.tsc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.tsc__mark{position:absolute;left:50%;top:44%;z-index:2;width:32px;
transform:translate(-50%,-50%);filter:drop-shadow(0 4px 12px rgba(0,0,0,.9))}
.tsc__mark svg{width:100%;height:auto;display:block;fill:#cfc7be}
.tsc__n{position:relative;z-index:2;width:100%;padding:11px 12px;font-size:11px;
letter-spacing:.16em;text-transform:uppercase;color:#b9b0aa;
background:linear-gradient(to top,rgba(5,4,5,.96),transparent)}
.tsc--garage{border-color:rgba(255,219,77,.28)}
.tsc--garage .tsc__n{color:#ffdb4d}
.tsc--cover .tsc__mark svg{fill:#8e867f}
.tsc.is-win{border-color:rgba(255,219,77,.9);
box-shadow:0 0 0 2px rgba(255,219,77,.5),0 0 50px rgba(255,219,77,.22),
0 18px 44px rgba(0,0,0,.7);animation:tscHit .6s ease}
.tsc.is-win .tsc__mark{display:none}
@keyframes tscHit{0%{transform:scale(1)}35%{transform:scale(1.045)}100%{transform:scale(1)}}
.teaser__mark{position:absolute;left:50%;top:0;bottom:0;width:2px;z-index:3;
transform:translateX(-1px);background:#ffdb4d;
box-shadow:0 0 20px 5px rgba(255,219,77,.45)}
.teaser__power{display:flex;flex-direction:column;align-items:center;gap:15px;
padding:26px clamp(18px,4vw,38px) 0}
.teaser__power[hidden]{display:none !important}
.teaser__bar{position:relative;width:min(520px,86%);height:14px;border-radius:8px;
background:rgba(10,7,9,.8);border:1px solid var(--line);overflow:hidden}
.teaser__bar i{display:block;height:100%;width:0;border-radius:7px;
background:linear-gradient(90deg,#7a716c,#ffdb4d 62%,#ff7a2f)}
.teaser__zone{position:absolute;top:0;bottom:0;left:78%;right:0;
background:repeating-linear-gradient(45deg,rgba(255,219,77,.16) 0 6px,transparent 6px 12px);
border-left:1px solid rgba(255,219,77,.45)}
.btn--hold{min-width:240px;justify-content:center;user-select:none;touch-action:none}
.teaser__hint{font-size:13.5px;opacity:.62;text-align:center;max-width:46ch;line-height:1.5}
.teaser__done{display:flex;flex-direction:column;align-items:center;gap:16px;
padding:26px clamp(18px,4vw,38px) 0;animation:teaseIn .4s ease both}
.teaser__done[hidden]{display:none !important}
.teaser__done .say{margin:0;max-width:58ch}
@keyframes teaseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.teaser__strip{transition:none !important}}
/* Коллекция под таблицей рейтинга: очки — про сегодня, коллекция — про всё. */
.mycol{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.mycol__h{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.mycol__h .h2{margin:0;margin-right:auto}
.mycol__top{display:grid;gap:12px;margin-bottom:14px;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mycol__big{padding:14px 16px;border-radius:12px;background:var(--card,#1a1a1a);
border:1px solid var(--line)}
.mycol__big b{display:block;font-size:30px;line-height:1;font-weight:700;
font-variant-numeric:tabular-nums}
.mycol__big span{display:block;font-size:12.5px;opacity:.6;margin-top:5px}
.mycol__grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mycol__i{padding:13px 15px;border-radius:12px;background:var(--card,#1a1a1a);
border:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.mycol__i b{font-size:24px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.mycol__i b i{font-style:normal;font-size:14px;opacity:.45}
.mycol__i > span{font-size:12px;letter-spacing:.05em;text-transform:uppercase;opacity:.6}
.mycol__bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:3px}
.mycol__bar i{display:block;height:100%;transition:width .5s ease}
/* Баннер с двумя действиями: ссылку внутрь ссылки не вложить,
поэтому такой баннер — блок, а не . */
.bn--duo{cursor:default}
/* Кнопки — отдельный шаг, а не хвост абзаца: шесть пикселей читались
как перенос строки. */
.bn__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bn--duo .bn__acts .btn{text-decoration:none}
/* Ключи и звук в шапке. Счётчик не должен ехать на трёхзначном числе,
поэтому ширина фиксируется цифрами, а не содержимым. */
.keybar b{min-width:1.6ch;text-align:right;display:inline-block}
.keybar{white-space:nowrap}
.sndbtn{display:inline-grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
border-radius:8px;border:1px solid var(--line);background:transparent;
color:var(--muted);cursor:pointer;padding:0}
.sndbtn:hover{color:var(--text);border-color:var(--muted)}
.sndico{width:17px;height:17px;fill:currentColor}
.sndbtn[aria-pressed="false"]{color:#6a6a70}
.sndbtn[aria-pressed="false"] .wv{opacity:0}
.sndbtn .sl{opacity:0}
.sndbtn[aria-pressed="false"] .sl{opacity:1}
/* ── шапка: все элементы справа одного роста ──────────────────────
Ключи, звук, тема и кнопки жили каждый со своим размером и прыгали
при перерисовке. Здесь один размер на всех, крупный под палец. */
.site__right{gap:10px;flex-wrap:nowrap;white-space:nowrap}
/* authSlot — обёртка, а не кнопка: без display:contents её дети считаются
одним элементом и шапка переносится на три строки. */
#authSlot{display:contents}
.site__right > *,#authSlot > *{height:38px;flex:0 0 auto}
.site__right .btn,#authSlot .btn{height:38px;padding:0 18px;font-size:14px;
border-radius:10px;display:inline-flex;align-items:center;line-height:1}
.iconbtn,.sndbtn{width:38px;height:38px;flex:0 0 38px;border-radius:10px;
display:grid;place-items:center;padding:0}
.keybar{height:38px;padding:0 13px;border-radius:10px;gap:7px;font-size:15px;
display:inline-flex;align-items:center}
.keyico{width:19px;height:19px}
.sndico{width:19px;height:19px}
.keybar b{min-width:3ch;text-align:center}
@media (max-width:900px){
.site__right{gap:8px}
.site__right .btn{padding:0 14px;font-size:13.5px}
.keybar{padding:0 11px}
}
@media (max-width:560px){
/* На телефоне остаётся главное: ключи и вход. Тема и звук уезжают в меню. */
.site__right #btnTheme{display:none}
.site__right .btn,#authSlot .btn{padding:0 12px;font-size:13px}
}
/* ============================================================
Меню в шапке — ровно по центру экрана
============================================================
Колонки 1fr auto 1fr держат меню в геометрическом центре, но боковые
колонки при этом равны по ширине, а правый блок с кнопками заметно
шире марки. На средних ширинах места не хватает и меню наезжало на
кнопки, поэтому ужимаем оба края по мере сужения окна. */
/* Ширина шапки упирается в 1320px, поэтому меню ужимаем всегда, а не
только на узких экранах: иначе «Тарифы» наезжают на кнопки справа. */
.site__nav{gap:0}
.site__nav .nav{padding:0 7px;font-size:13px}
.site__nav .nav::after{left:7px;right:7px}
@media (max-width:1300px){
.site__right{gap:6px}
.site__right .btn{height:32px;padding:0 11px;font-size:13px}
.site__right .iconbtn,.iconbtn{width:32px;height:32px;flex:0 0 32px}
.site__right > *,#authSlot > *{height:32px}
.site__nav .nav{padding:0 4px;font-size:12.5px}
.site__nav .nav::after{left:4px;right:4px}
}
@media (max-width:1240px){
/* Тему и звук уводим в узком окне: их место нужнее меню по центру. */
.site #btnTheme,.site__right #btnSnd{display:none}
.site__nav .nav{padding:0 5px;font-size:12.5px}
.site__nav .nav::after{left:5px;right:5px}
}
/* ---------- Пробный билет на главной ----------
Он стоит рядом с баннером «Сорок билетов» и отвечает на единственный
вопрос гостя: а что вы вообще умеете. Поэтому здесь настоящий билет,
настоящий кадр и настоящий разбор — без регистрации и без обещаний. */
.proba{margin:0;padding:26px 22px 22px;border-radius:var(--radius);
background:var(--card,#141414);border:1px solid #ffffff14}
.proba__head{max-width:62ch;margin:0 0 18px}
.proba__head .h2{margin:6px 0 8px}
.proba__head p{margin:0;opacity:.75}
.proba__stage{margin:0 0 14px}
.proba__stage .qcard{margin:0}
.proba__foot{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.proba__count{opacity:.6;font-size:13px;min-width:74px;text-align:center}
.proba__cta{display:inline-flex}
@media (max-width:640px){
.proba{padding:20px 14px 16px}
.proba__cta{width:100%;justify-content:center;text-align:center}
}
/* Шапка: центр по странице держится только пока правый блок влезает в свою
колонку. Он вырос до пяти элементов и стал шире левого, поэтому наезжал
на меню. Ужимаем обе стороны, а не двигаем центр. */
@media (max-width:1780px){
.site .nav{padding:0 6px}
.site__right{gap:8px}
}
@media (max-width:1560px){
.site .nav{padding:0 5px;font-size:12.5px}
}
/* Главная длинная: баннеры, тизер, пробный билет, статья, факты. Браузер
считает и красит всё это сразу, хотя видно только первый экран. Просим
его откладывать работу по секциям до подхода прокрутки; высота-заглушка
нужна, чтобы полоса прокрутки не прыгала. Свойство поддерживается не
везде, и там, где не поддержано, просто ничего не меняется. */
.home > .hgrp,
.home > .about,
.home .proba{content-visibility:auto;contain-intrinsic-size:auto 720px}
/* ---------- Пробный билет: кадр крупно, вопрос рядом ----------
Кадр — это и есть условие: по нему читают разметку, сигнал и поворотник.
Поэтому на широком экране он занимает большую колонку, а вопрос с
ответами становится рядом, а не под ним: так весь билет помещается в
один экран и не нужно прокручивать туда-сюда между картинкой и
вариантами. На узком всё возвращается в столбик. */
/* Общее правило .qcard ужимает карточку до 720 px и кадр до 300 px по
высоте — это верно для ленты билетов, где карточек много подряд. Здесь
карточка одна и она главная, поэтому оба ограничения снимаем. */
.proba .qcard{max-width:none;margin:0}
.proba .qcard__shot{max-height:none}
@media (min-width:1000px){
.proba .qcard{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
grid-template-rows:auto 1fr;column-gap:22px;align-items:start}
.proba .qcard__meta{grid-column:1/-1}
.proba .qcard__shot{grid-column:1;margin:0}
.proba .qcard__body{grid-column:2;grid-row:2;padding:0}
.proba .qcard__shot img{width:100%;height:auto}
}
.proba .qcard__q{font-size:19px;line-height:1.35}
.proba .qcard__opts{margin-top:12px}
.proba__say{margin:0 0 14px}
.proba__say .say + .say{margin-top:10px}
/* Кнопка «Играть» на главной должна быть заметна: это единственное
действие, ради которого сюда пришли. */
.bn--hero .btn--accent{font-size:17px;padding:0 26px;height:52px}
/* ---------- Путь до прав ----------
Не одна полоса, а три зоны разной ширины: ширина зоны — её вес в общем
пути. Так видно не только «сколько сделано», но и что впереди ещё
экзамен, а он дороже двадцати выученных вопросов. */
.prava{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.prava__track{display:flex;flex:1;gap:3px;min-width:0}
.prava__z{position:relative;overflow:hidden;border-radius:99px;
background:var(--line);height:6px;min-width:0}
.prava__fill{position:absolute;inset:0;transform-origin:left center;
background:var(--accent);border-radius:99px;transition:transform .5s ease}
.prava__zn{display:none}
.prava__meta{font-size:12.5px;color:var(--muted);white-space:nowrap;
font-variant-numeric:tabular-nums}
.prava__meta b{color:var(--ink)}
.prava--slim{max-width:1200px;margin:0 auto;padding:9px 20px 0}
.prava--slim:hover .prava__meta b{color:var(--accent)}
/* Крупная — уже с подписями зон: здесь есть место объяснить, из чего
складывается путь. */
.prava--big{display:block}
.prava--big .prava__track{gap:5px}
.prava--big .prava__z{height:12px;border-radius:7px}
.prava--big .prava__fill{border-radius:7px}
.prava--big .prava__zn{display:block;position:absolute;left:9px;top:50%;
transform:translateY(-50%);font-size:10px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink);opacity:.55;mix-blend-mode:difference}
.prava--big .prava__meta{display:none}
/* заход 100: «Путь до прав» стоял с max-width:1200 и margin:0 — то есть
прижимался к левому краю окна и вылезал за общую колонку, пока весь текст
ниже шёл по центру страницы. Это и читалось как кривая шапка кабинета.
Ширина и центрирование теперь те же, что у .page, минус её боковые поля —
карточка встаёт ровно по линии текста под ней. */
.pblock{max-width:calc(var(--maxw) - 48px);margin:0 auto 26px;padding:22px;border-radius:var(--radius);
background:var(--card,#141414);border:1px solid #ffffff14}
.pblock__top{display:flex;align-items:baseline;justify-content:space-between;
gap:16px;margin:0 0 14px}
.pblock__top .h2{margin:0}
.pblock__pct{font-size:34px;font-weight:800;line-height:1;
font-variant-numeric:tabular-nums;color:var(--accent)}
.pblock__pct i{font-style:normal;font-size:17px;opacity:.7;margin-left:2px}
.pblock__rows{list-style:none;padding:0;margin:16px 0 0;display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 18px}
.pblock__rows li{display:flex;flex-direction:column;gap:2px;padding:10px 0 0}
.pblock__rows b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);font-weight:700}
.pblock__rows span{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.pblock__rows i{font-style:normal;font-size:14px;font-weight:400;color:var(--muted)}
.pblock__rows p{margin:0;font-size:13px;color:var(--muted);line-height:1.4}
.pblock__next{margin:16px 0 0;font-size:14px;color:var(--muted)}
@media (max-width:720px){
.pblock{padding:16px 14px}
.pblock__rows{grid-template-columns:1fr;gap:0}
.pblock__rows li{border-top:1px solid var(--line);flex-direction:row;
align-items:baseline;gap:10px;padding:10px 0}
.pblock__rows p{display:none}
.prava--big .prava__zn{display:none}
}
/* ---------- Номера вопросов пробного билета ----------
Ряд заменяет тринадцать нажатий «Дальше» на одно. Цвет отмечает не
«посещал», а результат: зелёный — ответил верно, красный — ошибся. */
.pbnums{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.pbnum{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
background:transparent;color:var(--muted);font:inherit;font-size:14px;
font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums;
transition:border-color .15s,color .15s}
.pbnum:hover{color:var(--ink);border-color:var(--muted)}
.pbnum.is-on{color:var(--ink);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pbnum.is-ok{color:var(--green,#5cb875);border-color:currentColor}
.pbnum.is-bad{color:var(--red,#d2603f);border-color:currentColor}
.pbnum:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Кнопки первого экрана одной высоты: разная высота цепляет глаз на первом
же взгляде, а это единственное место, где выбор действительно есть. */
.bn--hero .btn{height:52px;display:inline-flex;align-items:center}
.proba__cta{margin-left:auto}
@media (max-width:640px){
.proba__foot{flex-wrap:wrap}
.proba__cta{margin:8px 0 0;width:100%;justify-content:center}
}
/* ---------- Главная на телефоне ----------
Экран маленький, и каждый лишний блок съедает шанс, что человек дойдёт
до билета. Оставляем то, ради чего пришли: обложку, шкалу пути, деда с
лентой гаражей, пробный билет и кнопки. Второстепенные баннеры уходят,
статья сворачивается под кнопку — не удаляется, а ждёт, пока спросят. */
.about__more{display:none}
@media (max-width:640px){
.home > .hgrp:not(.hgrp--key){display:none}
.about__t p{display:none}
.about.is-open .about__t p{display:block}
.about__more{display:inline-flex;align-items:center;height:44px;padding:0 18px;
margin-top:6px;border-radius:10px;border:1px solid var(--line);
background:transparent;color:var(--ink);font:inherit;font-weight:600;
cursor:pointer}
.about__more:active{border-color:var(--accent)}
.home > .about .facts{margin-top:14px}
/* Воздух между блоками важнее плотности: на телефоне глаз ведёт пустота. */
.home > *{margin-bottom:22px}
.pblock{margin-bottom:0}
}
/* ================= МОБИЛЬНАЯ ВЁРСТКА ТРЕНАЖЁРА ================= */
@media (max-width:720px){
/* Номера вопросов — одной строкой с прокруткой вбок. Двадцать штук в две
строки съедали треть экрана до того, как человек увидел вопрос. Края
растворяются в фоне: это единственный честный способ показать, что
список продолжается, не рисуя стрелок и не занимая места. */
.progress{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
padding:8px 14px;gap:6px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,
#000 calc(100% - 18px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 18px,
#000 calc(100% - 18px),transparent)}
.progress::-webkit-scrollbar{display:none}
.progress .pg{scroll-snap-align:center}
/* Разбор поднимается ПОВЕРХ карточки снизу, а не растягивает её вниз.
Раньше правильный ответ уезжал за нижний край, и человек прокручивал
туда-обратно между вопросом и объяснением. Теперь вопрос остаётся на
месте, а под шторкой проступает размытый фон — видно, что там ещё
что-то есть, но читается только шторка. */
.review{position:fixed;left:0;right:0;bottom:0;z-index:60;
margin:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
border-top:1px solid var(--line);border-radius:16px 16px 0 0;
background:color-mix(in srgb, var(--bg) 88%, transparent);
-webkit-backdrop-filter:blur(18px) saturate(1.2);
backdrop-filter:blur(18px) saturate(1.2);
box-shadow:0 -18px 44px rgba(0,0,0,.45);
transform:translateY(102%);transition:transform .22s ease,opacity .22s;
min-height:0;visibility:visible;opacity:1;max-height:70dvh;overflow-y:auto}
.review.is-on{transform:translateY(0)}
.review__text{font-size:15px;line-height:1.5}
.review__actions{margin-top:14px}
.review__actions .btn{flex:1 1 auto;justify-content:center;height:48px}
.review__hint{display:none}
/* Пока шторка открыта, под ней должно оставаться место, иначе последний
вариант ответа прячется под ней навсегда. */
.card.is-rev{padding-bottom:190px}
/* Кадр не должен уводить вопрос за экран. */
.stage{min-height:0}
}
/* ---------- Кошелёк в кабинете ---------- */
.wallet{max-width:1200px;margin:0 0 22px;padding:18px 22px;border-radius:var(--radius);
background:var(--card,#141414);border:1px solid #ffffff14;
display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.wallet__k{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);font-weight:700}
.wallet__v{font-size:32px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.wallet__v i{font-style:normal;font-size:18px;color:var(--muted)}
.wallet__r{display:flex;gap:10px;flex-wrap:wrap}
/* Суммы пополнения: три плитки, а не выпадающий список — выбор из трёх
делается взглядом, а список требует двух нажатий. */
.paypick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.paypick__b{height:56px;border-radius:12px;border:1px solid var(--line);
background:transparent;color:var(--ink);font:700 18px/1 inherit;cursor:pointer;
font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s}
.paypick__b:hover{border-color:var(--accent);background:#ffffff08}
/* Короткое сообщение внизу экрана. */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);
z-index:90;max-width:min(520px,92vw);padding:13px 18px;border-radius:12px;
background:rgba(20,20,22,.94);color:#f2efe9;border:1px solid #ffffff1f;
box-shadow:0 18px 44px rgba(0,0,0,.5);font-size:14.5px;line-height:1.45;
opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.is-in{opacity:1;transform:translate(-50%,0)}
.form__err{margin:2px 0 0;color:var(--red,#d2603f);font-size:13.5px}
@media (max-width:560px){
.wallet{padding:14px 16px}
.wallet__r{width:100%}
.wallet__r .btn{flex:1 1 auto;justify-content:center}
}
/* Секундомер пробного билета: тонкая цифра, а не красный счётчик — он
отмечает время, а не подгоняет. */
.proba__clock{margin-left:12px;font-size:14px;color:var(--muted);
font-variant-numeric:tabular-nums}
.proba__say .say + .say{margin-top:10px}
/* Галка сданного билета. Зелёная и мелкая: это отметка, а не медаль. */
.trow__st .ok{color:var(--green,#5cb875);font-weight:800;margin-right:2px}
/* «Все билеты» — вторичное действие рядом с билетом. Жёлтая заливка тянула
на себя внимание сильнее, чем сам вопрос; оставляем обводку. */
.proba__cta{border-color:var(--accent);color:var(--accent);background:transparent}
.proba__cta:hover{background:#f2b70514}
/* ================= ТЕЛЕФОН: ЧИТАЮТ ЗАГОЛОВКИ, НЕ АБЗАЦЫ =================
На маленьком экране человек видит картинку, три слова и кнопку — и
решает. Абзац поверх картинки он не читает, зато картинку из-за него
не видит. Поэтому на телефоне у баннеров остаются надзаголовок,
заголовок и кнопка; текст уходит совсем, а затемнение переезжает вниз,
чтобы кадр был виден целиком, а надпись читалась на нижней трети. */
@media (max-width:760px){
.bn{min-height:230px;border-radius:14px}
.bn--hero{min-height:300px;margin-top:8px}
.bn__p{display:none}
.bn::after{background:linear-gradient(180deg,rgba(8,7,9,.05) 0%,
rgba(8,7,9,.25) 45%,rgba(8,7,9,.88) 100%)}
.bn__in{justify-content:flex-end;height:100%;min-height:inherit;
padding:18px 18px 20px;gap:8px;max-width:100%}
.bn__kick{font-size:11px}
.bn__h{font-size:24px;line-height:1.15}
.bn--hero .bn__h{font-size:26px}
.bn__btn{margin-top:4px;padding:12px 20px;font-size:15px}
.bn--hero .btn{height:46px;padding:0 18px;font-size:15px}
.bn__pic img{object-position:50% 40%}
/* Шапка: ключи компактнее, звук прячем — он есть в игре, где и нужен. */
.site{gap:10px;padding-left:14px;padding-right:14px}
.keybar{height:36px;padding:0 10px;font-size:15px}
.sndbtn{display:none}
.btn--ico{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
.site__right{gap:8px}
/* Две шкалы в одном экране — лишняя. На телефоне остаётся крупная в блоке
«Путь до прав», тонкая под шапкой уходит. */
.prava--slim{display:none}
/* Отступы: одинаковый шаг между блоками, без случайных дыр. */
.home > *{margin:0 0 18px}
.home > .hgrp{display:block}
.home > .hgrp > * + *{margin-top:18px}
.cta{padding:18px 16px;margin-top:0}
.cta p{font-size:14px;line-height:1.45;margin:6px 0 0}
.cta__btns{margin:14px 0 0;width:100%}
.cta__btns .btn{flex:1 1 auto;justify-content:center}
.pblock{padding:16px 14px 14px}
.pblock__rows li p{display:none}
.proba{padding:16px 14px 14px}
.proba__head p{font-size:14px}
.teaser{padding:16px 14px}
}
/* ═══ заход 52: билеты — шкала с этапами, тренажёр как тест ═══════════
На странице билетов вместо строки с цифрами — одна шкала с четырьмя
этапами. В тренажёре: шапка не двигается, «Завершить» всегда на месте,
к отвеченным вопросам можно вернуться, кнопка «Следующий» не прыгает. */
.sbar{max-width:var(--maxw);margin:0 auto 26px;padding:6px 0 0}
.sbar__track{position:relative;height:12px;border-radius:7px;background:var(--panel-2);
margin:0 0 34px}
.sbar__fill{position:absolute;left:0;top:0;bottom:0;border-radius:7px;
background:linear-gradient(90deg,#f0c93a,var(--accent));
transition:width .5s cubic-bezier(.2,.8,.2,1)}
.sbar__m{position:absolute;top:0;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:6px;
pointer-events:none;white-space:nowrap}
.sbar__m i{display:block;width:12px;height:12px;border-radius:50%;
background:var(--bg);border:3px solid var(--panel-2);box-sizing:border-box}
.sbar__m.is-hit i{background:var(--accent);border-color:var(--accent)}
.sbar__m b{font-size:13px;font-weight:800;color:var(--text);
font-variant-numeric:tabular-nums;line-height:1}
.sbar__m small{font-size:11.5px;color:var(--muted);letter-spacing:.02em;line-height:1}
.sbar__m.is-hit b{color:var(--accent)}
.sbar{padding-right:34px}
.sbar__note{margin:0;font-size:15px;color:var(--muted);text-align:center}
@media (max-width:560px){
.sbar{margin-bottom:20px}
.sbar__track{height:10px;margin-bottom:30px}
.sbar__m i{width:10px;height:10px;border-width:2.5px}
.sbar{padding-right:8px}
.sbar__m small{display:none}
.sbar__note{font-size:14px}
}
.trow.is-soon{opacity:.55}
.trow.is-soon:hover{opacity:.8}
/* Шапка тренажёра: «Завершить» справа, всегда на одном месте. Ghost-кнопка
с едва заметной рамкой (var(--line)) здесь терялась среди чипов и кольца
таймера — читалась как подпись, а не как кнопка. Даём свой, более
заметный фон и рамку, не такие яркие, как у btn--accent (это не главное
действие экрана, но и не текст). */
.top__fin{padding:8px 16px;font-size:14px;font-weight:600;border-radius:9px;
white-space:nowrap;margin-left:6px;
background:var(--panel-2);border-color:rgba(255,255,255,.22)}
.top__fin:hover{background:var(--panel-2);border-color:rgba(255,255,255,.42)}
@media (max-width:620px){
.top__right{gap:8px}
.top__right #statStreak,.top__right #statFree{display:none}
.top__right .stat--score{padding:3px 8px;font-size:13px}
.ring__num{font-size:19px}
.top__fin{padding:7px 11px;font-size:13px;margin-left:2px}
}
@media (max-width:400px){
.top__right .stat--score{display:none}
}
/* Кнопка «Следующий вопрос» на широком экране стоит сразу под вариантами,
а разбор идёт ниже. Тогда её место зависит только от числа вариантов,
а не от длины объяснения — и она перестаёт ездить от вопроса к вопросу. */
@media (min-width:721px){
.review__actions{order:-1;margin:0 0 14px;padding-bottom:14px;
border-bottom:1px solid var(--line)}
.review{min-height:0}
}
/* На телефоне шторка разбора прокручивается, а кнопка прилипает к её низу:
длинный разбор не уводит кнопку за экран. */
@media (max-width:720px){
.review__actions{position:sticky;bottom:-1px;margin:14px -16px -16px;
padding:12px 16px calc(12px + env(safe-area-inset-bottom));
background:color-mix(in srgb, var(--bg) 94%, transparent)}
.review{padding-bottom:16px}
}
/* Возврат к отвеченному вопросу — без тряски и хлопка: это не новый ответ. */
.card.is-back,.card.is-back::after,.card.is-back .stage{animation:none !important}
/* Телефон: в шапке тренажёра остаются только билет, время и «Завершить».
Стрелки соседних билетов и очки на 390 px не помещаются — стрелки есть
на странице билетов, очки — в результате. */
@media (max-width:620px){
.top{overflow:hidden}
.top__left{min-width:0;flex:1 1 auto}
.top__left .deckbar{margin-left:0;padding-left:8px}
.deckbar__b{display:none}
.deckbar__t{min-width:0;font-size:15px}
.top__right{flex:0 0 auto}
.top__right .stat--score{display:none}
.top__fin{padding:7px 10px}
}
/* Невысокий экран ноутбука: кадр чуть ниже, чтобы вопрос, варианты и
кнопка «Следующий» помещались без прокрутки. */
@media (min-width:721px) and (max-height:840px){
.card .stage{height:clamp(140px,19vh,210px)}
.card{gap:11px}
.card__q{min-height:0}
}
/* Шапка раздела без кадра показывает только заголовок: служебная кнопка
с промптом посетителю ни к чему. */
.cover__pic .sprompt{display:none !important}
/* ═══ заход 53: телефон как приложение ═══════════════════════════════
Шапка: логотип · ключи · бургер. Низ: панель вкладок, как в соцсетях.
Тренажёр: кадр сверху, градиент, вопрос и варианты снизу — как пост;
«дальше» в нижней панели и не ездит. Главная: лента постов-билетов. */
.burger,.msheet,.tabbar,.qbar,.feed,.tnums{display:none}
@media (max-width:720px){
/* ── шапка ── */
.site{grid-template-columns:auto 1fr auto;gap:10px;padding:8px 14px;
padding-top:max(8px, env(safe-area-inset-top))}
/* заход 99: на телефоне шапка была полупрозрачной со стеклом
(backdrop-filter: blur). Размытый фон браузер пересчитывает на кадр
позже самого скролла — липкая шапка из-за этого «плавает», а баннер
под ней просвечивает и едет сквозь неё. На телефоне от стекла не
выигрываем ничего, а платим дрожью на каждом скролле: фон делаем
непрозрачным, фильтр снимаем. */
.site{
background:var(--bg);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.site .brand--sm{font-size:19px}
.site__nav,#btnTheme,.site .sndbtn,.site__right .btn,.site__right .navdrop{display:none !important}
.site__right{gap:8px}
.keybar{height:36px;padding:0 12px;font-size:15px}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
width:40px;height:36px;padding:0 8px;border:1px solid var(--line);border-radius:9px;
background:transparent;cursor:pointer}
.burger span{display:block;height:2px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#pravaSlot{display:none}
/* ── меню под бургером ── */
.msheet{display:block;position:fixed;left:0;right:0;top:53px;bottom:0;z-index:29;
background:var(--bg);overflow-y:auto;padding:10px 18px calc(90px + env(safe-area-inset-bottom))}
.msheet[hidden]{display:none}
.msheet__nav{display:flex;flex-direction:column}
.msheet__nav a{display:block;padding:14px 0;font-size:22px;font-weight:700;color:var(--text);
text-decoration:none;border-bottom:1px solid var(--line);letter-spacing:-.01em}
.msheet__nav a.is-here{color:var(--accent)}
.msheet__nav b{display:block;margin:26px 0 4px;font-size:12px;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted)}
.msheet__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.msheet__row .btn{justify-content:center;height:46px}
body.is-sheet{overflow:hidden}
/* ── нижняя панель ── */
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;
z-index:35;background:color-mix(in srgb, var(--bg) 92%, transparent);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;
color:var(--muted);text-decoration:none;font-size:10.5px;letter-spacing:.02em}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.tabbar a.is-here{color:var(--text)}
.tabbar__key i{display:grid;place-items:center;width:46px;height:46px;margin-top:-20px;
border-radius:50%;background:var(--accent);box-shadow:0 8px 22px rgba(255,219,77,.35)}
.tabbar__key svg{fill:#1a1a1a;stroke:none;width:26px;height:26px}
.tabbar__key{color:var(--accent)}
body:not(.in-game) #view{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
.coach{bottom:calc(74px + env(safe-area-inset-bottom)) !important}
.coach__show{bottom:calc(76px + env(safe-area-inset-bottom)) !important}
/* ── подвал: в цвет страницы, без линий ── */
.foot{background:var(--bg);border-top:0;margin-top:30px}
.foot__in{padding:10px 18px 24px;gap:18px}
.foot__in > div:first-child .brand{display:none}
.foot__in b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.foot__in a{font-size:15px;color:var(--text);margin-bottom:8px}
.foot__note{font-size:12.5px;max-width:none;margin-top:0;color:var(--muted)}
/* ── билеты: заголовок на кадре, номера в закрепе ── */
.page--flush .cover{position:relative}
.page--flush .cover__pic{aspect-ratio:4/3}
.page--flush .cover__pic::after{background:linear-gradient(0deg, var(--bg) 0%, rgba(8,8,11,.55) 38%, rgba(8,8,11,0) 62%)}
.page--flush .cover__in{position:absolute;left:0;right:0;bottom:0;padding:0 16px 14px}
.page--flush .cover__h{font-size:30px;line-height:1.05}
.page--flush .tagline:empty{display:none}
.tnums{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;position:sticky;top:53px;z-index:20;
margin:0 -14px 14px;padding:8px 14px;background:color-mix(in srgb, var(--bg) 94%, transparent);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tnums::-webkit-scrollbar{display:none}
.tnum{flex:0 0 auto;min-width:40px;height:38px;padding:0 10px;border-radius:10px;display:grid;place-items:center;
background:var(--panel-2);color:var(--text);font-weight:700;font-size:15px;text-decoration:none;
font-variant-numeric:tabular-nums}
.tnum.is-done{background:var(--accent);color:#1a1a1a}
.tnum.is-soon{opacity:.45}
.band--page .stick{margin-top:4px}
/* ── главная: лента постов ── */
.feed{display:block;margin:0 -14px 22px}
.fpost{background:var(--bg);margin-bottom:8px}
.fpost__h{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px}
.fpost__h > span:last-child{color:var(--muted);font-size:12.5px;margin-left:auto}
.fpost__ava{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#1a1a1a;
display:grid;place-items:center;font-weight:900;font-size:13px;flex:0 0 auto}
.fcar{position:relative;width:100%;aspect-ratio:4/5;background:#0d0d10;overflow:hidden}
.fcar__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.fcar__track::-webkit-scrollbar{display:none}
.fcar__cnt{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;
padding:4px 9px;border-radius:999px;font-variant-numeric:tabular-nums;pointer-events:none}
.fs{flex:0 0 100%;height:100%;position:relative;scroll-snap-align:start;overflow:hidden;
color:#fff;text-decoration:none;display:block;background:#0d0d10}
.fs__bg{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);
object-fit:cover;filter:blur(24px) brightness(.42) saturate(1.15)}
.fs__frame{position:absolute;left:0;top:48px;width:100%;z-index:2}
.fs__shot{position:relative;width:100%;height:auto;object-fit:contain;display:block}
.fs__frame svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fs__frame.is-orig svg{display:none}
.fs__orig{position:absolute;right:8px;top:8px;z-index:3;font:inherit;font-size:11px;font-weight:700;
letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.35);
border-radius:999px;padding:5px 10px;cursor:pointer;backdrop-filter:blur(4px)}
.fs__orig.is-on{background:#ffd24a;color:#1a1a1a;border-color:#ffd24a}
.fs__chip{position:absolute;top:14px;left:14px;z-index:3;background:var(--accent);color:#1a1a1a;
font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.fs__body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:70px 14px 14px;
background:linear-gradient(180deg, rgba(13,13,16,0) 0, rgba(13,13,16,.9) 60px, rgba(13,13,16,.97) 100%)}
.fs__q{margin:0 0 10px;font-size:17px;line-height:1.25;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.fs__ops{display:flex;flex-direction:column;gap:7px}
.fs__op{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:#fff;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;
padding:9px 11px;font-size:14px;line-height:1.3;cursor:pointer}
.fs__op i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#1a1a1a;
font-style:normal;font-weight:800;font-size:12px;display:grid;place-items:center}
.fs__op.is-ok{background:rgba(94,214,127,.22);border-color:rgba(94,214,127,.6)}
.fs__op.is-bad{background:rgba(255,92,92,.2);border-color:rgba(255,92,92,.55)}
.fs__op:disabled{cursor:default}
.fs__why{margin:9px 0 0;font-size:13px;line-height:1.4;color:rgba(255,255,255,.85)}
.fs--go .fs__mid{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
gap:10px;padding:24px;text-align:center;background:rgba(13,13,16,.55)}
.fs--go b{font-size:24px;line-height:1.1;font-weight:900;letter-spacing:-.02em;text-wrap:balance}
.fs--go span{font-size:14px;color:rgba(255,255,255,.8)}
.fs--go em{font-style:normal;align-self:center;margin-top:10px}
.fpost__dots{display:flex;justify-content:center;gap:5px;padding:9px 0 4px}
.fpost__dots i{width:6px;height:6px;border-radius:50%;background:#4a4a4f}
.fpost__dots i.is-on{background:var(--accent)}
/* Лента заменяет на телефоне баннер-герой: посты и есть витрина. */
/* Герой остаётся сверху — он объясняет, что это; баннер «40 билетов» после
ленты постов лишний, лента и есть билеты. */
.home:has(.feed) .hgrp--key{display:none}
.home:has(.feed) .whykeys{display:none}
#quiz .stage[hidden] ~ .card__q{margin-top:0}
/* ── тренажёр: пост во весь экран ── */
.screen .top{padding:6px 10px;gap:6px;
padding-top:max(6px, env(safe-area-inset-top))}
.top .brand--sm{display:none}
.top__left{gap:6px}
.top__left .deckbar{margin:0;padding-left:0;border-left:0}
.deckbar__t{font-size:16px}
.backbtn{padding:0;width:36px;height:36px;justify-content:center}
.backbtn span{display:none}
.top__right{gap:8px}
.top__right #statStreak{display:inline-flex !important;align-items:center;font-size:14px}
.top__right #statFree{display:none}
.top__fin{padding:7px 10px;font-size:13px;margin:0}
.ring__num{font-size:18px}
#quiz .card{padding:0 0 calc(84px + env(safe-area-inset-bottom));gap:0;background:transparent;
backdrop-filter:none}
#quiz .card__meta{padding:8px 14px 6px;font-size:12px}
#quiz .card .stage{height:auto;aspect-ratio:var(--shot, 16/9);max-height:46vh;border-radius:0;
margin:0;background:#0d0d10}
/* Кадры билетов широкие (2.67:1), на телефоне это ~150px высоты, и стрелки
с буквами стоят у нижнего края. Вопрос на кадр не наезжает: сцена видна
целиком, градиент — только мягкий стык с фоном. */
#quiz .card .stage::after{content:"";position:absolute;left:0;right:0;top:auto;bottom:-1px;height:22px;z-index:2;
background:linear-gradient(180deg, rgba(23,23,26,0), var(--bg))}
#quiz .card__q{padding:10px 14px 0;font-size:20px;line-height:1.22;min-height:0;margin-top:0;
position:relative;z-index:3;text-wrap:balance}
#quiz .options{padding:12px 14px 0;gap:9px;min-height:0}
#quiz .opt{padding:12px 13px;font-size:16px;border-radius:14px;gap:11px;align-items:center}
#quiz .opt__key{display:grid;width:26px;height:26px;border-radius:50%;background:var(--accent);
color:#1a1a1a;font-weight:800;font-size:13px;flex:0 0 auto}
#quiz .opt.is-correct .opt__key{background:var(--green);color:#fff}
#quiz .opt.is-wrong .opt__key{background:var(--red);color:#fff}
#quiz .legal{display:none}
#quiz .stage__orig{font-size:12px}
/* нижняя панель тренажёра */
.qbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:65;
padding:10px 12px calc(10px + env(safe-area-inset-bottom));
background:color-mix(in srgb, var(--bg) 92%, transparent);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.qbar .btn{flex:1 1 auto;justify-content:center;height:50px;font-size:16px;font-weight:700}
.qbar__next:disabled{opacity:.45}
.qbar__tk{flex:0 0 auto !important;padding:0 14px}
/* разбор — над панелью, без своей кнопки: она в панели */
.review{bottom:calc(70px + env(safe-area-inset-bottom));max-height:52dvh;border-radius:16px 16px 0 0}
.review__actions{display:none}
.review{padding-bottom:16px}
.card.is-rev{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
body.in-game .tabbar{display:none}
}
/* ═══ заход 54: правки по телефону ═══════════════════════════════ */
@media (max-width:720px){
/* Панель: непрозрачная и на своём слое — с blur Safari отрисовывал её с
запозданием, когда прятал свою строку адреса, и под ней мелькал контент. */
.tabbar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;
transform:translateZ(0);will-change:transform;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.qbar{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;transform:translateZ(0)}
/* лента: без шапки поста — номер билета уже на плашке слайда */
.feed{margin-top:-6px}
.fpost{margin-bottom:14px}
.fs__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.fs__low{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:60px 14px 16px;display:flex;
flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(13,13,16,0),rgba(13,13,16,.92) 45%)}
.fs__say{display:flex;gap:12px;align-items:center;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);
border-radius:14px;padding:11px 13px}
.fs__say img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--accent)}
.fs__say b{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.fs__say span{font-size:15px;line-height:1.35}
.fs__open{align-self:stretch;justify-content:center;height:48px;font-size:16px}
.fs--ded.is-got .fs__cover{filter:brightness(.85)}
/* герой на телефоне — короче и без второго абзаца */
.bn--hero .bn__p{display:none}
/* кнопки внизу главной: две в столбик, «Тарифы» — в меню */
.cta__btns{display:flex;flex-direction:column;gap:10px}
.cta__btns .btn{justify-content:center;width:100%}
.cta__tar{display:none}
.teaser__hint{display:none}
.cta p{font-size:14.5px;line-height:1.5}
/* подвал: одна колонка, компактно, без пустоты сверху */
.foot{margin-top:18px}
.foot__in{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;padding:18px 18px 22px}
.foot__in > div:first-child{grid-column:1 / -1;order:9;display:flex;flex-direction:column;gap:6px;
padding-top:14px;border-top:1px solid var(--line)}
.foot__in > div:first-child .brand{display:block;font-size:16px}
.foot__in > div:last-child{grid-column:1 / -1}
.foot__in > div:last-child a{display:inline-block;margin-right:16px}
.foot__note{font-size:12px;line-height:1.45}
}
/* ═══ заход 55: герой на телефоне, светлая тема по-настоящему ═══════ */
@media (max-width:720px){
/* Герой: высокий кадр, текст сверху на тёмном небе, герои целиком снизу. */
.home .bn--hero{min-height:560px;border-radius:14px;margin-top:6px}
.bn--hero .bn__pic img{object-position:62% 100%;object-fit:cover}
.bn--hero::after{background:linear-gradient(180deg,rgba(8,7,9,.94) 0%,rgba(8,7,9,.84) 22%,
rgba(8,7,9,.38) 44%,rgba(8,7,9,0) 60%,rgba(8,7,9,.4) 100%)}
.bn--hero .bn__in{justify-content:flex-start;padding:20px 16px;gap:10px}
.bn--hero .bn__kick{font-size:11px;letter-spacing:.16em}
.bn--hero .bn__h{font-size:28px;line-height:1.14}
.bn--hero .bn__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.bn--hero .btn{height:46px}
}
/* Токены, которые блоки из игры ждали, а сайт не объявлял: без них карточки
падали в тёмный #141414 и в светлой теме текст пропадал. */
:root{ --card:#ffffff; --card2:#f3f1ec; --ink:#1d1c1a; --gold:#8a6a10; --gold-ui:#b8860b; --hair-line:#e6e3dd }
html[data-theme="dark"]{ --gold-ui:#ffdb4d }
html[data-theme="dark"]{ --card:#1a1a1a; --card2:#1b1b1e; --ink:#f2f1ef; --gold:#ffdb4d; --hair-line:rgba(255,255,255,.08) }
.proba,.pblock,.mycol__big,.mycol__i{border-color:var(--hair-line)}
/* Светлая тема собрана целиком в заходе 57 (в конце файла). */
@media (max-width:720px){
.home .bn--hero{min-height:600px}
.bn--hero .bn__h{font-size:27px}
.bn--hero .btn--glass{border:1px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08)}
}
/* ═══ заход 56: герой на телефоне без наложения ═══════════════════════
Текст и кнопки — своим блоком сверху, кадр с героями — целиком под ним.
Ничего поверх лиц ни на одном размере экрана. */
@media (max-width:720px){
.home .bn--hero{min-height:0;display:flex;flex-direction:column;background:#0b0709}
.bn--hero::after{display:none}
.bn--hero .bn__in{position:relative;order:1;height:auto;min-height:0;padding:20px 16px 14px;
background:linear-gradient(180deg,#120a10 0%,#1a0c14 100%)}
.bn--hero .bn__pic{position:relative;order:2;inset:auto;height:300px;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34px);
mask-image:linear-gradient(180deg,transparent 0,#000 34px)}
.bn--hero .bn__pic img{object-position:62% 100%}
.bn--hero .bn__bg{display:none}
}
/* ═══ заход 57: светлая тема ══════════════════════════════════════════
Палитра: грунт #f6f5f2, карточки #fff с рамкой #e6e3dd и мягкой тенью,
текст #1d1c1a, второстепенный #6f6c66, вторая плоскость #edebe6.
Жёлтый #ffdb4d — только заливка (кнопки, шкалы, круг в панели).
Жёлтым текстом на светлом не пишем: вместо него тёмное золото --gold
(#8a6a10, 5:1 на белом) и --gold-ui (#b8860b) для значков и линий.
Кадры, посты и обложки остаются тёмными — это фотографии с белыми
подписями. Тёмная тема этим блоком не трогается. */
html[data-theme="light"]{
--shadow-card:0 1px 2px rgba(29,28,26,.04),0 6px 22px rgba(29,28,26,.06);
--shadow-pop:0 18px 48px rgba(29,28,26,.18),0 2px 6px rgba(29,28,26,.08);
--hair:#e6e3dd; --hair-2:#eeece7;
--paper:#1d1c1a; --mist:#6f6c66;
color-scheme:light;
}
/* ── шапка сайта ── */
html[data-theme="light"] .site{background:#fff;border-bottom-color:var(--line)}
html[data-theme="light"] .site__nav a{color:#4d4a44}
html[data-theme="light"] .site__nav a:hover,
html[data-theme="light"] .site__nav a.is-here{color:var(--text)}
html[data-theme="light"] .site__nav .nav::after{background:var(--gold-ui);opacity:.9}
html[data-theme="light"] .iconbtn,
html[data-theme="light"] .sndbtn,
html[data-theme="light"] .keybar,
html[data-theme="light"] .burger{background:#fff;border-color:var(--line);color:#4d4a44}
html[data-theme="light"] .iconbtn:hover,
html[data-theme="light"] .sndbtn:hover,
html[data-theme="light"] .keybar:hover{border-color:#b9b5ad;color:var(--text)}
html[data-theme="light"] .keybar.has-keys{color:var(--gold);border-color:#e3c76a;background:#fff8dc}
html[data-theme="light"] .sndbtn[aria-pressed="false"]{color:#9c988f}
html[data-theme="light"] .btn--ghost{background:#fff;border-color:var(--line);color:var(--text)}
html[data-theme="light"] .btn--ghost:hover{border-color:#b9b5ad;background:#fbfaf8}
html[data-theme="light"] .btn--primary{background:var(--text);color:#fff}
html[data-theme="light"] .btn--primary:hover{background:#000}
/* «Регистрация», «Все билеты»: жёлтая обводка с жёлтым текстом на белом
не читалась. Светлая заливка акцента и тёмный текст. */
html[data-theme="light"] .btn--ring{
background:#fff3c4;color:var(--text);box-shadow:inset 0 0 0 1.5px #f0cc45}
html[data-theme="light"] .btn--ring:hover{background:#ffe89a;box-shadow:inset 0 0 0 1.5px #e5be2e}
html[data-theme="light"] .proba__cta{background:#fff;color:var(--gold);border-color:#e3c76a;box-shadow:none}
html[data-theme="light"] .proba__cta:hover{background:#fff8dc}
/* ── выпадающее меню ── */
html[data-theme="light"] .drop{background:#fff;border-color:var(--line);box-shadow:var(--shadow-pop)}
html[data-theme="light"] .drop a{color:#4d4a44}
html[data-theme="light"] .drop a:hover{color:var(--text);background:#f3f1ec}
/* ── карточки и плоскости ── */
html[data-theme="light"] .proba,
html[data-theme="light"] .pblock,
html[data-theme="light"] .wallet,
html[data-theme="light"] .mycol__big,
html[data-theme="light"] .mycol__i,
html[data-theme="light"] .cta,
html[data-theme="light"] .teaser,
html[data-theme="light"] .plan,
html[data-theme="light"] .price,
html[data-theme="light"] .mode,
html[data-theme="light"] .vbox,
html[data-theme="light"] .kpi,
html[data-theme="light"] .wrow,
html[data-theme="light"] .artcta,
html[data-theme="light"] .award,
html[data-theme="light"] .whykeys,
html[data-theme="light"] .keysbox{
background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
html[data-theme="light"] .plan{border-width:2px}
html[data-theme="light"] .plan--hot{border-color:var(--accent)}
html[data-theme="light"] .price--best{border-color:var(--accent)}
html[data-theme="light"] .award.is-got{border-color:#e3c76a}
html[data-theme="light"] .whykeys,
html[data-theme="light"] .keysbox{background:#fffbea;border-color:#efdc9a}
html[data-theme="light"] .keysbox__n{color:var(--gold)}
html[data-theme="light"] .teaser{padding-bottom:30px}
html[data-theme="light"] .teaser__lead p{opacity:1;color:var(--muted)}
html[data-theme="light"] .teaser__hint{opacity:1;color:var(--muted)}
html[data-theme="light"] .teaser__bar{background:#e6e3dd;border-color:#d8d4cc}
html[data-theme="light"] .proba__head p,
html[data-theme="light"] .proba__count{opacity:1;color:var(--muted)}
html[data-theme="light"] .pblock__pct{color:var(--gold)}
html[data-theme="light"] .prava__z{background:#e6e3dd}
html[data-theme="light"] .prava--big .prava__zn{mix-blend-mode:normal;color:var(--muted);opacity:.9}
html[data-theme="light"] .prava--slim:hover .prava__meta b{color:var(--gold)}
/* Плитки, строки, факты. */
html[data-theme="light"] .tile,
html[data-theme="light"] .pddrow,
html[data-theme="light"] .chapter,
html[data-theme="light"] .tk,
html[data-theme="light"] .city,
html[data-theme="light"] .citybig{background:#fff;border-color:var(--line)}
html[data-theme="light"] a.tile:hover,
html[data-theme="light"] a.pddrow:hover,
html[data-theme="light"] .chapter:hover,
html[data-theme="light"] a.tk:hover{border-color:#b9b5ad}
html[data-theme="light"] .tile__ico,
html[data-theme="light"] .pddrow__n,
html[data-theme="light"] .chapter__n{background:#f0eee9}
html[data-theme="light"] .facts{background:var(--line);border-color:var(--line);box-shadow:var(--shadow-card)}
html[data-theme="light"] .fact{background:#fff}
html[data-theme="light"] .note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent)}
html[data-theme="light"] .tag{border-color:#d8d4cc;color:var(--muted)}
html[data-theme="light"] .tag--free{border-color:var(--green-line);color:var(--green)}
html[data-theme="light"] .qrow{background:#fff;border-color:var(--line)}
html[data-theme="light"] .awchip{background:#fff}
/* Билеты списком: стопки — белые карточки, зебра почти незаметна. */
html[data-theme="light"] .tgrp{background:var(--line);border-color:var(--line);box-shadow:var(--shadow-card)}
html[data-theme="light"] .trow{background:#fff}
html[data-theme="light"] .trow:nth-child(4n+1),
html[data-theme="light"] .trow:nth-child(4n+2){background:#fff}
html[data-theme="light"] .trow:nth-child(4n+3),
html[data-theme="light"] .trow:nth-child(4n+4){background:#fbfaf8}
html[data-theme="light"] .trow:hover,
html[data-theme="light"] .trow:focus-visible{background:#f3f1ec}
html[data-theme="light"] .trow__bar{background:#e6e3dd}
html[data-theme="light"] .trow__bar i{background:var(--gold-ui)}
html[data-theme="light"] .trow__shot{background:#fff3c4;color:var(--gold)}
html[data-theme="light"] .trow.is-done .trow__n,
html[data-theme="light"] .trow.is-done .trow__st{color:var(--gold)}
html[data-theme="light"] .tnum{background:#fff;border:1px solid var(--line)}
html[data-theme="light"] .tnum.is-done{background:var(--accent);border-color:#e5be2e}
/* Шкала билетов. */
html[data-theme="light"] .sbar__track{background:#e6e3dd}
html[data-theme="light"] .sbar__m i{background:#fff;border-color:#d8d4cc}
html[data-theme="light"] .sbar__m.is-hit i{background:var(--accent);border-color:#e5be2e}
html[data-theme="light"] .sbar__m.is-hit b{color:var(--gold)}
/* Реплики: белое облачко с рамкой, тёмный текст. */
html[data-theme="light"] .say__bub{background:#fff;border:1px solid var(--line);
box-shadow:0 1px 2px rgba(29,28,26,.05)}
html[data-theme="light"] .say__bub::before{background:#fff}
html[data-theme="light"] .say__face{background:#e6e3dd;box-shadow:0 0 0 1px var(--line)}
html[data-theme="light"] .say__tx{color:var(--text)}
html[data-theme="light"] .say__who{color:var(--muted)}
/* Варианты ответа: на белой карточке белая плашка невидима — берём
вторую плоскость и тонкую рамку. */
html[data-theme="light"] .opt{background:#f4f2ee;border-color:#e6e3dd}
html[data-theme="light"] .opt:hover:not(:disabled){background:#ecebe6;border-color:#d8d4cc}
html[data-theme="light"] .opt__key{background:#fff;color:var(--muted);box-shadow:0 0 0 1px #e0ddd6}
html[data-theme="light"] .opt.is-correct{background:var(--green-bg);color:#256a31;border-color:var(--green-line)}
html[data-theme="light"] .opt.is-wrong{background:var(--red-bg);color:#a72f22;border-color:var(--red-line)}
html[data-theme="light"] .opt.is-correct .opt__key,
html[data-theme="light"] .opt.is-wrong .opt__key{background:transparent;box-shadow:none;color:inherit}
html[data-theme="light"] .qcard{background:#fff;border-color:var(--line)}
html[data-theme="light"] .proba .qcard{background:transparent;border:0}
html[data-theme="light"] .qcard__meta{opacity:1;color:var(--muted)}
html[data-theme="light"] .qcard__why{background:#f8f7f4;border-left-color:var(--accent);border-radius:0 8px 8px 0}
html[data-theme="light"] .pbnum{background:#fff}
/* ── тренажёр (#quiz) ── */
html[data-theme="light"] #quiz{--bgshot:none}
html[data-theme="light"] #quiz::before,
html[data-theme="light"] #quiz::after{display:none}
html[data-theme="light"] #quiz .top{background:#fff;border-bottom-color:var(--line)}
html[data-theme="light"] #quiz .card{background:#fff;backdrop-filter:none;
box-shadow:0 0 0 1px var(--line)}
html[data-theme="light"] .backbtn,
html[data-theme="light"] .deckbar__b{background:#fff;border-color:var(--line);color:#4d4a44}
html[data-theme="light"] .backbtn:hover,
html[data-theme="light"] .deckbar__b:hover{background:#f3f1ec;color:var(--text)}
html[data-theme="light"] .chip{background:#f0eee9;color:#4d4a44}
html[data-theme="light"] .chip--city{background:#fff;border-color:var(--line)}
html[data-theme="light"] .stat{color:#4d4a44}
html[data-theme="light"] .stat--score,
html[data-theme="light"] .top__right .stat--score{color:#1d1c1a}
html[data-theme="light"] .top__fin{background:#f3f1ec;border-color:#b9b5ad}
html[data-theme="light"] .top__fin:hover{background:#ece9e2;border-color:#8f8b82}
html[data-theme="light"] .ring__bg{stroke:#e6e3dd}
html[data-theme="light"] .ring.is-bonus .ring__num{color:var(--green)}
html[data-theme="light"] .progress .pg{background:#fff;color:#4d4a44;box-shadow:0 0 0 1px var(--line)}
html[data-theme="light"] .progress .pg:hover{background:#f3f1ec;color:var(--text)}
html[data-theme="light"] .progress .pg.is-done{background:#fff;box-shadow:inset 0 0 0 1px #e5be2e}
html[data-theme="light"] .progress .pg.is-ok{background:var(--green-bg);color:var(--green);box-shadow:0 0 0 1px var(--green-line)}
html[data-theme="light"] .progress .pg.is-bad{background:var(--red-bg);color:var(--red);box-shadow:0 0 0 1px var(--red-line)}
html[data-theme="light"] .progress .pg.is-now{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 1px #e5be2e}
html[data-theme="light"] .card__badge{border-color:#d8d4cc}
html[data-theme="light"] .stage.is-plain::before{color:rgba(255,255,255,.7)}
html[data-theme="light"] .review{border-top-color:var(--line)}
html[data-theme="light"] .review__actions{border-bottom-color:var(--line)}
html[data-theme="light"] .review__hint{color:var(--muted)}
html[data-theme="light"] .limit__h{color:var(--text)}
html[data-theme="light"] .pointsfly{color:#fff}
/* ── модальное окно, награда, тост, наставники ── */
html[data-theme="light"] .modal{background:rgba(29,28,26,.42)}
html[data-theme="light"] .modal__box{background:#fff;border-color:var(--line);box-shadow:var(--shadow-pop)}
html[data-theme="light"] .field input{background:#fff;border-color:#d8d4cc}
html[data-theme="light"] .field input:focus{border-color:transparent}
html[data-theme="light"] .paypick__b:hover{background:#fff8dc}
html[data-theme="light"] .awardpop{background:rgba(29,28,26,.42)}
html[data-theme="light"] .awardpop__box{background:#fff;border-color:var(--line);box-shadow:var(--shadow-pop)}
html[data-theme="light"] .awardpop__ico{color:var(--gold-ui)}
html[data-theme="light"] .awardpop__kicker{opacity:1;color:var(--muted)}
html[data-theme="light"] .awardpop__h{opacity:1;color:var(--muted)}
html[data-theme="light"] .toast{background:#1d1c1a;color:#fff;border-color:#1d1c1a}
html[data-theme="light"] .ach{background:#fff;border-color:#e3c76a;box-shadow:var(--shadow-pop)}
html[data-theme="light"] .ach__ico{color:var(--gold-ui)}
html[data-theme="light"] .coach{background:#fff;border-color:var(--line);box-shadow:var(--shadow-pop)}
html[data-theme="light"] .coach__top{border-bottom-color:var(--line);background:#faf9f6}
html[data-theme="light"] .coach__ttl::before{background:var(--gold-ui)}
html[data-theme="light"] .coach__x:hover{color:var(--text);background:#f0eee9}
html[data-theme="light"] .coach__line p{color:var(--text)}
html[data-theme="light"] .coach__line--ded b{color:#8a5a1e}
html[data-theme="light"] .coach__line--instr b{color:#a3403e}
html[data-theme="light"] .coach__line--insp b{color:#3c5f9c}
html[data-theme="light"] .coach__show{background:#fff;border-color:var(--line);color:#4d4a44;box-shadow:var(--shadow-pop)}
html[data-theme="light"] .coach__show:hover{color:var(--text);border-color:#e3c76a}
/* ── телефон: бургер, панель вкладок, панель тренажёра, лента ── */
html[data-theme="light"] .msheet{background:#fff}
html[data-theme="light"] .msheet__nav a{border-bottom-color:var(--line)}
html[data-theme="light"] .msheet__nav a.is-here{color:var(--gold)}
html[data-theme="light"] .tabbar{background:#fff;border-top-color:var(--line);
box-shadow:0 -1px 0 rgba(29,28,26,.02)}
html[data-theme="light"] .tabbar a{color:#6f6c66}
html[data-theme="light"] .tabbar a.is-here{color:var(--text)}
html[data-theme="light"] .tabbar__key,
html[data-theme="light"] .tabbar__key.is-here{color:var(--gold)}
html[data-theme="light"] .tabbar__key i{box-shadow:0 6px 18px rgba(184,134,11,.32)}
html[data-theme="light"] .qbar{background:#fff;border-top-color:var(--line)}
html[data-theme="light"] .qbar .btn--ghost{background:#fff}
html[data-theme="light"] .tnums{background:rgba(255,255,255,.94);border-bottom-color:var(--line)}
html[data-theme="light"] .review{background:rgba(255,255,255,.96)}
@media (max-width:720px){
html[data-theme="light"] .review{background:#fff;box-shadow:0 -12px 36px rgba(29,28,26,.14)}
html[data-theme="light"] .review__actions{background:#fff}
html[data-theme="light"] #quiz .card{background:transparent;box-shadow:none}
html[data-theme="light"] #quiz .card .stage::after{
background:linear-gradient(180deg,rgba(246,245,242,0),var(--bg))}
html[data-theme="light"] #quiz .opt{background:#fff;box-shadow:var(--shadow-card)}
html[data-theme="light"] #quiz .opt.is-correct{background:var(--green-bg)}
html[data-theme="light"] #quiz .opt.is-wrong{background:var(--red-bg)}
html[data-theme="light"] #quiz .opt.is-correct .opt__key{background:var(--green);color:#fff}
html[data-theme="light"] #quiz .opt.is-wrong .opt__key{background:var(--red);color:#fff}
html[data-theme="light"] .fpost__dots i{background:#cfcbc3}
html[data-theme="light"] .foot{background:var(--bg)}
html[data-theme="light"] .about__more{background:#fff}
}
/* Посты ленты и баннеры — фотографии: остаются тёмными, подписи белые. */
html[data-theme="light"] .fs,
html[data-theme="light"] .fcar,
html[data-theme="light"] .bn,
html[data-theme="light"] .cover__h,
html[data-theme="light"] .cover__p,
html[data-theme="light"] .mode__cap b{color:#fff}
html[data-theme="light"] .page--flush .cover__pic::after{
background:linear-gradient(0deg, rgba(8,8,11,.72) 0%, rgba(8,8,11,.45) 38%, rgba(8,8,11,0) 62%)}
html[data-theme="light"] .cover__pic::after{
background:linear-gradient(90deg, rgba(8,8,11,.9) 0%, rgba(8,8,11,.8) 22%, rgba(8,8,11,.4) 40%, rgba(8,8,11,0) 58%)}
html[data-theme="light"] .hero2__pic::after{
background:linear-gradient(90deg, rgba(12,4,8,.94) 0%, rgba(12,4,8,.86) 26%,
rgba(12,4,8,.42) 48%, rgba(12,4,8,0) 66%),
linear-gradient(0deg, rgba(12,4,8,.55) 0%, transparent 34%)}
@media (max-width:760px){
html[data-theme="light"] .hero2__pic::after{
background:linear-gradient(0deg, var(--bg) 0%, rgba(0,0,0,0) 26%)}
}
/* ── жёлтый текст → тёмное золото ── */
html[data-theme="light"] .clause__n,
html[data-theme="light"] .plan li::before,
html[data-theme="light"] .top tr.is-me td,
html[data-theme="light"] .paybox__tag,
html[data-theme="light"] .paysum__row--total b,
html[data-theme="light"] .tagline,
html[data-theme="light"] .feat__i,
html[data-theme="light"] .carprice,
html[data-theme="light"] .shud__col--you b,
html[data-theme="light"] .part.is-got,
html[data-theme="light"] .twocol__p--big,
html[data-theme="light"] .chrow2__go,
html[data-theme="light"] .award.is-got .award__star,
html[data-theme="light"] .brow__g b,
html[data-theme="light"] .bt--sfx,
html[data-theme="light"] .awchip.is-got i,
html[data-theme="light"] .pgrp__h,
html[data-theme="light"] .carowner b,
html[data-theme="light"] .link--gold{color:var(--gold)}
html[data-theme="light"] .link{text-decoration-color:var(--gold-ui)}
html[data-theme="light"] .bn:not(.bn--hero):hover .bn__btn{color:#fff;box-shadow:inset 0 0 0 1.4px var(--accent)}
/* ── подвал ── */
html[data-theme="light"] .foot{background:#efede8;border-top-color:var(--line)}
html[data-theme="light"] .foot__in a{color:#4d4a44}
html[data-theme="light"] .foot__in a:hover{color:var(--text)}
/* ── выделение, скролл ── */
html[data-theme="light"] ::selection{background:#ffe89a;color:#1d1c1a}
html[data-theme="light"] .btn--primary:hover{background:#33312d}
html[data-theme="light"] .tsc{box-shadow:0 10px 26px rgba(29,28,26,.28)}
html[data-theme="light"] #quiz .card{box-shadow:0 0 0 1px #ebe8e2}
html[data-theme="light"] .qcard .opt{background:#f4f2ee}
html[data-theme="light"] .foot__note{color:#66635d}
/* Шкала «Путь до прав»: четыре этапа, первый закрыт. Колонки — не поровну,
а с теми же весами, что и заливка полосы над ними (PRAVA в app.js:
10/40/32/18) — иначе подписи «Автошкола/Теория/Билеты/Экзамен» стоят
каждая в четверти ширины, а сама полоса своими зонами показывает совсем
другие пропорции, и весь блок выглядит нескладным, будто шапка съехала. */
.pblock__rows{grid-template-columns:minmax(118px,5fr) minmax(0,20fr) minmax(0,16fr) minmax(96px,9fr)}
.pblock__rows li.is-done b{color:var(--gold)}
.pblock__rows li.is-done span{color:var(--gold)}
@media (max-width:560px){ .pblock__rows{grid-template-columns:1fr} }
/* ── заход 58: кадр во весь экран на телефоне (тап по кадру в тренажёре) ── */
.zoom{position:fixed;inset:0;z-index:120;background:#000;overflow:hidden;
-webkit-tap-highlight-color:transparent}
.zoom__box{position:absolute;left:50%;top:50%;width:100vw;height:auto;transform:translate(-50%,-50%)}
.zoom__box img{display:block;width:100%;height:auto;object-fit:contain}
.zoom__box svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* повёрнутый кадр: ширина коробки = высота экрана */
.zoom__box.is-turn{width:100dvh;transform:translate(-50%,-50%) rotate(90deg)}
.zoom__hint{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;
color:#fff;opacity:.6;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
body.is-zoom{overflow:hidden}
@media (max-width:720px){ #quiz .stage__img{cursor:zoom-in} }
/* ═══ заход 59: мобильная главная заново ═══════════════════════════
Вертикальный постер во весь экран, текст внизу на затемнении, кадр
мягко уходит в фон страницы. Шапка: огонёк, ключи и бургер одной
высоты и в одной рамке. Лента — один билет. */
/* .firebar — в app/roll.css (общий для сайта и игры) */
@media (max-width:720px){
.home{padding-left:14px;padding-right:14px}
.site__right{gap:8px}
.site__right > *,#authSlot > *,.keybar,.firebar,.burger{height:40px !important;border-radius:11px}
.keybar{padding:0 12px;min-width:74px;justify-content:center}
.firebar{padding:0 10px}
.burger{width:44px;padding:0 11px;gap:5px;border:1px solid var(--line)}
.burger span{height:2px}
/* герой — постер 9:16 во всю ширину */
.home .bn--hero{display:block;position:relative;margin:0 -14px 0;border-radius:0;
min-height:0;height:min(176vw,calc(100dvh - 128px));background:#120a10;overflow:hidden}
.bn--hero .bn__pic{position:absolute;inset:0;order:0;height:auto;-webkit-mask-image:none;mask-image:none}
.bn--hero .bn__pic picture{display:contents}
.bn--hero .bn__pic .bn__fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 35%;transform:none}
.bn--hero .bn__bg{display:none}
.bn--hero::after{display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
background:linear-gradient(180deg,rgba(11,7,9,0) 0%,rgba(11,7,9,.45) 34%,rgba(11,7,9,.9) 68%,var(--bg) 100%);
pointer-events:none}
.bn--hero .bn__in{position:absolute;left:0;right:0;bottom:0;z-index:2;order:0;height:auto;min-height:0;
max-width:none;padding:0 16px 22px;background:none;gap:8px;justify-content:flex-end}
.bn--hero .bn__kick{font-size:11px;letter-spacing:.16em;color:var(--accent)}
.bn--hero .bn__h{font-size:27px;line-height:1.1;margin:0;color:#fff}
.bn--hero .bn__p{display:none}
.bn--hero .bn__acts{display:flex;gap:8px;margin-top:8px;flex-wrap:nowrap}
.bn--hero .bn__acts .btn{height:48px;flex:1 1 0;justify-content:center;font-size:15px;padding:0 10px;white-space:nowrap}
.bn--hero .btn--glass{border:1px solid rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.1)}
html[data-theme="light"] .home .bn--hero{background:#1a0c14}
html[data-theme="light"] .bn--hero::after{background:linear-gradient(180deg,rgba(11,7,9,0) 0%,rgba(11,7,9,.5) 42%,rgba(11,7,9,.88) 74%,var(--bg) 100%)}
html[data-theme="light"] .bn--hero .bn__h{color:#fff}
/* лента сразу под героем, без шва */
.feed{margin-top:-2px}
.fpost{background:var(--bg)}
}
/* кадр билета в «Попробуйте прямо сейчас» — целиком, без обрезки под 16:9 */
.qcard__shot{aspect-ratio:auto}
.qcard__shot img{height:auto;object-fit:contain}
/* ═══ заход 62: десктоп — шапка Билетов и Правил ══════════════════════
Три жалобы про одно и то же место — шапку раздела.
1. В билетах на чёрной половине висел один большой заголовок, а кадр
начинался справа резким швом. Собираем шапку так же, как баннер
«Автошкола» на главной и шапку Экзамена: кикер, заголовок в две
строки, короткий лид и одна жёлтая кнопка.
2. В Правилах кадр «как бы не попадает»: размытая подложка светила
красным там, где сам кадр уже чёрный, и стык читался вертикальной
линией. Кадр теперь входит в подложку градиентом, подложка —
ровный тёмный воздух, а не вторая картинка.
Всё только для десктопа: телефон (≤720px) живёт своими правилами. */
@media (min-width:721px){
/* Кадр стоит в своей настоящей ширине (высота шапки × пропорции
кадра), а не в коробке во всю шапку. Только так маску можно считать
от собственного края кадра: при любой высоте шапки — и в билетах, и
в Правилах, и в Экзамене — стык растворяется одинаково. */
.page--flush .cover__pic .cover__fg{
left:auto;right:0;width:auto;height:100%;max-width:none;
object-fit:cover;object-position:center;
-webkit-mask-image:linear-gradient(90deg,
rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 7%,rgba(0,0,0,.6) 17%,#000 31%);
mask-image:linear-gradient(90deg,
rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 7%,rgba(0,0,0,.6) 17%,#000 31%);
}
/* Подложка — тёмный воздух под кадром, а не вторая копия картинки.
Раньше её свечение спорило с кадром ровно на стыке. */
.page--flush .cover__pic .cover__bg{
filter:blur(56px) saturate(.55) brightness(.24);transform:scale(1.14)}
/* Тень под текстом уходит в ноль к середине, плюс мягкие кромки
сверху и снизу: кадр садится в карточку, а не лежит на ней
вырезкой с прямым верхним краем. */
.page--flush .cover__pic::after,
html[data-theme="light"] .page--flush .cover__pic::after{
background:
linear-gradient(96deg,rgba(8,8,11,.96) 0%,rgba(8,8,11,.92) 26%,
rgba(8,8,11,.6) 44%,rgba(8,8,11,.2) 58%,rgba(8,8,11,0) 72%),
linear-gradient(180deg,rgba(8,8,11,.55) 0%,rgba(8,8,11,0) 20%,
rgba(8,8,11,0) 74%,rgba(8,8,11,.5) 100%)}
/* Шапка раздела — карточка одного роста на всех страницах: в Правилах
она была ниже Экзамена, и кадр в ней выглядел маленькой вставкой,
приклеенной справа. */
.page--flush .cover{min-height:clamp(272px,23vw,306px)}
/* ── Билеты: шапка-баннер ────────────────────────────────────────
Высота как у баннера на главной: заголовку в две строки, лиду и
кнопке есть где стоять, а список билетов всё ещё виден без
прокрутки. */
.cover--pitch{min-height:clamp(300px,25vw,368px)}
.cover--pitch .cover__in{max-width:min(600px,50%);
padding-block:clamp(30px,3vw,42px)}
.cover--pitch .cover__h{font-size:clamp(25px,2.4vw,33px);line-height:1.18;
letter-spacing:-.01em;text-wrap:balance}
.cover--pitch .cover__p{margin-top:14px;max-width:38ch;font-size:15px;
line-height:1.55;color:#d8d3cf}
.cover--pitch .cover__p ~ .btn{margin-top:22px}
}
/* Телефон: на кадре остаются только кикер и заголовок — лид и кнопка
там не нужны, ниже сразу лента номеров и весь список. Мобильную
вёрстку это не трогает, просто прячет то, что добавлено для десктопа. */
@media (max-width:720px){
.cover--pitch .cover__p,
.cover--pitch .cover__in .btn{display:none}
/* Заголовок стал длиннее, чем был, — кегль подрезан, чтобы он лёг в те
же две строки и шапка на телефоне осталась прежней высоты. */
.cover--pitch .cover__h{font-size:23px;line-height:1.12}
}
/* ═══ заход 63: страницы не прыгают по высоте ═══
Полоса прокрутки резервирует место всегда (контент не сдвигается влево-вправо
при смене страницы), а короткая страница не короче экрана — подвал не подскакивает. */
html{scrollbar-gutter:stable}
/* заход 99: было 100dvh. dvh — «динамическая» высота экрана: на телефоне она
меняется в момент, когда прячется адресная строка браузера. Значит, прямо
посреди скролла менялась и минимальная высота страницы — и текст подпрыгивал.
svh — высота при видимых панелях браузера, она постоянная: подвал по-прежнему
не подскакивает на короткой странице, но и высота больше не плывёт.
Первая строка — запас для браузеров без svh. */
#view{min-height:calc(100vh - 58px)}
#view{min-height:calc(100svh - 58px)}
/* ═══ заход 64: «Гаражи деда» — карусель-история на главной ═══ */
.gpost{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:40px;align-items:center;
padding:28px clamp(18px,4vw,38px);border-radius:18px;background:var(--panel);border:1px solid var(--hair-line)}
.gpost__lead p{opacity:.8;line-height:1.6;max-width:52ch;margin:10px 0 18px}
.gpost__acts{display:flex;flex-wrap:wrap;gap:10px}
html[data-theme="light"] .gpost{background:#fff;border-color:#e6e3dd}
@media (max-width:900px){
.gpost{grid-template-columns:1fr;gap:18px;padding:20px 14px}
.gcard{max-width:520px;width:100%;margin:0 auto}
.gcar__arr{display:none}
}
@media (max-width:720px){
.gpost{margin:0 -14px;border-radius:0;border-left:0;border-right:0;padding:18px 14px 14px}
.gpost__lead .h2{font-size:24px}
.gpost__acts{display:none}
.gcard{border-radius:0;margin:0 -14px;width:auto;max-width:none;border-left:0;border-right:0}
}
/* ═══ заход 66: телефон — герой без тёмной шторки сверху, шапки разделов без пустых полос ═══ */
@media (max-width:720px){
/* .bn::after задаёт inset:0 — с top:0 затемнение вставало на ВЕРХ кадра. Только снизу. */
.bn--hero::after{top:auto}
/* шапка раздела: кадр целиком и сразу под меню, заголовок под кадром — без полос и наплывов */
.page--flush .cover{margin-top:0}
.page--flush .cover__pic{aspect-ratio:auto;background:var(--bg)}
.page--flush .cover__pic .cover__bg{display:none}
.page--flush .cover__pic .cover__fg{position:relative;width:100%;height:auto;object-fit:fill;display:block}
.page--flush .cover__pic::after{display:none}
.page--flush .cover__in{position:relative;left:auto;right:auto;bottom:auto;padding:12px 16px 2px}
.page--flush .cover__h,.cover--pitch .cover__h{font-size:25px;line-height:1.1;margin:4px 0 0}
.page--flush .tagline{margin:0}
}
/* ═══ заход 68: инспектор в чате (билет и экзамен) ═══ */
.insp{position:fixed;left:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:72;display:flex;align-items:flex-end;gap:8px;
max-width:min(520px,calc(100% - 24px));pointer-events:none}
.insp > *{pointer-events:auto}
.insp__ava{width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);padding:0;background:#222;overflow:hidden;flex:0 0 auto;
cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.insp__ava img{width:100%;height:100%;object-fit:cover;display:block}
.insp__bub{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:9px 12px;
font-size:14px;line-height:1.35;box-shadow:0 10px 26px rgba(0,0,0,.4);opacity:0;transform:translateY(6px) scale(.96);
transform-origin:left bottom;transition:opacity .2s,transform .2s;max-width:36ch}
.insp__bub b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.insp.is-open .insp__bub{opacity:1;transform:none}
.insp__x{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:12px;
cursor:pointer;padding:0;display:none;align-self:flex-start;margin-left:-4px}
.insp.is-open .insp__x{display:grid;place-items:center}
@media (min-width:721px){ .insp{bottom:24px;left:24px} }
html[data-theme="light"] .insp__bub,html[data-theme="light"] .insp__x{background:#fff;border-color:#e6e3dd}
/* Правила на телефоне: читаемый кегль — заголовок 17, описание 15, плашки крупнее */
@media (max-width:720px){
.pgrps .pddrow{padding:13px 14px;gap:12px;border-radius:14px}
.pgrps .pddrow b{font-size:17px;line-height:1.28}
.pgrps .pddrow__lead{font-size:14.5px;line-height:1.42;margin-top:4px;color:var(--text);opacity:.78}
.pddrow__n{width:32px;height:32px;font-size:15px}
.pgrp__h{font-size:15px}
.pgrp__h i{font-size:14px}
.pddrow .tag{font-size:12px}
}
/* ═══ заход 70: «Вытянуть билет» в Автошколе + реплика деда ═══ */
.draw{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 18px}
.draw__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
.draw__btn,.draw__alt{height:auto;padding:16px 20px;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border-radius:16px;
text-decoration:none;justify-content:center}
.draw__btn{box-shadow:0 12px 30px rgba(255,219,77,.22)}
.draw__alt{background:var(--panel);border:1px solid var(--line);color:var(--text)}
.draw__alt:hover{border-color:var(--text)}
.draw__alt .draw__t{font-size:17px}
html[data-theme="light"] .draw__alt{background:#fff;border-color:#e6e3dd}
.draw__t{font-size:20px;font-weight:800;letter-spacing:-.01em}
.draw__s{font-size:12.5px;font-weight:500;opacity:.75;letter-spacing:.02em}
.draw .say{margin:0}
@media (max-width:720px){
.draw{gap:12px;margin-bottom:14px}
.draw__grid{grid-template-columns:1fr 1fr;gap:8px}
.draw__btn{grid-column:1 / -1;width:100%;padding:18px 20px;align-items:center;text-align:center}
.draw__alt{padding:12px 14px}
.draw__alt .draw__t{font-size:15.5px}
.draw__alt .draw__s{font-size:11.5px}
.draw__t{font-size:22px}
}
/* ═══ заход 75: подвал на телефоне — без пустоты сверху и не под панелью ═══ */
@media (max-width:720px){
.home{padding-bottom:16px}
#view{min-height:0}
.foot{margin-top:10px;border-top:1px solid var(--line)}
.foot__in{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:18px 16px calc(84px + env(safe-area-inset-bottom))}
.foot__in > div:first-child{grid-column:1 / -1;order:9;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.foot__in > div:first-child .brand{display:block;font-size:16px}
.foot__in > div:last-child{grid-column:1 / -1}
.foot__in > div:last-child a{display:inline-block;margin:0 14px 6px 0}
.foot__in b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.foot__in a{font-size:14.5px;margin-bottom:7px}
.foot__note{font-size:12px;line-height:1.45;max-width:none}
}
/* ═══ заход 77: десктоп — главная, демо-билет, Автошкола ═══
Четыре жалобы владельца, все про широкий экран.
1. Главная перегружена текстом: статья «О проекте» показывает первый
абзац, остальное — под кнопкой; между секциями меньше воздуха.
2. Демо-билет на главной верстался иначе, чем тренажёр (кадр слева,
варианты справа). Билет должен выглядеть одинаково везде: кадр во
всю ширину, под ним вопрос, под ним варианты в столбик.
3. Автошкола была слишком мелкой — «людям будет тяжело»: номера
билетов, три карточки-действия, реплики героев и список тем крупнее.
«Случайный билет» перестаёт быть жёлтой заливкой (жёлтые теперь
закладки над ним) и становится контуром с неоновым свечением.
4. Общий кегль на страницах на шаг выше.
Телефон (≤720px) не трогаем: тот макет принят как есть. */
@media (min-width:721px){
/* ── 4. общий масштаб текста на страницах (тренажёр не трогаем) ── */
#view{font-size:17px}
#view .h2{font-size:30px;line-height:1.18}
#view .h2--lead{font-size:clamp(26px,2.7vw,33px);line-height:1.15}
#view .tagline,#view .bn__kick{font-size:13px}
/* ── 1. ритм главной: между секциями 30px вместо 44 ── */
.home{gap:30px;padding-bottom:64px}
.home .about{gap:40px}
.home .band--page{padding-top:24px;padding-bottom:28px}
/* ── 1. «О проекте» сворачивается ──
Видно кикер, заголовок, первый абзац и три плитки. Второй и третий
абзацы ждут кнопки: она же и закрывает их обратно. */
.about__t p ~ p{display:none}
.about.is-open .about__t p ~ p{display:block}
.about__more{display:inline-flex;align-items:center;height:42px;padding:0 18px;
margin-top:14px;border-radius:10px;border:1px solid var(--line);
background:transparent;color:var(--text);font:inherit;font-size:15px;
font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.about__more:hover{border-color:var(--accent);color:var(--accent)}
/* ── 2. демо-билет = тренажёр ──
В тренажёре порядок такой: строка «билет · вопрос · блок», кадр во всю
ширину карточки, вопрос, варианты столбиком. Отменяем двухколоночную
раскладку и держим карточку по центру. */
.proba .qcard{display:block;max-width:880px;margin:0 auto}
.proba .qcard__meta{margin-bottom:10px}
.proba .qcard__shot{margin:0;max-height:none}
.proba .qcard__shot img{width:auto;max-width:100%;height:auto;
max-height:min(48vh,420px);margin:0 auto}
.proba .qcard__body{margin-top:16px;padding:0}
.proba .qcard__q{font-size:21px;line-height:1.35;margin:0 0 14px}
.proba .qcard__opts{display:grid;grid-template-columns:minmax(0,1fr);
gap:10px;margin-top:0}
.proba .qcard__opts .opt{min-height:52px}
.proba__head,.proba__foot,.pbnums,.proba__say{max-width:880px;
margin-left:auto;margin-right:auto}
.proba__head{width:100%}
/* ── 3. Автошкола: номера билетов видны и на широком экране ──
Сорок штук ложатся сеткой в два ряда по двадцать; листать вбок,
как на телефоне, на мыши неудобно. */
.tnums{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
gap:8px;margin:0 0 20px;padding:0;position:static;background:none;
border:0;overflow:visible}
.tnum{display:grid;place-items:center;min-width:0;height:48px;padding:0 6px;
border-radius:12px;border:1px solid var(--line);background:var(--panel-2);
color:var(--text);font-weight:700;font-size:17px;text-decoration:none;
font-variant-numeric:tabular-nums;transition:border-color .15s}
.tnum:hover{border-color:var(--text)}
/* Жёлтой заливкой на экране занята одна вещь — закладки. Пройденный
билет отмечаем контуром и цветом текста, а не второй заливкой. */
.tnum.is-done{background:rgba(255,219,77,.12);border-color:rgba(255,219,77,.55);
color:#ffdb4d}
.tnum.is-soon{opacity:.45}
/* ── 3. три карточки-действия крупнее ── */
.draw{gap:18px;margin-bottom:22px}
.draw__grid{gap:12px}
.draw__btn,.draw__alt{min-height:88px;padding:18px 22px;gap:5px;border-radius:16px}
.draw__t,.draw__alt .draw__t{font-size:20px;line-height:1.2}
.draw__s{font-size:14px;line-height:1.35;opacity:.8}
/* ── 3. «Случайный билет» — контур с неоном, а не жёлтый прямоугольник ── */
.draw .draw__btn{background:transparent;color:#ffdb4d;border:1px solid #ffdb4d;
box-shadow:0 0 14px rgba(255,219,77,.4), inset 0 0 8px rgba(255,219,77,.12)}
.draw .draw__btn:hover{background:rgba(255,219,77,.08);filter:none;
box-shadow:0 0 18px rgba(255,219,77,.5), inset 0 0 10px rgba(255,219,77,.16)}
.draw__btn .draw__t,.draw__btn .draw__s{color:#ffdb4d}
html[data-theme="light"] .draw .draw__btn{background:transparent;color:#a97f00;
border-color:#e0b520;box-shadow:0 0 14px rgba(255,219,77,.4), inset 0 0 8px rgba(255,219,77,.12)}
html[data-theme="light"] .draw .draw__btn .draw__t,
html[data-theme="light"] .draw .draw__btn .draw__s{color:#a97f00}
/* ── 3. реплики деда и инспектора на страницах ── */
.page .say__tx{font-size:16.5px;line-height:1.55}
.page .say__who{font-size:12px}
/* ── 3. «По темам»: строка раздела читается с расстояния ──
Только список тем: в Правилах свои размеры (.pgrps), их не трогаем. */
.page > .pddlist .pddrow{padding:13px 16px;gap:14px}
.page > .pddlist .pddrow b{font-size:18px;line-height:1.3}
.page > .pddlist .pddrow__lead{font-size:15px;margin-top:3px}
.page > .pddlist .pddrow__n{width:38px;height:38px;border-radius:10px;font-size:16px}
.page > .pddlist .pddrow .tag{font-size:13px}
}
@media (min-width:1180px){
.tnums{grid-template-columns:repeat(20,minmax(0,1fr))}
}
/* ═══ заход 79: десктоп = мобильные модули по ширине. Главная: шапка → билет (лента,
раскладка тренажёра) → гаражи с дедом → рулетка → путь до прав → о проекте.
Баннеры-дубли, «проба» с «Назад/Дальше» и три хвостовых баннера на широком
экране больше не показываем — на телефоне их нет, и там всё на месте.
Шапка сайта одна везде: в тренажёре она остаётся, тренажёр стоит под ней. ═══ */
@media (min-width:721px){
/* --- лента с билетом: один широкий пост, кадр 16:9, вопрос и ответы под ним --- */
.feed{display:block;width:100%;max-width:960px;margin:26px auto 30px;padding:0}
.fpost{position:relative;background:#0d0d10;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 44px rgba(0,0,0,.45);color:#fff}
.fcar{position:relative;width:100%;aspect-ratio:6/5;background:#0d0d10;overflow:hidden}
.fcar__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.fcar__track::-webkit-scrollbar{display:none}
.fcar__cnt{position:absolute;top:14px;right:16px;z-index:4;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;
padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums;pointer-events:none}
.fcar .gcar__arr{display:grid;place-items:center;top:270px;transform:none}
.fs{flex:0 0 100%;height:100%;position:relative;scroll-snap-align:start;overflow:hidden;background:#0d0d10}
.fs__bg{position:absolute;left:-30px;top:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;
filter:blur(24px) brightness(.4) saturate(1.1)}
.fs__frame{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;z-index:2;background:#000}
.fs__shot{position:relative;width:100%;height:100%;object-fit:contain;display:block}
.fs__frame svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fs__frame.is-orig svg{display:none}
.fs__orig{position:absolute;left:16px;bottom:12px;z-index:3;font:inherit;font-size:12px;font-weight:700;
padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.fs__orig.is-on{background:#ffd24a;color:#1a1a1a;border-color:#ffd24a}
.fs__chip{position:absolute;top:14px;left:16px;z-index:3;background:var(--accent);color:#1a1a1a;
font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:7px}
.fs__body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 26px 22px;
background:linear-gradient(180deg,rgba(13,13,16,0) 0%,rgba(13,13,16,.94) 26%,#0d0d10 100%)}
.fs__q{margin:0 0 12px;font-size:22px;line-height:1.22;font-weight:800;letter-spacing:-.01em;text-wrap:balance;color:#fff}
.fs__ops{display:flex;flex-direction:column;gap:8px}
.fs__op{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:#fff;font-size:16px;
padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);cursor:pointer}
.fs__op:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,219,77,.5)}
.fs__op i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#1a1a1a;
display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12.5px}
.fs__op.is-ok{background:rgba(94,214,127,.22);border-color:rgba(94,214,127,.6)}
.fs__op.is-bad{background:rgba(255,92,92,.2);border-color:rgba(255,92,92,.55)}
.fs__op:disabled{cursor:default}
.fs__why{margin:10px 0 0;font-size:14px;line-height:1.45;color:rgba(255,255,255,.85)}
.fs--go .fs__mid{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
align-items:center;text-align:center;gap:8px;padding:30px;background:rgba(0,0,0,.55)}
.fs--go b{font-size:32px;line-height:1.1;font-weight:900;letter-spacing:-.02em;text-wrap:balance;color:#fff}
.fs--go span{font-size:16px;color:rgba(255,255,255,.8)}
.fs--go em{font-style:normal;margin-top:12px}
.fs__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.fs--ded.is-got .fs__cover{filter:brightness(.85)}
.fs__low{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:80px 26px 26px;display:flex;flex-direction:column;gap:14px;
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.85))}
.fs__say{display:flex;gap:14px;align-items:center;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);
border-radius:14px;padding:14px 16px;max-width:640px}
.fs__say img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--accent)}
.fs__say b{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.fs__say span{font-size:17px;line-height:1.35;color:#fff}
.fs__open{align-self:flex-start;height:50px;padding:0 26px;font-size:16px}
.fpost__dots{display:flex;justify-content:center;gap:6px;padding:11px 0 12px}
.fpost__dots i{width:7px;height:7px;border-radius:50%;background:#4a4a4f;cursor:pointer}
.fpost__dots i.is-on{background:var(--accent)}
/* остальное с главной уходит: на телефоне этого нет, и там порядок принят */
.home:has(.feed) .hgrp,.home:has(.feed) .whykeys{display:none}
.bn--hero + .feed{margin-top:26px}
/* --- гаражи с дедом: текст и карточка одной группой, без пустой половины --- */
.gpost{width:100%;max-width:1060px;margin:0 auto 30px;grid-template-columns:minmax(0,1fr) 480px;gap:44px;padding:30px 36px;align-items:center}
.gpost__lead .tagline{margin-bottom:8px}
.gpost__lead .h2{font-size:clamp(28px,2.6vw,38px);line-height:1.08}
.gpost__lead p{font-size:17px;max-width:46ch;margin:14px 0 22px}
/* --- тренажёр под общей шапкой: своя марка и «Назад» без чужой полосы --- */
body.in-game{overflow:hidden}
body.in-game #siteHeader{position:fixed;top:0;left:0;right:0;z-index:70}
body.in-game #quiz{top:57px}
#quiz .top .brand--sm{display:none}
#quiz .top{padding-top:10px;padding-bottom:10px}
.backbtn{height:40px;padding:0 16px 0 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel,rgba(255,255,255,.04));
color:var(--text);font-size:14.5px;font-weight:600}
.backbtn:hover{border-color:var(--accent);color:var(--accent)}
}
@media (min-width:721px) and (max-width:1060px){
.gpost{grid-template-columns:minmax(0,1fr) 400px;gap:28px;padding:24px}
.feed{max-width:calc(100% - 28px)}
}
/* ═══ заход 80: раздел подсвечен и на внутренних экранах; герои открывают результат ═══ */
.tabbar a.is-here{color:var(--accent)}
.tabbar a.is-here svg{stroke:var(--accent)}
.msheet__nav a.is-here{color:var(--accent);padding-left:14px;position:relative}
.msheet__nav a.is-here::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}
html[data-theme="light"] .tabbar a.is-here{color:var(--gold)}
html[data-theme="light"] .tabbar a.is-here svg{stroke:var(--gold)}
.restalk{display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.restalk .say{margin:0}
@media (max-width:720px){ .restalk{margin:0 0 16px} }
/* ═══ заход 83: десктоп главной — не обрезки. Билет во всю ширину кадра 16:9,
справа чат героев (инспектор открывает, инструктор разбирает ответы, дед даёт
ключ). «Гаражи деда»: заголовок с интригой, пояснения от деда, слева ворота
9:16 целиком, справа машина 16:9 целиком под пеленой — «Открыть ворота»
снимает её со вспышкой. Телефон не тронут: чат и ворота там скрыты. ═══ */
.stt{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.stt__c{display:flex;flex-direction:column;gap:2px;padding:8px 10px 7px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);min-width:0}
.stt__c i{font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.stt__c b{font-size:14px;font-weight:700;color:var(--text);line-height:1.2;font-variant-numeric:tabular-nums}
.stt__c b small{font-size:10px;font-weight:500;color:var(--muted);margin-left:3px}
html[data-theme="light"] .stt__c{background:#f4f2ee;border-color:#e6e3dd}
@media (max-width:720px){ .gdesk,.fchat{display:none} .gpost__lead .say{margin:12px 0 0} }
@media (min-width:721px){
.feed{width:100%;max-width:1180px;margin:26px auto 30px}
.fpost{display:grid;grid-template-columns:minmax(0,1fr) 360px;background:#0d0d10;border-radius:18px;overflow:hidden;
border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 44px rgba(0,0,0,.45);color:#fff}
.fmain{min-width:0;display:flex;flex-direction:column}
.fcar{aspect-ratio:8/7;flex:1 1 auto}
.fcar .gcar__arr{top:200px;transform:none}
.fs__frame{top:0}
.fs__body{padding:30px 22px 18px}
.fs__q{font-size:21px;margin-bottom:12px}
.fs__op{font-size:15.5px;padding:11px 14px}
.fs__why{display:none}
.fchat{display:flex;flex-direction:column;min-height:0;border-left:1px solid rgba(255,255,255,.08);background:#111114}
.fchat__h{padding:14px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a948e;border-bottom:1px solid rgba(255,255,255,.08)}
.fchat__log{flex:1 1 auto;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.fchat .say{margin:0;gap:10px}
.fchat .say__face{width:36px;height:36px;border:2px solid var(--accent)}
.fchat .say__bub{padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:3px 14px 14px 14px;max-width:none}
.fchat .say__bub::before{display:none}
.fchat .say__who{font-size:10px;letter-spacing:.16em;margin-bottom:3px}
.fchat .say__tx{font-size:13.5px;line-height:1.45;color:#fff}
.fchat .say__tx a{color:var(--accent);font-weight:700}
/* гаражи */
.gpost{display:block;width:100%;max-width:1180px;margin:0 auto 30px;padding:30px 30px 26px}
.gpost__lead{text-align:center;max-width:820px;margin:0 auto 22px}
.gpost__lead .h2{font-size:clamp(28px,2.6vw,40px);line-height:1.08}
.gpost__lead .say{margin:16px auto 0;text-align:left;max-width:680px}
.gpost__lead .say__bub{padding:12px 16px}
.gpost__lead .say__tx{font-size:15px;line-height:1.5}
.gpost__acts,.gpost .gcard{display:none}
.gdesk{position:relative}
.gdesk__one{display:none;grid-template-columns:360px minmax(0,1fr);gap:18px;align-items:stretch}
.gdesk__one.is-on{display:grid}
.gdesk__gate{position:relative;border-radius:14px;overflow:hidden;background:#0d0d10;aspect-ratio:9/16;border:1px solid rgba(255,255,255,.08)}
.gdesk__gate img{width:100%;height:100%;object-fit:cover;display:block}
.gdesk__gate .gs__chip{position:absolute;top:12px;left:12px}
.gdesk__box{display:flex;flex-direction:column;gap:14px;min-width:0}
.gdesk__stage{position:relative;border-radius:14px;overflow:hidden;background:#0d0d10;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.08)}
.gdesk__car{width:100%;height:100%;object-fit:cover;display:block;filter:blur(16px) brightness(.28) saturate(.6);transform:scale(1.06);
transition:filter 1.1s ease,transform 1.8s cubic-bezier(.22,.61,.36,1)}
.gdesk__veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;transition:opacity .4s ease}
.gdesk__veil b{font-size:22px;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.gdesk__stage::after{content:"";position:absolute;inset:-20%;pointer-events:none;opacity:0;z-index:2;
background:radial-gradient(ellipse at 50% 45%,rgba(255,240,200,1) 0%,rgba(255,220,120,.7) 28%,rgba(255,200,80,0) 62%)}
.gdesk__one.is-flash .gdesk__stage::after{animation:gdFlash 1.4s ease-out both}
@keyframes gdFlash{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
.gdesk__one.is-open .gdesk__car{filter:none;transform:scale(1)}
.gdesk__one.is-open .gdesk__veil{opacity:0;pointer-events:none}
.gdesk__info{flex:1 1 auto;display:flex;flex-direction:column}
.gdesk__found{display:none}
.gdesk__one.is-open .gdesk__found{display:block}
.gdesk__one.is-open .gdesk__locked{display:none}
.gdesk__info .say{margin:0}
.gdesk__found .say{margin-top:12px}
.gdesk__h{margin:0 0 10px;font-size:24px;font-weight:800;letter-spacing:-.01em}
.gdesk__h small{font-size:15px;color:var(--muted);font-weight:500;margin-left:6px}
/* заход 100: было пять равных колонок. «3,8 л · рядный 6» в такую колонку
не влезает и переносится на вторую строку — ряд становится вдвое выше и
выглядит разъехавшимся, причём только у машин с длинной строкой мотора
(жалоба владельца: «открыл машину — вёрстка поехала, но не на всех»).
Плитка теперь берёт ширину по своему тексту и делит остаток с соседями. */
.gdesk .stt{display:flex;flex-wrap:wrap;gap:8px}
.gdesk .stt__c{flex:1 1 auto;min-width:0}
.gdesk__acts{display:flex;gap:10px;margin-top:14px}
.gdesk__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.gdesk__nav .gcar__arr{position:static;transform:none;display:grid;place-items:center}
.gdesk__cnt{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
}
@media (min-width:721px) and (max-width:1100px){
.fpost{grid-template-columns:minmax(0,1fr) 300px}
.gdesk__one{grid-template-columns:280px minmax(0,1fr)}
.gdesk .stt{gap:7px}
}
/* ═══ заход 84: телефон — лента во всю ширину, поле больше, зона свайпа шире.
Люди тянули под точками и в зазоре между блоками — там ничего не двигалось,
а большие отступы читались как активная зона. Теперь карточка без полей,
точки крупнее, под ними полоса, и свайп по ней и по зазору тоже листает. ═══ */
@media (max-width:720px){
.home{gap:20px}
.feed{margin:-8px -14px 0;padding:6px 0 16px}
.bn--hero + .feed{margin-top:-8px}
.fpost{margin:0}
.fcar{aspect-ratio:3/4}
.fpost__dots{padding:14px 0 8px;gap:7px}
.fpost__dots i{width:8px;height:8px}
.feed,.fpost__dots{touch-action:pan-y}
}
/* ═══ заход 85: дед вручает ключ — попап вместо тоста ═══ */
.dedpop{display:flex;gap:16px;align-items:flex-start}
.dedpop__face{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:3px solid var(--accent)}
.dedpop__who{display:block;font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.dedpop__tx{margin:0 0 10px;font-size:17px;line-height:1.45}
.dedpop__keys{margin:0 0 16px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dedpop__keys svg{width:18px;height:18px}
.dedpop__keys b{color:var(--text);font-size:16px}
.dedpop__acts{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:720px){
.dedpop{gap:12px}
.dedpop__face{width:56px;height:56px}
.dedpop__tx{font-size:16px}
.dedpop__acts{width:100%}
.dedpop__acts .btn{flex:1 1 auto;justify-content:center}
}
/* ═══ заход 86: облако деда видно; аватары в чате крупнее и разные; номера ответов — контур ═══ */
.gpost__lead .say__bub,.gdesk__info .say__bub{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:3px 16px 16px 16px;padding:12px 16px}
.gpost__lead .say__bub::before,.gdesk__info .say__bub::before{display:none}
html[data-theme="light"] .gpost__lead .say__bub,html[data-theme="light"] .gdesk__info .say__bub{background:#f4f2ee;border-color:#e6e3dd}
.say--ded .say__face{box-shadow:0 0 0 2px var(--accent)}
.say--instructor .say__face{box-shadow:0 0 0 2px #5aa9ff}
.say--inspector .say__face{box-shadow:0 0 0 2px #ff6b6b}
.fchat .say__face{border:0}
.say--ded .say__who{color:var(--accent)}
.say--instructor .say__who{color:#5aa9ff}
.say--inspector .say__who{color:#ff6b6b}
.fs__op i{background:transparent;border:1.5px solid rgba(255,219,77,.6);color:var(--accent)}
.fs__op.is-ok i{background:var(--green);border-color:var(--green);color:#fff}
.fs__op.is-bad i{background:var(--red);border-color:var(--red);color:#fff}
@media (min-width:721px){
.fchat .say__face{width:48px;height:48px;border-width:2.5px}
.fchat .say__who{font-size:11px}
}
@media (max-width:720px){
#quiz .opt__key{background:transparent;border:1.5px solid rgba(255,219,77,.6);color:var(--accent)}
#quiz .opt.is-correct .opt__key{background:var(--green);border-color:var(--green);color:#fff}
#quiz .opt.is-wrong .opt__key{background:var(--red);border-color:var(--red);color:#fff}
#quiz .opt.is-picked .opt__key{background:var(--accent);border-color:var(--accent);color:#1a1a1a}
}
/* ═══ заход 89: меню крупнее; «Оригинал» всегда в нижнем левом углу кадра ═══ */
@media (min-width:721px){
.site__nav .nav{font-size:15.5px;height:36px;padding:0 13px}
@media (max-width:1180px){ .site__nav .nav{font-size:14.5px;padding:0 10px} }
}
.stage__orig{top:auto;right:auto;left:12px;bottom:12px}
.fs__orig{top:auto;right:auto;left:12px;bottom:12px}
/* ═══ заход 90: подсказки крупнее и сразу развёрнуты; подвал ближе ═══ */
@media (min-width:721px){
.coach{width:min(420px,86vw);right:22px;bottom:22px}
.coach__top{padding:11px 14px}
.coach__ttl{font-size:12px}
.coach__feed{padding:14px;gap:12px}
.coach__line img{width:46px;height:46px}
.coach__line b{font-size:11px}
.coach__line p{font-size:16px;line-height:1.5}
.coach__show{font-size:15px}
.coach__show img{width:34px;height:34px}
.home,.home.home{padding-bottom:36px}
.page{padding-bottom:36px}
.foot{margin-top:28px}
}
/* ═══ заход 91: чат справа от билета не растягивает карточку ═══
Лента реплик растёт с каждым слайдом; раньше вместе с ней росла строка
сетки, и под кадром появлялась пустота. Теперь колонка чата берёт высоту
у карточки, а лента прокручивается внутри. */
@media (min-width:721px){
.fchat{position:relative;min-height:0;height:auto}
.fchat__h{position:absolute;top:0;left:0;right:0;height:46px;box-sizing:border-box;display:flex;align-items:center}
.fchat__log{position:absolute;top:46px;left:0;right:0;bottom:0;overflow:auto}
}
/* ═══ заход 93: карточка ленты на десктопе — по содержимому, а не по пропорции ═══
Раньше .fcar держал 8/7 при любой ширине: на широком окне под кадром
оставалась пустая полоса, вопрос прижимался к низу. Теперь кадр 16:9 и
вопрос идут потоком, высота дорожки — по самому длинному слайду. */
@media (min-width:721px){
.fcar{aspect-ratio:auto}
.fcar__track{height:auto;align-items:stretch}
.fs{height:auto;min-height:0;display:flex;flex-direction:column}
.fs .fs__bg{display:none}
.fs__frame{position:relative;top:auto;flex:0 0 auto}
.fs__body{position:relative;bottom:auto;padding:18px 26px 22px;background:#0d0d10;flex:1 1 auto}
.fs--ded,.fs--go{min-height:420px}
}
/* Находка на главной — в окне, а не под лентой: крутанул, посмотрел, закрыл. */
@media (min-width:721px){
.modal__box--prize{max-width:1080px;padding:22px 22px 24px}
.modal__box--prize .hprize{margin:0}
.modal__box--prize .modal__x{top:14px;right:14px;font-size:20px;z-index:2}
}
/* ═══ заход 94: заправка, замок, документы ═══ */
.limit{max-width:560px}
.limit__t{text-align:left;margin:6px 0 16px}
.limit__t .say{margin:0 0 12px}
.limit__t .limit__p{color:var(--muted);font-size:15px;line-height:1.5;margin:0}
.fuel{margin-top:22px}
.plan--fuel{position:relative}
.plan__badge{position:absolute;top:-11px;left:18px;background:var(--accent);color:#1a1a1a;font-size:11px;
font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.plan__per{color:var(--muted);font-size:13.5px;margin:-4px 0 14px;flex:1 1 auto}
.plan--fuel .btn{width:100%;justify-content:center}
.fuel__what{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.fuel__what b{display:block;margin-bottom:8px}
.fuel__what ul{list-style:none;display:grid;gap:7px;color:var(--muted);font-size:14.5px;line-height:1.45;padding:0;margin:0}
.fuel__what li::before{content:"— ";color:var(--accent)}
.fuel__keysBlock{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.fuel__keysBlock .fuel{margin-top:16px}
.fuel__fine{margin-top:22px;font-size:13.5px;line-height:1.5}
@media (max-width:720px){ .fuel__what{grid-template-columns:1fr} .plan__badge{left:14px} }
.legal{line-height:1.6}
.legal__nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.legal__nav a{padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:14px}
.legal__nav a.is-on{border-color:var(--accent);color:var(--text)}
.legal h1{font-size:26px;margin:0 0 12px}
.legal h2{font-size:19px;margin:28px 0 10px}
.legal h3{font-size:16px;margin:20px 0 8px}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px 18px}
.legal hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.legal blockquote{border-left:3px solid var(--line);margin:0 0 12px;padding:4px 0 4px 14px;color:var(--muted)}
.legal .tblwrap{overflow-x:auto;margin:0 0 14px}
.legal table{border-collapse:collapse;width:100%;font-size:14px}
.legal th,.legal td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.legal th{background:var(--panel)}
.legal code{font-family:inherit;background:var(--panel);padding:1px 5px;border-radius:5px}
/* заход 100: левая колонка подвала читалась хуже остальных. Реквизиты шли
сплошной серой стеной в 40 знаков шириной и рвались посередине — между
«ОГРНИП» и номером, между «МИФНС №» и цифрой. Даём им ширину колонки,
воздух между строк и отделяем от описания тонкой чертой: юридический блок
должен читаться как сноска, а не спорить с навигацией по весу. */
.foot__req{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
font-size:12px;line-height:1.7;max-width:52ch;opacity:.9}
.foot__tg{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;margin-top:8px}
.foot__tg:hover{color:#2AABEE}
.foot__tg svg{flex:0 0 auto;color:#2AABEE}
.foot__req a{display:inline;color:var(--muted)}
.legal{text-align:left;max-width:860px;font-size:15.5px}
.legal .legal__nav{justify-content:flex-start}
.trow__lock{color:var(--muted);font-size:12.5px;letter-spacing:.04em}
.trow__lock::before{content:"🔒 ";font-size:11px}
.trow__free{color:var(--accent);font-size:12.5px;font-weight:700;letter-spacing:.04em}
.trow.is-lock{opacity:.78}
.trow.is-lock:hover{opacity:1}
/* ============================================================
ЗАХОД 103. ДЕСКТОП РАБОТАЕТ КАК ТЕЛЕФОН
Жалоба владельца: «опять скролл в билетах, там ничего нету,
пропорции нарушаются». Замер подтвердил: у .card стоял
overflow-y:auto, и содержимое перевешивало на 98 px — полоса
появлялась ещё до ответа, колесо уводило кадр за верхний край.
Лечили это раньше бронью места (min-height у вопроса, вариантов
и разбора), но бронь и была причиной перевеса.
Убираем корень: разбор больше не в потоке. Он приходит шторкой
поверх вариантов — ровно так, как давно сделано на телефоне.
Тогда прокручивать нечего, ничего не прыгает, а освободившееся
место уходит кадру: он становится крупнее и без чёрных полей.
============================================================ */
@media (min-width:721px){
/* clip, а не hidden: клипует так же, но не создаёт полосу прокрутки. */
.card{overflow:clip}
/* Бронь места держала кнопку от прыжков. Шторка держит её сама. */
.card__q{min-height:0}
#quiz .options,.options{min-height:0}
/* Кадр по пропорции съёмки, а не в коробке фиксированной высоты:
съёмка 8:3, коробка была 3.3:1 — картинку зажимало полями по бокам
и она выходила мельче, чем могла. Селектор с #quiz — чтобы
послабление для низких окон ниже по файлу не перебивало высоту. */
#quiz .card .stage,.card .stage{height:auto;aspect-ratio:8/3;max-height:44vh}
.review{position:absolute;left:0;right:0;bottom:0;z-index:20;
margin:0;padding:16px 20px;
border-top:1px solid var(--line);border-radius:16px 16px 0 0;
background:color-mix(in srgb, var(--bg) 90%, transparent);
-webkit-backdrop-filter:blur(18px) saturate(1.2);
backdrop-filter:blur(18px) saturate(1.2);
box-shadow:0 -18px 44px rgba(0,0,0,.45);
transform:translateY(102%);transition:transform .22s ease;
min-height:0;visibility:visible;opacity:1;
max-height:60%;overflow-y:auto;display:flex;flex-direction:column}
.review.is-on{transform:translateY(0)}
/* Кнопка прилипает к низу шторки: длинный разбор не уводит её вниз.
order:-1 из прежней раскладки (кнопка над разбором) больше не нужен. */
.review__actions{order:0;position:sticky;bottom:-16px;
margin:14px -20px -16px;padding:12px 20px;
border-bottom:0;border-top:1px solid var(--line);
background:color-mix(in srgb, var(--bg) 94%, transparent)}
}
/* На невысоком окне кадру нельзя занимать 44vh — иначе вариантам
остаётся полоска. Ограничиваем, пропорцию сохраняем. */
@media (min-width:721px) and (max-height:800px){
#quiz .card .stage,.card .stage{max-height:32vh}
}
/* ═══ ЗАХОД 104: таблица тарифов ══════════════════════════════════════════
Одна таблица на странице тарифов и в пейволле. Разметки две — таблица для
широкого экрана и карточки для узкого: в таблице колонки это тарифы, а в
столбик нужны карточки ПО тарифам, то есть транспонирование, которого CSS
не умеет. Показывается всегда ровно одна. */
.tfbox{margin:18px 0}
.tf__wrap{width:100%}
.tf{width:100%;border-collapse:collapse;table-layout:fixed}
.tf th,.tf td{border:1px solid var(--line);padding:10px 12px;vertical-align:middle;text-align:center}
.tf thead th{vertical-align:top;background:var(--panel);border-bottom-width:2px}
.tf thead th b{display:block;font-size:15px;margin-bottom:2px}
.tf__corner{border:0 !important;background:none}
.tf tbody th{text-align:left;font-weight:500;background:var(--panel-2);width:34%}
.tf__p{display:block;font-size:22px;font-weight:700;line-height:1.2}
.tf__per{display:block;font-size:12px;color:var(--muted);margin:2px 0 8px}
.tf__free{background:var(--panel-2)}
.tf__yes{color:var(--green);font-weight:700;font-size:18px}
.tf__no{color:var(--muted)}
.tf tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel-2) 40%,transparent)}
/* Блок «чем отличается» — без колонок и галочек: это довод, а не сравнение. */
.tfdiff{border-left:3px solid var(--accent);padding:10px 0 10px 14px;margin:16px 0}
.tfdiff b{display:block;margin-bottom:4px}
.tfdiff p{color:var(--muted)}
/* Строка про бесплатное. Именно строкой, а не рядами таблицы: ряд с галочками
во всех колонках — довод НЕ платить. */
.tffree{margin:10px 0 22px;color:var(--muted);font-size:14px}
/* Карточки для узкого экрана */
.tfcards{display:none;grid-template-columns:1fr;gap:12px}
.tfc{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--panel)}
.tfc__h b{display:block;font-size:16px}
.tfc__p{display:block;font-size:24px;font-weight:700;line-height:1.2}
.tfc__per{display:block;font-size:12px;color:var(--muted);margin:2px 0 10px}
.tfc .btn{width:100%;margin-bottom:10px}
.tfc__l{list-style:none;margin:0;padding:0}
.tfc__l li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.tfc__l li span{color:var(--muted)}
.tfc__l li .tf__yes,.tfc__l li .tf__no{flex:0 0 auto}
/* Пейволл: тесно, и решение там другое — не «выбрать тариф», а «понять, что
дальше платно». Ниже 1100 px длинные тарифы уходят, остаются первые два. */
.tfbox--compact{margin:14px 0}
.tfbox--compact .tf thead th b{font-size:14px}
.tfbox--compact .tf__p{font-size:19px}
@media (max-width:1100px){
.tfbox--compact .tf thead th:nth-child(n+5),
.tfbox--compact .tf tbody td:nth-child(n+5){display:none}
.tfbox--compact .tf{table-layout:auto}
}
/* Узкий экран: таблица уходит, приходят карточки. */
@media (max-width:760px){
.tf__wrap{display:none}
.tfcards{display:grid}
.tfbox--compact .tfc:nth-child(n+4){display:none}
}