/* Квест «всё в кадре» (стиль B).
   Широкий экран: кадр 16:9 вписан в окно, интерфейс лежит поверх картинки.
   Вертикальный экран: сцена сверху, ответы снизу, всё на одном экране без прокрутки. */

/* Два бесплатных шрифта (SIL OFL 1.1, лицензии лежат рядом с файлами):
   Press Start 2P — короткие надписи, Handjet — реплики и варианты ответа. */
@font-face {
    font-family: "Press Start 2P";
    src: url("/fonts/PressStart2P.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Handjet";
    src: url("/fonts/Handjet.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --ink: #070a10;
    --panel: #121a26;
    --panel-2: #1c2838;
    --steel: #8aa4bc;
    --steel-d: #3a4c60;
    --text: #e8f0f6;
    --muted: #9fb2c4;
    --accent: #ff8a3d;
    --cyan: #3de8ff;
    --good: #5dff8a;
    --bad: #ff5a6a;
    --yellow: #ffd27a;
    --cream: #f6efdc;
    --font: "Handjet", "Lucida Console", "Courier New", monospace;
    --font-title: "Press Start 2P", "Lucida Console", "Courier New", monospace;
}

* { box-sizing: border-box; }

[x-cloak] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
    -webkit-text-size-adjust: 100%;
}

.game {
    height: 100vh;
    height: 100dvh;
    display: grid;
    place-items: center;
    background: #000;
    color: var(--text);
    font-family: var(--font);
    font-weight: 500;
}

/* уведомление о cookie — узкая полоса внизу, не закрывает кнопки игры */
.cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
    background: rgba(7, 10, 16, 0.94);
    border-top: 2px solid var(--steel-d);
    color: var(--muted);
    font-size: 15px;
    line-height: 1.2;
}

.cookie .chip { font-size: 8px; flex: none; }
.cookie a, .consent-label a { color: var(--cyan); }

/* шторка смены сцены */
.curtain {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s linear;
}

.curtain.on { opacity: 1; pointer-events: auto; }

/* ---------- кадр ---------- */
.frame {
    position: relative;
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));
    overflow: hidden;
    background: var(--ink);
    container-type: inline-size;
}

/* Размеры считаются от ширины кадра: --t текст, --l надписи, --u шаг отступов */
.frame > * {
    --t: max(1.85cqw, 15px);
    --l: max(0.8cqw, 8px);
    --u: 0.42cqw;
    --logo: 5cqw;
    font-size: var(--t);
    line-height: 1.18;
}

.stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
}

/* мир сцены: картинка 16:9 и всё, что стоит на ней, в процентах от неё */
.world {
    position: absolute;
    inset: 0;
}

.bg, .spr {
    position: absolute;
    image-rendering: pixelated;
}

.bg {
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.spr { width: 13.3333%; }

/* предмет сцены (портал): 80 точек рисунка в ширину */
.prop {
    position: absolute;
    width: 16.6667%;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 1.2cqw rgba(160, 220, 255, 0.55));
}

/* герой в холле стоит поверх кнопок-порталов, но нажатия пропускает */
.world--fit > .spr, .world--tall > .spr { pointer-events: none; }
.frame--select .world > .spr { z-index: 1; }

.shade {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 14, 0.66);
}

/* ---------- надписи поверх сцены ---------- */
.hud {
    position: absolute;
    left: calc(var(--u) * 3);
    right: calc(var(--u) * 3);
    top: calc(var(--u) * 2.4);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--u) * 2);
}

.hud__right {
    display: flex;
    gap: calc(var(--u) * 1.5);
}

.chip {
    padding: 0.85em 1.1em;
    background: rgba(7, 10, 16, 0.88);
    border: 2px solid var(--steel);
    color: var(--text);
    font-family: var(--font-title);
    font-size: var(--l);
    line-height: 1.4;
    text-transform: uppercase;
}

.chip b { color: var(--yellow); font-weight: 400; }

.chip--btn { cursor: pointer; }
.chip--btn:hover, .chip--btn:focus-visible { border-color: var(--yellow); color: var(--yellow); outline: none; }

/* кнопка звука: нота; перечёркнута, когда звук выключен */
.chip--snd {
    position: relative;
    min-width: 2.6em;
    font-family: var(--font);
    font-size: calc(var(--l) * 1.6);
    line-height: 0.9;
    padding: 0.42em 0.5em;
    text-align: center;
}

.chip--snd.off { color: var(--steel-d); border-color: var(--steel-d); }

.chip--snd.off::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    top: 50%;
    height: 2px;
    background: var(--bad);
    transform: rotate(-35deg);
}

.chip--title {
    position: absolute;
    left: calc(var(--u) * 3);
    top: calc(var(--u) * 2.4 + var(--l) * 4.1);
    border-color: var(--steel-d);
    color: var(--yellow);
}

.bar {
    display: inline-block;
    width: 7em;
    height: 0.8em;
    margin-left: 1em;
    vertical-align: middle;
    background: #26364a;
}

.bar i { display: block; height: 100%; background: var(--cyan); }

/* реплика персонажа */
.bubble {
    position: absolute;
    left: 47%;
    top: 15%;
    width: 46%;
    padding: 0.55em 0.75em 0.65em;
    background: var(--cream);
    color: #1a1420;
    border: 3px solid #1a1420;
    box-shadow: 4px 4px 0 rgba(7, 10, 16, 0.55);
}

.who {
    display: inline-block;
    margin-bottom: 0.6em;
    padding: 0.5em 0.9em;
    background: #1a1420;
    color: var(--yellow);
    font-family: var(--font-title);
    font-size: calc(var(--l) * 0.9);
    line-height: 1.3;
    text-transform: uppercase;
}

.tail {
    position: absolute;
    left: 52%;
    bottom: -0.55em;
    width: 0.8em;
    height: 0.8em;
    background: var(--cream);
    border-right: 3px solid #1a1420;
    border-bottom: 3px solid #1a1420;
    transform: rotate(45deg);
}

/* текст «от автора», когда никто не говорит */
.narr {
    position: absolute;
    left: 50%;
    top: 16%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 72%;
    padding: 0.4em 0.9em 0.5em;
    background: rgba(7, 10, 16, 0.88);
    border: 2px solid var(--steel);
    border-top-color: var(--accent);
    text-align: center;
}

.narr--bottom { top: auto; bottom: 5%; }

/* пока раскрыта метка, вопрос отступает на задний план, чтобы баббл варианта его не перекрывал */
.narr--away { opacity: 0.2; }

/* всплывающие баллы над героем */
.pop {
    position: absolute;
    transform: translateX(-50%);
    color: var(--good);
    font-family: var(--font-title);
    font-size: calc(var(--l) * 2);
    text-shadow: 3px 3px 0 var(--ink);
    animation: pop 1.1s steps(11) forwards;
    pointer-events: none;
}

.pop--bad { color: var(--bad); }

@keyframes pop {
    0% { margin-top: 0; opacity: 0; }
    15% { opacity: 1; }
    100% { margin-top: -9%; opacity: 1; }
}

/* порталы-кнопки в холле */
.hotspot {
    position: absolute;
    padding: 0;
    border: 3px solid transparent;
    background: transparent;
    cursor: pointer;
}

.hotspot:hover, .hotspot:focus-visible {
    border-color: var(--c);
    box-shadow: 0 0 24px var(--c), inset 0 0 24px color-mix(in srgb, var(--c) 45%, transparent);
    outline: none;
}

/* ---------- ответы ---------- */
.sheet {
    position: absolute;
    left: 3%;
    bottom: 4%;
    width: 46%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1.6);
}

.sheet--paths { display: none; }

.answers, .fb {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1.6);
}

.ans {
    display: flex;
    align-items: center;
    gap: 0.6em;
    width: 100%;
    padding: 0.4em 0.7em 0.45em 0.5em;
    background: rgba(14, 22, 32, 0.95);
    border: 2px solid var(--steel-d);
    border-left: 0.3em solid var(--accent);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ans:hover, .ans:focus-visible {
    border-color: var(--yellow);
    background: #26364a;
    color: #fff;
    outline: none;
}

.key {
    flex: none;
    width: 2.2em;
    height: 2.2em;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--ink);
    font-family: var(--font-title);
    font-size: var(--l);
}

.ans--path { border-left-color: var(--c); }
.ans--path:hover, .ans--path:focus-visible { border-color: var(--c); }

.dot {
    flex: none;
    width: 0.7em;
    height: 0.7em;
    background: var(--c);
    box-shadow: 0 0 10px var(--c);
}

.q { margin: 0; color: var(--muted); }

.only-portrait { display: none; }
.quote { margin: 0; color: var(--yellow); }

.fb__row {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.5em 0.7em;
    background: rgba(14, 22, 32, 0.95);
    border: 2px solid var(--steel-d);
}

.fb__row--good { border-color: var(--good); }
.fb__row--bad { border-color: var(--bad); }

.pts {
    flex: none;
    min-width: 3.6em;
    padding: 0.6em 0.5em;
    background: var(--steel);
    color: var(--ink);
    font-family: var(--font-title);
    font-size: calc(var(--l) * 1.3);
    text-align: center;
}

.fb__row--good .pts { background: var(--good); }
.fb__row--bad .pts { background: var(--bad); }


/* ---------- метки на предметах ---------- */
.flip { transform: scaleX(-1); }

.pin {
    --pin: calc(var(--l) * 3.3);
    position: absolute;
    width: var(--pin);
    height: var(--pin);
    margin: calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);
    padding: 0;
    display: grid;
    place-items: center;
    background: var(--yellow);
    color: var(--ink);
    border: 3px solid var(--ink);
    font-family: var(--font-title);
    font-size: calc(var(--l) * 1.15);
    transform: rotate(45deg);
    cursor: pointer;
    animation: pin-pulse 1.4s ease-in-out infinite;
}

.pin span { transform: rotate(-45deg); }

.pin:hover, .pin:focus-visible, .pin.open {
    background: #fff;
    box-shadow: 0 0 0 4px var(--accent), 0 0 26px var(--accent);
    outline: none;
    animation: none;
}

@keyframes pin-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.3), 0 0 10px var(--yellow); }
    50% { box-shadow: 0 0 0 6px rgba(255, 210, 122, 0.25), 0 0 26px var(--yellow); }
}

/* метки всегда поверх баббла и «ножки» — их должно быть можно нажать */
.pin { z-index: 3; }

/* «ножка» от баббла к раскрытой метке: высота = насколько метка ниже самой верхней */
.pinstem {
    position: absolute;
    z-index: 1;
    width: 0.5em;
    margin-left: -0.25em;
    height: calc(var(--drop) + var(--l) * 1.6);
    background: var(--cream);
    border-left: 3px solid #1a1420;
    border-right: 3px solid #1a1420;
    transform: translateY(calc(var(--l) * -3.2 - 3px));
    pointer-events: none;
}

/* баббл раскрытой метки: стоит над самой верхней меткой сцены */
.pinb {
    position: absolute;
    width: 30%;
    padding: 0.5em 0.7em 0.6em;
    background: var(--cream);
    color: #1a1420;
    border: 3px solid #1a1420;
    box-shadow: 4px 4px 0 rgba(7, 10, 16, 0.55);
    transform: translate(-50%, calc(-100% - var(--l) * 3.2));
    z-index: 2;
}

.pinb small {
    display: block;
    margin-bottom: 0.5em;
    color: #8a4a12;
    font-family: var(--font-title);
    font-size: calc(var(--l) * 0.85);
    line-height: 1.4;
    text-transform: uppercase;
}

.pinb .btn { margin-top: 0.6em; font-size: var(--l); padding: 0.8em 1.4em; }
.pinb .tail { left: calc(50% - 0.4em); }

/* ---------- кнопки ---------- */
.btn {
    padding: 0.95em 1.7em;
    background: var(--accent);
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: inset -3px -3px 0 #b85a1c, inset 3px 3px 0 #ffc08a, 0 4px 0 var(--ink);
    font-family: var(--font-title);
    font-size: calc(var(--l) * 1.3);
    line-height: 1.3;
    text-transform: uppercase;
    cursor: pointer;
}

.btn:hover, .btn:focus-visible { background: var(--yellow); outline: none; }
.btn:active { transform: translateY(3px); box-shadow: inset -3px -3px 0 #b85a1c, inset 3px 3px 0 #ffc08a; }
.btn:disabled { opacity: 0.8; cursor: progress; }
.btn--wide { width: 100%; }

.btn--ghost {
    padding: 0.8em 1.2em;
    background: rgba(7, 10, 16, 0.75);
    color: var(--text);
    border: 2px solid var(--steel);
    box-shadow: none;
    font-size: var(--l);
}

.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(7, 10, 16, 0.75); border-color: var(--yellow); color: var(--yellow); }

/* ---------- стартовый экран ---------- */
.center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 4);
    padding: 4%;
    text-align: center;
}

.logo {
    margin: 0;
    color: var(--yellow);
    font-family: var(--font-title);
    font-size: var(--logo);
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 0.06em 0.06em 0 #c83dff, 0.12em 0.12em 0 var(--ink);
}

.logo span {
    display: block;
    margin-top: 0.5em;
    color: #fff;
    font-size: 0.52em;
    text-shadow: 0.08em 0.08em 0 var(--accent), 0.16em 0.16em 0 var(--ink);
}

.tagline {
    margin: 0;
    color: var(--cyan);
    font-family: var(--font-title);
    font-size: calc(var(--l) * 1.1);
    text-transform: uppercase;
}

.note { margin: 0; max-width: 34em; color: var(--muted); }

/* номер сборки на стартовом экране — чтобы было видно, что открыта свежая версия */
.build {
    position: absolute;
    right: calc(var(--u) * 3);
    bottom: calc(var(--u) * 2);
    color: var(--steel-d);
    font-size: 0.7em;
}

/* ---------- ролик ---------- */
.frame--video { background: #000; }

.frame--video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.vbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
}

.vbar__fill { height: 100%; background: var(--accent); }

/* кнопки ролика: на широком экране появляются при движении мыши и сами прячутся */
.vc {
    position: absolute;
    right: calc(var(--u) * 3);
    bottom: calc(var(--u) * 4);
    display: flex;
    gap: calc(var(--u) * 1.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.vc.on { opacity: 1; pointer-events: auto; }

.icon {
    padding: 0.8em 1em;
    background: rgba(7, 10, 16, 0.82);
    color: var(--text);
    border: 2px solid var(--steel);
    font-family: var(--font-title);
    font-size: var(--l);
    line-height: 1.3;
    text-transform: uppercase;
    cursor: pointer;
}

.icon:hover, .icon:focus-visible { border-color: var(--yellow); color: var(--yellow); outline: none; }
.icon--main { border-color: var(--accent); }

/* ---------- финал и форма ---------- */
.sheet--form {
    top: 14%;
    width: 44%;
    padding: calc(var(--u) * 3);
    overflow-y: auto;
    background: linear-gradient(var(--panel), var(--panel-2));
    border: 3px solid var(--steel-d);
    border-top-color: var(--accent);
}

.result {
    padding: 0.4em 0.7em;
    border: 2px solid var(--yellow);
    background: #0e1620;
    color: var(--yellow);
}

.result b { color: #fff; font-family: var(--font-title); font-size: calc(var(--l) * 1.8); }

.lead-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 1.6);
}

.lead-form p { margin: 0; }

.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"] {
    padding: 0.4em 0.6em;
    border: 2px solid var(--steel-d);
    background: #0e1620;
    color: var(--text);
    font: inherit;
    font-size: max(var(--t), 16px); /* меньше 16px — iPhone приближает страницу при вводе */
}

.lead-form input:focus-visible { border-color: var(--cyan); outline: none; }

.consent-label {
    display: flex;
    align-items: center;
    gap: 0.6em;
    color: var(--muted);
    font-size: 0.85em;
}

.consent-label input { flex: none; width: 1.3em; height: 1.3em; accent-color: var(--accent); }

.error-text { color: var(--bad); }

.promo-box { text-align: center; }
.promo-box p { margin: 0 0 0.4em; }

.promo-code {
    display: inline-block;
    padding: 0.8em 1.2em;
    border: 3px dashed var(--yellow);
    background: #0e1620;
    color: #fff;
    font-family: var(--font-title);
    font-size: calc(var(--l) * 2);
}

/* ============================================================
   Вертикальный экран (телефон)
   ============================================================ */
@media (max-aspect-ratio: 1/1) {
    .frame {
        width: 100vw;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        container-type: normal;
    }

    .frame > * {
        --t: clamp(18px, 5.6vw, 24px);
        --l: clamp(7px, 2.25vw, 10px);
        --u: clamp(3px, 1.1vw, 5px);
        --logo: 8.6vw;
    }

    /* сцена забирает всё место, которое не нужно ответам */
    .stage {
        position: relative;
        inset: auto;
        flex: 1 1 0;
        min-height: 0;
    }

    .frame--final .stage { flex: 0 0 26%; }

    /* Крупный план: мир увеличен в --z раз относительно высоты сцены, герои стоят у нижнего
       края (ступни на 95% высоты), точка --fx по центру. Верх сцены свободен под баббл. */
    /* Высота мира: 160% высоты сцены, но не больше 159vw — иначе на высоких экранах герои
       перестают помещаться по ширине. */
    .world {
        --wh: max(100%, min(160%, 159vw)); /* и не меньше высоты сцены — без пустоты снизу */
        inset: auto;
        left: 0;
        top: min(0px, calc(95% - var(--fy, 0.76) * var(--wh))); /* min: не оставлять пустоту сверху */
        height: var(--wh);
        aspect-ratio: 16 / 9;
        /* точка --fx по центру сцены, но камера не выезжает за края картинки:
           100cqw — ширина сцены, 100% — ширина самой картинки */
        transform: translateX(clamp(calc(100cqw - 100%), calc(50cqw - var(--fx, 0.5) * 100%), 0px));
    }

    /* сцены с метками: план шире, чтобы герой и все предметы вокруг него помещались по ширине */
    .world--wide { --wh: var(--wh-fit, max(100%, min(140%, 118vw))); }

    /* на высоких телефонах сцена с метками не растёт выше 132vw — иначе картинка снова
       приблизится и предметы уйдут за края; лишняя высота достаётся нижней панели */
    .frame--pins .stage { flex: 0 1 118vw; }
    /* панель не сжимается (иначе в ней появляется прокрутка) — на низких экранах уступает сцена */
    .frame--pins .sheet { flex: 1 0 auto; max-height: none; overflow: visible; }

    /* холл и стартовый экран показываем целиком по высоте */
    .world--fit {
        top: 0;
        height: 100%;
    }

    /* Вертикальная картинка холла (9:16) заполняет всю сцену; лишнее обрезается поровну
       с краёв. Сцена — контейнер, чтобы считать размер от её ширины и высоты. */
    .stage { container-type: size; }

    .world--tall {
        left: 50%;
        top: 50%;
        width: max(100cqw, calc(100cqh * 9 / 16));
        height: auto;
        aspect-ratio: 9 / 16;
        transform: translate(-50%, -50%);
    }

    .only-landscape { display: none; }
    .narr--away { opacity: 1; }

    /* на телефоне нет наведения мышью — порталы мягко мигают рамкой, показывая, что их можно нажать */
    .world--tall .hotspot { animation: portal-pulse 1.6s ease-in-out infinite; }
    .world--tall .hotspot:nth-of-type(2) { animation-delay: 0.4s; }
    .world--tall .hotspot:nth-of-type(3) { animation-delay: 0.8s; }
    .world--tall .hotspot:nth-of-type(4) { animation-delay: 1.2s; }

    @keyframes portal-pulse {
        0%, 100% { border-color: transparent; box-shadow: none; }
        50% { border-color: var(--c); box-shadow: 0 0 18px var(--c); }
    }

    /* в холле на телефоне выбор — нажатием на порталы, список кнопок не нужен */
    .frame--select .sheet--paths { display: none; }

    .narr.narr--keep {
        display: block;
        left: 3%;
        right: 3%;
        top: auto;
        bottom: calc(3% + env(safe-area-inset-bottom));
        font-size: 0.9em;
    }

    /* название сцены и полоса прогресса на телефоне не помещаются без ущерба для картинки */
    .chip--fs, .chip--title, .narr--bottom, .bar { display: none; }
    .frame--final .bubble { display: none; }
    .only-portrait { display: block; }

    .bubble {
        left: 3%;
        right: 3%;
        width: auto;
        top: calc(var(--u) * 3.4 + var(--l) * 5.4);
        padding-top: 0.75em;
    }

    /* имя говорящего — ярлычком на верхней рамке, чтобы не отнимать строку у текста */
    .who {
        position: absolute;
        left: 0.6em;
        top: 0;
        margin: 0;
        transform: translateY(-60%);
    }

    .tail { left: 66%; }

    .narr {
        left: 3%;
        right: 3%;
        top: calc(var(--u) * 3.4 + var(--l) * 4.4);
        transform: none;
        width: auto;
        max-width: none;
    }

    .sheet, .sheet--paths, .sheet--form {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: auto;
        flex: 0 1 auto;
        max-height: 58%;
        min-height: 0;
        display: flex;
        justify-content: center;
        padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3 + env(safe-area-inset-bottom));
        overflow-y: auto;
        background: linear-gradient(var(--panel), var(--panel-2));
        border: 0;
        border-top: 4px solid var(--accent);
    }

    .sheet--form { flex: 1 1 0; max-height: none; justify-content: flex-start; }

    .ans { padding: 0.55em 0.7em 0.6em 0.5em; }

    .btn { padding: 1.1em 1.4em; }


    /* --- метки на телефоне: вариант показывается карточкой внизу --- */
    .pinsheet.only-portrait {
        display: flex;
        flex-direction: column;
        gap: calc(var(--u) * 2);
    }

    .card {
        min-height: 4.4em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0.6em 0.8em 0.7em;
        background: #0e1620;
        border: 2px solid var(--yellow);
    }

    .card small {
        display: block;
        margin-bottom: 0.5em;
        color: var(--yellow);
        font-family: var(--font-title);
        font-size: calc(var(--l) * 0.9);
        line-height: 1.5;
        text-transform: uppercase;
    }

    .row {
        display: flex;
        gap: calc(var(--u) * 2);
        align-items: stretch;
    }

    .nav {
        flex: none;
        width: 3.2em;
        background: #0e1620;
        color: var(--text);
        border: 2px solid var(--steel-d);
        font-family: var(--font-title);
        font-size: calc(var(--l) * 1.6);
        cursor: pointer;
    }

    .big { flex: 1; }
    .btn:disabled.big { opacity: 0.45; cursor: default; }

    /* ролик на телефоне вертикальный и занимает весь экран: кнопки появляются на пару секунд
       в начале и по касанию, потом прячутся, чтобы не закрывать картинку */
    .vc {
        left: 0;
        right: 0;
        bottom: calc(18px + env(safe-area-inset-bottom));
        justify-content: center;
        flex-wrap: wrap;
    }
}