/* =====================================================================
   INKARIUS — премиальный слой (подключается последним, после theme.css)
   Матовое стекло поверх мягкого зелёного света, крупная чистая типографика,
   пилюли вместо квадратных кнопок, глубина тенями. Без неона, свечения текста и рамок.
   ===================================================================== */

:root {
  --bg: #060807;
  --glass: rgba(24, 29, 26, .58);
  --glass-2: rgba(255, 255, 255, .045);
  --glass-3: rgba(255, 255, 255, .08);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .055);       /* блик по верхнему краю стекла, не рамка */
  --depth: 0 30px 80px -40px rgba(0, 0, 0, .85);
  --blur: blur(28px) saturate(150%);
  --display: 'Onest', 'Manrope', system-ui, sans-serif;
  --body: 'Onest', 'Manrope', system-ui, sans-serif;
  --card-2: rgba(255, 255, 255, .045);
  --card-3: rgba(255, 255, 255, .085);
  --field: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .11);
  --grad: linear-gradient(180deg, var(--a-hi) 0%, var(--a-mid) 55%, var(--a-lo) 100%);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- фон: мягкий зелёный свет, неподвижный, за всем содержимым ---------- */
html, body { background: var(--bg) !important; }
body { font-family: var(--body); letter-spacing: -.005em; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -10; pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% -8%, rgba(var(--a-rgb), .17), transparent 62%),
    radial-gradient(45% 40% at 105% 8%, rgba(var(--a3-rgb), .15), transparent 60%),
    radial-gradient(60% 50% at 70% 115%, rgba(var(--a-rgb), .10), transparent 62%),
    radial-gradient(40% 35% at -5% 85%, rgba(var(--a3-rgb), .10), transparent 60%);
}
body::after {   /* тонкое зерно, чтобы градиенты не «полосили» */
  content: ""; position: fixed; inset: 0; z-index: -9; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- стекло: меню, шапка, карточки, панели ---------- */
.side, .topbar, .card, .auth-box, .admin-nav, .rm-hero, .cl-hero, .cta-box, .marquee, .profile-hero .container,
.user-drop, .cl-dialog, .sk-msg, .toast, .st-tip {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--hl), var(--depth) !important;
  border: 0 !important;
}
.card { border-radius: 28px; }
.side, .topbar { border-radius: 28px; }
.side::before { background: linear-gradient(180deg, rgba(var(--a-rgb), .12), rgba(var(--a-rgb), 0)); border-radius: 28px 28px 0 0; }
.topbar::before { display: none; }
.topbar { box-shadow: var(--hl), 0 20px 50px -30px rgba(0, 0, 0, .9) !important; }

/* вложенные блоки — светлее стекла, без рамок */
.hm-match, .hm-top-row, .hm-me-stats > div, .slot.filled, .sk-card, .sk-pick, .rl-list li, .connect-line,
.tabs, .sk-team, .sk-only, .chip, .btn-ghost, .topbar-icon, .user-chip, .side-social, .topbar-burger, .rm-chip, .rm-tool, .rm-team-mark, .cl-tag, .rl-num {
  background-color: var(--glass-2) !important;
}
.connect-line { background: rgba(0, 0, 0, .28) !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }

/* ---------- типографика: крупно, плотно, спокойно ---------- */
h1, h2, h3, .display, .section-title, .page h1, .hero h1, .auth-side h1, .rm-hero h1, .cl-hero-text h1,
.hm-mode-name, .rm-team-head h2, .rl-title, .sh-plan-name, .st-tile-v, .stat-num, .hm-match-map, .sk-team button, .cl-tag {
  font-family: var(--display) !important;
}
.page h1, .st-head h1, .cl-hero-text h1 {
  text-transform: none !important;
  font-weight: 800; font-size: clamp(36px, 4.6vw, 60px) !important; letter-spacing: -.04em !important; line-height: 1.02;
}
.rm-hero h1 { text-transform: none !important; letter-spacing: -.045em !important; font-size: clamp(48px, 7vw, 96px) !important; }
.hm-mode-name, .rm-team-head h2, .rl-title, .sh-plan-name, .hm-match-map {
  text-transform: none !important; letter-spacing: -.03em !important;
}
.hm-mode-name { font-size: clamp(26px, 2.4vw, 34px) !important; }
.rl-title, .rm-team-head h2 { font-size: 24px !important; }
.st-card-title, .hm-title { font-size: 20px; letter-spacing: -.02em; }
.lead { color: #B4BCB5; }
.st-tile-v, .hm-me-v, .sh-price { letter-spacing: -.04em; }

/* ---------- кнопки и переключатели: пилюли ---------- */
.btn, .chip, .topbar-btn, .hm-mode-cta, .sk-tab, .sk-team button, .sk-only button, .tab, .st-sort {
  border-radius: 999px !important;
  transition: transform .25s var(--ease), background-color .2s, color .2s, box-shadow .25s, filter .2s !important;
}
.btn-primary, .topbar-btn, .hm-mode-cta, .chip[aria-pressed="true"], .chip[aria-checked="true"], .sk-team button[aria-pressed="true"], .side-nav a.active, .admin-link[aria-current="page"] {
  background: var(--grad) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(var(--a3-rgb), .9) !important;
}
.btn-primary:hover, .topbar-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-primary:active, .topbar-btn:active, .btn:active { transform: scale(.98); }
.btn-ghost:hover, .chip:hover, .topbar-icon:hover, .user-chip:hover { background-color: var(--glass-3) !important; }
.tabs, .sk-team, .sk-only { border-radius: 999px !important; }
.tab-pill { border-radius: 999px !important; background: rgba(255, 255, 255, .1) !important; }
.sk-tabs-panel { border-radius: 999px !important; padding: 6px !important; }
.sk-tab[aria-pressed="true"] { background: rgba(255, 255, 255, .1) !important; }
.side-nav a { border-radius: 18px; }
.side-nav a.active { border-radius: 18px; }

/* поля */
.field, .input, .sk-tools input, .sk-tools select, select.input {
  background: var(--field) !important; border-radius: 18px !important; border: 1px solid transparent !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #151a16 inset !important; box-shadow: 0 0 0 1000px #151a16 inset !important;
}

/* ---------- карточки режимов и предметов: глубина и плавность ---------- */
.hm-mode { border-radius: 32px; box-shadow: var(--hl), var(--depth); transition: transform .5s var(--ease), box-shadow .3s; }
.hm-mode:hover { transform: translateY(-4px); }
.hm-mode:hover, .hm-mode:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--a2-rgb), .8), var(--depth); }
.hm-mode::after { background: linear-gradient(180deg, rgba(6, 8, 7, .05) 0%, rgba(6, 8, 7, .25) 38%, rgba(6, 8, 7, .9) 76%, rgba(6, 8, 7, .97) 100%); }
.sk-card { transition: transform .35s var(--ease), box-shadow .2s !important; }
.sk-card:hover { transform: translateY(-3px); }
.cl-card { transition: transform .35s var(--ease), box-shadow .2s; }
.cl-card:hover { transform: translateY(-3px); }
.st-bar { border-radius: 0 6px 6px 0; }

/* таблицы: воздух, без жёстких линий */
.table th { color: #8F988F; letter-spacing: .06em; }
.table td { border-top-color: rgba(255, 255, 255, .05) !important; }
.table tbody tr:hover { background: rgba(255, 255, 255, .035) !important; }

/* подвал */
.site-footer { border-top: 0 !important; }
.foot-inner { padding-top: 40px; }

/* фокус оставляем заметным */
:focus-visible { outline: 2px solid var(--a-hi); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hm-mode, .sk-card, .cl-card, .btn { transition: none !important; }
  .hm-mode:hover, .sk-card:hover, .cl-card:hover { transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .side, .topbar, .card, .auth-box, .admin-nav, .rm-hero, .cl-hero, .user-drop, .cl-dialog { background: #131715 !important; }
}

/* =====================================================================
   ГЛАВНАЯ: первый экран и сетка разделов
   ===================================================================== */
.hx {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px;
  min-height: 560px; padding: 48px 48px 40px; border-radius: 36px; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 90% at 85% 40%, rgba(var(--a-rgb), .16), transparent 60%), var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--hl), var(--depth);
}
.hx-live { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--glass-2); color: #D7DED8; font-weight: 600; font-size: 14px; }
.hx-title { margin-top: 22px; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 6.4vw, 96px); line-height: .95; letter-spacing: -.055em; color: #fff; text-transform: none; }
.hx-title span { display: block; }
.hx-dim { color: #7E8A80; }
.hx-lead { margin-top: 22px; max-width: 46ch; color: #B4BCB5; font-size: 19px; line-height: 1.5; }
.hx-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hx-actions .btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.hx-stats { margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.hx-stats div { display: flex; flex-direction: column; }
.hx-stats dd { margin: 0; color: #fff; font-weight: 800; font-size: 34px; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hx-stats dt { color: #8F988F; font-size: 14px; }

.hx-visual { position: relative; height: 480px; perspective: 1600px; }
.hx-stack { position: absolute; left: 50%; top: 50%; width: 420px; height: 260px; transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-36deg); }
.hx-layer {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden;
  transform: translateZ(calc(var(--i) * 70px)); transform-style: preserve-3d;
  box-shadow: 0 50px 60px -30px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: hxFloat 7s var(--ease) infinite alternate; animation-delay: calc(var(--i) * -1.4s);
}
.hx-layer svg { display: block; width: 100%; height: 100%; }
.hx-layer-name {
  position: absolute; left: 18px; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px;
  background: rgba(6, 8, 7, .62); color: #fff; font-weight: 800; font-size: 15px; text-transform: capitalize; letter-spacing: -.01em;
}
@keyframes hxFloat {
  from { transform: translateZ(calc(var(--i) * 70px)); }
  to { transform: translateZ(calc(var(--i) * 70px + 26px)); }
}

.bx { margin-top: var(--gap); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); gap: var(--gap); }
.bx-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px; border-radius: 32px; color: var(--text) !important; overflow: hidden; transition: transform .45s var(--ease), box-shadow .3s; }
.bx-tile:hover { transform: translateY(-4px); }
.bx-tile:hover, .bx-tile:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--a2-rgb), .7), var(--depth) !important; }
.bx-lobby { grid-column: span 2; grid-row: span 2; }
.bx-stats { grid-column: span 2; }
.bx-title { font-size: 26px; font-weight: 800; letter-spacing: -.035em; color: #fff; }
.bx-text { margin-top: 6px; color: #A9B2AA; font-size: 15px; max-width: 40ch; }

.bx-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bx-team { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 22px; background: rgba(0, 0, 0, .22); }
.bx-team-name { color: #8F988F; font-size: 13px; font-weight: 700; padding: 0 4px 2px; }
.bx-slot { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 10px; border-radius: 14px; background: var(--glass-2); }
.bx-slot.empty { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); color: #6F786F; }
.bx-av { width: 30px; height: 30px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--a-rgb), .16); color: var(--a-hi); font-weight: 800; font-size: 14px; }
.bx-slot.empty .bx-av { background: transparent; color: #6F786F; }
.bx-nick { color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-slot.empty .bx-nick { color: #7C857D; font-weight: 600; }

.bx-skin-visual { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bx-toggle { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(0, 0, 0, .25); }
.bx-toggle span { min-width: 56px; text-align: center; padding: 8px 14px; border-radius: 999px; color: #8F988F; font-weight: 800; font-size: 14px; }
.bx-toggle span.on { background: var(--grad); color: #04170B; }
.bx-rar { display: flex; gap: 8px; }
.bx-rar i { width: 34px; height: 34px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, var(--c), transparent 75%), rgba(255, 255, 255, .04); }

.bx-spark { height: 96px; margin: 0 -6px -6px; }
.bx-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }

.bx-chat { display: flex; flex-direction: column; gap: 8px; }
.bx-msg { max-width: 90%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--glass-3); color: #E7ECE8; font-size: 14px; line-height: 1.35; }
.bx-msg.me { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: rgba(var(--a-rgb), .2); color: #DFFBEA; font-weight: 700; }

.bx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-tag { display: inline-flex; flex-direction: column; min-width: 76px; padding: 10px 14px; border-radius: 18px; background: rgba(0, 0, 0, .22); }
.bx-tag b { color: var(--a-hi); font-weight: 900; font-size: 20px; letter-spacing: -.02em; }
.bx-tag small { color: #8F988F; font-size: 12px; }

.home .hm-modes { margin-top: var(--gap); }
.home .hm-strip { margin-top: var(--gap); }

@media (max-width: 1280px) {
  .bx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-lobby { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 1000px) {
  .hx { grid-template-columns: 1fr; padding: 32px 28px; min-height: 0; }
  .hx-visual { height: 300px; margin: -10px 0 -30px; }
  .hx-stack { width: 320px; height: 200px; }
}
@media (max-width: 560px) {
  .hx { padding: 26px 20px 20px; border-radius: 28px; }
  .hx-lead { font-size: 17px; }
  .hx-stats dd { font-size: 28px; }
  .hx-visual { height: 240px; }
  .hx-stack { width: 250px; height: 156px; }
  .bx { grid-template-columns: 1fr; }
  .bx-lobby, .bx-stats { grid-column: auto; }
  .bx-teams { grid-template-columns: 1fr; }
  .bx-team:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bx-tile { transition: none; } .bx-tile:hover { transform: none; } }

/* =====================================================================
   ВХОД И РЕГИСТРАЦИЯ
   ===================================================================== */
.auth { padding: 18px; gap: 18px; background: transparent !important; }
.auth-side {
  border-radius: 36px !important; padding: 48px !important;
  background: radial-gradient(90% 70% at 20% 0%, rgba(var(--a-rgb), .18), transparent 60%), var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--hl), var(--depth);
}
.auth-side .mr-inner { opacity: .3; }
.auth-side .map-rain { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.lg-title { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 5.6vw, 88px) !important; line-height: .95; letter-spacing: -.055em; text-transform: none !important; color: #fff; }
.lg-title span { display: block; }
.auth-side .lead { font-size: 19px; color: #B4BCB5; }
.checks div { background: rgba(6, 8, 7, .55) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 999px !important; padding: 12px 20px 12px 14px !important; }
.auth-main { padding: 18px 10px; }
.auth-box { border-radius: 36px !important; padding: 40px 38px 34px !important; max-width: 470px; }
.auth-box h2.display { text-transform: none !important; font-size: 34px !important; font-weight: 800; letter-spacing: -.04em !important; }
.auth-box .tabs { padding: 5px; }
.social .btn { border-radius: 999px !important; }
@media (max-width: 720px) {
  .auth { padding: 10px; }
  .auth-side { padding: 28px 22px !important; border-radius: 28px !important; }
  .auth-box { padding: 28px 20px !important; border-radius: 28px !important; }
}

/* сетка разделов без пустот: 4 колонки, 3 ряда */
.bx { grid-auto-flow: row dense; }
.bx-stats, .bx-clans, .bx-fair { grid-column: span 2; }
.bx-fair-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(0, 0, 0, .25); color: #A9B2AA; font-size: 14px; font-weight: 600; }
.bx-pill b { color: #fff; font-weight: 800; }
.bx-clans .bx-tags { align-items: flex-end; }
@media (max-width: 1280px) { .bx-clans, .bx-fair { grid-column: span 1; } }
@media (max-width: 560px) { .bx-stats, .bx-clans, .bx-fair { grid-column: auto; } }

/* личная статистика: последние матчи */
.hm-me-sub { color: #8F988F; font-size: 13px; font-weight: 700; margin: 2px 0 8px; }
.hm-me-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-me-match { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 16px; background: var(--glass-2); }
.hm-me-res { font-weight: 800; font-size: 14px; }
.hm-me-res.w { color: var(--a-hi); }
.hm-me-res.l { color: #FF8A8E; }
.hm-me-map { color: #fff; font-weight: 700; text-transform: capitalize; }
.hm-me-kd { color: #A9B2AA; font-variant-numeric: tabular-nums; font-weight: 700; }

/* названия карт — с заглавной буквы */
#room-title, .rm-hero h1, .hm-match-map, .hx-layer-name { text-transform: capitalize !important; }

/* телефон: стопка карт под цифрами, без наложения */
.hx-text { position: relative; z-index: 1; }
@media (max-width: 1000px) { .hx-visual { margin: 64px 0 -10px; height: 280px; } }
@media (max-width: 560px) { .hx-visual { margin: 76px 0 -16px; height: 230px; } .hx-stats { gap: 12px 28px; } }

/* верхняя панель без «полосы»: прозрачная, кнопки парят отдельными стеклянными пилюлями */
.topbar {
  background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important; padding: 0 !important; min-height: 64px; margin-top: 16px; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar-btn, .topbar-icon, .user-chip, .topbar .btn, .topbar-burger, .topbar-logo {
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--hl), 0 14px 34px -16px rgba(0, 0, 0, .9) !important;
}
.topbar-icon, .user-chip, .topbar .btn-ghost, .topbar-burger { background-color: rgba(24, 29, 26, .72) !important; }
.topbar-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px -14px rgba(var(--a3-rgb), .9) !important; }
.topbar-icon, .user-chip, .topbar-burger { border-radius: 999px !important; }
.user-chip { padding-right: 20px; }
.user-chip .avatar { border-radius: 999px !important; }
@media (max-width: 1100px) {
  .topbar { margin-top: 12px; min-height: 56px; }
  .topbar-logo { padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(24, 29, 26, .72); }
}
@media (max-width: 720px) {
  .topbar-logo { padding: 6px; }
}

/* автозаполнение: никакого второго прямоугольника внутри поля — фон остаётся фоном поля */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-box-shadow: none !important; box-shadow: none !important;
  background-color: transparent !important; background-clip: text !important;
  -webkit-text-fill-color: #fff !important; caret-color: #fff;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}
input:autofill { background: transparent !important; box-shadow: none !important; }
.field input, .field input:focus { background: transparent !important; box-shadow: none !important; }

/* поиск над таблицей — отступ, чтобы блоки не слипались */
.pn-search { margin-bottom: 20px; }
.pn-search + .card, .cl-search + .card, .cl-tools + .card { margin-top: 0; }

/* подвал всегда прижат к низу экрана — без пустоты под ним */
body.shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.shell > main { flex: 1 0 auto; width: 100%; }
body.shell > .site-footer {
  margin: 32px auto var(--gap) !important; width: 100%; max-width: 1320px;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--hl), var(--depth); border-radius: 28px; padding: 22px 28px;
}
body.shell > .site-footer .foot-inner { padding: 0 !important; max-width: none; }

/* =================== WOW-слой =================== */
/* переход между страницами браузерным View Transitions убран: в части браузеров (Edge) он замораживал кадр */

/* живой фон: сияние медленно дышит */
body::before { animation: auroraDrift 26s ease-in-out infinite alternate; transform-origin: 50% 30%; }
@keyframes auroraDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.03); }
}

/* мягкий световой круг за курсором на стеклянных блоках */
.card.spot, .st-tile.spot, .side.spot, .site-footer.spot, .bx > .spot, .rl-item.spot, .sh-card.spot, .cl-card.spot, .auth-side.spot, .auth-box.spot {
  background-image: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--a2-rgb), .085), transparent 45%) !important;
}

/* заголовки страниц: благородный перелив белого в мятный */
.page h1:not(.hx-title):not(.lg-title), .rm-hero h1 {
  background: linear-gradient(180deg, #FFFFFF 20%, var(--a-tint2) 70%, var(--a-tint) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  padding-bottom: .06em;
}
.page h1:not(.hx-title):not(.lg-title)::selection { color: #06120B; }

/* числа в плитках — крупнее и с тем же переливом */
.st-tile-v {
  font-size: clamp(30px, 3vw, 42px) !important; letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff 35%, var(--a-tint) 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.st-tile { transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; will-change: transform; position: relative; overflow: hidden; }
.st-tile.tilting { transition: transform .12s linear, box-shadow .3s; box-shadow: var(--hl), 0 40px 80px -40px rgba(0, 0, 0, .95) !important; }
.st-tile::after {   /* тонкий световой блик по верхнему краю */
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--a2-rgb), .3), transparent); opacity: .7;
}
.pn-tiles { margin: 28px 0 20px; }

/* активный пункт меню — медленный блик */
.side-nav a.active { position: relative; overflow: hidden; }
.side-nav a.active::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%); animation: sheen 5.5s ease-in-out 1.2s infinite;
}
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* главная зелёная кнопка — тот же блик при наведении */
.btn-primary, .topbar-btn { position: relative; overflow: hidden; }
.btn-primary::after, .topbar-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.btn-primary:hover::after, .topbar-btn:hover::after { transform: translateX(120%); }

/* строки таблиц оживают при наведении */
.st-table tbody tr { transition: background-color .2s, transform .25s cubic-bezier(.16, 1, .3, 1); }
.st-table tbody tr:hover { background: rgba(var(--a2-rgb), .045); }

/* полоса прокрутки в тон */
html { scrollbar-color: #24372B transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #1F3026; border-radius: 999px; border: 3px solid #060807; }
::-webkit-scrollbar-thumb:hover { background: #2C4A37; }
::selection { background: rgba(var(--a-rgb), .35); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  body::before, .side-nav a.active::after { animation: none !important; }
}

/* =================== ФИНАЛЬНАЯ ПОЛИРОВКА: ни одной линии, только свет и глубина =================== */
.slot, .slot.empty, .slot.filled, .slot.empty .avatar, .connect-box, .connect-line, .st-empty-plot, .sk-empty,
.mk, .mw-card, .toast, .sk-msg, .user-drop, .log, .chip, .tabs, .field, .input, .code-boxes input, .last10 span,
.wr-list div, .big-avatar, .pill, .tag-demo, .form-alert, .av-menu, .elo-tip, .map-tile, .cta-box, .live-map, .mail-ico,
.rm-connect, .rm-connect *, .sk-seed input, .av-edit { border: 0 !important; }
.big-avatar::before, .auth-side::after, .marquee-item::after { display: none !important; }
.wr-list div { padding-bottom: 10px; }

/* пустые места — мягкая выемка вместо пунктира */
.slot.empty, .st-empty-plot, .sk-empty, .rm-team .slot.empty, .rm-add {
  border: 0 !important; background: rgba(255, 255, 255, .025) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35) !important; color: var(--muted);
}
.rm-team .slot.empty:hover { background: rgba(var(--a2-rgb), .06) !important; color: var(--a-tint2); }
.connect-line { background: rgba(0, 0, 0, .35) !important; box-shadow: inset 0 2px 12px rgba(0, 0, 0, .45) !important; }

/* выбранное — заливка мятным светом, а не рамка */
.rm-team .slot.me, .cl-card.mine, .sk-card.on {
  box-shadow: var(--hl), var(--depth) !important;
  background: linear-gradient(160deg, rgba(var(--a-rgb), .2), rgba(var(--a-rgb), .05) 60%), var(--card-2) !important;
}
.sh-plan.best {
  box-shadow: var(--hl), 0 40px 90px -40px rgba(var(--a3-rgb), .55) !important;
  background: linear-gradient(170deg, rgba(var(--a-rgb), .16), rgba(24, 29, 26, .6) 55%) !important;
}
.sh-perks li::before { box-shadow: none !important; background: var(--grad) !important; border-radius: 999px !important; width: 14px !important; height: 14px !important; }
.big-avatar { box-shadow: var(--hl), 0 24px 60px -24px rgba(var(--a3-rgb), .6) !important; background: linear-gradient(160deg, #1D3A28, #0F1A13) !important; }
.user-chip[aria-expanded="true"] { box-shadow: var(--hl), 0 0 0 4px rgba(var(--a-rgb), .25) !important; }

/* последние 10 матчей — капсулы-заливки */
.last10 .w { background: rgba(var(--a-rgb), .18) !important; }
.last10 .l { background: rgba(255, 107, 107, .14) !important; }

/* скины: благородный тёмный фон, редкость — только точкой */
.sk-card {
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%), rgba(24, 29, 26, .7) !important;
  box-shadow: var(--hl) !important;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .2s, box-shadow .3s !important;
}
.sk-card:hover { transform: translateY(-4px); box-shadow: var(--hl), 0 30px 60px -30px rgba(0, 0, 0, .95) !important; }
.sk-card.on { transform: translateY(-2px); }

/* главная: «Создать лобби» на карточках режимов — только при наведении */
.hm-mode-cta { opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity .3s, transform .45s cubic-bezier(.16, 1, .3, 1) !important; }
.hm-mode:hover .hm-mode-cta, .hm-mode:focus-visible .hm-mode-cta { opacity: 1; transform: none; }
@media (hover: none) { .hm-mode-cta { opacity: 1; transform: none; } }

/* магазин: плашка в тоне сайта */
.sh-note { background: rgba(var(--a-rgb), .08) !important; color: var(--a-tint2) !important; }
.sh-note b { color: #fff !important; }

/* кланы: плитка-приглашение */
.cl-ghost {
  font: inherit; text-align: left; cursor: pointer; justify-content: center;
  background: rgba(255, 255, 255, .025) !important; box-shadow: inset 0 2px 12px rgba(0, 0, 0, .35) !important;
  transition: background-color .25s, transform .45s cubic-bezier(.16, 1, .3, 1) !important;
}
div.cl-ghost { cursor: default; }
button.cl-ghost:hover { background: rgba(var(--a-rgb), .08) !important; transform: translateY(-3px); }
.cl-ghost-ico {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--grad); color: #06120B; font-size: 24px; font-weight: 800; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -12px rgba(var(--a3-rgb), .9);
}
.cl-ghost .cl-card-desc { color: var(--muted); }

/* таблицы: шапка без капса — спокойнее и дороже */
.table th, .st-table th { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--muted) !important; font-weight: 600 !important; }
.table td, .table th { border-bottom-color: rgba(255, 255, 255, .04) !important; }
.rm-status { border: 0 !important; background: rgba(255, 255, 255, .03); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35); }
.match-table tr.win td:first-child, .match-table tr.loss td:first-child { box-shadow: none !important; }
.mp-name, .map-name, .wr-name { text-transform: capitalize; }

/* =================== ШАПКИ СТРАНИЦ С КАРТОЙ =================== */
.pg-hero {
  position: relative; isolation: isolate; overflow: hidden; margin-bottom: 4px;
  min-height: 260px; padding: 44px 40px 36px; border-radius: 32px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--hl), var(--depth);
}
.pg-hero-art { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.pg-hero-art svg {
  position: absolute; right: -8%; top: 50%; width: 70%; height: auto; opacity: .85;
  transform: translateY(-50%) rotate(-6deg); transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.pg-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 13, 11, .96) 0%, rgba(10, 13, 11, .82) 38%, rgba(10, 13, 11, .25) 75%, rgba(10, 13, 11, .1) 100%),
    linear-gradient(0deg, rgba(10, 13, 11, .6), transparent 50%);
}
.pg-hero .st-head { margin: 0 !important; align-items: flex-end; }
.pg-hero h1 { font-size: clamp(44px, 6vw, 84px) !important; line-height: .95; }
.pg-hero .lead { max-width: 560px; color: #C2CCC4 !important; }
.pg-hero .chips .chip:not([aria-pressed="true"]) { background: rgba(10, 13, 11, .55) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pg-hero + * { margin-top: 20px; }
.pg-hero + .st-tiles, .pg-hero + .pn-tiles { margin-top: 20px; }
@media (max-width: 720px) {
  .pg-hero { min-height: 220px; padding: 28px 22px 24px; border-radius: 26px; }
  .pg-hero-art svg { width: 140%; right: -55%; opacity: .45; }
  .pg-hero .st-head { align-items: flex-start; }
}

/* =================== ЖИВОЙ СТАТУС СЕРВЕРА В МЕНЮ =================== */
.side-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 0 0 !important; }
.side-foot .side-social { align-self: flex-start; }
.side-live {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px;
  padding: 18px 18px 16px; border-radius: 22px; color: var(--text) !important; text-decoration: none;
  background: linear-gradient(160deg, rgba(var(--a-rgb), .16), rgba(var(--a-rgb), .03) 65%), rgba(255, 255, 255, .02);
  box-shadow: var(--hl); transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .2s;
}
.side-live::before {   /* медленная волна сонара */
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--a2-rgb), .22), transparent 65%);
  animation: sonar 4s ease-out infinite;
}
@keyframes sonar { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.side-live:hover { transform: translateY(-2px); }
.side-live-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--a-tint2); }
.side-live-num {
  margin-top: 8px; font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff 30%, var(--a-tint)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.side-live-sub { font-size: 14px; color: var(--text-2); font-weight: 600; }
.side-live-row { margin-top: 10px; font-size: 13px; color: var(--muted); }
.side-live-row b { color: #fff; font-weight: 800; }
@media (max-height: 760px) { .side-live-row { display: none; } .side-live-num { font-size: 34px; } }

/* =================== ГЛАВНАЯ: стопка карт поворачивается за мышкой =================== */
.hx-stack {
  transform: translate(-50%, -50%) rotateX(calc(56deg + var(--tx, 0deg))) rotateZ(calc(-36deg + var(--tz, 0deg))) !important;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .side-live::before { animation: none; } }

/* =================== ОДОМЕТР =================== */
.roll { display: inline-flex; align-items: flex-start; line-height: 1 !important; height: 1em; overflow: hidden; vertical-align: top; white-space: nowrap; }
.rd { display: inline-block; height: 1em; overflow: hidden; }
.rd-col { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 70ms); }
.rd-col span, .rs { display: block; height: 1em; line-height: 1; }
.roll.go .rd-col { transform: translateY(calc(var(--d) * -1em)); }
/* у барабана цифры не прозрачные — перелив переносим на сами цифры */
.st-tile-v.roll, .side-live-num.roll { background: none !important; -webkit-text-fill-color: initial; color: #fff !important; }
.st-tile-v.roll .rd-col span, .side-live-num.roll .rd-col span { color: #fff; }

/* =================== СЕТКА ТОЧЕК В ПЕРВОМ ЭКРАНЕ =================== */
.hx-dots { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 100% at 70% 40%, #000 30%, transparent 85%); }

/* =================== IMPECCABLE-ПРОХОД: без цветного свечения, без пружинок, читаемые подсказки =================== */
:root { --ease-spring: cubic-bezier(.16, 1, .3, 1); }
/* зелёные элементы держатся на глубине, а не на цветном ореоле */
.btn-primary, .topbar-btn, .hm-mode-cta, .chip[aria-pressed="true"], .chip[aria-checked="true"], .sk-team button[aria-pressed="true"],
.side-nav a.active, .admin-link[aria-current="page"], .cl-ghost-ico, .av-edit {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px -14px rgba(0, 0, 0, .9) !important;
}
.sh-plan.best, .big-avatar { box-shadow: var(--hl), var(--depth) !important; }
.user-chip[aria-expanded="true"] { box-shadow: var(--hl), 0 0 0 3px rgba(255, 255, 255, .14) !important; }
/* наведение на карточки — подъём, а не рамка */
.hm-mode:hover, .hm-mode:focus-visible, .bx-tile:hover, .bx-tile:focus-visible {
  box-shadow: var(--hl), 0 44px 90px -40px rgba(0, 0, 0, .95) !important; transform: translateY(-5px);
}
.hm-mode:focus-visible, .bx-tile:focus-visible { outline: 3px solid var(--a-hi); outline-offset: 4px; }
/* заставка: без сетки из линий и цветных полос */
.pl-grid { display: none !important; }
.preloader.done .pl-top, .preloader.done .pl-bottom { box-shadow: none !important; border-color: transparent !important; }
/* подсказки в полях читаются (контраст ≥ 4.5:1) */
.field input::placeholder, .input::placeholder, .sk-tools input::placeholder, textarea::placeholder { color: #949D95 !important; }
/* цифры — сплошной белый: перелив оставлен только у заголовков страниц */
.st-tile-v, .side-live-num { background: none !important; -webkit-text-fill-color: initial !important; color: #fff !important; }
/* без цветных ореолов у текста и без бесконечных бликов */
.preloader.complete .pl-word span, .step:hover .step-num, .kda-v.accent, .elo-big { text-shadow: none !important; }
.side-nav a.active::after { display: none !important; }
.map-card .thumb::before { display: none !important; }

/* =================== ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ (без View Transitions, работают в любом браузере) =================== */
/* пока скрипт не дорисовал меню и шапку, браузер держит на экране прошлую страницу — никакого «голого» кадра */
body:not(.ink-ready) { visibility: hidden; animation: inkFailsafe 0s linear 2.5s forwards !important; }
@keyframes inkFailsafe { to { visibility: visible; } }
.preloader { visibility: visible; }
/* меню и верхние кнопки — неподвижная рамка, они не мигают при переходе */
.side, .side-scrim, .topbar { animation: none !important; }
/* уход: контент плавно гаснет и чуть поднимается, рамка остаётся */
body.leaving { animation: none !important; filter: none !important; transform: none !important; opacity: 1 !important; }
body.leaving main, body.leaving .site-footer, body.leaving .auth {
  opacity: 0 !important; transform: translateY(-10px) scale(.995); filter: blur(4px);
  transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1), filter .2s;
}
/* приход: контент проявляется и мягко встаёт на место */
body.ink-ready main, body.ink-ready .site-footer, body.ink-ready .auth { animation: inkIn .6s cubic-bezier(.16, 1, .3, 1) backwards !important; }
body.ink-ready .site-footer { animation-delay: .08s !important; }
@keyframes inkIn { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
/* активный пункт меню «перетекает» на новое место */
.side-nav a.active { animation: navIn .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes navIn { from { background-position: 0 0; opacity: .6; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.ink-ready main, body.ink-ready .site-footer, body.ink-ready .auth, .side-nav a.active { animation: none !important; }
  body.leaving main, body.leaving .site-footer, body.leaving .auth { transition: none; }
}

/* =================== ТЕМЫ ОФОРМЛЕНИЯ =================== */
:root, html[data-theme="green"] {
  --a-rgb: 52, 216, 114; --a2-rgb: 90, 232, 150; --a3-rgb: 34, 179, 92;
  --a-c: #34D872; --a-hi: #5AE896; --a-mid: #2FCB6C; --a-lo: #22B35C;
  --a-tint: #A6EBC4; --a-tint2: #CFF5DE; --a-deep: #1A2C20; --a-line: #1F4D30; --a-ink: #06120B;
  --map-filter: none;
}
html[data-theme="aqua"] {
  --a-rgb: 45, 212, 191; --a2-rgb: 94, 234, 212; --a3-rgb: 20, 168, 152;
  --a-c: #2DD4BF; --a-hi: #5EEAD4; --a-mid: #22C3AE; --a-lo: #14A898;
  --a-tint: #99F0E0; --a-tint2: #CCFBF1; --a-deep: #12302C; --a-line: #1E4F48; --a-ink: #04201C;
  --map-filter: hue-rotate(28deg) saturate(1.1);
}
html[data-theme="blue"] {
  --a-rgb: 76, 141, 255; --a2-rgb: 122, 171, 255; --a3-rgb: 47, 102, 214;
  --a-c: #4C8DFF; --a-hi: #7AABFF; --a-mid: #3B7BF0; --a-lo: #2F66D6;
  --a-tint: #A9C8FF; --a-tint2: #D6E5FF; --a-deep: #172440; --a-line: #24406E; --a-ink: #050B1C;
  --map-filter: hue-rotate(80deg) saturate(1.25);
}
html[data-theme="violet"] {
  --a-rgb: 167, 139, 250; --a2-rgb: 196, 181, 253; --a3-rgb: 124, 92, 230;
  --a-c: #A78BFA; --a-hi: #C4B5FD; --a-mid: #9673F5; --a-lo: #7C5CE6;
  --a-tint: #CDBEFE; --a-tint2: #E7DFFF; --a-deep: #251C40; --a-line: #3B2E6B; --a-ink: #120A26;
  --map-filter: hue-rotate(115deg) saturate(1.1);
}
html[data-theme="pink"] {
  --a-rgb: 244, 114, 182; --a2-rgb: 249, 168, 212; --a3-rgb: 219, 65, 146;
  --a-c: #F472B6; --a-hi: #F9A8D4; --a-mid: #EC5BA6; --a-lo: #DB4192;
  --a-tint: #F9C3E0; --a-tint2: #FDE2F0; --a-deep: #3A1A2C; --a-line: #5E2A47; --a-ink: #22061A;
  --map-filter: hue-rotate(185deg) saturate(1.15);
}
html[data-theme="amber"] {
  --a-rgb: 245, 184, 61; --a2-rgb: 252, 210, 122; --a3-rgb: 217, 142, 18;
  --a-c: #F5B83D; --a-hi: #FCD27A; --a-mid: #EEA626; --a-lo: #D98E12;
  --a-tint: #FBDDA0; --a-tint2: #FEF0CF; --a-deep: #3A2C12; --a-line: #5E4719; --a-ink: #1F1302;
  --map-filter: hue-rotate(-95deg) saturate(1.2);
}
html[data-theme="red"] {
  --a-rgb: 247, 84, 106; --a2-rgb: 251, 135, 151; --a3-rgb: 220, 50, 75;
  --a-c: #F7546A; --a-hi: #FB8797; --a-mid: #EF4159; --a-lo: #DC324B;
  --a-tint: #FCB8C2; --a-tint2: #FEDDE2; --a-deep: #3A161C; --a-line: #5E222C; --a-ink: #22050A;
  --map-filter: hue-rotate(215deg) saturate(1.2);
}
html[data-theme="mono"] {
  --a-rgb: 230, 232, 234; --a2-rgb: 255, 255, 255; --a3-rgb: 185, 190, 196;
  --a-c: #E6E8EA; --a-hi: #FFFFFF; --a-mid: #D4D7DB; --a-lo: #B9BEC4;
  --a-tint: #EEF0F2; --a-tint2: #F6F7F8; --a-deep: #26292C; --a-line: #3A3E42; --a-ink: #0B0C0D;
  --map-filter: grayscale(1) brightness(1.15) contrast(1.05);
}
/* старые имена токенов из style.css / theme.css тоже следуют теме */
html[data-theme] {
  --accent: var(--a-c); --accent-hi: var(--a-hi); --accent-deep: var(--a-lo);
  --accent-soft: rgba(var(--a-rgb), .12); --accent-line: rgba(var(--a-rgb), .38);
  --grad: linear-gradient(180deg, var(--a-hi) 0%, var(--a-mid) 55%, var(--a-lo) 100%);
}
/* текст на заливке акцентом — тёмный из темы */
.btn-primary, .topbar-btn, .hm-mode-cta, .chip[aria-pressed="true"], .chip[aria-checked="true"], .side-nav a.active,
.sk-team button[aria-pressed="true"], .admin-link[aria-current="page"], .bx-toggle span.on, .cl-ghost-ico { color: var(--a-ink) !important; }
.side-nav a.active svg { color: var(--a-ink) !important; }
/* карты на артах окрашиваются под тему */
svg.map-art { filter: var(--map-filter); transition: filter .5s; }
/* плавная смена цвета */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .45s, color .45s, fill .45s, stroke .45s, box-shadow .45s !important; }

/* =================== ПАНЕЛЬ «СТИЛЬ САЙТА» =================== */
.topbar-gear svg { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.topbar-gear:hover svg { transform: rotate(90deg); }
.ink-settings {
  width: min(560px, calc(100vw - 32px)); padding: 28px; border: 0; border-radius: 32px; color: var(--text);
  background: rgba(20, 24, 22, .86); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 50px 120px -30px rgba(0, 0, 0, .95);
}
.ink-settings[open] { animation: insIn .45s cubic-bezier(.16, 1, .3, 1) both; }
.ink-settings::backdrop { background: rgba(3, 5, 4, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: insFade .3s both; }
@keyframes insIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes insFade { from { opacity: 0; } }
.ins-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ins-head h2 { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.03em; color: #fff; }
.ins-head p { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.5; max-width: 380px; }
.ins-close {
  flex: none; width: 44px; height: 44px; border-radius: 999px; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: #fff; transition: background-color .2s;
}
.ins-close:hover { background: rgba(255, 255, 255, .12); }
.ins-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ins-theme {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px 14px; border: 0; border-radius: 22px; cursor: pointer;
  background: rgba(255, 255, 255, .035); color: var(--text-2); font: inherit; font-weight: 700; font-size: 14px;
  transition: background-color .2s, transform .45s cubic-bezier(.16, 1, .3, 1), color .2s;
}
.ins-theme:hover { background: rgba(255, 255, 255, .07); transform: translateY(-3px); color: #fff; }
.ins-theme[aria-checked="true"] { background: rgba(255, 255, 255, .09); color: #fff; }
.ins-sw {
  position: relative; width: 52px; height: 52px; border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), transparent 42%), var(--sw);
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .25), 0 12px 24px -12px rgba(0, 0, 0, .9);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.ins-theme:hover .ins-sw { transform: scale(1.06); }
.ins-sw span {   /* галочка у выбранного */
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.6);
  transition: opacity .25s, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.ins-sw span::after { content: ""; width: 16px; height: 9px; border: solid #0B0C0D; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.ins-theme[aria-checked="true"] .ins-sw span { opacity: 1; transform: none; }
@media (max-width: 520px) {
  .ink-settings { padding: 22px; border-radius: 28px; }
  .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* в меню без одинокой иконки Telegram под карточкой статуса — она есть сверху */
.side-live ~ .side-social { display: none; }

/* =================== ПАНЕЛЬ: выбор вида =================== */
.ins-label { margin: 22px 0 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.ins-label + .ins-grid { margin-top: 0; }
.ins-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ins-style {
  display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 0; border-radius: 22px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .035); color: var(--text-2); font: inherit;
  transition: background-color .2s, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.ins-style:hover { background: rgba(255, 255, 255, .07); transform: translateY(-3px); }
.ins-style[aria-checked="true"] { background: rgba(var(--a-rgb), .14); color: #fff; }
.ins-style-t { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 2px; }
.ins-style .ins-name { font-weight: 800; font-size: 15px; color: #fff; }
.ins-sub { font-size: 13px; line-height: 1.35; color: var(--muted); }
.ins-prev { position: relative; height: 84px; border-radius: 14px; overflow: hidden; display: block; }
.ins-prev-glass { background: radial-gradient(80% 90% at 85% 10%, rgba(var(--a-rgb), .45), transparent 60%), #0E1310; }
.ins-prev-glass i { position: absolute; left: 10px; top: 10px; bottom: 10px; width: 28%; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.ins-prev-glass b { position: absolute; left: 40%; right: 10px; top: 10px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.ins-prev-glass em { position: absolute; left: 40%; bottom: 12px; width: 44px; height: 14px; border-radius: 999px; background: var(--grad); }
.ins-prev-framer { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ins-prev-framer i { position: absolute; left: 12px; top: 14px; width: 62%; height: 9px; border-radius: 3px; background: #fff; }
.ins-prev-framer b { position: absolute; left: 12px; top: 30px; width: 44%; height: 9px; border-radius: 3px; background: #fff; }
.ins-prev-framer em { position: absolute; left: 12px; bottom: 12px; width: 42px; height: 16px; border-radius: 5px; background: #fff; box-shadow: 50px 0 0 #1C1C1C; }

/* =================== ВИД «МИНИМАЛ» (в духе Framer) =================== */
html[data-style="framer"] { --bg: #000; --glass: #0B0B0B; --hl: inset 0 0 0 1px rgba(255, 255, 255, .06); --depth: 0 0 0 transparent; }
html[data-style="framer"] body { background: #000 !important; }
html[data-style="framer"] body::before, html[data-style="framer"] body::after { display: none !important; }
/* панели — плоские, без стекла и размытия */
html[data-style="framer"] :is(.side, .card, .auth-box, .auth-side, .admin-nav, .rm-hero, .cl-hero, .pg-hero, .hx, .site-footer, .side-live, .st-tile, .sk-card, .hm-mode, .bx > *, .rm-bar, .ink-settings) {
  background-color: #0B0B0B !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}
html[data-style="framer"] :is(.card, .pg-hero, .hx, .site-footer, .st-tile, .rm-hero, .bx > *, .hm-mode) { border-radius: 22px !important; }
html[data-style="framer"] .side { border-radius: 22px !important; background: #070707 !important; }
html[data-style="framer"] .side-live { background: #111 !important; }
html[data-style="framer"] .hx { background: #050505 !important; }
html[data-style="framer"] .hx-dots { opacity: .7; }
html[data-style="framer"] .pg-hero::after { background: linear-gradient(90deg, #0B0B0B 0%, rgba(11, 11, 11, .9) 40%, rgba(11, 11, 11, .35) 78%, rgba(11, 11, 11, .2) 100%) !important; }
/* кнопки: белые с чёрным текстом, скругление как у Framer */
html[data-style="framer"] :is(.btn, .topbar-btn, .chip, .sk-tab, .tab, .topbar-icon, .user-chip, .side-social, .hm-mode-cta, .ins-close) { border-radius: 10px !important; }
html[data-style="framer"] :is(.btn-primary, .topbar-btn, .hm-mode-cta, .chip[aria-pressed="true"], .chip[aria-checked="true"], .sk-team button[aria-pressed="true"], .bx-toggle span.on) {
  background: #fff !important; color: #000 !important; box-shadow: none !important;
}
html[data-style="framer"] :is(.btn-primary, .topbar-btn)::after { display: none; }
html[data-style="framer"] :is(.btn-ghost, .topbar-icon, .user-chip, .chip, .side-social) { background: #161616 !important; box-shadow: none !important; }
/* меню: активный пункт — тёмная плашка, цвет только у иконки */
html[data-style="framer"] .side-nav a { border-radius: 10px !important; }
html[data-style="framer"] .side-nav a.active { background: #1A1A1A !important; color: #fff !important; box-shadow: none !important; }
html[data-style="framer"] .side-nav a.active svg { color: var(--a-c) !important; }
/* шрифт: спокойнее и тоньше, заголовки сплошным белым */
html[data-style="framer"] :is(.page h1, .pg-hero h1, .hx-title, .lg-title, .rm-hero h1) {
  font-weight: 600 !important; letter-spacing: -.045em !important; background: none !important; -webkit-text-fill-color: initial !important; color: #fff !important;
}
html[data-style="framer"] .hx-dim { color: #6B6B6B !important; -webkit-text-fill-color: #6B6B6B !important; }
html[data-style="framer"] :is(.st-tile-v, .side-live-num, .hx-stats dd, h2, .st-card-title) { font-weight: 600 !important; }
html[data-style="framer"] .lead, html[data-style="framer"] .pg-hero .lead { color: #9A9A9A !important; }
/* подсветка за курсором — нейтральная */
html[data-style="framer"] .spot { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .045), transparent 45%) !important; }
/* поля */
html[data-style="framer"] :is(.field, .input, .sk-tools input, .sk-tools select) { background: #111 !important; border-radius: 10px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important; }
html[data-style="framer"] .field:focus-within { box-shadow: inset 0 0 0 1px var(--a-c) !important; }
html[data-style="framer"] .ink-settings { background: #0B0B0B !important; }
html[data-style="framer"] .ins-style[aria-checked="true"], html[data-style="framer"] .ins-theme[aria-checked="true"] { background: #1A1A1A; }
html[data-style="framer"] .page h1:not(.hx-title):not(.lg-title), html[data-style="framer"] .rm-hero h1 { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }

/* =================== ПО УМОЛЧАНИЮ: FRAMER (синий акцент, без зелёного) =================== */
:root, html[data-theme="green"] {
  --a-rgb: 52, 216, 114; --a2-rgb: 90, 232, 150; --a3-rgb: 34, 179, 92;
  --a-c: #34D872; --a-hi: #5AE896; --a-mid: #2FCB6C; --a-lo: #22B35C;
  --a-tint: #A6EBC4; --a-tint2: #CFF5DE; --a-deep: #1A2C20; --a-line: #1F4D30; --a-ink: #06120B;
  --map-filter: none;
}
html[data-theme="framer"] {
  --a-rgb: 0, 153, 255; --a2-rgb: 77, 184, 255; --a3-rgb: 0, 119, 217;
  --a-c: #0099FF; --a-hi: #4DB8FF; --a-mid: #0A8CF0; --a-lo: #0077D9;
  --a-tint: #99D6FF; --a-tint2: #D1ECFF; --a-deep: #0B2236; --a-line: #12385A; --a-ink: #00101F;
  --map-filter: grayscale(1) brightness(1.08) contrast(1.05);
}
/* синий Framer на тёмном — светлее для мелкого текста и ссылок */
html[data-theme="framer"] main p a:not([class]) { color: var(--a-hi); }

/* =================== ЧЁТКИЙ ТЕКСТ =================== */
/* вид Framer — шрифт Inter (как у самого Framer), он чётко рисуется на Windows */
html[data-style="framer"] { --display: 'Inter', 'Onest', system-ui, sans-serif; --body: 'Inter', 'Onest', system-ui, sans-serif; }
html[data-style="framer"] body, html[data-style="framer"] :is(button, input, select, textarea) { font-family: var(--body) !important; font-feature-settings: "cv11", "ss01", "ss03"; }
html[data-style="framer"] :is(h1, h2, h3, .hx-title, .lg-title, .st-tile-v, .side-live-num, .hx-stats dd, .side-logo, .ins-head h2) { font-family: var(--display) !important; }
html[data-style="framer"] :is(.page h1, .pg-hero h1, .hx-title, .lg-title, .rm-hero h1) { letter-spacing: -.04em !important; font-weight: 600 !important; }
html[data-style="framer"] :is(.st-tile-v, .side-live-num, .hx-stats dd) { letter-spacing: -.03em !important; }
/* сглаживание и чёткие глифы в любом виде */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* после появления у контента не остаётся ни размытия, ни дробного сдвига — иначе текст «мылится» */
@keyframes inkIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body.ink-ready main, body.ink-ready .site-footer, body.ink-ready .auth { will-change: auto; }
.st-tile, .st-tile:not(.tilting) { will-change: auto !important; }
/* шумовое зерно поверх страницы — только на больших заголовках стеклянного вида оно не нужно: убираем совсем */
body::after { display: none !important; }

/* Framer: меню — белый и серый текст, без цветных ссылок */
html[data-style="framer"] .side-nav a { color: #A1A1A1 !important; }
html[data-style="framer"] .side-nav a:hover { color: #fff !important; background: #121212 !important; }
html[data-style="framer"] .side-nav a.active { color: #fff !important; }
html[data-style="framer"] .side::before, html[data-style="framer"] .side::after { display: none !important; }
html[data-style="framer"] .st-tile::after { display: none; }

/* после анимации у блоков не остаётся transform — текст рисуется обычным способом, с родным сглаживанием Windows */
main, .auth, .admin, .topbar, .site-footer { animation-fill-mode: backwards !important; }
[data-reveal].in, .split-words.in, .split-words.in * { will-change: auto !important; }

/* =================== ЧЁТКИЙ ШРИФТ НА WINDOWS =================== */
html.win { --display: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif; --body: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif; }
html.win body, html.win :is(button, input, select, textarea) { font-family: var(--body) !important; }
html.win :is(h1, h2, h3, .display, .hx-title, .lg-title, .st-tile-v, .side-live-num, .hx-stats dd, .side-logo, .ins-head h2, .hm-mode-name, .rm-hero h1, .pg-hero h1) { font-family: var(--display) !important; }
html.win :is(h1, .hx-title, .lg-title, .pg-hero h1, .rm-hero h1) { font-weight: 700 !important; letter-spacing: -.03em !important; }
html.win[data-style="framer"] :is(h1, .hx-title, .lg-title, .pg-hero h1, .rm-hero h1) { font-weight: 600 !important; }

/* =================== БЛОКИ НЕ ПРОПАДАЮТ ПРИ БЫСТРОЙ ПРОКРУТКЕ =================== */
/* появление при прокрутке выключено: всё видно сразу, анимация только при открытии страницы */
[data-reveal], [data-reveal="left"], [data-reveal="right"], [data-reveal="zoom"] { opacity: 1 !important; transform: none !important; transition: none !important; }
.split-words .w > span { transform: none !important; transition: none !important; }
/* «наклон» карточек держит их на отдельном слое — текст мылится; наклон только при наведении */
.tilt:not(:hover) { transform: none !important; }

/* =================== ЗАМОРОЗКА САЙТА =================== */
.fz-card { position: relative; overflow: hidden; }
.fz-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fz-text { flex: 1 1 420px; min-width: 0; }
.fz-title { font-size: 22px; }
#fz-state { color: var(--muted); }
.fz-card.on #fz-state { color: #8FD3FF; }
.fz-text p { margin-top: 6px; max-width: 640px; }
.fz-field { margin-top: 14px; max-width: 560px; }
.fz-btn { min-width: 220px; min-height: 56px !important; font-size: 16px !important; }
.fz-card.on { background: linear-gradient(135deg, rgba(56, 160, 255, .16), rgba(56, 160, 255, .03) 60%), var(--glass) !important; }
.fz-banner {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(56, 160, 255, .16), rgba(56, 160, 255, .05)); color: #D6ECFF;
}
.fz-banner > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fz-banner b { color: #fff; font-size: 15px; }
.fz-banner span { font-size: 14px; color: #B8D9F5; }
.fz-ico { flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-size: 20px; background: rgba(56, 160, 255, .2); color: #fff; }
html[data-style="framer"] .fz-banner { border-radius: 12px; }

/* =================== ВХОД: ЖИВОЙ ФОН =================== */
.lg-reel { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.lg-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .9s ease, transform 9s linear; }
.lg-reel video.on { opacity: 1; transform: scale(1); }
.auth-side.has-reel .map-rain { display: none; }
/* затемнение, чтобы заголовок читался поверх любого ролика */
.auth-side.has-reel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 35%, rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .85) 100%),
              linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 70%);
}
.auth-side > *:not(.lg-reel):not(.map-rain) { position: relative; z-index: 2; }
.lg-reel-cap {
  position: absolute !important; right: 24px; bottom: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.lg-reel-cap.on { opacity: 1; transform: none; }
/* лента убийств как в CS2 */
.lg-feed { position: absolute !important; top: 28px; right: 28px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.lg-kill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; white-space: nowrap;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff;
  opacity: 0; transform: translateX(24px); transition: opacity .45s, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.lg-kill.in { opacity: 1; transform: none; }
.lg-kill.out { opacity: 0; transform: translateX(10px); }
.lg-kill .ct { color: #8CC8FF; }
.lg-kill .t { color: #F2C66D; }
.lg-kill .gun { color: #C9CDD1; font-weight: 600; }
.lg-kill .hs { padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 11px; }
@media (max-width: 900px) { .lg-feed { display: none; } }
.auth-side > .lg-reel { position: absolute !important; inset: 0 !important; z-index: 0 !important; margin: 0 !important; }
.auth-side.has-reel::before {
  content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .25) 35%, rgba(0, 0, 0, .45) 62%, rgba(0, 0, 0, .9) 100%),
              linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .1) 75%) !important;
  opacity: 1 !important; transform: none !important; border: 0 !important;
}
.auth-side.has-reel .hx-dim { color: rgba(255, 255, 255, .62) !important; -webkit-text-fill-color: rgba(255, 255, 255, .62) !important; }
.auth-side.has-reel .lead { color: rgba(255, 255, 255, .82) !important; }

/* =================== КАРТОЧКИ РЕЖИМОВ С АРТАМИ (сетка 2×2, как на макете) =================== */
.hm-modes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.hm-mode { min-height: 0 !important; aspect-ratio: 732 / 346; }
.hm-mode-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transform: scale(1.001); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter .6s;
}
.hm-mode:hover .hm-mode-art img { transform: scale(1.05); }
/* затемнение снизу под заголовок — сам арт остаётся ярким */
.hm-mode::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .88) 100%) !important; }
.hm-mode-name { font-size: clamp(28px, 2.6vw, 40px) !important; letter-spacing: -.03em; }
html[data-style="framer"] .hm-mode { background-color: #000 !important; }
@media (max-width: 720px) {
  .hm-modes { grid-template-columns: 1fr !important; }
  .hm-mode { aspect-ratio: 16 / 10; }
}

/* =================== ФОТО КАРТ =================== */
.map-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
svg.map-art, .map-photo { pointer-events: none; }
/* шапка комнаты лобби: кадр карты во всю ширину, затемнение слева под название */
.rm-hero-art .map-photo { transform: scale(1.02); }
.rm-hero::after { background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .72) 38%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .1) 100%), linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 55%) !important; }
/* шапки страниц */
.pg-hero-art .map-photo {
  left: 30%; width: 70%; transition: transform .9s cubic-bezier(.16, 1, .3, 1); transform: scale(1.08);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
@media (max-width: 720px) { .pg-hero-art .map-photo { left: 0; width: 100%; opacity: .45; } }
/* 3D-стопка на главной — живые кадры */
.hx-layer .map-photo { filter: saturate(1.05) contrast(1.05); }
.hx-layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55)); pointer-events: none; }
.hx-layer-name { z-index: 2; }
/* последние матчи и выбор карты */
.hm-match-art { position: relative; }
.map-tile .tile-art .map-photo { filter: none; }
.map-tile .tile-art { opacity: .7 !important; }
.map-tile:hover .tile-art, .map-tile[aria-checked="true"] .tile-art { opacity: 1 !important; }
.map-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .05) 65%); pointer-events: none; }

/* =================== ПРОФИЛЬ: меню аватарки не обрезается =================== */
.profile-hero, .profile-hero .container { overflow: visible !important; }
.profile-hero { position: relative; z-index: 6; }
.av-menu { z-index: 60 !important; }

/* =================== ПУСТОЙ ПРОФИЛЬ =================== */
.p-empty { display: flex !important; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px !important; margin-top: var(--gap); }
.p-empty-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(var(--a-rgb), .14); color: var(--a-c); }
.p-empty-ico svg { width: 24px; height: 24px; }
.p-empty h2 { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -.03em; color: #fff; }
.p-empty p { max-width: 560px; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.p-empty-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.p-empty-steps div { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--text-2); font-weight: 600; font-size: 14px; }
.p-empty-steps b { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; font-size: 13px; }
.p-empty-steps .done { color: #fff; }
.p-empty-steps .done b { background: var(--a-c); color: var(--a-ink); }
.p-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* =================== 3D-СТОПКА: ВРАЩЕНИЕ И КОЛОДА =================== */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hx-stack {
  animation: hxSpin 14s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  transform: translate(-50%, -50%) rotateX(calc(56deg + var(--tx, 0deg))) rotateZ(calc(-36deg + var(--tz, 0deg) + var(--spin))) !important;
}
@keyframes hxSpin { from { --spin: -32deg; } to { --spin: 32deg; } }
.hx:hover .hx-stack { animation-play-state: paused; }
.hx-layer {
  animation: none !important;
  transform: translateZ(calc(var(--i) * 70px)) !important;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .7s ease, filter .7s ease;
}
.hx-layer.leave { transform: translateZ(calc(var(--i) * 70px + 190px)) !important; opacity: 0; filter: blur(3px); transition: transform .7s cubic-bezier(.4, 0, 1, 1), opacity .6s ease, filter .6s; }
.hx-layer.enter { transform: translateZ(-90px) !important; opacity: 0; transition: none !important; }
/* нижние карты чуть темнее — глубина */
.hx-layer .map-photo { transition: filter .8s; }
.hx-layer[style*="--i:0"] .map-photo, .hx-layer[style*="--i: 0"] .map-photo { filter: brightness(.7) saturate(.9); }
.hx-layer[style*="--i:1"] .map-photo, .hx-layer[style*="--i: 1"] .map-photo { filter: brightness(.85); }


/* стопка карт крутится всегда, даже если в Windows выключены анимации */
.hx-stack { animation: hxSpin 14s cubic-bezier(.45, 0, .55, 1) infinite alternate !important; }
.hx-layer[data-pos="0"] .map-photo { filter: brightness(.7) saturate(.9); }
.hx-layer[data-pos="1"] .map-photo { filter: brightness(.85); }
.hx-layer[data-pos="2"] .map-photo { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .hx-layer { transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .7s ease, filter .7s ease !important; }
  .hx-layer.leave { transition: transform .7s cubic-bezier(.4, 0, 1, 1), opacity .6s ease, filter .6s !important; }
  .hx-layer.enter { transition: none !important; }
  .hx-stack { transition: transform .9s cubic-bezier(.16, 1, .3, 1) !important; }
}

/* =================== ПРЕМЬЕР: ВЫБОР КАРТ =================== */
.hm-mode-wide { grid-column: 1 / -1; aspect-ratio: 1464 / 420 !important; }
.hm-mode-wide .hm-mode-art img { object-position: center 45%; }
@media (max-width: 720px) { .hm-mode-wide { aspect-ratio: 16 / 10 !important; } }

.veto { margin-top: var(--gap); padding: 28px !important; }
.vt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.vt-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.vt-head h2 { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em; color: #fff; }
.vt-head p { margin-top: 6px; color: var(--text-2); max-width: 680px; line-height: 1.5; }
.vt-step { font-size: 13px; font-weight: 700; color: var(--a-c); margin-bottom: 4px; }
.vt-wait { color: var(--muted); font-weight: 600; align-self: center; }
.vt-timer span { display: inline-grid; place-items: center; min-width: 76px; height: 52px; padding: 0 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); font: 700 22px var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.vt-bar { margin-top: 16px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.vt-bar span { display: block; height: 100%; background: var(--a-c); transform-origin: left; transition: transform .2s linear; }
.vt-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.vt-map {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4; border: 0; border-radius: 16px; padding: 0; cursor: pointer; font: inherit; color: #fff; background: #111;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), filter .4s, box-shadow .2s;
}
.vt-map .map-photo, .vt-map svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .05) 60%); }
.vt-map:not(:disabled):hover { transform: translateY(-4px); }
.vt-map:disabled { cursor: default; }
.vt-name { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; font-weight: 800; font-size: 16px; text-align: left; }
.vt-tag { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, .7); color: #F2A3A3; }
.vt-tag.pick { background: var(--a-c); color: var(--a-ink); }
.vt-votes { position: absolute; right: 10px; top: 10px; z-index: 2; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: #fff; color: #000; font-weight: 800; font-size: 14px; }
.vt-map.banned { filter: grayscale(1) brightness(.4); }
.vt-map.banned .vt-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.vt-map.mine { box-shadow: inset 0 0 0 3px #fff; }
.vt-map.picked { box-shadow: inset 0 0 0 3px var(--a-c); transform: translateY(-4px); }
.vt-sides { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vt-side { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 20px 22px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; color: #fff; text-align: left; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.vt-side b { font-size: 18px; }
.vt-side span { color: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 600; }
.vt-ct { background: linear-gradient(135deg, rgba(76, 141, 255, .35), rgba(76, 141, 255, .1)); }
.vt-t { background: linear-gradient(135deg, rgba(242, 198, 109, .35), rgba(242, 198, 109, .1)); }
.vt-side:not(:disabled):hover { transform: translateY(-3px); }
.vt-side:disabled { cursor: default; opacity: .8; }
.vt-side.mine { box-shadow: inset 0 0 0 3px #fff; }
@media (max-width: 1100px) { .vt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .veto { padding: 20px !important; } }

/* =================== ПРЕМЬЕР: ОКНО ВЫБОРА КАК В CS2 =================== */
.vt-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 32px 24px;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(22px) saturate(120%); backdrop-filter: blur(22px) saturate(120%);
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s;
}
.vt-overlay.open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
body.vt-lock { overflow: hidden; }
.vt-ov-inner { position: relative; width: min(1320px, 100%); max-height: 100%; overflow: auto; text-align: center; transform: translateY(18px) scale(.98); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.vt-overlay.open .vt-ov-inner { transform: none; }
.vt-overlay .vt-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: 12px; }
.vt-overlay .vt-head > div:first-child { flex: none; }
.vt-overlay .vt-head h2 { font-size: clamp(28px, 3.4vw, 46px); }
.vt-overlay .vt-head p { margin: 8px auto 0; }
.vt-overlay .vt-bar { max-width: 520px; margin: 18px auto 0; }
.vt-overlay .vt-sides { max-width: 640px; margin: 22px auto 0; }
.vt-hide { position: absolute; top: 0; right: 0; padding: 10px 16px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.vt-hide:hover { background: rgba(255, 255, 255, .16); }
/* карты веером по дуге */
.vt-arc { margin-top: 40px; display: flex; justify-content: center; align-items: flex-start; gap: 14px; perspective: 1400px; padding: 10px 0 60px; }
.vt-arc .vt-map {
  flex: 0 1 168px; aspect-ratio: 2 / 3;
  transform: translateY(calc(var(--ak) * var(--ak) * 7px)) rotate(calc(var(--k) * 3.5deg));
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .6s, opacity .6s, box-shadow .2s;
}
.vt-arc .vt-map:not(:disabled):hover { transform: translateY(calc(var(--ak) * var(--ak) * 7px - 16px)) rotate(calc(var(--k) * 3.5deg)) scale(1.04); }
.vt-arc .vt-map.mine { box-shadow: inset 0 0 0 3px #fff, 0 30px 60px -25px rgba(0, 0, 0, .9); }
.vt-arc .vt-map.banned { transform: translateY(calc(var(--ak) * var(--ak) * 7px + 34px)) rotate(calc(var(--k) * 3.5deg)) scale(.94); opacity: .55; }
.vt-arc .vt-map.picked { transform: translateY(calc(var(--ak) * var(--ak) * 7px - 26px)) rotate(calc(var(--k) * 3.5deg)) scale(1.1); box-shadow: inset 0 0 0 3px var(--a-c), 0 40px 80px -25px rgba(0, 0, 0, .95); z-index: 2; }
.vt-arc .vt-name { font-size: 17px; }
/* в комнате (вне окна) — обычная сетка */
.veto .vt-arc { margin-top: 18px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0; gap: 10px; }
.veto .vt-arc .vt-map { transform: none; aspect-ratio: 3 / 4; }
@media (max-width: 900px) {
  .vt-overlay { align-items: flex-start; padding: 20px 14px; }
  .vt-arc { flex-wrap: wrap; gap: 10px; padding-bottom: 20px; }
  .vt-arc .vt-map { flex: 0 1 calc(33% - 8px); transform: none !important; }
  .vt-arc .vt-map.banned { opacity: .45; }
  .vt-hide { position: static; margin-bottom: 14px; }
}
/* убранная карта: остаётся на месте, просто серая и не выбирается */
.vt-map.banned, .vt-arc .vt-map.banned { filter: grayscale(1) brightness(.75) !important; opacity: 1 !important; cursor: not-allowed; }
.vt-arc .vt-map.banned { transform: translateY(calc(var(--ak) * var(--ak) * 7px)) rotate(calc(var(--k) * 3.5deg)) !important; }
.vt-map.banned .vt-name { text-decoration: none !important; }
.vt-map.banned .vt-tag { color: #fff; background: rgba(0, 0, 0, .6); }
@media (max-width: 900px) { .vt-arc .vt-map.banned { transform: none !important; } }

/* телефон: без тяжёлого размытия и без анимаций карт — iPhone не тормозит */
@media (max-width: 900px), (pointer: coarse) {
  .vt-overlay { background: #060807 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .vt-ov-inner { transform: none !important; transition: none; }
  .vt-arc .vt-map { transition: filter .3s, box-shadow .2s !important; box-shadow: none; will-change: auto; }
  .vt-arc .vt-map:not(:disabled):hover { transform: none !important; }
}
.vt-map .map-photo { background: #151515; }

/* =================== ПРЕМЬЕР: КТО ЗА ЧТО ГОЛОСУЕТ =================== */
.vt-voters { position: absolute; left: 10px; right: 10px; bottom: 42px; z-index: 3; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.vt-av {
  width: 30px !important; height: 30px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 800;
  box-shadow: 0 0 0 2px #0B0B0B, 0 6px 14px -4px rgba(0, 0, 0, .8); animation: vtAvIn .45s cubic-bezier(.34, 1.4, .64, 1) both;
}
.vt-av img { border-radius: 999px; }
@keyframes vtAvIn { from { transform: scale(.2) translateY(10px); opacity: 0; } }
.vt-side { position: relative; padding-bottom: 54px !important; }
.vt-side .vt-voters { left: 22px; bottom: 14px; right: 22px; }
.vt-timer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vt-timer em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--a-c); }
.vt-timer.lock span { background: rgba(var(--a-rgb), .18); color: #fff; }

/* убранная карта: вспышка, крестик-штамп, потом серая */
.vt-x { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.vt-x::before, .vt-x::after {
  content: ""; position: absolute; left: 50%; top: 42%; width: 58%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .55);
  transform: translate(-50%, -50%) rotate(45deg);
}
.vt-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.vt-map.just-banned { animation: vtBanShake .5s ease both; }
.vt-map.just-banned::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: rgba(229, 72, 77, .55); animation: vtBanFlash 1.2s ease-out forwards;
}
.vt-map.just-banned .vt-x::before, .vt-map.just-banned .vt-x::after { background: #ff5a60; animation: vtStamp .5s cubic-bezier(.34, 1.5, .64, 1) both; }
.vt-map.just-banned .vt-x::after { animation-delay: .08s; }
@keyframes vtBanFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vtStamp { from { width: 0; opacity: 0; } to { width: 58%; opacity: 1; } }
@keyframes vtBanShake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
.vt-map.banned { transition: filter 1.1s ease .5s !important; }
.vt-map.just-picked { animation: vtPick 1.2s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vtPick { 0% { filter: brightness(1); } 30% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
/* эти анимации идут и при выключенных анимациях Windows — они показывают, что произошло */
@media (prefers-reduced-motion: reduce) {
  .vt-map.just-banned { animation: vtBanShake .5s ease both !important; }
  .vt-map.just-banned::before { animation: vtBanFlash 1.2s ease-out forwards !important; }
  .vt-map.just-banned .vt-x::before, .vt-map.just-banned .vt-x::after { animation: vtStamp .5s ease both !important; }
  .vt-av { animation: vtAvIn .3s ease both !important; }
  .vt-map.banned { transition: filter 1.1s ease .5s !important; }
}
@media (max-width: 900px) { .vt-av { width: 24px !important; height: 24px !important; font-size: 11px !important; } .vt-voters { bottom: 38px; } }

/* GSAP-веер: отдельные свойства translate/scale не трогают наклон карты по дуге */
.vt-arc .vt-map { translate: 0 var(--fly, 0px); scale: var(--fs, 1); }

/* самый бледный серый — до нормы читаемости (4.5:1 даже на плашке #161616) */
:root { --dim: #828A83; }

/* доступность и телефоны: мелочи из проверки */
.side-nav a.active .side-badge { color: #fff !important; background: rgba(var(--a-rgb), .22) !important; }
.vt-av { font-size: 12px !important; }
.split, .split-main, .split-side, .admin-main, .admin-main > section { min-width: 0; }
.table-wrap { overflow-x: auto !important; max-width: 100%; }


/* =================== ЗАСТАВКА: ГАЛАКТИКА ЧАСТИЦ =================== */
.preloader .pl-logo, .preloader .pl-grid, .preloader .pl-glow { display: none !important; }
.preloader { background: #030604; }
.plc { position: absolute; inset: 0; z-index: 1; transition: opacity .5s; }
.preloader.done .plc { opacity: 0; }
.preloader .pl-center { position: absolute; inset: 0; z-index: 2; justify-content: center; gap: 0; pointer-events: none; }
.preloader .pl-word { margin-top: 34vh; font-size: clamp(30px, 5.5vw, 72px) !important; letter-spacing: .3em !important; font-weight: 700 !important; padding-left: .3em; color: #EFFFF5 !important; }
.preloader .pl-word span { animation-name: plLetter !important; animation-duration: 1.5s !important; animation-timing-function: cubic-bezier(.16, 1, .3, 1) !important; animation-fill-mode: both !important; transform: translateY(110%); }
.preloader .pl-word span:nth-child(1) { animation-delay: 3.80s !important; }
.preloader .pl-word span:nth-child(2) { animation-delay: 3.96s !important; }
.preloader .pl-word span:nth-child(3) { animation-delay: 4.12s !important; }
.preloader .pl-word span:nth-child(4) { animation-delay: 4.28s !important; }
.preloader .pl-word span:nth-child(5) { animation-delay: 4.44s !important; }
.preloader .pl-word span:nth-child(6) { animation-delay: 4.60s !important; }
.preloader .pl-word span:nth-child(7) { animation-delay: 4.76s !important; }
.preloader .pl-word span:nth-child(8) { animation-delay: 4.92s !important; }
.preloader .pl-word span:nth-child(9) { animation-delay: 5.08s !important; }
.preloader .pl-word span:nth-child(10) { animation-delay: 5.24s !important; }
.preloader .pl-word span:nth-child(11) { animation-delay: 5.40s !important; }
.preloader .pl-word span:nth-child(12) { animation-delay: 5.56s !important; }
.preloader .pl-word span:nth-child(13) { animation-delay: 5.72s !important; }
.preloader .pl-word span:nth-child(14) { animation-delay: 5.88s !important; }
.preloader .pl-progress { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(300px, 70vw); animation: plFadeIn2 .5s .3s forwards !important; }
.preloader.complete .pl-word span { color: #fff !important; text-shadow: 0 0 28px rgba(var(--a-rgb), .6) !important; }

/* ---------- буквы заставки: медленно проявляются из размытия; открытие сайта «окном» ---------- */
@keyframes plLetter {
  0% { transform: translateY(70%) scale(.92); opacity: 0; filter: blur(10px); }
  60% { opacity: 1; filter: blur(1px); }
  100% { transform: none; opacity: 1; filter: none; }
}
.preloader .pl-word { overflow: visible !important; }
.preloader .pl-half { display: none !important; }
.preloader.done .pl-center { opacity: 1 !important; transform: none !important; }
.preloader.done .pl-word { transition: opacity .7s ease, filter .9s ease, letter-spacing 1.2s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1) !important; opacity: 0; filter: blur(8px); letter-spacing: .7em !important; transform: scale(1.15); }
.preloader.done .pl-progress { opacity: 0 !important; transition: opacity .3s !important; }
.preloader.done .plc { opacity: 1 !important; }
.pl-iris { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 3;
  border: 2px solid rgba(var(--a-rgb), .9); box-shadow: 0 0 24px rgba(var(--a-rgb), .55), inset 0 0 24px rgba(var(--a-rgb), .35); width: 0; height: 0; }
@keyframes inkOpen { from { opacity: 0; transform: scale(1.06); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
body.ink-open main, body.ink-open .side-nav, body.ink-open .site-footer, body.ink-open .auth {
  animation: inkOpen 1.3s cubic-bezier(.16, 1, .3, 1) both !important; transform-origin: 50% 40%; }
body.ink-open .side-nav { animation-delay: .15s !important; }

/* админка: разделы не прячутся под краем при прокрутке из меню, короткая подсветка цели */
.admin-main section[id], #fz-card { scroll-margin-top: 24px; }
@keyframes aFlash { 0% { box-shadow: 0 0 0 0 rgba(var(--a-rgb), .55); } 100% { box-shadow: 0 0 0 14px rgba(var(--a-rgb), 0); } }
.a-flash { animation: aFlash 1s ease-out !important; border-radius: 16px; }

/* лента скинов на главной: бесконечно плывёт влево, края растворяются */
.bx-strip { position: relative; overflow: hidden; margin: 0 -26px; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.bx-strip:not(.ready) { margin: 0; -webkit-mask-image: none; mask-image: none; }
.bx-track { display: flex; gap: 10px; width: max-content; animation: bxSlide var(--dur, 60s) linear infinite !important; }
@keyframes bxSlide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
.bx-sk { flex: none; width: 92px; height: 66px; border-radius: 14px; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--c) 38%, transparent), transparent 70%), rgba(255, 255, 255, .035);
  border-bottom: 2px solid var(--c); }
.bx-sk img { width: 84px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
@media (max-width: 700px) { .bx-sk { width: 78px; height: 56px; } .bx-sk img { width: 70px; height: 48px; } .bx-strip { margin: 0 -16px; } }
.bx-strip { align-self: stretch; }

/* плитки Скинченджер и Telegram-бот: зелёная кромка — видно, что на них можно нажать */
.bx-tile.bx-skins { box-shadow: inset 0 0 0 1.5px rgba(var(--a-rgb), .55), 0 0 0 0 rgba(var(--a-rgb), 0) !important; }
.bx-tile.bx-skins, .bx-tile.bx-bot { transition: transform .45s var(--ease), box-shadow .3s !important; }
.bx-tile.bx-skins:hover, .bx-tile.bx-bot:hover,
.bx-tile.bx-skins:focus-visible, .bx-tile.bx-bot:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--a-rgb), .95), 0 10px 36px -10px rgba(var(--a-rgb), .55) !important; }

/* лобби: без зелёной рамки у самой плитки — зелёные только свободные ячейки */
.bx-tile.bx-lobby:hover, .bx-tile.bx-lobby:focus-visible { outline: none !important; }
.bx-lobby .bx-slot.empty { transition: box-shadow .2s, background .2s, color .2s; }
.bx-lobby .bx-slot.empty .bx-av, .bx-lobby .bx-slot.empty .bx-nick { transition: color .2s; }
.bx-lobby .bx-slot.empty:hover { box-shadow: inset 0 0 0 1.5px rgba(var(--a-rgb), .85) !important; background: rgba(var(--a-rgb), .07); }
.bx-lobby .bx-slot.empty:hover .bx-av, .bx-lobby .bx-slot.empty:hover .bx-nick { color: rgba(var(--a-rgb), .95) !important; }
/* кланы: зелёная кромка только у «Создай первый клан» */
.bx-tag.bx-tag-new { transition: box-shadow .25s; }
.bx-tag.bx-tag-new:hover { box-shadow: inset 0 0 0 2px rgba(var(--a-rgb), .95), 0 8px 24px -10px rgba(var(--a-rgb), .6) !important; }

/* главная: кнопка «Создать лобби» — зелёная обводка всегда, ярче при наведении */
html body .hx-actions .btn.hero-cta { outline: 2px solid rgba(var(--a-rgb), 0) !important; outline-offset: 4px !important; transition: outline-color .25s, outline-offset .25s, box-shadow .25s !important; }
html body .hx-actions .btn.hero-cta:hover, html body .hx-actions .btn.hero-cta:focus-visible { outline: 2px solid rgba(var(--a-rgb), 1) !important; outline-offset: 5px !important; box-shadow: 0 10px 34px -8px rgba(var(--a-rgb), .6) !important; }

/* ---------- скины: обе команды, наборы по цвету ---------- */
.sk-both { display: flex; align-items: center; gap: 10px; margin: 12px 4px 4px; font-size: 14px; color: var(--text-2); cursor: pointer; user-select: none; }
.sk-both input { width: 18px; height: 18px; accent-color: var(--a-c); }
.sk-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sk-hint { margin: 8px 0 14px; font-size: 13px; color: var(--muted, #8F988F); line-height: 1.45; }
.sk-hint b { color: var(--a-c); font-family: var(--mono, monospace); }
.sk-sets-panel { padding: 20px 22px; margin-bottom: 16px; }
.sk-sets-sub { margin-top: 4px; font-size: 14px; color: var(--muted, #8F988F); }
.sk-sets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sk-sets-wait { width: 100%; font-size: 13px; color: var(--muted, #8F988F); }
.sk-set { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px 8px 10px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .04); color: var(--text-hi, #fff); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s; }
.sk-set:hover { background: rgba(255, 255, 255, .07); transform: translateY(-1px); }
.sk-set.on { box-shadow: inset 0 0 0 1.5px var(--fc); background: color-mix(in srgb, var(--fc) 12%, transparent); }
.sk-set-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 10px color-mix(in srgb, var(--fc) 60%, transparent); }
.sk-set-n { font-size: 12px; font-weight: 700; color: var(--muted, #8F988F); }
.sk-set-thumbs { display: inline-flex; }
.sk-set-thumbs img { width: 38px; height: 26px; object-fit: contain; margin-left: -6px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
.sk-set-preview { margin-top: 14px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 35%, transparent); }
.sk-set-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.sk-set-bar b { color: var(--text-hi, #fff); }
.sk-set-bar .btn { margin-left: auto; }
.sk-set-knife { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sk-set-knife input { accent-color: var(--a-c); }
.sk-set-row { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 6px; scrollbar-width: thin; }
.sk-set-item { flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; background: rgba(255, 255, 255, .03); border-bottom: 2px solid var(--fc); }
.sk-set-item img { width: 84px; height: 54px; object-fit: contain; }
.sk-set-item small { font-size: 11px; color: var(--muted, #8F988F); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 700px) { .sk-set-bar .btn { margin-left: 0; width: 100%; } .sk-sets-panel { padding: 16px; } }

/* ---------- 152-ФЗ: согласие, уведомление о cookie, ссылки на документы ---------- */
.consent-field { background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; }
.consent-check { display: flex !important; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); cursor: pointer; }
.consent-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--a-c); }
.consent-check a { color: var(--a-c); text-decoration: underline; text-underline-offset: 2px; }
.field.invalid .consent-check { color: #ff8a8a; }
.consent-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); }
.consent-box { width: min(480px, 100%); padding: 26px; border-radius: 22px; background: #111; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.consent-box h2 { font-size: 22px; color: #fff; }
.consent-box p { margin: 10px 0 18px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.consent-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.cookie-note { position: fixed; left: 16px; bottom: 16px; z-index: 1500; width: min(440px, calc(100% - 32px)); display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 16px; background: rgba(17, 17, 17, .96); box-shadow: 0 16px 50px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07); font-size: 13px; line-height: 1.45; color: var(--text-2); }
.cookie-note a { color: var(--a-c); }
.cookie-note .btn { flex: none; }
@media (max-width: 560px) { .cookie-note { flex-direction: column; align-items: stretch; } }
.foot-legal { display: block; margin-top: 6px; font-size: 12px; }
.foot-legal a { color: var(--muted, #8F988F); text-decoration: none; }
.foot-legal a:hover { color: var(--a-c); }
/* страницы документов */
.legal { max-width: 860px; margin: 0 auto; padding: 32px 16px 64px; color: var(--text-2); line-height: 1.65; font-size: 15px; }
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.legal-top a { color: var(--text-hi, #fff); text-decoration: none; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; }
.legal h1 { font-size: clamp(28px, 4vw, 40px); color: #fff; line-height: 1.15; }
.legal .meta { margin: 10px 0 26px; font-size: 13px; color: var(--muted, #8F988F); }
.legal h2 { margin: 30px 0 10px; font-size: 20px; color: #fff; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--a-c); }
.legal .box { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.legal th { color: #fff; font-weight: 700; }
.legal [data-legal]:empty::before { content: "не указано"; color: #ff8a8a; }

/* админка: смена ника и метка «мат» */
.a-nick-edit{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:6px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--dim);font-size:13px;line-height:1;cursor:pointer;vertical-align:middle;transition:color .2s,background .2s}
.a-nick-edit:hover,.a-nick-edit:focus-visible{color:var(--green,#34D872);background:rgba(52,216,114,.12)}
.a-flag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:rgba(235,75,75,.16);color:#ff7a7a;font-size:11px;font-weight:700;line-height:18px;vertical-align:middle;white-space:nowrap}