/* Ladder. Минимализм: спокойный тёмный (или светлый) фон, золото — для «тебя» и главных кнопок,
   синие против красных. На компьютере меню слева, на телефоне — круглые кнопки сверху. */
:root {
  --bg: #121519; --side: #0f1215; --surface: #191d22; --surface-2: #20252c; --line: #272d35;
  --fg: #edeff1; --muted: #8a939d;
  --gold: #e9b44c; --gold-ink: #1b1406;
  --blue: #5590ff; --red: #f25b62; --ok: #41c98b; --orange: #ff8a3d;
  --f-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: var(--f-body);
  --side-w: 228px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f7; --side: #ffffff; --surface: #ffffff; --surface-2: #eef0f3; --line: #e1e4e8;
    --fg: #14171b; --muted: #69727d; --gold: #c18815; --gold-ink: #ffffff;
    --blue: #2463e6; --red: #d83a43; --ok: #11905a; --orange: #c25510;
    color-scheme: light;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg); color: var(--fg); margin: 0; }
body { font: 450 15px/1.5 var(--f-body); font-variant-numeric: tabular-nums; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
p { margin: 0; }

/* ---------- каркас: шапка / боковое меню ---------- */
.side { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand me" "nav nav"; align-items: center; column-gap: 12px;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); margin-top: env(safe-area-inset-top, 0px); }
.brand { grid-area: brand; display: flex; flex-direction: column; text-decoration: none; min-width: 0; height: 58px; justify-content: center; }
.logo { font-weight: 800; font-size: 20px; letter-spacing: -.01em; line-height: 1; }
.logo em { font-style: normal; color: var(--gold); }
.sub { display: none; }
#meChip { grid-area: me; }
.tabs { grid-area: nav; display: flex; gap: 6px; }
.tab { flex: 1; text-align: center; text-decoration: none; padding: 8px 0; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-weight: 650; font-size: 14px; white-space: nowrap; }
.tab svg { display: none; }
.tab[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.mechip { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mechip .mc-t { display: none; }
.page { min-width: 0; }
main { display: flex; flex-direction: column; gap: 14px; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }

/* ---------- базовые блоки ---------- */
.panel { container-type: inline-size; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.h { font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.h.xl { font-size: 26px; letter-spacing: -.02em; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--muted); }
.muted { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font-weight: 650; font-size: 15px; padding: 11px 18px; border-radius: 11px; min-height: 44px; text-align: center; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.big { font-size: 16.5px; padding: 15px 20px; border-radius: 13px; }
.btn.blue { background: var(--blue); color: #fff; border-color: transparent; }
.btn.red { background: var(--red); color: #fff; border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--red); }
.btn.small { font-size: 13.5px; padding: 6px 12px; min-height: 34px; border-radius: 9px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.tg { background: #2aabee; color: #fff; border-color: transparent; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip.ok { color: var(--ok); } .chip.admin { color: var(--gold); border: 1px solid var(--gold); background: transparent; vertical-align: 4px; margin-left: 4px; font-size: 11.5px; } .chip.warn { color: var(--gold); } .chip.bad { color: var(--red); } .chip.live { color: var(--blue); }
.banner { border-radius: 12px; padding: 12px 14px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); }
.banner.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.banner.warn { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font-weight: 650; }
.up { color: var(--ok); } .down { color: var(--red); }
.okline { color: var(--ok); font-weight: 650; }
.err { color: var(--red); font-weight: 600; }
.hint { font-size: 13px; color: var(--muted); }
.fine { font-size: 12px; color: var(--muted); }
.empty { text-align: center; padding: 20px 8px; color: var(--muted); margin: 0; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* уровень 1–10 */
.lv { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; font: 700 13px/1 var(--f-body); border: 1.5px solid currentColor; flex: none; }
.lv-1 { color: var(--muted); } .lv-low { color: var(--ok); } .lv-mid { color: var(--gold); } .lv-high { color: var(--orange); } .lv-top { color: var(--red); }
.lv.xl { min-width: 56px; height: 56px; font-size: 24px; border-width: 2.5px; border-radius: 14px; }

/* аватарки */
.ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex: none; position: relative;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--bn1, #4f6b8a), var(--bn2, #2c3b4d)); overflow: visible; }
.ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ava.me { --bn1: #e9b44c; --bn2: #a3651a; color: #1b1406; }
.ava .odot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; margin: 0; border: 2px solid var(--bg); }
.mava { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.odot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-left: 6px; vertical-align: 2px; flex: none; }

/* ---------- вход ---------- */
.hero { padding-block: 28px 8px; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { font-weight: 800; font-size: clamp(30px, 8vw, 44px); line-height: 1.05; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { color: var(--muted); max-width: 52ch; }
.vsart { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding-block: 6px; }
.vsbar { height: 6px; border-radius: 3px; }
.vsbar.a { background: var(--blue); } .vsbar.b { background: var(--red); }
.vsart b { font-weight: 800; color: var(--gold); }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.feature b { display: block; font-size: 14px; }
.feature span { font-size: 13px; color: var(--muted); }

/* ---------- «Играть» ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "you" "live"; gap: 14px; align-items: start; }
.c-main { grid-area: main; } .c-you { grid-area: you; } .c-live { grid-area: live; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.center { align-items: stretch; }
.center.idle .pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.pick b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick span { color: var(--muted); font-size: 12.5px; }
.center .go { width: 100%; }
.center .hint.c { text-align: center; }
.center.search, .center.accept { align-items: center; text-align: center; padding-block: 28px; }
.ring { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; position: relative; margin-bottom: 8px; }
.ring::before, .ring::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid var(--gold); }
.ring::before { inset: 0; opacity: .22; animation: breathe 2.4s ease-in-out infinite; } .ring::after { inset: 16px; opacity: .55; }
@keyframes breathe { 50% { transform: scale(1.06); opacity: .08; } }
.ring b { font-size: 32px; font-weight: 750; letter-spacing: -.02em; }
.center.search .go, .center.accept .acts { max-width: 380px; }
.center.search p.muted { max-width: 44ch; }
.found { color: var(--gold); font-weight: 700; }
.count { font-size: clamp(96px, 26vw, 150px); line-height: .85; font-weight: 700; letter-spacing: -.06em; margin: 6px 0 0; }
.count span { color: var(--muted); font-weight: 300; }
.count-l { font-size: 18px; }
.adots { display: flex; gap: 6px; margin-top: 8px; } .adots i { width: 22px; height: 6px; border-radius: 3px; background: var(--surface-2); } .adots i.on { background: var(--ok); }
.accept .acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; width: 100%; margin-top: 8px; }
.accept .left-t { color: var(--muted); } .accept .left-t b { color: var(--fg); }

.you-top { display: flex; align-items: center; gap: 12px; } .you-top .ava { width: 48px; height: 48px; font-size: 19px; }
.you-top b { display: block; font-size: 17px; } .you-top div span { color: var(--muted); font-size: 13px; }
.bigelo { font-size: 44px; font-weight: 750; letter-spacing: -.03em; line-height: 1; margin-top: 4px; }
.bigelo small { font-size: 14px; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.now-h { margin: 0; }
.now .li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.now .li span { color: var(--muted); } .now .li b { font-weight: 650; }
.recent a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); text-decoration: none; }
.recent .r-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.recent .r-n span { color: var(--muted); font-weight: 450; }
.recent b { font-weight: 700; }
.lmatch { display: flex; align-items: center; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; font-weight: 650; font-size: 14px; white-space: nowrap; }
.lmatch:first-of-type { border-top: 0; padding-top: 0; }
.lmatch .a { color: var(--blue); } .lmatch .b { color: var(--red); } .lmatch small { margin-left: auto; color: var(--muted); font-weight: 500; }
.toprow { display: grid; grid-template-columns: 20px auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; }
.toprow:first-of-type { border-top: 0; padding-top: 0; }
.toprow > span:first-child { color: var(--muted); } .toprow b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.q-status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: pulse 1.4s ease-in-out infinite; flex: none; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---------- списки ---------- */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; text-decoration: none; color: inherit; }
.list li:first-child .row, .row:first-child { border-top: 0; }
a.row:hover .nm { color: var(--gold); }
.row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.row .role { color: var(--muted); font-size: 13.5px; width: 70px; }
.row .elo { font-weight: 700; width: 52px; text-align: right; }
.pos { width: 26px; text-align: right; color: var(--muted); font-weight: 600; font-size: 13.5px; flex: none; }
.pos.top { color: var(--gold); }
.row.me .nm { color: var(--gold); }
.wl { font-size: 13.5px; color: var(--muted); white-space: nowrap; width: 100px; text-align: right; }
.tag { font-size: 11px; font-weight: 650; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }

/* ---------- матч ---------- */
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stage { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; padding: 6px 0; }
.stage .left { text-align: left; }
.timer { font-size: 52px; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.timer.low, .left-t b.low { color: var(--red); }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* На узком телефоне команды друг под другом, иначе ники обрезаются до двух букв */
@media (max-width: 520px) { .teams { grid-template-columns: 1fr; } }
.team { min-width: 0; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.team.won { box-shadow: inset 0 0 0 2px var(--gold); }
.t-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.t-name { font-weight: 700; }
.t-A .t-name { color: var(--blue); } .t-B .t-name { color: var(--red); }
.team .list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); min-width: 0; font-size: 14px; }
.team .list li:first-child { border-top: 0; }
.team .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-decoration: none; }
.team li.me .nm { color: var(--gold); }
.cap { font-weight: 700; font-size: 10.5px; line-height: 1; color: var(--gold); border: 1px solid var(--gold); border-radius: 5px; padding: 2px 4px; flex: none; }
.acc { flex: none; width: 16px; text-align: center; color: var(--muted); font-weight: 800; }
.acc.yes { color: var(--ok); }
.dl { flex: none; font-weight: 700; font-size: 13px; }
.dl.up { color: var(--ok); } .dl.down { color: var(--red); }
.team .list li:has(.st) { flex-wrap: wrap; row-gap: 2px; }
.st { flex-basis: 100%; padding-left: 64px; font-size: 12px; color: var(--muted); }
.mvp { font-weight: 700; font-size: 10.5px; color: var(--gold); border: 1px solid var(--gold); border-radius: 5px; padding: 1px 4px; vertical-align: 1px; }
.room { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.room b { font-weight: 700; font-size: 26px; letter-spacing: .06em; }
.ids { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.idrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.idrow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idrow code { font: 600 13px var(--f-body); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.A { background: var(--blue); } .dot.B { background: var(--red); }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shots a { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--surface-2); max-width: 100%; }
.shots img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qrcard { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.qrbox { background: #fff; border-radius: 12px; padding: 6px; line-height: 0; max-width: 100%; }
.qrbox svg { width: 220px; height: auto; max-width: 100%; display: block; }
.result { display: flex; align-items: center; gap: 14px; }
.delta { font-size: 30px; font-weight: 750; line-height: 1; }
.delta.up { color: var(--ok); } .delta.down { color: var(--red); }
.mrow { display: flex; flex-direction: column; gap: 6px; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.mrow:first-child { border-top: 0; }
.mline { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vs { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; }
.vs .a { color: var(--blue); } .vs .b { color: var(--red); }
.vs .win { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.seg2 { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 3px; }
.seg2 button { border: 0; background: transparent; color: var(--muted); font-weight: 650; padding: 6px 14px; border-radius: 999px; }
.seg2 button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.mgrid { display: grid; grid-template-columns: 1fr; column-gap: 28px; }
@container (min-width: 640px) { .mgrid { grid-template-columns: 1fr 1fr; } .mgrid .mrow:nth-child(2) { border-top: 0; } }
@container (min-width: 1150px) { .mgrid { grid-template-columns: 1fr 1fr 1fr; } .mgrid .mrow:nth-child(3) { border-top: 0; } }

/* ---------- профиль (шапка + вкладки) ---------- */
.bn-gold   { --bn1: #f2b84b; --bn2: #8a4b12; }
.bn-blue   { --bn1: #4f8dff; --bn2: #13306e; }
.bn-red    { --bn1: #ff5c62; --bn2: #6c1420; }
.bn-violet { --bn1: #a679ff; --bn2: #3a1d78; }
.bn-green  { --bn1: #3ccf8a; --bn2: #0d5139; }
.bn-teal   { --bn1: #33c4d1; --bn2: #0f4952; }
.prof { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.phead { display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(100deg, color-mix(in srgb, var(--bn1, var(--gold)) 22%, var(--surface)), var(--surface) 62%); }
.phead .ava { width: 92px; height: 92px; font-size: 36px; }
.phead .ava .odot { width: 18px; height: 18px; border-width: 3px; border-color: var(--surface); right: 2px; bottom: 2px; }
.phead .who { min-width: 0; }
.phead h1 { margin: 0; font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; word-break: break-word; }
.phead .meta { color: var(--muted); margin-top: 4px; }
.presence.on { color: var(--ok); font-weight: 650; }
.phead .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bnedit { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 6px; border-top: 1px solid var(--line); margin-top: 14px; }
.bnedit .lbl { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.zoomrow { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.zoomrow input { flex: 1; accent-color: var(--gold); }
.ptabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin: 18px 0 20px; overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs button { background: none; border: 0; padding: 12px 0; color: var(--muted); font-weight: 650; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ptabs button[aria-pressed="true"] { color: var(--fg); border-color: var(--gold); }
.ptabs button span { color: var(--muted); font-weight: 500; margin-left: 4px; }
.ov { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ov-main, .ov-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.nums { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.nums div { padding: 16px 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 0; }
.nums div:nth-child(-n+2) { border-top: 0; } .nums div:nth-child(odd) { border-left: 0; }
.nums b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.nums span { color: var(--muted); font-size: 13px; }
.nums b.up { color: var(--ok); } .nums b.down { color: var(--red); }
.rowh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rowh h3 { margin: 0; font-size: 15px; font-weight: 650; } .rowh span { color: var(--muted); font-size: 13px; }
.chart svg { display: block; width: 100%; height: 170px; margin-top: 10px; overflow: visible; }
.ch-line { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ch-area { fill: color-mix(in srgb, var(--gold) 12%, transparent); stroke: none; }
.ch-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lvbar .bar { margin-top: 10px; }
.about h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pbio { white-space: pre-wrap; overflow-wrap: anywhere; }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.hchip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: 14px; }
.hchip:not(:has(img)) { padding-left: 12px; }
.socs { display: flex; flex-wrap: wrap; gap: 6px; }
.soc { padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: 13.5px; text-decoration: none; border: 1px solid var(--line); color: var(--fg); }
.soc::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: currentColor; }
.soc.tw::before { background: #9b6bff; } .soc.yt::before { background: #ff3b3b; } .soc.tg::before { background: #2aa3e6; }
.wlf { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wlf i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font: 700 11px/1 var(--f-body); font-style: normal; }
.wlf.wide { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; } .wlf.wide i { width: auto; height: 26px; border-radius: 5px; }
.wlf i.w { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.wlf i.l { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.lm { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; }
.lm .res { width: 5px; align-self: stretch; border-radius: 3px; flex: none; } .lm .res.w { background: var(--ok); } .lm .res.l { background: var(--red); } .lm .res.n { background: var(--line); }
.lm div { flex: 1; min-width: 0; } .lm small { color: var(--muted); display: block; font-size: 12.5px; }
.lm b { font-weight: 700; }
.admbox { border-color: var(--gold); }

.badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@container (min-width: 460px) { .badges { grid-template-columns: repeat(3, 1fr); } }
@container (min-width: 760px) { .badges { grid-template-columns: repeat(4, 1fr); } }
.bdg { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.bdg .bi { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 18px; line-height: 1; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.bdg b { font-size: 13.5px; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.bdg > span:last-child { font-size: 12px; color: var(--muted); line-height: 1.25; }
.bdg.locked { opacity: .45; border-style: dashed; }
.bdg.locked .bi { filter: grayscale(1); background: var(--surface); color: var(--muted); }

.hico { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface); }
.hico.tm { width: 26px; height: 26px; display: block; }
.hico.big { width: 40px; height: 40px; border-radius: 10px; }
.hico.empty { display: inline-block; }
.hpool { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hpool li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.hpool li:first-child { border-top: 0; }
.hp-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hp-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-n span, .hp-s span { font-size: 12.5px; color: var(--muted); }
.hp-s { display: flex; flex-direction: column; align-items: flex-end; }
.hp-s b { font-weight: 700; font-size: 15px; }
.hp-s b.up { color: var(--ok); } .hp-s b.down { color: var(--red); }

/* ---------- формы ---------- */
.form { display: flex; flex-direction: column; gap: 8px; }
.form label, .lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.form .row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.form .row2 > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form .row2.even { grid-template-columns: 1fr 1fr; }
.form .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
input, select, textarea { width: 100%; font: 500 16px var(--f-body); padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); min-width: 0; }
textarea { min-height: 80px; resize: vertical; }
label.check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--fg); }
label.check input { width: 20px; height: 20px; flex: none; accent-color: var(--gold); }
.avedit { display: flex; align-items: center; gap: 14px; }
.avedit .ava { width: 76px; height: 76px; font-size: 30px; }
.avedit .hint { margin: 0 0 8px; }
.avedit label.btn { cursor: pointer; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 40px; height: 40px; border-radius: 10px; border: 2px solid transparent; padding: 0; cursor: pointer; background: linear-gradient(135deg, var(--bn1), var(--bn2)); }
.sw.sw-auto { width: auto; padding: 0 12px; background: var(--surface-2); border-color: var(--line); color: var(--fg); font-weight: 650; font-size: 13px; }
.sw.on { border-color: var(--fg); box-shadow: 0 0 0 2px var(--surface) inset; }

/* как это работает */
details.how summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.how summary::-webkit-details-marker { display: none; }
details.how summary::after { content: "+"; font-size: 20px; color: var(--muted); }
details.how[open] summary::after { content: "−"; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.lvtable { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lvcell { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); text-align: center; }

/* ---------- админка ---------- */
.atabs { display: flex; flex-wrap: wrap; gap: 6px; }
.atab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-weight: 650; font-size: 14px; text-decoration: none; white-space: nowrap; }
.atab.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--fg); font: 700 11px/20px var(--f-body); text-align: center; }
.cnt.hot { background: var(--red); color: #fff; }
.atab.on .cnt { background: color-mix(in srgb, var(--bg) 25%, transparent); color: inherit; }
.atab.on .cnt.hot { background: var(--red); color: #fff; }
.todos { display: flex; flex-direction: column; gap: 8px; }
.todo { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); text-decoration: none; color: var(--fg); border: 1px solid var(--line); }
.todo b { font-size: 26px; font-weight: 750; line-height: 1; color: var(--red); min-width: 32px; text-align: center; }
.todo:hover { border-color: var(--muted); }
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qbtn { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--fg); min-width: 0; }
.qbtn:hover { border-color: var(--muted); }
.qbtn span { font-size: 12.5px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.stat b { display: block; font-size: 22px; font-weight: 700; }
.stat span { font-size: 12.5px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tiles.five { grid-template-columns: repeat(3, 1fr); }
details.pitem { border-top: 1px solid var(--line); }
details.pitem:first-child { border-top: 0; }
details.pitem summary { list-style: none; cursor: pointer; padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
details.pitem summary::-webkit-details-marker { display: none; }
details.pitem summary .mline::after { content: "›"; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .15s; }
details.pitem[open] summary .mline::after { transform: rotate(90deg); }
details.pitem .btns { padding-bottom: 12px; }
.item { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.item:first-of-type { border-top: 0; padding-top: 0; }
.log { font-size: 13px; color: var(--muted); }

/* режим игрока для админа */
.modebar { background: color-mix(in srgb, var(--gold) 14%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); }
.modebar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: 13.5px; }
.modebar-in .btn { flex: none; }

.toast { position: fixed; z-index: 20; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin: 0 auto; background: var(--fg); color: var(--bg);
  padding: 12px 14px; border-radius: 12px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }

.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pulse, .ring::before { animation: none; } .shake { animation: flash .6s ease both; } }

/* ---------- телефон ---------- */
@media (max-width: 999px) {
  .you .you-top, .you .bigelo, .you .bar, .you .recent, .you .wlf { display: none; }
  .now .li:first-child { border-top: 0; }
  .now .li { padding: 11px 0; font-size: 15.5px; }
}
@media (max-width: 560px) {
  .phead { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .phead .ava { width: 72px; height: 72px; font-size: 28px; }
  .phead h1 { font-size: 24px; }
  .phead .acts { margin: 0; width: 100%; } .phead .acts .btn { flex: 1; }
  .chart svg { height: 130px; }
  .row .role { display: none; } .wl { width: auto; }
}
@media (max-width: 380px) { .features { grid-template-columns: 1fr; } .form .row3 { grid-template-columns: 1fr; } .center.idle .pick { grid-template-columns: 1fr 1fr; } }

/* ---------- компьютер: меню слева ---------- */
@media (min-width: 1000px) {
  body { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .side { position: sticky; top: 0; height: 100vh; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--side); border-bottom: 0; border-right: 1px solid var(--line); padding: 22px 16px; }
  .brand { height: auto; padding: 0 12px 22px; }
  .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
  .tabs { flex-direction: column; gap: 4px; }
  .tab { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; background: none; border: 0; text-align: left; font-size: 15px; }
  .tab svg { display: block; width: 20px; height: 20px; flex: none; }
  .tab:hover { color: var(--fg); background: var(--surface); }
  .tab[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
  .tab[aria-current="page"] svg { color: var(--gold); }
  #meChip { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 4px 0; }
  .mechip { padding: 4px 8px; border-radius: 10px; }
  .mechip:hover { background: var(--surface); }
  .mechip .mc-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .mechip .mc-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mechip .mc-t span { font-size: 12.5px; color: var(--muted); }
  .mechip .lv { display: none; }
  .now .li:first-child { display: none; }
  .now .li:nth-child(2) { border-top: 0; }
  .ava .odot { border-color: var(--side); }
  main { padding: 28px 36px 48px; gap: 18px; }
  .modebar-in { padding: 8px 36px; }
  /* формы — по центру свободного места, остальное растягивается на весь экран */
  .r-login, .r-onboard, .r-edit { max-width: 760px; margin-inline: auto; width: 100%; }
  .dash { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "you main" "live main"; gap: 22px; }
  .dash .c-live { margin-top: 0; }
  .ov { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; }
  .nums { grid-template-columns: repeat(4, 1fr); }
  .nums div, .nums div:nth-child(odd) { border-top: 0; border-left: 1px solid var(--line); } .nums div:first-child { border-left: 0; }
  .qgrid { grid-template-columns: repeat(3, 1fr); }
  .cols { display: grid; gap: 22px; align-items: start; }
  .cols.prof { grid-template-columns: 420px minmax(0, 1fr); }
}
@media (min-width: 1360px) {
  .dash { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.7fr) minmax(300px, 1fr); grid-template-areas: "you main live"; }
}
.cols { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1000px) { .cols { display: grid; } }

/* большие мониторы: чуть крупнее отступы и цифры, чтобы место не пустовало */
@media (min-width: 1700px) {
  main { padding: 34px 48px 56px; gap: 22px; }
  .dash, .cols { gap: 26px; }
  .panel { padding: 22px; }
  .bigelo { font-size: 52px; }
  .count { font-size: 170px; }
  .phead { padding: 26px; } .phead .ava { width: 108px; height: 108px; font-size: 42px; } .phead h1 { font-size: 34px; }
  .nums b { font-size: 30px; }
  .chart svg { height: 220px; }
  .row { padding: 12px 0; } .row .role { width: 110px; } .wl { width: 140px; }
}

/* иконки ролей: тёмная плитка, светлый значок, у каждой роли свой оттенок */
.rtag { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 650; letter-spacing: .01em; }
.rsq { flex: none; display: inline-grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 9.5px; font-weight: 750; letter-spacing: .03em; line-height: 1; }
.rolepick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rp { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 12px; letter-spacing: .02em; border-radius: 11px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-weight: 600; text-align: left; }
.rp:hover { border-color: var(--muted); }
.rp.on { border-color: #4f9dff; box-shadow: inset 0 0 0 1px #4f9dff, 0 0 16px rgba(79, 157, 255, .25); background: color-mix(in srgb, #4f9dff 8%, var(--bg)); }
@media (min-width: 700px) { .rolepick { grid-template-columns: repeat(5, 1fr); } .rp { flex-direction: column; text-align: center; gap: 8px; padding: 14px 6px 12px; } }
@media (max-width: 1699px) { .row .role { width: 92px; } }

/* вкладки рейтинга */
.rtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-weight: 650; font-size: 14px; }
.rtabs button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.rank-me { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 2px; }
.rank-me .row { border-top: 0; }
.rank-me-note { border-top: 1px dashed var(--line); padding-top: 12px; color: var(--muted); font-size: 14px; }
.hpick { display: flex; flex-wrap: wrap; gap: 6px; }
.hp { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); font-weight: 600; font-size: 13.5px; }
.hp.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.rank-hero { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.rank-hero b { display: block; font-size: 18px; } .rank-hero .hint { display: block; }
.rank-head { display: flex; gap: 12px; font-size: 12px; color: var(--muted); padding: 0 0 2px; border-bottom: 1px solid var(--line); }
.rank-head span:first-child { flex: 1; padding-left: 38px; } .rank-head span:last-child { width: 52px; text-align: right; }
/* «Герои» в рейтинге: выбор героя + топ */
.hlayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.htop.stale { opacity: .45; transition: opacity .15s; pointer-events: none; }
.hpicker { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.hpicker summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 650; }
.hpicker summary::-webkit-details-marker { display: none; }
.hpicker summary em { margin-left: auto; font-style: normal; color: var(--gold); font-size: 13.5px; font-weight: 600; }
.hpicker[open] summary { border-bottom: 1px solid var(--line); }
.hpicker > :not(summary) { margin: 0 12px; }
.hsearch { padding-top: 12px; }
.hgroup { margin-top: 14px !important; margin-bottom: 8px !important; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.hgrid:last-of-type { margin-bottom: 12px; }
.ht { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 7px; border-radius: 10px; border: 1px solid transparent; background: var(--surface); color: var(--fg); font-size: 12px; font-weight: 600; min-width: 0; }
.ht span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht .hico { width: 40px; height: 40px; border-radius: 10px; }
.ht small { position: absolute; top: 4px; right: 5px; font-size: 10.5px; color: var(--muted); font-weight: 700; }
.ht:hover { border-color: var(--line); }
.ht.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.hnone { padding: 6px 0 12px; }
.htop { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 1000px) {
  .hlayout { grid-template-columns: 340px minmax(0, 1fr); gap: 22px; }
  .hpicker { position: sticky; top: 20px; }
  .hpicker summary { pointer-events: none; }
  .hpicker summary em { display: none; }
  .hpicker { max-height: calc(100vh - 60px); overflow-y: auto; scrollbar-width: thin; }
  .hpicker summary { position: sticky; top: 0; z-index: 1; background: var(--bg); }
}
@media (min-width: 1700px) { .hlayout { grid-template-columns: 420px minmax(0, 1fr); } }
@media (max-width: 560px) { .hide-s { display: none; } .rank-head span:nth-child(2) { display: none; } }
.ava.rava { width: 28px; height: 28px; font-size: 12px; }
.hp-m { display: flex; flex-direction: column; align-items: flex-end; min-width: 54px; } .hp-m b { font-weight: 750; font-size: 16px; color: var(--gold); } .hp-m span { font-size: 12px; color: var(--muted); }

/* ---------- профиль: карточка слева, вкладки справа; баннер растворяется в фоне, как в TikTok ---------- */
.r-me, .r-player, .r-style { overflow-x: clip; } /* края баннера не дают горизонтальной прокрутки */
.dprof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.dmain { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; }
.dmain .ptabs { margin-top: 0; }
.dmain > .admbox { margin-bottom: 20px; }
.ov1 { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.r-me .back, .r-player .back, .r-style .back { position: relative; z-index: 3; }
.dcard { position: relative; min-width: 0; }
/* .pbn — «кадр»: та часть, которую игрок выбрал. Картинка вокруг него (.bn-ext) продолжается и плавно исчезает:
   без рамок и видимых границ. Область .bn-ext шире кадра на 16% с боков и выше на 70% сверху и снизу. */
.dcard .pbn { position: relative; z-index: 1; aspect-ratio: 4 / 1; }
.bn-ext { position: absolute; left: -16%; right: -16%; top: -70%; bottom: -70%; overflow: hidden; pointer-events: none;
  --mx: linear-gradient(to right, transparent, rgba(0,0,0,.1) 4%, rgba(0,0,0,.35) 7.5%, rgba(0,0,0,.7) 10.5%, #000 14%, #000 86%, rgba(0,0,0,.7) 89.5%, rgba(0,0,0,.35) 92.5%, rgba(0,0,0,.1) 96%, transparent);
  --my: linear-gradient(to bottom, transparent, rgba(0,0,0,.2) 9%, rgba(0,0,0,.55) 18%, rgba(0,0,0,.85) 25%, #000 31%, #000 56%, rgba(0,0,0,.85) 62%, rgba(0,0,0,.66) 68%, rgba(0,0,0,.47) 74%, rgba(0,0,0,.3) 80%, rgba(0,0,0,.16) 86%, rgba(0,0,0,.06) 92%, transparent 98%);
  -webkit-mask-image: var(--mx), var(--my); -webkit-mask-composite: source-in; mask-image: var(--mx), var(--my); mask-composite: intersect; }
.bn-ext img, .bn-ext video { display: block; user-select: none; -webkit-user-drag: none; }
/* Картинка растворяется и к своим краям (их задаёт --ml/--mr/--mt/--mb), чтобы нигде не было ровного среза */
.bn-media { --gx: linear-gradient(to right, transparent, #000 var(--ml), #000 var(--mr), transparent);
  --gy: linear-gradient(to bottom, transparent, #000 var(--mt), #000 var(--mb), transparent);
  -webkit-mask-image: var(--gx), var(--gy); -webkit-mask-composite: source-in; mask-image: var(--gx), var(--gy); mask-composite: intersect; }
.bn-amb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.2); transform: scale(1.1); }
/* Без своего баннера — мягкое свечение цвета оформления */
.bn-color { position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 45%, var(--bn1, var(--gold)), color-mix(in srgb, var(--bn2, #333) 70%, transparent) 70%, transparent); opacity: .55; }
.pbn.editing { cursor: grab; touch-action: none; }
.pbn.editing::after { content: ""; position: absolute; inset: 0; border: 2px dashed rgba(255, 255, 255, .7); border-radius: 12px; pointer-events: none; z-index: 2; mix-blend-mode: difference; }
.pbn.editing.drag { cursor: grabbing; }
.dc-body { position: relative; z-index: 2; }
.dc-who { padding: 0 4px 16px; }
.dc-who .ava { width: 92px; height: 92px; font-size: 36px; margin-top: -46px; box-shadow: 0 0 0 5px var(--bg); }
.dc-who .ava .odot { width: 18px; height: 18px; border-width: 3px; border-color: var(--bg); right: 3px; bottom: 3px; }
.dc-who h1 { margin: 10px 0 0; font-size: 28px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; word-break: break-word; }
.dc-who h1, .dc-who .meta { text-shadow: 0 1px 14px var(--bg), 0 0 2px color-mix(in srgb, var(--bg) 60%, transparent); }
.dc-who .meta { color: var(--muted); margin: 6px 0 0; }
.dc-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .dc-acts .btn { flex: 1; }
.dc-sec { padding: 14px 4px 16px; border-top: 1px solid var(--line); min-width: 0; }
.dc-sec > .hint:only-child { margin: 0; }
.dcard h4 { margin: 0 0 9px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dcard .pbio { margin: 0; }
@media (min-width: 1000px) {
  .dprof { grid-template-columns: 420px minmax(0, 1fr); gap: 40px; }
  .dcard { position: sticky; top: 24px; }
}
@media (min-width: 1700px) { .dprof { grid-template-columns: 460px minmax(0, 1fr); gap: 48px; } }
/* Телефон: баннер во всю ширину экрана, от самого верха; вбок уходить некуда — растворяется только вниз */
@media (max-width: 999px) {
  /* кадр — сразу под верхним меню, а картинка над ним уходит под полупрозрачное меню */
  .dcard .pbn { margin: -16px -16px 0; }
  .bn-media { --gx: linear-gradient(#000, #000); }
  .bn-ext { --mx: linear-gradient(#000, #000);
    --my: linear-gradient(to bottom, #000, #000 60%, rgba(0,0,0,.85) 65%, rgba(0,0,0,.66) 71%, rgba(0,0,0,.46) 77%, rgba(0,0,0,.28) 83%, rgba(0,0,0,.13) 89%, rgba(0,0,0,.04) 94%, transparent 99%); }
  body[data-route="me"] .side, body[data-route="player"] .side, body[data-route="style"] .side {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 25%, transparent) 65%, transparent);
    background-origin: border-box; background-repeat: no-repeat; border-bottom-color: transparent; transition: background-color .2s; }
  /* прокрутили вниз — меню снова обычное, непрозрачное */
  body.scrolled[data-route] .side { background: var(--bg); border-bottom-color: var(--line); }
  .pbn.editing::after { inset: 0 16px; }
}
@media (max-width: 560px) { .dc-who .ava { width: 78px; height: 78px; font-size: 30px; margin-top: -39px; } .dc-who h1 { font-size: 24px; } }

/* ---------- арена матча: этапы сверху, команды по бокам, действие в центре ---------- */
.arena-wrap { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.arena { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ar-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ar-id { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.ar-id:hover { color: var(--fg); }
.msteps { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: fit-content; }
@media (max-width: 1299px) { .ms-t small { display: none; } }
.ms { display: flex; align-items: center; gap: 9px; flex: none; }
.ms-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 850; font-size: 13.5px; flex: none;
  border: 2px solid var(--line); color: var(--muted); box-sizing: border-box; }
.ms-t { display: flex; flex-direction: column; line-height: 1.2; }
.ms-t b { font-size: 14px; font-weight: 750; }
.ms-t small { font-size: 12px; color: var(--muted); }
.ms.next .ms-t b { color: var(--muted); }
.ms.done .ms-n { background: var(--ok); border-color: var(--ok); color: #0c1a12; }
.ms.now .ms-n { background: var(--gold); border-color: var(--gold); color: #1b1406; box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 22%, transparent); }
.ms.now.warn .ms-n { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 22%, transparent); }
.ms-line { flex: 1; min-width: 14px; max-width: 70px; height: 2px; margin: 0 12px; background: var(--line); border-radius: 2px; }
.ms-line.on { background: var(--ok); }
.ar-timer { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.ar-timer span { font-size: 13px; color: var(--muted); }
.ar-timer b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ar-timer b.low { color: var(--red); }
.ar-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ar-team { border-radius: 18px; border: 1px solid; overflow: hidden; min-width: 0; }
.ar-team.t-A { border-color: color-mix(in srgb, var(--blue) 38%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 20%, transparent), transparent 130px), var(--surface); }
.ar-team.t-B { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--red) 18%, transparent), transparent 130px), var(--surface); }
.ar-th { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 18px 20px 12px; }
.ar-th h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.t-A .ar-th h3 { color: var(--blue); } .t-B .ar-th h3 { color: var(--red); }
.ar-th span { font-size: 13px; color: var(--muted); } .ar-th b { color: var(--fg); font-size: 17px; }
.ar-list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.ar-p { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; background: color-mix(in srgb, var(--fg) 4%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); min-width: 0; }
.ar-p.me { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.ar-p .ava { width: 42px; height: 42px; font-size: 17px; }
.t-A .ar-p .ava:not(.me) { --bn1: #5b8def; --bn2: #2b4fa8; } .t-B .ar-p .ava:not(.me) { --bn1: #ff7a7f; --bn2: #a8323a; }
.ar-pi { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ar-pi .nm { font-size: 16px; font-weight: 700; color: var(--fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-p.me .nm { color: var(--gold); }
.ar-pi .sub { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ar-pi .sub .lv { transform: scale(.85); }
.capt { font-size: 11px; font-weight: 750; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 2px 6px; flex: none; }
.ar-mid { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; min-width: 0; }
.ar-vs { font-size: 52px; font-weight: 900; letter-spacing: -.04em; line-height: 1; background: linear-gradient(90deg, var(--blue), var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-mid .stage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ar-mid .stage > p { margin: 0; }
.ar-mid .stage .btn.big { width: 100%; }
.ar-mid .stage .qrcard { margin: 0 auto; }
.ar-mid .stage details.left { width: 100%; text-align: left; }
@media (min-width: 760px) and (max-width: 1099px) {
  .ar-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ar-mid { grid-column: 1 / -1; grid-row: 1; }
}
@media (min-width: 1100px) { .ar-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) minmax(0, 1fr); } }
@media (max-width: 759px) {
  .ar-top { gap: 12px; }
  .ar-timer { margin-left: 0; }
  .msteps { order: 3; flex-basis: 100%; min-width: 0; }
  .ms-t small { display: none; }
  .ms-t b { font-size: 12.5px; }
  .ms { gap: 6px; } .ms-n { width: 26px; height: 26px; font-size: 12px; }
  .ms-line { margin: 0 6px; min-width: 8px; }
  .ar-mid { order: -1; padding: 18px; } .ar-vs { display: none; }
  .ar-grid { display: flex; flex-direction: column; align-items: stretch; }
}