/* =========================================================================
   КРИТ! — дизайн-код клуба НРИ
   «Рыцарь в сумерках»: палитра снята с логотипа и баннера клуба —
   сумеречный сланцево-синий, винный плащ, пыльно-розовые грани кубика,
   костяной крем и сталь доспеха. Тонкие светлые рамки — как у баннера,
   шестигранник — как у логотипа. Подробности — DESIGN.md.
   ========================================================================= */

/* ---------- 1. Токены ---------- */
:root {
  /* Ночь — фоны (индиго логотипа → сланец баннера) */
  --ink-950: #0b0f1c;
  --ink-900: #141a2c;
  --ink-800: #1b2437;
  --ink-700: #233543;            /* фон баннера */
  --ink-600: #34485a;
  --navy: #062335;               /* контуры рисунка, буква «К» */

  /* Кость — светлые поверхности (грань кубика, буквы «КРИТ!») */
  --bone-50: #f6f4ec;
  --bone-100: #ece9dd;
  --bone-200: #dcd8c9;
  --bone-400: #a9a99b;
  --bone-ink: #12233a;           /* текст на кости — тёмно-синий, как «К» */
  --bone-ink-soft: #4b5869;

  /* Текст на тёмном */
  --text: #e9e7dd;
  --text-muted: #9eabb3;
  --text-faint: #6c7a86;

  /* Акценты */
  --wine: #8f4148;               /* основной — плащ рыцаря: кнопки, действия */
  --wine-bright: #a7666a;        /* пыльная роза — грани кубика */
  --wine-deep: #6b3941;          /* тень плаща */
  --rose-light: #bc9599;
  --steel: #a4bfc3;              /* сталь доспеха — Мастер, ссылки */
  --steel-bright: #d3e2e3;
  --steel-dim: #5d6f77;          /* тонкие рамки */
  --arcane: #86a2d4;             /* инфо */
  --emerald: #7fae8f;            /* успех, набор открыт */
  --ember: #d6a06a;              /* внимание */

  /* Типографика (с кириллицей). Фирменная надпись «КРИТ!» — изображением из баннера. */
  --font-heading: "Cormorant SC", Georgia, serif;
  --font-body: "Alegreya", Georgia, "Times New Roman", serif;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;

  /* Ритм */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 3px;
  --radius: 6px;

  --shadow: 0 12px 32px rgba(3, 8, 18, .55);
  --glow-steel: 0 0 18px rgba(164, 191, 195, .25);
  --frame-line: rgba(236, 233, 221, .22);   /* тонкая рамка, как у баннера */
  /* Фактура холста, как на рисунках */
  --canvas: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
            repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 4px);
  --hex: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);

  --container: 1140px;
  color-scheme: dark;
}

/* ---------- 2. База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--ink-900);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0, rgba(35, 53, 67, .9), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(107, 57, 65, .22), transparent 70%),
    var(--canvas);
  background-attachment: fixed;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--steel); text-decoration-color: rgba(164, 191, 195, .4); text-underline-offset: 3px; }
a:hover { color: var(--steel-bright); }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  margin: 0 0 var(--space-4);
  color: var(--bone-50);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--space-4); }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--steel-dim), transparent); margin: var(--space-6) 0; }
:focus-visible { outline: 2px solid var(--steel-bright); outline-offset: 2px; }
::selection { background: var(--wine); color: var(--bone-50); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; }
.site-main { flex: 1; padding-block: var(--space-6) var(--space-8); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--space-5); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.row--between { justify-content: space-between; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Шапка и подвал ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 15, 28, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--frame-line);
  box-shadow: 0 6px 20px rgba(3, 8, 18, .45);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 68px; }

.logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.logo__icon { width: 46px; height: 46px; border-radius: 22%; box-shadow: 0 0 0 1px var(--frame-line); transition: transform .3s; }
.logo:hover .logo__icon { transform: rotate(-6deg) scale(1.04); }
.logo__wordmark { height: 30px; width: auto; }
@media (prefers-reduced-motion: reduce) { .logo__icon { transition: none; } }

/* Навигация: 3–4 пункта верхнего уровня, остальное — в выпадающих группах */
.site-nav { display: flex; align-items: center; gap: var(--space-1); }
.nav-link, .nav-dd > summary, .user-menu > summary {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; letter-spacing: .04em;
  color: var(--text); text-decoration: none; padding: 0 var(--space-3); border-radius: var(--radius); cursor: pointer;
}
.nav-dd > summary, .user-menu > summary { list-style: none; }
.nav-dd > summary::-webkit-details-marker, .user-menu > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after, .user-menu > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid var(--steel-dim); border-bottom: 1.5px solid var(--steel-dim);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.nav-dd[open] > summary::after, .user-menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.nav-link:hover, .nav-dd > summary:hover, .user-menu > summary:hover, .nav-dd[open] > summary, .user-menu[open] > summary {
  color: var(--steel-bright); background: rgba(164, 191, 195, .08);
}
/* активный раздел — винная черта снизу */
.nav-link.is-active, .nav-dd.is-active > summary { color: var(--steel-bright); }
.nav-link.is-active::before, .nav-dd.is-active > summary::before {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -14px; height: 2px; background: var(--wine-bright);
}
.nav-count {
  display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 .35em; margin-left: .25em;
  font: 700 .75rem/1 var(--font-body); color: var(--bone-50); background: var(--wine); border-radius: 99px;
}
.nav-toggle {
  display: none; background: none; border: 1px solid var(--frame-line); color: var(--steel-bright);
  font: 600 1rem var(--font-heading); padding: var(--space-2) var(--space-3); border-radius: var(--radius); cursor: pointer;
}

/* выпадающая группа */
.nav-dd { position: relative; }
.nav-dd__panel, .user-menu__list {
  position: absolute; top: calc(100% + 12px); z-index: 60; display: flex; flex-direction: column; padding: var(--space-2);
  background: var(--ink-800); border: 1px solid var(--steel-dim); border-radius: var(--radius); box-shadow: var(--shadow);
  animation: nav-in .14s ease-out;
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .nav-dd__panel, .user-menu__list { animation: none; } }
.nav-dd__panel { left: 0; width: 290px; }
.nav-dd__item { display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.nav-dd__item b { font: 700 1rem/1.25 var(--font-heading); letter-spacing: .03em; color: var(--bone-50); }
.nav-dd__item small { font-size: .78rem; color: var(--text-muted); }
.nav-dd__item:hover { background: rgba(167, 102, 106, .16); }
.nav-dd__item:hover b { color: var(--rose-light); }
.nav-dd__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--frame-line); }

/* меню профиля */
.user-menu { position: relative; margin-left: var(--space-2); }
.user-menu__avatar { position: relative; display: inline-grid; }
.nav-count--dot { position: absolute; top: -6px; right: -10px; margin: 0; min-width: 18px; height: 18px; font-size: .68rem; box-shadow: 0 0 0 2px var(--ink-950); }
.user-menu__list { right: 0; min-width: 250px; }
.user-menu__head { display: grid; gap: 4px; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--frame-line); }
.user-menu__head b { font: 700 1.05rem var(--font-heading); color: var(--bone-50); }
.user-menu__list a, .user-menu__list button {
  display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font: inherit; font-size: var(--fs-sm); background: none; border: 0; cursor: pointer;
}
.user-menu__list a:hover, .user-menu__list button:hover { background: rgba(164, 191, 195, .1); color: var(--steel-bright); }
.user-menu__council { color: var(--rose-light) !important; font-weight: 700; }
.user-menu__list hr { margin: var(--space-2) 0; }
.user-menu.is-active > summary .user-menu__name { color: var(--steel-bright); }

@media (max-width: 1100px) and (min-width: 861px) { .user-menu__name { display: none; } }
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - 69px); overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; align-items: stretch; gap: 2px; padding: var(--space-3) 16px var(--space-4);
    background: var(--ink-950); border-bottom: 1px solid var(--frame-line); box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: flex; }
  .nav-link, .nav-dd > summary, .user-menu > summary { display: flex; width: 100%; min-height: 46px; justify-content: space-between; }
  .nav-link.is-active::before, .nav-dd.is-active > summary::before { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  /* подменю — продолжение своего пункта: общий фон, отступ и линия слева, а не отдельная карточка поверх */
  .nav-dd[open] > summary, .user-menu[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
  .nav-dd__panel, .user-menu__list {
    position: static; width: auto; min-width: 0; margin: 0 0 var(--space-2); padding: 0 var(--space-2) var(--space-2) var(--space-5);
    background: rgba(164, 191, 195, .08); border: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; animation: none;
  }
  .nav-dd__item { border-left: 1px solid var(--steel-dim); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .user-menu { margin: var(--space-2) 0 0; border-top: 1px solid var(--frame-line); padding-top: var(--space-2); }
  .site-nav > .btn { margin-top: var(--space-2); }
}
@media (max-width: 380px) { .logo__wordmark { height: 24px; } }

.site-footer { border-top: 1px solid var(--frame-line); background: var(--ink-950); padding-block: var(--space-6); color: var(--text-muted); font-size: var(--fs-sm); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; }
.site-footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.site-footer__brand img { width: 32px; height: 32px; border-radius: 22%; }
.site-footer a { color: var(--text-muted); }
.site-footer__bug { padding: 0; font: inherit; color: var(--rose-light); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.site-footer__bug:hover { color: var(--bone-50); }

/* ---------- 4. Кнопки ---------- */
.btn {
  --btn-bg: linear-gradient(180deg, var(--wine-bright), var(--wine) 45%, var(--wine-deep));
  --btn-color: var(--bone-50);
  --btn-border: rgba(236, 233, 221, .28);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: .6em 1.3em; min-height: 44px;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; letter-spacing: .06em; line-height: 1.1;
  color: var(--btn-color); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 0 var(--navy);
  text-decoration: none; cursor: pointer; transition: filter .15s, transform .15s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.1); color: var(--btn-color); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; pointer-events: none; }
.btn--steel { --btn-bg: linear-gradient(180deg, var(--steel-bright), var(--steel) 55%, #7f9ca2); --btn-color: var(--navy); --btn-border: var(--steel-bright); }
.btn--steel:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 var(--navy), var(--glow-steel); }
.btn--ghost { --btn-bg: transparent; --btn-color: var(--bone-100); --btn-border: rgba(236, 233, 221, .45); box-shadow: none; }
.btn--ghost:hover { background: rgba(236, 233, 221, .08); }
.paper .btn--ghost { --btn-color: var(--bone-ink); --btn-border: var(--bone-400); }
.btn--quiet { --btn-bg: var(--ink-700); --btn-color: var(--text); --btn-border: var(--ink-600); }
.btn--sm { min-height: 34px; padding: .35em .9em; font-size: .9375rem; }
.btn--block { width: 100%; }

/* ---------- 5. Поверхности ---------- */
/* Тёмная карточка с тонкой светлой рамкой внутри — как обрамление баннера */
.card {
  position: relative; border-radius: var(--radius); padding: var(--space-5);
  background: linear-gradient(165deg, var(--ink-700), var(--ink-800) 75%);
  box-shadow: 0 0 0 1px rgba(6, 35, 53, .9), var(--shadow);
}
.card::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid var(--frame-line); border-radius: 3px; pointer-events: none;
}
.card--link { transition: transform .2s, box-shadow .2s; }
.card--link:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--steel-dim), var(--shadow), var(--glow-steel); }
.card--link:hover::before { border-color: rgba(236, 233, 221, .4); }

/* Костяной лист — формы, описания игр, длинный текст. Двойная рамка: кость + тёмный контур */
.paper {
  position: relative; color: var(--bone-ink); border-radius: var(--radius-sm); padding: var(--space-6);
  background-color: var(--bone-100);
  background-image:
    radial-gradient(ellipse at 20% 0, rgba(255, 255, 255, .55), transparent 55%),
    radial-gradient(ellipse at center, transparent 60%, rgba(164, 191, 195, .35)),
    repeating-linear-gradient(0deg, rgba(18, 35, 58, .025) 0 1px, transparent 1px 3px);
  box-shadow: 0 0 0 1px var(--bone-400), 0 0 0 5px var(--bone-100), 0 0 0 6px var(--navy), var(--shadow);
  margin: 6px;
}
.paper h1, .paper h2, .paper h3 { color: var(--bone-ink); }
.paper a { color: var(--wine); text-decoration-color: rgba(143, 65, 72, .4); }
.paper a.btn { color: var(--btn-color); text-decoration: none; }
.paper .muted { color: var(--bone-ink-soft); }
.paper hr { background: linear-gradient(90deg, transparent, var(--bone-400), transparent); }
.paper--narrow { max-width: 560px; margin-inline: auto; }
@media (max-width: 600px) { .paper { padding: var(--space-5) var(--space-4); } }

/* Сужающаяся «линейка» статблока — винного цвета */
.rule, .paper .rule {
  height: 4px; margin: var(--space-3) 0; border: 0;
  background: var(--wine); clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Заголовок раздела: тонкие линии с ромбом-гранью у текста */
.ornament {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-heading); margin: var(--space-7) 0 var(--space-5);
}
.ornament::before, .ornament::after {
  content: ""; flex: 1; height: 9px;
  background:
    linear-gradient(var(--wine-bright), var(--wine-bright)) right center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, var(--frame-line)) left center / calc(100% - 16px) 1px no-repeat;
}
.ornament::after { transform: scaleX(-1); }
.ornament h2 { margin: 0; color: var(--bone-50); text-align: center; }

/* ---------- 6. Бейджи и аватары ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35em; padding: .15em .6em;
  font: 700 .75rem/1.5 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; color: var(--text-muted);
}
.badge--master { color: var(--navy); background: linear-gradient(180deg, var(--steel-bright), var(--steel)); border-color: var(--steel-bright); }
.badge--master::before { content: ""; width: .85em; height: .95em; background: var(--wine); clip-path: var(--hex); }
.badge--admin { color: var(--bone-50); background: var(--wine); border-color: var(--wine-bright); }
.badge--system { color: var(--arcane); }
.badge--open { color: var(--emerald); }
.badge--full, .badge--closed { color: var(--ember); }
.badge--cancelled { color: var(--rose-light); }
.badge--done { color: var(--text-faint); }
.badge--pending { color: var(--ember); }
.badge--approved { color: var(--emerald); }
.badge--rejected { color: var(--rose-light); }
.badge--blocked { color: var(--bone-50); background: var(--ink-600); border-color: var(--ink-600); }
.badge--beginner { color: var(--emerald); }
.paper .badge--system { color: #2c4f86; }
.paper .badge--open, .paper .badge--beginner, .paper .badge--approved { color: #2f6b45; }
.paper .badge--full, .paper .badge--closed, .paper .badge--pending { color: #8a5418; }
.paper .badge--cancelled, .paper .badge--rejected { color: var(--wine); }

/* Аватар — шестигранник, как рамка логотипа; у Мастера — винный со стальной гранью */
.avatar {
  --size: 40px;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: calc(var(--size) * 1.1);
  font: 700 calc(var(--size) * .36)/1 var(--font-heading); color: var(--bone-100);
  background: var(--steel-dim); clip-path: var(--hex);
}
.avatar::before { content: ""; position: absolute; inset: 2px; background: linear-gradient(160deg, var(--ink-600), var(--ink-800)); clip-path: var(--hex); }
.avatar span { position: relative; }
.avatar--master { background: var(--steel-bright); color: var(--bone-50); }
.avatar--master::before { background: linear-gradient(160deg, var(--wine-bright), var(--wine-deep)); }
.avatar--lg { --size: 96px; }
.avatar--lg::before { inset: 3px; }
.avatar--sm { --size: 28px; }

/* ---------- 7. Формы ---------- */
.form { display: grid; gap: var(--space-4); }
.form__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.field { display: grid; gap: var(--space-1); align-content: start; min-width: 0; } /* в общей строке формы поля не растягиваются */
.field__label { font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; letter-spacing: .03em; }
.field .req { color: var(--wine); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .input {
  width: 100%; min-height: 44px; padding: .55em .8em;
  font: inherit; color: var(--bone-ink); background: var(--bone-50);
  border: 1px solid var(--bone-400); border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 3px rgba(18, 35, 58, .12); transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; }
/* подсказки к полю — вместо браузерного <datalist> (static/js/krit.js, enhanceSuggest) */
.suggest {
  position: fixed; z-index: 1000; max-height: 264px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--bone-50); border: 1px solid var(--bone-400); border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(6, 12, 24, .35);
}
.suggest li { padding: .5em .75em; border-radius: 4px; color: var(--bone-ink); cursor: pointer; }
.suggest li:hover, .suggest li.is-active { color: var(--bone-50); background: var(--wine); }
/* iOS Safari: у полей даты и времени своя минимальная ширина — без этого они вылезают за край листа */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; }
  input::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(143, 65, 72, .2);
}
.field__help { margin: 0; font-size: var(--fs-xs); color: var(--bone-ink-soft); }
.field__help ul { margin: 0; padding-left: 1.2em; }
.field__error, .form__errors { margin: 0; font-size: var(--fs-sm); color: var(--wine); font-weight: 700; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--wine) !important; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
/* достижения на профиле */
.ach-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.ach { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); background: var(--ink-800);
  border: 1px solid var(--steel-dim); border-radius: var(--radius); }
.ach--master:not(.is-locked) { border-color: var(--wine-bright); }
.ach__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; font-size: 1.6rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 200, 115, .25), rgba(231, 200, 115, .05)); box-shadow: 0 0 0 1px rgba(231, 200, 115, .45); }
.ach__body { display: grid; gap: 2px; min-width: 0; }
.ach__body b { font-family: var(--font-heading); color: var(--bone-50); letter-spacing: .03em; }
.ach__body small { color: var(--text-muted); font-size: .8rem; }
.ach__date { color: var(--rose-light) !important; }
a.char-stat { text-decoration: none; color: inherit; }

/* тип персонажа: West Marches или кампании и независимые игры — с лимитом живых героев */
.kind-pick { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; border: 0; }
.kind-pick legend { width: 100%; padding: 0; margin-bottom: 4px; }
.kind-pick .is-full span { opacity: .6; }
.char-limits .is-full { color: var(--wine-bright); font-weight: 700; }
.cw-kind { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.kind-form__row { display: flex; gap: var(--space-2); }
.kind-form__row select { flex: 1; }
.check input { width: 1.15em; height: 1.15em; accent-color: var(--wine); }
.card .field input:not([type="checkbox"]), .card .field select, .card .input, .filters .input {
  color: var(--text); background: var(--ink-900); border-color: var(--ink-600);
}
.card .field__help { color: var(--text-muted); }

/* ---------- 8. Уведомления ---------- */
.messages { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.notice {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius); border-left: 4px solid var(--arcane);
  background: rgba(134, 162, 212, .1); color: var(--text);
}
.notice--success { border-color: var(--emerald); background: rgba(127, 174, 143, .12); }
.notice--warning { border-color: var(--ember); background: rgba(214, 160, 106, .12); }
.notice--danger { border-color: var(--wine-bright); background: rgba(167, 102, 106, .16); }
.paper .notice { color: var(--bone-ink); } /* на костяном листе текст — тёмный */

/* ---------- 9. Герой главной: фирменный баннер ---------- */
.hero { padding: var(--space-2) 0 var(--space-6); text-align: center; }
.hero__banner {
  display: block; width: 100%; height: auto; aspect-ratio: 1280 / 512; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 0 0 1px var(--navy), var(--shadow);
}
.hero__subtitle { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--rose-light); letter-spacing: .12em; margin: var(--space-5) 0 var(--space-2); }
.hero__lead { max-width: 640px; margin: 0 auto var(--space-5); color: var(--text-muted); font-size: var(--fs-lg); }
@media (max-width: 600px) {
  /* На телефоне показываем центр баннера крупнее: надпись и кубик */
  .hero__banner { aspect-ratio: 16 / 9; object-position: 25% center; }
  .hero__lead { font-size: var(--fs-md); }
}

.features { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.feature__icon {
  display: grid; place-items: center; width: 52px; height: 58px; margin-bottom: var(--space-4); clip-path: var(--hex);
  color: var(--bone-50); background: linear-gradient(160deg, var(--wine-bright), var(--wine-deep));
}
.feature__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.section-more { margin-top: var(--space-5); text-align: center; }

/* ---------- 10. Игры ---------- */
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.game-card { display: flex; flex-direction: column; gap: var(--space-3); color: var(--text); text-decoration: none; height: 100%; }
.game-card:hover { color: var(--text); }
.game-card__head { display: flex; gap: var(--space-4); align-items: flex-start; }
.game-card__title { margin: 0; font-size: var(--fs-lg); color: var(--bone-50); }
.game-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.game-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--frame-line); font-size: var(--fs-sm); }

.date-tile {
  flex: none; width: 58px; text-align: center; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bone-100); color: var(--bone-ink); box-shadow: 0 0 0 1px var(--navy);
}
.date-tile__month { display: block; background: var(--wine); color: var(--bone-50); font: 700 .6875rem/1.8 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.date-tile__day { display: block; font: 700 1.5rem/1.25 var(--font-heading); }
.date-tile__time { display: block; font-size: .75rem; padding-bottom: 2px; color: var(--bone-ink-soft); }

/* Места — маленькие шестигранники */
.pips { display: inline-flex; gap: 3px; align-items: center; }
.pip { width: 10px; height: 11px; clip-path: var(--hex); background: var(--ink-600); }
.pip--taken { background: var(--rose-light); }

/* Статблок игры */
.statblock { max-width: 820px; }
.statblock__title { font-size: var(--fs-2xl); margin-bottom: 0; }
.statblock__subtitle { font-style: italic; color: var(--bone-ink-soft); margin: 0; }
.statblock__props { display: grid; gap: var(--space-1) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin: 0; }
.statblock__props div { display: flex; gap: var(--space-2); }
.statblock__props dt { font-weight: 700; color: var(--wine); }
.statblock__props dd { margin: 0; }
.statblock__body { white-space: pre-line; }
.statblock__body.md { white-space: normal; }
.layout-aside { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
@media (max-width: 900px) { .layout-aside { grid-template-columns: 1fr; } }

.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.roster li { display: flex; align-items: center; gap: var(--space-3); }
.roster__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 11. Табы, фильтры, пагинация ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--frame-line); margin-bottom: var(--space-5); }
.tabs a {
  padding: var(--space-2) var(--space-4); font-family: var(--font-heading); font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); }
.tabs a.is-active { color: var(--bone-50); border-color: var(--wine-bright); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.filters .input { width: auto; min-width: 200px; min-height: 40px; }
.pagination { display: flex; justify-content: center; gap: var(--space-3); align-items: center; margin-top: var(--space-6); }

/* заголовок страницы: название, подзаголовок и действия справа */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.page-head h1 { margin: 0 0 var(--space-1); }
.page-head p { margin: 0; color: var(--text-muted); max-width: 62ch; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stack > .page-head { margin-bottom: 0; }

.empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-muted); }
.empty__icon {
  position: relative; width: 56px; height: 62px; margin: 0 auto var(--space-4); clip-path: var(--hex);
  background: linear-gradient(160deg, var(--steel-dim), var(--ink-600));
}
.empty__icon::after {
  content: ""; position: absolute; inset: 3px; clip-path: var(--hex);
  background: radial-gradient(circle at 50% 38%, var(--wine-bright) 0 5px, transparent 5.5px), linear-gradient(160deg, var(--ink-700), var(--ink-900));
}
.empty .btn { margin-top: var(--space-3); }

/* ---------- 12. Профиль ---------- */
.profile-head { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.profile-head h1 { margin: 0; }
.char-sheet { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.char-stat { text-align: center; padding: var(--space-3); border-radius: var(--radius); background: var(--ink-900); box-shadow: inset 0 0 0 1px var(--frame-line); }
.char-stat__value { font: 700 var(--fs-xl)/1.1 var(--font-heading); color: var(--steel-bright); }
.char-stat__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }

/* ---------- 13. Зал Совета (админка) ---------- */
.council { display: grid; gap: var(--space-6); grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.council__nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.council__nav a { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-family: var(--font-heading); font-weight: 700; letter-spacing: .03em; }
.council__nav a:hover { background: rgba(164, 191, 195, .08); color: var(--steel-bright); }
.council__nav a.is-active { background: linear-gradient(90deg, rgba(143, 65, 72, .45), transparent); color: var(--bone-50); box-shadow: inset 3px 0 0 var(--wine-bright); }
.council__title { font-family: var(--font-heading); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-light); font-size: .9rem; padding: 0 var(--space-3) var(--space-3); margin: 0; }
@media (max-width: 860px) {
  .council { grid-template-columns: 1fr; }
  .council__nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .council__title { width: 100%; }
}
.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.stat { text-align: center; }
.stat__value { font: 700 2.5rem/1 var(--font-heading); color: var(--steel-bright); }
.stat__label { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-2); }
.stat--alert .stat__value { color: var(--rose-light); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); position: relative; }
.table th { text-align: left; font-family: var(--font-heading); font-size: 1rem; letter-spacing: .04em; color: var(--steel); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--steel-dim); white-space: nowrap; }
.table td { padding: var(--space-3); border-bottom: 1px solid rgba(52, 72, 90, .7); vertical-align: middle; }
.table tr:hover td { background: rgba(164, 191, 195, .04); }
.table .user-cell { display: flex; align-items: center; gap: var(--space-3); }

.quote { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--wine-bright); background: rgba(3, 8, 18, .25); white-space: pre-line; }
.paper .quote { background: rgba(164, 191, 195, .18); border-color: var(--wine); }

/* ---------- 14. Страницы ошибок ---------- */
.error-page { text-align: center; padding-block: var(--space-7); }
.error-page__icon { width: 120px; margin: 0 auto var(--space-4); border-radius: 22%; box-shadow: var(--shadow); }
.error-page__code { font-family: var(--font-heading); font-weight: 700; font-size: clamp(4rem, 14vw, 7rem); line-height: 1; color: var(--rose-light); }

/* ---------- 15. Стайлгайд ---------- */
.swatches { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
.swatch { border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--ink-600); font-size: var(--fs-xs); }
.swatch__color { height: 64px; }
.swatch__label { padding: var(--space-2); background: var(--ink-800); }
.swatch__label code { color: var(--text-muted); }

/* ---------- 16. Персонажи: карточки и вкладки профиля ---------- */
.tabs button {
  padding: var(--space-2) var(--space-4); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: .04em;
  color: var(--text-muted); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.tabs button:hover { color: var(--text); }
.tabs button.is-active { color: var(--bone-50); border-color: var(--wine-bright); }
.tabs__count { display: inline-grid; place-items: center; min-width: 1.4em; padding: 0 .35em; margin-left: .2em; font: 700 .75rem/1.4 var(--font-body); color: var(--navy); background: var(--steel); border-radius: 99px; }
.profile-tabs { margin-bottom: 0; }

.char-card { display: flex; gap: var(--space-4); align-items: center; text-decoration: none; color: var(--text); }
.char-card:hover { color: var(--text); }
.char-card__level {
  flex: none; display: grid; place-items: center; width: 54px; height: 60px; clip-path: var(--hex);
  background: var(--steel-bright); font: 700 1.4rem/1 var(--font-heading); color: var(--bone-50); position: relative;
}
.char-card__level::before { content: ""; position: absolute; inset: 2px; clip-path: var(--hex); background: linear-gradient(160deg, var(--wine-bright), var(--wine-deep)); }
.char-card__level span { position: relative; }
.char-card__body { display: grid; gap: 2px; min-width: 0; }
.char-card__name { font: 700 var(--fs-lg)/1.2 var(--font-heading); color: var(--bone-50); overflow: hidden; text-overflow: ellipsis; }
.char-card__level img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; clip-path: var(--hex); z-index: 1; }
.char-card__level.has-portrait span {
  position: absolute; z-index: 2; right: -2px; bottom: 4px; min-width: 22px; height: 22px; display: grid; place-items: center;
  font-size: .8rem; border-radius: 99px; background: var(--wine); box-shadow: 0 0 0 2px var(--ink-800);
}
.char-card__level.has-portrait { clip-path: none; background: none; }
.char-card__level.has-portrait::before { clip-path: var(--hex); background: var(--steel-bright); inset: 0; }

/* ---------- 17. Мини-разметка (фильтр markdown) ---------- */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h2, .md h3, .md h4 { margin: 1.1em 0 .4em; }
.md p { margin: 0 0 .8em; }
.md ul { margin: 0 0 .9em; padding-left: 1.3em; }
.md ul.md-tasks { list-style: none; padding-left: 0; }
.md .md-task.is-done { color: var(--text-faint); text-decoration: line-through; }
.md hr { margin: 1.2em 0; }
.paper .md .md-task.is-done { color: var(--bone-ink-soft); }

/* ---------- 18. Запись на игру, партия, кампании ---------- */
.join-chars { border: 0; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: 6px; }
.join-chars legend { margin-bottom: 4px; }
.join-char { display: flex; gap: var(--space-2); align-items: flex-start; padding: 8px 10px; border: 1px solid var(--ink-600); border-radius: var(--radius-sm); cursor: pointer; background: rgba(11, 15, 28, .4); }
.join-char:has(input:checked) { border-color: var(--wine-bright); background: rgba(143, 65, 72, .25); }
.join-char input { margin-top: .3em; accent-color: var(--wine-bright); }
.join-char span { display: grid; min-width: 0; }
.join-char small { color: var(--text-muted); font-size: .75rem; }
.join-char.is-disabled { opacity: .5; cursor: not-allowed; }
.join-change { display: flex; gap: var(--space-2); margin: var(--space-2) 0; }
.join-change .input { min-height: 34px; }
.roster__row { align-items: flex-start !important; }
.roster__sub { margin: var(--space-4) 0 var(--space-2); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.avatar__img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; clip-path: var(--hex); z-index: 1; }
.stack[style*="--gap"] > * + * { margin-top: var(--gap); }
.campaign-card { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: var(--text); }
.campaign-card:hover { color: var(--text); }
.campaign-card__desc { margin: 0; }
.table--paper th { color: var(--wine); border-color: var(--bone-400); }
.table--paper td { border-color: var(--bone-200); }
.badge--pending { color: var(--ember); }
.progression-pick { display: inline-flex; border: 1px solid var(--ink-600); border-radius: 99px; padding: 0; margin: 0; overflow: hidden; }
.progression-pick label { display: inline-flex; align-items: center; gap: 6px; padding: .45em .9em; font-size: var(--fs-sm); cursor: pointer; color: var(--text-muted); }
.progression-pick label + label { border-left: 1px solid var(--ink-600); }
.progression-pick input { position: absolute; opacity: 0; pointer-events: none; }
.progression-pick label:has(input:checked) { color: var(--bone-50); background: var(--wine); }
.progression-pick label:has(input:focus-visible) { outline: 2px solid var(--steel-bright); outline-offset: -2px; }

/* Невидимый «мостик» над выпадающей группой: курсор не теряет меню на пути от заголовка к пунктам */
@media (min-width: 861px) {
  .nav-dd__panel::before, .user-menu__list::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
}

/* ---------- Профиль: аватар и Telegram ---------- */
.profile-form { max-width: 720px; margin-inline: auto; }
.profile-form__as { margin-bottom: var(--space-4); color: var(--bone-ink); }
.profile-form .page-head p { color: var(--bone-ink-soft); }
.avatar-field { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); margin-bottom: var(--space-4); border: 1px dashed var(--bone-400); border-radius: var(--radius); }
.avatar-field__preview { position: relative; display: inline-grid; flex: none; }
.avatar-field__preview .avatar__img--new { z-index: 2; }
.avatar-field__body { display: grid; gap: var(--space-2); min-width: 0; }
.avatar-field__body .field__help { margin: 0; }
.avatar-field__pick { cursor: pointer; }
.avatar-field__pick:focus-within { outline: 2px solid var(--steel); outline-offset: 2px; }
.tg-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tg-row__icon, .tg-link__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #2a9bd8; }
.tg-row__text { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.tg-row form { margin: 0; }
.tg-ok { color: var(--emerald); font-weight: 700; }
.tg-missing { color: var(--ember); }
.paper .tg-ok { color: #2f6b45; }
.paper .tg-missing { color: #8a5418; }
.tg-link { text-align: center; display: grid; justify-items: center; gap: var(--space-3); }
.tg-link h1 { margin: 0; }
.tg-link > p { margin: 0; max-width: 46ch; }
.tg-link__icon { width: 64px; height: 64px; }
.tg-link__icon svg { width: 32px; height: 32px; }
.tg-link__steps { margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6); text-align: left; border: 1px solid var(--bone-400); border-radius: var(--radius); }
.tg-link__steps li + li { margin-top: 4px; }
.tg-link__btn { --btn-bg: linear-gradient(180deg, #3aa9e4, #2a9bd8 50%, #1f86bf); --btn-border: rgba(255, 255, 255, .3); }
.tg-link__btn svg { width: 20px; height: 20px; }
.tg-link__wait[hidden] { display: none; }
.tg-link__wait { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.tg-link__spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tg-link__foot { max-width: 46ch; margin: 0; }
.tg-link__copy { display: flex; gap: var(--space-2); width: min(100%, 420px); }
.tg-link__copy .input { flex: 1; min-width: 0; min-height: 36px; font-size: .8rem; }
.tg-link__logout { margin: 0; }
.tg-link__actions { justify-content: center; }
.link-btn { padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.paper .link-btn { color: var(--wine); }
@media (prefers-reduced-motion: reduce) { .tg-link__spinner { animation: none; } }
.or-rule { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; font-size: var(--fs-sm); color: var(--bone-ink-soft); }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--bone-400); }
.tg-link__alt { margin: 0; }
.tg-signup__who { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--bone-ink-soft); }
.tg-signup__who .tg-row__icon { width: 30px; height: 30px; }
.tg-signup__who .tg-row__icon svg { width: 16px; height: 16px; }

/* ---------- Анонсы: картинка, проверка Советом, отчёты ---------- */
.game-card--cover { padding-top: 0; overflow: hidden; }
.game-card__cover { display: block; width: calc(100% + 2 * var(--space-5)); max-width: none; margin: 0 calc(-1 * var(--space-5)); aspect-ratio: 16 / 7; object-fit: cover; border-bottom: 1px solid var(--frame-line); }
.game-cover { display: block; width: 100%; max-width: 820px; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--frame-line); box-shadow: var(--shadow); }
.cover-field { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.cover-field > div { flex: 1; min-width: 240px; }
.cover-field__img { width: 200px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--bone-400); }

.review-banner { display: grid; gap: var(--space-2); justify-items: start; margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius); border-left: 4px solid var(--steel); background: rgba(164, 191, 195, .1); }
.review-banner p { margin: 0; color: var(--text-muted); }
.review-banner--returned { border-color: var(--ember); background: rgba(214, 160, 106, .12); }
.review-banner--returned p { color: var(--text); white-space: pre-line; }
.drafts { margin-bottom: var(--space-5); border-left: 4px solid var(--steel); }
.drafts ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }

.reports-filters .input[type="search"] { flex: 1; min-width: 240px; }
.report { display: grid; gap: var(--space-3); }
.report__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.report__head p { margin: 2px 0 0; }
.report__title { margin: 0; font-size: 1.35rem; }
.report__title a { color: var(--bone-50); text-decoration: none; }
.report__title a:hover { color: var(--rose-light); }
.report__party { margin: 0; color: var(--text-muted); }
.report__party small { color: var(--emerald); }
.report__absent { text-decoration: line-through; opacity: .6; }
.report__body { padding-top: var(--space-3); border-top: 1px solid var(--frame-line); }

.review-list { display: grid; gap: var(--space-3); }
.review-item { display: flex; align-items: center; gap: var(--space-4); color: var(--text); text-decoration: none; }
.review-item:hover { color: var(--text); }
.review-item__cover { flex: none; width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.review-item__cover--none { display: grid; place-items: center; font-size: .75rem; color: var(--ember); border: 1px dashed var(--ember); }
.review-item__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.review-item__body b { font: 700 1.1rem var(--font-heading); color: var(--bone-50); }
.review-item__body small { font-size: .8rem; color: var(--text-muted); }
.review-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
.review-grid__h { margin: 0 0 var(--space-3); font-size: 1.15rem; }
.tg-preview { max-width: 420px; overflow: hidden; border-radius: 14px; background: #17212b; color: #f5f5f5; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.4; box-shadow: var(--shadow); }
.tg-preview__photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tg-preview__photo--none { display: grid; place-items: center; color: var(--ember); background: rgba(214, 160, 106, .1); }
.tg-preview__text { padding: 10px 12px 12px; word-break: break-word; }
.tg-preview__text a { color: #6ab3f3; }
.tg-preview__btn { margin: 0 6px 6px; padding: 8px; text-align: center; font-weight: 600; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.review-problems { margin: 0 0 var(--space-3); padding-left: 1.2em; color: var(--ember); }
.review-facts { display: grid; gap: 6px; margin: 0 0 var(--space-3); }
.review-facts div { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-2); }
.review-facts dt { color: var(--text-muted); }
.review-facts dd { margin: 0; }
.review-desc summary { cursor: pointer; color: var(--steel); font-size: var(--fs-sm); }
.review-form { display: grid; gap: var(--space-3); }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .review-item { flex-wrap: wrap; } .review-item__cover { width: 100%; } }

/* Тип игры: Н — независимая, К — кампания, ВМ — West Marches */
.badge--type { min-width: 2.2em; justify-content: center; font-weight: 800; letter-spacing: .04em; color: var(--bone-50); border-color: transparent; }
.badge--oneshot { background: var(--steel-dim); }
.badge--campaign { background: var(--wine); }
.badge--westmarches { background: #2f6b45; }
.statblock__subtitle .badge--type { vertical-align: 2px; font-style: normal; }
.type-pick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.type-pick__item { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.type-pick__item input { position: absolute; opacity: 0; pointer-events: none; }
.type-pick__item span { padding: .5em 1em; font-size: var(--fs-sm); border: 1px solid var(--bone-400); border-radius: 99px; color: var(--bone-ink); background: rgba(255, 255, 255, .35); transition: background .15s, border-color .15s; }
.type-pick__item input:checked + span { color: var(--bone-50); background: var(--wine); border-color: var(--wine); }
.type-pick__item input:focus-visible + span { outline: 2px solid var(--steel); outline-offset: 2px; }
.game-quote { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--wine); font-style: italic; color: var(--bone-ink-soft); background: rgba(143, 65, 72, .06); }
.tg-preview__text blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid #6ab3f3; border-radius: 4px; background: rgba(106, 179, 243, .1); }

/* ---------- Абонемент ---------- */
.balance-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2) var(--space-5); border-left: 4px solid var(--emerald); }
.balance-card--low { border-left-color: var(--ember); }
.balance-card--blocked { border-left-color: var(--wine-bright); }
.balance-card__value { grid-row: span 2; font: 700 3.4rem/1 var(--font-heading); color: var(--bone-50); min-width: 1.4em; text-align: center; }
.balance-card--blocked .balance-card__value { color: var(--rose-light); }
.balance-card__text { display: grid; gap: 2px; }
.balance-card__text b { font: 700 1.2rem var(--font-heading); color: var(--bone-50); }
.balance-card__text span { color: var(--text-muted); }
.balance-history__title { margin: 0 0 var(--space-3); font-size: 1.2rem; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta--plus { color: var(--emerald); font-weight: 700; }
.delta--minus { color: var(--rose-light); font-weight: 700; }
.paper .delta--minus { color: var(--wine); }
.menu-balance { min-width: 1.6em; padding: 0 .45em; text-align: center; font-size: .75rem; font-weight: 700; color: var(--navy); background: var(--steel); border-radius: 99px; }
.menu-balance--minus { color: var(--bone-50); background: var(--wine); }
.balance-pill { padding: .2em .8em; font-weight: 700; font-size: var(--fs-sm); color: var(--navy); background: var(--steel); border-radius: 99px; }
.balance-pill--minus { color: var(--bone-50); background: var(--wine); }
.balance-forms { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.balance-forms .input { width: auto; min-height: 36px; }
.balance-forms input[name="comment"] { flex: 1; min-width: 180px; }
@media (max-width: 560px) { .balance-card { grid-template-columns: 1fr; text-align: center; } .balance-card__value { grid-row: auto; } }

/* ---------- Персонажи клуба: звания, ранги, каталог, кладбище ---------- */
.honor { display: inline-flex; align-items: center; padding: .15em .7em; font: 600 .78rem/1.5 var(--font-body); color: var(--bone-50); background: rgba(143, 65, 72, .35); border: 1px solid rgba(167, 102, 106, .6); border-radius: 99px; white-space: nowrap; }
.honor--rank { color: var(--navy); background: var(--steel); border-color: var(--steel); }
.honor--add { cursor: pointer; color: var(--steel-bright); background: none; border-style: dashed; border-color: var(--steel-dim); font-family: var(--font-body); }
.honor--add:hover { color: var(--bone-50); border-color: var(--steel); }
.honors-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.new-char { display: grid; gap: var(--space-3); margin: 0; }
.new-char__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.new-char textarea { resize: vertical; min-height: 64px; }
.new-char--wizard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.new-char--wizard b { font: 700 1.15rem var(--font-heading); color: var(--bone-50); }
.new-char--wizard p { margin: 4px 0 0; }
.lss-import .new-char { margin-top: var(--space-3); }
.char-card--fallen { filter: grayscale(.7); opacity: .85; }
.char-card__fallen { color: var(--rose-light); }

.catalog-search { flex: 1; min-width: 260px; }
.catalog { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
.catalog-card { display: flex; gap: var(--space-4); align-items: flex-start; }
.catalog-card__face { position: relative; flex: none; width: 84px; height: 92px; display: grid; place-items: center; clip-path: var(--hex); background: var(--steel-dim); text-decoration: none; font: 700 1.6rem var(--font-heading); color: var(--bone-50); }
.catalog-card__face::before { content: ""; position: absolute; inset: 3px; clip-path: var(--hex); background: linear-gradient(160deg, var(--wine-bright), var(--wine-deep)); }
.catalog-card__face span { position: relative; }
.catalog-card__face img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; clip-path: var(--hex); z-index: 1; }
.catalog-card__face.has-portrait span { display: none; }
.catalog-card__body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.catalog-card__name { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.catalog-card__name a { color: var(--bone-50); text-decoration: none; }
.catalog-card__name a:hover { color: var(--rose-light); }
.catalog-card__meta { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.catalog-card__desc { margin: 2px 0; font-style: italic; line-height: 1.45; color: var(--text); white-space: pre-line; }
.catalog-card__foot { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); margin: 4px 0 0; font-size: .8rem; color: var(--text-faint); }
.catalog-card__mod { margin: 0; }

.graves { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); align-items: start; }
.grave {
  display: grid; justify-items: center; gap: 8px; text-align: center; padding: var(--space-6) var(--space-5) var(--space-5);
  background: linear-gradient(180deg, #4a5560, #2c353f 70%); color: #e4e7e2;
  border: 1px solid #5d6a75; border-radius: 140px 140px 14px 14px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 18px 30px rgba(0, 0, 0, .35);
}
.grave__face { position: relative; width: 76px; height: 84px; display: grid; place-items: center; clip-path: var(--hex); background: #77838c; text-decoration: none; font-size: 1.8rem; color: #2c353f; }
.grave__face img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; clip-path: var(--hex); filter: grayscale(1) contrast(.95); }
.grave__name { margin: 4px 0 0; font-size: 1.45rem; line-height: 1.15; }
.grave__name a { color: #f2f1ea; text-decoration: none; }
.grave__meta, .grave__dates { margin: 0; font-size: .82rem; color: #b9c2c7; }
.grave__dates { letter-spacing: .06em; }
.grave__epitaph { margin: 6px 0; font-style: italic; line-height: 1.45; color: #eceee8; white-space: pre-line; }
.grave__foot { margin: 0; font-size: .78rem; line-height: 1.5; color: #aeb7bd; }
.grave__foot a, .grave .link-btn { color: #d3e2e3; }
.grave .honors-line { justify-content: center; }
.grave .honor { background: rgba(0, 0, 0, .25); border-color: #77838c; }
.grave .honor--rank { color: #2c353f; background: #c9d2d6; border-color: #c9d2d6; }

/* ---------- Оплата игр, связь с Мастером, материалы ---------- */
.badge--price { color: var(--ember); }
.paper .badge--price { color: #8a5418; }
.contact-btn { gap: 8px; }
.contact-btn svg { width: 18px; height: 18px; }
.contact-master { font-size: .85em; }
.paid-list { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.materials { list-style: none; margin: 0; padding: 0; display: grid; }
.materials.card { padding: var(--space-2) var(--space-4); }
.material { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--frame-line); }
.material:first-child { border-top: 0; }
.material__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; font: 700 .72rem var(--font-body); letter-spacing: .04em; color: var(--bone-50); background: linear-gradient(160deg, var(--wine-bright), var(--wine-deep)); border-radius: var(--radius-sm); }
.material__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.material__body b a { color: var(--bone-50); text-decoration: none; }
.material__body b a:hover { color: var(--rose-light); }
.material__body p { margin: 2px 0; font-size: var(--fs-sm); color: var(--text); white-space: pre-line; }
.material__body small { font-size: .78rem; color: var(--text-faint); }
.material form { margin: 0; }
.materials--compact .material { padding: var(--space-2) 0; }
.materials--compact .material__icon { width: 40px; height: 40px; font-size: .62rem; }

/* Импорт из Long Story Short */
.lss-import { margin: 0; }
.lss-import summary { cursor: pointer; list-style: none; }
.lss-import summary::-webkit-details-marker { display: none; }
.lss-import__form { display: grid; gap: var(--space-2); margin-top: var(--space-3); justify-items: start; }
.lss-import__form .input { width: 100%; }

/* ---------- Модальные окна (data-modal) и итоги сессий ---------- */
.modal { width: min(880px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; color: inherit; background: none; border: 0; overflow: visible; }
.modal::backdrop { background: rgba(5, 8, 16, .72); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal__paper { max-height: calc(100dvh - 44px); overflow-y: auto; margin: 6px; }
.modal__paper h2 { margin: 0 2.2rem var(--space-1) 0; }
.modal__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; font-size: 1.6rem; line-height: 1; color: var(--bone-ink-soft); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.modal__x:hover { color: var(--wine); background: rgba(143, 65, 72, .1); }
.modal--narrow { width: min(560px, calc(100vw - 24px)); }
/* сообщения об ошибках в Зале Совета */
.bug { display: grid; gap: var(--space-2); }
.bug.is-resolved { opacity: .7; }
.bug__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bug__text { margin: 0; white-space: pre-wrap; }
.bug__meta { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); word-break: break-all; }
.bug__reply { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--emerald); background: rgba(127, 174, 143, .1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.bug__reply p { margin: 4px 0 0; }
.bug__answer > summary { cursor: pointer; color: var(--steel-bright); font-weight: 700; }
.bug__answer .form { margin-top: var(--space-2); gap: var(--space-2); }
.bug__shot img { max-width: min(100%, 420px); max-height: 320px; border-radius: var(--radius-sm); border: 1px solid var(--frame-line); }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }
.session-form__all { max-width: 340px; }
.xp-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xp-cell .input { max-width: 110px; }
.session-form__pay { margin: var(--space-3) 0; }
.session-form__pay > summary { cursor: pointer; font-weight: 600; }
.tabs__count--alert { color: var(--bone-50); background: var(--wine-bright); }
.reports-block { margin-bottom: var(--space-6); }
.reports-block h2 { display: flex; align-items: center; gap: var(--space-2); }
.session-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.session-list__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); }
.session-list__row small { display: block; }
.session-list__excerpt { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- Тайный вход в автомат «КРИТ!»: пустой левый угол шапки ---------- */
.secret-slot {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 1;
  width: max(14px, calc((100vw - var(--container)) / 2)); display: grid; place-items: center;
  opacity: 0; transition: opacity .5s ease;
}
.secret-slot svg { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(231, 200, 115, .55)); }
.secret-slot:hover, .secret-slot:focus-visible { opacity: 1; }
.secret-slot:hover svg { animation: secret-wiggle .7s ease-in-out; }
.secret-slot:focus-visible { outline: none; }
.secret-slot:focus-visible svg { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 6px; }
@keyframes secret-wiggle { 20% { transform: rotate(-12deg) scale(1.1); } 40% { transform: rotate(10deg) scale(1.1); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@media (max-width: 1240px) { .secret-slot svg { width: 14px; height: 14px; } }
@media (prefers-reduced-motion: reduce) { .secret-slot:hover svg { animation: none; } }

/* ---------- Партия на странице игры: карточки в основной колонке ---------- */
.party__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.party__head h2 { margin: 0; }
.party__seats { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.roster--grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--space-3); }
.roster--grid .roster__row { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(11, 15, 28, .35); }
.roster--grid .roster__row:hover { border-color: var(--steel-dim); }
.roster--grid .roster__name { white-space: normal; line-height: 1.35; }
.roster--grid .avatar--sm { width: 44px; height: 48px; flex: none; }

/* страница игры на телефоне: описание → запись → «Написать Мастеру» → партия → остальное */
@media (max-width: 900px) {
  .game-layout { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .game-layout > .stack { display: contents; }
  .game-layout > .stack > * { order: 5; }
  .game-layout .game-cover, .game-layout .statblock { order: 1; }
  .game-layout .game-join { order: 2; }
  .game-layout .contact-btn { order: 3; }
  .game-layout .party { order: 4; }
}

/* ---------- Мероприятия: выбор типа, цена ---------- */
.ev-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; border: 0; }
.ev-kind { position: relative; display: grid; gap: 4px; padding: var(--space-3); color: var(--bone-ink); text-decoration: none; border: 1px solid var(--bone-400); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .45); cursor: pointer; transition: border-color .12s, background .12s; }
.paper a.ev-kind { color: var(--bone-ink); text-decoration: none; }
.ev-kind:hover { border-color: var(--wine); }
.ev-kind input { position: absolute; opacity: 0; pointer-events: none; }
.ev-kind:has(input:checked) { border-color: var(--wine); background: rgba(143, 65, 72, .12); box-shadow: inset 3px 0 0 var(--wine); }
.ev-kind:has(input:focus-visible) { outline: 2px solid var(--wine); outline-offset: 2px; }
.ev-kind b { font: 700 1.05rem var(--font-heading); }
.ev-kind span { font-size: var(--fs-sm); color: var(--bone-ink-soft); }
.ev-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ev-price { display: inline-flex; align-items: center; gap: var(--space-2); }
.ev-price input { width: 110px; }
.ev-switch { margin: 0 0 var(--space-3); }
.badge--ev-event { color: #2c4f86; }
.badge--ev-tech { color: #3d5560; }

/* разброс уровней в форме игры */
.level-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -.4rem 0 var(--space-2); }
.level-presets button { padding: .2em .7em; font: inherit; font-weight: 700; color: var(--bone-ink); background: rgba(255, 255, 255, .5); border: 1px solid var(--bone-400); border-radius: 99px; cursor: pointer; }
.level-presets button:hover { border-color: var(--wine); color: var(--wine); }
.level-presets button.is-active { color: var(--bone-50); background: var(--wine); border-color: var(--wine); }

/* Mini App: заставка входа */
.tg-app { text-align: center; }
.tg-app__logo { margin: 0 auto var(--space-3); border-radius: 22%; box-shadow: var(--shadow); }

/* ---------- Покупка пакета переводом ---------- */
.buy__form { display: grid; gap: var(--space-3); }
.buy__packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2); }
.buy__pkg { position: relative; display: grid; justify-items: center; gap: 2px; padding: var(--space-3) var(--space-2); text-align: center; border: 1px solid var(--ink-600); border-radius: var(--radius-sm); background: rgba(11, 15, 28, .4); cursor: pointer; transition: border-color .12s, background .12s; }
.buy__pkg input { position: absolute; opacity: 0; pointer-events: none; }
.buy__pkg b { font: 700 1.8rem/1 var(--font-heading); color: var(--bone-50); }
.buy__pkg span { font-size: var(--fs-xs); color: var(--text-muted); }
.buy__pkg em { margin-top: 4px; font-style: normal; font-weight: 700; color: var(--steel-bright); }
.buy__pkg:hover { border-color: var(--steel-dim); }
.buy__pkg:has(input:checked) { border-color: var(--wine-bright); background: rgba(143, 65, 72, .3); box-shadow: inset 0 0 0 1px var(--wine-bright); }
.buy__pkg:has(input:focus-visible) { outline: 2px solid var(--steel); outline-offset: 2px; }
.buy__details { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-3); border: 1px dashed var(--steel-dim); border-radius: var(--radius-sm); }
.buy__details dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: 0; }
.buy__details dt { color: var(--text-muted); font-size: var(--fs-sm); }
.buy__details dd { margin: 0; }
.buy__qr { border-radius: var(--radius-sm); background: #fff; padding: 6px; }
.buy__requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.buy__requests span { color: var(--text-muted); }
.buy__status--approved { color: var(--emerald); }
.buy__status--rejected { color: var(--rose-light); }
.pay-list { display: grid; gap: var(--space-2); }
.pay-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.pay-item__who { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 220px; }
.pay-item__sum { display: grid; text-align: right; }
.pay-item__sum b { font: 700 1.3rem var(--font-heading); color: var(--steel-bright); }
.pay-item__sum small { color: var(--text-muted); }
.pay-item__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 100%; }
.pay-item__actions .input { flex: 1 1 200px; }
.pay-prices { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.pay-qr { display: block; margin-bottom: 6px; background: #fff; border-radius: var(--radius-sm); }

/* опрос партии */
.poll__list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.poll__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.poll__row.is-mine { border-color: var(--wine-bright); background: rgba(143, 65, 72, .18); }
.poll__opt { padding: 0; font: inherit; font-weight: 700; color: var(--bone-50); text-align: left; background: none; border: 0; cursor: pointer; }
button.poll__opt:hover { color: var(--rose-light); }
.poll__count { font: 700 1.2rem var(--font-heading); color: var(--steel-bright); }
.poll__who { grid-column: 1 / -1; }

/* форма игры и мероприятия: «Своё время» */
.custom-time { display: grid; gap: var(--space-2); }
.field[hidden], [data-custom-fields][hidden] { display: none; }