/* ---------- Страница клуба: шапка-полоса с бронзовым столом ----------
   Первый экран главной не повторяем: у второстепенной страницы своя короткая полоса.
   Арт вертикальный (1200x2133), поэтому он обрезается по высоте, а сверху лежит плотный
   градиент — снимок превращается в фактуру, а не в фотографию, и текст читается на любой ширине.
   Нижний край градиента доведён до --ink-950: полоса растворяется в следующей секции без шва. */
.club-top{position:relative;overflow:clip;isolation:isolate;display:grid;align-content:end;min-height:clamp(320px,48svh,480px);padding:calc(var(--header-h) + 48px) 0 clamp(32px,6vw,56px)}
.club-top__art{position:absolute;inset:0;z-index:-2;background:url(../../img/table.webp) 50% 28%/cover no-repeat;animation:rise 1.2s var(--spring) both;--from:40px}
.club-top__art::after{content:"";position:absolute;inset:0;background:radial-gradient(64% 46% at 50% 34%,rgba(224,138,44,.16),transparent 70%),linear-gradient(180deg,rgba(7,6,13,.94) 0,rgba(7,6,13,.62) 32%,rgba(7,6,13,.84) 72%,var(--ink-950) 100%)}
/* Дымка у основания полосы: только transform, 70 с туда-обратно — движение заметно, но не отвлекает */
.club-top__fog{position:absolute;left:-8%;right:-8%;bottom:-2%;z-index:-1;height:58%;background:url(../../img/fog-1.webp) 50% 100%/100% 100% no-repeat;opacity:.34;animation:club-drift 70s ease-in-out infinite alternate}
@keyframes club-drift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,0,0)}}

.club-top__copy{display:grid;justify-items:start;gap:16px}
.club-top__title{font-size:var(--fs-h2);text-wrap:balance;text-shadow:0 2px 26px rgba(0,0,0,.65)}
.club-top__title em{font-style:normal;color:var(--fog-300)}
.club-top__lead{max-width:52ch;color:#e4dccd;text-shadow:0 1px 14px rgba(0,0,0,.7)}
/* Строка-подпись: точку-разделитель рисуем после пункта, а не перед следующим, — при переносе она не открывает строку */
.club-facts{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8125rem;color:var(--fog-300)}
.club-facts span{display:inline-flex;align-items:center;gap:12px}
.club-facts span:not(:last-child)::after{content:"·";color:var(--gold-400)}

/* ---------- Раскладка: окно чата и боковая колонка ----------
   Отступ сверху меньше обычного: заголовок страницы уже сказан в полосе, и целый экран пустоты между
   ними выглядел бы обрывом, а не паузой. */
.club-hall{padding-top:clamp(44px,6vw,88px)}
.club-grid{display:grid;gap:22px;align-items:start}
@media(min-width:980px){.club-grid{grid-template-columns:minmax(0,1fr) 340px;gap:28px}}

/* ---------- Окно чата ----------
   Три строки: заголовок, лента, поле ввода. Высота ограничена и в px, и в svh: в очень высоком окне
   (снимок экрана на 2600 px) лента не должна растягиваться на весь экран, а на телефоне — вылезать за него. */
/* position задаёт .frame (relative) — здесь он не повторяется, иначе перебил бы sticky ниже по файлу */
.chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:min(620px,calc(100svh - var(--header-h) - 148px));min-height:440px;overflow:hidden}
.chat__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:16px 18px 13px;border-bottom:1px solid var(--line)}
.chat__name{font:600 1.25rem/1.2 var(--font-display)}
.chat__flame{margin-right:6px;color:var(--gold-400);text-shadow:0 0 12px var(--gold-400)}
.chat__count{font-size:.8125rem;color:var(--fog-600)}

.chat__stage{position:relative;display:grid;min-height:0}
/* Маска только сверху: верхнее сообщение уходит в край окна, а самое свежее внизу остаётся чётким */
.chat__log{display:grid;align-content:start;gap:15px;padding:18px 16px 20px;overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26px);mask-image:linear-gradient(180deg,transparent 0,#000 26px)}
.chat__log:focus-visible{outline-offset:-4px}
/* Плавающая пилюля поверх ленты: фон непрозрачный, иначе текст сообщений просвечивает сквозь кнопку */
.chat__jump{position:absolute;left:50%;bottom:12px;z-index:2;translate:-50% 0;white-space:nowrap;border-color:var(--gold-400);background:rgba(14,12,26,.96);color:var(--gold-200);box-shadow:0 18px 34px -14px rgba(0,0,0,.95)}

/* Разделитель дня: две волосяные линии и слово между ними */
.chat__day{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-block:4px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-600)}
.chat__day::before,.chat__day::after{content:"";height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.chat__day::after{background:linear-gradient(90deg,var(--line),transparent)}

/* ---------- Сообщения ----------
   Группа = подряд идущие реплики одного автора: аватар и подпись рисуются один раз, дальше только облака.
   --tone — цвет карты автора; он же красит подпись и рамку аватара, поэтому за столом видно, кто говорит. */
.msg{display:flex;align-items:flex-start;gap:10px;--tone:var(--gold-400)}
.msg--me{flex-direction:row-reverse}
.msg__av{flex:none;width:40px;height:40px;overflow:hidden;border:1px solid color-mix(in srgb,var(--tone) 60%,transparent);border-radius:12px;background:var(--ink-950)}
.msg__av img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
/* Аркан без арта (Сила, Иерофант, Колесница) получает рубашку карты с римским номером — заглушки не видно */
.msg__av--rune{display:grid;place-items:center;background:repeating-linear-gradient(45deg,rgba(212,175,106,.1) 0 5px,transparent 5px 10px),radial-gradient(circle at 50% 40%,var(--indigo-700),var(--ink-950) 80%);color:var(--tone);font:600 .8125rem/1 var(--font-display);letter-spacing:.02em}
.msg__body{display:grid;min-width:0;gap:5px}
.msg--me .msg__body{justify-items:end}
.msg__who{display:flex;align-items:baseline;gap:8px;font-size:.75rem}
.msg--me .msg__who{flex-direction:row-reverse}
.msg__nick{font-weight:600;letter-spacing:.03em;color:var(--tone)}
.msg__card{color:var(--fog-600)}
.msg__time{color:var(--fog-600);font-variant-numeric:tabular-nums}
.msg__bubbles{display:grid;gap:5px;justify-items:start}
.msg--me .msg__bubbles{justify-items:end}
/* pre-wrap сохраняет перевод строки по Shift+Enter, anywhere не даёт длинной ссылке разорвать окно */
.bub{max-width:min(46ch,100%);padding:10px 14px;border:1px solid rgba(255,255,255,.06);border-radius:14px 14px 14px 5px;background:var(--ink-800);font-size:.9375rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg--me .bub{border-radius:14px 14px 5px 14px;background:color-mix(in srgb,var(--indigo-700) 58%,var(--ink-800));border-color:rgba(212,175,106,.16)}

/* ---------- Поле ввода ---------- */
/* Поле во всю ширину, кнопка и счётчик под ним: на 375 px кнопка сбоку оставляет полю меньше половины строки */
.chat__composer{display:grid;gap:10px;padding:13px 16px 16px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(14,12,26,0),rgba(14,12,26,.92) 40%)}
/* Селектор с тегом: в components.css у textarea.input высота 120 px, а поле чата начинается с одной строки и растёт под текст */
textarea.chat__input{min-height:48px;max-height:132px;resize:none;scrollbar-width:none}
textarea.chat__input::-webkit-scrollbar{display:none} /* поле растёт под текст; системная полоса со стрелками в однострочном поле выглядела поломкой */
.chat__meta{display:flex;align-items:center;gap:6px 12px;min-height:44px;font-size:.75rem;color:var(--fog-600)}
.chat__send{min-height:44px;padding:0 20px;font-size:.875rem}
.chat__left{font-variant-numeric:tabular-nums}
.chat__left.is-warn{color:var(--amber-500)}
.chat__status{flex:1;min-width:0;color:var(--gold-200)}
/* Боковая колонка выше окна чата, поэтому на широком экране окно закрепляется, как панели на главной:
   разговор остаётся на экране, пока читают правила и список гостей, а слева не зияет пустое чёрное поле.
   Колесо мыши над лентой доводит её до конца и дальше листает страницу — закреплённое окно не ловушка.
   На телефоне остаётся contain: там прокрутка пальцем, и перескок страницы мешает читать. */
@media(min-width:980px){
  .chat{position:sticky;top:calc(var(--header-h) + 24px)}
  .chat__log{overscroll-behavior:auto}
}

/* Гостю поле оставлено рабочим: пусть напишет, а место за столом попросим при отправке */
.chat__gate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(212,175,106,.06);font-size:.8125rem;color:var(--fog-300)}

/* ---------- Боковая колонка ---------- */
.club-side{display:grid;gap:18px}
.club-side .note a{color:var(--gold-200);text-decoration:underline}
.side-card{display:grid;gap:12px;padding:20px}
.side-card h3{font-size:1.375rem}
.side-card p{font-size:.875rem;color:var(--fog-300)}
.rules{display:grid;gap:10px;margin:0;padding:0;list-style:none;font-size:.875rem;color:var(--fog-300);counter-reset:rule}
.rules li{display:grid;grid-template-columns:24px 1fr;gap:10px;counter-increment:rule}
.rules li::before{content:counter(rule,upper-roman);font:600 .75rem/1.5 var(--font-display);letter-spacing:.06em;color:var(--gold-400)}
.rules b{font-weight:600;color:var(--text)}

/* Десять мест — список гостей в два столбца: «Справедливость» и «Клейн Моретти» в узкую колонку не влезают,
   поэтому имя стоит рядом с картой, а не под ней. Карты приведены к одному формату 2/3, хотя исходники разные. */
.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin:0;padding:0;list-style:none}
.seat{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px}
.seat__text{display:grid;gap:1px;min-width:0}
/* height:auto обязателен: у картинки есть атрибуты width и height, и без него высота берётся из атрибута, а не из aspect-ratio */
.seat img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 32%;border:1px solid var(--line);border-radius:5px}
.seat__name{font-size:.75rem;line-height:1.2;color:var(--gold-200)}
.seat__owner{font-size:.6875rem;line-height:1.2;color:var(--fog-600)}

/* Своё место за столом: карта крупнее, рядом имя и честная подпись про демонстрационный режим */
.mine{display:flex;align-items:center;gap:14px}
.mine__card{flex:none;width:54px;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 32%;border:1px solid var(--gold-400);border-radius:8px;box-shadow:0 14px 26px -12px rgba(0,0,0,.9)}
.mine__card--empty{display:grid;place-items:center;background:repeating-linear-gradient(45deg,rgba(212,175,106,.1) 0 6px,transparent 6px 12px),var(--ink-800);color:var(--gold-400);font:600 1.25rem/1 var(--font-display)}
.mine__text{display:grid;gap:2px;min-width:0}
.mine__nick{font:600 1.125rem/1.2 var(--font-display)}
.mine__card-name{font-size:.8125rem;color:var(--fog-300)}

/* ---------- Нижняя полоса: приглашение выбрать карту ----------
   Отступ сверху снят: между окном чата и полосой уже стоит отступ секции зала, двойной был бы провалом. */
.club-end{padding-top:0}
.club-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:clamp(22px,4vw,34px);background:linear-gradient(120deg,color-mix(in srgb,var(--indigo-700) 55%,var(--ink-900)),var(--ink-900))}
.club-cta h2{font-size:var(--fs-h3)}
.club-cta__text{display:grid;gap:8px;max-width:52ch}
.club-cta__btns{display:flex;flex-wrap:wrap;gap:12px}