/* ============================================================
   Mozgva — homepage styles (Figma: mozgva_15_07_2026 / 1440)
   ============================================================ */

/* ---------- Graublau Slab (display / headings) ---------- */
@font-face {
    font-family: 'Graublau Slab';
    src: url('/fonts/GraublauSlab-Regular.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Graublau Slab';
    src: url('/fonts/GraublauSlab-Semibold.otf') format('opentype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Graublau Slab';
    src: url('/fonts/GraublauSlab-Bold.otf') format('opentype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Graublau Slab';
    src: url('/fonts/GraublauSlab-Heavy.otf') format('opentype');
    font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Graublau Sans (secondary) ---------- */
@font-face {
    font-family: 'Graublau Sans';
    src: url('/fonts/GraublauSans-Regular.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Graublau Sans';
    src: url('/fonts/GraublauSans-Semibold.otf') format('opentype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Graublau Sans';
    src: url('/fonts/GraublauSans-Bold.otf') format('opentype');
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    /* palette */
    --bg: #070815;
    --bg-block: #070815;
    --bg-block-2: #0f1126;
    /* редизайн: шапка, площадки и вопрос-ответ светлее общего фона */
    --bg-block-3: #11132b;
    --surface: rgba(37, 42, 78, .4);
    --chip-dark: #101118;

    --ink: #ffffff;
    --ink-2: #e3e4f1;
    --muted: #7e869e;
    --muted-2: #757683;

    --red: #ff0004;
    --red-deep: #c00003;
    --green: #94ff29;
    --pink: #ff00ea;
    --pink-2: #ff0077;
    --magenta: #cf0770;
    --purple: #9900ff;
    --blue: #1a00ff;
    --blue-2: #1100ff;
    --gold: #ffc300;
    --cyan: #00ffd9;
    --orange: #ff8419;

    --line: #e8e8e8;
    --line-soft: rgba(227, 228, 241, .28);

    /* type */
    --font: 'Onest', 'Graublau Sans', -apple-system, 'Segoe UI', sans-serif;
    --display: 'Graublau Slab', 'Roboto Slab', Georgia, serif;

    --radius-block: 24px;
    --radius-card: 20px;
    --shell: 1440px;
}

* { box-sizing: border-box; }

/* spacing comes from flex gaps, not default UA margins */
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* the [hidden] attribute must win over component display rules */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: 1.15;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    /* sections span the full 1440 frame width and carry their own 32px padding
       (matches Figma) — no side padding here to avoid double-inset */
    padding: 24px 0 40px;
    display: flex;
    flex-direction: column;
    /* редизайн: между блоками 12 */
    gap: 12px;
}
/* 13" ретина (кадр 2560×1660, около 1512 css-px) оставляла колонка 1440 почти
   вплотную к краям окна. Минимум 80px с каждой стороны, пока ширина не дойдёт до 1440. */
@media (min-width: 1200px) {
    .shell { width: min(1440px, calc(100% - 160px)); }
}

.display {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ---------- generic buttons / pills ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* высота 48 по дизайн-системе: с иконкой её задаёт сама иконка (24 + поля),
       у кнопок без иконки высоту добирает min-height */
    min-height: 48px;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: 500 16px/18px var(--font);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none; /* часть кнопок — ссылки (расписание, корпоративы и т.п.) */
    transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: rgba(255,255,255,.06); }
.btn:active { transform: translateY(1px); }
.btn--ghost { border-color: rgba(255,255,255,.9); }
.btn--light {
    /* Button/Glossy: тонкая светлая грань сверху и тень снизу внутри кнопки */
    box-shadow: inset 0 -1px 2px rgba(7, 8, 21, .4), inset 0 2px 2px #f2f3ff,
                inset 0 0 0 1px rgba(105, 88, 255, .2);
    /* заливка и обводка глянцевой кнопки из макета: сверху #F2F3FF, снизу #E3E4F1,
       рамка — фиолетовая на 20 процентов, а не светло-серая (она читалась обводкой) */
    background: linear-gradient(180deg, #f2f3ff, #e3e4f1);
    border: 0;
    color: var(--bg-block);
    /* on a light button the icon is dark, so its duotone cut-out shows white */
    --ic-punch: #ffffff;
}
.btn--light .icon { color: var(--bg-block); }
/* keep light buttons light on hover — base .btn:hover would wash them transparent */
.btn--light:hover { background: linear-gradient(180deg, var(--ink-2), #cfd0e2); }
/* пилюли: по макету те же 48 на десктопе (на мобильном 36, см. медиазапрос) */
.btn--blue { background: var(--blue); border: none; border-radius: 32px; padding: 8px 16px; }
.btn--pill { border-radius: 32px; padding: 8px 24px; }

.count {
    min-width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 9999px;
    background: #fff;
    color: #070815;
    font: 600 14px/1 var(--font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.icon { width: 24px; height: 24px; flex: none; color: currentColor; }
.icon svg { width: 100%; height: 100%; }
.icon--16 { width: 16px; height: 16px; }
.icon--18 { width: 18px; height: 18px; }

/* ============================================================
   Top notification bar
   ============================================================ */
.topbar {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 16px 16px 24px;
    /* плашка тёмная полупрозрачная, как в макете */
    background: rgba(7, 8, 21, .4);
    border: 1px solid var(--surface);
    border-radius: var(--radius-card);
}
/* ---- Rays backdrop (Figma star SVGs) — replaces the old sphere glows ----
   Each *_glow paints a blurred star asset (rays-hero.svg for the page backdrops,
   rays-teens.svg for the featured card) as a single background-image element.
   Positioned via margins (never transform) + transform-origin:centre, so it is
   animation-ready — to make the star rotate clockwise and pulse in size later,
   just add to the element:
     animation: rays-spin 60s linear infinite, rays-pulse 14s ease-in-out infinite; */
.topbar__glow, .section__glow {
    background: url('/img/rays-hero.svg') no-repeat center / cover;
    transform-origin: 50% 50%;
    pointer-events: none;
    /* Figma composites the rays with an additive glow blend the SVG export drops.
       plus-lighter (Linear Dodge) makes the coloured rays add light to the dark
       block, so they read noticeably brighter and sharper than plain compositing. */
    mix-blend-mode: plus-lighter;
}
@keyframes rays-spin  { to { rotate: 360deg; } }
@keyframes rays-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
@media (prefers-reduced-motion: reduce) {
    .topbar__glow, .section__glow, .faq-item__glow { animation: none !important; }
}

.topbar__glow {
    position: absolute;
    left: -170px; top: -230px;
    width: 520px; height: 520px;
}
/* у плашки свои лучи из макета (Figma, Vector 75 в Card-Compact) */
.topbar > .topbar__glow {
    left: 50%; top: -267px; bottom: auto;
    margin-left: -817px;
    width: 1634px; height: 508px;
    background: url('/img/glow-plate.svg') no-repeat center top / 100% 100%;
}
.topbar__title { position: relative; font: 600 20px/1 var(--font); }
.topbar__details { display: flex; align-items: center; gap: 16px; margin-left: 8px; }
.info { display: flex; align-items: center; gap: 8px; }
.info__text b { display: block; font: 600 18px/21px var(--font); }
.info__text span { display: block; font: 400 14px/16px var(--font); color: rgba(255,255,255,.85); }
.topbar__spacer { flex: 1; }
/* «Решено играть!» banner: below 980 the button was clipped by overflow:hidden.
   Let it wrap onto its own row (block grows taller, nothing is cut off). */
@media (max-width: 980px) {
    .topbar { flex-wrap: wrap; row-gap: 12px; }
    .topbar__spacer { display: none; }
    .topbar__details { flex-wrap: wrap; row-gap: 8px; margin-left: 0; }
    .topbar > .btn { margin-left: auto; }
}

/* ============================================================
   HERO (header + intro + filter + cards)
   ============================================================ */
.hero {
    position: relative;
    /* без overflow:hidden: блок обрезал бы выпадающие списки (город в шапке,
       фильтры), а их список длиннее блока. Декор подрезает себя сам - см. ниже
       .hero__glow и .hero__confetti */
    background: var(--bg-block-3);
    border-radius: var(--radius-block);
    padding: 32px;
}
/* Фоновая графика блока: лучи из макета (Figma, Vector 75) - файл уже с готовым
   размытием, рисуется в координатах самого блока, поэтому кладём слой по его
   размеру. Сам слой со своей подрезкой: лучи не вылезают за скруглённые края, а
   блок не режет выпадающие списки. */
.hero__glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.hero__glow::before {
    content: '';
    position: absolute;
    left: 50%; top: 0;
    width: 1440px; height: 1141px;
    margin-left: -720px;
    background: url('/img/hero-glow.svg') no-repeat center top;
    background-size: 1440px 1141px;
}
/* Confetti scatter (Figma export) across the header — behind the content
   (z-index:0), above the rays. Native 1263x426, centred at the hero top. */
/* как и звезда: слой по размеру блока со своей подрезкой, ленты - в ::before */
.hero__confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.hero__confetti::before {
    content: '';
    position: absolute;
    left: 50%; top: 0;
    width: 1263px; height: 426px;
    margin-left: -631px;
    background: url('/img/confetti.svg') no-repeat center top;
    background-size: 1263px 426px;
    /* --cfx/--cfy: subtle mouse-parallax offset (JS-smoothed in app.js; ставится
       на сам элемент, в ::before переменные наследуются). No CSS transition here:
       Chromium won't transition a var-driven transform, it freezes it */
    transform: translate(var(--cfx, 0px), var(--cfy, 0px));
    will-change: transform;
}
/* calendar page has its own, narrower confetti scatter around the page title */
.hero--calendar .hero__confetti::before {
    width: 823px; height: 214px;
    margin-left: -411px;
    background: url('/img/confetti-calendar.svg') no-repeat center top;
    background-size: 823px 214px;
}
/* calendar mobile: confetti scatter centred on the «Календарь игр» title */
.cal__confetti {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) translate(var(--cfx, 0px), var(--cfy, 0px));
    will-change: transform;
    width: 319px; max-width: 100%;
    aspect-ratio: 319 / 119;
    background: url('/img/confetti-calendar-mobile.svg') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}
.intro--page .intro__title { position: relative; z-index: 1; }
.hero > .nav,
.hero > .intro,
.hero > .event,
.hero > .calendar { position: relative; z-index: 1; }
/* header (its city dropdown) must sit above the page title and the filter */
.hero > .nav { z-index: 20; }
/* Filter must sit ABOVE the cards grid. .filter and .calendar are sibling stacking
   contexts; at equal z-index the later .calendar wins by DOM order, trapping the
   calendar .popover (and the Тема/Площадка select dropdowns — .field children of
   .filter) behind the cards no matter how high the popover's own z-index is.
   Lifting the whole .filter context above .calendar fixes all of them. */
.hero > .filter { position: relative; z-index: 5; }

/* ---- header nav ---- */
.nav {
    display: flex;
    align-items: center;
    gap: 16px;
}
.brand { display: flex; align-items: center; gap: 24px; }
.logo {
    display: inline-flex;
    align-items: center;
    color: #fff;
}
.logo svg { height: 28px; width: auto; display: block; }
/* по макету логотип разного роста: в шапке 40, в подвале 24, в мобильной шапке 20 */
.nav .logo svg { height: 40px; }
.footer .logo svg { height: 40px; }
.logo--sm svg { height: 20px; }
.nav__city {
    font: 500 16px/18px var(--font);
    background: none;
    border: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.city-select { position: relative; }
/* городов в списке много - как и у выпадающих списков фильтра, ограничиваем
   высоту и прокручиваем, иначе список уходит на несколько экранов вниз */
.popover--city { width: 200px; padding: 8px; background: var(--bg-block-2); border: 1px solid var(--surface); border-radius: 12px; max-height: 320px; overflow-y: auto; }
.city-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.city-list__item {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--ink);
    font: 400 14px/16px var(--font);
    cursor: pointer;
}
.city-list__item:hover { background: rgba(255,255,255,.06); }
.city-list__item.is-active { background: rgba(37, 42, 78, .4); }
.nav__spacer { flex: 1; }
/* логотип по центру шапки: боковые группы равной доли, лого не растягивается */
.nav__logo { flex: 0 0 auto; margin: 0 auto; }
.nav .brand, .nav__right { flex: 1 1 0; }
.nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
/* кнопки шапки — как все кнопки дизайн-системы: 48 с полями 12 на 16 */
/* corp/cabinet header buttons have no border in the design */
.btn--plain { border-color: transparent; }
.btn--plain:hover { background: rgba(255,255,255,.06); }
/* ≤850 и до мобилки (где nav ещё виден, 769–850): текст nav не влезает и «Кабинет»
   уходит за край (nav не переносится) — уменьшаем шрифт текста + слегка ужимаем
   отступы/гэпы. Иконки и лого — SVG, от font-size не зависят. */
@media (max-width: 850px) {
    .nav { gap: 12px; }
    .brand { gap: 16px; }
    .nav__right { gap: 8px; }
    .nav .btn { padding: 8px 12px; font-size: 14px; }
    .nav__city { font-size: 14px; }
}

/* ---- intro / CTA ---- */
.intro {
    text-align: center;
    padding: 56px 16px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.intro__title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 80px;
    /* H1 дизайн-системы: 80/72, трекинг -0.03em */
    line-height: .9;
    letter-spacing: -.03em;
    max-width: 720px;
}
.intro__sub {
    font: 500 24px/28px var(--font);
    max-width: 680px;
    color: #fff;
}
.intro__offers { display: flex; gap: 16px; margin-top: 28px; }

/* page title (Календарь игр and similar catalog pages) */
.intro--page { padding: 24px 16px 8px; }

/* banner placeholder slot (Figma: Card-2 «Баннер», white 40%) */
.banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 124px;
    padding: 32px;
    margin-top: 24px;
    border-radius: var(--radius-card);
    background: rgba(242, 243, 255, .4);
    color: #fff;
    font: 500 16px/18px var(--font);
}
/* слот с реальной картинкой баннера: без отступов, картинка заполняет слот */
.banner--media { padding: 0; overflow: hidden; background: none; }
.banner--media img { width: 100%; height: 100%; min-height: 124px; object-fit: cover; display: block; }

.offer {
    display: inline-flex;
    align-items: center;
    /* по макету: поля 8 на 16 с обеих сторон, зазор 6 */
    gap: 6px;
    padding: 8px 16px;
    border-radius: 32px;
    /* редизайн: светлая пилюля с объёмной картинкой вместо синей с иконкой */
    background: #f2f3ff;
    font: 500 16px/20px var(--font);
    color: #070815;
    cursor: pointer;
    transition: filter .15s, transform .1s;
}
.offer:hover { filter: brightness(1.12); }
.offer:active { transform: translateY(1px); }
/* картинка предложения крупнее кнопки и выходит за её край, как в макете */
.offer__ic {
    width: 44px; height: 44px; flex: none;
    margin: -14px 0;
    background: no-repeat center / contain;
}
.offer__ic--corp { background-image: url('/img/offer-corp.png'); }
.offer__ic--franchise { background-image: url('/img/offer-franchise.png'); }
.offer__ic--rating { width: 52px; background-image: url('/img/offer-rating.png'); }
/* счётчик на светлой кнопке не выводим - в макете его не видно */
.offer .count { display: none; }
/* size the icon-wrapper span (not the svg directly): the svg fills it via
   .icon svg{width:100%}, so it can't overflow the 24px .icon box down-right */
.offer__ic .icon { width: 30px; height: 30px; }

/* ============================================================
   FILTER bar
   ============================================================ */
.filter {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
    /* the date-picker popover must paint above the card grid below */
    position: relative;
    z-index: 5;
}
.field { display: flex; flex-direction: column; gap: 12px; }
/* basis = min so fields shrink to fit one row first, and only wrap when 160px
   no longer fits (below ~900px); flex-grow still fills the row on wide screens */
.field--grow { flex: 1 1 160px; min-width: 160px; }
/* two fields side by side in one row (e.g. Телефон + И-мейл in checkout) */
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1 1 0; min-width: 0; }
.field__label { font: 400 14px/18px var(--font); color: #f2f3ff; padding-left: 4px; }
.select {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 8px 16px;
    border-radius: 16px;
    background: rgba(7, 8, 21, .5);
    border: 1px solid rgba(105, 88, 255, .2);
    color: #f2f3ff;
    font: 500 16px/20px var(--font);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
/* selects switch to the "filled" look on hover, and stay filled while the
   date-range popover is open (this was a constant style on the calendar select) */
/* Control/Subtle-Shadow из дизайн-системы */
.select { box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.select:hover,
[data-popover].is-open .select { background: var(--surface); border-color: rgba(242,243,255,.9); }
.select__txt { flex: 1; }
.select__txt small { display: block; font: 500 13px/15px var(--font); color: rgba(242,243,255,.8); }
.select .chev { margin-left: auto; color: var(--ink-2); transition: transform .2s; }
/* chevron flips when its popover (datepicker / Тема / Площадка) is open */
[data-popover].is-open .chev { transform: rotate(180deg); }
/* filter select dropdown (Тема игры / Площадка) — own surface so options are readable */
.popover--select {
    width: 100%; padding: 8px;
    background: var(--bg-block-2);
    border: 1px solid var(--surface);
    border-radius: 12px;
    max-height: 320px; overflow-y: auto;
}
.opt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.opt-list__item {
    display: block; width: 100%; text-align: left; text-decoration: none;
    border-radius: 8px; padding: 10px 12px;
    color: var(--ink); font: 400 14px/16px var(--font);
    /* пункт бывает и ссылкой (фильтры), и кнопкой (выбор в розыгрыше) —
       сбрасываем оформление кнопки, иначе браузер рисует свою серую плашку */
    background: none; border: 0; cursor: pointer;
}
.opt-list__item small { display: block; color: var(--muted-2); font-size: 12px; }
.opt-list__item:hover { background: rgba(255,255,255,.06); }
/* selected option: приглушённая навигационная заливка, как у селектора города (не ярко-синяя) */
.opt-list__item.is-active { background: rgba(37, 42, 78, .4); }

/* time slots: neutral by default, grey on hover, blue when clicked (Figma 0:1644) */
/* время: три отдельные пилюли (в макете у каждой свой скруглённый контур) */
.timeset { display: flex; gap: 8px; height: 56px; }
.timeset button {
    padding: 8px 16px;
    border: 1px solid rgba(242,243,255,.9);
    border-radius: 16px;
    background: transparent;
    color: #f2f3ff;
    font: 500 16px/20px var(--font);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.timeset button:hover { background: rgba(177,179,203,.4); }
.timeset button.is-active { background: var(--blue); border-color: transparent; }

.check { display: flex; align-items: center; gap: 8px; height: 56px; color: #f2f3ff; font: 400 14px/20px var(--font); cursor: pointer; }
.check input {
    position: absolute;
    width: 16px; height: 16px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.check i {
    position: relative;
    width: 16px; height: 16px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    display: inline-block;
    flex: none;
}
.check input:checked + i {
    background: var(--blue);
    border-color: var(--blue);
}
.check input:checked + i::after {
    content: "";
    position: absolute;
    left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ============================================================
   CARDS grid
   ============================================================ */
.calendar { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}
/* без min-width:0 колонка растягивается под самую широкую карточку (её держит
   нижний ряд с «Зарезервировать»), и сетка вылезает за блок на средних ширинах */
.grid > * { min-width: 0; }
.card {
    position: relative;
    /* own stacking context so the hover glow that bleeds past the top-left stays
       tied to this card (not painting over neighbours' content) */
    isolation: isolate;
    /* редизайн: карточка — фиолетовая полупрозрачная поверхность с размытием
       подложки (в макете fill #6958FF 10% + background blur 40) */
    background: rgba(105, 88, 255, .1);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    border-radius: var(--radius-card);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 328px;
}
.card--wide { grid-column: span 2; }

/* ---- card animations (entrance + hover lift) ----
   Entrance only runs when JS tags <html> with .anim (no-JS keeps cards visible);
   both effects are disabled for prefers-reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
    .anim .card { opacity: 0; transform: translateY(20px); }
    .anim .card.is-inview {
        opacity: 1;
        transform: none;
        transition: opacity .5s ease, transform .5s ease;
    }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .card { transition: transform .25s ease; }
    .card:hover { transform: translateY(-4px); }
    .anim .card.is-inview:hover { transform: translateY(-4px); }
    /* once the entrance finished, snap back to the quick hover transition */
    .anim .card.is-inview.anim-done { transition: transform .25s ease; }
}

/* Hover glow — the star EVERY card (incl. Teens) shows on hover; none by default.
   rays-teens.svg from the bottom-right light source, pinned to the card's right &
   bottom edges (no spill there) and bleeding past the top & left, rounded at the
   pinned corner. Fades in on hover. */
.card__glow {
    position: absolute;
    left: -91px; top: -67px; right: 0; bottom: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    background: no-repeat center / 100% 100%;
    border-bottom-right-radius: var(--radius-card);
}
/* three hover-glow colour variants (assigned per card; admin will pick later) */
.card__glow--1 { background-image: url('/img/card-glow-1.svg'); }
.card__glow--2 { background-image: url('/img/card-glow-2.svg'); }
.card__glow--3 { background-image: url('/img/card-glow-3.svg'); }
.card:hover .card__glow { opacity: 1; }

.card__head, .card__details, .card__bottom { position: relative; z-index: 1; }

.card__head { display: flex; flex-direction: column; gap: 8px; }
/* H4: GraublauSlab Semibold 28/22 */
.card__title { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: .79; letter-spacing: -.03em; color: #f2f3ff; }
/* Tag chips (дизайн-система, .Tag): пилюля, непрозрачный фон категории и текст
   чёрным или белым — прозрачность для контраста не используется */
.tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 9999px;
    font: 400 14px/18px var(--font);
}
.tag--green { background: #94ff29; color: #070815; }
.tag--blue { background: #1a00ff; color: #f2f3ff; }
.tag--purple { background: #9900ff; color: #f2f3ff; }
.tag--peach { background: #ffe1ba; color: #070815; }
.tag--pink { background: #ff00ea; color: #f2f3ff; }
.tag--red { background: #ff0004; color: #f2f3ff; }

.card__details { display: flex; flex-direction: column; gap: 16px; }
.dline { display: flex; gap: 8px; }
.dline__body { display: flex; flex-direction: column; gap: 4px; }
.dline__row { display: flex; align-items: center; gap: 4px; font: 500 16px/20px var(--font); }
/* both time chips share one size; only the fill differs (Figma 0:1834) */
.timechip { display: inline-flex; align-items: center; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font: 500 14px/16px var(--font); }
.timechip--fill { background: var(--ink-2); color: var(--bg-block); border-color: var(--ink-2); }
.dline__sub { font: 400 14px/18px var(--font); color: rgba(242,243,255,.8); }

/* в узкой колонке кнопка цены не помещается рядом со счётчиком команд —
   переносим её на свою строку, а не выпускаем за карточку */
.card__bottom { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.icon-btn {
    width: 48px; height: 48px;
    /* flex + appearance:none so Safari centres the icon (see .sort-btn) */
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,.06); }
.icon-btn span { white-space: nowrap; }
/* buttons that carry a label need a horizontal (flex) layout, not the
   grid centering used for single-icon buttons */
.teams, .buy { display: inline-flex; align-items: center; }
.teams { width: auto; gap: 6px; padding: 12px 16px 12px 12px; font: 500 16px/18px var(--font); }
.buy {
    box-shadow: inset 0 -1px 2px rgba(7, 8, 21, .4), inset 0 2px 2px #f2f3ff,
                inset 0 0 0 1px rgba(105, 88, 255, .2);
    width: auto;
    gap: 6px;
    padding: 12px 16px;
    margin-left: auto;
    font: 500 16px/18px var(--font);
    background: linear-gradient(180deg, #f2f3ff, #e3e4f1);
    color: var(--bg-block);
    border: 0;
    --ic-punch: #ffffff;
    font: 500 16px/18px var(--font);
}
.buy .icon { color: var(--bg-block); }
/* keep the light price button light on hover — base .icon-btn:hover would wash it out */
.buy:hover { background: linear-gradient(180deg, var(--ink-2), #cfd0e2); }

/* подсказка при наведении (карточка без мест: почему вместо цены «Зарезервировать») */
.tip { position: relative; display: inline-flex; margin-left: auto; }
.tip > .buy { margin-left: 0; }
.tip::after {
    content: attr(data-tip);
    position: absolute; right: 0; bottom: calc(100% + 10px);
    width: 240px; padding: 10px 12px; border-radius: 12px;
    background: var(--bg-block-2); border: 1px solid var(--surface);
    color: var(--ink-2); font: 400 13px/17px var(--font); text-align: left;
    white-space: normal;
    opacity: 0; visibility: hidden; transition: opacity .15s;
    pointer-events: none; z-index: 20;
}
.tip:hover::after, .tip:focus-within::after { opacity: 1; visibility: visible; }
/* короткие подписи у иконок карточки не сдвигают ряд и не растягиваются на 240px */
.tip--icon { margin-left: 0; }
.tip--icon::after {
    left: 0; right: auto; width: max-content; max-width: 240px;
    white-space: nowrap; text-align: center;
}

/* Badges poke ~20px above the card's top-right corner (Figma render bounds).
   новинкес sits on the left, the flag overlaps its right edge by 14px and
   paints on top; both are vertically centred against each other. */
.card__badges { position: absolute; top: -20px; right: 24px; z-index: 3; display: flex; align-items: center; }
.badge-new {
    position: relative;
    top: 0;
    z-index: 1;
    width: 77px; height: 44px;
    background: url('/img/badge-new.svg') no-repeat center / contain;
}
.badge-flag {
    position: relative;
    z-index: 2;
    width: 44px; height: auto;
    margin-left: -14px;
    color: var(--red);
}

/* ============================================================
   Generic section block
   ============================================================ */
.section {
    position: relative;
    overflow: hidden;
    background: var(--bg-block);
    border-radius: var(--radius-block);
    padding: 64px 32px;
}
.section--tight { padding: 32px; background: var(--bg-block-3); }
/* блок «Что такое Мозгва» в макете с тонкой фиолетовой обводкой */
.section--about { border: 1px solid rgba(105, 88, 255, .2); }
/* same spinning full star as the hero — centre above the block, rays down */
.section__glow {
    position: absolute;
    left: 50%; top: -298px;
    width: 1890px; height: 1156px;
    margin-left: -945px;
    background: url('/img/glow-block.svg') no-repeat center top / 100% 100%;
    pointer-events: none;
}
/* confetti scatter for the About block (Figma export) — wider, denser than before */
.about__confetti {
    position: absolute;
    left: 50%; top: 50%;
    width: 1377px; height: 462px;
    margin: -231px 0 0 -688px;
    transform: translate(var(--cfx, 0px), var(--cfy, 0px));
    will-change: transform;
    background: url('/img/confetti-about.svg') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}
.section > .head,
.section > .stats,
.section > .btn,
.section > .venues__head,
.section > .venues__track,
.section > .faq { position: relative; z-index: 1; }

.head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.head__title { font-family: var(--display); font-weight: 700; font-size: 80px; line-height: .9; letter-spacing: -.03em; color: var(--ink-2); }
/* H2: 52/42 */
.head__title--md { font-size: 52px; line-height: .81; }
.head__sub { font: 500 24px/28px var(--font); color: var(--ink-2); max-width: 720px; }

/* ---- stats ---- */
/* stats sit directly on the section background — no plate (Figma 0:1664) */
.stats {
    margin: 32px auto 0;
    width: fit-content;
    display: flex;
    gap: 16px;
    padding: 24px;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 157px; }
.stat b { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: .8; }
.stat span { font: 500 16px/18px var(--font); color: var(--ink-2); text-align: center; }
.section > .btn--light { display: flex; width: fit-content; margin: 32px auto 0; }

/* ============================================================
   VENUES
   ============================================================ */
.venues__head { display: flex; align-items: flex-start; gap: 16px; }
.venues__head .head { text-align: left; align-items: flex-start; flex: 1; }
.venues__head .head__sub { text-align: left; }
.round-btn {
    width: 132px; height: 48px;
    border: 1px solid #fff;
    border-radius: 9999px;
    background: transparent;
    color: #fff;
    /* flex + appearance:none so Safari centres the icon (see .sort-btn) */
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.round-btn:hover { background: rgba(255,255,255,.08); }
/* arrow points left by default → rotate the "next" button */
.round-btn:not(.round-btn--prev) svg { transform: rotate(180deg); }

/* Swiper handles the flex row / overflow; keep only the top gap here */
.venues__track { margin-top: 32px; }
.venue { width: 720px; height: auto; display: flex; flex-direction: column; gap: 20px; }
/* nav arrows dim at the ends of the carousel */
.round-btn.swiper-button-disabled { opacity: .4; pointer-events: none; }
/* nested photo gallery inside each venue (rounded corners clip the slides).
   width:100% is required — Swiper sets margin:auto on .swiper, which stops it
   stretching in the venue's flex column and collapses it to content width. */
.venue__gallery { position: relative; border-radius: 16px; width: 100%; height: 400px; overflow: hidden; scrollbar-width: none; }
.venue__gallery .swiper-wrapper { height: 100%; }
.venue__img {
    height: 100%;
    background: linear-gradient(135deg,#2a2f57,#141634) center / cover no-repeat;
}
.venue__img img, .gallery__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* placeholder photos get distinct tints so the sliding is obvious */
.venue__img:nth-child(2) { background: linear-gradient(135deg,#4a2657,#241434); }
.venue__img:nth-child(3) { background: linear-gradient(135deg,#265747,#14241f); }
.venue__img:nth-child(4) { background: linear-gradient(135deg,#573a26,#241a14); }
.venue__img:nth-child(5) { background: linear-gradient(135deg,#571a2f,#2a1420); }
/* dots = Swiper pagination — overlaid on the photo, bottom-left corner (Figma).
   Scoped to .venue__gallery so it out-specifies Swiper's own pagination position. */
.venue__gallery .dots { position: absolute; left: 28px; bottom: 24px; top: auto; z-index: 1; display: flex; gap: 6px; width: auto; }
.dots__i { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .2s; }
.dots__i.is-active { width: 16px; background: #fff; }
.venue__foot { display: flex; align-items: center; gap: 12px; }
.venue__logo { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid #e0e0e0; }
.venue__name { display: flex; align-items: center; gap: 8px; font: 600 18px/21px var(--font); }
.rating { display: inline-flex; align-items: center; gap: 2px; font: 400 14px/16px var(--font); }
.rating svg { width: 14px; height: 14px; color: var(--orange); }
.venue__addr { display: flex; align-items: center; gap: 4px; margin-top: 8px; font: 400 14px/16px var(--font); color: rgba(255,255,255,.85); }
/* rating sits on its own line under the address */
.venue__addr + .rating { margin-top: 8px; }

/* ============================================================
   FAQ
   ============================================================ */
/* колонки 672 + 672 при зазоре 32 укладываются в 1376 (1440 минус поля блока) */
.faq { display: flex; gap: 32px; }
.faq__aside { flex: 0 0 672px; padding: 0 40px 0 0; }
.faq__aside .head { text-align: left; align-items: flex-start; }
.faq__aside .head__sub { text-align: left; }
.faq__main { flex: 1; display: flex; flex-direction: column; gap: 32px; }
/* в макете три пилюли умещаются в строку; на промежуточных ширинах правая
   колонка уже, поэтому разрешаем перенос, иначе вкладки обрезает край блока */
.faq__tabs { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
/* пилюли 48; неактивные — обводка #F2F3FF на 90 процентов */
.faq__tabs .btn { padding: 12px 24px; border-radius: 36px; }
.faq__tabs .btn--ghost { border-color: rgba(242,243,255,.9); color: #f2f3ff; }
/* .section .btn--light centering must not push the first tab down */
/* вкладки вопросов по макету не глянцевые — ни активная, ни остальные */
.faq__tabs .btn { box-shadow: none; }
.faq__tabs .btn--light { margin: 0; background: #f2f3ff; color: #070815; }
/* active tab is selected — no hover feedback (keep its own background) */
.faq__tabs .btn--light:hover { background: #f2f3ff; cursor: default; }
/* tab panels: only the active one is shown; it fades + rises in when switched */
.faq__panel { display: none; }
.faq__panel.is-active { display: block; animation: faq-fade .3s ease; }
@keyframes faq-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .faq__panel.is-active { animation: none; }
    .faq-item__ans { transition: none; }
    .faq-item__toggle .icon { transition: none; }
}
.faq__list { display: flex; flex-direction: column; gap: 24px; }
.faq-item {
    position: relative;
    overflow: hidden;
    background: rgba(105,88,255,.1);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.faq-item__body { flex: 1; display: flex; flex-direction: column; }
.faq-item__q { font: 600 24px/28px var(--font); color: #f2f3ff; }
.faq-item__hint { margin-top: 8px; font: 500 16px/20px var(--font); color: #f2f3ff; }
/* answer expands/collapses smoothly via grid-template-rows (0fr↔1fr); the inner
   wrapper clips the overflow so no gap shows while collapsed */
.faq-item__ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
/* отступ до ответа живёт внутри обрезаемой области — иначе свёрнутый вопрос
   на эти 12 пикселей выше макетных 104 */
.faq-item__ans-in { overflow: hidden; min-height: 0; }
.faq-item__text { padding-top: 12px; font: 500 16px/20px var(--font); color: rgba(242,243,255,.8); }
.faq-item__toggle { width: 28px; height: 28px; display: grid; place-items: center; color: #f2f3ff; flex: none; }
/* the toggle is always a "+"; rotate it 45° into an "×" when the item is open */
.faq-item__toggle .icon { transition: transform .2s ease; }
/* раскрытый вопрос темнее закрытых, плюс уезжает к верхней строке */
.faq-item.is-open { background: var(--bg-block); align-items: flex-start; }
.faq-item.is-open .faq-item__ans { grid-template-rows: 1fr; }
.faq-item.is-open .faq-item__toggle .icon { transform: rotate(45deg); }
/* Accordion glow: rays from the BOTTOM-LEFT corner (rays-faq.svg). Like the game
   cards, it fades in on HOVER; it also stays on while the item is open. The item's
   own overflow:hidden keeps it inside the question. */
.faq-item__glow {
    opacity: 0;
    transition: opacity .25s ease;
    position: absolute; left: 0; bottom: 0;
    width: 339px; height: 166px;
    background: url('/img/rays-faq.svg') no-repeat left bottom / contain;
    mix-blend-mode: screen;
    pointer-events: none;
}
.faq-item.is-open .faq-item__glow,
.faq-item:hover .faq-item__glow { opacity: 1; }
/* hover lift, matching the game cards (hover-capable, motion-friendly only) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .faq-item { transition: transform .25s ease; }
    .faq-item:hover { transform: translateY(-4px); }
}
.faq-item__body, .faq-item__toggle { position: relative; z-index: 1; }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners {
    background: var(--bg-block);
    border: 1px solid rgba(105, 88, 255, .2);
    border-radius: var(--radius-block);
    color: var(--ink);
    text-align: center;
    padding: 64px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.partners__row {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.partners__track {
    display: flex;
    width: max-content;
    animation: partners-drift 48s linear infinite;
}
.partners:hover .partners__track { animation-play-state: paused; }
.partners__set { display: flex; gap: 40px; padding-right: 40px; align-items: flex-start; }
@keyframes partners-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
/* шторка у обоих краёв: лента бесконечная, за краем всегда есть логотипы */
.partners__row::before,
.partners__row::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 70px;
    z-index: 2; pointer-events: none;
}
.partners__row::before { left: 0;  background: linear-gradient(270deg, rgba(7,8,21,0), var(--bg-block)); }
.partners__row::after  { right: 0; background: linear-gradient(90deg, rgba(7,8,21,0), var(--bg-block)); }
.partners__item { width: 200px; flex: none; text-decoration: none; display: block; }
.partners__logo {
    width: 200px; height: 200px;
    border-radius: 50%;
    background: #fff;
    display: grid; place-items: center;
    color: #9a9a9a;
    font: 600 20px/1 var(--font);
    overflow: hidden;
}
/* у логотипов из макета ширина проставлена инлайном; у партнёров из базы её
   нет, такой знак просто вписываем в плашку */
.partners__logo img { display: block; object-fit: contain; }
.partners__logo img:not([style]) { max-width: 76%; max-height: 44%; }
.partners__name { display: block; margin-top: 32px; font: 400 14px/18px var(--font); color: #f2f3ff; }
.partners .btn--light { display: inline-flex; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { display: flex; flex-direction: column; }
.footer__hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-block-2);
    border-radius: 24px 24px 0 0;
    padding: 32px;
    text-align: center;
}
/* заголовок стоит по центру блока: 136 сверху и снизу при высоте 344 */
.footer__hero .intro { padding: 104px 16px; }
/* CTA title is pure white and must paint ABOVE the glow (the glow is a
   positioned element, so unpositioned flow content would sit under it
   and get washed out — Figma 0:1592) */
.footer__hero .intro { position: relative; z-index: 1; }
.footer__hero .intro__title { color: #fff; }
/* footer star: rays come from the BOTTOM (flipped vertically) with the dense
   core sitting near the block's lower edge — the centre reads stronger here than
   in the header. */
/* footer uses the same spinning full star (inherits size/star/spin from
   .hero__glow above); centre sits BELOW the block so the rays rise from the bottom */
/* в подвале вместо вращающейся звезды - лучи, как у карточек (Figma, Vector 75):
   свой файл со встроенным размытием, обычное наложение и без вращения */
.footer__hero .hero__glow::before {
    left: 50%; top: -500px; bottom: auto;
    width: 1890px; height: 1156px;
    margin-left: -945px;
    background: url('/img/glow-block.svg') no-repeat center top / 100% 100%;
    mix-blend-mode: normal;
    animation: none;
}
/* confetti scatter for the footer block (Figma export) */
.footer__confetti {
    position: absolute;
    left: 50%; top: 0;
    width: 1144px; height: 335px;
    margin-left: -572px;
    transform: translate(var(--cfx, 0px), var(--cfy, 0px));
    will-change: transform;
    background: url('/img/confetti2.svg') no-repeat center top / contain;
    pointer-events: none;
    z-index: 0;
}
.footer__bottom {
    background: var(--bg-block-3);
    border-radius: 0 0 24px 24px;
    padding: 32px;
}
.footer__content { display: flex; gap: 24px; }
.footer__brand { flex: 0 0 209px; }
.footer__links { display: flex; gap: 24px; flex: 1; }
/* 326 — ширина колонки из макета 1440; ниже колонки ужимаются, иначе ряд
   подвала не влезает и страница уезжает по горизонтали */
.footer__col { flex: 0 1 326px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.flink { display: flex; align-items: center; gap: 8px; font: 500 16px/20px var(--font); color: rgba(242,243,255,.8); }
.flink:hover { color: #f2f3ff; text-decoration: underline; }
.flink .icon { color: #f2f3ff; }
.footer__contacts { flex: 0 0 443px; display: flex; flex-direction: column; gap: 32px; }
.contacts__row { display: flex; align-items: center; gap: 12px; font: 400 14px/18px var(--font); color: #f2f3ff; flex-wrap: wrap; }
/* подпись и значение идут парой, между ними отступ меньше, чем между парами */
.contacts__pair { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.contacts__row .lbl { color: rgba(242,243,255,.6); white-space: nowrap; }
/* часы уходят на свою строку, если название города длинное (например Санкт-Петербург) */
.contacts__hours { display: flex; gap: 12px; margin-left: auto; flex: none; }
/* номер всегда в одну строку: 9 знаков в макетных 90px занимают всю колонку,
   на узких экранах ужимаем, иначе номер рвётся посередине */
.phone { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; margin-top: 16px; }
.phone .pre { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: .8; letter-spacing: -.03em; color: rgba(242,243,255,.6); }
.phone .num { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 6.2vw, 90px); line-height: .8; letter-spacing: -.03em; color: #f2f3ff; }
.footer__social { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.footer__social .btn { border-color: rgba(242,243,255,.9); }
/* display:block обязателен — иконка лежит внутри ссылки и как строчный элемент
   игнорировала бы размеры (схлопывалась в 0x0) */
/* display:block обязателен — иконка лежит внутри ссылки и как строчный элемент
   игнорировала бы размеры; flex:none — чтобы не сжималась до нуля в тесном ряду */
.vk { display: block; flex: none; width: 40px; height: 40px; color: #fff; }
.footer__social-icons { display: flex; align-items: center; gap: 12px; flex: none; }
.footer__social-icons a { display: block; flex: none; line-height: 0; }
.footer__legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    padding-top: 24px;
    font: 400 14px/18px var(--font);
    color: rgba(242,243,255,.6);
}
/* правовые ссылки — простой текст без плашек */
.doc-link {
    font: 400 14px/18px var(--font);
    color: rgba(242,243,255,.6);
    cursor: pointer;
    white-space: nowrap;
}
.doc-link:hover { color: #f2f3ff; }
.footer__legal .sep { color: rgba(242,243,255,.6); }
.footer__legal .copy { margin-left: auto; color: rgba(177,179,203,.4); }
/* mirrored logo at the bottom-right of the mobile footer */
.logo--flegal svg { height: 24px; }

/* mobile call button + show-more (hidden on desktop via .only-mobile) */
.btn--call {
    justify-content: center;
    box-shadow: inset 0 -1px 2px rgba(7, 8, 21, .4), inset 0 2px 2px #f2f3ff,
                inset 0 0 0 1px rgba(105, 88, 255, .2);
    background: linear-gradient(180deg, #f2f3ff, #e3e4f1);
    border: 0;
    color: var(--bg-block);
    --ic-punch: #ffffff;
}
.btn--call .icon { color: var(--bg-block); }
/* светлая кнопка не должна темнеть при нажатии: общий .btn:hover делал её фон
   почти прозрачным. Ведём себя как остальные светлые кнопки — чуть приглушаем */
.btn--call:hover,
.btn--call:active { background: linear-gradient(180deg, var(--ink-2), #cfd0e2); color: var(--bg-block); }
.btn--showmore { width: 100%; justify-content: center; border-color: rgba(255,255,255,.9); }

/* plain text logo (mobile header — the mark is NOT mirrored on mobile) */
.logo-text {
    font-family: var(--display);
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    letter-spacing: -.02em;
}
.logo-text span { color: var(--red); }
.logo-text--sm { font-size: 20px; }

/* ============================================================
   GAME PAGE
   ============================================================ */
.crumbs { display: flex; gap: 12px; }
.crumbs .btn { color: #fff; }
/* «Назад к расписанию» и кнопка ссылки — без обводки */
.crumbs .btn,
.crumbs .icon-btn { border: none; box-shadow: none; }

.event { display: flex; gap: 24px; align-items: flex-start; margin-top: 24px; }
.event__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.event__head { display: flex; flex-direction: column; gap: 12px; }
.event__title { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: .82; letter-spacing: -.01em; color: var(--ink-2); }
.event__lead { font: 500 16px/20px var(--font); color: var(--ink-2); max-width: 640px; }

/* image gallery */
.gallery { display: flex; flex-direction: column; }
/* width:100% needed because Swiper's .swiper sets margin-inline:auto, which
   otherwise stops the stage from stretching in the flex-column .gallery */
.gallery__stage { width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--surface); }
.gallery__img {
    /* пропорция слайда из макета (892x491 на 1440): высота меняется вместе с шириной
       при сужении колонки — раньше height:491px был фиксирован и слайд превращался
       в тонкую высокую полосу */
    aspect-ratio: 892 / 491;
    background: linear-gradient(180deg, #23264a, #0c0e20);
    background-size: cover;
    background-position: center;
}
/* лёгкая вариация плейсхолдеров, чтобы листание было видно (фото пока нет) */
.gallery__img:nth-child(2) { background: linear-gradient(180deg,#2a2350,#0e0c20); }
.gallery__img:nth-child(3) { background: linear-gradient(180deg,#3a1d3f,#160c20); }
.gallery__img:nth-child(4) { background: linear-gradient(180deg,#1d2a4a,#0c1020); }
.gallery__img:nth-child(5) { background: linear-gradient(180deg,#40203a,#1a0c1a); }
.gallery__img:nth-child(6) { background: linear-gradient(180deg,#233a45,#0c1a1e); }
.gallery__nav { display: flex; align-items: center; gap: 16px; padding: 24px; }
.gallery__arrow {
    width: 40px; height: 40px; flex: none;
    /* flex + appearance:none so Safari centres the icon (see .sort-btn) */
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: #fff; border: 1px solid #e5e5e5;
    color: #070815; cursor: pointer;
}
.gallery__arrow:hover { background: #eee; }
/* the Lets-Icons arrow points left by default → rotate the "next" button */
.gallery__arrow:not(.gallery__arrow--prev) svg { transform: rotate(180deg); }
.gallery__arrow.swiper-button-disabled { opacity: .4; pointer-events: none; }
.gallery__nav .dots { flex: 1; display: flex; align-items: center; gap: 6px; }

/* content block */
/* no horizontal padding: text/title align flush with the gallery plate above (Figma) */
.block { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
/* H3: 32/26 */
.block__title { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: .81; letter-spacing: -.03em; color: var(--ink-2); }
.block__text { font: 500 16px/18px var(--font); color: var(--ink-2); }

/* venue block */
.venue-row { display: flex; align-items: center; gap: 16px; padding: 12px; }
.venue-photos { display: flex; gap: 24px; }
.venue-photo { flex: 1; height: 250px; border-radius: 12px; background: linear-gradient(135deg, #2a2f57, #141634); border: 1px solid rgba(255,255,255,.06); }
/* пк: не растягиваем фото в тонкие полосы при сужении колонки — вместо этого убираем
   лишние (высота 250px сохраняется). Границы min-width:769 — чтобы не задеть мобильную
   версию (≤768 у venue-photos свой горизонтальный скролл). */
@media (min-width: 769px) and (max-width: 1250px) { .venue-photo:nth-child(3) { display: none; } }
@media (min-width: 769px) and (max-width: 890px)  { .venue-photo:nth-child(2) { display: none; } }

/* purchase card */
.buycard {
    /* right column shrinks first (33% of the row, floor 320px) so the left
       gallery/venue photos keep width below ~1400; fixed size, no content-shrink */
    flex: 0 0 auto;
    flex-basis: clamp(320px, 33%, 443px);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 20px;
    background: var(--surface);
}
.buycard__head { display: flex; align-items: center; gap: 12px; }
.buycard__price { font: 500 24px/28px var(--font); }
.buycard__flag {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 16px/18px var(--font);
}
.buycard__flag .badge-flag { position: static; width: 28px; height: auto; margin: 0; }
.buycard__details { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.buycard .btn--light { width: 100%; justify-content: center; padding: 16px; }

/* ============================================================
   CALENDAR (Figma: Calendar / Basic)
   ============================================================ */
.cal {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    border-radius: 12px;
    background: #13162c;
    border: 1px solid var(--surface);
}
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal__title { font: 400 14px/16px var(--font); color: var(--ink-2); }
.cal__arrow {
    width: 32px; height: 32px; flex: none;
    /* flex + appearance:none so Safari centres the icon (see .sort-btn) */
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--ink-2); cursor: pointer;
}
.cal__arrow:hover { background: #fff; color: #13162c; }
.cal__arrow:disabled { opacity: .35; pointer-events: none; }
.cal__arrow[data-cal-prev] svg { transform: rotate(90deg); }
.cal__arrow[data-cal-next] svg { transform: rotate(-90deg); }

.cal__week, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__week { margin-bottom: 8px; }
.cal__wd {
    height: 21px; display: grid; place-items: center;
    font: 400 14px/16px var(--font); color: var(--muted-2);
}
.cal__day {
    height: 32px;
    border: 0; background: transparent; cursor: pointer;
    font: 400 14px/16px var(--font); color: var(--muted-2);
}
.cal__day:not(.is-out):hover { color: #fff; }
.cal__day.is-out { color: rgba(117,118,131,.45); cursor: default; }
.cal__day.is-range { background: var(--surface); color: #fff; }
.cal__day.is-edge { background: var(--blue); color: #fff; }
.cal__day.is-start { border-radius: 8px 0 0 8px; }
.cal__day.is-end { border-radius: 0 8px 8px 0; }
.cal__day.is-start.is-end { border-radius: 8px; }
.cal__day.is-rowstart { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.cal__day.is-rowend { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

.cal__actions { display: flex; gap: 16px; }
.cal__btn {
    height: 36px; padding: 8px 16px;
    border: 1px solid var(--surface); border-radius: 8px;
    background: transparent; color: #fff;
    font: 400 14px/16px var(--font); cursor: pointer; white-space: nowrap;
}
.cal__btn--primary { flex: 1; background: var(--blue); border-color: var(--blue); }

/* ============================================================
   SUCCESSFUL PURCHASE PAGE (Figma: «Успешная покупка билетов»)
   ============================================================ */
.success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0 16px 64px;
    text-align: center;
    position: relative;
}
.success__logo { margin-bottom: 8px; }
.success__logo svg { height: 40px; }
/* confetti scatter from the design SVG — positioned relative to .success
   (full-width; avoids the 100vw+scrollbar horizontal overflow) */
.success .intro__title, .success .intro__sub { position: relative; z-index: 1; }
/* allow the success title to sit on one line while it fits; the <wbr> + &nbsp; in
   the markup control where it breaks once it no longer does */
.success .intro__title { max-width: none; }
/* десктоп: держим заголовок в ОДНУ строку по всему диапазону — плавно уменьшаем шрифт
   с шириной вьюпорта (запас ~40px до переноса). Иначе при фикс. 80px он переносился в
   2 строки уже с ~1110, а при 60px (≤1100) — с ~913, и текст наезжал на конфетти.
   min-width:769 — мобильную версию (32px, 2 строки, отдельные ленты) не трогаем. */
@media (min-width: 769px) {
    .success .intro__title { font-size: clamp(46px, calc(7.5vw - 11px), 80px); }
}
/* bigger header: extra space below the title so the confetti sits clear above the info card */
.success .intro { margin-bottom: 48px; }
.success__confetti {
    position: absolute;
    left: 50%; top: -25px;
    width: 851px; max-width: 100%;
    aspect-ratio: 851 / 333;
    /* --cfx/--cfy: subtle mouse-parallax offset (JS-smoothed in app.js) */
    transform: translateX(-50%) translate(var(--cfx, 0px), var(--cfy, 0px));
    will-change: transform;
    background: url('/img/confetti-success.svg') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}
.success__card {
    width: 100%; max-width: 464px;
    text-align: left;
    background: var(--bg-block-2);
    border: 1px solid var(--surface);
    border-radius: var(--radius-card);
    padding: 20px;
}
.success__card-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.success__card-head span { font: 400 14px/16px var(--font); color: var(--ink-2); }
.success__card-head b { font: 700 32px/.8 var(--display); letter-spacing: -.03em; color: #fff; }
.success__grid { display: flex; flex-direction: column; gap: 24px; }
/* desktop: [url  button] on one row, label above, note below (grid places them
   regardless of source order, which is label/url/note/button for mobile) */
.success__share { width: 100%; max-width: 464px; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.success__share .field__label { grid-column: 1 / -1; font: 500 18px/22px var(--font); }
.success__share .success__url { grid-column: 1; grid-row: 2; }
.success__share .btn--light { grid-column: 2; grid-row: 2; }
.success__share .checkout__note { grid-column: 1 / -1; grid-row: 3; margin: 0; }
.success__url {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 16px;
    background: var(--bg-block-2); border: 1px solid var(--surface); border-radius: 12px;
    font: 400 14px/16px var(--font); color: var(--ink-2);
}
.success__actions { display: flex; gap: 16px; margin-top: 32px; }

/* ===== Личный кабинет / Мои брони ===== */
.cabinet { position: relative; z-index: 1; width: 100%; max-width: 900px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 16px; }
.cabinet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cabinet__hello { font: 500 16px/20px var(--font); color: var(--ink-2); }
.cabinet__logout { margin-left: auto; }
.cabinet__msg { font: 500 18px/24px var(--font); color: var(--ink-2); text-align: center; padding: 48px 0; }
.cabinet__link { color: var(--blue); text-decoration: underline; }
.booking {
    display: flex; align-items: stretch; gap: 24px;
    background: var(--bg-block-2); border: 1px solid var(--surface);
    border-radius: var(--radius-card); padding: 20px;
}
.booking__body { flex: 1; display: flex; flex-direction: column; gap: 16px; text-align: left; min-width: 0; }
.booking__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.booking__title { font: 700 22px/1 var(--display); letter-spacing: -.02em; color: #fff; }
.booking__grid { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.booking__grid .info { min-width: 150px; }
.booking__side { display: flex; flex-direction: column; gap: 8px; justify-content: center; flex: none; }
.booking__side .btn { white-space: nowrap; justify-content: center; }
.booking__cancel { color: var(--ink-2); }

/* ===== Рейтинг команд ===== */
.rating__tabs { position: relative; z-index: 1; width: 100%; max-width: 900px; margin: 8px auto 4px; display: flex; flex-wrap: wrap; gap: 8px; }
/* leaderboard container: own class so it doesn't collide with the .rating star-badge
   (venue-row / venue cards), which the bare .rating rule was overriding (centering it) */
.rating-board { position: relative; z-index: 1; width: 100%; max-width: 900px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 8px; }
.rating__head, .rating__row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
.rating__head { padding: 4px 20px; font: 500 13px/16px var(--font); color: var(--ink-2); }
.rating__row { background: var(--bg-block-2); border: 1px solid var(--surface); border-radius: 16px; font: 500 16px/20px var(--font); color: #fff; }
.rating__pos { width: 32px; flex: none; text-align: center; color: var(--ink-2); }
.rating__row .rating__pos b { font: 700 18px/1 var(--display); color: #fff; }
.rating__row.is-top .rating__pos b { color: #FFC400; }
.rating__team { flex: 1; min-width: 0; font-weight: 600; }
.rating__stats { display: flex; gap: 20px; flex: none; }
.rating__stat { width: 64px; text-align: right; }
.rating__row .rating__stat { color: rgba(255,255,255,.9); }
.rating__row .rating__stat--pct { color: #fff; font-weight: 700; }
.rating__team[href]:hover { text-decoration: underline; }
.rating__sort { color: var(--ink-2); text-decoration: none; cursor: pointer; white-space: nowrap; }
.rating__sort:hover { color: #fff; }
.rating__sort.is-active { color: #fff; font-weight: 600; }
.rating__arrow { font-size: 11px; }

/* ===== Профиль команды ===== */
.teamp { position: relative; z-index: 1; width: 100%; max-width: 900px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 24px; }
.teamp__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.teamp__stat { background: var(--bg-block-2); border: 1px solid var(--surface); border-radius: 16px; padding: 18px 20px; text-align: left; }
.teamp__stat b { display: block; font: 700 32px/1 var(--display); letter-spacing: -.02em; color: #fff; }
.teamp__stat span { display: block; margin-top: 6px; font: 400 14px/16px var(--font); color: var(--ink-2); }
.teamp__roster { display: flex; flex-direction: column; gap: 8px; }
.teamp__roster .head__title--md { margin-bottom: 8px; }
.teamp__member { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--bg-block-2); border: 1px solid var(--surface); border-radius: 16px; }
.teamp__name { font: 600 16px/20px var(--font); color: #fff; }
.teamp__role { font: 500 13px/16px var(--font); color: var(--ink-2); }
.teamp__role.is-captain { color: #FFC400; }
.teamp__back { align-self: flex-start; }

/* team search autocomplete (checkout modal) */
[data-team-field] { position: relative; }
.team-suggest {
    position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; z-index: 30;
    max-height: 240px; overflow-y: auto;
    background: var(--bg-block-2); border: 1px solid var(--surface); border-radius: 12px;
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.team-suggest__item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
    padding: 10px 12px; color: var(--ink); font: 500 15px/18px var(--font); cursor: pointer;
}
.team-suggest__item:hover { background: rgba(255,255,255,.06); }
.team-suggest__item small { color: var(--ink-2); font-weight: 400; font-size: 13px; }
/* строка-пояснение вместо списка: «начните вводить» / «команды нет, создадим» */
.team-suggest__note { display: block; padding: 10px 12px; color: var(--muted); font: 400 13px/17px var(--font); }

@media (max-width: 768px) {
    .cabinet { margin-top: 16px; }
    .booking { flex-direction: column; gap: 16px; padding: 16px; }
    .booking__side { flex-direction: row; }
    .booking__side .btn, .booking__side form { flex: 1; }
    /* team profile: stats 2-per-row */
    .teamp__stats { grid-template-columns: repeat(2, 1fr); }
    .teamp__stat b { font-size: 26px; }
    /* rating: header hidden, stats wrap under the team name with labels */
    .rating__head { display: none; }
    .rating__row { flex-wrap: wrap; padding: 12px 14px; gap: 4px 16px; }
    .rating__pos { width: 28px; }
    .rating__stats { flex: 1 1 100%; margin-left: 44px; gap: 16px; }
    .rating__stat { width: auto; text-align: left; font: 400 13px/16px var(--font); color: var(--ink-2); }
    .rating__row .rating__stat::before { content: attr(data-label) ' '; }
    .rating__row .rating__stat--pct { font-weight: 500; }
    /* no spinning header star on the success page on mobile */
    .hero--success .hero__glow { display: none; }
    /* home: no header rays on mobile (other rays stay) */
    .hero--home > .hero__glow { display: none; }
    /* confetti frames the title: anchor it to .intro (on mobile .success's top is
       the nav, which pushed the scatter up), with the tighter Figma mobile scatter */
    .success .intro { position: relative; }
    /* keep the title on two lines at every mobile width so its width is constant,
       otherwise it becomes one wide line and the confetti overlaps it */
    .success .intro__title { max-width: 300px; margin-left: auto; margin-right: auto; }
    /* мобилка: 4 отдельные ленты из макета (кадр 319x133) в центрированном боксе
       450px (тот же «sweet spot», что был у фон-SVG), масштаб — через scale, чтобы
       инлайн-вектор оставался чётким; узкие экраны подрезает .hero overflow:hidden */
    .success__confetti-m {
        position: absolute;
        left: 50%; top: 0;
        /* 100vw минус поля блока - та же ширина, по которой кадр раньше подрезал
           .hero (теперь он не режет, иначе прятал бы выпадающие списки) */
        width: 450px; max-width: calc(100vw - 32px); height: 188px;
        overflow: hidden;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 0;
    }
    .success__confetti-m .confetti-scene {
        position: absolute; top: 0; left: 50%;
        width: 319px; height: 133px;
        transform: translateX(-50%) scale(1.4107); /* 450 / 319 */
        transform-origin: top center;
    }
    .success__confetti-m .cfm { position: absolute; }
    /* standard compact header spans the full width (success centres its column) */
    .success .nav-mobile { width: 100%; }
    /* the venue block is flat on mobile (no card surface) */
    .success__card { background: none; border: none; padding: 0; }
    /* share stacks: label / url / note / button (source order); extra top gap */
    .success__share { display: flex; flex-direction: column; align-items: stretch; margin-top: 16px; }
    .success__share .btn--light { width: 100%; justify-content: center; }
    .success__actions { flex-direction: column; width: 100%; margin-top: 0; }
    /* action buttons: transparent, no border */
    .success__actions .btn { justify-content: center; border: 0; background: none; }
}

/* ============================================================
   CHECKOUT MODAL (Figma: «Страница игры - Покупка»)
   ============================================================ */
.checkout { position: fixed; inset: 0; z-index: 200; display: flex; }
.checkout[hidden] { display: none; }
.checkout__backdrop { position: absolute; inset: 0; background: #11132b; overflow: hidden; }
.checkout__panel {
    position: relative;
    margin: auto;
    width: 499px;
    max-width: calc(100% - 32px);
    max-height: 92vh;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #070815;
    border-radius: 24px;
}
.checkout__close {
    position: absolute;
    top: 22px; right: 20px;
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0;
    color: #fff; cursor: pointer;
    font: 400 16px/20px var(--font);
    z-index: 1;
}
.checkout__form { display: flex; flex-direction: column; gap: 4px; }
.checkout__summary { font: 400 14px/20px var(--font); color: rgba(255, 255, 255, .4); margin: 0; }
.input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--surface);
    border-radius: 12px;
    background: rgba(37, 42, 78, .7);
    color: #fff;
    font: 400 15px/18px var(--font);
    resize: vertical;
}
.input::placeholder { color: var(--muted); }
/* validation: красная рамка и подпись под полем (телефон/почта в оформлении) */
.input.is-invalid { border-color: var(--red); }
/* поле с подсказкой-списком: стрелка справа внутри поля (поиск команды в резерве) */
.field--pick .field__wrap { position: relative; display: block; }
.field--pick .input { padding-right: 44px; }
.field__chevron {
    position: absolute; right: 14px; top: 50%; margin-top: -9px;
    color: var(--ink-2); pointer-events: none;
}
.field__err { color: var(--red); font: 400 12px/15px var(--font); padding-left: 4px; }
/* seat count: 1–10, single choice; выбранное — синий квадрат */
.seats { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.seats__opt {
    /* тянемся по ширине карточки: в широком окне резерва квадрат выбранного
       места крупный, как в макете, в узком (оформление) — сжимается */
    flex: 1 1 32px; aspect-ratio: 1; min-width: 0; max-width: 44px;
    -webkit-appearance: none; appearance: none;
    position: relative;
    border: 0; border-radius: 12px; padding: 0;
    background: transparent; color: #fff;
    font: 500 20px/1 var(--font); cursor: pointer;
    transition: background-color .15s;
}
/* span pinned to the button's real (square) box edges via inset:0, then flex-centres
   the digit — bypasses iOS Safari's aspect-ratio content-height quirk (top-aligned it) */
.seats__opt > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.seats__opt:hover:not(.is-active) { background: rgba(255, 255, 255, .08); }
.seats__opt.is-active { background: var(--blue); color: #fff; }
.promo-field { display: flex; gap: 8px; }
.promo-field .input { flex: 1; }
/* «Применить» — по макету: индиго #4F46E5, менее скруглённая (8px) */
.promo-field .btn--pill {
    /* компактная кнопка в одну строку с полем — высота пилюли тут не нужна */
    min-height: 0;
    background: #4F46E5;
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    color: #FAFAFA;
    font: 500 14px/20px var(--font);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.promo-field .btn--pill:hover { background: #4F46E5; filter: brightness(1.08); }
/* блок оплаты — отдельный непрозрачный тёмный, в отличие от полупрозрачных карточек */
.checkout__pay { gap: 16px; }
.sheet__block.checkout__pay { background: #252A4E; }
/* pay button: centre the icon + label */
.checkout__pay .btn--light { justify-content: center; }
.checkout__totals { display: flex; flex-direction: column; gap: 8px; }
.checkout__totalsrow { display: flex; justify-content: space-between; font: 400 14px/16px var(--font); color: var(--ink-2); }
.checkout__totalsrow b { color: #fff; }
.checkout__note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 400 13px/18px var(--font); color: var(--muted); }
@media (max-width: 768px) {
    .checkout__panel {
        margin: auto 0 0;
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
    }
}

/* desktop popover holding the calendar */
[data-popover] { position: relative; }
.popover {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
    width: 328px; display: none;
}
/* the 328px above is the calendar picker's width; the Тема/Площадка select
   dropdowns take their field width instead, so the rightmost one doesn't run off
   the right edge below ~955px (higher specificity to win over the base rule). */
.popover.popover--select { width: 100%; }
[data-popover].is-open .popover { display: block; }

/* ============================================================
   FILTER SHEET (mobile modal)
   ============================================================ */
.sheet { position: fixed; inset: 0; z-index: 200; display: flex; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.sheet__panel {
    position: relative;
    margin: auto 0 0;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    border-radius: 24px 24px 0 0;
}
.sheet__block {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px; border-radius: 20px;
    background: rgba(37, 42, 78, .4);
}
/* filter sheet (modal): blocks are solid #070815 */
.sheet .sheet__block { background: #070815; }
.sheet__block--cal { padding: 12px; }
.sheet__bar { display: flex; align-items: center; gap: 16px; }
.sheet__title { flex: 1; font: 500 16px/24px var(--font); color: #fff; }
/* checkout modal title uses the display serif per Figma (H3: 32/80%, -0.03em) */
.checkout__form .sheet__title { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: .8; letter-spacing: -.03em; color: var(--ink-2); }
/* mobile: smaller title so it fits (Figma: 16/24, medium sans) */
@media (max-width: 768px) {
    .checkout__form .sheet__title { font: 500 16px/24px var(--font); letter-spacing: 0; color: #fff; }
}
.sheet__link {
    border: 0; background: none; cursor: pointer;
    font: 400 14px/20px var(--font); color: var(--line);
}
.sheet__link--white { color: #fff; }
.sheet__trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 36px; padding: 8px 12px;
    border: 0; border-radius: 8px;
    background: var(--surface); color: var(--ink-2);
    font: 400 14px/16px var(--font); cursor: pointer;
}
.sheet__label { font: 600 18px/21px var(--font); color: #fff; }
.sheet__actions { flex-direction: row; gap: 16px; }
.sheet__actions .chip:last-child { flex: 1; }

.chips { display: flex; gap: 4px; }
.chips--split { gap: 16px; }
.chip {
    flex: none;
    height: 36px; padding: 8px 16px;
    border: 1px solid var(--surface); border-radius: 8px;
    background: transparent; color: #fff;
    font: 400 14px/16px var(--font); cursor: pointer; white-space: nowrap;
}
.chip.is-active, .chip--primary { background: var(--blue); border-color: var(--blue); }
/* selection buttons: blue when chosen, grey on hover, nothing by default */
.chip:not(.is-active):not(.chip--primary):hover { background: rgba(255, 255, 255, .1); border-color: transparent; }
.chips .chip { flex: 1; padding: 8px 4px; }
.chip--half, .chip--third { flex: 1; }
/* full-width «clear all» button at the bottom of the filter sheet */
.sheet__clear-all { width: 100%; border-color: transparent; color: var(--muted); }

.radio { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio i {
    position: relative;
    width: 16px; height: 16px; flex: none; margin-top: 1px;
    border-radius: 9999px; background: var(--surface);
}
.radio input:checked + i { background: var(--blue); }
/* у выбранного — белая точка по центру */
.radio input:checked + i::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 9999px; background: #fff;
}
.radio span { font: 400 14px/16px var(--font); color: #fff; }
.radio small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted-2); }

/* ============================================================
   Confetti decoration
   ============================================================ */
.confetti { position: absolute; z-index: 0; pointer-events: none; }
.confetti svg { width: 100%; height: 100%; }

/* ============================================================
   Mobile-only components (Figma frame 360)
   ============================================================ */
.only-mobile { display: none; }

/* compact header */
.nav-mobile { align-items: center; gap: 12px; }
.logo--sm { font-size: 20px; }
.navm__spacer { flex: 1; }
.iconbtn-sm {
    position: relative;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    background: none; border: 0; color: #fff; cursor: pointer;
    text-decoration: none; /* часть из них — ссылки (календарь, кабинет) */
}
.iconbtn-sm .count {
    position: absolute; top: -6px; right: -8px;
    min-width: 16px; height: 16px; padding: 2px;
    font-size: 10px; line-height: 1;
}

/* upcoming game card */
.topcard {
    position: relative; overflow: hidden;
    flex-direction: column; gap: 12px;
    padding: 16px; border-radius: 12px;
    /* тёмная полупрозрачная поверхность (макет: #070815 40%) */
    background: rgba(7, 8, 21, .4);
}
.topcard > *:not(.topbar__glow) { position: relative; z-index: 1; }
/* upcoming-game card carries the design's own rays glow, clipped to the block */
.topcard > .topbar__glow {
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: url('/img/rays-upcoming.svg') no-repeat center / 100% 100%;
}
.topcard__title { font: 500 16px/18px var(--font); }
.topcard__row { font: 400 14px/16px var(--font); color: #fff; }
.topcard__place b { display: block; font: 400 14px/16px var(--font); }
.topcard__place span { display: block; font: 400 14px/16px var(--font); color: rgba(255,255,255,.7); }
.topcard__btn { justify-content: center; }

/* sorter row */
.sorter { align-items: center; gap: 12px; flex-wrap: nowrap; overflow-x: auto; padding: 8px 0; }
.sort-btn, .chip-blue { flex: none; }
.sort-btn {
    width: 36px; height: 36px; flex: none;
    /* Safari applies its native <button> rendering (-webkit-appearance) over the
       CSS box and pushes the icon off-centre; grid place-items is also 1px off
       here even in Chromium. Reset appearance and centre with flex → dead-centre
       icon in every browser. */
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--surface); border-radius: 8px;
    background: transparent; color: #fff; cursor: pointer;
}
.sort-btn--blue { background: var(--blue); border-color: var(--blue); }
.chip-blue {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border: 0; border-radius: 8px;
    background: var(--blue); color: #f2f3ff;
    font: 400 14px/16px var(--font); cursor: pointer;
    max-width: 100%;
}
/* чип активного фильтра: тело открывает фильтры, крестик снимает фильтр */
.chip-blue__main,
.chip-blue__x {
    -webkit-appearance: none; appearance: none;
    background: none; border: 0; padding: 0; margin: 0;
    color: inherit; font: inherit; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    min-width: 0;
}
.chip-blue__main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-blue__x { flex: none; opacity: .8; }
.chip-blue__x:hover { opacity: 1; }

/* ============================================================
   Responsive
   ============================================================ */
/* below the 1440 frame: scale the footer contacts/phone/gap so the block never
   overflows (fixed 420px contacts + edge-tight 72px phone spill on wider font metrics) */
@media (max-width: 1400px) {
    .footer__links { gap: 24px; }
    .footer__contacts { flex-basis: 400px; }
    .phone .num { font-size: 60px; }
    .phone .pre { font-size: 22px; }
}
/* below ~1150 the 3-column row gets too cramped (columns overlap): stack them
   with desktop styling, before the full mobile footer treatment at 768 */
@media (max-width: 1150px) {
    .footer__content { flex-direction: column; align-items: flex-start; gap: 28px; }
    .footer__brand, .footer__links, .footer__contacts { flex: none; }
}
@media (max-width: 1100px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .card--wide { grid-column: span 2; }
    .faq { flex-direction: column; }
    .faq__aside { flex: none; padding: 0; }
    .venue { width: 560px; }
    .intro__title, .head__title { font-size: 60px; }
}

/* ---- switch to dedicated mobile layout (Figma 360) ---- */
@media (max-width: 768px) {
    .only-desktop { display: none !important; }
    .only-mobile { display: block; }
    .nav-mobile, .sorter { display: flex; }
    /* .only-mobile's display:block must not flatten flex buttons */
    .btn.only-mobile { display: inline-flex; }
    .btn--call.only-mobile, .btn--showmore.only-mobile { display: flex; width: 100%; }
    .topcard { display: flex; }

    /* пилюли на мобильном ниже: 36 против 48 на десктопе (макет 360) */
    .btn--pill, .faq__tabs .btn { min-height: 36px; padding: 8px 12px; }

    .shell { padding: 8px 0 24px; gap: 12px; }
    .hero { padding: 16px; gap: 16px; display: flex; flex-direction: column; }
    .section, .partners { padding: 32px 16px; border-radius: 24px; }
    .footer__hero, .footer__bottom { padding: 16px; }

    /* game cards: single column, compact */
    .calendar { margin-top: 0; gap: 16px; }
    .grid { grid-template-columns: 1fr; gap: 16px; }
    /* мобильная карточка по макету: поля 16, скругление 20 (Card-2, вариант Mobile) */
    .card { padding: 16px; border-radius: 12px; min-height: 0; }
    .card--wide { grid-column: span 1; }
    /* заголовок мобильной карточки — тот же слаб, но 24 (макет 360) */
    .card__title { font-size: 24px; line-height: .79; }
    .calendar .btn { width: 100%; justify-content: center; }

    /* headings */
    .head__title, .head__title--md, .intro__title { font-size: 32px; line-height: 1; }
    /* заголовок главной на мобильном: H3 макета, 32/26 */
    .hero--home .intro__title { line-height: .8125; }
    .head__sub { font-size: 16px; line-height: 20px; }
    /* на мобильном у главной свой компактный блок заголовка: подзаголовок 16/24,
       кнопки предложений остаются только на десктопе */
    .hero--home .intro { padding: 16px 16px 24px; gap: 16px; }
    .hero--home .intro__sub { font-size: 16px; line-height: 24px; }
    .hero--home .intro__offers { display: none; }
    .intro--page { padding: 8px 16px; }
    .intro--page .confetti { display: none; }

    /* stats: number right-aligned in the left half, label from the centre (Figma 1839) */
    .stats { flex-direction: column; gap: 16px; padding: 12px; width: 100%; }
    .stat { flex-direction: row; align-items: center; gap: 16px; min-width: 0; }
    .stat b { font-size: 52px; flex: 1 1 0; text-align: right; }
    .stat span { text-align: left; flex: 1 1 0; }

    /* venues: horizontal carousel of 240px cards */
    .venues__head { flex-direction: column; }
    .venues__head .round-btn { display: none; }
    /* Swiper carousel handles mobile swipe; just size the slides */
    .venue { width: 240px; }
    .venue__img { height: 200px; border-radius: 12px; }

    /* faq */
    .faq__tabs { flex-wrap: wrap; }
    .faq__list { gap: 12px; }
    .faq-item { padding: 12px; border-radius: 12px; }
    .faq-item__q { font-size: 16px; line-height: 20px; }
    /* на мобильном вопрос мельче, поэтому спойлер не должен с ним сравняться */
    .faq-item__hint { font-size: 14px; line-height: 18px; }

    /* game page */
    .event { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; }
    .event__col { width: 100%; min-width: 0; gap: 16px; }
    .block, .venue-photos { min-width: 0; }
    .event__title { font-size: 32px; }
    .gallery__img { height: 220px; aspect-ratio: auto; }
    .gallery__nav { padding: 16px 0; }
    .block { padding: 0; }
    .block__title { font-size: 24px; }
    /* a bit more space above the «Где будет проходить игра?» block */
    .event__col .block + .block { margin-top: 16px; }
    .buycard { flex-basis: auto; width: 100%; }
    /* date & place align flush under the price, stacked (no inner inset) */
    .buycard__details { padding: 0; }
    .venue-photos { overflow-x: auto; }
    .venue-photo { flex: 0 0 200px; height: 180px; }

    /* footer: mobile omits the big "Мозгва — ❤!" hero block */
    .footer__hero { display: none; }
    .footer__bottom { border-radius: 24px; }
    .footer__content { flex-direction: column; gap: 32px; }
    /* a little extra gap between the links block («Фотографии с игр») and the
       contacts block (город/время) on mobile — on top of the 32px column gap */
    .footer__contacts { margin-top: 16px; }
    /* wider breathing room between footer link categories (Figma 0:1931) */
    .footer__links { flex-direction: column; gap: 24px; }
    .footer__col { gap: 24px; }
    .footer__contacts, .footer__brand, .footer__col { flex: none; }
    /* mobile footer has no brand block at the top */
    .footer__brand { display: none; }
    .contacts__row { flex-wrap: wrap; }
    /* hours stacked in a column */
    .contacts__hours { margin-left: 0; flex-direction: column; gap: 12px; width: 100%; }
    /* та же связка, что на десктопе, только кегли под 328 пикселей колонки */
    .phone { gap: 8px; }
    .phone .num { font-size: 44px; }
    .phone .pre { font-size: 20px; }
    /* 360px: shrink gap + button padding so the row fits and space-between
       leaves the icons flush right, mirroring the 16px left inset */
    /* на узких экранах кнопка «Обратный звонок» и иконки не помещаются в одну
       строку — переносим иконки на свою строку, а не сжимаем их */
    .footer__social { flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .footer__social .btn { padding: 11px 12px; }
    .footer__social-icons { justify-content: center; width: 100%; }
    /* docs stacked; © bottom-left with the mirrored logo bottom-right */
    .footer__legal { align-items: flex-start; flex-direction: column; gap: 12px; position: relative; }
    /* extra breathing room above «© 2026» */
    .footer__legal .copy { margin-left: 0; margin-top: 24px; }
    .footer__legal .logo--flegal { position: absolute; right: 0; bottom: 0; }

    /* mobile: only the first 4 game cards until «Показать ещё» is tapped */
    [data-mobile-limit] .card:nth-child(n+5) { display: none; }
    [data-mobile-limit].is-expanded .card:nth-child(n+5) { display: flex; }

    /* FAQ: заголовок по центру, пилюли вкладок ниже и уезжают в прокрутку.
       Цвета вкладок общие с десктопом: выбранная светлая, остальные обводкой */
    .faq__aside .head { text-align: center; align-items: center; }
    .faq__aside .head__sub { text-align: center; }
    .faq__tabs { flex-wrap: nowrap; overflow-x: auto; }
    .faq__tabs .btn { padding: 8px 12px; border-radius: 36px; font-size: 16px; white-space: nowrap; flex: none; }

    /* venues: centred heading, single-line name, no dots and no logo bubble */
    .venues__head .head { text-align: center; align-items: center; width: 100%; }
    .venues__head .head__sub { text-align: center; }
    .venue .dots { display: none; }
    .venue__foot { align-items: flex-start; }
    .venue__info { flex: 1 1 0; min-width: 0; }
    .venue__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .venue__logo { display: none; }
    .rating.only-mobile { display: inline-flex; margin-top: 8px; }

    /* home page cards: only the info button and the price (Figma 0:1834) */
    .calendar--home .card .teams { display: none; }
    .calendar--home .card .buy { flex: 1; justify-content: center; }

    /* sorter: centred on the home page; calendar page shows the games counter.
       Safari mis-handles justify-content:center inside an overflow-x:auto scroll
       container (the chips drift to the right), so centre the home row with auto
       margins on the end children instead — they collapse to 0 (flex-start) when
       the row overflows, so nothing gets pushed out of reach. */
    .sorter { justify-content: flex-start; }
    .sorter:not(.sorter--meta) > :first-child { margin-left: auto; }
    .sorter:not(.sorter--meta) > :last-child { margin-right: auto; }
    .sorter--meta { justify-content: flex-start; }
    .sorter--meta .sorter__meta { margin-left: auto; font: 400 14px/16px var(--font); color: var(--ink-2); }

    /* calendar page: flat background — glow stays small, near the heading */
    .hero--calendar .hero__glow::before { height: 420px; bottom: auto; }
    .hero--calendar .banner { margin: 16px 0 0; }
}

/* ===== Регистрация в розыгрыше (Figma «/lotto») ===== */
/* источник света — за номером участника: центр звезды совпадает с цифрой,
   поэтому лучи расходятся из-за неё, а не уходят за верхний край экрана */
.hero--lotto:has(.lotto__number) .hero__glow::before {
    left: 50%; top: -306px;
    width: 1400px; height: 1400px;
    margin-left: -700px;
}
/* ленты на этом экране опущены целиком (под заголовок с номером), а внутри
   своего файла ещё и розовая лента по центру сдвинута ниже — иначе она лежит
   на строке «Ваш номер». Общий confetti-success.svg не трогаем: он на других
   страницах */
.hero--lotto:has(.lotto__number) .success__confetti {
    top: 75px;
    background-image: url('/img/confetti-lotto.svg');
}
.lotto__number {
    position: relative; z-index: 1; display: block; margin-top: 8px;
    color: #fff; font: 700 160px/1 var(--display);
}
/* цифры стоят вразнобой: нечётные ниже, чётные выше */
.lotto__digit { display: inline-block; }
.lotto__digit:nth-child(odd) { transform: translateY(18px); }
.lotto__digit:nth-child(even) { transform: translateY(-18px); }
.lotto__panel {
    width: 100%; max-width: 560px; text-align: left;
    display: flex; flex-direction: column; gap: 16px;
}
.lotto__block {
    display: flex; flex-direction: column; gap: 16px;
    padding: 20px; border-radius: 20px;
    background: rgba(37, 42, 78, .4);
}
.lotto__block--agree { gap: 12px; background: #252A4E; }
.radio-row { display: flex; align-items: center; gap: 32px; }
.lotto__block--agree .check--doc { color: var(--ink-2); }
.lotto__submit { width: 100%; justify-content: center; margin-top: 4px; }
/* напоминание «вы уже участвуете» над формой */
.lotto__note {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px 20px; border-radius: 12px;
    background: linear-gradient(90deg, rgba(116, 39, 178, .5), rgba(52, 28, 140, .35));
    border: 1px solid rgba(255, 255, 255, .08);
}
.lotto__note-title { color: #fff; font: 500 16px/20px var(--font); }
.lotto__note-row { display: flex; gap: 24px; flex-wrap: wrap; }
.lotto__card { display: flex; flex-direction: column; gap: 16px; }
.lotto__card .rsmodal__venue { margin-top: -10px; }
@media (max-width: 768px) {
    .lotto__number { font-size: 96px; }
    .lotto__block { padding: 16px; }
    /* на узком экране поля идут по одному в строку */
    .lotto__block .field-row { flex-direction: column; }
    /* площадку по макету показываем раскрытым списком с переключателями */
    .lotto__pick--places > .select { display: none; }
    .lotto__pick--places .popover {
        position: static; display: block; width: 100%;
        padding: 0; background: none; border: 0; max-height: none;
    }
    .lotto__pick--places .opt-list { gap: 4px; }
    .lotto__pick--places .opt-list__item { position: relative; padding-left: 32px; }
    .lotto__pick--places .opt-list__item::before {
        content: ""; position: absolute; left: 8px; top: 12px;
        width: 16px; height: 16px; border-radius: 9999px; background: var(--surface);
    }
    .lotto__pick--places .opt-list__item.is-active { background: none; }
    .lotto__pick--places .opt-list__item.is-active::before { background: var(--blue); }
}

/* ===== Список команд игры (Figma «Список команд») ===== */
.tmodal { position: fixed; inset: 0; z-index: 380; }
.tmodal[hidden] { display: none; }
.tmodal__backdrop { position: absolute; inset: 0; background: #11132b; overflow: hidden; backdrop-filter: blur(12px); }
.tmodal__panel {
    position: absolute; inset: 0; overflow-y: auto;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px;
}
/* окно по макету: 464 в ширину, скругление 24, поля 24 */
.tmodal__box {
    position: relative; width: 100%; max-width: 464px;
    display: flex; flex-direction: column; gap: 12px;
    padding: 24px; border-radius: 24px; background: var(--bg-block);
}
.tmodal__head { padding: 16px; }
.tmodal__title {
    color: var(--ink-2); font-family: var(--display); font-weight: 700;
    font-size: 32px; line-height: .81; letter-spacing: -.03em;
}
.tmodal__list { display: flex; flex-direction: column; padding: 0 16px 16px; }
/* строка команды: 66 в высоту, поля 8 сверху и снизу */
.tmodal__row {
    display: flex; align-items: center; gap: 8px;
    min-height: 66px; padding: 8px 0;
    color: var(--ink-2); font: 500 16px/20px var(--font);
    text-decoration: none;
}
.tmodal__row + .tmodal__row { border-top: 1px solid var(--surface); }
.tmodal__row:hover { color: #fff; }
.tmodal__name { flex: 1; min-width: 0; }
.tmodal__seats { flex: none; color: var(--muted); font: 400 14px/18px var(--font); }
/* венки достижений команды — как в рейтинге; по макету блок 100 на 50 */
.tmodal__wreaths { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 4px; width: 100px; }
.tmodal__wreath { max-height: 50px; width: auto; }
.tmodal__empty { padding: 8px 0 16px; color: var(--muted); font: 400 15px/20px var(--font); }
.tmodal__close {
    position: absolute; top: 40px; right: 16px;
    width: 48px; height: 48px;
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer; color: #fff;
    background: none; border: 1px solid var(--line); border-radius: 12px;
}
.tmodal__close:hover { background: rgba(255, 255, 255, .06); }
@media (max-width: 768px) {
    .tmodal__panel { padding: 24px 12px; }
    .tmodal__box { padding: 16px; }
    .tmodal__head, .tmodal__list { padding-left: 0; padding-right: 0; }
    .tmodal__title { font-size: 28px; }
    .tmodal__close { top: 28px; right: 12px; }
}

/* ===== Резерв мест (Figma «Запись в резерв», «Попадание в резерв», «Отмена резерва») ===== */
.rsmodal { position: fixed; inset: 0; z-index: 380; }
.rsmodal[hidden] { display: none; }
.rsmodal__backdrop { position: absolute; inset: 0; background: #11132b; overflow: hidden; backdrop-filter: blur(12px); }
.rsmodal__panel {
    position: absolute; inset: 0; overflow-y: auto;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px;
}
.rsmodal__form,
.rsmodal__done {
    position: relative; width: 100%; max-width: 500px;
    display: flex; flex-direction: column; gap: 16px;
    padding: 40px 32px;
    border-radius: 16px; background: var(--bg-block);
}
.rsmodal__form[hidden],
.rsmodal__done[hidden],
.rsmodal__confirm[hidden] { display: none; }
.rsmodal__title {
    margin: 0; text-align: center; color: #fff;
    font: 700 44px/1.05 var(--display);
}
.rsmodal__lead { margin: 0; text-align: center; color: var(--ink-2); font: 400 15px/20px var(--font); }
.rsmodal__game { margin: 0; text-align: center; color: var(--muted); font: 400 15px/20px var(--font); }
.rsmodal__card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px; border-radius: 20px;
    background: rgba(37, 42, 78, .4);
}
.rsmodal__card--pay { background: #252A4E; }
.rsmodal__note { display: flex; gap: 8px; margin: 0; color: var(--muted); font: 400 14px/18px var(--font); }
.rsmodal__hint { margin: 0; color: var(--ink-2); font: 400 14px/18px var(--font); }
.rsmodal__card[hidden] { display: none; }
.rsmodal__note .icon { flex: none; }
.rsmodal__submit { width: 100%; justify-content: center; }
.rsmodal__close {
    position: absolute; top: 16px; right: -44px;
    width: 32px; height: 32px;
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    padding: 0; background: none; border: 0; cursor: pointer; color: #fff;
}
/* карточка резерва: «Площадка» → название → строки с данными */
.rsmodal__card--info { gap: 16px; }
.rsmodal__cardlabel { color: var(--muted); font: 400 13px/16px var(--font); }
.rsmodal__venue { margin-top: -10px; color: #fff; font: 700 24px/1.1 var(--display); }
.rsline { display: flex; gap: 10px; align-items: flex-start; }
.rsline[hidden] { display: none; }
.rsline .icon { flex: none; color: var(--ink-2); }
.rsline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rsline__body b { color: #fff; font: 500 15px/19px var(--font); word-break: break-word; }
.rsline__body span { color: var(--muted); font: 400 12px/15px var(--font); }
.rsmodal__actions { display: flex; gap: 12px; justify-content: center; }
.rsmodal__actions .btn { flex: 0 1 auto; }
/* подтверждение отмены — компактное окно по центру экрана */
.rsmodal__confirm {
    position: relative; width: 100%; max-width: 340px;
    margin: auto 0;
    display: flex; flex-direction: column; gap: 16px;
    padding: 28px 20px; border-radius: 16px; background: var(--bg-block);
}
.rsmodal__confirm .rsmodal__title { font-size: 32px; }
/* две кнопки в ряд: у диалога узкая колонка, поэтому поля кнопок компактнее */
.rsmodal__confirm .btn { padding: 10px 12px; font-size: 15px; }
/* конфетти вокруг карточки: тот же Figma-экспорт, что на страницах. Лежит слоем
   ниже карточки (у неё z-index выше), поэтому ленты не наезжают на текст —
   видно только то, что выходит за края карточки, как в макете */
.rsmodal__confetti {
    position: absolute; left: 0; right: 0; top: 50%;
    height: 462px; margin-top: -231px;
    background: url('/img/confetti-about.svg') no-repeat center center;
    background-size: 1377px 462px;
    pointer-events: none; z-index: 0;
    display: none;
}
.rsmodal.is-done .rsmodal__confetti { display: block; }
.rsmodal__form, .rsmodal__done, .rsmodal__confirm { z-index: 1; }
@media (max-width: 768px) {
    /* на мобильном карточка занимает почти всю ширину — лентам негде показаться */
    .rsmodal__confetti { display: none !important; }
}
@media (max-width: 768px) {
    .rsmodal__panel { padding: 24px 12px; }
    .rsmodal__title { font-size: 28px; }
    .rsmodal__form,
    .rsmodal__done { padding: 24px 16px; }
    .rsmodal__card { padding: 16px; }
    .rsmodal__close { top: -8px; right: 4px; }
    .rsmodal__actions { flex-direction: column; }
    .rsmodal__actions .btn { justify-content: center; }
}

/* ===== Обратный звонок / «задать вопрос» (Figma «Форма ОЗ») ===== */
.cbmodal { position: fixed; inset: 0; z-index: 380; }
.cbmodal[hidden] { display: none; }
/* плотное затемнение: при полупрозрачном фоне сквозь модалку просвечивали
   светлые элементы страницы (кнопки шапки) */
.cbmodal__backdrop { position: absolute; inset: 0; background: #11132b; overflow: hidden; backdrop-filter: blur(12px); }
/* лучи сверху, как в обновлённом фоне модалок: тот же рисунок, что в шапке, медленно дышит */
.checkout__backdrop::before,
.cbmodal__backdrop::before,
.rsmodal__backdrop::before,
.tmodal__backdrop::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -160px;
    width: 1600px;
    height: 900px;
    margin-left: -800px;
    background: url('/img/hero-glow.svg') center top / 100% 100% no-repeat;
    animation: modal-rays 18s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes modal-rays {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
    to { transform: translate3d(36px, 18px, 0) scale(1.06); opacity: 1; }
}
.cb-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35));
}
.cb-fab svg { display: block; width: 64px; height: 64px; }
.cbmodal__panel {
    position: absolute; inset: 0; overflow-y: auto;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px;
}
.cbmodal__form,
.cbmodal__done {
    position: relative; width: 100%; max-width: 500px;
    display: flex; flex-direction: column; gap: 16px;
    padding: 40px 32px; border-radius: 12px; background: var(--bg-block);
}
.cbmodal__form[hidden],
.cbmodal__done[hidden] { display: none; }
.cbmodal__done { text-align: center; align-items: center; max-width: 426px; margin: auto 0; }
.cbmodal__done .btn { min-width: 120px; justify-content: center; }
.cbmodal__title {
    margin: 0; text-align: center; color: #fff;
    font: 700 44px/1.05 var(--display);
}
.cbmodal__card {
    display: flex; flex-direction: column; gap: 16px;
    padding: 24px; border-radius: 12px;
    background: rgba(37, 42, 78, .4);
}
/* блок с главным действием — плотнее остальных, как в оформлении мест */
.cbmodal__card--pay { background: #252A4E; }
.cbmodal__label { color: #fff; font: 500 16px/20px var(--font); }
.cbmodal__submit { width: 100%; justify-content: center; margin-top: 4px; }
/* второстепенное действие в модалке (забыли пароль / назад ко входу) */
.cbmodal__link { width: 100%; justify-content: center; border-color: transparent; color: var(--ink-2); }
.cbmodal__link:hover { color: #fff; }
.cbmodal__note { margin: 0; color: var(--ink-2); font: 400 14px/19px var(--font); }
.cbmodal__close {
    position: absolute; top: 16px; right: -44px;
    width: 32px; height: 32px;
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    padding: 0; background: none; border: 0; cursor: pointer; color: #fff;
}
/* согласия: чекбокс + текст со ссылкой на документ. Высоту сбрасываем — базовый
   .check рассчитан на строку фильтра (56px), здесь строки компактные */
.check--doc { height: auto; align-items: flex-start; gap: 10px; color: var(--ink-2); font: 400 14px/18px var(--font); }
.check--doc i { flex: none; margin-top: 1px; }
.check--doc a { color: #fff; }
.cbmodal .check--doc a { text-decoration: underline; text-underline-offset: 2px; }
.check--doc b { color: var(--red); font-weight: 400; }
@media (max-width: 768px) {
    .cbmodal__panel { padding: 24px 12px; }
    .cbmodal__title { font-size: 32px; }
    .cbmodal__form,
    .cbmodal__done { padding: 24px 16px; }
    .cbmodal__card { padding: 16px; }
    .cbmodal__close { top: -8px; right: 4px; }
}

/* ===== Модалка видео (Figma «Modal-Video») ===== */
.vmodal { position: fixed; inset: 0; z-index: 380; }
.vmodal[hidden] { display: none; }
.vmodal__backdrop { position: absolute; inset: 0; background: #0b0b12; }
.vmodal__panel {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
}
.vmodal__close {
    position: absolute; top: 24px; right: 24px;
    width: 32px; height: 32px;
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
    background: var(--bg-block-2); border: 1px solid var(--surface);
    border-radius: 8px; color: #fff;
}
.vmodal__close:hover { background: var(--surface); }
/* область ролика — 16:9 по центру, как в макете */
.vmodal__stage {
    position: relative;
    width: min(70vw, 1350px);
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 80px);
    background: #000;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.vmodal__video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.vmodal__play { position: absolute; }
.vmodal__stage.is-playing .vmodal__play { display: none; }
@media (max-width: 768px) {
    .vmodal__panel { padding: 16px; }
    .vmodal__stage { width: 100%; }
    .vmodal__close { top: 12px; right: 12px; }
}

/* уведомление о cookie — внизу экрана, поверх контента, до нажатия «ОК» */
.cookie {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 350;
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; border-radius: 16px;
    background: var(--bg-block-2); border: 1px solid var(--surface);
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.cookie[hidden] { display: none; }
.cookie__text { margin: 0; color: var(--ink-2); font: 400 14px/19px var(--font); }
.cookie__text a { color: #fff; }
.cookie__ok { flex: none; }
@media (max-width: 768px) {
    .cookie { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
    .cookie__ok { width: 100%; justify-content: center; }
}

/* короткое уведомление внизу экрана: отмена резерва, копирование ссылки
   (Figma «Тост об отмене резерва») */
.toast {
    position: fixed; right: 24px; top: 24px; transform: translateY(-12px);
    z-index: 400; max-width: calc(100vw - 32px);
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 12px;
    background: #fff; color: var(--bg-block);
    font: 500 15px/19px var(--font);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 768px) {
    .toast { right: 12px; left: 12px; top: 12px; }
}
.toast__ic { flex: none; color: var(--blue); }
.toast__txt { flex: 1; }
.toast__x {
    flex: none; width: 24px; height: 24px;
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    padding: 0; background: none; border: 0; cursor: pointer; color: var(--muted);
}
.toast__x:hover { color: var(--bg-block); }

/* «Другие игры» на странице игры: видно первые 6, остальные раскрывает «Ещё» */
[data-more-limit] .card:nth-child(n+7) { display: none; }
[data-more-limit].is-expanded .card:nth-child(n+7) { display: flex; }

/* ===== Мобильное меню (Figma «360 - Menu») — полноэкранная шторка из бургера ===== */
/* выше уведомления о cookie (350) — иначе оно перекрывает низ меню */
.menu-sheet { position: fixed; inset: 0; z-index: 360; }
.menu-sheet[hidden] { display: none; }
.menu-sheet__backdrop { position: absolute; inset: 0; background: rgba(3, 4, 12, .6); }
.menu-panel {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    background: var(--bg-block-2);
    overflow-y: auto;
}
.menu-panel__top { display: flex; align-items: center; gap: 10px; }
.menu-panel__spacer { flex: 1; }
.menu-panel__ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    -webkit-appearance: none; appearance: none;
    padding: 0; background: none; border: 0; cursor: pointer;
    color: var(--ink-2); text-decoration: none;
}
.menu-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; }
.menu-nav__item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 16px;
    color: #fff; font: 500 16px/20px var(--font); text-decoration: none;
}
.menu-nav__item .icon { color: var(--ink-2); }
/* «Выйти» — кнопка формы в том же ряду, что и ссылки меню */
button.menu-nav__item {
    width: 100%; -webkit-appearance: none; appearance: none;
    background: none; border: 0; cursor: pointer; text-align: left;
}
.menu-nav__item.is-active { background: var(--surface); }
.menu-panel__foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.menu-hours { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font: 400 14px/18px var(--font); }
.menu-hours .lbl { color: var(--ink-2); margin-right: 10px; }
.menu-call { width: 100%; justify-content: center; }
.menu-social { display: flex; align-items: center; justify-content: center; gap: 16px; }
.menu-social a { display: block; flex: none; line-height: 0; }
@media (min-width: 769px) { .menu-sheet { display: none; } }