@import url("/assets/css/fonts.css");

/* ============================================================
   Мафия-система — дизайн-система.

   Red Luxe: тёмная база, красный акцент дозированно.
   Токены и правила — /var/www/html/AGENTS.md

   Композиция собрана из трёх проработанных направлений:
   полноэкранный фотогерой, карточка записи с индикатором мест
   и крупные цифры даты как главный объект карточки игры.
   ============================================================ */

:root {
	--bg: #050608;
	--bg-deep: #0A0B0E;
	--surface: #14161B;
	--surface-2: #1A1D23;
	--surface-3: #23262E;

	--red: #C61F32;
	--red-dark: #B3142A;
	--red-bright: #D62839;
	--wine: #7E1322;

	--text: #F5F7FA;
	--text-2: #B8BEC8;
	--text-3: #8C939F;

	--line: rgba(255, 255, 255, .08);
	--line-2: rgba(255, 255, 255, .14);
	--gold: #C9A35F;

	/* Одна система скруглений на весь сайт */
	--r-card: 14px;
	--r-ctl: 11px;
	--r-pill: 999px;

	--shell: 1280px;
	--pad: clamp(16px, 4vw, 40px);

	--ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Сайт ведёт себя как приложение: вбок не уезжает, двойной тап не зумит
	   (manipulation убирает и задержку 300мс на тапе). Жест «щипок» гасится
	   в app.js — метатегом iOS это делать перестал. */
	overflow-x: hidden;
	touch-action: manipulation;
	overscroll-behavior-x: none;
}

/* Единицы вьюпорта: ТОЛЬКО svh, никаких dvh. В Safari на iPhone dvh
   пересчитывается на каждом кадре, пока схлопывается адресная строка, —
   первые пол-секунды скролла страница переверстывается целиком и заметно
   лагает (жалоба владельца 31.07.2026, видео с iPhone). svh = «маленький»
   вьюпорт, он постоянный, переверстки нет. */
body {
	margin: 0;
	min-height: 100svh;
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.55 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	/* Подвал прижат к низу экрана: на коротких страницах (пустое расписание,
	   вход, свежий клуб без игр) он иначе висел посреди пустоты. */
	display: flex;
	flex-direction: column;
}

#main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }

/* Ссылка без своего класса — обычная ссылка в тексте. Без этого браузер красит
   её в синий по умолчанию, и на тёмном фоне она читается как чужеродная.
   Правило стоит РАНЬШЕ частных (.flash a, .doc a, .btn), чтобы те его перебивали. */
main a:not([class]) {
	color: var(--red-bright);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(214, 40, 57, .45);
}

main a:not([class]):hover { text-decoration-color: var(--red-bright); }

::selection { background: rgba(198, 31, 50, .5); color: #fff; }

:focus-visible {
	outline: 2px solid var(--red-bright);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------- каркас */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.section { padding-block: clamp(48px, 8vw, 96px); }
.section--tight { padding-block: clamp(32px, 5vw, 56px); }

.rule {
	height: 1px;
	background: var(--line);
	border: 0;
	margin: 0;
}

/* ---------------------------------------------- типографика */

h1, h2, h3, .display {
	font-family: 'Unbounded', 'Manrope', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.06;
	margin: 0;
	text-wrap: balance;
}

.h-hero { font-size: clamp(38px, 8.5vw, 88px); }
.h-sect { font-size: clamp(26px, 4.2vw, 44px); }
.h-card { font-size: clamp(19px, 2.4vw, 25px); line-height: 1.15; }

.lede {
	margin: 0;
	color: var(--text-2);
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 1.55;
	max-width: 46ch;
}

.muted { color: var(--text-3); }
.small { font-size: 13.5px; line-height: 1.5; }

.label {
	font: 600 12.5px/1 'Manrope', sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-3);
}

.num {
	font-family: 'Unbounded', sans-serif;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
}

/* ---------------------------------------------- шапка */

.hdr {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(5, 6, 8, .82);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}

/* На телефоне блюр под липкой шапкой не оправдан: страница тёмная, разницы
   почти не видно, а размывать полосу поверх фотогероя приходится каждый кадр
   скролла — это второй источник рывков в Safari. Ставим плотный фон. */
@media (max-width: 900px) {
	.hdr {
		background: rgba(5, 6, 8, .96);
		backdrop-filter: none;
	}
}

.hdr-in {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 64px;
}

.brand {
	display: flex;
	align-items: baseline;
	gap: 9px;
	text-decoration: none;
	color: var(--text);
	min-width: 0;
}

.brand b {
	font-family: 'Unbounded', sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.brand span {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-3);
	white-space: nowrap;
}

.hdr-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
}

.hdr-nav a {
	color: var(--text-2);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 500;
	padding: 9px 12px;
	border-radius: var(--r-ctl);
	transition: color .18s, background .18s;
}

.hdr-nav a:hover { color: var(--text); background: #1A1D23; }

@media (max-width: 720px) {
	.brand span { display: none; }
	.hdr-nav .hide-sm { display: none; }
}

/* ---------------------------------------------- герой */

.hero {
	position: relative;
	/* Было min(88svh, 760px): на телефоне первый экран занимала одна фотография,
	   а полоса с датой и ценой уходила под сгиб — гость приходил по ссылке из чата
	   именно за ней (03.08.2026). */
	min-height: min(62svh, 620px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Кадр смещён вправо: слева остаётся чистая тёмная зона под заголовок */
	object-position: 72% 45%;
}

/* Скрим: без него белый текст на фото не читается ни при каком кадре */
.hero-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Кадр осветлён на 12% (31.07.2026), поэтому затемнение перераспределено:
	   верх и правая половина светлее — там лица и красный свет; низ и левая
	   колонка под заголовком, наоборот, плотнее, иначе белый текст плывёт. */
	background:
		linear-gradient(180deg, rgba(5, 6, 8, .52) 0%, rgba(5, 6, 8, .06) 34%, rgba(5, 6, 8, .8) 78%, var(--bg) 100%),
		linear-gradient(90deg, rgba(5, 6, 8, .72) 0%, rgba(5, 6, 8, .3) 40%, rgba(5, 6, 8, 0) 70%);
}

.hero-body {
	width: 100%;
	padding-block: clamp(36px, 6vw, 72px);
}

.hero-body .lede { margin-top: 18px; }

.hero-sub {
	margin: 10px 0 0;
	font-family: 'Unbounded', sans-serif;
	font-weight: 400;
	font-size: clamp(17px, 3vw, 28px);
	color: var(--text-2);
	letter-spacing: -.01em;
	line-height: 1.15;
}

.hero-cta { margin-top: clamp(22px, 3vw, 30px); }

/* Полоса ближайшей игры под героем */
/* Полоса ближайшей игры кликается целиком, поэтому это ссылка. */
.nextbar {
	display: block;
	border-block: 1px solid var(--line);
	background: var(--bg-deep);
	color: var(--text);
	text-decoration: none;
	transition: background .2s;
}

.nextbar:hover { background: var(--surface); }

.nextbar-in {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-block: 15px;
}

.nextbar-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15.5px;
	color: var(--text-2);
}

.nextbar-line b { color: var(--text); font-weight: 700; }
.nextbar-line i { font-style: normal; color: var(--text-3); }
.nextbar-line .is-free { color: var(--text-2); }
.nextbar-line .is-full { color: var(--text-3); }
.nextbar > .shell > svg:last-child { color: var(--text-3); flex: none; }

.nextbar b { font-weight: 700; }

.nextbar .spacer { flex: 1 1 auto; }

/* ---------------------------------------------- кнопки */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--r-ctl);
	font: 700 16px/1 'Manrope', sans-serif;
	color: #fff;
	background: var(--red);
	text-decoration: none;
	cursor: pointer;
	transition: background .18s, transform .12s var(--ease), box-shadow .18s;
	max-width: 100%;
}

.btn:hover { background: var(--red-bright); }
.btn:active { transform: translateY(1px) scale(.995); }

.btn svg { width: 18px; height: 18px; flex: none; }

/* Вторичные кнопки только на СПЛОШНОМ фоне: полупрозрачные на телефоне
   читаются как выключенные. Проверено на прошлых правках. */
.btn--ghost {
	background: linear-gradient(180deg, #31353F 0%, #23262D 100%);
	border-color: rgba(255, 255, 255, .13);
	color: #fff;
	-webkit-text-fill-color: #fff;
}

.btn--ghost:hover { background: linear-gradient(180deg, #3A3F4A 0%, #2A2E36 100%); }

.btn--quiet {
	background: #1E2128;
	border-color: rgba(255, 255, 255, .12);
	color: var(--text-2);
	-webkit-text-fill-color: var(--text-2);
}

.btn--quiet:hover { background: #262A32; color: #fff; -webkit-text-fill-color: #fff; }

.btn--sm { min-height: 42px; padding: 10px 16px; font-size: 14.5px; }
.btn--wide { width: 100%; }

.btn[disabled], .btn.is-off {
	opacity: .4;
	pointer-events: none;
}

/* Отступы между кнопками: без этого они слипаются */
.btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.btns--tight { gap: 8px; }

/* ---------------------------------------------- метаданные */

.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--text-2);
	font-size: 14.5px;
}

.meta li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.meta svg,
.ic {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--text-3);
}

.meta b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------- индикатор мест */

.seats {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 9px;
	padding: 0;
	list-style: none;
}

.seats li {
	width: 15px;
	height: 15px;
	border-radius: 4px;
	background: var(--surface-3);
	border: 1px solid var(--line);
}

.seats li.is-taken {
	background: var(--red);
	border-color: var(--red-bright);
}

.seats-note { font-size: 13.5px; color: var(--text-2); }
.seats-note b { color: var(--text); }

/* ---------------------------------------------- карточки игр */

.games {
	display: grid;
	gap: clamp(14px, 2vw, 22px);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.games { grid-template-columns: repeat(2, 1fr); }
	.games > .game--lead { grid-column: 1 / -1; }
}

/* Рамки у карточки нет: белая линия 1px была не видна на тёмном теле карточки,
   но вдоль фотографии читалась как дешёвая белая окантовка (замечание владельца
   31.07.2026). Карточку отделяет от фона её собственный тон --surface. */
.game {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	background: var(--surface);
	border-radius: var(--r-card);
	overflow: hidden;
	transition: transform .2s var(--ease);
}

.game:hover {
	transform: translateY(-2px);
}

.game-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-deep);
}

.game-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}

.game:hover .game-media img { transform: scale(1.03); }

.game-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 6, 8, .1) 40%, rgba(20, 22, 27, .96) 100%);
}

.game-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.game-body .h-card,
.game-body .game-time,
.game-body .meta { margin: 0; }

.game-time span { color: var(--text-2); font-weight: 500; }

/* Кнопка на карточке — вид, а не элемент: клик забирает растянутая ссылка,
   поэтому ховер поднимаем с самой карточки. */
.game .btn { pointer-events: none; }
.game:hover .btn { background: var(--red-bright); }

/* Вся карточка — одна ссылка: растянутый слой поверх неё. Кнопка внутри
   не ссылка, а её вид, поэтому вложенных ссылок не возникает. */
.game-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.game-link:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }

.vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Свободные места: цифра крупно, под ней шкала заполнения. */
.seatsbar { display: grid; gap: 8px; }

.seatsbar-num {
	margin: 0;
	font-size: 15.5px;
	color: var(--text-2);
}

.seatsbar-num b {
	color: var(--text);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.seatsbar-track {
	height: 6px;
	border-radius: 999px;
	background: var(--surface-3);
	overflow: hidden;
}

.seatsbar-track i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--red-dark), var(--red-bright));
}

.game-time {
	font-family: 'Unbounded', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -.02em;
}

.game-top {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

.game-top .h-card { flex: 1 1 auto; min-width: 0; }

/* Ведущая карточка на десктопе — фото слева, текст справа */
@media (min-width: 900px) {
	.game--lead { grid-template-columns: 1.15fr 1fr; }
	.game--lead .game-media { aspect-ratio: auto; height: 100%; min-height: 320px; }
	.game--lead .game-body { padding: clamp(20px, 3vw, 32px); justify-content: center; gap: 18px; }
	.game--lead .game-date { display: none; }
	.game--lead .game-time { font-size: 26px; }
}

/* ---------------------------------------------- значки */

.tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 30px;
	padding: 0 11px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, .10);
	background: #22252D;
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .005em;
	white-space: nowrap;
}

.tag svg { width: 14px; height: 14px; flex: none; color: var(--text-3); }

/* Число крупнее слова: иерархия внутри чипа, а не второй красный на экране.
   Красный на странице один — главная кнопка. */
.tag b {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.tag--free { border-color: rgba(214, 40, 57, .5); }
.tag--free svg { color: var(--red-bright); }
.tag--full { background: #1A1D23; color: var(--text-3); }
.tag--done { background: #2A2E36; }
.tag--done svg { color: #86D39B; }
.tag--live { background: var(--red); border-color: var(--red-bright); color: #fff; }
.tag--live svg { color: #fff; }

/* ---------------------------------------------- панели и формы */

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: clamp(18px, 3vw, 28px);
}

/* Второй смысловой блок внутри карточки — через линию, а не отдельной коробкой. */
.panel-row {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.panel--flush { padding: 0; overflow: hidden; }

.stack { display: grid; gap: 18px; }
.stack--sm { gap: 12px; }

.field { display: grid; gap: 8px; }

.field > label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-2);
}

.input {
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border-radius: var(--r-ctl);
	border: 1px solid var(--line-2);
	background: var(--bg-deep);
	color: var(--text);
	font: 400 16px/1.4 'Manrope', sans-serif; /* меньше 16px — iOS зумит при фокусе */
	appearance: none;
}

.input::placeholder { color: var(--text-3); }

/* Телефон: «+7» вшит в поле, гость набирает только 10 цифр. Рамку и фокус
   держит обёртка, само поле внутри — без своих границ. */
.input--phone {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 0;
}

.input--phone:focus-within {
	border-color: rgba(214, 40, 57, .6);
	box-shadow: 0 0 0 3px rgba(198, 31, 50, .16);
}

.input-prefix {
	flex: none;
	color: var(--text-2);
	font-weight: 600;
}

.input--phone input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: none;
	color: var(--text);
	font: 400 16px/1.4 'Manrope', sans-serif; /* меньше 16px — iOS зумит при фокусе */
	appearance: none;
}

.input--phone input::placeholder { color: var(--text-3); }

.input:focus {
	outline: none;
	border-color: rgba(214, 40, 57, .6);
	box-shadow: 0 0 0 3px rgba(198, 31, 50, .16);
}

textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }

.hint { margin: 0; font-size: 13px; color: var(--text-3); line-height: 1.45; }
/* Ссылка в подписи под полем: иначе браузер красит её в синий по умолчанию. */
.hint a { color: var(--red-bright); }

.row2 {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.row2 { grid-template-columns: 1fr 1fr; }
}

/* Сегменты: выбор гостей и уверенности */
.seg {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.seg input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.seg label {
	flex: 1 1 auto;
	min-width: 64px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border-radius: var(--r-ctl);
	border: 1px solid var(--line-2);
	background: var(--bg-deep);
	color: var(--text-2);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .16s, color .16s, border-color .16s;
}

.seg label:hover { background: var(--surface-2); color: var(--text); }

.seg input:checked + label {
	background: var(--red);
	border-color: var(--red-bright);
	color: #fff;
}

.seg input:focus-visible + label {
	outline: 2px solid var(--red-bright);
	outline-offset: 2px;
}

/* Согласия */
.check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 48px;
	padding: 13px 15px;
	border-radius: var(--r-ctl);
	border: 1px solid var(--line);
	background: var(--bg-deep);
	cursor: pointer;
	transition: border-color .16s;
}

.check:hover { border-color: var(--line-2); }

.check input {
	appearance: none;
	width: 22px;
	height: 22px;
	flex: none;
	margin: 0;
	border-radius: 6px;
	border: 1.5px solid var(--line-2);
	background: var(--surface-2);
	cursor: pointer;
	position: relative;
	transition: background .16s, border-color .16s;
}

.check input:checked {
	background: var(--red);
	border-color: var(--red-bright);
}

.check input:checked::after {
	content: "";
	position: absolute;
	left: 7.5px;
	top: 3.5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.check span { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.check a { color: var(--red-bright); }

/* ---------------------------------------------- сообщения и пустые состояния */

/* Сообщение над содержимым: подтверждение, подсказка, предупреждение.
   Раньше всё подряд заливалось тревожным красным, а ссылка внутри оставалась
   браузерно-синей и на красном не читалась. Теперь спокойная карточка с
   акцентной полосой слева, а цветом различаются только виды. */
.flash {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 16px 13px 14px;
	margin: 0 0 20px;
	border-radius: var(--r-card);
	border: 1px solid var(--line-2);
	border-left: 3px solid var(--red);
	background: var(--surface);
	color: var(--text-2);
	font-size: 14.5px;
	line-height: 1.5;
}

.flash svg {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
	color: var(--red-bright);
}

.flash b { color: var(--text); font-weight: 600; }

/* Ссылка внутри сообщения: тем же цветом, что и текст, но с подчёркиванием
   в акцент — на тёмной карточке это читается лучше красных букв. */
.flash a {
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(214, 40, 57, .65);
}

.flash a:hover { text-decoration-color: var(--red-bright); }

/* Предупреждение: не ошибка, но требует действия организатора */
.flash--warn { border-left-color: var(--gold); }
.flash--warn svg { color: var(--gold); }
.flash--warn a { text-decoration-color: rgba(201, 163, 95, .7); }
.flash--warn a:hover { text-decoration-color: var(--gold); }

/* Ссылки в остальных служебных текстах. ТОЛЬКО без своего класса: иначе
   правило перекрашивает и ссылки-кнопки (.btn внутри .empty), у которых
   специфичность ниже, — получалась красная надпись на красной кнопке. */
.empty a:not([class]),
.lede a:not([class]),
.linkbar a:not([class]),
.seatsbar a:not([class]) { color: var(--red-bright); }

.empty {
	padding: clamp(32px, 6vw, 56px) 20px;
	text-align: center;
	border: 1px dashed var(--line-2);
	border-radius: var(--r-card);
	color: var(--text-3);
}

.empty b { display: block; color: var(--text-2); font-size: 17px; margin-bottom: 6px; }

/* ---------------------------------------------- продающий блок */

.sell {
	display: grid;
	gap: clamp(16px, 3vw, 28px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.sell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); }
}

.sell-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.sell-list li {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 14px;
	padding: 18px 0;
	border-top: 1px solid var(--line);
	align-items: start;
}

.sell-list li:last-child { border-bottom: 1px solid var(--line); }

.sell-list .n {
	font-family: 'Unbounded', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--red-bright);
	padding-top: 2px;
}

.sell-list b { display: block; font-size: 16.5px; margin-bottom: 4px; }
.sell-list span { color: var(--text-2); font-size: 14.5px; line-height: 1.5; }

/* ---------------------------------------------- подвал */

.ftr {
	border-top: 1px solid var(--line);
	background: var(--bg-deep);
	padding-block: clamp(28px, 5vw, 48px);
	color: var(--text-3);
	font-size: 13.5px;
	line-height: 1.6;
}

.ftr a { color: var(--text-2); }
.ftr-in { display: grid; gap: 14px; }

/* Правая колонка подвала: подпись сервиса и вход организатора — столбиком,
   чтобы на телефоне не слипались в одну строку. */
.ftr-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ftr-powered { color: var(--text-3); }

@media (min-width: 760px) {
	.ftr-in { grid-template-columns: 1fr auto; align-items: end; }
	.ftr-links { align-items: flex-end; text-align: right; }
}

/* ---------------------------------------------- назад */

.back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 14px;
	color: var(--text-3);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	transition: color .16s;
}

.back:hover { color: var(--text); }
.back svg { width: 17px; height: 17px; }

/* ---------------------------------------------- анимации

   Каждая мотивирована:
   .reveal   — порядок чтения: блоки проявляются по мере прокрутки
   .btn      — тактильная обратная связь на нажатие
   .game     — подъём карточки сообщает, что она кликабельна
   Всё гасится при prefers-reduced-motion.
   ------------------------------------------------------------ */

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
	transition-delay: var(--d, 0ms);
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.reveal { opacity: 1; transform: none; }
	.game:hover { transform: none; }
	.game:hover .game-media img { transform: none; }
}

/* Пока JS не отработал, контент виден: без скрипта страница остаётся читаемой */
.no-js .reveal { opacity: 1; transform: none; }

/* Герой карточки игры ниже главного: он информирует, а не продаёт */
.hero--game {
	min-height: min(52svh, 420px);
	align-items: flex-end;
}

.hero--game .hero-body { padding-block: clamp(24px, 4vw, 40px); }
.hero--game .back { margin-bottom: 12px; }

/* На странице игры порядок на мобильном задаём ЯВНО, а не column-reverse.
   Реверс переставлял всё подряд: панель «Места за столом» и заметка организатора
   уезжали ПОД форму, и гость заполнял её вслепую — не видя ни занятости, ни
   предупреждений от клуба (03.08.2026). */
@media (max-width: 899px) {
	.hero--game + .nextbar + .section .sell {
		display: flex;
		flex-direction: column;
		/* Без этого панели держат align-items: start из грид-раскладки: в колонке
		   это уже поперечная ось, и карточки схлопываются по ширине текста
		   (31.07.2026, «места за столом» висели узким огрызком слева). */
		align-items: stretch;
	}
	.hero--game + .nextbar + .section .sell > .sell-top { order: 0; }
	.hero--game + .nextbar + .section .sell > form,
	.hero--game + .nextbar + .section .sell > .panel { order: 1; }
}

/* ============================================================
   Панель организатора.

   Здесь другая задача: человек ведёт игру и одной рукой отмечает
   оплаты. Поэтому плотность выше, воздуха меньше, цели нажатия
   крупные. Токены те же, ритм другой.
   ============================================================ */

.adm { padding-block: clamp(20px, 3vw, 32px); }

.adm-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.adm-head > div:first-child { flex: 1 1 260px; min-width: 0; }
.adm-head h1 { font-size: clamp(23px, 3.4vw, 34px); }
.adm-head .lede { margin-top: 8px; max-width: none; }

/* Плитки чисел */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.tile {
	padding: 14px 16px;
	border-radius: var(--r-ctl);
	background: var(--surface);
	border: 1px solid var(--line);
	min-width: 0;
}

.tile b {
	display: block;
	font-family: 'Unbounded', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.6vw, 27px);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	word-break: break-word;
}

.tile span {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--text-3);
	line-height: 1.35;
}

.tile--hot b { color: #F5A9B1; }
.tile--hot { border-color: rgba(214, 40, 57, .32); background: rgba(198, 31, 50, .1); }

/* Список записанных */
.roster { margin: 0; padding: 0; list-style: none; }

.roster > li {
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
}

.roster > li:last-child { border-bottom: 0; }

.rline {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.rn {
	width: 30px;
	height: 30px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: var(--surface-3);
	border: 1px solid var(--line);
	font-family: 'Unbounded', sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: var(--text-2);
	font-variant-numeric: tabular-nums;
}

.rn svg { width: 15px; height: 15px; }

.rn--done {
	background: rgba(198, 31, 50, .2);
	border-color: rgba(214, 40, 57, .42);
	color: #F5A9B1;
}

.rname {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
}

.rname small {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--text-3);
	word-break: break-word;
	line-height: 1.4;
}

.rname small a { color: var(--red-bright); }

.roster .btns { margin-top: 10px; }
.roster .btns > form { display: flex; flex: 1 1 auto; }
.roster .btns > form.narrow { flex: 0 0 auto; }
.roster .btns .btn { width: 100%; }

/* Список игр в админке */
.adm-list { display: grid; gap: 10px; }

.adm-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 17px;
	border-radius: var(--r-ctl);
	background: var(--surface);
	border: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
	transition: border-color .18s, transform .18s var(--ease);
}

.adm-row:hover { border-color: var(--line-2); transform: translateY(-1px); }

.adm-row .d {
	flex: none;
	width: 52px;
	text-align: center;
}

.adm-row .d b {
	display: block;
	font-family: 'Unbounded', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.adm-row .d span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 3px; }

.adm-row .t { flex: 1 1 auto; min-width: 0; }
.adm-row .t b { display: block; font-size: 15.5px; font-weight: 600; }
.adm-row .t span { display: block; font-size: 13px; color: var(--text-3); margin-top: 3px; }

@media (prefers-reduced-motion: reduce) {
	.adm-row:hover { transform: none; }
}

/* ---------------------------------------------- загрузка фотографий */

.ph-prev {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-ctl);
	overflow: hidden;
	background: var(--bg-deep);
	border: 1px solid var(--line);
}

.ph-prev img { width: 100%; height: 100%; object-fit: cover; }

.ph-prev.is-empty {
	display: grid;
	place-items: center;
	border-style: dashed;
	border-color: var(--line-2);
}

.ph-prev.is-empty span { font-size: 13.5px; color: var(--text-3); }

.ph-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Файловый input прячем, но оставляем доступным с клавиатуры */
.vis-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

label.btn { cursor: pointer; position: relative; }
label.btn:focus-within { outline: 2px solid var(--red-bright); outline-offset: 3px; }

/* Превью не должно занимать пол-экрана на десктопе */
.ph-prev { max-height: 320px; }
.ph-grid .ph-prev { max-height: 180px; }

/* ---------------------------------------------- юридические документы */

.doc { max-width: 820px; }

.doc h2 {
	font-size: clamp(17px, 2.2vw, 21px);
	margin: 28px 0 10px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.doc h2:first-of-type { border-top: 0; padding-top: 0; }

.doc p {
	margin: 0 0 12px;
	color: var(--text-2);
	font-size: 15.5px;
	line-height: 1.62;
}

.doc p b { color: var(--text); font-weight: 600; }

.doc ul {
	margin: 0 0 14px;
	padding-left: 20px;
	color: var(--text-2);
	font-size: 15.5px;
	line-height: 1.62;
}

.doc li { margin-bottom: 7px; }
.doc li::marker { color: var(--text-3); }
.doc a { color: var(--red-bright); }
.nowrap { white-space: nowrap; word-break: break-all; }

/* Текст чипа отдельным узлом: так между иконкой, числом и словом ровно один зазор */
.tag > span { display: inline-flex; align-items: baseline; gap: 4px; }

/* ------------------------------------------- добавлено по аудиту 03.08.2026 */

/* Поле с готовым префиксом (адрес клуба): домен виден прямо в поле, а не в подписи */
.prefix-in {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--line-strong, rgba(255,255,255,.14));
	border-radius: 14px;
	background: var(--bg-1, #0a0b0f);
	overflow: hidden;
}
.prefix-in__pre {
	padding: 0 2px 0 14px;
	color: var(--text-3);
	font-size: 14px;
	white-space: nowrap;
}
.prefix-in .input { border: 0; background: transparent; padding-left: 2px; }
@media (max-width: 440px) {
	.prefix-in { flex-direction: column; align-items: stretch; }
	.prefix-in__pre { padding: 10px 14px 0; }
}

/* «Показать пароль» — короткой кнопкой-ссылкой под полем.
   .field это grid, поэтому нужен justify-self, иначе кнопка растягивается
   на всю колонку и выглядит как подпись по центру. */
.reveal-pass {
	justify-self: start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--red-bright);
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(214, 40, 57, .45);
}

.reveal-pass:hover { text-decoration-color: var(--red-bright); }

/* Кнопка-ссылка (выход в подвале и шапке) */
.lnk, .hdr-out button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}
.hdr-out { display: inline; }
.hdr-nav .hdr-out button { color: var(--text-2); text-decoration: none; }

/* Строка с публичной ссылкой клуба + кнопки «скопировать»/«открыть».
   На телефоне ссылка занимает свою строку целиком: делить её пополам с
   кнопками означало перенос посреди слова (…/goro dane). */
.linkbar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px dashed var(--line-2);
	border-radius: var(--r-card);
	background: var(--bg-deep);
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--text-3);
}
.linkbar b { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.linkbar-act { display: flex; gap: 8px; flex-wrap: wrap; }
.linkbar .btn { min-height: 38px; padding: 8px 14px; font-size: 13px; }

@media (min-width: 620px) {
	.linkbar { flex-direction: row; align-items: center; justify-content: space-between; }
	.linkbar > span { min-width: 0; }
}

/* Подтверждение отмены записи — плашка вместо мгновенного действия */
.confirm {
	padding: 16px;
	border: 1px solid var(--red);
	border-radius: 16px;
	margin-bottom: 16px;
}
.confirm p { margin: 0 0 12px; }

/* Строка списка с действием справа (отмена записи, «повторить», «ссылка») */
.adm-row-wrap { display: flex; align-items: center; gap: 8px; }
.adm-row-wrap > .adm-row { flex: 1 1 auto; min-width: 0; }
.adm-row-wrap > .btn { flex: 0 0 auto; white-space: nowrap; }

.empty span { display: block; }

/* Вариант, который уже не влезает в свободные места */
.seg label.is-tight { opacity: .55; }

/* ---------------------------------------------- ширина колонки на десктопе

   .shell тянется до 1280px и центрирует САМ СЕБЯ, но содержимое внутри — узкая
   форма или текст — оставалось прижатым к левому краю, и справа зияла пустота
   (жалоба 03.08.2026). Ограничиваем и центрируем сами колонки. */

/* Админка и кабинет: списки читаются лучше, когда строка не во весь монитор */
.adm { max-width: 1100px; margin-inline: auto; }

/* Страницы с одной формой: настройки, новая игра, «мои записи», заглушки */
.col-narrow { max-width: 780px; }

/* Документы: длина строки под чтение, по центру */
.doc { max-width: 820px; margin-inline: auto; }

/* Продуктовые страницы (регистрация, вход, восстановление): узкая колонка */
.main--center .shell { max-width: 640px; }

/* ---------------------------------------------- мягкие переходы

   Переход между экранами больше не перезагружает страницу: содержимое #main
   подменяется, адрес меняется через History API (см. app.js). Здесь — только
   как это выглядит. */

/* Браузеры с View Transitions делают перекрёстное затухание сами.
   Шапку и подвал держим на месте: мигать должно только содержимое. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .22s;
	animation-timing-function: var(--ease);
}

/* Запасной вариант там, где View Transitions нет (Firefox) */
#main { transition: opacity .18s ease; }
#main.is-swapping { opacity: 0; }

/* Полоса загрузки: видна только если ответ задержался */
.navprogress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	z-index: 100;
	background: var(--red-bright);
	opacity: 0;
	pointer-events: none;
	transition: width 8s cubic-bezier(.1, .8, .2, 1), opacity .2s;
}

.navprogress.is-on {
	width: 92%;
	opacity: 1;
	/* Появляется не мгновенно: на быстром ответе человек её не увидит */
	transition: width 8s cubic-bezier(.1, .8, .2, 1), opacity .2s .25s;
}

@media (prefers-reduced-motion: reduce) {
	#main { transition: none; }
	.navprogress { display: none; }
}

/* Публичный список записавшихся: видно, что вечер собирается */
.who { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.who li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
}
.who li:last-child { border-bottom: 0; }
.who li.is-wait { color: var(--text-3); }
.who-n {
	flex: none;
	width: 22px;
	font-variant-numeric: tabular-nums;
	color: var(--text-3);
	font-size: 13px;
}
.who-name { flex: 1 1 auto; min-width: 0; }
.who-tag { flex: none; font-size: 12.5px; color: var(--text-3); }