/* ===========================================================================
   ZENITH — дизайн-система сайта (светлый воздух + незер-портал).
   Перенос хэндоффа /root/design_handoff_zenith (Zenith Mockups.dc.html).

   Макет собран на inline-стилях; здесь те же значения вынесены в классы:
   CSP сайта строгая (style-src 'self', без unsafe-inline), ни одного style=""
   в разметке быть не может. Поэтому раскладка частиц, молний и бликов задана
   через :nth-child, а не атрибутами.

   ⚠️ ТОКЕНЫ ТЕКСТА ЗАТЕМНЕНЫ ОТНОСИТЕЛЬНО МАКЕТА — расчёт контраста, не вкус:
     #8b85a3 на #f4f1fc = 3.15  → --text-3 #6f6a85 = 4.62
     #7a5cc7 на плашке rgba(122,92,199,.07) = 4.14 → --accent-ink #6f4fbe = 4.90
     #b47a00 на плашке rgba(255,214,120,.14) = 3.18 → --gold-ink #8f6100 = 4.70
     #0e7ec2 на плашке rgba(150,215,255,.2)  = 3.69 → --blue-ink #0a6199 = 5.54
     #177a4c на плашке rgba(40,200,120,.1)   = 4.47 → --green-ink #14683f = 5.69
   Заливки, градиенты, рамки и крупные числа остались ровно как в макете —
   затемнён ТОЛЬКО текст, иерархия «вторичный тише основного» сохранена.
   =========================================================================== */

@import url("/fonts/fonts.css?v=unbounded-1");

:root {
  /* --- Палитра макета --------------------------------------------------- */
  --bg: #f4f1fc;
  --text: #191426;              /* 16.1 на фоне */
  --text-2: #5b5872;            /* 6.11 на фоне, 4.68 под порталом (макетный #63607a давал 4.17) */
  --text-3: #656078;            /* 4.62 в худшей точке (макетный #8b85a3 давал 3.15) */
  --accent: #7a5cc7;            /* фиолетовый акцент: заливки, рамки, крупный текст */
  --accent-ink: #644aad;        /* акцент для МЕЛКОГО текста: 4.57 в худшей точке под порталом */
  --logo-violet: #8b46e0;
  --red-1: #ff2247;
  --red-2: #e00028;
  --red-ink: #c50024;
  --ink: #191426;               /* тёмная кнопка / активная пилюля */
  --ink-hover: #2b2440;
  --green: #1db46c;
  --green-ink: #14683f;
  --gold: #b47a00;              /* заливки и рамки золота */
  --gold-ink: #7d5400;          /* золотой ТЕКСТ (на золотой плашке #8f6100 давал 4.31) */
  --gold-a: #ffd489;
  --gold-b: #ffaa00;
  --blue: #0e7ec2;
  --blue-ink: #0a6199;
  --silver-a: #e8ecf2;
  --silver-b: #c7cdd6;
  --bronze-a: #e8a86a;
  --bronze-b: #cd7f32;

  /* --- Стекло ------------------------------------------------------------ */
  --glass: rgba(255, 255, 255, 0.5);
  --glass-2: rgba(255, 255, 255, 0.55);
  --glass-3: rgba(255, 255, 255, 0.6);
  --glass-line: rgba(255, 255, 255, 0.9);
  --glass-line-soft: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(22px) saturate(1.5);
  --glass-blur-lg: blur(26px) saturate(1.6);
  --shadow-sm: 0 10px 28px rgba(90, 60, 160, 0.08);
  --shadow: 0 14px 40px rgba(90, 60, 160, 0.1);
  --shadow-md: 0 18px 48px rgba(90, 60, 160, 0.14);
  --shadow-lg: 0 24px 60px rgba(90, 60, 160, 0.16);
  --hairline: rgba(25, 20, 38, 0.06);
  --hairline-2: rgba(25, 20, 38, 0.1);

  /* --- Радиусы ----------------------------------------------------------- */
  --r-pill: 999px;
  --r-xl: 28px;
  --r-lg: 26px;
  --r-md: 24px;
  --r-sm: 22px;
  --r-row: 20px;
  --r-xs: 16px;
  --r-cell: 14px;

  /* --- Шрифты ------------------------------------------------------------ */
  --f-display: 'Unbounded', 'Inter', sans-serif;
  --f-ui: 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: ui-monospace, Menlo, Consolas, monospace;

  /* --- Ритм -------------------------------------------------------------- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* --- Совместимость со СТАРЫМ словарём ----------------------------------
     Админка, /stats, /tournaments, /support, /reset-password и страница
     новости набраны классами прежней системы и читают эти имена. Переопределяем
     их светлыми значениями — тогда разделы едут за общим оформлением, а не
     остаются тёмными островами. Удалять имена нельзя: они в 400+ местах. */
  --panel: var(--glass-2);
  --panel-solid: #ffffff;
  --panel-modal: rgba(255, 255, 255, 0.96);
  --line: var(--hairline-2);
  --line-soft: var(--hairline);
  --red: var(--red-ink);
  --red-hover: var(--red-2);
  --red-dark: var(--red-2);
  --red-tint: rgba(224, 0, 40, 0.08);
  --red-edge: rgba(224, 0, 40, 0.28);
  --muted: var(--text-2);
  --dim: var(--text-3);
  --radius-card: var(--r-md);
  --radius-cell: var(--r-cell);
  --radius-badge: 10px;

  /* --- Выключатели фоновой сцены ----------------------------------------- */
  --portal-op: 1;               /* общий множитель яркости портала */
  --px-op: 1;                   /* пиксельные частицы */
}

/* ===========================================================================
   KEYFRAMES — все из <style> хэндоффа, имена сохранены
   =========================================================================== */
@keyframes cxBlob   { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%,-5%) scale(1.12); } 100% { transform: translate(-3%,4%) scale(.96); } }
@keyframes cxSpin   { to { transform: rotate(360deg); } }
@keyframes cxRise   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes cxPulse  { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes cxBar    { 0% { width: 4%; } 60% { width: 72%; } 100% { width: 86%; } }
@keyframes cxShimmer{ from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes cxDot    { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@keyframes cxFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cxDrift  { 0% { transform: translateY(0) translateX(0); opacity: 0; }
                      12% { opacity: var(--po, .7); }
                      80% { opacity: var(--po, .7); }
                      100% { transform: translateY(-180px) translateX(var(--px, 0px)); opacity: 0; } }
@keyframes cxRift   { 0%,100% { opacity: .85; filter: blur(26px); } 50% { opacity: 1; filter: blur(32px); } }
@keyframes cxSpark  { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes cxBolt   { 0%,84%,100% { opacity: 0; } 86% { opacity: 1; } 88% { opacity: .25; } 90% { opacity: .95; } 93% { opacity: .4; } 96% { opacity: 0; } }
@keyframes cxPortal { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
/* Пульс САМОЙ текстуры: держит её базовую полупрозрачность .5, поэтому это
   отдельный keyframe, а не cxPortal (тот увёл бы opacity к 1). */
@keyframes cxTexPulse { 0%,100% { opacity: .42; } 50% { opacity: .5; } }
@keyframes cxPortalTex   { 0% { background-position: 0 0; } 100% { background-position: 0 -240px; } }
@keyframes cxPortalShine { 0%,100% { opacity: .25; transform: translateY(-12%); } 50% { opacity: .65; transform: translateY(12%); } }
@keyframes cxFade   { from { opacity: 1; } to { opacity: 0; } }

/* ===========================================================================
   БАЗА
   =========================================================================== */
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--logo-violet); }
img { max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--text-3); }

.mono { font-family: var(--f-mono); }
.meta { font: 500 12.5px var(--f-ui); color: var(--text-3); }
.lead { font: 400 14.5px/1.65 var(--f-ui); color: var(--text-2); }
.hint { font: 400 12px/1.5 var(--f-ui); color: var(--text-3); }
.nowrap { white-space: nowrap; }
.breakall { overflow-wrap: anywhere; word-break: break-word; }
.prewrap { white-space: pre-wrap; }
.is-hidden { display: none !important; }

/* Полотно страницы. Ширина 1240 — как карточка макета, вместе с её полями. */
.page { position: relative; z-index: 1; }
.shell { max-width: 1240px; margin: 0 auto; padding: 0 40px 56px; }

/* ===========================================================================
   ЭКРАН ЗАГРУЗКИ
   boot.js ставит .is-loading на <html> до первой отрисовки и снимает по load
   (минимальный показ 600 мс, fade-out 400 мс, один раз за сессию).
   =========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 999;
  display: none; align-items: center; justify-content: center;
  background: var(--bg); overflow: hidden;
}
html.is-loading .loader { display: flex; }
html.is-loading body { overflow: hidden; }
.loader.is-out { animation: cxFade .4s ease forwards; }

.loader__fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.loader__fx > .l-conic {
  position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px;
  border-radius: 50%; filter: blur(64px); animation: cxSpin 30s linear infinite;
  background: conic-gradient(from 0deg, rgba(178,120,255,.24), rgba(255,120,170,.14), rgba(120,150,255,.2), rgba(178,120,255,.24));
}
.loader__fx > .l-halo {
  position: absolute; left: 50%; top: 6%; width: 280px; height: 360px; margin-left: -140px;
  background: radial-gradient(closest-side, rgba(168,96,255,.22), transparent 72%);
  filter: blur(26px); animation: cxRift 6s ease-in-out infinite;
}
.loader__fx > .l-portal {
  position: absolute; left: 50%; top: 10%; width: 440px; height: 420px; margin-left: -220px;
}
.loader__fx > .l-portal > .l-tex {
  position: absolute; inset: 0;
  background: url("/img/portal-texture.png"); background-size: 260px auto;
  filter: blur(3px) saturate(1.05) brightness(1.4) contrast(.9);
  opacity: .5; mix-blend-mode: screen;
  animation: cxPortalTex 14s linear infinite, cxTexPulse 6s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(52% 48% at 50% 50%, #000 35%, transparent 76%);
          mask-image: radial-gradient(52% 48% at 50% 50%, #000 35%, transparent 76%);
}
.loader__fx > .l-portal > .l-wash {
  position: absolute; inset: 0;
  background: radial-gradient(52% 48% at 50% 50%, rgba(220,180,255,.26), rgba(196,150,255,.12) 55%, transparent 78%);
}
.loader__fx > .l-portal > .l-shine {
  position: absolute; left: -10%; right: -10%; top: 22%; height: 42%;
  background: radial-gradient(closest-side, rgba(240,214,255,.55), transparent 70%);
  filter: blur(12px); animation: cxPortalShine 5s ease-in-out infinite;
}
.loader__fx > .l-ring {
  position: absolute; left: 50%; top: 38%; width: 280px; height: 280px; margin-left: -140px;
  border-radius: 50%; border: 1px solid rgba(178,120,255,.28);
  animation: cxSpin 26s linear infinite reverse;
}
.loader__fx > .l-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(100% 55% at 50% 112%, var(--bg) 26%, transparent 64%);
}
/* Две молнии загрузчика */
.loader__fx > svg { position: absolute; overflow: visible; fill: none; }
.loader__fx > svg:nth-of-type(1) { left: 16%; top: 6%; width: 120px; height: 200px; animation: cxBolt 8s 2.4s linear infinite; }
.loader__fx > svg:nth-of-type(2) { right: 10%; bottom: 16%; width: 100px; height: 150px; animation: cxBolt 10s 6s linear infinite; }

.loader__box {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 26px; padding: 40px;
}
.loader__tile {
  width: 96px; height: 96px; border-radius: var(--r-xl);
  background: var(--glass-2); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 20px 50px rgba(120,70,200,.22);
  display: grid; place-items: center;
  animation: cxFloat 4s ease-in-out infinite;
}
.loader__tile span {
  font: 300 44px var(--f-display);
  background: linear-gradient(135deg, #9fb886, #ef8f25);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cxPulse 3.2s ease-in-out infinite;
}
.loader__bar {
  width: 220px; height: 6px; border-radius: var(--r-pill);
  background: rgba(25,20,38,.08); overflow: hidden; position: relative;
}
.loader__bar > i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #a78bfa, var(--red-1));
  animation: cxBar 2.6s cubic-bezier(.3,.7,.3,1) infinite; overflow: hidden;
}
.loader__bar > i > b {
  position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: cxShimmer 1.4s linear infinite;
}
.loader__note { font: 500 13px var(--f-ui); color: var(--text-3); }

/* ===========================================================================
   ЛОКАП ЛОГОТИПА (текстовый, без картинок)
   =========================================================================== */
.lockup { display: inline-flex; align-items: center; gap: 12px; }
.lockup__name {
  font: 300 23px var(--f-display); letter-spacing: .08em; white-space: nowrap;
  background: linear-gradient(90deg, #9fb886, #c9a94e 45%, #ef8f25);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lockup__div { width: 2px; height: 32px; background: var(--logo-violet); border-radius: 1px; }
.lockup__tag {
  display: flex; flex-direction: column; gap: 1px;
  font: 700 8.5px/1.3 var(--f-display); letter-spacing: .08em;
  background: linear-gradient(90deg, #b3a057, #cfc684);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lockup--sm .lockup__name { font-size: 22px; }
.lockup--sm .lockup__div { height: 30px; }
.lockup--sm .lockup__tag { font-size: 8px; }
.lockup--auth .lockup__name { font-size: 26px; }

/* ===========================================================================
   ФОНОВАЯ СЦЕНА (незер-портал)
   data-fx: home — полный набор; inner — упрощённый; auth — портал по центру.
   Раскладка частиц через :nth-child — style="" запрещён CSP.
   =========================================================================== */
.fx {
  position: absolute; left: 0; right: 0; top: 0; height: 1400px;
  overflow: hidden; pointer-events: none; z-index: 0;
  /* ⚠️ Фон здесь ОБЯЗАТЕЛЕН, и он не декоративный: это подложка, с которой
     смешивается текстура портала в режиме screen. Без него слой смешивается
     с прозрачностью, и тайл вместо свечения даёт грязное пятно. */
  background: var(--bg);
}
.fx * { position: absolute; }

/* --- Конус-сияние --------------------------------------------------------- */
.fx__conic {
  left: 50%; top: 18%; width: 1300px; height: 1300px; margin: -650px 0 0 -650px;
  border-radius: 50%; filter: blur(90px); animation: cxSpin 46s linear infinite;
  background: conic-gradient(from 0deg, rgba(178,120,255,.22), rgba(255,120,170,.14), rgba(120,150,255,.18), rgba(255,150,190,.1), rgba(178,120,255,.22));
}
/* --- Ореол и подсветка портала -------------------------------------------- */
.fx__halo {
  left: 50%; top: 5%; width: 460px; height: 580px; margin-left: -230px;
  background: radial-gradient(closest-side, rgba(168,96,255,.24), transparent 72%);
  filter: blur(34px); animation: cxRift 7s ease-in-out infinite;
}
.fx__glow {
  left: 50%; top: -4%; width: 1100px; height: 900px; margin-left: -550px;
  background: radial-gradient(55% 48% at 50% 50%, rgba(150,70,255,.19), rgba(150,70,255,.08) 60%, transparent 78%);
  filter: blur(40px); animation: cxPortal 7s ease-in-out infinite;
}
/* --- Портал: текстура + светлый wash --------------------------------------
   ⚠️ mix-blend-mode: screen ОБЯЗАТЕЛЕН. Тайл текстуры тёмный; без screen на
   светлом фоне он читается грязным пятном, а не свечением. */
/* ⚠️ БЕЗ animation: opacity-анимация превратила бы слой в группу изоляции и
   отрезала текстуру от подложки .fx. «Дыхание» портала живёт на самой текстуре
   (cxTexPulse) и на свечении (.fx__glow). */
.fx__portal {
  left: 50%; top: -2%; width: 980px; height: 840px; margin-left: -490px;
  opacity: var(--portal-op);
}
.fx__tex {
  inset: 0;
  background: url("/img/portal-texture.png"); background-size: 480px auto;
  filter: blur(4px) saturate(1.05) brightness(1.4) contrast(.9);
  opacity: .5; mix-blend-mode: screen;
  animation: cxPortalTex 16s linear infinite, cxTexPulse 7s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(52% 48% at 50% 50%, #000 35%, transparent 76%);
          mask-image: radial-gradient(52% 48% at 50% 50%, #000 35%, transparent 76%);
}
.fx__wash {
  inset: 0;
  background: radial-gradient(52% 48% at 50% 50%, rgba(230,200,255,.34), rgba(214,180,255,.16) 55%, transparent 78%);
}
.fx__shine {
  inset: 0;
  -webkit-mask-image: radial-gradient(52% 48% at 50% 50%, #000 50%, transparent 80%);
          mask-image: radial-gradient(52% 48% at 50% 50%, #000 50%, transparent 80%);
}
.fx__shine > i:nth-child(1) {
  left: -10%; right: -10%; top: 20%; height: 44%;
  background: radial-gradient(closest-side, rgba(240,214,255,.45), transparent 70%);
  filter: blur(30px); animation: cxPortalShine 6s ease-in-out infinite;
}
.fx__shine > i:nth-child(2) {
  left: 6%; bottom: 4%; width: 88%; height: 36%;
  background: radial-gradient(closest-side, rgba(178,100,255,.35), transparent 70%);
  filter: blur(26px); animation: cxFloat 6s 1.2s ease-in-out infinite reverse;
}
/* Искры внутри портала */
.fx__sparks > i { border-radius: 0; }
.fx__sparks > i:nth-child(1) { left: 22%; top: 24%; width: 12px; height: 12px; background: #e9c8ff; box-shadow: 0 0 12px rgba(233,200,255,.9); animation: cxSpark 2.6s .3s ease-in-out infinite; }
.fx__sparks > i:nth-child(2) { left: 62%; top: 38%; width: 9px;  height: 9px;  background: #f3dcff; box-shadow: 0 0 10px rgba(243,220,255,.9); animation: cxSpark 3.2s 1.1s ease-in-out infinite; }
.fx__sparks > i:nth-child(3) { left: 40%; top: 58%; width: 14px; height: 14px; background: #d9a6ff; box-shadow: 0 0 14px rgba(217,166,255,.9); animation: cxSpark 2.9s 1.9s ease-in-out infinite; }
.fx__sparks > i:nth-child(4) { left: 70%; top: 68%; width: 9px;  height: 9px;  background: #eccfff; box-shadow: 0 0 10px rgba(236,207,255,.9); animation: cxSpark 3.5s .7s ease-in-out infinite; }
.fx__sparks > i:nth-child(5) { left: 16%; top: 76%; width: 12px; height: 12px; background: #e0b4ff; box-shadow: 0 0 12px rgba(224,180,255,.9); animation: cxSpark 2.4s 2.4s ease-in-out infinite; }
.fx__sparks > i:nth-child(6) { left: 78%; top: 16%; width: 8px;  height: 8px;  background: #f3dcff; box-shadow: 0 0 9px rgba(243,220,255,.9);  animation: cxSpark 3s 1.5s ease-in-out infinite; }
.fx__sparks > i:nth-child(7) { left: 34%; top: 10%; width: 9px;  height: 9px;  background: #d9a6ff; box-shadow: 0 0 10px rgba(217,166,255,.9); animation: cxSpark 2.7s 2.8s ease-in-out infinite; }
.fx__sparks > i:nth-child(8) { left: 86%; top: 46%; width: 7px;  height: 7px;  background: #e9c8ff; box-shadow: 0 0 9px rgba(233,200,255,.9);  animation: cxSpark 3.4s 3.6s ease-in-out infinite; }
.fx__sparks > i:nth-child(9) { left: 10%; top: 44%; width: 8px;  height: 8px;  background: #eccfff; box-shadow: 0 0 9px rgba(236,207,255,.9);  animation: cxSpark 2.8s 4.2s ease-in-out infinite; }

/* --- Пастельные пятна ----------------------------------------------------- */
.fx__blobs > i:nth-child(1) { left: -12%; top: -18%; width: 55%; height: 60%; background: radial-gradient(closest-side, rgba(178,140,255,.26), transparent 70%); filter: blur(54px); animation: cxBlob 19s ease-in-out infinite alternate; }
.fx__blobs > i:nth-child(2) { right: -14%; top: 4%;  width: 50%; height: 58%; background: radial-gradient(closest-side, rgba(255,160,185,.22), transparent 70%); filter: blur(54px); animation: cxBlob 24s ease-in-out infinite alternate-reverse; }
.fx__blobs > i:nth-child(3) { left: 30%; bottom: -24%; width: 52%; height: 52%; background: radial-gradient(closest-side, rgba(150,215,255,.24), transparent 70%); filter: blur(54px); animation: cxBlob 28s ease-in-out infinite alternate; }

/* --- Орбитальные кольца --------------------------------------------------- */
.fx__rings > i:nth-child(1) { left: 50%; top: 16%; width: 820px;  height: 820px;  margin-left: -410px; border-radius: 50%; border: 1px solid rgba(178,120,255,.22); filter: blur(1px); animation: cxSpin 34s linear infinite reverse; }
.fx__rings > i:nth-child(2) { left: 50%; top: 12%; width: 1040px; height: 1040px; margin-left: -520px; border-radius: 50%; border: 1px dashed rgba(200,150,255,.16); animation: cxSpin 58s linear infinite; }

/* --- Пиксельные частицы ---------------------------------------------------
   Квадраты и «плюсы» 4–14px. Палитра и clip-path — из хэндоффа. */
.fx__px > i {
  opacity: 0;
  animation-name: cxDrift; animation-timing-function: linear; animation-iteration-count: infinite;
}
.fx__px > i.px--plus,
.fx__px > i:nth-child(2n) {
  clip-path: polygon(33% 0, 66% 0, 66% 33%, 100% 33%, 100% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 0 66%, 0 33%, 33% 33%);
}
.fx__px > i:nth-child(1)  { --po:.9; --px:24px;  left:44%; top:52%; width:9px;  height:9px;  background:#c455e8; animation-duration:9s;    animation-delay:.2s; }
.fx__px > i:nth-child(2)  { --po:.7; --px:-30px; left:53%; top:60%; width:12px; height:12px; background:#8b2fb8; animation-duration:11s;   animation-delay:2.1s; }
.fx__px > i:nth-child(3)  { --po:.9; --px:16px;  left:49%; top:44%; width:7px;  height:7px;  background:#e07df2; animation-duration:8s;    animation-delay:4s; }
.fx__px > i:nth-child(4)  { --po:.9; --px:-18px; left:58%; top:38%; width:10px; height:10px; background:#7a22a8; animation-duration:12s;   animation-delay:1s; }
.fx__px > i:nth-child(5)  { --po:.7; --px:36px;  left:40%; top:34%; width:14px; height:14px; background:#b34bd6; animation-duration:10s;   animation-delay:5.4s; }
.fx__px > i:nth-child(6)  { --po:.9; --px:-24px; left:63%; top:56%; width:8px;  height:8px;  background:#5f1687; animation-duration:13s;   animation-delay:3.2s; }
.fx__px > i:nth-child(7)  { --po:.9; --px:12px;  left:36%; top:64%; width:11px; height:11px; background:#ee9df8; animation-duration:9.5s;  animation-delay:6.5s; }
.fx__px > i:nth-child(8)  { --po:.9; --px:-14px; left:47%; top:72%; width:6px;  height:6px;  background:#a03cc4; animation-duration:10.5s; animation-delay:.8s; }
.fx__px > i:nth-child(9)  { --po:.9; --px:28px;  left:55%; top:26%; width:9px;  height:9px;  background:#c455e8; animation-duration:8.5s;  animation-delay:2.8s; }
.fx__px > i:nth-child(10) { --po:.7; --px:-32px; left:22%; top:48%; width:12px; height:12px; background:#8b2fb8; animation-duration:14s;   animation-delay:4.6s; }
.fx__px > i:nth-child(11) { --po:.9; --px:20px;  left:74%; top:44%; width:7px;  height:7px;  background:#e07df2; animation-duration:12.5s; animation-delay:7.2s; }
.fx__px > i:nth-child(12) { --po:.9; --px:18px;  left:51%; top:78%; width:10px; height:10px; background:#7a22a8; animation-duration:9.8s;  animation-delay:1.6s; }
.fx__px > i:nth-child(13) { --po:.7; --px:-26px; left:45%; top:84%; width:14px; height:14px; background:#b34bd6; animation-duration:8.8s;  animation-delay:3.4s; }
.fx__px > i:nth-child(14) { --po:.9; --px:34px;  left:60%; top:66%; width:8px;  height:8px;  background:#5f1687; animation-duration:11s;   animation-delay:5.8s; }
.fx__px > i:nth-child(15) { --po:.9; --px:-20px; left:38%; top:40%; width:11px; height:11px; background:#ee9df8; animation-duration:10.2s; animation-delay:7.6s; }
.fx__px > i:nth-child(16) { --po:.9; --px:26px;  left:68%; top:52%; width:6px;  height:6px;  background:#a03cc4; animation-duration:13.5s; animation-delay:2.4s; }
.fx__px > i:nth-child(17) { --po:.9; --px:-30px; left:28%; top:60%; width:9px;  height:9px;  background:#c455e8; animation-duration:14s;   animation-delay:6.2s; }
.fx__px > i:nth-child(18) { --po:.7; --px:12px;  left:52%; top:36%; width:12px; height:12px; background:#8b2fb8; animation-duration:8.2s;  animation-delay:4.4s; }
.fx__px > i:nth-child(19) { --po:.9; --px:-16px; left:18%; top:36%; width:7px;  height:7px;  background:#e07df2; animation-duration:12.8s; animation-delay:8.4s; }
.fx__px > i:nth-child(20) { --po:.9; --px:22px;  left:80%; top:34%; width:10px; height:10px; background:#7a22a8; animation-duration:11.6s; animation-delay:5.2s; }
.fx__px > i:nth-child(21) { --po:.7; --px:-14px; left:70%; top:74%; width:14px; height:14px; background:#b34bd6; animation-duration:10.8s; animation-delay:9.1s; }
.fx__px > i:nth-child(22) { --po:.9; --px:40px;  left:24%; top:76%; width:8px;  height:8px;  background:#5f1687; animation-duration:15s;   animation-delay:3.9s; }
.fx__px > i:nth-child(23) { --po:.9; --px:14px;  left:42%; top:62%; width:11px; height:11px; background:#ee9df8; animation-duration:8s;    animation-delay:.4s; }

/* --- Белые глинты --------------------------------------------------------- */
.fx__glints > i { border-radius: 50%; background: #fff; }
.fx__glints > i:nth-child(1) { left:46%; top:30%; width:3px; height:3px; box-shadow:0 0 8px #e6ccff; animation: cxSpark 3s .4s ease-in-out infinite; }
.fx__glints > i:nth-child(2) { left:56%; top:48%; width:3px; height:3px; box-shadow:0 0 8px #ffd0e0; animation: cxSpark 3.6s 1.4s ease-in-out infinite; }
.fx__glints > i:nth-child(3) { left:42%; top:58%; width:2px; height:2px; box-shadow:0 0 6px #e6ccff; animation: cxSpark 2.8s 2.2s ease-in-out infinite; }
.fx__glints > i:nth-child(4) { left:66%; top:30%; width:2px; height:2px; box-shadow:0 0 6px #d8b8ff; animation: cxSpark 3.4s .9s ease-in-out infinite; }
.fx__glints > i:nth-child(5) { left:36%; top:22%; width:3px; height:3px; box-shadow:0 0 9px #ffd0e0; animation: cxSpark 2.6s 1.1s ease-in-out infinite; }
.fx__glints > i:nth-child(6) { left:62%; top:18%; width:2px; height:2px; box-shadow:0 0 7px #e6ccff; animation: cxSpark 3.8s 2.6s ease-in-out infinite; }
.fx__glints > i:nth-child(7) { left:50%; top:64%; width:3px; height:3px; box-shadow:0 0 9px #d8b8ff; animation: cxSpark 3.1s .2s ease-in-out infinite; }
.fx__glints > i:nth-child(8) { left:72%; top:60%; width:2px; height:2px; box-shadow:0 0 6px #ffd0e0; animation: cxSpark 2.9s 1.9s ease-in-out infinite; }
.fx__glints > i:nth-child(9) { left:30%; top:44%; width:2px; height:2px; box-shadow:0 0 6px #e6ccff; animation: cxSpark 3.5s 3s ease-in-out infinite; }

/* --- Молнии ---------------------------------------------------------------
   ⚠️ Обводка и свечение живут ЗДЕСЬ, а не в атрибутах SVG: под строгой CSP
   в разметке нет ни style="", ни презентационных значений цвета. */
.fx__bolts > svg { overflow: visible; fill: none; }
.fx__bolts > svg polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.fx__bolts > svg:nth-child(1) { left: 26%; top: 2%;  width: 190px; height: 330px; animation: cxBolt 7s 1.2s linear infinite; }
.fx__bolts > svg:nth-child(2) { right: 18%; top: 12%; width: 160px; height: 270px; animation: cxBolt 9s 4.8s linear infinite; }
.fx__bolts > svg:nth-child(3) { left: 8%;  top: 34%; width: 130px; height: 170px; animation: cxBolt 11s 7.4s linear infinite; }
.fx__bolts > svg:nth-child(1) polyline:nth-child(1) { stroke: #c9a4ff; stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(168,96,255,.9)) drop-shadow(0 0 16px rgba(168,96,255,.5)); }
.fx__bolts > svg:nth-child(1) polyline:nth-child(2) { stroke: #dcc4ff; stroke-width: 1.8; filter: drop-shadow(0 0 5px rgba(198,136,255,.85)); }
.fx__bolts > svg:nth-child(2) polyline:nth-child(1) { stroke: #e2b8ff; stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(200,120,255,.9)) drop-shadow(0 0 14px rgba(200,120,255,.45)); }
.fx__bolts > svg:nth-child(2) polyline:nth-child(2) { stroke: #f0d8ff; stroke-width: 1.6; filter: drop-shadow(0 0 5px rgba(210,155,255,.8)); }
.fx__bolts > svg:nth-child(3) polyline:nth-child(1) { stroke: #ffb8d2; stroke-width: 2;   filter: drop-shadow(0 0 6px rgba(255,120,170,.85)) drop-shadow(0 0 14px rgba(255,120,170,.4)); }
.loader__fx > svg polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.loader__fx > svg:nth-of-type(1) polyline:nth-child(1) { stroke: #c9a4ff; stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(168,96,255,.9)) drop-shadow(0 0 14px rgba(168,96,255,.5)); }
.loader__fx > svg:nth-of-type(1) polyline:nth-child(2) { stroke: #e6d0ff; stroke-width: 1.6; filter: drop-shadow(0 0 5px rgba(198,136,255,.8)); }
.loader__fx > svg:nth-of-type(2) polyline:nth-child(1) { stroke: #ffb8d2; stroke-width: 2;   filter: drop-shadow(0 0 6px rgba(255,120,170,.85)) drop-shadow(0 0 12px rgba(255,120,170,.4)); }

/* --- Нижний скрим --------------------------------------------------------- */
.fx__scrim { inset: 0; background: radial-gradient(90% 60% at 50% 108%, var(--bg) 24%, transparent 62%); }

/* --- Внутренние страницы: упрощённый набор -------------------------------- */
.fx[data-fx="inner"] { height: 900px; }
.fx[data-fx="inner"] .fx__conic,
.fx[data-fx="inner"] .fx__halo,
.fx[data-fx="inner"] .fx__rings,
.fx[data-fx="inner"] .fx__shine,
.fx[data-fx="inner"] .fx__sparks,
.fx[data-fx="inner"] .fx__bolts,
.fx[data-fx="inner"] .fx__blobs > i:nth-child(3),
.fx[data-fx="inner"] .fx__px > i:nth-child(n+5),
.fx[data-fx="inner"] .fx__glints > i:nth-child(n+3) { display: none; }
.fx[data-fx="inner"] .fx__glow   { left: 50%; top: -34%; width: 920px; height: 640px; margin-left: -460px; filter: blur(36px);
  background: radial-gradient(55% 48% at 50% 50%, rgba(150,70,255,.15), rgba(150,70,255,.06) 60%, transparent 78%); }
.fx[data-fx="inner"] .fx__portal { left: 50%; top: -32%; width: 800px; height: 580px; margin-left: -400px; }
.fx[data-fx="inner"] .fx__tex { animation-name: cxPortalTex, cxTexPulseInner; }
@keyframes cxTexPulseInner { 0%,100% { opacity: .34; } 50% { opacity: .42; } }
.fx[data-fx="inner"] .fx__tex    { background-size: 400px auto; opacity: .42; }
.fx[data-fx="inner"] .fx__wash   { background: radial-gradient(52% 48% at 50% 50%, rgba(220,180,255,.22), rgba(196,150,255,.1) 55%, transparent 78%); }
.fx[data-fx="inner"] .fx__blobs > i:nth-child(1) { left: -12%; top: -14%; width: 50%; height: 52%; filter: blur(50px); background: radial-gradient(closest-side, rgba(178,140,255,.22), transparent 70%); animation-duration: 20s; }
.fx[data-fx="inner"] .fx__blobs > i:nth-child(2) { right: -14%; top: 6%;  width: 46%; height: 50%; filter: blur(50px); background: radial-gradient(closest-side, rgba(255,160,185,.18), transparent 70%); animation-duration: 25s; }
.fx[data-fx="inner"] .fx__px > i:nth-child(1) { --po:.8; --px:18px;  left:44%; top:26%; width:8px; height:8px; background:#b34bd6; animation-duration:10s;   animation-delay:.5s; }
.fx[data-fx="inner"] .fx__px > i:nth-child(2) { --po:.7; --px:-22px; left:56%; top:20%; width:6px; height:6px; background:#e07df2; animation-duration:11.5s; animation-delay:3s; }
.fx[data-fx="inner"] .fx__px > i:nth-child(3) { --po:.7; --px:14px;  left:38%; top:14%; width:7px; height:7px; background:#8b2fb8; animation-duration:9s;    animation-delay:5.5s; }
.fx[data-fx="inner"] .fx__px > i:nth-child(4) { --po:.6; --px:-16px; left:64%; top:12%; width:9px; height:9px; background:#c455e8; animation-duration:12.5s; animation-delay:1.8s; }
.fx[data-fx="inner"] .fx__glints > i:nth-child(1) { left:48%; top:12%; }
.fx[data-fx="inner"] .fx__glints > i:nth-child(2) { left:60%; top:22%; }
.fx[data-fx="inner"] .fx__scrim { background: radial-gradient(90% 60% at 50% 108%, var(--bg) 30%, transparent 66%); }

/* --- Вход: портал по центру за карточкой ---------------------------------- */
.fx[data-fx="auth"] { height: 100%; bottom: 0; }
.fx[data-fx="auth"] .fx__conic,
.fx[data-fx="auth"] .fx__halo,
.fx[data-fx="auth"] .fx__rings,
.fx[data-fx="auth"] .fx__shine,
.fx[data-fx="auth"] .fx__sparks,
.fx[data-fx="auth"] .fx__bolts,
.fx[data-fx="auth"] .fx__blobs,
.fx[data-fx="auth"] .fx__px > i:nth-child(n+4),
.fx[data-fx="auth"] .fx__glints > i:nth-child(n+3) { display: none; }
.fx[data-fx="auth"] .fx__glow   { left: 50%; top: 4%; width: 520px; height: 480px; margin-left: -260px; filter: blur(28px);
  background: radial-gradient(55% 48% at 50% 50%, rgba(150,70,255,.18), rgba(150,70,255,.07) 60%, transparent 78%); }
.fx[data-fx="auth"] .fx__portal { left: 50%; top: 6%; width: 440px; height: 420px; margin-left: -220px; }
.fx[data-fx="auth"] .fx__tex    { background-size: 260px auto; opacity: .45; filter: blur(3px) saturate(1.05) brightness(1.4) contrast(.9); }
.fx[data-fx="auth"] .fx__wash   { background: radial-gradient(52% 48% at 50% 50%, rgba(220,180,255,.24), rgba(196,150,255,.1) 55%, transparent 78%); }
.fx[data-fx="auth"] .fx__px > i:nth-child(1) { --po:.75; --px:16px;  left:40%; top:56%; width:7px; height:7px; background:#b34bd6; animation-duration:9.5s; animation-delay:1s; }
.fx[data-fx="auth"] .fx__px > i:nth-child(2) { --po:.65; --px:-20px; left:58%; top:62%; width:6px; height:6px; background:#e07df2; animation-duration:11s;  animation-delay:3.8s; }
.fx[data-fx="auth"] .fx__px > i:nth-child(3) { --po:.6;  --px:12px;  left:48%; top:44%; width:5px; height:5px; background:#c455e8; animation-duration:10s;  animation-delay:6s; }
.fx[data-fx="auth"] .fx__glints > i:nth-child(1) { left:44%; top:28%; }
.fx[data-fx="auth"] .fx__glints > i:nth-child(2) { left:62%; top:36%; }
.fx[data-fx="auth"] .fx__scrim { background: radial-gradient(100% 55% at 50% 112%, var(--bg) 26%, transparent 64%); }

/* ===========================================================================
   КУРСОРНАЯ ПОДСВЕТКА
   Один глобальный pointermove в app.js пишет --mx/--my/--go в ближайший
   [data-glow], сбрасывая предыдущий.
   =========================================================================== */
[data-glow] { position: relative; }
[data-glow] > .glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: var(--go, 0); transition: opacity .4s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(140,90,255,.1), transparent 65%);
}
.glow--gold  { background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,190,90,.12), transparent 65%) !important; }
.glow--blue  { background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(90,180,255,.1), transparent 65%) !important; }
.glow--red   { background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,90,120,.1), transparent 65%) !important; }
.glow--wide  { background: radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(140,90,255,.1), transparent 65%) !important; }

/* ===========================================================================
   ВХОД КОНТЕНТА
   =========================================================================== */
[data-reveal] > * { animation: cxRise .8s both; }
[data-reveal] > *:nth-child(1) { animation-delay: .1s; }
[data-reveal] > *:nth-child(2) { animation-delay: .2s; }
[data-reveal] > *:nth-child(3) { animation-delay: .3s; }
[data-reveal] > *:nth-child(n+4) { animation-delay: .4s; }

/* ===========================================================================
   ШАПКА
   =========================================================================== */
.hdr {
  position: relative; z-index: 5;
  max-width: 1240px; margin: 0 auto; padding: 28px 40px 0;
}
.hdr__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px 14px 12px 20px; border-radius: var(--r-pill);
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-line-soft);
  box-shadow: 0 16px 44px rgba(90,60,160,.12);
  animation: cxRise .7s .05s both;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }

.nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 10px 18px; border-radius: var(--r-pill);
  font: 500 13.5px var(--f-ui); color: #6f6a85; transition: background .3s, color .3s;
}
.nav a:hover { background: rgba(255,255,255,.7); color: var(--text); }
.nav a.is-active {
  font-weight: 600; color: var(--text);
  background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(90,60,160,.12);
}
.hdr__side { display: flex; align-items: center; gap: 12px; }

.pill-online {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: var(--r-pill); background: rgba(40,200,120,.1);
  border: 1px solid rgba(40,200,120,.25);
  font: 600 12.5px var(--f-ui); color: var(--green-ink); white-space: nowrap;
}
.pill-online .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: cxDot 2s infinite; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* Пилюля авторизованного игрока */
.usercard {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
  border-radius: var(--r-pill); background: var(--glass-3);
  border: 1px solid var(--glass-line); color: var(--text);
}
.usercard:hover { background: #fff; color: var(--text); }
.usercard__ava {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(160deg, #c9b8ff, var(--logo-violet));
  display: grid; place-items: center;
  font: 800 13px var(--f-display); color: #fff;
}
.usercard__nick { font: 600 13px var(--f-ui); color: var(--text); }
.usercard__state { display: none; }

/* Бургер — только на узких экранах и только при работающем JS */
.navburger {
  display: none; width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-line); background: var(--glass-3);
  cursor: pointer; padding: 0; place-items: center; gap: 4px;
}
.navburger__bar { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--text); }

/* ===========================================================================
   КНОПКИ
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-line); background: var(--glass-3);
  backdrop-filter: blur(14px);
  color: var(--text); font: 600 13.5px var(--f-ui); cursor: pointer;
  box-shadow: var(--shadow-sm); text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s, background .3s;
}
.btn:hover { transform: translateY(-2px); color: var(--text); background: #fff; }
.btn--red {
  background: linear-gradient(180deg, var(--red-1), var(--red-2));
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 24px rgba(224,0,40,.3);
}
.btn--red:hover { color: #fff; background: linear-gradient(180deg, var(--red-1), var(--red-2)); box-shadow: 0 16px 32px rgba(224,0,40,.4); }
.btn--dark { background: var(--ink); border-color: transparent; color: #fff; box-shadow: none; }
.btn--dark:hover { background: var(--ink-hover); color: #fff; transform: scale(1.04); }
.btn--lg { padding: 16px 32px; font: 700 15px var(--f-ui); }
.btn--lg.btn--red { box-shadow: 0 14px 32px rgba(224,0,40,.32); }
.btn--lg.btn--red:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 44px rgba(224,0,40,.42); }
.btn--sm { padding: 9px 18px; font-size: 12.5px; }
.btn--block { display: flex; width: 100%; }
.btn--danger { background: linear-gradient(180deg, var(--red-1), var(--red-2)); border-color: transparent; color: #fff; }
.btn--danger:hover { color: #fff; }
.btn--soon { opacity: .72; }
.btn--soon:hover { opacity: 1; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.linkbtn { font: 600 13.5px var(--f-ui); color: var(--accent-ink); }
.linkbtn:hover { color: var(--logo-violet); }

/* ===========================================================================
   ПАНЕЛИ И ЗАГОЛОВКИ
   =========================================================================== */
.panel {
  position: relative; padding: 26px 30px; border-radius: var(--r-md);
  background: var(--glass-2); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.92); box-shadow: 0 12px 34px rgba(90,60,160,.09);
  margin-bottom: var(--space-md);
}
.panel--link { display: block; color: inherit; transition: transform .45s var(--ease), box-shadow .45s; }
.panel--link:hover { color: inherit; transform: translateY(-7px) scale(1.02); box-shadow: 0 26px 54px rgba(90,60,160,.18); }
.panel--danger { border-color: rgba(224,0,40,.28); }
.panel--watch { border-color: var(--hairline-2); }

h1, h2, h3, h4 { color: var(--text); }
.h-section {
  margin: 0 0 18px; font: 700 26px var(--f-ui); letter-spacing: -.01em; color: var(--text);
}
.h-section--lg { font: 800 42px/1.1 var(--f-ui); letter-spacing: -.02em; margin-bottom: 12px; }
.h-panel { margin: 0 0 16px; font: 700 18px var(--f-ui); color: var(--text); }
/* Заголовок с акцентной полоской — тот же приём, что у .h2 в лаунчере
   (полоска 3×18, радиус 2). Нужен там, где панель идёт следом за карточками
   статистики: без метки начала секции обе группы плиток сливаются в одну. */
.h-panel--accent { display: flex; align-items: center; gap: 12px; }
.h-panel--accent::before {
  content: ""; flex: none; width: 3px; height: 18px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--logo-violet));
}
.h-panel--gold::before { background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.sec-head .h-section { margin: 0; }

.tag {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r-pill);
  font: 600 11px var(--f-ui); background: rgba(122,92,199,.1); color: var(--accent-ink);
}
.tag--sm { padding: 4px 11px; }
.tag--muted { background: rgba(25,20,38,.05); color: var(--text-2); }
.tag--gold { background: rgba(180,122,0,.1); color: var(--gold-ink); }
.tag--blue { background: rgba(14,126,194,.09); color: var(--blue-ink); }
.tag--red  { background: rgba(224,0,40,.08); color: var(--red-ink); }
/* Бейдж привилегии: рамка в тон текста. Без неё плашка привилегии на светлом
   фоне держится на одной заливке в 8-10% и рядом с обведённым «Не в сети»
   выглядит незаконченной. currentColor — чтобы тон задавался одним классом. */
.tag--group { border: 1px solid color-mix(in srgb, currentColor 32%, transparent); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-soon { margin-left: 6px; padding: 1px 6px; font-size: 9px; letter-spacing: 1px;
  border-radius: 6px; background: rgba(25,20,38,.06); color: var(--text-3); text-transform: uppercase; }

.badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px;
  border-radius: var(--r-pill); font: 600 11.5px var(--f-ui);
  background: rgba(25,20,38,.05); color: var(--text-2);
}
.badge--live { background: rgba(40,200,120,.1); border: 1px solid rgba(40,200,120,.25); color: var(--green-ink); }
.badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: cxDot 2s infinite; }
.badge--danger { background: rgba(224,0,40,.08); color: var(--red-ink); }

/* ===========================================================================
   ГЛАВНАЯ
   =========================================================================== */
.hero { text-align: center; padding: 72px 0 48px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
  border-radius: var(--r-pill); background: var(--glass-2); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9);
  font: 600 12px var(--f-ui); letter-spacing: .08em; color: var(--accent-ink);
  box-shadow: 0 8px 24px rgba(90,60,160,.1); margin-bottom: 24px;
}
.hero h1 {
  margin: 0 auto 18px; font: 800 56px/1.06 var(--f-ui); letter-spacing: -.025em;
  color: var(--text); max-width: 18ch; text-wrap: balance;
}
.hero__lead {
  margin: 0 auto 32px; font: 400 17px/1.65 var(--f-ui); color: var(--text-2);
  max-width: 52ch; text-wrap: pretty;
}
.hero__cta { display: flex; gap: 14px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; }

.dlpill {
  display: inline-flex; align-items: center; gap: 20px;
  padding: 14px 14px 14px 28px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 48px rgba(90,60,160,.16);
}
.dlpill__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dlpill__name { font: 700 15px var(--f-ui); color: var(--text); }
.dlpill__meta { font: 500 12px var(--f-ui); color: var(--text-3); }
.dlpill .btn--dark { padding: 13px 24px; font-size: 13.5px; }

/* --- Три карточки топ-5 --------------------------------------------------- */
.boards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 52px; }
.bcard {
  position: relative; padding: 24px 26px; border-radius: var(--r-lg);
  background: var(--glass); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.bcard:hover { transform: translateY(-8px) scale(1.03); }
.bcard--hungergames:hover { box-shadow: 0 30px 60px rgba(220,150,20,.2); }
.bcard--bedwars:hover     { box-shadow: 0 30px 60px rgba(40,150,220,.18); }
.bcard--anarchy:hover     { box-shadow: 0 30px 60px rgba(224,0,40,.16); }
.bcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bcard__title { font: 700 16px var(--f-ui); color: var(--text); }
.bcard__rows { display: flex; flex-direction: column; }
.brow { display: flex; align-items: center; gap: 12px; padding: 9px 10px; }
.brow--1 { border-radius: 12px; }
.bcard--hungergames .brow--1 { background: rgba(255,214,120,.16); }
.bcard--bedwars     .brow--1 { background: rgba(150,215,255,.2); }
.bcard--anarchy     .brow--1 { background: rgba(255,120,150,.12); }
.brow__n { width: 22px; text-align: center; font: 600 13px var(--f-ui); color: var(--text-3); }
.brow--1 .brow__n { font: 800 13px var(--f-display); }
.brow--2 .brow__n { font: 700 13px var(--f-display); color: #6d7580; }
.brow--3 .brow__n { font: 700 13px var(--f-display); color: #a86c33; }
.bcard--hungergames .brow--1 .brow__n { color: var(--gold-ink); }
.bcard--bedwars     .brow--1 .brow__n { color: var(--blue-ink); }
.bcard--anarchy     .brow--1 .brow__n { color: var(--red-ink); }
.brow__nick { flex: 1; font: 600 13.5px var(--f-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow__rank { font: 500 11.5px var(--f-ui); color: var(--text-3); }
.brow__val { width: 62px; text-align: right; font: 600 13.5px var(--f-ui); color: var(--text-2); }
.brow--1 .brow__val { font-weight: 700; }
.bcard--hungergames .brow--1 .brow__val { color: var(--gold-ink); }
.bcard--bedwars     .brow--1 .brow__val { color: var(--blue-ink); }
.bcard--anarchy     .brow--1 .brow__val { color: var(--red-ink); }
.bcard--anarchy .brow__val { width: auto; }

/* --- Лента новостей строками (главная) ------------------------------------ */
.newsrows { display: flex; flex-direction: column; gap: 14px; }
.newsrow {
  display: grid; grid-template-columns: 110px 110px 1fr auto; align-items: center; gap: 20px;
  padding: 20px 26px; border-radius: var(--r-row);
  background: var(--glass); backdrop-filter: blur(18px);
  border: 1px solid var(--glass-line); box-shadow: 0 10px 30px rgba(90,60,160,.08);
  color: inherit; transition: transform .4s var(--ease), box-shadow .4s;
}
.newsrow:hover { color: inherit; transform: translateX(6px) scale(1.005); box-shadow: 0 16px 40px rgba(90,60,160,.16); }
.newsrow__date { font: 500 13px var(--f-ui); color: var(--text-3); }
.newsrow .tag { justify-content: center; }
.newsrow__title { font: 700 16px var(--f-ui); color: var(--text); }
.newsrow__arrow { font: 600 14px var(--f-ui); color: var(--accent-ink); }

/* ===========================================================================
   НАЧАТЬ ИГРАТЬ
   =========================================================================== */
.pagehead { padding: 52px 0 36px; }
.pagehead p { margin: 0; font: 400 16px/1.6 var(--f-ui); color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.pagehead--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; }

.lcard {
  position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px;
  padding: 36px 40px; border-radius: var(--r-xl);
  background: var(--glass-2); backdrop-filter: var(--glass-blur-lg);
  border: 1px solid rgba(255,255,255,.92); box-shadow: var(--shadow-md);
  margin-bottom: var(--space-md);
}
.lcard__badge {
  display: inline-flex; padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(122,92,199,.1); font: 600 11.5px var(--f-ui);
  letter-spacing: .06em; color: var(--accent-ink); margin-bottom: 16px;
}
.lcard h2 { margin: 0 0 12px; font: 700 28px var(--f-ui); letter-spacing: -.01em; }
.lcard__desc { margin: 0 0 24px; font: 400 14.5px/1.65 var(--f-ui); color: var(--text-2); text-wrap: pretty; }
.lcard__act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lcard__file { font: 500 12.5px var(--f-ui); color: var(--text-3); }
.lcard__note { margin: 18px 0 0; font: 400 12px/1.5 var(--f-ui); color: var(--text-3); }
.lcard__kv { display: flex; flex-direction: column; padding: 8px 0 8px 32px;
  border-left: 1px solid var(--hairline-2); justify-content: center; }

/* .kv — прежний словарь, теперь строками с тонкой линией (макет 3a) */
.kv { display: flex; flex-direction: column; }
.kv__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.kv__row:last-child { border-bottom: none; }
.kv__row .meta { font: 500 13px var(--f-ui); color: var(--text-3); flex-shrink: 0; }
.kv__val { font: 600 13.5px var(--f-ui); color: var(--text); text-align: right; }
.kv__val--red { color: var(--red-ink); font-weight: 700; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: var(--space-md); }
.tiles--grid { grid-template-columns: repeat(3, 1fr); }
.tile {
  position: relative; padding: 26px; border-radius: var(--r-md);
  background: var(--glass); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.tiles--grid .tile:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 30px 60px rgba(122,92,199,.18); }
.tile__label { font: 600 11px var(--f-ui); letter-spacing: .12em; color: var(--accent-ink);
  margin-bottom: 10px; text-transform: uppercase; }
.tile__value { font: 700 17px var(--f-ui); color: var(--text); margin-bottom: 8px; }
.tile__value--red { color: var(--red-ink); }
.tile p { margin: 0; font: 400 13px/1.55 var(--f-ui); color: var(--text-2); }
.tile--accent { background: rgba(40,200,120,.09); border-color: rgba(40,200,120,.25); }
.tile--accent .tile__label, .tile--accent .tile__value { color: var(--green-ink); }

/* Плитки кабинета — компактные, 5 в ряд */
.tiles--info { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tiles--info .tile { padding: 20px; border-radius: var(--r-row); box-shadow: var(--shadow-sm); }
.tiles--info .tile:hover { transform: none; box-shadow: var(--shadow-sm); }
.tiles--info .tile__label { font: 500 11.5px var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--text-3); margin-bottom: 8px; }
.tiles--info .tile__value { font: 700 15px var(--f-ui); margin-bottom: 0; }

/* Альтернатива — свой клиент */
.alt {
  display: flex; align-items: center; gap: 20px; padding: 22px 28px;
  border-radius: var(--r-sm); background: rgba(255,255,255,.4); backdrop-filter: blur(16px);
  border: 1px dashed rgba(122,92,199,.3); flex-wrap: wrap;
}
.alt__txt { flex: 1; min-width: 220px; }
.alt__title { font: 700 14.5px var(--f-ui); color: var(--text); margin-bottom: 4px; }
.alt__sub { font: 400 13px/1.5 var(--f-ui); color: var(--text-2); }
.alt__sub .mono { font: 600 12.5px var(--f-mono); color: var(--accent-ink); }
.alt__ip { font: 700 15px var(--f-mono); color: var(--text); }
.alt .btn { padding: 11px 20px; border-color: var(--hairline-2); background: rgba(255,255,255,.7); font-size: 12.5px; box-shadow: none; }

/* .ipbox — прежний словарь (используется на /support и в старых шаблонах) */
.ipbox { display: inline-flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.6); border: 1px solid var(--glass-line); }
.ipbox__value { font: 700 14px var(--f-mono); color: var(--text); }
.ipbox--lg .ipbox__value { font-size: 16px; }

/* Карточки режимов */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: var(--space-md); }
.mode { padding: 24px 26px; }
.mode__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mode__name { font: 700 17px var(--f-ui); color: var(--text); }
.mode p { margin: 0 0 14px; font: 400 13px/1.55 var(--f-ui); color: var(--text-2); }
.mode__status { display: flex; align-items: center; gap: 8px; font: 600 12px var(--f-ui); color: var(--green-ink); }
.mode--anarchy .mode__tag     { background: rgba(224,0,40,.08); color: var(--red-ink); }
.mode--bedwars .mode__tag     { background: rgba(14,126,194,.09); color: var(--blue-ink); }
.mode--hungergames .mode__tag { background: rgba(180,122,0,.1); color: var(--gold-ink); }
.tile--mode { text-align: left; }

/* .connect — прежний двухколоночный блок (остался на /support) */
.connect { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px;
  padding: 30px 34px; border-radius: var(--r-xl);
  background: var(--glass-2); backdrop-filter: var(--glass-blur-lg);
  border: 1px solid rgba(255,255,255,.92); box-shadow: var(--shadow-md);
  margin-bottom: var(--space-md); }

/* ===========================================================================
   ТАБЫ (топы и страница игрока)
   =========================================================================== */
.tabs {
  display: flex; gap: 6px; padding: 6px; border-radius: var(--r-pill);
  background: var(--glass); backdrop-filter: blur(18px);
  border: 1px solid var(--glass-line); width: fit-content;
  margin-bottom: var(--space-md); max-width: 100%; overflow-x: auto;
}
.tab {
  padding: 10px 22px; border-radius: var(--r-pill); border: none; background: transparent;
  font: 500 13px var(--f-ui); color: #6f6a85; cursor: pointer; white-space: nowrap;
  transition: background .3s, color .3s;
}
.tab:hover { background: rgba(255,255,255,.8); color: var(--text); }
.tab.is-active { font-weight: 600; color: #fff; background: var(--ink); }
.tab.is-active:hover { background: var(--ink); color: #fff; }
/* ⚠️ Нижний отступ обязателен, а не «для воздуха». Панель режима кончается
   ровно на нижней кромке карточек, а следующий за ней блок (на странице
   игрока — «Квесты») — это .panel со своим стеклом, тенью и скруглением 24px.
   Без отступа он начинался в той же координате, накрывал тень карточек и
   срезал им нижние углы: замер давал зазор 0 px между .stat (…421) и
   .panel (421…). Собственного margin-top у .panel нет — ритм между панелями
   держит их margin-bottom, а первой панели в потоке его дать некому. */
.tabpanes { position: relative; margin-bottom: var(--space-md); }

/* Поиск по нику */
.search {
  display: flex; gap: 10px; padding: 8px; border-radius: var(--r-pill);
  background: var(--glass-2); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-line); box-shadow: 0 12px 32px rgba(90,60,160,.1);
}
.search input {
  width: 200px; padding: 10px 18px; border-radius: var(--r-pill); border: none;
  background: transparent; font: 500 13.5px var(--f-ui); color: var(--text); outline: none;
}
.search .btn { padding: 11px 22px; font-size: 13px; }

/* ===========================================================================
   ТАБЛИЦА ТОПОВ
   =========================================================================== */
.tcard {
  border-radius: var(--r-lg); background: var(--glass-2);
  backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.92);
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: var(--space-md);
}
.tcard__head, .trow {
  display: grid; grid-template-columns: 70px 1fr 160px 130px; gap: 12px; padding: 14px 28px;
  align-items: center;
}
.tcard__head {
  padding: 16px 28px; border-bottom: 1px solid var(--hairline);
  font: 600 11px var(--f-ui); letter-spacing: .1em; color: var(--text-3); text-transform: uppercase;
}
.tcard__head > span:last-child, .trow > *:last-child { text-align: right; }
.trow { transition: background .3s; }
.trow:hover { background: rgba(255,255,255,.7); }
.trow--1 { background: rgba(255,214,120,.14); }
.trow--1:hover { background: rgba(255,214,120,.24); }
.trow__nick { font: 600 14.5px var(--f-ui); color: var(--text); }
.trow--1 .trow__nick { font-weight: 700; }
.trow__rank { font: 500 12px var(--f-ui); color: var(--text-3); }
.trow--1 .trow__rank { font-weight: 600; color: var(--gold-ink); }
.trow__val { font: 600 14.5px var(--f-ui); color: var(--text-2); }
.trow--1 .trow__val { font: 700 15px var(--f-ui); color: var(--gold-ink); }
.tcard__note { padding: 22px 28px; font: 500 13px var(--f-ui); color: var(--text-3); }
/* Топы без ранговой лестницы (Богатейшие, Дуэли) — три колонки вместо четырёх. */
.tcard--norank .tcard__head, .tcard--norank .trow { grid-template-columns: 70px 1fr 130px; }

/* Плашки мест 1–3 (и .place из прежнего словаря) */
.place {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  font: 800 13px var(--f-display);
}
.place--1 { background: linear-gradient(160deg, var(--gold-a), var(--gold-b)); color: #3a2800; }
.place--2 { background: linear-gradient(160deg, var(--silver-a), var(--silver-b)); color: #2a2f38; }
.place--3 { background: linear-gradient(160deg, var(--bronze-a), var(--bronze-b)); color: #341f0a; }
.place--none { width: 30px; background: none; font: 600 13px var(--f-ui); color: var(--text-3); }

/* Пагинация */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin: var(--space-md) 0; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 12px;
  display: grid; place-items: center; font: 500 13px var(--f-ui); color: #6f6a85;
  background: var(--glass-2); border: 1px solid var(--glass-line); transition: background .3s;
}
.pager a:hover { background: #fff; color: var(--text); }
.pager .is-current { font-weight: 600; color: #fff; background: var(--ink); border-color: transparent; }
.pager .is-disabled { opacity: .45; }
.pager.pager--plain { justify-content: flex-start; }
.pager.pager--plain a, .pager.pager--plain span { min-width: 0; height: auto; padding: 0;
  background: none; border: none; display: inline; }
.tcard .pager { padding: 18px; margin: 0; border-top: 1px solid var(--hairline); }

/* ===========================================================================
   НОВОСТИ
   =========================================================================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
/* Лента /news: та же сетка, отдельный модификатор оставлен — на него завязана
   регрессия и он отличает полную ленту от трёх свежих на главной. */
.cards--news { grid-template-columns: repeat(3, 1fr); }
.newscard {
  display: flex; flex-direction: column; gap: 10px; padding: 26px;
  border-radius: var(--r-md); background: var(--glass-2); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.92); box-shadow: 0 12px 34px rgba(90,60,160,.09);
  margin-bottom: 0;
}
.newscard__head { display: flex; justify-content: space-between; align-items: center; }
.newscard h4 { margin: 0; font: 700 16.5px/1.35 var(--f-ui); color: var(--text); }
.newscard p { margin: 0; font: 400 13px/1.55 var(--f-ui); color: var(--text-2); }
.newscard__more { font: 600 12.5px var(--f-ui); color: var(--accent-ink); margin-top: auto; }

/* Страница одной новости */
.article { max-width: 760px; margin: 0 auto; }
.article__head { margin-bottom: var(--space-md); }
.prose { font: 400 15.5px/1.75 var(--f-ui); color: var(--text-2); }
.prose h2, .prose h3 { color: var(--text); margin: 28px 0 12px; }
.prose p { margin: 0 0 16px; }
.prose a { color: var(--accent-ink); text-decoration: underline; }
.prose ul, .prose ol { padding-left: 22px; }
.prose code { font-family: var(--f-mono); font-size: 13.5px; background: rgba(122,92,199,.08);
  padding: 2px 6px; border-radius: 6px; color: var(--accent-ink); }
.backlink { margin: var(--space-md) 0; }

/* ===========================================================================
   КАБИНЕТ
   =========================================================================== */
.cabinet { display: grid; grid-template-columns: 240px 1fr; gap: 28px; padding-top: 36px; }
.side {
  display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-md);
  background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--glass-line);
  box-shadow: 0 12px 34px rgba(90,60,160,.09); height: fit-content; margin-bottom: 0;
}
.side__id { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; }
.side__ava {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(160deg, #c9b8ff, var(--logo-violet));
  display: grid; place-items: center; font: 800 14px var(--f-display); color: #fff;
}
.side__nick { font: 700 14px var(--f-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.side__state { font: 600 10.5px var(--f-ui); letter-spacing: .08em; color: var(--green-ink); }
.side__state--off { color: var(--text-3); }
.side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.side a {
  display: block; padding: 12px 16px; border-radius: var(--r-cell);
  font: 500 13.5px var(--f-ui); color: #6f6a85; transition: background .3s, color .3s;
}
.side a:hover { background: rgba(255,255,255,.75); color: var(--text); }
.side a.is-active { font-weight: 600; color: var(--text); background: rgba(255,255,255,.95); box-shadow: 0 4px 14px rgba(90,60,160,.1); }
.side__sep { height: 1px; background: rgba(25,20,38,.07); margin: 8px 12px; }
.side__out { padding: 0; }
.side__out button {
  display: block; width: 100%; text-align: left; padding: 12px 16px; border: none;
  border-radius: var(--r-cell); background: transparent; cursor: pointer;
  font: 500 13.5px var(--f-ui); color: var(--red-ink); transition: background .3s;
}
.side__out button:hover { background: rgba(224,0,40,.06); }
.cabinet main { display: flex; flex-direction: column; gap: 20px; }
.cabinet main > .panel { margin-bottom: 0; }
.cabinet main h1 { margin: 0; font: 800 32px/1.1 var(--f-ui); letter-spacing: -.02em; }

/* Панели «в две колонки» */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.duo > .panel { margin-bottom: 0; }

/* Четыре стат-плитки в панели статистики */
.sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.scell { padding: 18px; border-radius: var(--r-xs); background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.95); }
.scell__v { font: 700 24px var(--f-ui); color: var(--text); }
.scell__l { font: 500 12px var(--f-ui); color: var(--text-3); margin-top: 4px; }
.scell--gold { background: rgba(255,214,120,.14); border-color: rgba(255,214,120,.4); }
.scell--gold .scell__v { color: var(--gold-ink); }
.scell--blue { background: rgba(150,215,255,.16); border-color: rgba(150,215,255,.45); }
.scell--blue .scell__v { color: var(--blue-ink); }

/* Плитки квестов: та же сетка, но поверхность другая — фиолетовая, а не белая.
   Иначе панель «Квесты» повторяет карточки статистики один в один, и на
   светлом фоне обе группы читаются как одна сплошная белая простыня. Тон
   взят у базового акцента сайта (.tag), новых цветов не заводим. */
.sgrid--quest .scell {
  background: rgba(122,92,199,.06); border-color: rgba(122,92,199,.18);
}

/* Строки турниров в кабинете */
.trow-lite { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.trow-lite:last-of-type { border-bottom: none; }
.trow-lite span:first-child { font: 500 13px var(--f-ui); color: var(--text-2); }

/* ===========================================================================
   СТРАНИЦА ИГРОКА
   =========================================================================== */
.playerhead { display: flex; align-items: center; gap: 22px; padding: 48px 0 30px; }
.playerhead__ava {
  width: 72px; height: 72px; border-radius: var(--r-sm); flex-shrink: 0;
  background: linear-gradient(160deg, #c9b8ff, var(--logo-violet));
  display: grid; place-items: center; font: 800 28px var(--f-display); color: #fff;
  box-shadow: 0 14px 34px rgba(139,70,224,.3);
}
.playerhead h1 { margin: 0 0 8px; font: 800 38px/1 var(--f-ui); letter-spacing: -.02em; }
.playerhead__tags { display: flex; gap: 8px; flex-wrap: wrap; }

.statgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: auto; gap: 16px; }
.statgrid--tight { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* ⚠️ Рамка ОТСТУПАЕТ ОТ МАКЕТА, и осознанно. В хэндоффе у вторичной плитки
   рамка rgba(255,255,255,.92) — белая по белому: в редакторе макета карточки
   лежат на холсте, а на живой странице фон #f4f1fc, и границы плиток
   пропадали совсем. Заливка и тень остались макетные, заменена только рамка —
   тем же фиолетовым, что у прочих поверхностей сайта. */
.stat {
  padding: 24px; border-radius: var(--r-sm); background: var(--glass-2);
  backdrop-filter: blur(20px); border: 1px solid rgba(122,92,199,.16);
  box-shadow: var(--shadow-sm);
}
.stat__value { font: 700 30px var(--f-ui); color: var(--text); }
.stat__value--xl { font: 700 52px var(--f-display); color: var(--text); line-height: 1.1; }
.stat__value--money { font: 700 34px var(--f-ui); color: var(--red-ink); }
/* Баланс в главной карте: Unbounded как у прочих крупных значений, но 40px,
   а не 52 — семизначная сумма с разделителями тысяч этим шрифтом шире
   рейтинга ELO, и на 52px она вылезала бы из колонки 1.3fr. Проверяется
   замером переполнения, а не на глаз. */
.stat__value--xl.stat__value--money {
  font: 700 40px var(--f-display); line-height: 1.1; color: var(--red-ink);
}
.stat__label { font: 500 12.5px var(--f-ui); color: var(--text-3); margin-top: 6px; }
/* Главная карта режима: две строки слева, тонированное стекло.
   Значения по умолчанию — ровно макетные (экран 3e, золото у Голодных игр).
   Тон вынесен в четыре переменные, поэтому режим переопределяет цвет, а не
   повторяет всю карточку: заливка, рамка, тень и цвет капители едут вместе. */
.stat--wide { grid-column: span 1; }
.stat--accent {
  --acc-fill: rgba(255,224,168,.5);
  --acc-line: rgba(255,214,120,.5);
  --acc-shadow: rgba(180,122,0,.12);
  --acc-ink: var(--gold-ink);
  grid-row: span 2; padding: 30px; border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--acc-fill), rgba(255,255,255,.55));
  backdrop-filter: blur(22px); border: 1px solid var(--acc-line);
  box-shadow: 0 14px 40px var(--acc-shadow);
}
.stat--accent .stat__label { font: 600 11.5px var(--f-ui); letter-spacing: .12em;
  color: var(--acc-ink); text-transform: uppercase; margin: 0 0 12px; order: -1; }
.stat--accent .stat__value--xl { margin-bottom: 16px; }
.statgrid--tight .stat--accent { grid-row: span 1; }

/* Карта без блока ранга (у дуэлей и анархии ELO нет, значит нет ни бейджа, ни
   полосы прогресса). Высоту ей задаёт соседняя колонка в две строки, и при
   выравнивании по верху под значением оставалась пустая нижняя половина —
   читалось как «здесь что-то не загрузилось». Содержимое центрируем, отступ
   под значением снимаем: он разделял значение и ранг, а ранга здесь нет. */
.stat--accent-plain { justify-content: center; }
.stat--accent-plain .stat__value--xl { margin-bottom: 0; }
/* То же для соседей в тесной сетке: они растягиваются по высоте главной карты. */
.statgrid--tight .stat:not(.stat--accent) {
  display: flex; flex-direction: column; justify-content: center;
}

/* Цвета режимов — те же, что у сети везде (README хэндоффа: Голодные игры
   #b47a00, BedWars #0e7ec2, Анархия #c50024). Дуэлям в хэндоффе цвет не
   назначен — берут базовый фиолетовый акцент сайта. */
.stat--gold   { }
.stat--blue   { --acc-fill: rgba(150,215,255,.42); --acc-line: rgba(120,200,255,.5);
                --acc-shadow: rgba(14,126,194,.12); --acc-ink: var(--blue-ink); }
.stat--red    { --acc-fill: rgba(255,186,198,.42); --acc-line: rgba(255,150,170,.5);
                --acc-shadow: rgba(224,0,40,.1);   --acc-ink: var(--red-ink); }
.stat--violet { --acc-fill: rgba(190,170,255,.4);  --acc-line: rgba(150,120,230,.42);
                --acc-shadow: rgba(122,92,199,.14); --acc-ink: var(--accent-ink); }

.rank { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rank__badge {
  font: 700 13px var(--f-ui); padding: 6px 16px; border-radius: var(--r-pill);
  background: linear-gradient(160deg, var(--gold-a), var(--gold-b)); color: #3a2800;
}
.rank__hint { font: 500 12px var(--f-ui); color: var(--text-3); }
.bar { height: 8px; border-radius: var(--r-pill); background: rgba(25,20,38,.08); overflow: hidden; }
.bar__fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--gold-a), var(--gold-b)); width: 0; }

/* ===========================================================================
   ВХОД
   =========================================================================== */
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 72vh; padding: 40px 0; }
.auth {
  position: relative; width: 400px; max-width: 100%; padding: 38px 36px;
  border-radius: var(--r-xl); background: var(--glass-3);
  backdrop-filter: var(--glass-blur-lg); border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow-lg);
}
.auth__head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth__title { margin: 0; font: 700 19px var(--f-ui); color: var(--text); }
.auth__link { margin: 14px 0 22px; text-align: center; font: 500 12.5px var(--f-ui); }
.auth form { margin: 0; }
.rank__bar { margin-top: 2px; }
.side__out form { margin: 0; }
.panel form { margin: 0 0 var(--space-sm); }
.panel form:last-child { margin-bottom: 0; }

.form-label { display: block; font: 600 12px var(--f-ui); color: var(--text-2); margin-bottom: 7px; }
.input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; padding: 13px 18px; border-radius: var(--r-cell);
  border: 1px solid var(--hairline-2); background: rgba(255,255,255,.8);
  font: 500 14px var(--f-ui); color: var(--text); outline: none; margin-bottom: 16px;
}
.input:focus, input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 120px; resize: vertical; }
.formgrid { display: grid; gap: 14px; }
.formgrid--inline { grid-template-columns: 1fr auto; align-items: end; }
.formgrid--inline .input { margin-bottom: 0; }
.form--narrow { max-width: 320px; }
.field { display: block; }
.field__label { display: block; font: 600 12px var(--f-ui); color: var(--text-2); margin-bottom: 6px; }
.field--check { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; }
.field--check input { accent-color: var(--red-ink); width: 16px; height: 16px; margin: 0; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.filters .input { width: auto; min-width: 140px; margin-bottom: 0; }
.filters .field { flex: 0 1 auto; }

.notice {
  padding: 16px 18px; border-radius: var(--r-xs); background: rgba(122,92,199,.07);
  border: 1px solid rgba(122,92,199,.18); font: 400 12.5px/1.6 var(--f-ui);
  color: var(--text-2); margin-bottom: var(--space-sm);
}
.notice strong { color: var(--text); }
.notice .mono { font: 600 12px var(--f-mono); color: var(--accent-ink); }
.notice--error, .notice--err { background: rgba(224,0,40,.07); border-color: rgba(224,0,40,.22); color: #8a0018; }
.notice--ok { background: rgba(40,200,120,.09); border-color: rgba(40,200,120,.28); color: var(--green-ink); }
.notice--warn { background: rgba(217,164,65,.1); border-color: rgba(217,164,65,.32); color: #7a5200; }

/* ===========================================================================
   ЗАГЛУШКИ
   =========================================================================== */
.stub {
  padding: 32px 28px; border-radius: var(--r-md); text-align: center;
  background: rgba(255,255,255,.45); border: 1px dashed rgba(122,92,199,.25);
  margin-bottom: var(--space-sm);
}
.stub--inline { padding: 24px; }
.stub__icon { font-size: 28px; margin-bottom: 10px; }
.stub h3 { margin: 0 0 8px; font: 700 16px var(--f-ui); color: var(--text); }
.stub p { margin: 0; font: 400 13.5px/1.6 var(--f-ui); color: var(--text-2); }

/* ===========================================================================
   ТАБЛИЦЫ (прежний словарь: /stats, /tournaments, админка)
   =========================================================================== */
.tablewrap { overflow-x: auto; border-radius: var(--r-xs); }
.dt { width: 100%; border-collapse: collapse; font: 400 13.5px var(--f-ui); }
.dt th {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline);
  font: 600 11px var(--f-ui); letter-spacing: .1em; color: var(--text-3); text-transform: uppercase;
  white-space: nowrap;
}
.dt td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); color: var(--text-2); }
.dt tbody tr:last-child td { border-bottom: none; }
.dt tbody tr:hover { background: rgba(255,255,255,.6); }
.dt .row-top1 { background: rgba(255,214,120,.14); }
.dt--compact th, .dt--compact td { padding: 9px 10px; }
.dt--kv th { width: 190px; color: var(--text-3); font-weight: 700; text-align: left; }
.dt--kv td { overflow-wrap: anywhere; }
.dt--logs { font-size: 13px; }
.dt--logs td { vertical-align: top; }

/* ===========================================================================
   ТУРНИРЫ (кабинет / публичная страница) — прежний словарь
   =========================================================================== */
.medals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: var(--space-md); }
.medal { padding: 18px; border-radius: var(--r-xs); background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.95); text-align: center; }
.medal__icon { font-size: 22px; }
.medal__count { font: 700 24px var(--f-ui); color: var(--text); }
.medal__label { font: 500 12px var(--f-ui); color: var(--text-3); }
.medal--gold { background: rgba(255,214,120,.16); border-color: rgba(255,214,120,.45); }
.tourgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.tourcard { padding: 22px 24px; border-radius: var(--r-md); background: var(--glass-2);
  border: 1px solid rgba(255,255,255,.92); box-shadow: var(--shadow-sm); }
.tourcard__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.tourcard__name { font: 700 15px var(--f-ui); color: var(--text); }
.tourcard__place { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.tourcard__medal { font-size: 20px; }
.tourcard__num { font: 700 22px var(--f-ui); color: var(--text); }
.tourcard__word { font: 500 12.5px var(--f-ui); color: var(--text-3); }
.tourcard__reward { font: 500 13px var(--f-ui); color: var(--text-2); }
.tourcard__foot { font: 500 12px var(--f-ui); color: var(--text-3); margin-top: 10px; }
.srv { display: inline-flex; padding: 4px 10px; border-radius: var(--r-pill); font: 600 11px var(--f-ui); }

/* Акценты режимов (используются на нескольких страницах) */
.acc--hungergames { --acc: var(--gold-ink); }
.acc--bedwars { --acc: var(--blue-ink); }
.acc--anarchy { --acc: var(--red-ink); }
.acc--portal { --acc: var(--accent-ink); }

/* ===========================================================================
   ПОДВАЛ
   =========================================================================== */
.ftr {
  max-width: 1240px; margin: 0 auto; padding: 28px 40px 40px;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-sm); flex-wrap: wrap; border-top: 1px solid var(--hairline);
}
.ftr small { color: var(--text-3); font-size: 12px; }
.ftr .lockup__name { font-size: 18px; }
.ftr .lockup__div { height: 22px; }
.ftr .lockup__tag { font-size: 7px; }

/* ===========================================================================
   АДМИНКА — словарь сохранён, значения светлые
   =========================================================================== */
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); padding-top: 36px; }
.admin-head .h-section--lg { margin-bottom: 8px; }
.admin-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-md); }
.admin-tabs .btn.is-current { background: var(--ink); border-color: transparent; color: #fff; }
.admin-tabs .btn.is-current:hover { background: var(--ink-hover); color: #fff; }
.admin-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.admin-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-md); }
.admin-who__out { margin: 0; margin-left: auto; }
.rowacts { display: flex; gap: 8px; flex-wrap: wrap; }
.rowacts form { margin: 0; }
.audit-details { font-family: var(--f-mono); font-size: 12px; color: var(--text-3); word-break: break-word; max-width: 420px; }

.logfilter { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.logfilter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.logfilter .form-label { margin: 0; white-space: nowrap; }
.logfilter .input { width: auto; min-width: 150px; flex: 0 1 auto; margin-bottom: 0; }
.logfilter .meta { margin-left: auto; }

.lvl { display: inline-block; padding: 2px 8px; border-radius: 8px; font: 700 11px var(--f-ui);
  letter-spacing: 1px; background: rgba(25,20,38,.05); color: var(--text-3); }
.lvl--info { color: var(--text-2); }
.lvl--warn { background: rgba(217,164,65,.14); color: #7a5200; }
.lvl--error, .lvl--severe, .lvl--fatal { background: rgba(224,0,40,.09); color: var(--red-ink); }
.lvl--debug, .lvl--trace, .lvl--other { opacity: .7; }
.logmsg { max-width: 720px; }
.logmsg summary { cursor: pointer; overflow-wrap: anywhere; }
.logmsg summary::marker { color: var(--accent); }
.logmsg__raw {
  font-family: var(--f-mono); font-size: 12px; color: var(--text-2);
  background: rgba(255,255,255,.7); border: 1px solid var(--hairline-2); border-radius: 10px;
  padding: 8px 10px; margin: 8px 0 4px; max-height: 320px; overflow: auto;
}
.codes { list-style: none; padding: 0; margin: var(--space-sm) 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.codes li { border: 1px solid var(--hairline-2); border-radius: 10px; padding: 8px 12px;
  letter-spacing: 2px; font-size: 15px; font-family: var(--f-mono); background: rgba(255,255,255,.6); }
.totp-secret { font-size: 19px; letter-spacing: 3px; overflow-wrap: anywhere; font-family: var(--f-mono); }
.check { display: inline-flex; align-items: center; gap: 8px; }

/* ===========================================================================
   АДАПТИВ
   =========================================================================== */
@media (max-width: 1080px) {
  .boards3 { grid-template-columns: 1fr; }
  .tiles, .tiles--grid, .modes, .cards { grid-template-columns: repeat(2, 1fr); }
  .tiles--info { grid-template-columns: repeat(3, 1fr); }
  .lcard, .connect { grid-template-columns: 1fr; }
  .lcard__kv { border-left: none; border-top: 1px solid var(--hairline-2); padding: 16px 0 0; }
  .cabinet { grid-template-columns: 1fr; }
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .stat--accent { grid-row: span 1; grid-column: span 2; }
  .sgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .admin-cols { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  /* Бургер-меню: пунктов до шести, в пилюлю они перестают помещаться раньше
     всего остального. Меню раскрывается под шапкой отдельной карточкой. */
  .navburger { display: grid; }
  .nav { display: none; position: absolute; left: 40px; right: 40px; top: calc(100% + 10px);
    padding: 10px; border-radius: var(--r-md); background: rgba(255,255,255,.92);
    backdrop-filter: blur(24px); border: 1px solid var(--glass-line); box-shadow: var(--shadow-md); z-index: 6; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav a { padding: 12px 16px; border-radius: var(--r-cell); }
  .hdr__bar { position: relative; }
}

@media (max-width: 720px) {
  .shell { padding: 0 18px 40px; }
  .hdr { padding: 18px 18px 0; }
  .ftr { padding: 24px 18px 32px; }
  .nav { left: 18px; right: 18px; }
  .hero { padding: 44px 0 32px; }
  .hero h1 { font-size: 36px; }
  .hero__lead { font-size: 15.5px; }
  .h-section--lg { font-size: 30px; }
  .cabinet main h1 { font-size: 26px; }
  .tiles, .tiles--grid, .modes, .cards, .tiles--info, .statgrid, .sgrid { grid-template-columns: 1fr; }
  .stat--accent { grid-column: span 1; }
  .lcard { padding: 26px 22px; }
  .panel { padding: 22px 20px; }
  .newsrow { grid-template-columns: 1fr auto; gap: 10px; padding: 18px 20px; }
  .newsrow__date { grid-row: 1; }
  .newsrow .tag { grid-row: 1; grid-column: 2; }
  .newsrow__title { grid-column: 1 / -1; }
  .newsrow__arrow { display: none; }
  .tcard__head { display: none; }
  .trow { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 12px 16px; }
  .trow__rank { display: none; }
  .pagehead, .pagehead--split { padding: 32px 0 22px; flex-direction: column; align-items: stretch; }
  .playerhead { padding: 32px 0 22px; gap: 16px; }
  .playerhead h1 { font-size: 28px; }
  .playerhead__ava { width: 56px; height: 56px; font-size: 22px; }
  .stat__value--xl { font-size: 40px; }
  .search input { width: 100%; }
  .search { width: 100%; }
  .alt { flex-direction: column; align-items: stretch; }
  .dlpill { flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-md); }
  .hdr__side .pill-online { display: none; }
  .tabs { width: 100%; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 30px; }
  .lockup__tag { display: none; }
  .lockup__div { display: none; }
  .lockup__name { font-size: 20px; }
}

/* ===========================================================================
   PREFERS-REDUCED-MOTION
   Гасим дрейф, молнии, вращения и «дыхание» портала. Статика остаётся —
   портал, стекло и цвета никуда не деваются, двигаться перестаёт только
   то, что двигалось.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fx__conic, .fx__rings > i, .fx__halo, .fx__portal, .fx__tex,
  .fx__shine > i, .fx__sparks > i, .fx__blobs > i, .fx__glints > i,
  .loader__fx > .l-conic, .loader__fx > .l-halo, .loader__fx > .l-portal,
  .loader__fx > .l-portal > .l-tex, .loader__fx > .l-portal > .l-shine, .loader__fx > .l-ring {
    animation: none !important;
  }
  /* Частицы и молнии не просто останавливаем — убираем: замерший в воздухе
     квадрат и застывшая молния читаются как артефакт вёрстки, а не как покой. */
  .fx__px, .fx__bolts, .loader__fx > svg { display: none !important; }
  .loader__tile, .loader__tile span { animation: none !important; }
  .loader__bar > i { animation: none !important; width: 86%; }
  .loader__bar > i > b { animation: none !important; }
  .pill-online .dot, .badge--live::before { animation: none !important; }
  [data-reveal] > * { animation: none !important; }
  .btn, .panel--link, .bcard, .tile, .newsrow, .trow, .tab, .pager a, .side a {
    transition: none !important;
  }
  .btn:hover, .panel--link:hover, .bcard:hover, .tiles--grid .tile:hover, .newsrow:hover {
    transform: none !important;
  }
  [data-glow] > .glow { display: none !important; }
}