/* Nexus Activity — тот же язык, что у карточек бота: тёмный фон, градиент фиолетовый → синий, Exo 2 + Inter. */
@font-face { font-family: "Exo 2"; font-weight: 600; font-display: swap; src: url("assets/fonts/Exo2_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Exo 2"; font-weight: 700; font-display: swap; src: url("assets/fonts/Exo2_700Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("assets/fonts/Inter_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("assets/fonts/Inter_600SemiBold.ttf") format("truetype"); }

:root {
  --bg: #09090f; --panel: #141420; --panel-2: #1a1a2a; --line: #343454;
  --text: #eaedff; --muted: #8b8fa8; --purple: #8b5cf6; --blue: #2f6bff;
  --green: #3cd678; --amber: #f5a623; --red: #f0556a;
  --grad: linear-gradient(100deg, var(--purple), var(--blue));
  --title: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--body);
  display: flex; flex-direction: column; overflow: hidden;
  background-image: radial-gradient(600px 400px at 12% -10%, rgba(139, 92, 246, .22), transparent 70%),
                    radial-gradient(600px 420px at 95% 0%, rgba(47, 107, 255, .16), transparent 70%);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
       padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid #222236; flex: none; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 18px var(--title); letter-spacing: .18em; }
.brand img { border-radius: 50%; }
.tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid #222236; border-radius: 999px; padding: 4px; }
.tab { border: 0; background: none; padding: 7px 16px; border-radius: 999px; color: var(--muted); font-weight: 600; }
.tab[aria-selected="true"] { background: var(--grad); color: #fff; }

main { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.wrap { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 14px; }

.state { margin: auto; text-align: center; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.state h2 { font: 700 22px var(--title); margin: 0; }
.state p { margin: 0; color: var(--muted); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--purple); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── карточка кандидата ── */
.deck { position: relative; width: 100%; max-width: 560px; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.card { position: relative; flex: 1; min-height: 0; overflow-y: auto; background: var(--panel); border-radius: var(--radius); padding: 20px;
        border: 1px solid transparent; background-image: linear-gradient(var(--panel), var(--panel)), var(--grad);
        background-origin: border-box; background-clip: padding-box, border-box;
        touch-action: pan-y; user-select: none; will-change: transform; }
.card.drag { transition: none; cursor: grabbing; }
.card.settle { transition: transform .25s ease, opacity .25s ease; }
.stamp { position: absolute; top: 18px; padding: 4px 12px; border-radius: 8px; font: 700 15px var(--title); letter-spacing: .08em;
         opacity: 0; pointer-events: none; border: 2px solid; }
.stamp.like { left: 18px; color: var(--green); transform: rotate(-8deg); }
.stamp.skip { right: 18px; color: var(--muted); transform: rotate(8deg); }
.head { display: flex; align-items: center; gap: 14px; }
.mono { width: 68px; height: 68px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 30px var(--title); color: #fff;
        box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px rgba(139, 92, 246, .55); }
.who { min-width: 0; flex: 1; }
.who h2 { margin: 0; font: 700 22px/1.2 var(--title); overflow-wrap: anywhere; }
.who .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ring { --pct: 0; width: 66px; height: 66px; border-radius: 50%; flex: none; display: grid; place-items: center;
        background: conic-gradient(var(--ring, var(--purple)) calc(var(--pct) * 1%), #262640 0); }
.ring b { width: 54px; height: 54px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font: 700 17px var(--title); }
.block { margin-top: 16px; }
.label { font: 600 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.about { margin: 0; padding: 10px 12px; background: var(--panel-2); border-left: 3px solid var(--purple); border-radius: 0 10px 10px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 11px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
.chip.hit { border-color: transparent; background: var(--grad); color: #fff; font-weight: 600; }
.chip.soft { color: var(--muted); }
.line { color: var(--text); }
.line small, .hint { color: var(--muted); font-size: 12px; }
.reasons { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.acc { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acc code { background: var(--panel-2); padding: 2px 8px; border-radius: 6px; user-select: all; font: 400 13px ui-monospace, Consolas, monospace; }
.link { background: none; border: 0; padding: 0; color: #9db8ff; text-decoration: underline; }

.actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; flex: none; }
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 13px 16px; font-weight: 600; min-height: 48px; }
.btn:hover { border-color: #4a4a78; }
.btn.primary { border: 0; background: var(--grad); color: #fff; }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); padding: 6px 10px; min-height: 0; font-weight: 400; font-size: 13px; }
.btn.danger { color: var(--red); }
.btn:disabled { opacity: .5; cursor: default; }
.under { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; flex: none; }

/* ── профиль ── */
.section { background: var(--panel); border: 1px solid #222236; border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.section h3 { margin: 0; font: 700 16px var(--title); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
textarea.input { resize: vertical; min-height: 76px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; min-width: 0; }
.row > .fit { flex: none; }
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick button { padding: 6px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
.pick button[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #fff; font-weight: 600; }
.bar { height: 8px; border-radius: 999px; background: #262640; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.err { color: var(--red); font-size: 13px; }
.note { color: var(--muted); font-size: 12px; }
.banner { padding: 10px 12px; border-radius: 12px; background: rgba(245, 166, 35, .12); border: 1px solid rgba(245, 166, 35, .4); font-size: 13px; }
.savebar { position: sticky; bottom: -16px; margin: 0 -16px -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom));
           background: linear-gradient(transparent, var(--bg) 35%); display: flex; gap: 10px; }
.savebar .btn { flex: 1; }

/* ── выбор игры и уведомления ── */
.sheet { position: fixed; inset: 0; background: rgba(4, 4, 10, .7); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.sheet .box { width: 100%; max-width: 560px; max-height: 80%; overflow-y: auto; background: var(--panel); border-radius: 22px 22px 0 0;
              border: 1px solid var(--line); border-bottom: 0; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.sheet h3 { margin: 0; font: 700 18px var(--title); }
.opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left;
       background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.opt small { color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: min(92vw, 520px); z-index: 20;
         background: #20203a; border: 1px solid var(--line); border-radius: 14px; padding: 11px 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.toast.ok { border-color: rgba(60, 214, 120, .6); }
.toast.warn { border-color: rgba(245, 166, 35, .6); }

@media (min-width: 720px) { main { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .card.settle { transition: none; } .spinner { animation-duration: 2s; } }

/* ── панель поиска, фильтры, список ── */
.searchwrap { width: 100%; max-width: 560px; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.searchwrap.wide { max-width: 720px; }
.searchwrap > .state { flex: 1; justify-content: center; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex: none; }
.seg { display: flex; gap: 4px; background: var(--panel); border: 1px solid #222236; border-radius: 12px; padding: 4px; }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.small { padding: 8px 14px; min-height: 0; border-radius: 12px; font-size: 14px; }
.btn.small.on { border-color: var(--purple); color: #cdbbff; }
.check { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--purple); }
.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--panel); border: 1px solid #222236;
        border-radius: 14px; padding: 10px 14px; }
.item:hover { border-color: var(--line); }
.item .mono { width: 44px; height: 44px; font-size: 20px; box-shadow: none; }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-main b { font: 600 16px var(--body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-main .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c3c7de; font-size: 13px; }
.badge { align-self: flex-start; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: #c3c7de; }
.score { font: 700 17px var(--title); color: var(--text); flex: none; }

/* ── телефон: вкладки внизу, под большой палец; в Discord верх окна закрыт его панелью ── */
@media (max-width: 640px) {
  body { flex-direction: column-reverse; }
  .top { border-bottom: 0; border-top: 1px solid #222236; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: rgba(9, 9, 15, .92); }
  .brand { display: none; }
  .tabs { flex: 1; }
  .tab { flex: 1; padding: 11px 16px; }
  .toast { bottom: 84px; }
  .sheet { z-index: 30; }
}
body.dm main { padding-top: 64px; }
.actions .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
img.mono { object-fit: cover; padding: 0; display: block; background: var(--panel-2); }

/* ── игровые аккаунты и настройки ── */
.account { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #222236; border-radius: 12px; background: rgba(26, 26, 42, .45); }
.account-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.account .badge.on { border-color: rgba(60, 214, 120, .5); color: #9be8ba; }
.inline { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.inline > span { flex: none; }
.inline > select { flex: 1; min-width: 0; padding: 8px 10px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid #222236; cursor: pointer; }
.section h3 + .setting { border-top: 0; padding-top: 0; }
.setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting-text b { font-weight: 600; }
.setting input { width: 20px; height: 20px; flex: none; accent-color: var(--purple); }
.tabs .tab { white-space: nowrap; }
@media (max-width: 640px) { .tab { padding-left: 8px; padding-right: 8px; } }

/* ── подсказки при вводе игры ── */
.combo { position: relative; flex: 1; min-width: 0; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 15; max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
           background: #1c1c30; border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
.suggest-item { padding: 9px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-item:hover, .suggest-item.on { background: rgba(139, 92, 246, .22); }
.sheet .box { overflow-x: hidden; }
@media (max-width: 640px) { .seg button { padding-left: 10px; padding-right: 10px; } }

/* ── единая сетка поиска: панель режимов стоит на одном месте во всех трёх режимах ── */
.searchwrap, .searchwrap.wide { max-width: 720px; }
.searchwrap > .deck { align-self: center; }
main { scrollbar-gutter: stable both-edges; }

/* кнопка рядом с полем ввода — той же высоты и с тем же скруглением, что и поле */
.row:has(.input) > .btn.fit { min-height: 0; padding-top: 0; padding-bottom: 0; border-radius: 10px; }

/* ── раскрывающийся блок «Скрытые игроки» ── */
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold-arrow { color: var(--muted); transition: transform .15s ease; }
.fold[open] .fold-arrow { transform: rotate(180deg); }
.blocked-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.blocked-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #222236; border-radius: 12px; background: rgba(26, 26, 42, .45); }
.blocked-row .mono { width: 38px; height: 38px; font-size: 17px; box-shadow: none; }
.blocked-row .btn { flex: none; }

/* четыре режима поиска: на узком экране панель прокручивается вбок, а не ломает строку */
.toolbar { flex-wrap: wrap; }
.toolbar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.toolbar .seg::-webkit-scrollbar { display: none; }
.toolbar .seg button { white-space: nowrap; flex: none; }

/* ── удаление профиля ── */
.danger-zone { border-color: rgba(240, 85, 106, .35); }
.danger-zone .btn { align-self: flex-start; border-color: rgba(240, 85, 106, .5); }
.btn.danger.solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger.solid:disabled { background: #3a2530; border-color: #3a2530; color: #9a7a84; opacity: 1; }

/* ── матчи и предпросмотр ── */
.tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff5ca8; color: #fff; font: 600 11px/18px var(--body); }
.wrap.wide { max-width: 720px; }
.chev { color: var(--muted); font-size: 22px; flex: none; }
.match-links { display: flex; flex-wrap: wrap; gap: 8px; }
.match-links:empty { display: none; }
.under > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.card.static { flex: none; overflow: visible; touch-action: auto; user-select: text; }
.preview-box { max-height: 92%; }
@media (max-width: 640px) { .tab { padding-left: 4px; padding-right: 4px; font-size: 14px; } }

.reasons.why { text-align: left; align-self: stretch; margin: 4px 0; }

/* телефон: панель режимов на всю ширину с равными кнопками, «Фильтры» — полосой под ней */
@media (max-width: 640px) {
  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar .seg { width: 100%; }
  .toolbar .seg button { flex: 1 1 0; min-width: 0; padding: 9px 2px; text-align: center; font-size: 13.5px; }
  .toolbar > .btn.small { width: 100%; }
  .searchwrap > .seg { width: 100%; }
  .searchwrap > .seg button { flex: 1 1 0; min-width: 0; text-align: center; }
}

/* ── значки ── */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: .45em; flex: none; fill: none; stroke: currentColor;
       stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab .ico { margin-right: 0; width: 18px; height: 18px; }
.chip .ico, .badge .ico { width: 1.05em; height: 1.05em; margin-right: .35em; }
@media (max-width: 640px) {
  .tab { flex-direction: column; gap: 3px; font-size: 12px; padding-top: 8px; padding-bottom: 8px; border-radius: 16px; }
  .tab .ico { width: 21px; height: 21px; }
  .tab-badge { position: absolute; margin: -6px 0 0 26px; }
}

/* ── скругления: разные по смыслу, а не «пилюля» на всём (как в макете «Постер») ── */
:root { --radius: 22px; }
.card { border-radius: 28px; }
.section { border-radius: 22px; }
.sheet .box { border-radius: 28px 28px 0 0; }
.btn { border-radius: 16px; }
.btn.small { border-radius: 14px; }
.btn.ghost { border-radius: 12px; }
.input, select.input, textarea.input, .row:has(.input) > .btn.fit { border-radius: 14px; }
.tabs { border-radius: 20px; }
.tab { border-radius: 15px; }
.seg { border-radius: 16px; }
.seg button { border-radius: 12px; }
.chip, .pick button { border-radius: 12px; }
.badge { border-radius: 9px; }
.item { border-radius: 20px; }
.account, .blocked-row { border-radius: 16px; }
.opt, .banner, .suggest { border-radius: 14px; }
.suggest-item { border-radius: 10px; }
.toast { border-radius: 16px; }
.about { border-radius: 0 14px 14px 0; }

/* ── полосы прокрутки: тонкие и в цвет интерфейса вместо системных со стрелками ── */
/* стандартные свойства — только там, где нет ::-webkit-scrollbar: в Chromium (а значит и в Discord) они отключили бы оформление ниже */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #3a3a5c transparent; } }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a5c; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #55558a; background-clip: padding-box; }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; width: 0; height: 0; }
/* у карточки полоса не должна упираться в скруглённые углы */
.card::-webkit-scrollbar-track { margin: 22px 0; }

/* ── всплывающее окно: на телефоне выезжает снизу, на широком экране стоит по центру и целиком помещается ── */
.sheet .box { max-height: calc(100% - 24px); }
@media (min-width: 641px) {
  .sheet { align-items: center; padding: 24px; }
  .sheet .box { border-radius: 28px; border-bottom: 1px solid var(--line); max-height: 100%; padding-bottom: 18px; }
}
@media (max-height: 640px) {
  .sheet .box { gap: 8px; padding-top: 14px; }
  .sheet .box .field { gap: 4px; }
  .sheet .box .input { padding-top: 8px; padding-bottom: 8px; }
}

/* ── кнопка «Сохранить»: прилипает к самому низу, под ней ничего не просвечивает при любых отступах страницы ── */
main { --pad: 16px; }
@media (min-width: 720px) { main { --pad: 24px; } }
.savebar { bottom: calc(-1 * var(--pad)); margin: 0 0 calc(-1 * var(--pad)); padding: 16px 0 max(var(--pad), env(safe-area-inset-bottom));
           background: linear-gradient(to bottom, transparent, var(--bg) 16px); }
body.dm .savebar, .savebar { z-index: 5; }

/* ── статистика ── */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--panel); border: 1px solid #222236; border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.section .tile { background: var(--panel-2); border-radius: 16px; }
.tile-label { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile b { font: 700 26px/1.15 var(--title); overflow-wrap: anywhere; }
.rank { display: flex; flex-direction: column; gap: 12px; }
.rank-row, .goal { display: flex; flex-direction: column; gap: 6px; }
.rank-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rank-head b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-head .hint { flex: none; }
.goal + .goal { border-top: 1px solid #222236; padding-top: 12px; }
.goal.done b { color: #9be8ba; }
@media (max-width: 640px) {
  /* пять вкладок: подписи чуть мельче, чтобы «Статистика» и «Настройки» помещались */
  .top { padding-left: 6px; padding-right: 6px; }
  .tab { font-size: 11px; padding-left: 2px; padding-right: 2px; }
  .tile { padding: 12px 10px; }
  .tile b { font-size: 21px; }
  .tile-label { font-size: 12px; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .brand span { display: none; }
  .tab { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 640px) { .tile b { font-size: 19px; } }
@media (max-width: 380px) { .tab { font-size: 10.5px; letter-spacing: -.01em; } }
/* штампы свайпа — поверх аватара и кольца совместимости, с плотной подложкой, чтобы под ними ничего не просвечивало */
.stamp { z-index: 3; background: var(--panel); }
/* ── подсветка краёв при свайпе ── */
.glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; --like: 0; --skip: 0; }
.glow::before, .glow::after { content: ""; position: absolute; top: 0; bottom: 0; width: min(46vw, 520px); transition: opacity .3s ease; }
.glow.live::before, .glow.live::after { transition: none; }
.glow::before { left: 0; opacity: var(--skip); background: radial-gradient(120% 70% at 0% 50%, rgba(150, 156, 190, .5), transparent 72%); }
.glow::after { right: 0; opacity: var(--like); background: radial-gradient(120% 70% at 100% 50%, rgba(60, 214, 120, .55), transparent 72%); }

/* ══ движение ══
   Только transform и opacity — их рисует видеокарта, страница не пересчитывается. Всё, кроме фона, — отклик на действие. */

/* фон: два пятна света медленно дрейфуют; сами градиенты не перерисовываются, двигается готовый слой */
body { background-image: none; }
body::before, body::after { content: ""; position: fixed; z-index: -2; pointer-events: none; width: 78vmax; height: 78vmax; border-radius: 50%; will-change: transform; }
body::before { left: -30vmax; top: -42vmax; background: radial-gradient(closest-side, rgba(139, 92, 246, .3), transparent);
               animation: drift-a 38s ease-in-out infinite alternate; }
body::after { right: -34vmax; top: -40vmax; background: radial-gradient(closest-side, rgba(47, 107, 255, .24), transparent);
              animation: drift-b 47s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(22vmax, 16vmax, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-20vmax, 24vmax, 0) scale(.86); } }

/* нажатие: кнопка на миг светлеет (основная — темнеет). Без масштаба: от него текст в конце перерисовывался и прыгал на пиксель */
.btn, .tab, .item, .opt, .pick button, .seg button, .suggest-item { transition: box-shadow .14s ease, border-color .15s ease, color .15s ease; }
.btn:not(:disabled):active, .tab:active, .item:active, .opt:active, .pick button:active, .seg button:active { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .07); }
.btn.primary:not(:disabled):active, .tab[aria-selected="true"]:active, .pick button[aria-pressed="true"]:active { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .16); }

/* смена вкладки или режима: содержимое проявляется, первые строки списка и плитки подъезжают по очереди.
   Сдвигается только один уровень (строки, а не весь экран вместе с ними), замедление длинное и мягкое, после конца
   анимация ничего не удерживает (backwards, а не both) — иначе в конце был заметный рывок. */
@keyframes view-in { from { opacity: 0; } }
main.enter > .wrap, main.enter > .state, main.enter > .searchwrap > :not(.toolbar):not(.seg) { animation: view-in .22s ease-out backwards; }
@keyframes item-in { from { opacity: 0; transform: translateY(8px); } }
main.enter .list > .item:nth-child(-n+8), main.enter .tiles > .tile { animation: item-in .45s cubic-bezier(.22, 1, .36, 1) backwards; }
main.enter .list > .item:nth-child(2), main.enter .tiles > .tile:nth-child(2) { animation-delay: .035s; }
main.enter .list > .item:nth-child(3), main.enter .tiles > .tile:nth-child(3) { animation-delay: .07s; }
main.enter .list > .item:nth-child(4) { animation-delay: .105s; }
main.enter .list > .item:nth-child(5) { animation-delay: .14s; }
main.enter .list > .item:nth-child(6) { animation-delay: .175s; }
main.enter .list > .item:nth-child(7) { animation-delay: .21s; }
main.enter .list > .item:nth-child(8) { animation-delay: .245s; }

/* выбранная вкладка: значок слегка подпрыгивает (это картинка, не текст — ей масштаб не вредит) */
@keyframes ico-pop { 40% { transform: translateY(-1.5px) scale(1.08); } }
.tab[aria-selected="true"] .ico { animation: ico-pop .36s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.tab-badge { animation: fade-in .3s ease-out; }

/* новая карточка подъезжает, кольцо совместимости заполняется, полоски вырастают */
@keyframes deal { from { opacity: 0; transform: translateY(12px); } }
.card.deal { animation: deal .42s cubic-bezier(.22, 1, .36, 1); }
@property --pct { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes ring-fill { from { --pct: 0; } }
.ring { animation: ring-fill .8s cubic-bezier(.22, 1, .36, 1); }
@keyframes bar-grow { from { transform: scaleX(0); } }
.bar i { transform-origin: left center; animation: bar-grow .7s cubic-bezier(.22, 1, .36, 1) backwards; }

/* окно выезжает, затемнение проявляется, уведомление всплывает */
@keyframes sheet-in { from { opacity: 0; transform: translateY(20px); } }
.sheet { animation: fade-in .18s ease-out; }
.sheet .box { animation: sheet-in .4s cubic-bezier(.22, 1, .36, 1); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.toast { animation: toast-in .36s cubic-bezier(.22, 1, .36, 1); }
.stamp { transition: opacity .1s linear; }

/* кнопка «Фильтры» проявляется и гаснет при смене режима */
.btn.filters.gone { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes filters-in { from { opacity: 0; } }
@keyframes filters-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }

@media (max-width: 640px) {
  /* на телефоне кнопка занимает отдельную строку под режимами — вместе с прозрачностью схлопывается и её место */
  .toolbar > .btn.filters { height: 39px; overflow: hidden; }
  .toolbar > .btn.filters.gone { height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-top: -8px; }
  @keyframes filters-in { from { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-top: -8px; } }
  @keyframes filters-out { from { opacity: 1; visibility: visible; height: 39px; padding-top: 8px; padding-bottom: 8px; border-width: 1px; margin-top: 0; }
                           to { opacity: 0; visibility: hidden; height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-top: -8px; } }
}

/* кнопка с двумя подписями: одна плавно сменяет другую */
.btn.swap { display: grid; place-items: center; }
.btn.swap > span { grid-area: 1 / 1; transition: opacity .2s ease; }
.btn.swap > span:last-child, .btn.swap.alt > span:first-child { opacity: 0; }
.btn.swap.alt > span:last-child { opacity: 1; }

/* кому движение мешает (настройка системы) — всё выключено, фон стоит */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .spinner { animation: spin 2s linear infinite !important; }
}
/* карточка, утянутая вправо, выходит за край области прокрутки — без этого появлялась горизонтальная полоса */
main { overflow-x: hidden; }

/* нижняя строка с мелкими кнопками: если не помещаются в ряд — переносятся, а не сжимаются */
.under { flex-wrap: wrap; gap: 2px 8px; }
.under .btn.ghost { white-space: nowrap; }
.under > span { flex-wrap: nowrap; }
@media (max-width: 640px) { .under .btn.ghost { padding-left: 6px; padding-right: 6px; } .under .btn.ghost .ico { margin-right: .3em; } }

/* логотип — кнопка на сервер Nexus: рамка как у обычной кнопки, но подложка почти прозрачная, чтобы не спорить с вкладками */
.brand.hub { cursor: pointer; padding: 5px 14px 5px 6px; border-radius: 16px; border: 1px solid rgba(52, 52, 84, .7);
             background: rgba(20, 20, 32, .35); transition: background-color .15s ease, border-color .15s ease, box-shadow .14s ease; }
.brand.hub:hover { background: rgba(20, 20, 32, .7); border-color: #4a4a78; }
.brand.hub:active { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .07); }
@media (min-width: 641px) and (max-width: 860px) { .brand.hub { padding-right: 6px; } }

/* уведомление, по которому можно перейти */
.toast.action { cursor: pointer; border-color: var(--purple); padding-right: 34px; }
.toast.action::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 20px; line-height: 1; }

/* ── статистика серверов ── */
.server-head { display: flex; align-items: center; gap: 12px; }
.server-head .mono { width: 44px; height: 44px; font-size: 20px; box-shadow: none; border-radius: 14px; }
.server-head .badge { align-self: center; }
.wrap > .seg { align-self: flex-start; }
main.enter > .wrap > .seg { animation: none; }
main.enter > .wrap > :not(.seg) { animation: view-in .22s ease-out backwards; }
main.enter > .wrap { animation: none; }

/* ── фон: поле точек (canvas) вместо двух плавающих пятен ── */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; opacity: .62; }
body::before, body::after { animation: none; z-index: -3; }      /* пятна остаются неподвижной подсветкой под точками */
body::before { opacity: .75; }
body::after { opacity: .7; }

/* ── пустые экраны: волна из точек выходит вперёд, текст стоит на мягком затемнении и крупнее ── */
.backdrop { transition: opacity .7s ease; }
body.is-empty .backdrop { opacity: 1; }
.state { position: relative; padding: 34px 26px; }
.state::before { content: ""; position: absolute; inset: -40px -70px; z-index: -1; pointer-events: none;
                 background: radial-gradient(closest-side, rgba(9, 9, 15, .88), rgba(9, 9, 15, .55) 62%, transparent); }
.state h2 { font-size: 26px; }
.state p { font-size: 15px; color: #b4b8d2; }

/* пара кнопок под карточкой: колонки могут сжиматься, а слишком длинная подпись обрезается, а не вылезает за экран */
.actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.actions .btn { overflow: hidden; text-overflow: ellipsis; }

/* активный матч на телефоне: мелкие действия — по центру, «Закрыть матч» — отдельной строкой под ними, тоже по центру */
@media (max-width: 640px) {
  .under.stack { flex-direction: column; align-items: center; gap: 6px; }
  .under.stack > span { justify-content: center; flex-wrap: wrap; }
}