:root {
  --bg: #0e0e11; --sf: #17171c; --sf2: #1f1f26;
  --tx: #f1f1f3; --tx2: #9c9ca6; --tx3: #5c5c66; --bd: #2b2b33;
  --ac: #e8332a; --ac-h: #f04339; --acsf: #2a0d0c;
  --ok: #2fa45c; --oksf: #0e2417;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font: 15px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--ac); text-decoration: none; }
a:hover { color: var(--ac-h); }
h1 { font-size: 24px; font-weight: 650; margin: 22px 0 14px; }
h2 { font-size: 18px; font-weight: 600; margin: 18px 0 10px; }
code { background: var(--sf2); padding: 2px 6px; border-radius: 5px; font-size: 13px; }

/* Кастомный скроллбар (в стиле тёмной темы) */
* { scrollbar-width: thin; scrollbar-color: var(--bd) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx3); }

.container { width: 100%; max-width: none; margin: 0; padding: 0 24px; }
main.container { flex: 1; padding-bottom: 40px; }

/* ── Шапка ─────────────────────────────────────── */
.site-header {
  background: var(--sf); border-bottom: 1px solid var(--bd);
  position: sticky; top: 0; z-index: 50;
}
.header-inner { width: 100%; padding: 0 24px; }
.header-row { display: flex; align-items: center; gap: 10px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--tx); min-width: 0; }
.brand:hover { color: var(--tx); }
.brand-text { display: flex; flex-direction: column; gap:7px; min-width:0; line-height: 1.18; }
.brand-text b { font-family:Georgia,'Times New Roman',serif; font-size:23px; font-weight:400; letter-spacing:-.65px; color:#f4e9de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text b span{color:#f1f1f3}
.brand-text i { display:flex;align-items:center;gap:8px;font-style:normal;font-size:8px;letter-spacing:1.05px;text-transform:uppercase;color:#a9a1a0;white-space:nowrap; }
.brand-text i::before{content:'';width:15px;height:1px;flex:none;background:#e84c43}
.brand-university{padding-left:8px;border-left:1px solid #ffffff26;color:#cfb9a9;letter-spacing:1.3px}
.logo-svg { display: block; }

/* ── «Живое» лого: PNG распилен на слои (logo_hat/logo_face), поверх колец-«линз» —
   живые глаза: белая склера + тёмный зрачок (цвет фона шапки --sf, дырки прозрачны).
   Цикл ~13с: моргнул → посмотрел влево/вправо → прищурился → подмигнул правым →
   поправил шляпу (шляпа приподнимается, зрачки смотрят вверх). ── */
.logo-anim { position: relative; display: block; flex: none; width: 60px; aspect-ratio: 527 / 722; }
.logo-anim .logo-face, .logo-anim .logo-hat { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.logo-anim .logo-face { z-index: 1; }
/* порядок слоёв: лицо(1) < глаза(2) < шляпа(3) < руки(4) — сползая, шляпа накрывает глаза */
.logo-anim .logo-hat { z-index: 3; transform-origin: 50% 60%; }
/* Контейнер руки = весь бокс лого: тогда translateY в keyframes у рук и шляпы
   считается от одной базы, и на участке подъёма им заданы одинаковые значения —
   рассинхрон невозможен. Сама рука позиционируется картинкой внутри. */
.logo-anim .logo-arm { position: absolute; inset: 0; opacity: 0; z-index: 4; pointer-events: none; }
.logo-anim .logo-arm img { position: absolute; width: 44%; aspect-ratio: 1; top: 24%; display: block; }
.logo-anim .logo-arm.aL img { left: -13%; }
.logo-anim .logo-arm.aR img { right: -13%; transform: scaleX(-1); }
.logo-name-arm{position:absolute;left:58%;top:45%;width:60%;aspect-ratio:1;z-index:5;opacity:0;pointer-events:none;transform-origin:16% 92%}
.logo-name-arm img{display:block;width:100%;height:100%}
.logo-name-forearm{position:absolute;left:63%;top:88%;width:0;height:2.5px;border-radius:3px;background:#fff;z-index:4;opacity:0;transform-origin:left center;pointer-events:none}
.logo-name-root,.logo-name-joint{position:absolute;width:0;height:0;pointer-events:none}.logo-name-root{left:63%;top:88%}.logo-name-joint{left:16%;top:94%}
.logo-anim.s-name-pat .logo-name-arm{animation:logoNamePat 3.6s ease-in-out}
.logo-anim.s-name-straighten .logo-name-arm{animation:logoNameStraighten 4.2s ease-in-out}
.brand.s-name-pat .brand-text b{animation:brandNamePat 3.6s ease-in-out;transform-origin:left center}
.brand.s-name-straighten .brand-text b{animation:brandNameStraighten 4.2s ease-in-out;transform-origin:left center}
.logo-anim.s-name-pat .logo-eye2 i,.logo-anim.s-name-straighten .logo-eye2 i{transform:translateX(35%);transition:transform .35s}
@keyframes logoNamePat{
  0%,12%,100%{opacity:0;transform:translate(0,12px) rotate(20deg)}
  22%{opacity:1;transform:translate(0,0)}
  38%,60%{opacity:1;transform:translate(var(--name-reach-x),var(--name-reach-y))}
  49%,71%{opacity:1;transform:translate(calc(var(--name-reach-x) + 9px),calc(var(--name-reach-y) + 2px))}
  86%{opacity:1;transform:translate(0,5px) rotate(10deg)}
  92%{opacity:0;transform:translate(0,12px) rotate(20deg)}
}
@keyframes brandNamePat{
  0%,35%,78%,100%{transform:none}
  49%,71%{transform:translateY(1px) rotate(.25deg)}
  60%{transform:translateY(-.5px)}
}
@keyframes logoNameStraighten{
  0%,12%,100%{opacity:0;transform:translate(0,12px) rotate(20deg)}
  22%{opacity:1;transform:translate(0,0)}
  38%,45%{opacity:1;transform:translate(var(--name-reach-x),calc(var(--name-reach-y) + 4px))}
  59%,69%{opacity:1;transform:translate(var(--name-reach-x),calc(var(--name-reach-y) - 1px))}
  84%{opacity:1;transform:translate(0,5px) rotate(10deg)}
  92%{opacity:0;transform:translate(0,12px) rotate(20deg)}
}
@keyframes brandNameStraighten{
  0%,28%,100%{transform:none}
  38%,45%{transform:translateY(2px) rotate(.7deg)}
  59%,69%{transform:translateY(-1px) rotate(-.2deg)}
  78%{transform:none}
}
.logo-eye2 { position: absolute; width: 9.2%; aspect-ratio: 1; background: #fff; border-radius: 50%; pointer-events: none; z-index: 2; }
.logo-eye2.e2l { left: 12.2%; top: 49.95%; }  /* центр левой линзы 16.78% / 53.31% */
.logo-eye2.e2r { left: 66.3%; top: 50.25%; }  /* центр правой линзы 70.88% / 53.61% */
/* Зрачок 56% (не 52%): полностью накрывает прозрачную дырку кольца (26px против 27.2px),
   иначе вокруг зрачка сквозит тёмный фон серпом и глаза кажутся разного размера. */
.logo-eye2 i { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; background: var(--sf); border-radius: 50%; display: block; transition: transform 0.1s ease-out; }

/* ── Сцены лого ─────────────────────────────────────
   Запускает JS в layout.php: классы s-hat/s-dream/s-wink/s-sus на .logo-anim по кругу
   с паузой между сценами. Между сценами на десктопе зрачки следят за курсором
   (inline transform от JS; во время сцены keyframes его переопределяют). */
.logo-anim.s-hat .logo-hat { animation: logoHat 6.5s ease-in-out; }
.logo-anim.s-hat .logo-arm { animation: logoArm 6.5s ease-in-out; }
.logo-anim.s-hat .logo-eye2 i { animation: logoScan 6.5s ease-in-out; transition: none; }
@keyframes logoScan { /* высматривает влево/вправо с прищуром, затем удивлённо вверх на шляпу */
  0%, 5% { transform: none; }
  7% { transform: scaleY(0.08); }                          /* моргнул */
  9%, 12% { transform: none; }
  16%, 23% { transform: translateX(-46%) scaleY(0.72); }   /* высматривает влево, прищур */
  27% { transform: none; }
  31%, 38% { transform: translateX(46%) scaleY(0.72); }    /* вправо, прищур */
  42% { transform: none; }
  50%, 68% { transform: translateY(-44%) scaleY(1.12); }   /* шляпа сползла — удивлённо вверх */
  74%, 100% { transform: none; }
}
/* Синхрон рук и шляпы: одна база % и одинаковые значения 8%->0% на 60-68%. */
@keyframes logoHat {
  0%, 42% { transform: none; }
  48%, 60% { transform: translateY(8%) rotate(2deg); }     /* сползла и ждёт рук */
  66%, 68% { transform: translateY(0%) rotate(0deg); }     /* руки дотолкали на место */
  100% { transform: none; }
}
@keyframes logoArm { /* появление/уход мгновенные (~130мс) и внизу — не висит серым у шляпы */
  0%, 53% { opacity: 0; transform: translateY(22%); }
  54% { opacity: 1; transform: translateY(19%); }
  58%, 60% { opacity: 1; transform: translateY(8%); }      /* взялись: смещение = смещению шляпы */
  66%, 68% { opacity: 1; transform: translateY(0%); }      /* приехали вместе со шляпой */
  71% { opacity: 1; transform: translateY(6%); }
  74% { opacity: 1; transform: translateY(18%); }
  75%, 100% { opacity: 0; transform: translateY(22%); }
}

/* «Задремал»: глаза слипаются, шляпа сползает… вздрогнул, руки вернули шляпу */
.logo-anim.s-dream .logo-hat { animation: logoDreamHat 5.4s ease-in-out; }
.logo-anim.s-dream .logo-arm { animation: logoDreamArm 5.4s ease-in-out; }
.logo-anim.s-dream .logo-eye2 i { animation: logoDreamEye 5.4s ease-in-out; transition: none; }
@keyframes logoDreamEye {
  0%, 8% { transform: none; }
  34% { transform: translateY(16%) scaleY(0.42); }
  46% { transform: translateY(20%) scaleY(0.3); }
  49% { transform: translateY(-20%) scaleY(1.18); }        /* вздрогнул */
  53%, 74% { transform: translateY(-44%) scaleY(1.18); }
  82%, 89% { transform: none; }
  91% { transform: scaleY(0.08); }                         /* виноватое моргание */
  93%, 100% { transform: none; }
}
@keyframes logoDreamHat {
  0%, 12% { transform: none; }
  44% { transform: translateY(6.5%) rotate(1.8deg); }
  49%, 58% { transform: translateY(7.5%) rotate(2.2deg); }
  70%, 100% { transform: none; }
}
@keyframes logoDreamArm {
  0%, 51% { opacity: 0; transform: translateY(22%); }
  52% { opacity: 1; transform: translateY(19%); }
  56%, 58% { opacity: 1; transform: translateY(7.5%); }
  70%, 72% { opacity: 1; transform: translateY(0%); }
  76% { opacity: 1; transform: translateY(6%); }
  79% { opacity: 1; transform: translateY(18%); }
  80%, 100% { opacity: 0; transform: translateY(22%); }
}

/* «Подмигнул»: только правый глаз */
.logo-anim.s-wink .logo-eye2.e2r i { animation: logoWinkEye 2.4s ease-in-out; transition: none; }
@keyframes logoWinkEye {
  0%, 28% { transform: none; }
  34%, 46% { transform: scaleY(0.05); }
  54%, 100% { transform: none; }
}

/* «Подозрительный взгляд»: медленно влево с прищуром, рывок вправо, назад */
.logo-anim.s-sus .logo-eye2 i { animation: logoSusEye 3.8s ease-in-out; transition: none; }
@keyframes logoSusEye {
  0%, 7% { transform: none; }
  24%, 46% { transform: translateX(-46%) scaleY(0.6); }
  50%, 72% { transform: translateX(46%) scaleY(0.6); }
  80%, 100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-anim .logo-hat, .logo-anim .logo-arm, .logo-eye2 i { animation: none !important; transition: none; }
  .logo-name-arm,.logo-name-forearm{display:none}.brand .brand-text b{animation:none!important;transform:none!important}
}

/* ══════════ Оболочка приложения (Capacitor WebView) — только body.app ══════════
   Даёт «нативный» опыт поверх живого сайта: нижняя таб-навигация, safe-area,
   индикатор перехода, pull-to-refresh, тосты. В обычном вебе не рендерится. */
body.app .site-header { padding-top: env(safe-area-inset-top); }
body.app .burger { display: none !important; }
body.app .site-footer { display: none; }
body.app main.container { padding-bottom: calc(58px + env(safe-area-inset-bottom) + 14px); }
/* На телефоне заголовок центрируем без бургера, оставляем бренд + правый блок */
body.app .header-row { gap: 8px; }

/* Нижняя таб-навигация */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; background: rgba(16,16,20,0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--bd); padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.35);
}
.tabbar a, .tabbar button {
  flex: 1 1 0; min-width: 0; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px 2px 7px; color: var(--tx2); font: 600 10.5px/1 inherit;
  text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative;
  transition: color .15s, transform .1s;
}
.tabbar svg { width: 23px; height: 23px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabbar .t-lbl { letter-spacing: .01em; white-space: nowrap; }
.tabbar a.active { color: var(--ac); }
.tabbar a.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ac);
}
.tabbar a:active, .tabbar button:active { transform: scale(.92); }
.tabbar .t-badge {
  position: absolute; top: 5px; left: calc(50% + 7px); background: var(--ac); color: #fff;
  font: 700 9px/1 inherit; min-width: 15px; height: 15px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; box-sizing: border-box;
}

/* Индикатор перехода */
.nav-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 300;
  background: linear-gradient(90deg, var(--ac), #ff6a5f);
  transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none;
}
.nav-progress.go { animation: navProg 1.4s ease-out forwards; opacity: 1; }
@keyframes navProg { 0% { transform: scaleX(0); } 55% { transform: scaleX(.7); } 100% { transform: scaleX(.95); } }

/* Pull-to-refresh */
.ptr {
  position: fixed; top: env(safe-area-inset-top); left: 50%; z-index: 250;
  width: 34px; height: 34px; border-radius: 50%; background: var(--sf); border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: transform .18s ease;
}
.ptr-spin { width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid var(--bd); border-top-color: var(--ac); }
.ptr.ready .ptr-spin { border-top-color: var(--ok, #35c26b); }
.ptr.spin .ptr-spin { animation: ptrSpin .7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* Мини-тост */
.app-toast {
  position: fixed; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); background: rgba(0,0,0,.86); color: #fff;
  font-size: 13px; padding: 9px 16px; border-radius: 20px; z-index: 400;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  max-width: 80vw; text-align: center;
}
.app-toast.show { opacity: 1; transform: translate(-50%, 0); }

.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  color: var(--tx2); padding: 7px 10px; border-radius: 8px;
  font-size: 13.5px; white-space: nowrap;
}
.nav a:hover { color: var(--tx); background: var(--sf2); }
.nav a.active { color: var(--tx); background: var(--sf2); font-weight: 550; }

.header-right { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.theme-btn {
  background: transparent; color: var(--tx2); border: 1px solid var(--bd);
  border-radius: 8px; padding: 7px 9px; cursor: pointer; display: flex; align-items: center;
}
.theme-btn:hover { color: var(--tx); border-color: var(--tx2); }

.btn {
  display: inline-block; background: var(--ac); color: #fff; border: none;
  border-radius: 8px; padding: 9px 18px; font-size: 14px; font-weight: 550;
  cursor: pointer; text-align: center;
}
.btn:hover { background: var(--ac-h); color: #fff; }
.btn-ghost { background: transparent; color: var(--tx); border: 1px solid var(--bd); }
.btn-ghost:hover { background: var(--sf2); color: var(--tx); border-color: var(--tx2); }
.btn-block { display: block; width: 100%; }

.user-pill-wrap { position: relative; }
/* Мини-окно уведомлений у колокольчика; полная страница — кнопкой внизу окна */
.bell-wrap { position: relative; }
.bell-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; z-index: 60; overflow: hidden;
  background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.bell-pop[hidden] { display: none; }
.bell-pop-head { padding: 10px 14px; border-bottom: 1px solid var(--bd); font-size: 14px; font-weight: 700; }
.bell-pop-body { max-height: 360px; overflow-y: auto; }
.ntf-mini { display: block; padding: 9px 14px 9px 11px; border-left: 3px solid transparent; border-bottom: 1px solid var(--bd);
  color: var(--tx); text-decoration: none; }
a.ntf-mini:hover { background: var(--sf2); color: var(--tx); }
.ntf-mini.new { border-left-color: var(--ac); background: rgba(232,51,42,.06); }
.ntf-mini-text { font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ntf-mini-time { margin-top: 3px; font-size: 11px; color: var(--tx3); }
.ntf-mini-empty { padding: 16px 14px; color: var(--tx3); font-size: 13px; text-align: center; }
.bell-pop-all { display: block; padding: 10px 14px; color: var(--ac); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.bell-pop-all:hover { background: var(--sf2); color: var(--ac); }
@media (max-width: 560px) {
  /* Рядом с колокольчиком на телефоне места нет — окно на всю ширину под шапкой (top — из app.js) */
  .bell-pop { position: fixed; left: 8px; right: 8px; width: auto; }
}
.user-pill {
  border: 1px solid var(--bd); background: var(--sf2); color: var(--tx);
  border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 550; cursor: pointer;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-pill[data-staff-role] {
  color: rgb(var(--role-rgb)); border-color: rgba(var(--role-rgb),.5); background: rgba(var(--role-rgb),.10);
}
.user-pill .staff-role-icon { vertical-align: -3px; margin-right: 2px; }
.user-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--sf); border: 1px solid var(--bd); border-radius: 10px;
  min-width: 180px; padding: 6px; z-index: 60;
}
.user-menu.open { display: block; }
.user-menu a, .user-menu .linklike {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  color: var(--tx); font-size: 13.5px; border-radius: 7px;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.user-menu a:hover, .user-menu .linklike:hover { background: var(--sf2); }
.user-menu .danger { color: var(--ac); }
.user-menu-role {
  display: block; padding: 4px 10px 8px; font-size: 11px; color: var(--tx2);
  border-bottom: 1px solid var(--bd); margin-bottom: 4px;
}

.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--tx); margin: 4px 0; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Элементы выдвижного меню видны только на мобильных (ниже в @media) */
.nav-scrim, .nav-drawer-head, .nav-drawer-auth, .nav-close { display: none; }

.env-ribbon {
  background: var(--acsf); color: var(--ac); text-align: center;
  font-size: 11.5px; padding: 4px 10px;
}

/* ── Контент ───────────────────────────────────── */
.card {
  background: var(--sf); border: 1px solid var(--bd); border-radius: 12px;
  padding: 16px 18px; margin: 12px 0;
}
.card-accent { border-left: 3px solid var(--ac); border-radius: 0 12px 12px 0; }
.card-link { display: block; color: var(--tx); text-decoration: none; }
.card-link:hover { color: var(--tx); }
.card-compact { padding: 10px 12px; margin: 8px 0; }
.t-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.t-card .t-logo {
  width: 72px; height: 72px; flex: none;
  border-radius: 50%; overflow: hidden; border: 2px solid var(--bd); background: var(--sf2);
}
.t-card .t-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-card .t-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.t-card .t-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t-card .t-head h2 { margin: 0; font-size: 16.5px; line-height: 1.2; color: var(--tx); }
.t-card .t-meta { margin: 0; color: var(--tx2); font-size: 13px; }

.mate-card .mate-ttl { font-size: 12px; color: var(--tx2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.mate-card .mate-body { display: flex; align-items: center; gap: 14px; }
.mate-card .mate-info { flex: 1; min-width: 0; }
.mate-card .mate-name { font-size: 17px; font-weight: 600; color: var(--tx); }
.mate-card .mate-name:hover { color: var(--tx); }
.mate-card .mate-sub { font-size: 13px; color: var(--tx2); margin-top: 2px; }
.mate-card .mate-wr { flex: none; font-size: 24px; font-weight: 700; line-height: 1; text-align: right; }
.mate-card .mate-wr span { display: block; font-size: 10.5px; font-weight: 500; color: var(--tx2); margin-top: 3px; text-transform: uppercase; letter-spacing: .03em; }

.tables-grid { display: grid; gap: 14px; align-items: start; }
/* Карточки игр вечера — одинаковой высоты в ряду: при align-items:start соседние
   карточки обрывались на разной высоте из-за двухстрочных ников и пометок Ci/ПУ. */
.tables-grid.grid-equal { align-items: stretch; }
.tables-grid.grid-equal > .card { display: flex; flex-direction: column; }
/* Игры вечера: не больше трёх карточек в ряд (просьба руководителя). При четырёх колонка «Игрок»
   становилась такой узкой, что ник с пометкой «ПУ» переносился на вторую строку и строки таблицы
   прыгали по высоте. Минимум трека — 1/3 ширины сетки за вычетом двух зазоров, но не уже 330px:
   на узком экране колонок само станет две, а одна-две игры по-прежнему растягиваются на всю ширину. */
.games-grid { grid-template-columns: repeat(auto-fit, minmax(max(330px, (100% - 28px) / 3), 1fr)); }
.table-col { min-width: 0; }
.table-col > .card:first-of-type { margin-top: 0; }

/* Столы турнира остаются в одном ряду при любой ширине экрана. */
.tournament-tables-scroll {
  min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 12px;
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b74943 var(--sf2);
}
.tournament-tables-scroll:focus-visible { outline: 2px solid var(--ac); outline-offset: 4px; }
.tournament-tables-scroll::-webkit-scrollbar { height: 12px; }
.tournament-tables-scroll::-webkit-scrollbar-track { background: var(--sf2); border-radius: 999px; }
.tournament-tables-scroll::-webkit-scrollbar-thumb {
  background: #b74943; border: 3px solid var(--sf2); border-radius: 999px;
}
.tournament-tables-scroll::-webkit-scrollbar-thumb:hover { background: var(--ac); }
.tournament-tables-grid {
  display: grid; grid-template-columns: repeat(var(--table-count), minmax(650px, 1fr));
  gap: 14px; align-items: start;
}
/* Фиксированные числовые колонки не должны отнимать у ника всю ширину.
   На телефоне одностольная таблица тоже прокручивается внутри карточки. */
.tournament-game-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }
table.tbl.tournament-game-table { display: table; table-layout: fixed; width: 100%; min-width: 620px; }
.tournament-game-table th, .tournament-game-table td { white-space: nowrap; }
.tournament-game-table th:nth-child(2), .tournament-game-table td:nth-child(2) {
  white-space: normal; overflow-wrap: anywhere;
}

.suggest-btn { padding: 7px 12px; }

/* Галерея аватаров */
.avatar-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.ava-item { background: var(--sf2); border: 1px solid var(--bd); border-radius: 12px; padding: 8px; text-align: center; position: relative; }
.ava-item.ava-main { border-color: var(--ac); }
.ava-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.ava-badge { position: absolute; top: 12px; left: 12px; background: var(--ac); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 10px; }
.ava-actions { display: flex; gap: 6px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }
.ava-actions button { background: var(--sf); color: var(--tx); border: 1px solid var(--bd); border-radius: 6px; padding: 4px 9px; font-size: 12px; cursor: pointer; }
.ava-actions button:hover { border-color: var(--tx2); }
.ava-actions .ava-del { color: var(--ac); }

.hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero-info { flex: 1; min-width: 240px; }
.hero-date { font-size: 20px; font-weight: 650; margin: 4px 0 2px; }
.hero-place { color: var(--tx2); font-size: 14px; }

.tag {
  display: inline-block; font-size: 11.5px; font-weight: 550;
  padding: 3px 10px; border-radius: 20px; background: var(--sf2); color: var(--tx2);
}
.tag-open { background: var(--acsf); color: var(--ac); }
.tag-ok { background: var(--oksf); color: var(--ok); }
.tag-red { background: var(--ac); color: #fff; font-weight: 600; }
.tag-black { background: #000; color: #fff; border: 1px solid #555; font-weight: 600; }
.tag-draw { background: var(--sf2); color: var(--tx2); }
/* Тег-кнопка в форме — «удалить» в шапке карточки игры в протоколе судьи. */
.tag-form { display: inline; margin: 0; }
button.tag { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.tag-del { color: var(--ac); }
.tag-del:hover { background: var(--acsf); }
/* Карточка игры, которую сейчас правят в протоколе. */
.card.game-on { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); }

/* Стилизованный файловый инпут */
input[type="file"] { font-size: 13px; color: var(--tx2); }
input[type="file"]::file-selector-button {
  background: var(--sf2); color: var(--tx); border: 1px solid var(--bd);
  border-radius: 8px; padding: 8px 14px; margin-right: 10px; cursor: pointer; font-size: 13px;
}
input[type="file"]::file-selector-button:hover { border-color: var(--ac); color: var(--tx); }

.grid-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 12px 0; }
.grid-stats.gs-compact { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 8px; }
.gs-compact .stat { padding: 9px 11px; }
.gs-compact .stat .val { font-size: 19px; }
.gs-compact .stat .lbl { font-size: 11px; }
.stat { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; display: block; color: var(--tx); text-decoration: none; }
a.stat:hover { color: var(--tx); }
.stat .lbl { font-size: 11.5px; color: var(--tx2); }
.stat .val { font-size: 22px; font-weight: 650; }

/* «Как читать статистику» — расшифровка метрик под плитками */
.stat-help { margin: 10px 0 16px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf); overflow: hidden; }
.stat-help > summary { list-style: none; cursor: pointer; padding: 11px 15px; font-size: 13.5px; color: var(--tx2); font-weight: 600; user-select: none; }
.stat-help > summary::-webkit-details-marker { display: none; }
.stat-help > summary::after { content: '⌄'; float: right; font-size: 16px; transition: transform 0.2s ease; }
.stat-help[open] > summary::after { transform: rotate(180deg); }
.stat-help > summary:hover { color: var(--tx); }
.stat-help-body { padding: 2px 16px 14px; font-size: 13.5px; line-height: 1.6; color: var(--tx2); border-top: 1px solid var(--bd); }
.stat-help-body p { margin: 12px 0; }
.stat-help-body ul { margin: 10px 0 0; padding-left: 18px; }
.stat-help-body li { margin: 5px 0; }
.stat-help-body b { color: var(--tx); }

/* ELO простыми словами — сворачиваемая объяснялка на странице рейтинга */
.elo-explain { margin: 4px 0 18px; border: 1px solid var(--bd); border-radius: 12px; background: var(--sf); overflow: hidden; }
.elo-explain > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-size: 14.5px; color: var(--tx); font-weight: 650; user-select: none; }
.elo-explain > summary::-webkit-details-marker { display: none; }
.elo-explain > summary::after { content: '⌄'; float: right; font-size: 16px; transition: transform 0.2s ease; }
.elo-explain[open] > summary::after { transform: rotate(180deg); }
.elo-explain > summary:hover { color: var(--ac); }
.elo-explain-body { padding: 4px 16px 16px; font-size: 14px; line-height: 1.6; color: var(--tx2); border-top: 1px solid var(--bd); }
.elo-explain-body b { color: var(--tx); }
.elo-steps { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.elo-step { display: flex; gap: 12px; align-items: flex-start; }
.elo-step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--acsf); color: var(--ac); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.elo-ex { background: var(--sf2); border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.elo-ex-ttl { font-weight: 650; color: var(--tx); margin-bottom: 8px; font-size: 13.5px; }
.elo-ex-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 1.6fr auto; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.elo-ex-bar { background: rgba(255,255,255,0.06); border-radius: 6px; height: 12px; overflow: hidden; }
.elo-ex-bar i { display: block; height: 100%; border-radius: 6px; }
.elo-ex-v { color: var(--tx2); font-size: 12.5px; white-space: nowrap; text-align: right; }
@media (max-width: 560px) { .elo-ex-row { grid-template-columns: 1fr auto; } .elo-ex-bar { grid-column: 1 / -1; } }
/* точная формула ELO */
.elo-sub { font-weight: 700; color: var(--tx); margin: 20px 0 6px; font-size: 15.5px; }
.elo-step-ttl { font-weight: 650; color: var(--ac); margin: 16px 0 4px; font-size: 13.5px; }
.elo-formula { background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; padding: 11px 13px; margin: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.75; color: var(--tx); overflow-x: auto; white-space: pre; }
.elo-consts { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 4px; }
.elo-consts span { background: var(--sf2); border: 1px solid var(--bd); border-radius: 6px; padding: 3px 9px; color: var(--tx2); font-size: 12px; }
.elo-consts b { color: var(--tx); }
.elo-tbl-wrap { overflow-x: auto; margin: 8px 0; }
table.elo-worked { min-width: 440px; font-size: 12.5px; }
table.elo-worked th { color: var(--tx2); font-weight: 600; text-align: left; }
table.elo-worked td, table.elo-worked th { padding: 5px 8px; border-bottom: 1px solid var(--bd); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
/* Дети сеток/флексов могут сжиматься: min-width:auto распирал страницу на мобильном —
   карточка росла под nowrap-таблицу вместо её внутреннего скролла */
.hero > *, .grid-2 > *, .grid-2eq > *, .tables-grid > *, .grid-stats > * { min-width: 0; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; color: var(--tx2); font-size: 12px; font-weight: 550;
  padding: 8px 10px; border-bottom: 1px solid var(--bd);
}
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl.role-permissions-table { display: table; table-layout: fixed; width: 100%; min-width: 900px; }

/* Рейтинг: сортируемые заголовки и выделение «статистики по картам» */
.sortable thead th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable thead th:hover { color: var(--tx); }
.sortable thead th.sorted-asc::after { content: " ▲"; font-size: 9px; color: var(--ac); }
.sortable thead th.sorted-desc::after { content: " ▼"; font-size: 9px; color: var(--ac); }
.rating-tbl .c-cards { background-color: rgba(232,51,42,0.055); }
/* Красные разделители колонок — полоской фона внутри своей ячейки (background-image), а не
   внутренней тенью и не рамкой. Тень при масштабе экрана не 100% (Windows 125%) округлялась, и у
   ячеек вылезали тонкие красные полоски сверху и снизу (руководитель просил убрать); рамка при
   border-collapse наполовину лежит в соседней ячейке, и на телефоне её закрашивала прилипшая
   колонка «Игрок». Подсветка строк меняет только background-color — иначе сбросит и полоску. */
.rating-tbl .c-cards-first { background-image: linear-gradient(var(--ac), var(--ac)); background-size: 2px 100%;
  background-position: left top; background-repeat: no-repeat; }
.rating-tbl thead .c-cards { text-align: center; }
.rt-player { display: inline-flex; align-items: center; }

/* Номинации */
.noms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 16px; align-items: stretch; }
.noms-grid > .card { margin: 0; }
.nom-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; border-top: 2px solid var(--ac); }
.nom-title { font-size: 12px; color: var(--ac); font-weight: 600; margin-bottom: 8px; }
.nom-player { display: flex; align-items: center; gap: 8px; color: var(--tx); font-weight: 550; }
.nom-player:hover { color: var(--tx); }
.nom-meta { font-size: 12px; color: var(--tx2); margin-top: 6px; }

.field { margin: 0 0 14px; }
.field label { display: block; font-size: 13px; color: var(--tx2); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--sf2); color: var(--tx);
  border: 1px solid var(--bd); border-radius: 8px; padding: 10px 12px;
  font-size: 14px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ac);
}
.form-narrow { max-width: 380px; margin: 0 auto; }
.form-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 22px; }
.form-foot { text-align: center; font-size: 13.5px; color: var(--tx2); margin-top: 14px; }

.flash {
  position: relative; display: flex; align-items: center; gap: 11px;
  border-radius: 12px; padding: 13px 16px; margin: 14px 0;
  font-size: 14px; font-weight: 500; color: var(--tx);
  border: 1px solid var(--bd); overflow: hidden;
}
.flash::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.flash-ok {
  background: linear-gradient(135deg, rgba(47,164,92,0.18), var(--oksf) 65%);
  border-color: rgba(47,164,92,0.45); box-shadow: 0 6px 22px rgba(47,164,92,0.15);
}
.flash-ok::before { content: "\2713"; background: var(--ok); }
.flash-err {
  background: linear-gradient(135deg, rgba(232,51,42,0.18), var(--acsf) 65%);
  border-color: rgba(232,51,42,0.45); box-shadow: 0 6px 22px rgba(232,51,42,0.15);
}
.flash-err::before { content: "!"; background: var(--ac); }
.flash-warn {
  background: rgba(230,177,58,.12); border-color: rgba(230,177,58,.45);
}
.flash-warn::before { content: "!"; background: #e6b13a; color: #17171c; }

.empty-state { text-align: center; padding: 56px 16px; color: var(--tx2); }
.empty-state .empty-icon { opacity: .45; margin-bottom: 10px; }
.empty-state h2 { color: var(--tx); margin: 8px 0 6px; }
.empty-state p { max-width: 420px; margin: 0 auto; font-size: 14px; }
.empty-state p + .btn { margin-top: 20px; }

.admin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
/* Главная: карточки администрации заполняют блок по высоте (всегда 2–3 ряда, не 1 узкий) */
.admin-list.home-admins { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-content: stretch; }
@media (min-width: 1280px) { .admin-list.home-admins { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.admin-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  padding: 18px 12px 15px; background: var(--sf2);
  border: 1px solid var(--bd); border-radius: 14px;
}
a.admin-item { text-decoration: none; color: inherit; cursor: pointer; }
.admin-item > img, .admin-item > .avatar-circle { box-shadow: 0 0 0 3px var(--bd); }
.admin-item > div { min-width: 0; max-width: 100%; }
.avatar-circle {
  width: 30px; height: 30px; border-radius: 50%; background: var(--sf2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex: none;
}
.avatar-circle.accent { background: var(--acsf); color: var(--ac); }
.admin-item .nm {
  font-size: 14.5px; font-weight: 600; color: var(--tx); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-item .rl {
  display: inline-block; margin-top: 5px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--bd); color: var(--tx2);
}
/* Цвет и знак служебной роли одинаковы на карточке, в профиле и в меню. */
[data-staff-role] { --role-rgb: 166,170,184; }
[data-staff-role="owner"] { --role-rgb: 236,187,83; }
[data-staff-role="deputy"] { --role-rgb: 180,138,237; }
[data-staff-role="admin"] { --role-rgb: 98,165,239; }
[data-staff-role="organizer"] { --role-rgb: 78,197,169; }
[data-staff-role="judge"] { --role-rgb: 241,149,93; }
[data-staff-role="photographer"] { --role-rgb: 144,190,220; }
.role-chip {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  max-width: 100%; padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(var(--role-rgb),.25); background: rgba(var(--role-rgb),.10);
  color: rgb(var(--role-rgb)); font-size: 10px; line-height: 1.35; font-weight: 600;
  letter-spacing: .025em; text-transform: uppercase;
}
.role-chip > span { min-width: 0; }
.users-table .us-status, .users-table .user-roles, .users-table .user-tg-bound { text-align: center; }
.user-tg-bound input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--ok);opacity:1}
.user-tg-contact{color:var(--tx2);overflow-wrap:anywhere}.user-tg-contact[href]{color:var(--ok);text-decoration:none}.user-tg-contact[href]:hover{text-decoration:underline}
.user-role-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.user-role-form{display:inline;margin:0}
.user-role-picker{position:relative;display:inline-flex;align-items:center;max-width:100%;color:rgb(var(--role-rgb));border-radius:999px;border:0;background:none;padding:0;font:inherit;cursor:pointer}
.user-role-current{display:inline-flex;gap:5px;pointer-events:none}
.user-tg-issue-form{margin:5px 0 0}.user-tg-issue-form label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--tx2);cursor:pointer}
.user-tg-issue-form input[type=checkbox]{width:14px;height:14px;margin:0;accent-color:#e6aa67}.user-tg-issue-link{display:block;margin-top:4px;font-size:11px;color:#e6aa67}
.tg-contact-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.tg-contact-actions form{margin:0}.tg-contact-case{scroll-margin-top:100px;overflow-wrap:anywhere}
.user-role-picker:hover .role-chip{border-color:currentColor}.user-role-picker:focus-within{outline:2px solid currentColor;outline-offset:3px}
.user-role-menu{position:fixed;z-index:10010;width:218px;max-width:calc(100vw - 20px);padding:6px;border:1px solid #ffffff1c;border-radius:14px;background:linear-gradient(145deg,#25252d,#1b1b21);box-shadow:0 14px 44px #0008;overflow-y:auto;overscroll-behavior:contain}
.user-role-menu[hidden]{display:none}
.user-role-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:rgb(var(--role-rgb));font:inherit;font-size:13px;text-align:left;cursor:pointer}
.user-role-menu button:hover,.user-role-menu button:focus-visible,.user-role-menu button[aria-checked=true]{background:rgba(var(--role-rgb),.11);outline:none}
.user-role-menu .staff-role-icon{flex:none;width:18px;height:18px}.user-role-menu button>span:first-of-type{flex:1}.user-role-check{opacity:0}.user-role-menu [aria-checked=true] .user-role-check{opacity:1}
.user-nick-link { color: var(--tx); text-decoration: none; }
.user-nick-link:hover { color: var(--ac); text-decoration: underline; }
.user-rename-button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 5px; border: 0; border-radius: 6px; color: var(--tx2); background: transparent; cursor: pointer;
}
.user-rename-button:hover, .user-rename-button:focus-visible { color: var(--ac); background: var(--acsf); }
.user-rename-dialog { width: 360px; max-width: calc(100vw - 32px); padding: 24px; border: 1px solid var(--bd); border-radius: 16px; background: var(--sf); color: var(--tx); }
.user-rename-dialog::backdrop { background: rgba(0,0,0,.65); }
.staff-role-icon { flex: none; }
.staff-role-label { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.staff-role-card {
  border-color: rgba(var(--role-rgb),.42);
  background: linear-gradient(180deg, rgba(var(--role-rgb),.11), var(--sf2) 78%);
}
.staff-role-card > img, .staff-role-card > .avatar-circle { box-shadow: 0 0 0 3px rgba(var(--role-rgb),.55); }
.staff-role-card:focus-visible { outline: 2px solid rgb(var(--role-rgb)); outline-offset: 3px; }

.news-item { display: flex; gap: 12px; align-items: center; border-left: 2px solid var(--bd); padding: 4px 0 4px 11px; margin: 10px 0; text-decoration: none; }
.news-item.first { border-left-color: var(--ac); }
.news-item .news-thumb { flex: none; width: 76px; height: 56px; border-radius: 8px; background: var(--sf2) center/cover no-repeat; }
.news-item .news-text { min-width: 0; display: flex; flex-direction: column; }
.news-item .ttl { font-size: 14px; color: var(--tx); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item .dt { font-size: 12px; color: var(--tx2); margin-top: 3px; }
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
@media (max-width: 760px) { .news-grid { grid-template-columns: 1fr; } }
.news-cover { padding: 0; overflow: hidden; }
.news-cover img { width: 100%; display: block; }

/* Лента постов: карточки-прямоугольники друг за другом (одна колонка, по центру) */
.post-feed { max-width: 640px; margin: 8px auto 0; }
.post-single { max-width: 680px; }
.post-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
/* Раскладка фото поста — как в Telegram: одиночное фото в натуральном соотношении,
   мозаика для 2–4, сетка для 5+. */
.post-card .post-imgs { display: grid; gap: 3px; }
.post-card .post-imgs img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; }
/* одиночное фото — НЕ обрезаем, показываем целиком (портрет/пейзаж) */
.post-card .post-imgs.n1 { display: block; }
.post-card .post-imgs.n1 img { height: auto; max-height: 72vh; object-fit: contain; background: #0c0c0f; }
/* 2 фото — две колонки */
.post-card .post-imgs.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; }
/* 3 фото — одно большое слева + два справа */
.post-card .post-imgs.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.post-card .post-imgs.n3 img:first-child { grid-row: 1 / 3; }
/* 4 фото — 2×2 */
.post-card .post-imgs.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
/* 5 фото — телеграм-мозаика: 2 сверху (по половине) + 3 снизу (по трети), ряды равной высоты */
.post-card .post-imgs.n5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.post-card .post-imgs.n5 img:nth-child(-n+2) { grid-column: span 3; }
.post-card .post-imgs.n5 img:nth-child(n+3) { grid-column: span 2; }
/* 6 фото — ровная сетка 3×2 */
.post-card .post-imgs.n6 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
/* 7+ фото — сетка по 3 в ряд, квадраты */
.post-card .post-imgs.nmore { grid-template-columns: 1fr 1fr 1fr; }
.post-card .post-imgs.nmore img { height: auto; aspect-ratio: 1; }
.post-card .post-main { padding: 13px 16px 14px; }
.post-card .post-body { line-height: 1.6; color: var(--tx); font-size: 14px; overflow-wrap: anywhere; }
.post-card .post-body a { color: var(--ac); }
.post-card .post-body a.pl-mention { font-weight: 600; text-decoration: none; }
.post-card .post-body a.pl-mention:hover { text-decoration: underline; }
.post-card .post-date { color: var(--tx2); font-size: 12px; }
.post-card .post-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; }
.post-card .post-tglink { font-size: 12.5px; color: var(--ac); text-decoration: none; white-space: nowrap; }
.post-card .post-tglink:hover { text-decoration: underline; }
.post-card .post-meta { display: flex; align-items: center; gap: 10px; }
.post-views { color: var(--tx2); font-size: 12px; white-space: nowrap; }
.post-reactions { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 2px; }
.react-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 16px; border: 1px solid var(--bd); background: var(--sf2); color: var(--tx); font-size: 15px; line-height: 1; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.react-btn:hover { border-color: var(--ac); }
.react-btn:disabled { opacity: .55; }
.react-btn.active { border-color: var(--ac); background: var(--acsf); }
.react-btn .rc { font-size: 12.5px; font-weight: 600; color: var(--tx2); }
.react-btn .rc:empty { display: none; }
.react-btn.active .rc { color: var(--ac); }
.post-video { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 9px 0; border-radius: 10px; overflow: hidden; background: #000; }
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-video-link { display: inline-flex; align-items: center; gap: 11px; margin: 9px 0; padding: 9px 16px 9px 9px; border-radius: 12px; background: var(--sf2); border: 1px solid var(--bd); color: var(--tx); font-weight: 600; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.post-video-link:hover { background: var(--sf); border-color: var(--ac); color: var(--tx); }
/* красный кружок с белым play-треугольником — общий значок видео-ссылок */
.post-tgvideo::before, .post-video-link::before, .post-video-play::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") center/15px no-repeat; }

/* Лента-превью: карточки картинка+заголовок, полный текст по кнопке */
.news-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; margin-top: 6px; }
.ncard { display: flex; flex-direction: column; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; text-decoration: none; transition: border-color .15s ease, transform .1s ease; }
.ncard:hover { border-color: var(--ac); }
.ncard:active { transform: scale(0.995); }
.ncard .ncard-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.ncard .ncard-noimg { width: 100%; height: 100%; background: linear-gradient(135deg, var(--sf2), var(--bg)); display: flex; align-items: center; justify-content: center; color: var(--ac); opacity: .65; }
.ncard .ncard-body { padding: 14px 16px 15px; display: flex; flex-direction: column; flex: 1; }
.ncard .ncard-ttl { font-size: 16px; line-height: 1.36; font-weight: 600; color: var(--tx); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncard .ncard-meta { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ncard .ncard-date { font-size: 12.5px; color: var(--tx2); }
.ncard .ncard-more { font-size: 13px; color: var(--ac); white-space: nowrap; }
@media (max-width: 680px) { .news-cards { grid-template-columns: 1fr; } }
.ncard-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sf2); }
/* размытый фон из того же фото (как в Telegram), само фото сверху целиком (contain) */
.ncard-cover::before { content: ""; position: absolute; inset: 0; background: var(--cover, none) center / cover no-repeat; filter: blur(22px) brightness(.5); transform: scale(1.25); }
.ncard-play { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ncard-play::before { content: ""; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #fff; margin-left: 3px; }
/* Видео без постера: фирменная заглушка — кнопка ▶ в акцентном круге и подпись под ней */
.ncard .ncard-novideo { flex-direction: column; gap: 9px; opacity: 1; color: var(--tx2); font-size: 12.5px; font-weight: 600; letter-spacing: .3px; }
.ncard-novideo .ncard-play { position: static; transform: none; background: var(--acsf); box-shadow: inset 0 0 0 1px rgba(232,51,42,.55); }
.post-tgvideo { display: inline-flex; align-items: center; gap: 11px; margin: 8px 0 2px; padding: 9px 16px 9px 9px; border-radius: 12px; background: var(--sf2); border: 1px solid var(--bd); color: var(--tx); font-weight: 600; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.post-tgvideo:hover { background: var(--sf); border-color: var(--ac); color: var(--tx); }

/* Кнопка «смотреть видео» прямо на постере */
.post-video-cover { position: relative; display: block; }
.post-video-cover img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; }
.post-video-cover::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.30); transition: background .15s ease; }
.post-video-cover:hover::after { background: rgba(0,0,0,.42); }
.post-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 30px; background: rgba(8,8,10,.6); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.post-video-cover:hover .post-video-play { background: rgba(8,8,10,.78); }
.post-video-play::before { width: 34px; height: 34px; background-size: 17px; }

/* Модалка «Показать полностью» */
.post-modal { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; }
.post-modal[hidden] { display: none; }
.post-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.post-modal-x { position: fixed; top: 16px; right: 18px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bd); background: var(--sf); color: var(--tx); font-size: 16px; cursor: pointer; }
.post-modal-x:hover { border-color: var(--ac); color: var(--ac); }
.post-modal-panel { position: relative; z-index: 1; max-width: 660px; margin: 0 auto; padding: 44px 14px; }
.post-modal-content { animation: postModalIn .2s ease; }
@keyframes postModalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.post-modal-content .post-card {
  margin: 0; border-radius: 18px;
  border: 1px solid rgba(232,51,42,0.45);
  box-shadow: 0 26px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04);
}
.post-modal-loading { color: var(--tx2); text-align: center; padding: 50px 0; }

/* Лайтбокс фото */
img.tg-e { width: 1.2em; height: 1.2em; vertical-align: -0.22em; display: inline-block; margin: 0 .02em; object-fit: contain; }
/* Выпадашка с поиском */
.ss-wrap { position: relative; }
.ss-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 4px; max-height: 260px; overflow-y: auto; background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 16px 44px rgba(0,0,0,.55); }
.ss-item { padding: 9px 12px; cursor: pointer; font-size: 14px; color: var(--tx); }
.ss-item { display: flex; align-items: center; gap: 9px; }
.ss-ava { flex: none; width: 26px; height: 26px; }
.ss-ava img, .ss-ava .avatar-circle { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; font-size: 11px; }
.ss-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-item:hover, .ss-item.sel, .ss-item.on { background: var(--sf2); }
.ss-item.on { box-shadow: inset 2px 0 0 var(--ac); }   /* по нему сработает Enter */
.ss-item.sel { color: var(--ac); }
.ss-none { color: var(--tx3); cursor: default; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: var(--tx2); text-decoration: none; flex: none; }
.bell:hover { background: var(--sf2); color: var(--tx); }
/* Лента уведомлений: строка во всю ширину, текст слева, дата справа */
.ntf-list { display: flex; flex-direction: column; gap: 8px; }
.ntf { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 14px 18px; color: var(--tx); text-decoration: none; }
a.ntf:hover { border-color: var(--ac); color: var(--tx); }
.ntf-text { font-size: 14.5px; line-height: 1.5; min-width: 0; }
.ntf-time { font-size: 12px; color: var(--tx3); white-space: nowrap; flex: none; }
.ntf-new { border-color: rgba(232,51,42,.5); }
@media (max-width: 560px) {
  .ntf { flex-direction: column; align-items: flex-start; gap: 5px; }
}

.bell-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ac); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; }
.judge-hero { display: inline-flex; align-items: center; gap: 14px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 14px; padding: 10px 22px 10px 10px; margin: 6px 0 12px; }
.jh-label { font-size: 11px; color: var(--ac); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.jh-name { font-size: 18px; font-weight: 700; color: var(--tx); text-decoration: none; display: inline-block; margin-top: 1px; }
.jh-name:hover { color: var(--ac); }
.jh-sub { font-size: 12.5px; color: var(--tx2); margin-top: 2px; }
.judge-tables { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.jt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tx2); background: var(--sf2); border-radius: 18px; padding: 4px 12px 4px 4px; text-decoration: none; }
.jt:hover { color: var(--tx); }
.jt-no { color: var(--tx3); font-size: 11px; }
/* инфо-строка турнира: статы + главный судья + дресс-код в один ряд */
.t-inforow { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 8px 0 12px; }
.t-inforow > * { margin: 0 !important; }
.t-stats { display: flex; align-items: center; gap: 22px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 14px; padding: 10px 22px; }
.t-stats > div { text-align: center; }
.t-stats b { display: block; font-size: 22px; font-weight: 700; color: var(--tx); line-height: 1.15; }
.t-stats span { font-size: 11px; color: var(--tx2); }
.dress-block { display: flex; align-items: center; gap: 13px; background: var(--acsf); border: 1px solid rgba(232,51,42,.4); border-radius: 14px; padding: 10px 16px; }
/* унифицированный блок инфо-строки турнира: дата / место / дресс-код */
.info-block { display: flex; align-items: center; gap: 12px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 14px; padding: 10px 16px; }
.info-block .ib-ic { font-size: 22px; line-height: 1; flex: none; }
.info-block .ib-label { font-size: 11px; color: var(--tx2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.info-block .ib-val { color: var(--tx); font-weight: 600; font-size: 15px; margin-top: 2px; }
.info-block.accent { background: var(--acsf); border-color: rgba(232,51,42,.4); }
.info-block.accent .ib-label { color: var(--ac); }
/* Таблица участников турнира: «Игрок» забирает свободную ширину, остальные — по содержимому */
.tp-name-col { width: 100%; }
.tp-tbl th, .tp-tbl td { white-space: nowrap; }
.post-imgs img { cursor: zoom-in; }
.img-lightbox { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 22px; cursor: zoom-out; opacity: 0; transition: opacity .2s ease; }
.img-lightbox.show { opacity: 1; }
.img-lightbox[hidden] { display: none; }
.img-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; transform: scale(.9); transition: transform .26s cubic-bezier(.2,.9,.25,1); }
.img-lightbox.show img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .img-lightbox, .img-lightbox img { transition: none; } }
/* Кнопки лайтбокса: закрыть, листать (при нескольких фото) и счётчик «2 / 5» */
.img-lightbox .lb-btn { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid rgba(255,255,255,.18); background: rgba(20,20,24,.72); color: #fff; cursor: pointer; line-height: 1;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s ease, border-color .15s ease; }
.img-lightbox .lb-btn:hover { background: var(--acsf); border-color: var(--ac); }
.img-lightbox .lb-x { top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; font-size: 16px; }
.img-lightbox .lb-prev, .img-lightbox .lb-next { top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border-radius: 12px; font-size: 34px; }
.img-lightbox .lb-prev { left: 14px; }
.img-lightbox .lb-next { right: 14px; }
.img-lightbox .lb-count { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 5px 12px; border-radius: 20px;
  background: rgba(20,20,24,.72); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; cursor: default; }
.img-lightbox .lb-btn[hidden], .img-lightbox .lb-count[hidden] { display: none; }
@media (max-width: 640px) {
  .img-lightbox .lb-prev, .img-lightbox .lb-next { width: 40px; height: 54px; font-size: 28px; }
  .img-lightbox .lb-prev { left: 6px; }
  .img-lightbox .lb-next { right: 6px; }
}
.pf-ava-zoom { cursor: zoom-in; }

.progress { height: 6px; background: var(--sf2); border-radius: 3px; overflow: hidden; }
.progress > div { height: 100%; background: var(--ac); border-radius: 3px; }

/* ── Панель ведущего ─────────────────────────────── */
.timer-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: sticky; top: 72px; z-index: 20; }
.timer-display {
  font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 100px; text-align: center; color: var(--tx); letter-spacing: 1px;
}
.timer-display.tm-low { color: var(--ac); }
.timer-display.tm-zero { color: var(--ac); animation: tmblink 0.5s steps(2) infinite; }
@keyframes tmblink { 50% { opacity: 0.3; } }
.timer-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-btn {
  background: var(--sf2); color: var(--tx); border: 1px solid var(--bd);
  border-radius: 8px; padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  min-width: 44px;
}
.tm-btn:hover { border-color: var(--tx2); }
.tm-btn:active { transform: scale(0.96); }
.tm-stop { color: var(--ac); border-color: #c0392b55; }

.protocol-tbl input, .protocol-tbl select {
  background: var(--sf2); color: var(--tx); border: 1px solid var(--bd);
  border-radius: 6px; padding: 6px 8px; font-size: 13px; font-family: inherit;
}
.protocol-tbl input:focus, .protocol-tbl select:focus { outline: none; border-color: var(--ac); }
.protocol-tbl td { padding: 5px 6px; }
/* Красные черты делят протокол на группы: роль | фолы | баллы | версия (просьба руководителя).
   Рамкой, а не внутренней тенью, как в рейтинге: при масштабе экрана не 100% браузер округлял
   края тени, и над ячейкой вылезала тонкая красная полоска. Прилипших колонок, ради которых в
   рейтинге выбрана тень, здесь нет. Под шапкой — такая же красная линия во всю ширину. */
.protocol-tbl .pt-sep { border-left: 2px solid var(--ac); padding-left: 12px; }
.protocol-tbl tr:first-child > th { border-bottom: 2px solid var(--ac); }
/* Всё по центру — и заголовки, и поля под ними (просьба руководителя) */
.tbl.protocol-tbl th, .tbl.protocol-tbl td { text-align: center; }

/* ── Версия игрока («5ч, 4к»): фишки мест цветом названного — к красная, ч тёмная. Когда роли
   известны, верная отметка обведена зелёным, ошибочная приглушена и зачёркнута. ── */
.calls { display: inline-flex; flex-wrap: nowrap; gap: 3px; vertical-align: middle; }   /* в строку с ником (просьба руководителя) */
.call { display: inline-block; min-width: 24px; padding: 0 4px; border-radius: 5px; border: 1px solid;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; white-space: nowrap; }
.call-r { background: rgba(232,51,42,.85); border-color: var(--ac); color: #fff; }
.call-b { background: #17171d; border-color: #43434d; color: #e8e8ee; }
.call.ok { box-shadow: 0 0 0 1.5px var(--ok); }
.call.bad { opacity: .45; text-decoration: line-through; }
/* В протоколе: кнопка с фишками открывает окно с местами */
.calls-view { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 7px;
  background: transparent; border: 1px dashed var(--bd); border-radius: 8px; color: var(--tx3);
  font-size: 12px; cursor: pointer; white-space: nowrap; }
.calls-view:hover { border-color: var(--ac); color: var(--tx); }
.calls-view.has { border-style: solid; background: var(--sf2); }
.calls-sum { font-size: 11px; font-weight: 700; color: var(--tx2); }
.calls-pop { position: fixed; z-index: 60; width: 240px; padding: 10px; background: var(--sf);
  border: 1px solid var(--bd); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.calls-pop[hidden] { display: none; }
.cp-title { font-size: 12px; font-weight: 600; color: var(--tx2); margin: 0 0 8px; }
.cp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cp-seat { height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--bd); border-radius: 8px; background: var(--sf2); color: var(--tx);
  font-size: 15px; font-weight: 700; line-height: 1.05; cursor: pointer; }
.cp-seat small { min-height: 11px; font-size: 10px; font-weight: 600; opacity: .9; }
.cp-seat:hover:not(:disabled) { border-color: var(--tx3); }
.cp-seat.r { background: rgba(232,51,42,.85); border-color: var(--ac); color: #fff; }
.cp-seat.b { background: #17171d; border-color: #6c6c78; color: #fff; }
.cp-seat:disabled { opacity: .35; cursor: default; }
.cp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 9px; }
.cp-hint { flex: 1 1 100%; font-size: 10.5px; color: var(--tx3); }
.cp-clear, .cp-done { padding: 4px 8px; border-radius: 7px; border: 1px solid var(--bd); background: var(--sf2);
  color: var(--tx2); font-size: 12px; cursor: pointer; margin-left: 4px; }
.cp-done { background: var(--ac); border-color: var(--ac); color: #fff; }

/* ── Голосование по кругам (протокол): выставленные по порядку (цифра порядка в углу),
   заголосованные — красной заливкой, убитый ночью — тёмной, выбывшие раньше — зачёркнуты ── */
.votes-box { margin: 14px 0 4px; padding: 12px 14px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 12px; }
.votes-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.votes-hint { font-size: 11.5px; color: var(--tx3); }
.vr { border-top: 1px solid var(--bd); padding: 8px 0; }
.votes-head + .vr { border-top: 0; }
.vr-top { display: flex; align-items: center; gap: 10px; }
.vr-name { background: none; border: 0; padding: 0; color: var(--tx); font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.vr:not(.open) .vr-name { color: var(--tx2); text-decoration: underline dotted; }
.vr-sum { flex: 1; min-width: 0; font-size: 12.5px; color: var(--tx2); }
.vr-del { background: none; border: 0; padding: 0 4px; color: var(--tx3); font-size: 18px; line-height: 1; cursor: pointer; }
.vr-del:hover { color: var(--ac); }
.vr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.vr-lbl { width: 96px; flex: none; font-size: 12px; color: var(--tx2); }
.vr-seats { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-empty { font-size: 12px; color: var(--tx3); }
.vb { position: relative; min-width: 34px; height: 32px; padding: 0 6px; border: 1px solid var(--bd); border-radius: 8px;
  background: var(--sf); color: var(--tx); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.vb:hover:not(:disabled) { border-color: var(--tx3); }
.vb.on { border-color: var(--ac); background: rgba(232,51,42,.16); }
.vb sup { position: absolute; top: -7px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--ac); color: #fff; font-size: 9.5px; line-height: 15px; }
.vb.out { background: var(--ac); border-color: var(--ac); color: #fff; }
.vb.kill { background: #17171d; border-color: #8a8a96; color: #fff; }
.vb.dead { opacity: .3; text-decoration: line-through; cursor: default; }
.votes-add { margin-top: 6px; padding: 6px 12px; border: 1px dashed var(--bd); border-radius: 8px; background: transparent;
  color: var(--tx2); font-size: 12.5px; cursor: pointer; }
.votes-add:hover { border-color: var(--ac); color: var(--tx); }
@media (pointer: coarse) { .vb { min-width: 40px; height: 38px; } }
/* В карточке игры: строка на круг */
.vt-card { margin-top: 8px; padding: 8px 10px; background: var(--sf2); border-radius: 8px; font-size: 12px; }
.vt-title { margin-bottom: 4px; color: var(--tx3); font-size: 11px; }
.vt-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.9; }
.vt-k { min-width: 52px; color: var(--tx2); }
.vt-seat { display: inline-block; min-width: 20px; padding: 0 4px; border: 1px solid var(--bd); border-radius: 5px;
  font-weight: 700; line-height: 18px; text-align: center; }
.vt-seat.out { background: var(--ac); border-color: var(--ac); color: #fff; }
.vt-none { color: var(--tx3); }
.vt-kill { margin-left: 4px; color: var(--tx2); }
.vt-v { margin: 0 6px 0 2px; color: var(--tx3); font-size: 11px; }
/* Круг: слева номера (выставлены / заголосован / ночью), справа — голоса за кандидатуры */
.vr-body { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 10px 28px; align-items: start; }
.vr-votes { margin-top: 8px; padding: 8px 10px; background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; }
.vv-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; color: var(--tx2); }
.vv-title span { font-weight: 400; color: var(--tx3); }
.vv-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.vv-seat { min-width: 30px; padding: 3px 6px; border: 1px solid var(--bd); border-radius: 7px; text-align: center;
  font-weight: 700; font-size: 13px; }
.vv-seat.out { background: var(--ac); border-color: var(--ac); color: #fff; }
.vv-row.lead .vv-num { color: var(--ac); }
.vv-b { width: 28px; height: 28px; padding: 0; border: 1px solid var(--bd); border-radius: 7px; background: var(--sf2);
  color: var(--tx); font-size: 16px; line-height: 1; cursor: pointer; }
.vv-b:disabled { opacity: .3; cursor: default; }
.vv-num { min-width: 26px; text-align: center; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.vv-num.auto { margin-left: 34px; }   /* под числами строк с кнопками −/+ */
.vv-auto { font-size: 11px; color: var(--tx3); }
.vv-sub { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 4px; padding-top: 7px; border-top: 1px solid var(--bd);
  font-size: 12px; font-weight: 700; color: var(--tx2); }
.vv-sub span { font-weight: 400; color: var(--tx3); }
.vt-re { margin: 0 3px 0 6px; color: var(--tx3); }
.vv-res { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--bd); font-size: 13px; font-weight: 700; color: var(--ac); }
.vv-lift { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.vv-lb { padding: 6px 10px; border: 1px solid var(--bd); border-radius: 8px; background: var(--sf2); color: var(--tx2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.vv-lb.on { background: var(--ac); border-color: var(--ac); color: #fff; }
.vv-lb[data-val="0"].on { background: var(--sf2); border-color: var(--tx2); color: var(--tx); }
.vb.miss { padding: 0 10px; font-weight: 600; font-size: 12.5px; color: var(--tx2); }
.vb.miss.kill { background: var(--sf2); border-color: var(--tx2); color: var(--tx); }
@media (max-width: 760px) { .vr-body { grid-template-columns: 1fr; } }
.protocol-tbl .f-total { font-size: 14px; }
/* Роль в протоколе — цветом, в палитре сайта (role_color): мирный — красный, шериф — жёлтый,
   мафия — чёрная (графит), дон — ещё темнее. data-role выставляет app.js по выбранной роли. */
.protocol-tbl select.f-role { font-weight: 600; }
.protocol-tbl select.f-role[data-role="civ"] { background-color: rgba(232,51,42,.18); border-color: rgba(232,51,42,.65); color: #ff9189; }
.protocol-tbl select.f-role[data-role="sheriff"] { background-color: rgba(230,177,58,.18); border-color: rgba(230,177,58,.7); color: #f2c75c; }
.protocol-tbl select.f-role[data-role="maf"] { background-color: #50505a; border-color: #6c6c78; color: #fff; }
.protocol-tbl select.f-role[data-role="don"] { background-color: #0e0e12; border-color: #50505a; color: #fff; }
.protocol-tbl select.f-role:focus { border-color: var(--ac); }
.protocol-tbl select.f-role option { background: var(--sf); color: var(--tx); font-weight: 600; }
.protocol-tbl select.f-role option[value="civ"] { color: #ff9189; }
.protocol-tbl select.f-role option[value="sheriff"] { color: #f2c75c; }
/* «Победа» в протоколе — цветом команды, как роли: красные — красным, чёрные — чёрным (как мафия).
   Базовый вид здесь, а не inline: inline-стиль перебил бы цвет. data-win выставляет app.js. */
select.f-win {
  background: var(--sf2); color: var(--tx); border: 1px solid var(--bd); border-radius: 7px;
  padding: 7px 10px; font-size: 13px; font-family: inherit; font-weight: 600;
}
select.f-win:focus { outline: none; border-color: var(--ac); }
select.f-win[data-win="red"] { background-color: rgba(232,51,42,.18); border-color: rgba(232,51,42,.65); color: #ff9189; }
select.f-win[data-win="black"] { background-color: #50505a; border-color: #6c6c78; color: #fff; }
select.f-win option { background: var(--sf); color: var(--tx); font-weight: 600; }
select.f-win option[value="red"] { color: #ff9189; }
/* Черновик протокола: плашка над таблицей открытого черновика и его строка в списке черновиков. */
.draft-note {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 9px; font-size: 13px; line-height: 1.45;
  background: rgba(230,177,58,.1); border: 1px solid rgba(230,177,58,.45); color: var(--tx2);
}
.draft-note b { color: #f2c75c; }
/* Карточка черновика в сетке игр (протокол и страница вечера): пунктир — «ещё не игра». */
.card.draft-game { border: 1px dashed rgba(230,177,58,.6); }
.card.draft-game.game-on { border-style: solid; border-color: #f2c75c; box-shadow: inset 0 0 0 1px #f2c75c; }
.draft-err { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #f2c75c; }

.site-footer { border-top: 1px solid var(--bd); background: var(--sf); margin-top: 40px; }
.footer-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 16px; font-size: 14px; color: var(--tx2); flex-wrap: wrap; gap: 12px;
}
.footer-links { display: flex; gap: 18px; align-items: center; }
.footer-links a { color: var(--tx2); }
.footer-links a:hover { color: var(--tx); }
.footer-links a.soc { display: inline-flex; align-items: center; transition: color .15s ease, transform .15s ease; }
.footer-links a.soc:hover { transform: translateY(-1px); }
.footer-links a.soc.tg:hover { color: #29a9ea; }
.footer-links a.soc.vk:hover { color: #0077ff; }

.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.section-head .more { font-size: 13px; }

/* ── Мобильная версия ──────────────────────────── */
@media (max-width: 900px) {
  .header-inner { padding: 0 14px; }
  .logo-anim { width: 52px; }
  .brand-text i { display: none; }
  .suggest-btn { display: none; }
  .tables-grid { grid-template-columns: 1fr !important; }
  .burger { display: block; margin-left: auto; order: 3; }

  /* Выдвижное меню слева (drawer) */
  .nav {
    display: flex; position: fixed; top: 0; left: 0; bottom: 0;
    width: 82vw; max-width: 320px; margin: 0; z-index: 200;
    background: var(--sf); border-right: 1px solid var(--bd);
    flex-direction: column; flex-wrap: nowrap; gap: 2px;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, .45);
  }
  .nav.open { transform: translateX(0); }
  .nav a { padding: 13px 12px; font-size: 15.5px; border-radius: 10px; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 190;
    background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  .nav-scrim.open { opacity: 1; pointer-events: auto; }
  body.nav-lock { overflow: hidden; }
  /* Поднимаем контекст шапки, чтобы затемнение накрыло сам бургер/шапку,
     а ярким остался только выдвижной drawer */
  body.nav-lock .site-header { z-index: 210; }
  body.nav-lock .burger { opacity: 0; pointer-events: none; }

  .nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--bd);
  }
  .nav-drawer-brand { display: flex; align-items: center; gap: 9px; font-size: 16px; color: var(--tx); }
  .nav-drawer-brand .logo-svg { width: 26px; height: auto; }
  .nav-close {
    display: block; background: none; border: none; color: var(--tx2);
    font-size: 30px; line-height: 1; padding: 0 6px; cursor: pointer;
  }
  .nav-drawer-auth { display: block; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bd); }
  .nav-drawer-cab {
    display: block; text-align: center; padding: 12px; border-radius: 10px;
    background: var(--sf2); color: var(--tx); font-weight: 550; margin-bottom: 8px;
  }
  .nav-drawer-logout { margin: 0; }
  .nav-drawer-logout button {
    width: 100%; padding: 11px; border-radius: 10px; background: none;
    border: 1px solid var(--bd); color: var(--ac); font-size: 14px; cursor: pointer; font-family: inherit;
  }
  .header-right { margin-left: 0; }
  /* Имя клуба усекаем, чтобы не налезало на кнопки */
  .brand-text { min-width: 0; }
  /* Гостевую кнопку «Войти» в шапке прячем — вход есть в выдвижном меню */
  .header-right .btn-ghost { display: none; }
  .grid-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .hero { flex-direction: column; align-items: stretch; }
}

/* ── Приветствие для гостей ──────────────────────── */
.guest-hero {
  text-align: center; padding: 40px 20px 30px; margin: 6px 0 16px;
  background: var(--sf); border: 1px solid var(--bd); border-radius: 16px;
  position: relative; overflow: hidden;
}
.guest-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at 50% -10%, rgba(232,51,42,0.14), transparent 60%);
}
.guest-hero-inner { position: relative; max-width: 600px; margin: 0 auto; }
.guest-logo { display: flex; justify-content: center; margin-bottom: 12px; color: var(--tx); }
.guest-title { font-size: 30px; font-weight: 700; margin: 0 0 10px; }
.guest-sub { color: var(--tx2); font-size: 15px; line-height: 1.6; margin: 0 auto 20px; max-width: 480px; }
.guest-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.guest-cta .btn { padding: 11px 26px; font-size: 15px; }
.guest-stats {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.guest-stats > a {
  background: var(--sf2); border-radius: 12px; padding: 12px 18px; min-width: 92px;
  text-decoration: none; transition: transform 0.18s ease, background 0.18s ease;
}
.guest-stats > a:hover { background: var(--bd); transform: translateY(-2px); }
.guest-stats b { display: block; font-size: 24px; font-weight: 700; color: var(--ac); }
.guest-stats span { font-size: 12px; color: var(--tx2); }
.guest-hint { font-size: 13px; color: var(--tx3); max-width: 460px; margin: 0 auto; line-height: 1.5; }
.guest-social { display: flex; gap: 16px; justify-content: center; margin-top: 16px; }
.guest-social a { font-size: 14px; color: var(--tx2); }
.guest-social a:hover { color: var(--ac); }
@media (prefers-reduced-motion: no-preference) {
  .guest-hero::before { animation: glowShift 14s ease-in-out infinite alternate; }
  .guest-logo { transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
  .guest-hero:hover .guest-logo { transform: scale(1.06) rotate(-4deg); }
}

/* ── Динамика и анимации ─────────────────────────── */
body::before {
  content: ""; position: fixed; inset: -10% -10% auto -10%; height: 480px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px circle at 18% 0%, rgba(232,51,42,0.12), transparent 55%),
    radial-gradient(680px circle at 92% 6%, rgba(232,51,42,0.07), transparent 52%);
}

.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px;
  background: var(--ac); border-radius: 2px; transform: scaleX(0); transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  body::before { animation: glowShift 16s ease-in-out infinite alternate; }
  @keyframes glowShift { from { opacity: 0.65; transform: translateY(-12px); } to { opacity: 1; transform: translateY(16px); } }

  .reveal { opacity: 0; transform: translateY(20px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }

  .card { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.38); }
  .card-accent:hover { border-left-color: var(--ac-h); }

  .stat { transition: transform 0.2s ease, border-color 0.2s ease; }
  .stat:hover { transform: translateY(-2px); border-color: var(--ac); }

  .btn { transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease; }
  .btn:hover { box-shadow: 0 6px 22px rgba(232,51,42,0.35); }
  .btn:active { transform: scale(0.97); }

  .nav a::after { transition: transform 0.25s ease; }
  .nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

  .user-pill { transition: transform 0.15s ease, box-shadow 0.2s ease; }
  .user-pill:hover { transform: translateY(-1px); }
  .user-pill[data-staff-role]:hover { box-shadow: 0 4px 16px rgba(var(--role-rgb),.2); }

  .logo-anim { transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1); }
  .brand:hover .logo-anim { animation-play-state: paused; transform: rotate(-7deg) scale(1.07); }

  .tbl tbody tr, .tbl tr { transition: background 0.15s ease; }
  .tbl tr:hover td { background-color: var(--sf2); }   /* только цвет: не сбросить полоски-разделители */

  .admin-item { transition: transform 0.18s ease, border-color 0.18s ease; }
  .admin-item:hover { transform: translateY(-2px); border-color: var(--tx3); }
  .admin-item.staff-role-card:hover { border-color: rgb(var(--role-rgb)); }

  .flash { animation: flashIn 0.45s cubic-bezier(0.2,0.7,0.2,1); }
  @keyframes flashIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
}

/* ── Профиль игрока: визуальная статистика ──────── */
.pf-hero {
  --pf-avatar-size:192px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--sf); border: 1px solid var(--bd); border-radius: 16px;
  padding: 18px 20px; margin: 16px 0 8px; position: relative; overflow: hidden;
}
.pf-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(440px circle at 0% 0%, rgba(232,51,42,0.13), transparent 62%);
}
.pf-hero > * { position: relative; z-index: 1; }
.pf-id { flex: 1; min-width: 200px; }
.pf-name { font-size: 27px; font-weight: 700; margin: 0; line-height: 1.12; }
.pf-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px; }
.pf-sub { color: var(--tx2); font-size: 13px; margin-top: 9px; }
.pf-elo { text-align: center; padding-left: 8px; }
.pf-elo .v { font-size: 36px; font-weight: 750; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; line-height: 1; }
.pf-elo .l { font-size: 10.5px; color: var(--tx2); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }
.pf-ava { flex-shrink:0; }
.pf-ava .avatar-circle, .pf-ava img { width:var(--pf-avatar-size)!important; height:var(--pf-avatar-size)!important; font-size:calc(var(--pf-avatar-size) * .35)!important; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ac); }
.pf-hero-link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s ease, transform .12s ease; }
.pf-hero-link:hover { border-color: var(--ac); }
.pf-hero-link:active { transform: scale(0.997); }
.tag-edit { background: var(--acsf); color: var(--ac); border-color: rgba(232,51,42,0.35); }

.rank-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650;
  padding: 5px 13px; border-radius: 20px; background: var(--sf2); border: 1px solid var(--bd); color: var(--tx);
}
.rank-badge.r1 { color: #f3d27a; border-color: #7a6320; background: #241f0c; }
.rank-badge.r2 { color: #d2d6dd; border-color: #4a4e57; background: #191b1f; }
.rank-badge.r3 { color: #e3a878; border-color: #6b4527; background: #231910; }

.pf-tiles { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin: 12px 0; }
#ch-elo,#ch-results,#ch-roledist{max-width:100%}

.role-bars { display: flex; flex-direction: column; gap: 11px; }
.role-bar { display: grid; grid-template-columns: 68px 1fr 66px; align-items: center; gap: 10px; font-size: 13px; }
.role-bar .rb-name { color: var(--tx2); white-space: nowrap; }
.role-bar .rb-track { display: block; height: 9px; background: var(--sf2); border-radius: 5px; overflow: hidden; }
.role-bar .rb-fill { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
.role-bar .rb-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--tx2); }
.role-bar .rb-val b { color: var(--tx); font-weight: 650; }
/* «Винрейт по ролям»: растянуть полоски на всю высоту карточки */
.card-flexcol { display: flex; flex-direction: column; }
.card-flexcol .role-bars { flex: 1; justify-content: space-evenly; gap: 14px; }
.card-flexcol .role-bar .rb-track { height: 13px; }

.hist-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }

/* ── Зал славы ──────────────────────────────────── */
.records-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 14px 0; align-items: start; }
.rec-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 12px 14px; }
.rec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.rec-ic { font-size: 22px; flex: none; }
.rec-title { font-size: 12.5px; color: var(--tx2); font-weight: 600; }
.rec-rows { display: flex; flex-direction: column; gap: 3px; }
.rec-row { display: flex; align-items: center; gap: 8px; color: var(--tx); padding: 4px 6px; border-radius: 9px; }
.rec-row:hover { color: var(--tx); background: var(--sf2); }
.rec-rank { flex: none; font-size: 13px; width: 18px; text-align: center; }
.rec-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; font-size: 13.5px; }
.rec-v { flex: none; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ac); }
.rec-row:not(:first-child) .rec-v { font-size: 14px; color: var(--tx2); }

/* ── Очная ставка ───────────────────────────────── */
.vs-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 12px; }
.vs-player { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 16px; color: var(--tx); text-align: center; min-width: 0; }
.vs-player:hover { color: var(--tx); border-color: var(--ac); }
.vs-name { font-weight: 700; font-size: 17px; max-width: 100%; overflow-wrap: anywhere; }
.vs-elo { font-size: 13px; color: var(--tx2); }
/* Жёсткие колонки: иначе ширину подбирало содержимое, и названия показателей уезжали
   от центра тем сильнее, чем длиннее числа с одной стороны. */
.vs-tbl { table-layout: fixed; }
.vs-tbl td { padding: 9px 12px; }
.vs-tbl .vs-a, .vs-tbl .vs-b { width: 33%; }
.vs-tbl .vs-mid { text-align: center; color: var(--tx2); font-size: 12.5px; width: 34%; }
.vs-tbl .vs-a { text-align: right; }
.vs-tbl .vs-b { text-align: left; }
/* Кто в паре лучше по показателю — зелёным и с подложкой (просьба руководителя: чтобы
   сразу бросалось в глаза, у кого выше). */
.vs-tbl .vs-win { color: var(--ok); font-weight: 700; background: rgba(63,190,110,.09); }
.vs-h2h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 6px 0; }
.vs-h2h-side { text-align: center; }
.vs-h2h-side .v { font-size: 38px; font-weight: 750; color: var(--ac); line-height: 1; }
.vs-h2h-side .l { font-size: 13px; color: var(--tx2); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.vs-h2h-mid { text-align: center; font-size: 22px; font-weight: 700; color: var(--tx2); }
.vs-h2h-mid span { display: block; font-size: 11px; font-weight: 400; }

/* ── Достижения ─────────────────────────────────── */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 10px; margin-top: 10px; }
.ach { background: var(--sf2); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 10px; text-align: center; opacity: 0.5; filter: grayscale(0.75); }
.ach-on { opacity: 1; filter: none; border-color: var(--ok); background: var(--oksf); }
.ach-ic { font-size: 26px; line-height: 1; }
.ach-t { font-weight: 650; font-size: 13px; margin-top: 6px; }
.ach-d { font-size: 11px; color: var(--tx2); margin-top: 2px; line-height: 1.3; }
.ach-cnt { font-size: 10.5px; color: var(--tx3); margin-top: 5px; }
.ach-on .ach-cnt { color: var(--ok); }
.ach[data-who] { transition: transform .12s ease, box-shadow .12s ease; }
.ach[data-who]:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }

/* Модалка «кто получил ачивку» */
.ach-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,0.66); }
.ach-modal.open { display: flex; }
.ach-modal-box { position: relative; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 18px 18px 16px; width: min(440px, 100%); max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.ach-modal-h { margin: 0 28px 12px 0; font-size: 16px; }
.ach-modal-x { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--tx2); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px; }
.ach-modal-x:hover { color: var(--tx); }
.ach-modal-list { display: flex; flex-wrap: wrap; gap: 7px; }
.ach-earner { display: inline-block; background: var(--sf2); border: 1px solid var(--bd); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--tx); text-decoration: none; }
.ach-earner:hover { border-color: var(--ac); color: var(--ac); }

/* Достижения: боковая панель получивших (наведение) */
/* Панель «кто получил» — оверлей справа (вне потока), не двигает контент ниже */
.ach-wrap { position: relative; }
.ach-main { margin-right: 316px; min-width: 0; }
.ach-side { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; }
.ach-side-inner { position: sticky; top: 70px; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 14px; min-height: 120px; max-height: min(54vh, 100%); overflow-y: auto; }
.ach-side-ttl { font-weight: 700; font-size: 14px; margin: 0; }
.ach-side-sub { font-size: 12px; color: var(--ok); margin: 2px 0 10px; }
.ach-side-empty { color: var(--tx2); font-size: 13.5px; line-height: 1.5; text-align: center; padding: 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ach-side-empty .ach-side-ic { font-size: 30px; opacity: .85; }
.ach-side-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ach-side-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 9px; background: var(--sf2); border: 1px solid var(--bd); color: var(--tx); text-decoration: none; }
.ach-side-row:hover { border-color: var(--ok); }
.ach-side-row img, .ach-side-row .avatar-circle { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; font-size: 11px; }
.ach-side-row .nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .ach-side { display: none; } .ach-main { margin-right: 0; } }

/* Лесенка уровней по ELO */
.tier-ladder { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tier-step { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 9px; border-radius: 9px; border: 1px solid var(--bd); background: var(--sf2); min-width: 56px; }
.tier-step b { font-size: 12px; font-weight: 600; color: var(--tx2); }
.tier-step i { font-size: 10px; color: var(--tx3); font-style: normal; }
.tier-step.passed b { color: var(--tx); }
.tier-step.current { border-color: var(--ac); background: var(--acsf); }
.tier-step.current b { color: var(--ac); }
.tier-step.current i { color: var(--ac); }
.tier-step.future { opacity: 0.5; }

/* Игровые вечера — сетка карточек */
.days-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
/* Ячейка вечера: карточка плюс кнопка «Завершить» под ней (кнопка не может жить внутри ссылки) */
.day-cell { display: flex; flex-direction: column; }
.day-cell > .day-card { flex: 1; }
.day-finish { margin-top: 8px; }
.day-finish .btn { width: 100%; padding: 7px 10px; font-size: 12.5px; }
.day-card { display: flex; flex-direction: column; gap: 4px; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 14px 16px; color: var(--tx); text-decoration: none; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.day-card:hover { transform: translateY(-2px); border-color: var(--ac); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
.day-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-title { font-size: 17px; font-weight: 650; }
.day-date { font-size: 12.5px; color: var(--tx3); }
.day-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bd); font-size: 13px; color: var(--tx2); }
.day-games b { color: var(--tx); font-size: 16px; }
/* Форма выбора пары: те же три колонки, что у карточек игроков и таблицы показателей, —
   «vs» в форме стоит на той же вертикальной оси, что и «VS» ниже (просьба руководителя).
   Кнопка «Сравнить» уходит на свою строку, иначе она сдвигала ось влево. */
.duel-form { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 12px; align-items: end; }
.duel-form > .btn { grid-column: 1 / -1; justify-self: center; min-width: 160px; }
.duel-vs { height: 40px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--tx2); padding: 0 4px; }
@media (max-width: 700px) {
  .duel-form { grid-template-columns: 1fr; }
  .duel-form .duel-vs { height: auto; padding: 2px 0; }
  .duel-form .field:nth-child(2) label { display: none; }
}
/* Счёт по показателям в «Дуэли»: каждый выигранный критерий — балл. */
.vs-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: var(--sf2); border: 1px solid var(--bd); border-radius: 14px; padding: 14px 16px; }
.vs-score-side { text-align: center; }
.vs-score-side b { display: block; font-size: 38px; font-weight: 800; line-height: 1; color: var(--tx2); font-variant-numeric: tabular-nums; }
.vs-score-side span { display: block; margin-top: 6px; font-size: 13px; color: var(--tx2); }
.vs-score-side.lead b { color: var(--ok); }
.vs-score-side.lead span { color: var(--tx); font-weight: 600; }
.vs-score-mid { text-align: center; font-size: 12px; color: var(--tx3); text-transform: uppercase; letter-spacing: .04em; }
.vs-score-mid span { display: block; margin-top: 4px; font-size: 11.5px; letter-spacing: 0; text-transform: none; }
/* Разбивка счёта: за что и кому балл */
.vs-crit { margin-top: 12px; font-size: 12.5px; }
.vs-crit th, .vs-crit td { padding: 6px 10px; }
.vs-crit td.pt { color: var(--ok); }
.vs-crit td.pt b { font-weight: 800; }
.vs-crit .vs-crit-no { color: var(--tx3); font-size: 11.5px; }
.vs-crit tr.total td { border-top: 1px solid var(--bd); border-bottom: none; font-weight: 800; font-size: 14px; color: var(--tx); }
/* Пара игроков в «Дуэли»: «VS» ровно между ними и на широком экране, и в столбик на узком. */
.vs-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.vs-pair .vs-sep { font-size: 26px; font-weight: 800; color: var(--ac); text-align: center; }
@media (max-width: 700px) {
  .vs-pair { grid-template-columns: 1fr; gap: 10px; }
  .vs-pair > a { flex-direction: row !important; text-align: left !important; }
  .vs-pair .vs-sep { font-size: 22px; }
}
/* Полное сравнение в «Дуэли»: встречные полоски винрейта по ролям и сетка мест за столом. */
.vs-bars { display: flex; flex-direction: column; gap: 9px; }
.vs-bar-row { display: grid; grid-template-columns: 1fr 132px 1fr; align-items: center; gap: 10px; }
.vs-bar-side { display: flex; align-items: center; gap: 8px; }
.vs-bar-side.rev { flex-direction: row-reverse; }
.vs-bar { flex: 1; display: flex; height: 9px; border-radius: 5px; background: var(--sf2); overflow: hidden; }
.vs-bar.left { justify-content: flex-end; }   /* левая половина растёт к центру */
.vs-bar > span { display: block; height: 100%; background: var(--ac); border-radius: 5px; }
.vs-bar-val { min-width: 42px; text-align: center; font-size: 13px; font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums; }
.vs-bar-val.win { color: var(--ok); }    /* в этой роли сильнее */
.vs-bar-val.lose { color: var(--ac); }
.vs-bar-g { min-width: 22px; text-align: center; font-size: 11px; color: var(--tx3); }
.vs-bar-lbl { text-align: center; font-size: 13px; color: var(--tx2); white-space: nowrap; }
.vs-seats th, .vs-seats td { padding: 6px 8px; text-align: center; }
.vs-seats th:first-child, .vs-seats td:first-child { text-align: left; }
@media (max-width: 640px) {
  .vs-bar-row { grid-template-columns: 1fr 104px 1fr; gap: 6px; }
  .vs-bar-lbl { font-size: 12px; }
  .vs-bar-val { min-width: 36px; font-size: 12.5px; }
}
/* Итог вечера прямо в карточке списка: полоска «красные/чёрные», число игроков и лучший ELO. */
.day-bar { display: flex; height: 5px; margin-top: 10px; border-radius: 3px; overflow: hidden; background: var(--bd); }
.day-bar .db-red { background: var(--ac); }
.day-bar .db-black { background: #50505a; }
.day-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--tx2); }
.day-sub .hist-dot { margin-right: 5px; }
.day-mvp { margin-top: 5px; font-size: 12.5px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-mvp b { color: var(--ok); }

/* Шапка страницы вечера: дата, локация и итоги дня одной плашкой */
.day-hero { background: linear-gradient(180deg, rgba(232,51,42,0.09), transparent 65%), var(--sf); border: 1px solid var(--bd); border-top: 2px solid var(--ac); border-radius: 16px; padding: 16px 18px; margin: 0 0 16px; }
.day-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.day-hero-title { margin: 0; font-size: 26px; line-height: 1.15; }
.day-hero-date { margin-top: 5px; font-size: 13px; color: var(--tx2); }
.day-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin-top: 14px; }
.dh-stat { background: var(--sf2); border: 1px solid var(--bd); border-radius: 10px; padding: 8px 10px; text-align: center; }
.dh-val { font-size: 21px; font-weight: 700; line-height: 1.1; }
.dh-lbl { font-size: 11.5px; color: var(--tx3); margin-top: 3px; }
.dh-red .dh-val { color: var(--ac); }
.dh-black .dh-val { color: #b9b9c4; }
.day-hero .day-bar { margin-top: 12px; }
@media (max-width: 560px) {
  .day-hero { padding: 14px; }
  .day-hero-title { font-size: 21px; }
  .day-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

.rating-tbl .c-club { background-color: rgba(232,51,42,0.07); }
.rating-tbl .c-elo { background-color: rgba(232,51,42,0.06); background-image: linear-gradient(var(--ac), var(--ac)), linear-gradient(var(--ac), var(--ac));
  background-size: 2px 100%, 2px 100%; background-position: left top, right top; background-repeat: no-repeat; }
/* «ELO» в рейтинге и турнире — одна ячейка на обе строки шапки (rowspan=2), по центру: рамка
   начинается с самого верха, на одном уровне с разделителем «По картам» (просьба руководителя).
   Шрифт — как у обычных заголовков колонок, а не мелкий капс строки групп. Селектор с .tbl и th —
   иначе центр перебивает правило «вторая колонка (Игрок) влево»: в строке групп ELO вторая. */
.tbl.rating-tbl .rt-groups th.c-elo-span { vertical-align: middle; text-align: center; font-size: 12px; font-weight: 550; text-transform: none; letter-spacing: 0; color: var(--tx2); padding: 8px 10px; border-bottom: 2px solid var(--ac); }
/* Красная линия под шапкой таблиц рейтинга, вечера и турнира — как в протоколе (просьба
   руководителя). У объединённой ячейки «ELO» она задана выше, в её собственном правиле. */
.tbl.rating-tbl thead tr:last-child > th { border-bottom: 2px solid var(--ac); }
/* На вечере в рамке ELO две колонки — «ELO» и «за вечер»: рамку рисуем только по краям пары,
   иначе между ними встаёт лишняя красная линия. */
.rating-tbl .c-elo-l { background-color: rgba(232,51,42,0.06); background-image: linear-gradient(var(--ac), var(--ac));
  background-size: 2px 100%; background-position: left top; background-repeat: no-repeat; }
.rating-tbl .c-elo-r { background-color: rgba(232,51,42,0.06); background-image: linear-gradient(var(--ac), var(--ac));
  background-size: 2px 100%; background-position: right top; background-repeat: no-repeat; }
/* Над парой — одна объединённая ячейка «ELO» по центру: рамка идёт с самого верха шапки,
   на одном уровне с разделителем «По картам» (просьба руководителя). */
/* Селектор с th и .tbl — иначе центр перебивает правило «вторая колонка (Игрок) влево»: в строке
   групп ячейка ELO как раз вторая по счёту. */
.tbl.rating-tbl .rt-groups th.c-elo-both { background-color: rgba(232,51,42,0.06); background-image: linear-gradient(var(--ac), var(--ac)), linear-gradient(var(--ac), var(--ac));
  background-size: 2px 100%, 2px 100%; background-position: left top, right top; background-repeat: no-repeat;
  color: var(--tx); text-align: center; }
.rating-tbl .rt-groups th { font-size: 11px; font-weight: 600; color: var(--tx2); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; padding: 7px 8px 5px; border-bottom: none; }
.rating-tbl tr.rt-top td { background-color: rgba(232,51,42,0.045); }
.rating-tbl tr.rt-top:hover td { background-color: var(--sf2); }
.rating-tbl tr.rt-1 td { background-color: rgba(243,210,122,0.13); }
.rating-tbl tr.rt-2 td { background-color: rgba(212,216,223,0.11); }
.rating-tbl tr.rt-3 td { background-color: rgba(227,168,120,0.11); }
.rating-tbl tr.rt-1:hover td, .rating-tbl tr.rt-2:hover td, .rating-tbl tr.rt-3:hover td { background-color: var(--sf2); }
.tbl.rating-tbl th, .tbl.rating-tbl td { text-align: center; }
.tbl.rating-tbl th:nth-child(2), .tbl.rating-tbl td:nth-child(2) { text-align: left; }
.tbl.rating-tbl .rt-player { justify-content: flex-start; }

/* ── Список игроков: карточки ──────────────────── */
.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.player-card {
  display: block; position:relative; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px;
  padding: 14px; color: var(--tx);
}
.player-card:hover { color: var(--tx); border-color: var(--tx2); }
.player-card:hover,.player-card:focus-within{z-index:2}
.pc-profile{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:inherit}.pc-profile:hover{color:inherit}
.pc-profile::after{content:'';position:absolute;inset:0;border-radius:14px}
.pc-profile:focus-visible{outline:none}.pc-profile:focus-visible::after{outline:2px solid var(--ac);outline-offset:3px}
.player-card .pair-badge{z-index:2;flex:none;font-size:13px;padding:2px 5px}.player-card .pair-tooltip{max-width:220px}
.pc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc-badges{position:relative;z-index:2;flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:42px;margin-left:auto}
.pc-badges:hover,.pc-badges:focus-within{z-index:3}
.pc-badges .pc-rank{align-self:center;cursor:help}
.pc-mvp{display:inline-flex;align-items:center;justify-content:center;width:28px;min-height:28px;color:#ffc400;font-size:20px;line-height:1;cursor:help}
.pc-name { font-weight: 600; line-height: 1.2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pc-fav { display:flex;flex-wrap:nowrap;align-items:center;gap:4px;height:28px;font-size:11px;color:var(--tx2);font-weight:400;margin-top:12px;white-space:nowrap; }
.pc-fav .fav-chip { flex:none;white-space:nowrap;font-size:11px;padding:3px 6px;gap:4px; }
.pc-fav .fav-chip .fdot{width:6px;height:6px}
.pc-fav>span:not(.fav-chip){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-rank {
  flex: none; margin-left: auto; align-self: flex-start;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px;
  background: var(--sf2); color: var(--tx2); border: 1px solid var(--bd);
}
.pc-rank.top1 { background: rgba(255,196,0,0.14); color: #ffc400; border-color: rgba(255,196,0,0.5); }
.pc-rank.top2 { background: rgba(200,205,217,0.12); color: #cfd2d9; border-color: rgba(200,205,217,0.45); }
.pc-rank.top3 { background: rgba(205,127,50,0.16); color: #d6924f; border-color: rgba(205,127,50,0.5); }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; text-align: center; }
.pc-stats > div { background: var(--sf2); border-radius: 8px; padding: 7px 4px; }
.pc-stats b { display: block; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pc-stats span { font-size: 10.5px; color: var(--tx2); }
@media (prefers-reduced-motion: no-preference) {
  .player-card { transition: transform 0.2s ease, border-color 0.2s ease; }
  .player-card:hover { transform: translateY(-3px); }
}

/* ── Счастливое место (винрейт по местам) ──────── */
.seat-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; }
.seat-col { text-align: center; }
.seat-bar-wrap { height: 96px; display: flex; align-items: flex-end; }
.seat-bar { width: 100%; border-radius: 5px 5px 0 0; min-height: 6px; }
.seat-pct { font-size: 11px; color: var(--tx2); margin-top: 5px; font-variant-numeric: tabular-nums; }
.seat-no { font-size: 12px; font-weight: 600; }
@media (max-width: 600px) { .seat-grid { grid-template-columns: repeat(5, 1fr); row-gap: 14px; } }

/* ── Баланс игр клуба ──────────────────────────── */
.bal-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--sf2); }
.bal-bar > span { height: 100%; }
.bal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--tx2); }
.bal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.bal-legend b { color: var(--tx); }

/* ── Бейдж-уведомление и красивая кнопка «ещё» ──── */
.nav-badge { display: inline-block; background: var(--ac); color: #fff; font-size: 11px; font-weight: 700; min-width: 17px; height: 17px; line-height: 17px; padding: 0 5px; border-radius: 9px; text-align: center; vertical-align: 1px; }
.pill-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); margin-left: 7px; vertical-align: 1px; box-shadow: 0 0 0 3px var(--acsf); }
.stat-alert { border-color: var(--ac) !important; background: var(--acsf); }
.fav-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--sf2); color: var(--tx); }
.fav-chip .fdot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }

.emoji-pick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; max-width: 430px; }
.emoji-pick button { background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; padding: 4px 7px; font-size: 17px; line-height: 1; cursor: pointer; }
.emoji-pick button:hover { border-color: var(--ac); background: var(--acsf); }
.emoji-pick button.ep-sel { border-color: var(--ac); background: var(--acsf); }

/* Эмодзи игрока (flair) — шрифтом Noto Color Emoji, в стиле стикеров профиля (анимации Noto):
   одинаково на любом телефоне, а не эмодзи Samsung/Apple/Windows вперемешку. Выбор эмодзи в
   кабинете — тем же шрифтом, чтобы игрок выбирал ровно то, что потом покажется в таблицах. */
.flair, .emoji-pick button { font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; font-style: normal; }
.flair { display: inline-block; position: relative; width: 1.15em; height: 1.15em; line-height: 1.15em; vertical-align: -.18em; flex: none; }
.flair-fallback { display: block; width: 100%; height: 100%; text-align: center; }
.flair-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.flair-media svg { display: block; width: 100%; height: 100%; }
.flair-ready .flair-media { opacity: 1; }
.flair-ready .flair-fallback { visibility: hidden; }
.flair-ready { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .flair:not([data-flair-animated="0"]) { animation: flairWiggle 4.2s ease-in-out infinite; transform-origin: 50% 80%; }
  .flair-paused { animation-play-state: paused; }
  @keyframes flairWiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    20% { transform: rotate(-9deg) scale(1.14); }
    45% { transform: rotate(0) scale(1.04); }
    70% { transform: rotate(9deg) scale(1.14); }
  }
}

.nav a.nav-admin { color: var(--ac); font-weight: 600; }
.nav a.nav-admin:hover { color: var(--ac-h); background: var(--acsf); }
.nav a.nav-admin::after { background: var(--ac); }
.section-head .more {
  font-size: 12.5px; color: var(--ac); padding: 5px 13px; border: 1px solid var(--bd);
  border-radius: 20px; white-space: nowrap;
}
.section-head .more:hover { background: var(--acsf); border-color: var(--ac); color: var(--ac-h); }
@media (prefers-reduced-motion: no-preference) {
  .section-head .more { transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease; }
  .section-head .more:hover { transform: translateX(2px); }
}

/* Равные колонки и равная высота (пары карточек статистики профиля) */
.grid-2eq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.grid-2eq > .card { margin: 0; }
@media (max-width: 900px) { .grid-2eq { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .pf-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pf-elo { width: 100%; text-align: left; padding-left: 0; }
}

/* Планшеты и узкие окна (≤820): поля форм и инлайновые min-width не форсируют
   ширину — иначе фильтры/формы дают горизонтальный скролл на iPad и узких окнах */
@media (max-width: 820px) {
  .field { min-width: 0 !important; }
  [style*="min-width"] { min-width: 0 !important; }
  .pf-id, .hero-info { min-width: 0 !important; }
}

/* ── Мобильная версия: широкие таблицы, плитки, отступы ── */
@media (max-width: 760px) {
  /* Широкие таблицы (рейтинг, протоколы, админ-списки) скроллятся вбок,
     а не «расплющиваются» в нечитаемую кашу на узком экране */
  table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .container { padding: 0 14px; }
  .vs-head { gap: 8px; }
  /* Рейтинг: # и «Игрок» прилипают слева — при скролле вправо видно, чья строка */
  /* «#» — ровно 44px, как отступ прилипшей колонки «Игрок»: при ширине 41px браузер сдвигал «Игрок»
     на 3px вправо, и она наезжала на левую красную линию ELO. */
  .rating-tbl tr:not(.rt-groups) > :nth-child(1) { position: sticky; left: 0; background: var(--sf); z-index: 2;
    width: 44px; min-width: 44px; max-width: 44px; box-sizing: border-box; }
  .rating-tbl tr:not(.rt-groups) > :nth-child(2) { position: sticky; left: 44px; background: var(--sf); z-index: 2; }
  /* В строке групп (над заголовками) 1-я ячейка занимает обе прилипшие колонки, а 2-я — это уже
     ELO. Раньше она тоже прилипала и давала красный обрывок над заголовком ELO. */
  .rating-tbl tr.rt-groups > :first-child { position: sticky; left: 0; background: var(--sf); z-index: 2; }
  /* Призовые строки полупрозрачные: у прилипших ячеек тот же оттенок поверх сплошного фона,
     иначе сквозь них просвечивают прокручиваемые колонки и чужие границы. */
  .rating-tbl tr.rt-1 > td:nth-child(-n+2) { background: linear-gradient(rgba(243,210,122,.13), rgba(243,210,122,.13)), var(--sf); }
  .rating-tbl tr.rt-2 > td:nth-child(-n+2) { background: linear-gradient(rgba(212,216,223,.11), rgba(212,216,223,.11)), var(--sf); }
  .rating-tbl tr.rt-3 > td:nth-child(-n+2) { background: linear-gradient(rgba(227,168,120,.11), rgba(227,168,120,.11)), var(--sf); }
  .rating-tbl tr:hover > td:nth-child(-n+2) { background: var(--sf2); }
  /* Красные горизонтальные следы при прокрутке: браузер перерисовывал только полосу экрана, и
     тонкие красные разделители колонок (inset-тени) вместе с прилипшими ячейками размазывались
     поперёк. Отдельный слой отрисовки у прокручиваемой таблицы и у прилипших ячеек убирает хвосты. */
  table.tbl { transform: translateZ(0); }
  /* Только прилипшие ячейки. В строке групп вторая ячейка — «ELO» (объединённая на две строки
     шапки), она не прилипает; со своим слоем отрисовки над ней появлялась красная горизонтальная
     черта. */
  .rating-tbl tr:not(.rt-groups) > :nth-child(-n+2),
  .rating-tbl tr.rt-groups > :first-child { backface-visibility: hidden; }
  /* Тач-таргеты: пальцу нужно ≥40px */
  .react-btn { padding: 9px 13px; }
  .ava-actions button { padding: 8px 12px; font-size: 13px; }
  .emoji-pick button { padding: 7px 10px !important; }
  .sortable thead th { padding-top: 12px; padding-bottom: 12px; }
  .tbl .btn, .tbl .btn-ghost { padding: 8px 12px !important; font-size: 13px !important; }
  /* iOS зумит страницу при фокусе полей с шрифтом <16px — протоколы и формы */
  .protocol-tbl input, .protocol-tbl select { font-size: 16px; padding: 9px 8px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  /* Таймер судьи: компактнее, кнопки крупнее */
  .timer-card { gap: 10px; }
  .timer-display { font-size: 30px; }
  .tm-btn { padding: 9px 12px; }
}
@media (max-width: 560px) {
  .pf-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .container { padding: 0 11px; }
  .guest-title { font-size: 24px; }
  .vs-h2h { grid-template-columns: 1fr; gap: 6px; }
  .emoji-pick { max-width: 100% !important; }
  .ss-menu { max-width: calc(100vw - 22px); }
  .tp-tbl th, .tp-tbl td { font-size: 12px; padding: 7px 8px; }
  .noms-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Битва факультетов: убираем дублирующие колонки (3 Игроков, 5 Побед), имя переносим */
  .fac-tbl th:nth-child(3), .fac-tbl td:nth-child(3),
  .fac-tbl th:nth-child(5), .fac-tbl td:nth-child(5) { display: none; }
  .fac-tbl td:nth-child(2) { white-space: normal; }
}
@media (max-width: 480px) {
  .post-modal-panel { padding: 18px 10px; }
  .post-modal-x { top: 10px; right: 10px; font-size: 14px; } /* 40×40 — не уменьшаем тач-таргет */
  #crop-img, #crop-modal img { max-height: 48vh; }
}
@media (max-width: 400px) {
  .brand-text b { font-size: 18px; letter-spacing:-.5px; }
  .user-pill { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pf-name { font-size: 22px; }
  .pf-tiles { gap: 7px; }
}
@media (max-width: 360px) {
  .container { padding: 0 8px; }
  .pf-name { font-size: 20px; }
}

/* ── Календарь дней рождения ── */
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 14px 0; align-items: start; }
.bd-month { padding: 12px 14px; }
.bd-month-now { border-color: var(--ac); }
.bd-mhead { display: flex; justify-content: space-between; align-items: baseline; font-weight: 650; font-size: 15px; margin-bottom: 8px; }
.bd-mhead span { font-size: 12px; color: var(--tx3); font-variant-numeric: tabular-nums; }
.bd-empty { color: var(--tx3); font-size: 13px; }
.bd-rows { display: flex; flex-direction: column; gap: 3px; }
.bd-row { display: flex; align-items: center; gap: 8px; color: var(--tx); padding: 4px 6px; border-radius: 8px; }
.bd-row:hover { color: var(--tx); background: var(--sf2); }
.bd-today { background: var(--acsf); }
.bd-day { flex: none; min-width: 26px; font-variant-numeric: tabular-nums; color: var(--tx2); font-size: 13px; }
.bd-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; font-size: 13.5px; }
.bd-mark { flex: none; font-size: 11.5px; color: var(--ac); font-weight: 600; }

/* ── Системные элементы браузера — в тёмной теме сайта ──
   color-scheme: dark перекрашивает то, что рисует сам браузер: календарь и выбор времени,
   раскрытые выпадающие списки, автозаполнение. Галочки и переключатели — в фирменный красный.
   Стрелки числовых полей прячем: вместо них кнопки −/+ (data-stepper, app.js). */
:root { color-scheme: dark; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--ac); }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── «Летопись клуба» в «Зале славы»: основание и вехи по протоколам ── */
.chron { margin-bottom: 14px; }
.chron-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.chron-head h2 { margin: 0; }
.chron-sub { font-size: 12.5px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.chron-line { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.chron-step { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 12px;
  border-radius: 11px; background: var(--sf2); border: 1px solid var(--bd); color: var(--tx); }
a.chron-step:hover { border-color: var(--ac); color: var(--tx); }
.chron-ic { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.chron-t { font-size: 14px; font-weight: 700; }
.chron-d { font-size: 13px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.chron-w { font-size: 11.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chron-found { background: var(--acsf); border-color: rgba(232,51,42,.5); }
.chron-next { border-style: dashed; }

/* Окно подтверждения/сообщения вместо системных confirm()/alert() (app.js: triadaConfirm) */
.ach-modal.tr-dlg { z-index: 1300; }
.tr-dlg-box { width: min(420px, 100%); padding: 20px 20px 16px; animation: postModalIn .16s ease; }
.tr-dlg-msg { margin: 2px 2px 18px; font-size: 15px; line-height: 1.55; color: var(--tx); white-space: pre-line; }
.tr-dlg-btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.tr-dlg-btns .btn { min-width: 96px; }

/* ── Кнопки −/+ вместо выпадающих списков (протокол: фолы, техи, удаление, выбывание) ── */
.stp { display: inline-flex; align-items: center; gap: 1px; padding: 2px; white-space: nowrap;
  background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; }
.stp-b { width: 24px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--tx2); font-size: 16px; line-height: 1; cursor: pointer; }
.stp-b:hover:not(:disabled) { background: var(--sf); color: var(--tx); }
.stp-b:disabled { opacity: .28; cursor: default; }
.stp-v { min-width: 24px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--tx);
  font-variant-numeric: tabular-nums; }
.stp-zero .stp-v { color: var(--tx3); font-weight: 400; }   /* нули приглушены — ненулевое видно сразу */
.stp-max .stp-v { color: var(--ac); }                      /* 4 фола / удаление на крит. круг */
/* 3 фола — жёлтым, всей плашкой (просьба руководителя): следующий фол — удаление */
.stp.stp-caution { background: rgba(230,177,58,.14); border-color: rgba(230,177,58,.7); }
.stp-caution .stp-v { color: #f2c75c; }
@media (pointer: coarse) { .stp-b { width: 32px; height: 34px; font-size: 18px; } }  /* под палец */
/* Числовое поле между кнопками −/+ (input[data-stepper]) — можно и вписать число. Пустое
   текстовое поле (допы/минусы в протоколе) = 0: плейсхолдер «0» приглушён, как нули у фолов. */
.stp.stp-num input { width: 46px; margin: 0; padding: 4px 2px; border: 0; border-radius: 6px;
  background: transparent; color: var(--tx); box-shadow: none; text-align: center;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stp.stp-num input:focus { outline: none; background: var(--sf); }
.stp.stp-num input::placeholder { color: var(--tx3); font-weight: 400; opacity: 1; }
.protocol-tbl .stp.stp-num input { width: 36px; }
@media (pointer: coarse) { .stp.stp-num input { font-size: 16px; } }   /* iOS не зумит поле < 16px */

/* ── «!» в рейтинге: игрока нет в системе (нет аккаунта). Красный, как просил руководитель.
   Подсказка своя — появляется сразу при наведении (системный title ждёт ~секунду), на телефоне
   открывается нажатием (см. app.js). Справа от знака: так её не обрежет прокрутка таблицы. ── */
.rt-unreg { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; flex: none; vertical-align: middle;
  background: var(--acsf); color: var(--ac); box-shadow: inset 0 0 0 1px rgba(232,51,42,.6);
  font-size: 10.5px; font-weight: 800; line-height: 1; cursor: help; }
.rt-unreg::after { content: attr(data-tip); position: absolute; left: calc(100% + 9px); top: 50%;
  transform: translate(-4px, -50%); white-space: nowrap; padding: 7px 11px; border-radius: 9px;
  background: var(--sf); border: 1px solid rgba(232,51,42,.5); color: var(--tx);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; box-shadow: 0 12px 30px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .08s, transform .08s; z-index: 30; }
.rt-unreg:hover::after, .rt-unreg:focus-visible::after, .rt-unreg.show::after {
  opacity: 1; visibility: visible; transform: translate(0, -50%); }
.day-registration-name { display: flex; align-items: center; justify-content: center; }
.day-registration-name > .nm { min-width: 0; }
.day-registration-name > .day-pass-badge::after {
  left: auto; right: 0; top: auto; bottom: calc(100% + 8px); transform: none; }

/* ── Подсказка ника в протоколе (вместо белого системного datalist) ── */
.nick-dd { position: fixed; z-index: 2000; min-width: 210px; max-height: 280px; overflow-y: auto; padding: 4px;
  background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 16px 44px rgba(0,0,0,.55); }
.nick-dd-item { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 7px;
  cursor: pointer; font-size: 14px; color: var(--tx); white-space: nowrap; }
.nick-dd-item:hover, .nick-dd-item.on { background: var(--sf2); }
.nick-dd-item.on { box-shadow: inset 2px 0 0 var(--ac); }
.nick-dd-item img, .nick-dd-item .avatar-circle { width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  flex: none; font-size: 11px; }
.nick-dd-name b { color: var(--ac); font-weight: 700; }
.nick-dd-tag { margin-left: auto; padding-left: 12px; font-size: 11px; color: var(--ok); }
.nick-dd-foot { margin-top: 3px; padding: 6px 9px 3px; border-top: 1px solid var(--bd); font-size: 11px; color: var(--tx3); }

/* Кабинет: две самостоятельные карточки рядом, каждая по высоте содержимого. */
.cabinet-media { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.cabinet-main > .card, .cabinet-account > .card { min-width: 0; margin: 0; }
.cabinet-main, .cabinet-account { display: grid; gap: 20px; min-width: 0; }
.cabinet-media-single { grid-template-columns: minmax(0, 1fr); }
.cabinet-side { min-width: 0; }
.cabinet-appearance .emoji-pick { max-width: none; }
.gantt { margin: 14px 0; }
.gantt-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gantt-caption > span, .gantt-note, .gantt-empty { color: var(--tx2); font-size: 13px; }
.gantt-scroll { overflow-x: auto; border: 1px solid var(--bd); border-radius: 12px; scrollbar-width: thin; scrollbar-color: var(--ac) var(--sf2); }
.gantt-scroll::-webkit-scrollbar { height: 8px; }
.gantt-scroll::-webkit-scrollbar-thumb { background: var(--ac); border-radius: 8px; }
.gantt-scroll::-webkit-scrollbar-track { background: var(--sf2); }
.gantt-scroll:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
.gantt-inner { min-width: 890px; --gantt-label-width: 210px; }
.gantt-row { display: grid; grid-template-columns: var(--gantt-label-width) minmax(0, 1fr); border-bottom: 1px solid var(--bd); }
.gantt-row:last-child { border-bottom: 0; }
.gantt-label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; padding: 10px 12px; border-right: 1px solid var(--bd); background: var(--sf); min-width: 0; }
.gantt-label .rt-player { min-width: 0; max-width: 100%; font-size: 13px; }
.gantt-label .rt-player > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-track { overflow: clip; position: relative; min-width: 0; min-height: 48px; }
.gantt-axis { color: var(--tx2); font-size: 12px; }
.gantt-axis .gantt-track { min-height: 38px; }
.gantt-tick { position: absolute; top: 11px; transform: translateX(-50%); white-space: nowrap; }
.gantt-tick.is-first { transform: none; margin-left: 4px; }
.gantt-tick.is-last { transform: translateX(-100%); margin-left: -4px; }
.gantt-gridline { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--bd); pointer-events: none; }
.gantt-total .gantt-label { color: var(--tx2); font-size: 12px; }
.gantt-count { position: absolute; top: 9px; height: 30px; margin: 0; border: 1px solid var(--bd); border-radius: 5px; color: #9dcfff; background: #1d2d40; padding: 0 2px; font-weight: 700; overflow: hidden; min-width: 0; }
.gantt-count.is-full { background: #19382a; color: #79dfa2; }
.gantt-count.is-empty { background: var(--sf2); color: var(--tx3); }
.gantt-count:hover, .gantt-count:focus-visible, .gantt-count[aria-pressed="true"] { border-color: var(--tx); outline: 1px solid var(--tx); outline-offset: -1px; }
.gantt-bar { position: absolute; top: 10px; height: 28px; border: 1px solid #4389ad; border-radius: 7px; background: linear-gradient(90deg,#26597d,#237c87); color: #edf8ff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gantt-bar > span { padding: 0 8px; white-space: nowrap; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.gantt-person:hover .gantt-label, .gantt-person.is-selected .gantt-label { background: var(--sf2); }
.gantt-person.is-selected .gantt-bar { border-color: #9ce3f1; box-shadow: 0 0 0 1px #9ce3f1; }
.gantt-person.is-muted .gantt-bar { opacity: .25; }
.gantt-person.is-muted .rt-player { opacity: .55; }
.gantt-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.gantt-legend, .gantt-selection { color: var(--tx2); font-size: 12px; }
.gantt-reset { margin: 0; font-size: 12px; padding: 5px 12px; }
.gantt-reset[hidden] { display: none; }
.gantt-selection { margin: 8px 0; }
.answer-history { margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--bd); }
.gathering-confirmed { color: var(--tx2); font-size: 14px; }
.gathering-confirmed.is-confirmed { color: var(--ok); font-weight: 700; }
.gathering-approval { margin: 20px 0; padding-top: 4px; }
.gathering-approval h3 { margin-bottom: 6px; }
.answer-history > summary { cursor: pointer; font-weight: 600; font-size:13px; }
.answer-history > summary span, .answer-history-note, .answer-history time, .answer-history small, .answer-source { color: var(--tx2); font-size: 12px; font-weight: 400; }
.answer-history ol { list-style: none; padding: 0; margin: 0; }
.answer-history li { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bd); font-size:12px;align-items:start; }
.answer-history-entry{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr);align-items:start;gap:8px 16px;min-width:0}
.answer-history li p { margin: 1px 0 0; font-size:12px;line-height:1.5; }
.answer-history .rt-player { max-width: 100%;font-size:12px; }
.answer-history .rt-player>img,.answer-history .rt-player>.avatar-circle{width:20px!important;height:20px!important;font-size:10px!important;margin-right:5px!important}
.answer-history .rt-player > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.answer-history small { display: block; margin-top: 2px;font-size:11px; }
.answer-history time { padding-top: 2px; font-variant-numeric: tabular-nums;font-size:11px; }
.answer-history-note{font-size:11px;line-height:1.5;margin:8px 0 10px}.answer-history .answer-source{font-size:11px}
.answer-history nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.answer-history nav .btn { margin: 0; padding: 6px 12px; font-size: 13px; }
.answer-history[aria-busy="true"] nav { pointer-events: none; opacity: .6; }
@media (max-width: 600px) { .answer-history li { grid-template-columns: minmax(0, 1fr); gap: 3px; }.answer-history-entry{grid-template-columns:minmax(90px,38%) minmax(0,1fr);gap:8px} }
.gantt-table { margin: 12px 0 18px; }
.gantt-table > summary { cursor: pointer; color: var(--tx2); font-size: 13px; }
@media (max-width: 700px) { .gantt-inner { --gantt-label-width: 170px; min-width: 820px; } }
.flair-motion { margin-top: 12px; max-width: 220px; }
@media (max-width: 700px) {
  .cabinet-media { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Управление вечером остаётся на обычных страницах. */
.day-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:12px 0}
.day-actions form,.day-actions .field{margin:0}
.day-actions select{max-width:100%}
.day-management{margin-top:16px;padding-top:12px;border-top:1px solid var(--bd)}
.day-management>summary{cursor:pointer;font-weight:600}
.day-management-hint{color:var(--tx2);font-size:13px}
.day-cell>.day-actions{padding:0 12px 12px}
.day-cell>.day-actions .btn{font-size:13px;padding:7px 10px}
@media(max-width:600px){.day-actions .field{max-width:100%}.day-actions .field select{width:100%}}

.notification-settings{margin-top:18px;border-top:1px solid var(--bd);padding-top:14px}
.notification-settings summary{cursor:pointer;font-weight:600}
.notification-settings label{display:flex;gap:9px;align-items:center;margin:12px 0;font-size:14px}
.notification-settings input[type=checkbox]{width:16px;height:16px;flex-shrink:0}
.notification-settings p{font-size:12px;color:var(--tx2)}
.ss-hint{padding:10px 12px;font-size:12px;color:var(--tx2);border-bottom:1px solid var(--bd)}
.cabinet-signup{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.cabinet-signup .field{flex:1 0 130px;margin:0}.cabinet-signup .signup-comment{flex:2 0 180px}
@media(max-width:600px){.cabinet-signup .signup-comment{flex-basis:100%}}

.flair-controls-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:end}
.flair-controls-row .field{min-width:0}.flair-controls-row select{width:100%;min-width:0}.flair-controls-row #flair-preview{flex:0 0 24px}
.flair-controls-row input:not([type=hidden]),.flair-controls-row select{height:46px}
.pair-help{font-size:14px;color:var(--tx2);line-height:1.6}.pair-player{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pair-player a{color:var(--tx);font-weight:600}
.relationship-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.relationship-fields>.field{min-width:0}.relationship-pair p{margin:0 0 10px;font-size:13px;overflow-wrap:anywhere}
.relationship-pair .btn{padding:8px 10px;font-size:12px}.relationship-pair .pair-player{gap:6px}.relationship-pair .pair-invite:first-of-type{padding-top:0}
@media(max-width:600px){.relationship-fields{grid-template-columns:minmax(0,1fr)}}
.pair-invite{padding:12px 0;border-bottom:1px solid var(--bd)}.pair-hero{text-align:center;background:radial-gradient(ellipse at top,#17433b88,transparent 70%),var(--sf)}
.pair-duo{--pair-avatar-size:128px;display:flex;justify-content:center;gap:48px;flex-wrap:wrap}.pair-duo a{display:flex;flex:0 1 220px;min-width:0;flex-direction:column;align-items:center;gap:16px;color:var(--tx)}.pair-duo b{max-width:100%;font-size:22px;line-height:1.4;overflow-wrap:anywhere}
@media(max-width:600px){.pair-duo{--pair-avatar-size:96px;gap:20px}.pair-duo a{flex-basis:calc((100% - 20px)/2);gap:12px}.pair-duo b{font-size:20px}}
.pair-stats{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin:25px 0}.pair-stats b{display:block;font-size:38px;color:#6cd8b6}.pair-stats span{font-size:13px;color:var(--tx2)}
.day-settings>summary{cursor:pointer;font-weight:600}
@media(max-width:600px){.flair-controls-row{gap:10px}.flair-controls-row label{font-size:12px}.flair-controls-row select,.flair-controls-row input{padding-left:8px;padding-right:8px;font-size:13px}}

/* Actions keep their form and scroll position while the result appears in a toast. */
.cabinet-appearance .emoji-pick{margin-bottom:20px}
.toast-region{position:fixed;right:20px;bottom:24px;z-index:10050;display:grid;gap:10px;max-width:min(440px,calc(100vw - 32px));pointer-events:none}
.action-toast{pointer-events:auto;display:flex;align-items:center;gap:16px;padding:15px 18px;border:1px solid #419c74;border-radius:12px;background:#17271f;color:#f0fff6;box-shadow:0 8px 32px #0006;font-size:14px;line-height:1.5}
.action-toast-error{border-color:#cf605b;background:#351f24;color:#fff1ef}
.action-toast>span{min-width:0;overflow-wrap:anywhere}
.action-toast button{flex-shrink:0;margin:0 0 0 auto;padding:0 4px;background:none;border:0;color:inherit;font-size:24px;cursor:pointer}
form[aria-busy="true"] button[type="submit"],form[aria-busy="true"] button:not([type]){opacity:.65;cursor:wait}

.rating-player-with-pair{display:inline-flex;align-items:center;gap:8px}
.pair-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:3px 6px;border:1px solid #47796566;border-radius:8px;background:#1d3a3033;text-decoration:none;font-size:15px}
.pair-badge>.pair-tooltip{display:none;position:absolute;z-index:20;top:100%;left:0;min-width:180px;max-width:260px;padding:10px;border:1px solid var(--bd);border-radius:8px;background:var(--sf2);color:var(--tx);font-size:12px;white-space:normal}
.pair-badge:hover>.pair-tooltip,.pair-badge:focus-visible>.pair-tooltip{display:block}
.pair-icon{display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;flex:none;vertical-align:middle;font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;line-height:1}
.pair-icon img{width:100%;height:100%;object-fit:contain}
.pair-icon-settings{margin:12px 0;border:1px solid var(--bd);border-radius:10px;background:var(--sf2)}
.pair-icon-settings>summary{padding:10px 12px;cursor:pointer;font-size:13px;font-weight:600}
.pair-icon-form{padding:0 12px 12px;min-width:0}.pair-icon-form .pair-help{font-size:12px;margin:8px 0 12px}
.pair-icon-preview{display:flex;align-items:center;justify-content:center;padding:12px;border-radius:8px;background:var(--sf);font-size:32px}
.pair-icon-modes{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.pair-icon-modes label{position:relative;cursor:pointer;margin:0;font-size:12px}
.pair-icon-modes input,.pair-icon-option input{position:absolute;opacity:0;width:1px;height:1px}
.pair-icon-modes span{display:block;padding:7px 9px;border:1px solid var(--bd);border-radius:8px}
.pair-icon-modes input:checked+span,.pair-icon-option:has(input:checked){border-color:var(--ac);background:var(--sf)}
.pair-icon-modes input:focus-visible+span,.pair-icon-option:has(input:focus-visible){outline:2px solid var(--ac);outline-offset:2px}
.pair-icon-form [hidden]{display:none}.pair-icon-form input[type=file]{width:100%;min-width:0;font-size:12px;padding:8px}
.pair-icon-form .field{display:flex;flex-direction:column;gap:6px;font-size:12px;margin:10px 0}
.pair-icon-picks{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.pair-icon-picks button,.pair-icon-option{display:flex;align-items:center;justify-content:center;position:relative;width:38px;height:38px;padding:6px;margin:0;border:1px solid var(--bd);border-radius:8px;background:var(--sf);color:var(--tx);font-size:20px;cursor:pointer}
.pair-icon-picks button:hover{border-color:var(--ac)}.pair-icon-picks button{font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif}
.pair-icon-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.pair-icon-actions .btn{max-width:100%;white-space:normal}
.pair-status{display:flex;justify-content:center;margin:12px 0 20px}
.pair-icon-inline{position:relative;display:inline-block;max-width:100%;margin:0;border:0;background:none;text-align:left}
.pair-icon-inline>summary{display:flex;align-items:center;justify-content:center;gap:7px;list-style:none;color:var(--tx2);font-size:14px;font-weight:400;padding:6px 8px;border-radius:8px}
.pair-icon-inline>summary::-webkit-details-marker{display:none}.pair-icon-inline>summary:hover,.pair-icon-inline[open]>summary{background:var(--sf2);color:var(--tx)}
.pair-icon-edit{color:var(--tx3);font-size:18px;flex:none}
.pair-icon-inline>.pair-icon-form{position:absolute;z-index:40;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:340px;max-width:calc(100vw - 48px);max-height:min(65vh,560px);overflow-y:auto;padding:14px;border:1px solid var(--bd);border-radius:12px;background:var(--sf2);box-shadow:0 16px 45px #0008}
.pair-icon-inline .btn{font-size:12px;padding:9px 12px}
.pair-calls h2{margin-top:0}.pair-call-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}
.pair-call-card{min-width:0;border:1px solid var(--bd);border-radius:12px;background:var(--sf2);padding:18px}
.pair-call-people{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pair-call-people a{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;color:var(--tx);font-weight:600}
.pair-call-people a>span{overflow-wrap:anywhere}.pair-call-people .avatar-circle,.pair-call-people img{flex:none}.pair-call-arrow{color:var(--tx3)}
.pair-call-score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:20px 0 12px}.pair-call-score strong{font-size:34px;line-height:1.1}.pair-call-score>span{font-size:13px;color:var(--tx2)}
.pair-call-bar{height:7px;background:#e8332a45;border-radius:5px;overflow:hidden}.pair-call-bar>span{display:block;height:100%;background:var(--ok)}
.pair-call-counts{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:13px;color:var(--tx2);margin-top:14px}.pair-call-counts b{margin-left:4px}
.pair-call-ok{color:var(--ok)}.pair-call-wrong{color:#ff8077}.pair-call-muted{color:var(--tx3)}
.pair-call-mutual{font-size:14px;color:var(--tx2)}.pair-call-mutual b{color:var(--tx)}
.pair-call-history{margin-top:20px;border-top:1px solid var(--bd);padding-top:16px}.pair-call-history>summary{font-weight:600;cursor:pointer;font-size:14px}
.pair-call-history .table-scroll{margin-top:14px}.pair-call-history table{min-width:600px}.pair-call-history small{display:block;color:var(--tx2);font-size:12px;line-height:1.5;margin-top:5px}
.pair-call-empty{color:var(--tx2);font-size:14px;padding:12px 0 0}
@media(max-width:650px){.pair-call-grid{grid-template-columns:1fr}.pair-call-card{padding:14px}.pair-icon-inline>summary{font-size:12px}}
.pair-badge{border-color:color-mix(in srgb,var(--pair-color,#6cd8b6) 40%,transparent);background:color-mix(in srgb,var(--pair-color,#6cd8b6) 9%,transparent)}
.pair-hero .pair-stats b{color:var(--pair-color,#6cd8b6)}
.pair-quote{max-width:620px;margin:20px auto;padding:12px 18px;border-left:3px solid var(--pair-color,#6cd8b6);color:var(--tx);text-align:left;font-style:italic;white-space:pre-line;overflow-wrap:anywhere}
.pair-quote-preview{margin:12px 0 0;font-size:13px;padding:8px 12px}.pair-icon-preview{border:1px solid var(--pair-color,#6cd8b6)}
.pair-hero>.pair-quote{width:fit-content;max-width:min(620px,100%);margin:24px auto 28px;padding:18px 26px;border:1px solid #eedbb536;border-top:2px solid var(--pair-color,#6cd8b6);border-radius:14px;background:#203631b8;box-shadow:0 8px 24px #15241f26;text-align:center;line-height:1.7;color:#fff3e3}
.pair-tooltip-quote{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--bd);font-style:italic;font-weight:400;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.pair-find-link{margin-top:14px}
.pair-color-field{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;margin-top:14px}
.pair-color-field input[type=color]{width:48px;height:34px;padding:3px;cursor:pointer;flex:none}
.pair-color-picks{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}.pair-color-picks button{width:26px;height:26px;padding:0;border:2px solid transparent;border-radius:50%;background:var(--swatch);cursor:pointer}
.pair-color-picks button[aria-pressed=true]{outline:2px solid var(--tx);outline-offset:2px}
.gantt-declines{min-width:0;max-width:100%;margin:16px 0;color:var(--tx2);font-size:13px}
.gantt-declines-scroll{display:flex;align-items:center;gap:14px;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:10px 0 12px;scrollbar-width:thin;scrollbar-color:var(--ac) var(--sf2)}
.gantt-declines-scroll>.rt-player{flex:0 0 auto;white-space:nowrap}
.gantt-declines-scroll::-webkit-scrollbar{height:8px}
.gantt-declines-scroll::-webkit-scrollbar-thumb{background:var(--ac);border-radius:8px}
.gantt-declines-scroll::-webkit-scrollbar-track{background:var(--sf2)}
.gantt-declines-scroll:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
.poll-settings-row{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:16px 0}
.poll-settings-row .day-actions{margin:0;align-items:end;gap:10px}
.poll-settings-row .field{margin:0}

.pair-hero{background:linear-gradient(180deg,#19382e55,#25392f80),url('/assets/img/pair-warm-mafia.png') center 72%/cover;border-color:#cda97666}.pair-hero>.pair-help,.pair-hero .pair-icon-inline>summary{color:#eee1cd;text-shadow:0 1px 8px #15251dcc}.pair-hero .pair-duo a{color:#fff6e9;text-shadow:0 1px 8px #15251dcc}.pair-hero h1{color:#fff6e9;text-shadow:0 2px 14px #15251d99}
.pair-hero .pair-stats{width:fit-content;max-width:100%;margin:25px auto;padding:16px 24px;border:1px solid #eedbb536;border-radius:14px;background:#19332ee6}.pair-hero .pair-stats span{color:#eee1cd}
@media(max-width:650px){.pair-hero{background-position:center,left bottom}}
.pair-hero-icon{display:flex;align-items:center;justify-content:center;min-height:72px;margin:8px auto 14px;filter:drop-shadow(0 4px 14px #15241f30)}.pair-hero-icon .pair-icon{font-size:48px}.pair-hero-icon .pair-icon img{width:64px;height:64px;object-fit:contain}
.pair-performance{min-width:0}.pair-performance h3{margin-top:28px}.pair-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.pair-overview>div{padding:18px;background:var(--sf2);border:1px solid var(--bd);border-radius:12px}.pair-overview strong{display:block;font-size:30px;line-height:1.3}.pair-overview span{display:block;margin-top:6px;color:var(--tx2);font-size:13px}.pair-history-range{display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--tx2);font-size:13px}.pair-history-range a{text-decoration:underline;text-underline-offset:3px}
.pair-side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.pair-side{padding:22px;border:1px solid var(--bd);border-top:3px solid #ec675d;border-radius:14px;background:linear-gradient(140deg,#74323926,transparent),var(--sf2)}.pair-side-black{border-top-color:#a9a3ca;background:linear-gradient(140deg,#615f8026,transparent),var(--sf2)}.pair-side h4{margin:0;font-size:17px}.pair-side-rate{display:flex;align-items:baseline;gap:12px;margin:14px 0}.pair-side-rate strong{font-size:34px}.pair-side-rate span{color:var(--tx2);font-size:13px}.pair-side-bar{height:8px;background:var(--bd);border-radius:8px;overflow:hidden}.pair-side-bar>span{display:block;height:100%;background:#ec675d}.pair-side-black .pair-side-bar>span{background:#a9a3ca}.pair-side-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 0}.pair-side-counts dt{font-size:12px;color:var(--tx2)}.pair-side-counts dd{margin:5px 0 0;font-size:20px;font-weight:600}
.pair-recent-games{display:flex;gap:10px;flex-wrap:wrap;padding:0;list-style:none;margin:18px 0}.pair-recent-games a{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;border:1px solid;border-radius:50%;font-weight:700}.pair-result-wins{color:#8ae0b3;background:#246c4633;border-color:#448761}.pair-result-losses{color:#ffa99f;background:#91382f33;border-color:#995048}.pair-result-draws{color:#d5c8ec;background:#75648933;border-color:#8b7e9f}.pair-recent-games a:hover{filter:brightness(1.2)}.pair-recent-games a:focus-visible{outline:2px solid var(--ac);outline-offset:3px}.pair-role-table{min-width:440px}.pair-role-table th,.pair-role-table td{white-space:normal;overflow-wrap:anywhere}
.pair-performance .table-scroll,.pair-win-list .table-scroll,.pair-call-history .table-scroll{max-width:100%;overflow-x:auto}
.pair-role-table th:nth-child(-n+2){width:25%}.pair-role-table th:nth-child(n+3),.pair-role-table td:nth-child(n+3){white-space:nowrap}
@media(max-width:700px){.pair-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.pair-side-grid{grid-template-columns:1fr}.pair-side{padding:18px}.pair-overview>div{padding:14px}}
@media(max-width:420px){.pair-side-counts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pair-infographic{padding:10px 0 22px}.pair-team-legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--tx2);font-size:14px}.pair-team-legend b{color:var(--tx);font-size:24px;margin-left:10px}
.pair-team-bar{display:flex;height:18px;border-radius:12px;overflow:hidden;margin:14px 0 32px;background:#24232b}.pair-team-bar>span:first-child{background:linear-gradient(90deg,#b93339,#fb7967)}.pair-team-bar>span:last-child{background:linear-gradient(90deg,#565574,#a79dc1)}
.pair-months{display:flex;gap:12px;align-items:end;overflow-x:auto;padding:8px 2px 14px;scrollbar-width:thin}
.pair-month{display:flex;flex:1;min-width:70px;max-width:130px;flex-direction:column;gap:8px;align-items:center;padding:10px 8px;background:transparent;border:1px solid transparent;border-radius:10px;color:var(--tx2);font-size:12px;cursor:pointer;margin:0}
.pair-month:hover,.pair-month[aria-pressed="true"]{border-color:#91cdb4;background:#21433544;color:var(--tx)}.pair-month-total{font-weight:700;font-size:18px;color:var(--tx)}
.pair-month-track{display:flex;flex-direction:column;justify-content:flex-end;width:100%;max-width:58px;height:160px;border-radius:6px;overflow:hidden;background:#ffffff04}
.pair-month-red{background:linear-gradient(0deg,#b93339,#fb7967)}.pair-month-black{background:linear-gradient(0deg,#565574,#a79dc1)}.pair-win-list>summary{cursor:pointer;color:var(--tx2);padding:12px 0}.pair-win-list tr[hidden]{display:none}
@media(max-width:600px){.pair-stats{gap:18px}.pair-stats b{font-size:30px}.pair-team-legend b{font-size:20px}.poll-settings-row .poll-title-field{flex-basis:100%}}

.album-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.album-video{grid-column:span 2;min-width:0}.album-video-player{aspect-ratio:16/9;background:radial-gradient(ellipse at top,#4c2d36,#121218);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.album-video-player button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;background:transparent;color:var(--tx);border:0;margin:0;cursor:pointer}.video-play-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--ac);font-size:26px}.album-video-player iframe{width:100%;height:100%;border:0}.album-video>a{display:inline-block;margin-top:10px;font-size:13px}
@media(max-width:600px){.album-media-grid{grid-template-columns:1fr}.album-video{grid-column:span 1}}

.relationship-summary{margin-top:16px;color:var(--tx2);font-size:12px}.relationship-person{display:flex;gap:9px;align-items:center;color:var(--tx);font-size:14px;text-decoration:none}
.relationship-detail{display:inline-block;font-size:12px;white-space:nowrap}.relationship-summary{margin-top:8px}
.relationship-pair-person{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--bd);border-radius:8px;background:var(--sf2);color:var(--tx);font-size:14px;min-width:0}.relationship-pair-person>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.relationship-pair-person .avatar-circle{flex:none}
.relationship-fields .ss-input{height:42px}.partner-choice-slot+.partner-choice-slot{margin-top:10px}.partner-choice-slot[hidden]{display:none}.partner-add{margin-top:10px;padding:0;border:0;background:none;color:var(--tx2);font:inherit;font-size:12px;cursor:pointer}.partner-add:hover{color:var(--tx)}.partner-add[hidden]{display:none}
.club-connection{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--bd)}.club-connection-label{color:var(--tx2);font-size:13px}.club-connection .relationship-person{min-width:0}.club-connection .relationship-person>span{min-width:0;overflow-wrap:anywhere}.club-connection .avatar-circle{flex:none}.pair-end{text-align:center;margin:24px 0}.pair-end .btn{font-size:12px;color:var(--tx2)}
@media(max-width:600px){.club-connection{grid-template-columns:minmax(0,1fr) auto}.club-connection-label{grid-column:1/-1}.relationship-fields>.field{margin-bottom:8px}}

.pf-since{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:10px 0 13px;color:var(--tx2);font-size:12px;letter-spacing:.2px}.pf-since time{color:var(--tx);font-size:13px;font-variant-numeric:tabular-nums}
.pf-tiles .lbl{line-height:1.4;min-height:2.8em}

.pf-quote{margin:12px 0 18px;padding:0;color:var(--tx2);font-style:italic;font-size:15px;line-height:1.65;max-width:620px;overflow-wrap:anywhere}

.pf-artifacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.pf-artifact{--artifact-color:#b6c6e7;display:flex;align-items:center;gap:12px;min-height:74px;padding:13px 16px;border-radius:14px;background:radial-gradient(ellipse at 0 50%,#ffffff08,transparent 80%),#ffffff03;box-shadow:inset 0 1px #ffffff06;max-width:100%}
.pf-artifact>span:last-child{min-width:0}.pf-artifact small{display:block;color:var(--tx2);font-size:10px;letter-spacing:.6px;margin-bottom:5px}.pf-artifact b{display:block;color:var(--tx);font-size:13px;font-weight:650;line-height:1.35}
.artifact-symbol{flex-shrink:0;display:grid;place-items:center;width:38px;height:42px;color:var(--artifact-color);font-size:29px;filter:drop-shadow(0 2px 8px #0005)}
.artifact-rank{--artifact-color:#e4bc65;background:radial-gradient(ellipse at 0 50%,#a17d2218,transparent 90%),#ffffff03}.artifact-rank b{color:#edce84}.artifact-seat{--artifact-color:#dbaa9e}.artifact-seat .artifact-symbol{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-1px}.artifact-rhtu{--artifact-color:#8bbeb2}.artifact-club{--artifact-color:rgb(var(--role-rgb))}.artifact-symbol .staff-role-icon{width:30px;height:30px}.pf-artifact .role-chip{padding:0;border:0;background:transparent;font-size:11px;line-height:1.5;white-space:normal}.pf-artifact .role-chip .staff-role-icon{display:none}.artifact-favorite[data-game-role="maf"] .artifact-symbol{color:#b5b4c1}.artifact-favorite[data-game-role="don"] .artifact-symbol{color:#dfd9ce}
.pf-edit-link{display:inline-flex;margin-top:18px;color:#e69389;font-size:12px;letter-spacing:.1px}
.artifact-seat small{margin-bottom:0}
@media(max-width:600px){
  .pf-hero{--pf-avatar-size:clamp(96px,24vw,128px);display:grid;grid-template-columns:var(--pf-avatar-size) minmax(0,1fr);gap:12px;padding:20px 16px}
  .pf-id{display:contents}.pf-ava{grid-column:1;grid-row:1/4;align-self:start}
  .pf-name{grid-column:2;grid-row:1;font-size:22px;overflow-wrap:anywhere}.pf-since{grid-column:2;grid-row:2;margin:0;font-size:11px;gap:4px 8px}.pf-since time{font-size:12px}
  .pf-elo{grid-column:2;grid-row:3;display:flex;align-items:baseline;gap:6px;padding:0;align-self:start}.pf-elo .v{font-size:25px}.pf-elo .l{font-size:9px;margin-top:0}
  .pf-quote,.pf-artifacts,.pf-edit-link,.pf-sub{grid-column:1/-1}.pf-quote{margin:8px 0 0}.pf-edit-link{margin-top:6px}.pf-sub{margin:0}
  .pf-artifacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
  .pf-artifact{min-width:0;padding:11px 10px;gap:8px}.artifact-symbol{width:29px;font-size:25px}.pf-artifact b{font-size:12px}.pf-artifact small{font-size:9px}
}

.day-delete-form{margin-top:24px;padding-top:16px;border-top:1px solid var(--bd)}

.pl-explanation{color:var(--tx2);font-size:13px;margin:0 0 14px;line-height:1.5}.pl-period{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px;color:var(--tx2);font-size:14px}.pl-period select{width:auto;max-width:100%;padding:10px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--sf2);color:var(--tx);font:inherit}

.flair-icon img{display:block;width:100%;height:100%;object-fit:contain}.emoji-pick button[data-icon]{padding:4px}

.flair-value{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;border:1px solid var(--bd);border-radius:10px;background:var(--sf2)}
.flair-value:focus-within{border-color:var(--ac)}.flair-value #flair-preview{font-size:24px;line-height:1;display:flex;align-items:center}
.flair-value #flair-text{min-width:0;width:100%;border:0;outline:0;box-shadow:none;background:transparent;padding:0;height:44px;font-size:14px;text-overflow:ellipsis}
.flair-value #flair-text[hidden]{display:none}
.ss-selected-player{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 12px;pointer-events:none;min-width:0;font-size:14px;color:var(--tx)}
.ss-selected-player[hidden],.ss-editing .ss-selected-player{display:none}.ss-has-player:not(.ss-editing) .ss-input{color:transparent;caret-color:transparent}.ss-flair{flex:none;display:inline-flex;align-items:center}
.relationship-choice:has(.ss-selected-player) .relationship-person{display:none}.relationship-choice:has(.ss-selected-player) .relationship-summary{margin-top:8px}
.flair-motion .flair-animation-toggle{display:flex;align-items:center;gap:9px;min-height:46px;margin:0;color:var(--tx);cursor:pointer}.flair-animation-toggle input[type=checkbox]{width:18px;height:18px;padding:0;margin:0;flex:none;accent-color:var(--ac)}
.cabinet-identity{display:flex;flex-direction:column;gap:8px;min-width:0}.cabinet-identity-name{display:block;line-height:1.5;overflow-wrap:anywhere}.cabinet-identity-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--tx2)}

.pc-badge-tooltip{display:none;position:absolute;right:0;top:calc(100% - 9px);z-index:25;width:max-content;max-width:min(220px,70vw);padding:10px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--sf2);color:var(--tx);font-size:12px;font-weight:400;line-height:1.5;text-align:left;white-space:normal;overflow-wrap:anywhere;box-shadow:0 8px 24px #0003}
.pc-mvp:hover>.pc-badge-tooltip,.pc-mvp:focus>.pc-badge-tooltip,.pc-rank:hover>.pc-badge-tooltip,.pc-rank:focus>.pc-badge-tooltip{display:block}.pc-mvp:focus-visible,.pc-rank:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}