/* Sheldon Club game portal — «dark arena» */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0a0d13; --bg-2: #0f131b; --surface: #141a24; --surface-2: #1a2230; --line: #222c3b; --line-2: #2d394b;
  --txt: #e9eef6; --dim: #8b97ab; --mute: #5d6a7e;
  --accent: #ff7a1a; --accent-2: #ffb061; --cyan: #2dd4ff; --green: #3ddc84; --red: #ff4d5e; --gold: #ffd166; --purple: #b388ff;
  /* Заливка кнопок — отдельным токеном, а не через --accent: оранжевый остаётся у прочих
     акцентов (полоски, точки, ховеры), а нажимаемое красится золотом в одном месте. */
  --btn: #c7b06e; --btn-2: #e2d09a; --btn-ink: #17140b;
  --btn-glow: rgba(199,176,110,.35);
  --r: 14px; --r-s: 9px; --shadow: 0 10px 30px rgba(0,0,0,.35);
  --font-d: 'Unbounded', 'Segoe UI', system-ui, sans-serif; --font: 'Manrope', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
/* ‼️ Атрибут hidden в браузере — это всего лишь display:none в таблице по умолчанию, и ЛЮБОЕ
   собственное display его перебивает. Из-за этого «спрятанные» панели со своим display:grid
   оставались на экране, а переключение вкладок выглядело как «ничего не происходит».
   Одна строка закрывает весь класс таких багов на всём сайте. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: radial-gradient(1200px 600px at 80% -10%, rgba(255,122,26,.10), transparent 60%),
       radial-gradient(900px 500px at -10% 10%, rgba(45,212,255,.08), transparent 55%), var(--bg);
       color: var(--txt); font: 16px/1.55 var(--font); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, .display { font-family: var(--font-d); letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 900; line-height: 1.1; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
.wrap { width: min(1180px, 100% - 2rem); margin: 0 auto; }
.dim { color: var(--dim); } .mute { color: var(--mute); } .small { font-size: .85rem; } .num { font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); } .cyan { color: var(--cyan); } .green { color: var(--green); } .red { color: var(--red); } .gold { color: var(--gold); }
.row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .between { justify-content: space-between; } .grow { flex: 1; }
.mt { margin-top: 1.2rem; } .mt2 { margin-top: 2rem; } .mb { margin-bottom: 1rem; }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: rgba(10,13,19,.78); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 1.4rem; height: 64px; }
.brand { font-family: var(--font-d); font-weight: 900; font-size: 1.05rem; letter-spacing: .02em; display: flex; align-items: center; gap: .6rem; }
/* промпт 37: вордмарк FRAGY.RU вместо квадрата+текста, когда файл лежит в /gfx/brand (base.html) */
/* владелец 04.09: «плохо и криво встало, чуть крупнее» — 48 px из 64 шапки, тёмная заливка букв подсвечена
   (на #0a0d13 читался один оранжевый контур), лёгкий тёплый ореол; в подвале и на телефоне меньше */
.brand img.wm { height: 48px; width: auto; display: block; margin: 0 .2rem 0 -.3rem;
  filter: brightness(1.32) saturate(1.05) drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(255,122,26,.28)); }
.brand.has-wm { gap: .9rem; }
.foot-v2 .brand img.wm { height: 36px; }
@media (max-width: 640px) { .brand img.wm { height: 38px; margin-left: 0; } }
.brand i { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px rgba(255,122,26,.7); display: inline-block; }
.nav { display: flex; gap: .2rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav a { padding: .45rem .8rem; border-radius: 999px; color: var(--dim); font-weight: 600; white-space: nowrap; transition: .15s; }
.nav a:hover, .nav a.active { color: var(--txt); background: var(--surface-2); }
.user { display: flex; align-items: center; gap: .7rem; }
.user img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line-2); }
.coins { background: linear-gradient(135deg, rgba(255,209,102,.18), rgba(255,122,26,.18)); border: 1px solid rgba(255,209,102,.35); color: var(--gold); padding: .3rem .7rem; border-radius: 999px; font-weight: 800; font-size: .9rem; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--txt); font: 700 .92rem var(--font); cursor: pointer; transition: .15s; text-decoration: none; }
.btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn.primary { background: linear-gradient(135deg, var(--btn), var(--btn-2)); border-color: transparent; color: var(--btn-ink); box-shadow: 0 6px 20px var(--btn-glow); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.cyan { background: linear-gradient(135deg, var(--cyan), #6fe3ff); border-color: transparent; color: #02202b; }
.btn.ghost { background: transparent; }
.btn.sm { padding: .38rem .75rem; font-size: .82rem; border-radius: 8px; }
.btn.danger { border-color: rgba(255,77,94,.5); color: var(--red); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.steam { background: #1b2838; border-color: #2a475e; }

/* hero */
.hero { padding: 3rem 0 1.5rem; display: grid; grid-template-columns: 1.3fr .9fr; gap: 2rem; align-items: center; }
.hero p { color: var(--dim); font-size: 1.05rem; max-width: 56ch; margin-top: .8rem; }
.hero .cta { margin-top: 1.4rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset: auto -20% -60% auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,26,.25), transparent 70%); }
.stat b { display: block; font-family: var(--font-d); font-size: 1.7rem; font-weight: 900; line-height: 1.1; }
.stat span { color: var(--dim); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

/* sections */
.sec { margin: 2.2rem 0; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sec-h h2 { display: flex; align-items: center; gap: .6rem; }
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--dim); }
.pill.club { color: var(--accent); border-color: rgba(255,122,26,.45); background: rgba(255,122,26,.1); }
.pill.public { color: var(--cyan); border-color: rgba(45,212,255,.45); background: rgba(45,212,255,.1); }
.pill.on { color: var(--green); border-color: rgba(61,220,132,.4); } .pill.off { color: var(--red); border-color: rgba(255,77,94,.4); }

/* server cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; position: relative; transition: .2s; display: flex; flex-direction: column; }
.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow); }
.srv .tile { height: 118px; display: flex; align-items: flex-end; padding: .9rem 1rem; position: relative; background: var(--tile, linear-gradient(135deg, #1f2a3b, #0f1520)); background-size: cover; background-position: center; }
.srv .tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,13,19,.85)); }
.srv .tile .map { position: relative; font-family: var(--font-d); font-weight: 900; font-size: 1.35rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); word-break: break-all; }
.srv .tile .game { position: absolute; top: .7rem; left: .9rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.45); padding: .2rem .5rem; border-radius: 6px; backdrop-filter: blur(6px); }
.srv .tile .st { position: absolute; top: .7rem; right: .9rem; }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); margin-right: .4em; vertical-align: middle; }
.dot.off { background: var(--red); box-shadow: 0 0 10px var(--red); }
.srv .body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.srv .title { font-weight: 800; font-size: 1.02rem; }
.srv .desc { color: var(--dim); font-size: .88rem; min-height: 2.5em; }
.bar { height: 6px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; transition: width .5s; }
.bar.cyan i { background: linear-gradient(90deg, var(--cyan), #8be9ff); }
.srv .meta { display: flex; justify-content: space-between; color: var(--dim); font-size: .85rem; }
.srv .meta b { color: var(--txt); }
.srv .actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .4rem; }
.srv .actions .btn { flex: 1; justify-content: center; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tbl th, .tbl td { padding: .6rem .65rem; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { color: var(--dim); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.tbl tr:hover td { background: rgba(255,255,255,.02); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .pos { width: 44px; font-family: var(--font-d); font-weight: 800; color: var(--dim); }
.tbl .pos.p1 { color: var(--gold); } .tbl .pos.p2 { color: #cfd8e3; } .tbl .pos.p3 { color: #d39a6a; }
.tbl .who { display: flex; align-items: center; gap: .6rem; }
.tbl .who img, .ava { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); object-fit: cover; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.panel + .panel { margin-top: 1rem; }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs a { padding: .55rem .9rem; color: var(--dim); font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--txt); border-color: var(--accent); }
.rank-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: 8px; background: linear-gradient(135deg, rgba(255,209,102,.15), rgba(255,122,26,.12)); border: 1px solid rgba(255,209,102,.3); font-weight: 800; font-size: .85rem; color: var(--gold); }

/* profile */
.profile-h { display: flex; gap: 1.3rem; align-items: center; padding: 1.4rem; background: linear-gradient(135deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-radius: var(--r); position: relative; overflow: hidden; }
.profile-h::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,26,.22), transparent 65%); }
.profile-h img { width: 88px; height: 88px; border-radius: 18px; border: 2px solid var(--line-2); background: var(--bg-2); }
.profile-h h1 { font-size: 1.7rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin-top: 1rem; }
.tile-s { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: .8rem .9rem; }
.tile-s b { display: block; font-family: var(--font-d); font-size: 1.3rem; font-weight: 800; }
.tile-s span { color: var(--dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

/* quests & store */
.quest { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; padding: .95rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); margin-bottom: .6rem; }
.quest.done { border-color: rgba(61,220,132,.4); background: linear-gradient(90deg, rgba(61,220,132,.07), var(--surface)); }
.quest .t { font-weight: 800; } .quest .d { color: var(--dim); font-size: .86rem; }
.quest .bar { margin-top: .5rem; }
.reward { font-weight: 900; color: var(--gold); white-space: nowrap; font-family: var(--font-d); }
.item { text-align: left; }
.item .pic { height: 150px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.item .pic img { max-height: 100%; object-fit: contain; padding: .6rem; }
.item .pic .ph { font-family: var(--font-d); font-size: 2.2rem; opacity: .35; }
.item .body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.item .price { font-family: var(--font-d); font-weight: 900; color: var(--gold); font-size: 1.1rem; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; max-height: 60vh; overflow: auto; padding: .2rem; }
.choice { border: 1px solid var(--line); border-radius: var(--r-s); padding: .5rem; background: var(--bg-2); cursor: pointer; font-size: .82rem; display: flex; flex-direction: column; gap: .3rem; }
.choice img { height: 70px; object-fit: contain; }
.choice:hover, .choice.sel { border-color: var(--accent); }

/* forms */
.form { display: grid; gap: .8rem; }
.form label { display: grid; gap: .3rem; font-size: .85rem; color: var(--dim); font-weight: 700; }
.form input, .form select, .form textarea { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--txt); border-radius: 8px; padding: .55rem .7rem; font: 500 .95rem var(--font); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.flash { padding: .7rem 1rem; border-radius: var(--r-s); margin: 1rem 0; font-weight: 600; border: 1px solid; }
.flash.ok { background: rgba(61,220,132,.1); border-color: rgba(61,220,132,.4); color: var(--green); }
.flash.err { background: rgba(255,77,94,.1); border-color: rgba(255,77,94,.4); color: var(--red); }
.conn { font-family: Consolas, monospace; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; padding: .5rem .8rem; display: inline-block; user-select: all; font-size: .9rem; }
.empty { padding: 1.6rem; text-align: center; color: var(--dim); }
.foot { margin: 3rem 0 1.5rem; color: var(--mute); font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.news { border-left: 3px solid var(--accent); padding: .2rem 0 .2rem .9rem; margin-bottom: 1rem; }
.news h3 { margin-bottom: .2rem; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal.open { display: flex; }
.modal .box { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); padding: 1.2rem; width: min(860px, 100%); max-height: 90vh; overflow: auto; }

/* admin */
.adm { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.adm aside { background: var(--bg-2); border-right: 1px solid var(--line); padding: 1.2rem .9rem; position: sticky; top: 0; height: 100vh; overflow: auto; }
.adm aside .brand { margin-bottom: 1.2rem; padding: 0 .5rem; }
.adm aside a.m { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--dim); font-weight: 600; }
.adm aside a.m:hover, .adm aside a.m.active { color: var(--txt); background: var(--surface-2); }
.adm aside .grp { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); margin: 1rem .7rem .3rem; font-weight: 800; }
.adm main { padding: 1.6rem 2rem; min-width: 0; }
.console { background: #05070a; border: 1px solid var(--line-2); border-radius: var(--r-s); padding: .8rem; font: .83rem/1.45 Consolas, monospace; white-space: pre-wrap; max-height: 420px; overflow: auto; color: #c9d4e3; }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.inline-form { display: inline-flex; gap: .4rem; align-items: center; }
.inline-form input, .inline-form select { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--txt); border-radius: 6px; padding: .35rem .5rem; font: .85rem var(--font); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 1.6rem; }
  .adm { grid-template-columns: 1fr; } .adm aside { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .adm main { padding: 1rem; }
  .top .wrap { gap: .8rem; } .brand span { display: none; }
  .tbl { font-size: .85rem; } .tbl th:nth-child(n+6), .tbl td:nth-child(n+6) { display: none; }
  .profile-h { flex-direction: column; text-align: center; }
}

/* --- фильтры, инвентарь, рынок, редкость --- */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0; }
.filters input, .filters select { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--txt); border-radius: 8px; padding: .5rem .7rem; font: 500 .9rem var(--font); min-width: 150px; }
.filters input[name=q] { flex: 1; min-width: 200px; }
.rar-legend { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.rar { font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.inv-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--c, var(--line-2)); border-radius: var(--r-s); padding: .7rem; display: flex; flex-direction: column; gap: .3rem; min-height: 250px; transition: .15s; overflow: hidden; }
.inv-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c, #888) 22%, transparent), transparent 62%); pointer-events: none; }
.inv-card:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.inv-card.equipped { outline: 1px solid rgba(61,220,132,.5); }
.inv-card .pic { position: relative; height: 110px; display: flex; align-items: center; justify-content: center; }
.inv-card .pic img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.inv-card .pic .ph { font-family: var(--font-d); opacity: .3; font-size: 1.1rem; }
.inv-card .nm { position: relative; font-weight: 800; font-size: .88rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inv-card .sub { position: relative; color: var(--dim); font-size: .76rem; }
.inv-card .price { font-family: var(--font-d); font-weight: 900; color: var(--gold); font-size: .95rem; }
.inv-card .tag { position: absolute; top: .5rem; right: .5rem; z-index: 1; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: rgba(61,220,132,.15); color: var(--green); border: 1px solid rgba(61,220,132,.4); border-radius: 6px; padding: .15rem .45rem; }
.inv-card .tag.sell { background: rgba(255,209,102,.15); color: var(--gold); border-color: rgba(255,209,102,.4); }
.inv-card form { display: inline; }
.pager { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.hub-filters { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: -1rem 0 1.2rem; }
.chip { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); font-size: .82rem; font-weight: 700; cursor: pointer; background: transparent; }
.chip.on { color: var(--txt); border-color: var(--btn); background: rgba(199,176,110,.14); }
.hub-filters input { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--txt); border-radius: 999px; padding: .35rem .8rem; font: 600 .85rem var(--font); }
.srv.hide { display: none; }
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.mapc { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: .78rem; }
.mapc .im { height: 64px; background: var(--surface-2) center/cover; }
.mapc .t { padding: .35rem .5rem; font-weight: 700; }
.mapc.cur { border-color: var(--accent); }
.metric-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; }

.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .7rem; margin-bottom: 1rem; align-items: end; }
.pod { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; position: relative; overflow: hidden; }
.pod img { width: 64px; height: 64px; border-radius: 16px; border: 3px solid var(--pc); }
.pod b { font-family: var(--font-d); font-size: 1.4rem; color: var(--pc); }
.pod .n { font-weight: 800; } .pod .v { color: var(--gold); font-weight: 800; font-family: var(--font-d); }
.pod.p1 { --pc: #ffd166; order: 2; padding-top: 1.6rem; box-shadow: 0 0 40px rgba(255,209,102,.12) inset; }
.pod.p2 { --pc: #cfd8e3; order: 1; } .pod.p3 { --pc: #d39a6a; order: 3; }
.tbl tr.me td { background: rgba(255,122,26,.08); }
@media (max-width: 700px) { .podium { grid-template-columns: 1fr; } .pod.p1, .pod.p2, .pod.p3 { order: 0; } }

/* --- турниры --- */
.tour .body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.tour.featured { border-color: rgba(255,209,102,.45); box-shadow: 0 0 30px rgba(255,209,102,.08) inset; }
.feat { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: linear-gradient(90deg, rgba(255,122,26,.16), var(--surface) 70%); border: 1px solid rgba(255,122,26,.4); border-radius: var(--r); padding: .9rem 1.2rem; margin: -.6rem 0 1.4rem; }
.feat b { font-family: var(--font-d); font-size: 1.15rem; }
.feat .btn { margin-left: auto; }
.bracket { display: flex; gap: 1.2rem; align-items: stretch; overflow-x: auto; padding-bottom: .5rem; }
.round { display: flex; flex-direction: column; justify-content: space-around; gap: .7rem; min-width: 220px; }
.round .rt { text-align: center; color: var(--dim); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.match { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; font-size: .88rem; }
.match.done { border-color: var(--line-2); }
.match .side { display: flex; justify-content: space-between; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.match .side:last-child { border-bottom: 0; }
.match .side.win { background: rgba(61,220,132,.12); font-weight: 800; }
.match .side b { color: var(--gold); font-variant-numeric: tabular-nums; }
.match input { background: var(--surface); border: 1px solid var(--line-2); color: var(--txt); border-radius: 6px; padding: .25rem .4rem; font: .85rem var(--font); }
.rank-badge .rk { height: 26px; width: auto; }   /* 04.09: своя медаль 2:1 — при 18px не читалась */
.rank-badge.big { font-size: 1rem; padding: .35rem .8rem; } .rank-badge.big .rk { height: 40px; }
.xp { margin-top: .5rem; max-width: 420px; } .xp .bar { height: 8px; }
.srv .tile .online { position: absolute; bottom: .9rem; right: 1rem; font-size: .8rem; font-weight: 800; background: rgba(0,0,0,.45); padding: .2rem .55rem; border-radius: 6px; backdrop-filter: blur(6px); }

/* --- пополнение --- */
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .9rem .6rem; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--bg-2); cursor: pointer; }
.pack input { position: absolute; opacity: 0; }
.pack:has(input:checked) { border-color: var(--accent); background: rgba(255,122,26,.1); box-shadow: 0 0 0 1px var(--accent) inset; }
.pack b { font-family: var(--font-d); font-size: 1.1rem; color: var(--gold); } .pack span { color: var(--dim); font-size: .9rem; } .pack em { color: var(--dim); font-size: .75rem; font-style: normal; }
.pack i { position: absolute; top: -.5rem; right: .5rem; font-style: normal; font-size: .65rem; font-weight: 800; background: var(--accent); color: #1a0d00; padding: .1rem .45rem; border-radius: 999px; }
.topup { padding: .35rem .7rem; }
@media (max-width: 860px) { .topup { display: none; } }

/* T3: колокольчик уведомлений, XP, достижения, ежедневный бонус */
.bell-wrap { position: relative; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 1rem; }
.bell b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #1a0d00; font-size: .68rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.bell-dd { position: absolute; right: 0; top: 44px; width: 340px; max-width: 90vw; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); z-index: 30; overflow: hidden; }
.bell-h { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.bell-list { max-height: 380px; overflow: auto; }
.bell-item { display: block; padding: .55rem .8rem; border-bottom: 1px solid var(--line); font-size: .85rem; }
.bell-item.unread { background: rgba(255,122,26,.07); }
.bell-item .k { color: var(--accent); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.bell-item .t { font-weight: 700; } .bell-item .b { color: var(--dim); font-size: .8rem; } .bell-item .d { color: var(--mute); font-size: .72rem; }
.notif-row { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.notif-row.unread { background: rgba(255,122,26,.05); }
.notif-row .k { min-width: 84px; }
.lvl { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid rgba(179,136,255,.45); color: var(--purple); font-weight: 800; font-size: .8rem; background: rgba(179,136,255,.1); }
.xpbar { height: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.ach { display: flex; gap: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: .8rem; position: relative; }
.ach .ic { font-size: 1.7rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface-2); flex: none; }
.ach .bar { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin-top: .4rem; } .ach .bar i { display: block; height: 100%; background: var(--accent); }
.ach.bronze { border-color: rgba(211,154,106,.5); } .ach.silver { border-color: rgba(207,216,227,.5); } .ach.gold { border-color: rgba(255,209,102,.6); box-shadow: 0 0 0 1px rgba(255,209,102,.15) inset; }
.tier { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .1rem .45rem; border-radius: 6px; border: 1px solid var(--line-2); color: var(--dim); }
.tier.bronze { color: #d39a6a; border-color: rgba(211,154,106,.5); } .tier.silver { color: #cfd8e3; border-color: rgba(207,216,227,.5); } .tier.gold { color: var(--gold); border-color: rgba(255,209,102,.6); }
.daily { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.daily .d { text-align: center; padding: .5rem .2rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); font-size: .8rem; }
.daily .d b { display: block; font-family: var(--font-d); color: var(--gold); } .daily .d.done { opacity: .45; } .daily .d.next { border-color: var(--accent); background: rgba(255,122,26,.1); }
.trophies { display: flex; flex-wrap: wrap; gap: .4rem; } .trophies .tr { padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: .8rem; }
/* T3/R.3,R.6: селектор режимов, закреплённая строка, пагинация, вкладки профиля */
.mode-sel { display: flex; gap: .45rem; flex-wrap: wrap; }
.mode-chip { display: inline-flex; flex-direction: column; gap: .1rem; padding: .45rem .8rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); min-width: 96px; transition: .15s; }
.mode-chip b { font-size: .82rem; } .mode-chip span { font-size: .72rem; font-weight: 800; }
.mode-chip:hover { border-color: var(--accent); } .mode-chip.on { border-color: var(--accent); background: rgba(255,122,26,.12); }
.tbl tr.pinned td { background: rgba(179,136,255,.1); border-bottom: 2px solid rgba(179,136,255,.4); }
.pager { display: flex; gap: .8rem; align-items: center; justify-content: center; }
.profile-h .pill { vertical-align: middle; }
@media (max-width: 760px) { .mode-chip { min-width: 0; } .tabs { overflow-x: auto; scrollbar-width: none; } .tabs a { white-space: nowrap; } }

/* T3/R.7 сетка режимов, лента онлайна; R.8 Pick'em */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; }
.mode-card { display: flex; flex-direction: column; gap: .25rem; padding: .8rem .9rem; border-radius: var(--r-s); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--accent)); background: var(--surface); transition: .15s; }
.mode-card:hover { transform: translateY(-2px); border-color: var(--c, var(--accent)); box-shadow: var(--shadow); }
.mode-card.pk { border-left-color: var(--purple); background: linear-gradient(135deg, rgba(179,136,255,.12), var(--surface)); }
.live { max-height: 220px; overflow: auto; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .7rem; }
.pk-row { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: .6rem .7rem; }
.pk-row.done { opacity: .85; }
/* Баннеры под первым окном лобби: у каждого свой арт, текст слева, «?» — справка по настройкам. */
.lb-bnr { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .6rem; margin: .8rem 0; }
.lb-tile { position: relative; display: block; overflow: hidden; min-height: 138px; width: 100%; text-align: left;
  padding: .8rem 40% .8rem .9rem; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--surface) 42%, color-mix(in srgb, var(--tc) 12%, var(--surface)) 100%);
  color: var(--txt); font: inherit; cursor: pointer; transition: .16s; }
.lb-tile::after { content: ""; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc); }
/* Вуаль поверх арта: без неё фигура наезжает на текст и подпись становится нечитаемой. */
.lb-tile::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, var(--surface) 34%, color-mix(in srgb, var(--surface) 70%, transparent) 58%, transparent 82%); }
.lb-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tc) 45%, var(--line)); }
.lb-tile.is-static { cursor: default; }
.lb-tile.is-static:hover { transform: none; }
.lb-art { position: absolute; right: -2%; bottom: -4%; height: 108%; width: auto; z-index: 0;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); pointer-events: none; }
.lb-txt { position: relative; z-index: 2; display: block; }
.lb-txt b { display: block; font: 800 .95rem var(--font); }
.lb-txt .dim.small { display: block; margin-top: .2rem; }
.lb-q { position: absolute; z-index: 2; top: .55rem; right: .6rem; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(6,9,14,.72); border: 1px solid var(--line-2);
  color: var(--dim); font: 800 .74rem var(--font); }
.lb-tile:hover .lb-q { color: var(--btn); border-color: var(--btn); }
@media (max-width: 560px) { .lb-tile { padding-right: 34%; min-height: 120px; } }
.lb-head .pb-in .row { margin-top: .6rem; }
/* Двое в полный рост: общий баннерный кроп (152% с уходом вниз) срезал им головы —
   поэтому фигура вписана в баннер целиком и стоит на его нижней кромке.
   ‼️ Правило намеренно объявлено ДВУМЯ классами одного элемента (0,3,0): у `.lb-head .art` и у
   общего `.page-banner .art` специфичность была одинаковой (0,2,0), и побеждало то, что ниже по
   файлу, — общее. Оно ставит фигуру в 152% высоты со сдвигом на -22%, и `overflow: hidden`
   баннера съедал верхние ~30%, то есть ровно головы. Правим специфичностью, а не `!important`.
   PNG обрезан по контуру вплотную (альфа-bbox = весь кадр), поэтому запаса сверху нет:
   любой выход за верхний край — это сразу срез по голове. Отсюда height: 100% и bottom: 0,
   а рост фигуры компенсируем высотой самого баннера. */
.page-banner.lb-head { min-height: 320px; }
.page-banner.lb-head .art { height: 100%; bottom: 0; top: auto; right: 1.5rem; }
@media (max-width: 1100px) { .page-banner.lb-head { min-height: 260px; } }
.lnew-fld { display: grid; gap: .25rem; }
.lhelp-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.lhelp-list { display: grid; gap: .3rem; margin: 0; }
.lhelp-list > div { display: grid; gap: .1rem; padding: .4rem .55rem; border-radius: 8px; background: var(--surface-2); }
.lhelp-list dt { font: 700 .84rem var(--font); }
.lhelp-list dd { margin: 0; color: var(--dim); font-size: .8rem; }

/* Предикт: переключатель «показать все» и полоса дневной квоты ставок. */
.pd-filter { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* B.2: полоса дневной квоты ставок в предикт-лиге. */
.bet-quota { display: grid; gap: .35rem; padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); }
.bq-bar { display: flex; gap: .3rem; }
.bq-bar i { flex: 1; height: 8px; border-radius: 999px; background: var(--line-2); }
.bq-bar i.on { background: var(--btn); }

.pk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .4rem; }
.pk-side { display: flex; flex-direction: column; gap: .25rem; padding: .5rem .6rem; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); }
.pk-side.my { border-color: var(--accent); background: rgba(255,122,26,.1); }
.pk-side.win { border-color: rgba(61,220,132,.5); }
.pk-side .btn { margin-top: .2rem; }

/* T4/F.1 кейсы: карточки, карусель, лента */
.case-card .pic { height: 140px; background: linear-gradient(135deg, rgba(255,122,26,.12), var(--surface-2)); display: flex; align-items: center; justify-content: center; }
.case-card .pic img { max-height: 100%; object-fit: contain; padding: .6rem; } .case-card .pic .ph { font-size: 3rem; }
.case-card .body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.case-card .price { font-family: var(--font-d); font-weight: 900; color: var(--gold); }
.reel-wrap { position: relative; overflow: hidden; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--bg-2); height: 118px; }
.reel-needle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); z-index: 2; }
.reel { display: flex; gap: 6px; padding: 8px; will-change: transform; }
.rc { flex: none; width: 150px; height: 100px; border-radius: 8px; border: 1px solid var(--line-2); border-bottom: 3px solid var(--c, var(--line-2)); background: linear-gradient(180deg, var(--surface), var(--bg-2)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center; padding: .3rem; font-size: .78rem; font-weight: 700; }
.rc img { max-height: 56px; max-width: 90%; object-fit: contain; }
.case-result { margin-top: 1rem; padding: 1rem; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--bg-2); display: flex; flex-direction: column; gap: .6rem; }
.case-result.rare { border-color: var(--gold); box-shadow: 0 0 24px rgba(255,209,102,.25); }
.case-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.case-feed.col { grid-template-columns: 1fr; max-height: 360px; overflow: auto; }
.cf { display: flex; gap: .6rem; align-items: center; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line-2)); background: var(--surface); font-size: .85rem; }
.cf img { width: 44px; height: 32px; object-fit: contain; } .cf .ph { width: 44px; text-align: center; font-size: 1.2rem; }

/* T4/F.2 миссии, F.3 стрик */
.streak-w { display: inline-flex; align-items: center; gap: .1rem; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); font-weight: 800; font-size: .85rem; }
.streak-w.on { color: var(--accent); border-color: rgba(255,122,26,.45); background: rgba(255,122,26,.1); }
/* Экран «Ежедневное» (экономика v2 §5): чек-ин, серия и дневная норма билетов — три карточки в одной полосе.
   Полоса намеренно неравномерная: серия — главная, поэтому шире соседей. */
.daily-strip { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(280px, 1.6fr) minmax(180px, .9fr); gap: .8rem; align-items: start; }
.daily-strip .ds-card { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 14px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .55rem; }
.daily-strip .ds-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.daily-strip .ds-big { font-family: var(--font-d); font-weight: 900; font-size: 2.1rem; line-height: 1; }
.daily-strip .ds-dots { display: flex; gap: .25rem; }
.daily-strip .ds-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.daily-strip .ds-dots i.on { background: var(--gold); }
.daily-strip .ds-streak { border-color: rgba(255,122,26,.35); box-shadow: inset 0 0 40px rgba(255,122,26,.06); }
.daily-strip .medal { min-width: 72px; padding: .35rem .5rem; }
@media (max-width: 900px) { .daily-strip { grid-template-columns: 1fr; } }
.streak-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.sd { text-align: center; padding: .4rem .2rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); font-weight: 800; font-size: .9rem; display: flex; flex-direction: column; gap: .1rem; }
.sd span { font-size: .65rem; color: var(--mute); font-weight: 600; }
.sd.ok { color: var(--green); border-color: rgba(61,220,132,.4); } .sd.freeze { color: var(--cyan); border-color: rgba(45,212,255,.4); }
.sd.miss { color: var(--red); opacity: .7; } .sd.today { color: var(--accent); border-color: rgba(255,122,26,.5); }
.medals { display: flex; gap: .5rem; flex-wrap: wrap; } .medal { padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); text-align: center; min-width: 90px; opacity: .45; }
.medal.have { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255,209,102,.15) inset; } .medal b { display: block; font-family: var(--font-d); }
.quest .take { display: flex; gap: .4rem; align-items: center; }
.mission-bar { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-radius: var(--r-s); border: 1px solid rgba(45,212,255,.35); background: rgba(45,212,255,.07); margin-bottom: 1rem; }

/* T4/F.4 косметика: стили карточки профиля, превью стилей */
.profile-h.style-neon { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(45,212,255,.35), 0 0 28px rgba(45,212,255,.25); }
.profile-h.style-gold { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255,209,102,.4), 0 0 28px rgba(255,209,102,.2); }
.profile-h.style-cyan { border-color: rgba(45,212,255,.6); background: linear-gradient(135deg, rgba(45,212,255,.12), var(--surface-2)); }
.profile-h.style-purple { border-color: var(--purple); box-shadow: 0 0 24px rgba(179,136,255,.25); }
.profile-h.style-fire { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255,122,26,.45), 0 0 32px rgba(255,122,26,.3); }
/* награда за веху стрика 30 дней: рамка «горит» бегущей искрой — её нельзя купить, только выстоять серию */
.profile-h.style-streak30 { border-color: transparent; background-clip: padding-box; position: relative; }
.profile-h.style-streak30::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--sa, 0deg), var(--gold), var(--accent), var(--cyan), var(--gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: streak30 6s linear infinite; }
@property --sa { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes streak30 { to { --sa: 360deg; } }
@media (prefers-reduced-motion: reduce) { .profile-h.style-streak30::after { animation: none; } }
.style-prev { font-family: var(--font-d); font-weight: 900; font-size: 1rem; padding: .5rem .9rem; border-radius: 10px; border: 2px solid var(--line-2); }
.style-prev.neon { border-color: var(--cyan); box-shadow: 0 0 14px rgba(45,212,255,.5); color: var(--cyan); }
.style-prev.gold { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px rgba(255,209,102,.4); }
.style-prev.cyan { border-color: rgba(45,212,255,.6); color: var(--cyan); } .style-prev.purple { border-color: var(--purple); color: var(--purple); }
.style-prev.fire { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 14px rgba(255,122,26,.5); }

/* T5: PUG */
.pug-card .bar { height: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .pug-card .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--accent)); }
.pug-list { display: flex; flex-wrap: wrap; gap: .3rem; }

/* полировка: мобильный — схлопывание inline-сеток 2 колонки, нижний таб-бар, FAQ */
.tabbar { display: none; }
.faq summary { cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq + .faq { margin-top: .6rem; }
@media (max-width: 760px) {
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns:1.1fr .9fr"], [style*="grid-template-columns:1.3fr .9fr"] { grid-template-columns: 1fr !important; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .profile-h { flex-direction: column; align-items: flex-start; } .profile-h > div:last-child { text-align: left; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(10,13,19,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .66rem; color: var(--dim); font-weight: 700; }
  .tabbar a span { font-size: 1.1rem; } .tabbar a.on { color: var(--accent); }
  main.wrap { padding-bottom: 4.2rem; } .foot { padding-bottom: 4.5rem; }
  .user .btn.ghost { display: none; }
  .reel-wrap { height: 100px; } .rc { width: 120px; height: 84px; }
  .pk-pair { grid-template-columns: 1fr; } .bracket .round { min-width: 180px; }
}

/* ---- предикт-лига ---- */
.pd-progress { margin-top: .8rem; max-width: 720px; }
.pd-bar { height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; margin-top: .35rem; }
.pd-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), #ffb066); transition: width .4s; }
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .9rem; }
.pd-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.pd-card.done { opacity: .82; }
.pd-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.pd-boost, .pd-bo { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-2); border-radius: 6px; padding: .15rem .45rem; color: var(--dim); }
.pd-boost { color: var(--accent); border-color: rgba(255,122,26,.45); }
.pd-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; padding: .3rem 0; }
.pd-team { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; min-width: 0; }
.pd-team b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pd-logo { width: 64px; height: 64px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.pd-logo img { max-width: 52px; max-height: 52px; object-fit: contain; }
.pd-logo span { font-weight: 900; font-family: var(--font-d); color: var(--dim); }
.pd-score { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; text-align: center; }
.pd-score b { display: block; font-family: var(--font-d); font-size: 1.5rem; font-weight: 900; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; min-width: 2.2rem; padding: .15rem .4rem; }
.pd-sec { display: flex; align-items: center; gap: .5rem; color: var(--dim); font-size: .78rem; font-weight: 700; }
.pd-sec::before, .pd-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pd-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pd-choices.c3 { grid-template-columns: repeat(3, 1fr); }
.pd-choices form { display: contents; }
.pd-opt { width: 100%; padding: .55rem .4rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 800; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; }
.pd-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.pd-opt.sel { background: linear-gradient(180deg, rgba(255,122,26,.95), rgba(230,100,10,.95)); border-color: transparent; color: #1a1208; }
.pd-opt.win { box-shadow: inset 0 0 0 1px rgba(61,220,132,.6); }
.pd-opt:disabled { cursor: default; opacity: .7; }
.pd-odds { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pd-odd { display: grid; grid-template-columns: 1fr auto; gap: .25rem .4rem; align-items: center; padding: .45rem .55rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); }
.pd-odd .nm { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-odd b { font-size: 1.15rem; }
.pd-odd input { grid-column: 1; width: 100%; min-width: 0; }
.pd-odd .btn { grid-column: 2; }
.pd-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: .45rem; }
.pd-raffle { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(45,212,255,.14), rgba(255,122,26,.12)), var(--bg-2); }
.pd-raffle-head { padding: .5rem .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; background: rgba(45,212,255,.18); color: var(--cyan); }
.pd-raffle-body { padding: .8rem; }
.pd-prize { display: block; width: 100%; max-height: 150px; object-fit: contain; margin: .4rem auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
@media (max-width: 900px) { .pd-layout { grid-template-columns: 1fr; } .pd-side { order: -1; } .pd-grid { grid-template-columns: 1fr; } }

/* ---- кейсы v2: лента как в CS ---- */
.reel-wrap { height: 150px; background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.04), transparent 60%), var(--bg-2); }
.reel-needle { width: 3px; background: var(--gold); box-shadow: 0 0 14px var(--gold), 0 0 2px #fff; }
.reel-needle::before, .reel-needle::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 8px solid transparent; }
.reel-needle::before { top: -2px; border-top: 10px solid var(--gold); }
.reel-needle::after { bottom: -2px; border-bottom: 10px solid var(--gold); }
.reel-fade { position: absolute; top: 0; bottom: 0; width: 18%; z-index: 2; pointer-events: none; }
.reel-fade.l { left: 0; background: linear-gradient(90deg, var(--bg-2), transparent); }
.reel-fade.r { right: 0; background: linear-gradient(270deg, var(--bg-2), transparent); }
.reel-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(60% 100% at 50% 50%, rgba(255,209,102,.55), transparent 70%); transition: opacity .25s; }
.reel-flash.on { opacity: 1; animation: reelFlash 1.2s ease-out forwards; }
@keyframes reelFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.reel { gap: 8px; padding: 10px; }
.rc { width: 170px; height: 130px; border-radius: 10px; border: 1px solid var(--line-2); border-bottom: 4px solid var(--c, var(--line-2)); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%), var(--surface); gap: .35rem; padding: .4rem .5rem; font-size: .78rem; overflow: hidden; position: relative; }
.rc::before { content: ""; position: absolute; inset: auto 0 0 0; height: 46px; background: linear-gradient(0deg, color-mix(in srgb, var(--c, #888) 22%, transparent), transparent); pointer-events: none; }
.rc img { max-height: 70px; max-width: 92%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); position: relative; }
.rc .ph { font-size: 2rem; }
.rc .nm { position: relative; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc.win { border-color: var(--c, var(--gold)); box-shadow: 0 0 0 2px var(--c, var(--gold)), 0 0 28px color-mix(in srgb, var(--c, var(--gold)) 55%, transparent); animation: rcWin .7s ease-out; z-index: 1; }
@keyframes rcWin { 0% { transform: scale(.96); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.case-contents { display: flex; flex-direction: column; gap: .7rem; }
.cc-group { border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line-2)); border-radius: 10px; padding: .5rem .6rem; background: var(--bg-2); }
.cc-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.cc-head b { color: var(--c, var(--text)); }
.cc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .4rem; }
.cc-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .35rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); border-bottom: 3px solid var(--c, var(--line-2)); font-size: .7rem; text-align: center; min-height: 78px; }
.cc-item img { height: 40px; max-width: 90%; object-fit: contain; }
.cc-item .ph { font-size: 1.4rem; }
.cc-item .nm { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-item.more { justify-content: center; color: var(--dim); border-style: dashed; }
@media (max-width: 700px) { .reel-wrap { height: 120px; } .rc { width: 130px; height: 100px; } .rc img { max-height: 52px; } }

/* ---- мастерская ---- */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.ws-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.ws-pic { position: relative; aspect-ratio: 16/9; background: var(--surface); }
.ws-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-size { position: absolute; right: .4rem; bottom: .4rem; font-size: .68rem; font-weight: 800; background: rgba(0,0,0,.55); padding: .1rem .4rem; border-radius: 6px; }
.ws-body { padding: .6rem .7rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.ws-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-preview img { max-height: 72px; }

/* ---- стикеры: редактор ---- */
.st-editor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.st-preview { position: relative; aspect-ratio: 16/9; border-radius: var(--r); border: 1px solid var(--line); background: radial-gradient(80% 80% at 50% 50%, rgba(255,255,255,.05), transparent 70%), var(--bg-2); overflow: hidden; touch-action: none; }
.st-weapon { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 12px 20px rgba(0,0,0,.5)); }
.st-overlay { position: absolute; width: 11%; height: auto; cursor: grab; transform-origin: center; user-select: none; }
.st-slots { display: flex; flex-direction: column; gap: .5rem; }
.st-slot { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; background: var(--bg-2); display: flex; flex-direction: column; gap: .35rem; }
.st-slot-head { display: flex; justify-content: space-between; align-items: center; }
.st-ctrls { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .3rem .6rem; font-size: .75rem; color: var(--dim); }
.st-ctrls label { display: flex; flex-direction: column; gap: .15rem; }
.st-ctrls input[type=range] { width: 100%; }
@media (max-width: 900px) { .st-editor { grid-template-columns: 1fr; } }

/* ---- предикт: топ-фраггер ---- */
.pd-face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .35rem; }
.pd-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; margin: .4rem 0 .6rem; }
.pd-faces form { display: contents; }
.pd-face-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .4rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; font-size: .78rem; }
.pd-face-card img, .pd-face-ph { width: 72px; height: 88px; object-fit: cover; object-position: top; border-radius: 8px; background: var(--bg-2); display: grid; place-items: center; font-weight: 900; color: var(--dim); }
.pd-face-card:hover { border-color: var(--accent); } .pd-face-card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,122,26,.5); }
.pd-top { display: flex; flex-direction: column; gap: .25rem; }
.pd-top-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-2); font-size: .85rem; }
.pd-top-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: top; }
.pd-top-row.win { border-color: rgba(255,209,102,.6); }

/* ---- предикт: блок ставки ---- */
.bet-box { border: 1px solid var(--line-2); border-radius: 12px; padding: .5rem .6rem; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--surface); display: flex; flex-direction: column; gap: .45rem; }
.bet-sides { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.bet-side { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .45rem .6rem; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); cursor: pointer; font-weight: 700; font-size: .82rem; transition: border-color .15s, background .15s; }
.bet-side .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bet-side b { font-size: 1.05rem; }
.bet-side:hover:not(:disabled) { border-color: var(--accent); }
.bet-side.sel { border-color: var(--accent); background: rgba(255,122,26,.12); box-shadow: inset 0 0 0 1px rgba(255,122,26,.35); }
.bet-side:disabled { opacity: .6; cursor: default; }
.bet-form { display: flex; flex-direction: column; gap: .35rem; }
.bet-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.bet-chip { padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--dim); font-size: .74rem; font-weight: 700; cursor: pointer; }
.bet-chip:hover { border-color: var(--accent); color: var(--text); }
.bet-row { display: grid; grid-template-columns: minmax(84px, 110px) 1fr; gap: .4rem; }
.bet-row input { width: 100%; padding: .45rem .55rem; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-weight: 700; text-align: center; }
.bet-row input::-webkit-outer-spin-button, .bet-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bet-row input[type=number] { -moz-appearance: textfield; }
.bet-go { width: 100%; justify-content: center; }
.bet-go span { font-weight: 700; margin-left: .3rem; }

/* ---- мобильное меню «Ещё» ---- */
.more-btn { display: none; background: none; border: 0; cursor: pointer; font-family: inherit; }
.more-sheet { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; }
.more-sheet[hidden] { display: none; }
.more-box { width: 100%; max-height: 82vh; overflow: auto; background: var(--bg-2); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .7rem; animation: sheetUp .18s ease-out; }
@keyframes sheetUp { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }
.more-me { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); font-weight: 700; }
.more-me img { width: 28px; height: 28px; border-radius: 50%; }
.more-me .coins { margin-left: auto; }
.more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.more-grid a { display: flex; align-items: center; gap: .4rem; padding: .6rem .7rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .88rem; }
.more-grid a:active { border-color: var(--accent); }
@media (max-width: 760px) { .more-btn { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .66rem; color: var(--dim); font-weight: 700; } .more-btn span { font-size: 1.1rem; } .more-btn[aria-expanded="true"] { color: var(--accent); } }
@media (min-width: 761px) { .more-sheet { display: none !important; } }

.pd-team-line { display: flex; align-items: center; gap: .4rem; margin: .25rem 0 -.1rem; }
.pd-team-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pd-face-card:disabled { opacity: .55; cursor: default; }

.pd-hint { padding: .3rem .1rem .1rem; }

/* ---- выбор карт в лобби ---- */
.map-tabs { display: flex; gap: .4rem; margin-bottom: .5rem; }
.map-pane { margin-bottom: .3rem; }
.map-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .4rem; max-height: 280px; overflow: auto; padding: .2rem; }
.map-card { position: relative; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--surface); cursor: pointer; color: var(--text); }
.map-card img { width: 100%; height: 68px; object-fit: cover; display: block; }
.map-card span { display: block; padding: .25rem .35rem; font-size: .72rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-card:hover { border-color: var(--accent); }
.map-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.map-card.on::after { content: "✓"; position: absolute; top: .2rem; right: .3rem; font-weight: 900; color: var(--accent); text-shadow: 0 1px 3px #000; }


/* ---- настройки лобби ---- */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .4rem .8rem; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: .82rem; }
.opt input[type=number], .opt select { max-width: 130px; }
.opt.flag { cursor: pointer; }
.opt.off { opacity: .55; }
.opt-grid.fun .opt { border-color: rgba(255,122,26,.35); }

/* ---- инвентарь: фильтры и коллекции ---- */
.inv-filters { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.inv-filters .grow { flex: 1; min-width: 180px; }
.lo-panel { padding: .7rem .8rem; }
.lo-chip { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); overflow: hidden; }
.lo-chip.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,122,26,.35); }
.lo-apply { background: none; border: 0; color: var(--text); font: inherit; font-weight: 700; font-size: .82rem; padding: .3rem .2rem .3rem .7rem; cursor: pointer; }
.lo-del { background: none; border: 0; color: var(--dim); cursor: pointer; padding: .3rem .6rem .3rem .3rem; }
.lo-del:hover { color: var(--red); }

/* ---- статистика матча ---- */
.stat-tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.stat-team { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; border-bottom: 1px solid var(--line); padding-bottom: .2rem; }

/* ---- чат лобби (X.9) ---- */
.chat-box { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; padding-right: .2rem; }
.chat-line { font-size: .88rem; line-height: 1.35; }
.chat-line.sys { color: var(--dim); font-style: italic; }

/* ---- клипы (X.10) ---- */
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.clip-card { display: flex; flex-direction: column; gap: .5rem; }
.clip-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.clip-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clip-best { border-color: rgba(255,122,26,.45); box-shadow: 0 0 0 1px rgba(255,122,26,.18) inset; }

/* ---- раздел розыгрышей (Y.3) ---- */
.rf-hero { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: 1.2rem; align-items: center; }
.rf-prize { display: flex; justify-content: center; align-items: center; min-height: 150px; background: radial-gradient(circle at 50% 40%, rgba(45,212,255,.16), transparent 70%); border-radius: 12px; }
.rf-prize img { max-width: 100%; max-height: 190px; object-fit: contain; }
.rf-stats { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 720px) { .rf-hero { grid-template-columns: 1fr; } }

/* ---- объединённый раздел прогресса (Y.2/Y.4) ---- */
.pg-hero { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.pg-hero .grow { flex: 1; min-width: 260px; }
.pg-chev { display: flex; align-items: center; gap: .7rem; }
.pg-chev-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; font-weight: 800;
  color: var(--cc); border: 1px solid var(--cc); background: color-mix(in srgb, var(--cc) 12%, transparent); }
.pg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.pg-card { display: flex; flex-direction: column; gap: .45rem; text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.pg-card:hover { transform: translateY(-2px); border-color: rgba(255,122,26,.45); }
.pg-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.pg-step { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--line); opacity: .45; }
.pg-step.on { opacity: 1; border-color: var(--cc); background: color-mix(in srgb, var(--cc) 8%, transparent); }

/* ---- достижения: категории + сводка (Z.1) ---- */
.ach-layout { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 1rem; align-items: start; }
.ach-cats { display: flex; flex-direction: column; gap: .2rem; padding: .4rem; }
.ach-cat { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .6rem;
  border-radius: 10px; text-decoration: none; color: inherit; }
.ach-cat span:first-child { display: flex; flex-direction: column; }
.ach-cat:hover { background: rgba(255,255,255,.04); }
.ach-cat.on { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px rgba(255,122,26,.35); }
.tier-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; opacity: .3; display: inline-block; }
.tier-dot.on { opacity: 1; background: currentColor; }
.tier-dot.bronze { color: #cd7f32; } .tier-dot.silver { color: #c0c8d4; } .tier-dot.gold { color: #ffd166; }
@media (max-width: 860px) { .ach-layout { grid-template-columns: 1fr; } }

/* ---- витрина раздела лобби (Z.4) ---- */
.lb-promo { display: grid; grid-template-columns: 1.15fr 1fr .9fr; gap: 1rem; align-items: stretch; }
.lb-hero, .lb-tile, .lb-clip { display: flex; flex-direction: column; gap: .45rem; padding: .9rem 1rem; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.lb-hero { justify-content: space-between; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.lb-hero b { font-size: 1.25rem; }
.lb-tiles { display: flex; flex-direction: column; gap: .5rem; }
.lb-tiles .lb-tile { padding: .55rem .75rem; gap: .15rem; }
.lb-hero:hover, .lb-tile:hover, .lb-clip:hover { transform: translateY(-2px); border-color: rgba(255,122,26,.45); }
@media (max-width: 900px) { .lb-promo { grid-template-columns: 1fr; } }


/* ================= дизайн-проход 27.08 (референс: cybershoke / xplay) =================
   Смысл, а не копия: тёмная «арена» остаётся нашей (оранжевый акцент), но контролы, фильтры,
   таблицы и пустые состояния приводятся к тому же уровню собранности, что на референсах. */

/* --- поля ввода: системные select/checkbox выбивались из тёмной темы --- */
input[type=text], input[type=search], input[type=number], input[type=password], input[type=email],
input:not([type]), select, textarea {
  background: var(--bg-2); color: var(--txt); border: 1px solid var(--line-2); border-radius: 10px;
  padding: .5rem .7rem; font: 600 .9rem var(--font); outline: none; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--mute); font-weight: 500; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,26,.18); }
select {
  appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b97ab' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 11px;
}
select option { background: var(--surface); color: var(--txt); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
input[type=range] { accent-color: var(--accent); }
label.row input[type=checkbox] { margin: 0; }

/* --- панель фильтров: раньше ряды контролов висели в воздухе --- */
.inv-filters, .filters {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .8rem;
}
.inv-filters .grow, .filters .grow { flex: 1; min-width: 180px; }

/* --- сегментированный переключатель (период / кому показывать) --- */
.seg { display: inline-flex; gap: .15rem; padding: .2rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; }
.seg a, .seg button { padding: .35rem .85rem; border-radius: 999px; border: 0; background: transparent; color: var(--dim);
  font: 700 .84rem var(--font); cursor: pointer; white-space: nowrap; transition: .15s; }
.seg a:hover, .seg button:hover { color: var(--txt); }
.seg a.on, .seg button.on { color: #1a0d00; background: linear-gradient(135deg, var(--accent), #ff9a3c); box-shadow: 0 4px 14px rgba(255,122,26,.28); }
.seg.quiet a.on, .seg.quiet button.on { color: var(--txt); background: var(--surface-2); box-shadow: none; }

/* --- строка настройки «подпись → значение» (как в панели лобби у xplay) --- */
.setrow { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem .1rem;
  border-bottom: 1px solid var(--line); font-size: .9rem; }
.setrow:last-child { border-bottom: 0; }
.setrow > span:first-child { color: var(--dim); }
.setrow select, .setrow input[type=number] { min-width: 116px; }

/* --- таблицы: заголовок-капс уже есть, добавляем читаемость и «мою» строку --- */
.tbl thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.tbl tbody tr { transition: background .12s; }
.tbl tr.me td:first-child, .tbl tr.pinned td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tbl-wrap { overflow-x: auto; border-radius: var(--r); }

/* --- пустые состояния: было просто серым текстом посередине --- */
.empty { padding: 2rem 1.2rem; text-align: center; color: var(--dim); display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.empty::before { content: "◍"; font-size: 1.6rem; color: var(--line-2); line-height: 1; }
.empty .btn { margin-top: .3rem; }

/* --- витрина лобби: карточка растягивалась пустотой --- */
.lb-hero { justify-content: flex-start; gap: .6rem; }
.lb-hero .btn { margin-top: auto; }

/* --- мелкая полировка --- */
.panel { border-radius: var(--r); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; color: var(--accent); }
details[open] > summary::before { content: "▾ "; }

/* --- медальные карточки достижений и видимые прогресс-треки --- */
.bar { border: 1px solid var(--line); }                 /* трек виден даже при 0% */
.ach .ic { position: relative; width: 52px; height: 52px; font-size: 1.6rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--surface-2), var(--bg-2)); border: 2px solid var(--line-2); }
.ach.bronze .ic { border-color: #cd7f32; background: radial-gradient(circle at 50% 30%, rgba(205,127,50,.35), var(--bg-2)); }
.ach.silver .ic { border-color: #c0c8d4; background: radial-gradient(circle at 50% 30%, rgba(192,200,212,.32), var(--bg-2)); }
.ach.gold .ic { border-color: var(--gold); background: radial-gradient(circle at 50% 30%, rgba(255,209,102,.35), var(--bg-2)); }
.ach.gold .ic::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 18px rgba(255,209,102,.35); }
.ach .a-desc { color: var(--accent-2); font-size: .8rem; }
.tier-sum { display: flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; padding: .15rem .5rem;
  border-radius: 999px; border: 1px solid var(--line-2); }
.tier-sum i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tier-sum.bronze i { background: #cd7f32; } .tier-sum.silver i { background: #c0c8d4; } .tier-sum.gold i { background: var(--gold); }

/* --- мобильная шапка: навигация живёт в нижнем таб-баре, сверху только бренд и профиль --- */
@media (max-width: 760px) {
  .top .nav { display: none; }
  .top .wrap { justify-content: space-between; height: 56px; }
  .user { gap: .45rem; }
  h1 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .filters, .inv-filters { padding: .6rem; }
  .seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
}

/* --- плашка лидерборда (референс: «DM LEADERS») --- */
.lb-head { display: flex; gap: 1rem; align-items: flex-start;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 60%); }
.lb-head-i { font-size: 2rem; line-height: 1; filter: drop-shadow(0 4px 12px rgba(255,209,102,.35)); }

/* --- переполнение на узких экранах: flex-дети не сжимались (min-width:auto) --- */
.lb-head .grow, .panel .grow, .filters .grow { min-width: 0; }
.lb-head h2 { overflow-wrap: anywhere; }
.seg { max-width: 100%; }
@media (max-width: 760px) {
  .lb-head { flex-wrap: wrap; }
  .lb-head-i { font-size: 1.5rem; }
  .metric-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .metric-tabs::-webkit-scrollbar { display: none; }
  .mode-sel { overflow-x: visible; }
}

@media (max-width: 760px) {
  /* фильтры в колонку: поиск на всю ширину, режимы — горизонтальной лентой */
  .filters { flex-direction: column; align-items: stretch; }
  .filters input, .filters select { max-width: 100% !important; width: 100%; }
  .filters .mode-sel { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
  .filters .mode-sel::-webkit-scrollbar { display: none; }
  .mode-chip { white-space: nowrap; }
}

/* --- лента турниров в предикте: было полотно в 6 рядов --- */
.tour-strip { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.tour-strip::-webkit-scrollbar { height: 6px; }
.tour-strip::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.tour-strip a { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--dim); font: 700 .84rem var(--font); }
.tour-strip a:hover { color: var(--txt); border-color: var(--accent); }
.tour-strip a.active { color: var(--txt); border-color: var(--accent); background: rgba(255,122,26,.12); }
/* карточки матчей плотнее на широких экранах */
@media (min-width: 1200px) { .pd-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }

/* пустое состояние внутри сетки — на всю ширину, а не одной ячейкой */
.clip-grid > .empty, .ach-grid > .empty, .pd-grid > .empty, .grid > .empty { grid-column: 1 / -1; }

/* ---- агенты: витрина персонажей ---- */
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.ag-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: transform .15s ease, border-color .15s ease; }
.ag-card:hover { transform: translateY(-2px); border-color: var(--c); }
.ag-card.owned { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.ag-pic { position: relative; height: 190px; display: grid; place-items: center; padding: .6rem;
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--c) 22%, transparent), transparent 65%), var(--bg-2); }
.ag-pic img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.ag-team { position: absolute; top: .5rem; left: .5rem; font: 800 .68rem var(--font); letter-spacing: .08em; padding: .12rem .45rem;
  border-radius: 6px; background: rgba(10,13,19,.75); border: 1px solid var(--line-2); }
.ag-team.ct { color: var(--cyan); border-color: rgba(45,212,255,.45); }
.ag-team.t { color: var(--accent); border-color: rgba(255,122,26,.45); }
.ag-on { position: absolute; top: .5rem; right: .5rem; font: 800 .66rem var(--font); text-transform: uppercase; letter-spacing: .06em;
  padding: .12rem .45rem; border-radius: 6px; color: var(--green); background: rgba(10,13,19,.75); border: 1px solid rgba(61,220,132,.45); }
.ag-body { display: flex; flex-direction: column; gap: .12rem; padding: .6rem .7rem .7rem; flex: 1; }
.ag-body .price { font-weight: 800; color: var(--gold); }

/* ---- прослушивание музыкальных наборов ---- */
.inv-card .pic { position: relative; }
.mk-play { position: absolute; right: .4rem; bottom: .4rem; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(10,13,19,.82); color: var(--txt); font-size: .9rem; line-height: 1;
  display: grid; place-items: center; transition: .15s; backdrop-filter: blur(4px); }
.mk-play:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.06); }
.mk-play.on { color: #1a0d00; background: linear-gradient(135deg, var(--accent), #ff9a3c); border-color: transparent; }

/* ---- единый магазин ---- */
.shop-tabs { flex-wrap: wrap; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.shop-cat { display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit;
  transition: transform .15s ease, border-color .15s ease; }
.shop-cat:hover { transform: translateY(-2px); border-color: rgba(255,122,26,.45); }
.shop-cat.wide { grid-column: span 2; }
.sc-icon { font-size: 1.8rem; line-height: 1; }
.sc-body { display: flex; flex-direction: column; gap: .2rem; }
.sc-pics { display: flex; gap: .3rem; align-items: center; min-height: 64px; }
.sc-pics img { height: 60px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.shop-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.shop-case { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .8rem; text-align: center;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; }
.shop-case:hover { border-color: rgba(255,122,26,.45); }
.shop-case img { height: 84px; object-fit: contain; }
.shop-case .price { color: var(--gold); font-weight: 800; font-size: .88rem; }
.more-list a.sub { padding-left: 1.6rem; opacity: .85; }
@media (max-width: 700px) { .shop-cat.wide { grid-column: span 1; } }

/* ---- ПК-меню с группами: раньше пункты не помещались в строку ---- */
.nav { align-items: center; overflow: visible; }
.nav-group { position: relative; }
.nav-top { padding: .45rem .8rem; border-radius: 999px; border: 0; background: transparent; color: var(--dim);
  font: 600 1rem var(--font); cursor: pointer; white-space: nowrap; transition: .15s; }
.nav-group:hover .nav-top, .nav-top.active, .nav-group:focus-within .nav-top { color: var(--txt); background: var(--surface-2); }
.nav-drop { position: absolute; top: 100%; left: 0; min-width: 210px; z-index: 40; display: none; margin-top: .1rem;
  flex-direction: column; padding: .35rem; border-radius: 12px; border: 1px solid var(--line-2);
  background: rgba(16,20,28,.98); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.nav-drop.right { left: auto; right: 0; }
.nav-group::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .6rem; }  /* мостик: курсор не проваливается */
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { display: flex; }
.nav-drop { padding-top: .5rem; }
.nav-drop a { padding: .45rem .7rem; border-radius: 8px; color: var(--dim); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.nav-drop a:hover, .nav-drop a.active { color: var(--txt); background: var(--surface-2); }

/* узкий десктоп: бренд без подписи, кнопки шапки не переносятся */
.user .btn, .user a { white-space: nowrap; }
@media (max-width: 1150px) {
  .brand span { display: none; }
  .nav { gap: .1rem; }
  .nav a, .nav-top { padding: .45rem .6rem; font-size: .95rem; }
}

/* «сейчас в игре» у логотипа */
.online-badge { display: inline-flex; align-items: center; gap: .35rem; margin-left: .55rem; padding: .12rem .5rem;
  border-radius: 999px; border: 1px solid rgba(61,220,132,.35); background: rgba(61,220,132,.10);
  font: 800 .74rem var(--font); color: var(--green); letter-spacing: .02em; }
.online-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(61,220,132,.9);
  animation: pulse-dot 2s ease-in-out infinite; }
.online-badge span { color: var(--dim); font-weight: 700; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 760px) { .online-badge { margin-left: .35rem; } }

/* ---------------- кейсы v3: настоящие картинки, свечение, «полка» ---------------- */
.case-card { position: relative; overflow: hidden; }
.case-card .pic { position: relative; height: 170px; padding: .6rem;
  background: radial-gradient(70% 85% at 50% 62%, color-mix(in srgb, var(--glow, var(--accent)) 26%, transparent), transparent 72%),
              linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%), var(--bg-2); }
.case-card .pic::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 10px; height: 14px; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, color-mix(in srgb, var(--glow, var(--accent)) 45%, rgba(0,0,0,.6)), transparent 70%);
  filter: blur(4px); }
.case-card .pic img { position: relative; z-index: 1; max-height: 100%; max-width: 82%; object-fit: contain; padding: 0;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); transition: transform .25s ease; }
.case-card:hover .pic img { transform: translateY(-5px) scale(1.04); }
.case-card:hover { border-color: color-mix(in srgb, var(--glow, var(--accent)) 55%, var(--line-2)); }
.case-card:hover .pic { background: radial-gradient(72% 88% at 50% 60%, color-mix(in srgb, var(--glow, var(--accent)) 36%, transparent), transparent 74%),
              linear-gradient(180deg, rgba(255,255,255,.04), transparent 45%), var(--bg-2); }

/* страница кейса: герой с картинкой */
.case-hero { display: grid; grid-template-columns: 150px 1fr auto; gap: 1.1rem; align-items: center; margin-top: .4rem; }
.case-hero .ch-pic { position: relative; height: 130px; display: flex; align-items: center; justify-content: center; }
.case-hero .ch-pic::before { content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 55%, rgba(255,122,26,.28), transparent 70%); }
.case-hero .ch-pic img { position: relative; max-height: 100%; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)); }
.case-hero .ch-price { text-align: right; }
@media (max-width: 700px) {
  .case-hero { grid-template-columns: 96px 1fr; }
  .case-hero .ch-pic { height: 88px; }
  .case-hero .ch-price { grid-column: 1 / -1; text-align: left; }
}

/* картинки в результате открытия и ленте: никогда не растягивать */
.case-result img { max-height: 140px; max-width: min(320px, 70%); width: auto; height: auto; object-fit: contain; }
.case-feed .cf img { width: 44px; height: 34px; object-fit: contain; flex: none; }

/* витрина магазина: кейсы со свечением */
.shop-case { position: relative; overflow: hidden; }
.shop-case::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 42%, rgba(255,122,26,.14), transparent 70%); opacity: 0; transition: opacity .2s; }
.shop-case:hover::before { opacity: 1; }
.shop-case img { height: 92px; max-width: 88%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5));
  transition: transform .22s ease; }
.shop-case:hover img { transform: translateY(-4px) scale(1.05); }

/* ---------------- hero v2: карта под вуалью, глубина ---------------- */
.hero.hero-v2 { position: relative; margin-top: 1rem; padding: 2.6rem 2.2rem; border-radius: var(--r); border: 1px solid var(--line);
  /* Кадра карты в подложке нет (требование владельца): только тёмная заливка.
     Полосы даёт ::after, лёгкие радиальные пятна — ::before, движение — слой искр. */
  overflow: hidden; background:
    linear-gradient(90deg, rgba(9,12,18,.99) 0%, rgba(11,14,20,.96) 55%, rgba(13,17,24,.94) 100%),
    var(--bg-2); }
.hero.hero-v2::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 0% 100%, rgba(255,122,26,.22), transparent 60%),
              radial-gradient(45% 70% at 100% 0%, rgba(45,212,255,.10), transparent 60%); }
/* полосы заметнее: раньше они лежали поверх фотографии и работали как фактура,
   теперь это единственный рисунок на плоской заливке */
.hero.hero-v2::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,.028) 16px 18px); }
.hero-v2 .hero-in, .hero-v2 .stats { position: relative; z-index: 1; }
/* плашки держат контраст сами: фон плотнее и размытие сильнее, чтобы кадр карты под ними не мешал читать цифры */
.hero-v2 .stats .stat { background: rgba(12,16,23,.86); border: 1px solid var(--line-2); backdrop-filter: blur(10px); }
@media (max-width: 900px) { .hero.hero-v2 { padding: 1.8rem 1.2rem; } }

/* карточки режимов с фоном карты под затемнением */
.mode-card.has-bg { position: relative; overflow: hidden; border-left-width: 3px; }
.mode-card.has-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,17,24,.94) 30%, rgba(13,17,24,.72) 100%), var(--card-bg) right center / 62% auto no-repeat; }
.mode-card.has-bg > * { position: relative; }
.mode-card.has-bg:hover::before { background: linear-gradient(90deg, rgba(13,17,24,.90) 30%, rgba(13,17,24,.58) 100%), var(--card-bg) right center / 62% auto no-repeat; }

/* ---------------- лобби: баннер с картой, медальоны, PUG-акцент ---------------- */
.lb-hero { position: relative; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(9,12,18,.96) 20%, rgba(9,12,18,.55) 100%),
              url('/mapimg/de_inferno.jpg') right center / cover no-repeat, var(--bg-2); }
.lb-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(65% 100% at 0% 100%, rgba(255,122,26,.25), transparent 62%); }
.lb-hero > * { position: relative; }
.lb-hero .tile-s { background: rgba(15,19,27,.72); border-color: var(--line-2); backdrop-filter: blur(4px); }
.lb-tiles .lb-tile { flex-direction: row; align-items: flex-start; gap: .6rem; }
.lb-tile .ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; background: linear-gradient(135deg, color-mix(in srgb, var(--tc, var(--accent)) 26%, transparent), rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--tc, var(--accent)) 35%, var(--line-2)); }
.lb-tile:hover { border-color: color-mix(in srgb, var(--tc, var(--accent)) 55%, var(--line-2)); }
.lb-tile.pug { position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(9,12,18,.94) 30%, rgba(9,12,18,.55) 100%),
              url('/mapimg/de_ancient.jpg') right center / cover no-repeat, var(--bg-2); }
.lb-tile.pug > * { position: relative; }

/* витрина магазина: картинки категорий */
.sc-pic { height: 64px; display: flex; align-items: center; }
.sc-pic img { max-height: 64px; max-width: 110px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); transition: transform .2s; }
.shop-cat:hover .sc-pic img { transform: translateY(-3px) scale(1.05); }

/* выпадающие меню: плавное появление, акцентный ховер */
@keyframes navDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { animation: navDropIn .16s ease-out; }
.nav-drop { min-width: 230px; }
.nav-drop a { display: flex; align-items: center; gap: .55rem; border-left: 2px solid transparent; }
.nav-drop a:hover, .nav-drop a.active { border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(255,122,26,.13), var(--surface-2) 70%); }

/* магазин VIP: цветные шапки-градиенты по типу товара */
.item .pic.k-vip { background: radial-gradient(80% 120% at 50% 0%, rgba(255,209,102,.28), transparent 70%),
  repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,209,102,.05) 16px 18px), var(--surface-2); }
.item .pic.k-vip .ph { color: var(--gold); opacity: .9; text-shadow: 0 0 24px rgba(255,209,102,.55); }
.item .pic.k-skin, .item .pic.k-knife { background: radial-gradient(80% 120% at 50% 0%, rgba(255,122,26,.26), transparent 70%),
  repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,122,26,.05) 16px 18px), var(--surface-2); }
.item .pic.k-skin .ph, .item .pic.k-knife .ph { color: var(--accent-2); opacity: .9; text-shadow: 0 0 24px rgba(255,122,26,.5); }
.item .pic.k-gloves { background: radial-gradient(80% 120% at 50% 0%, rgba(61,220,132,.22), transparent 70%), var(--surface-2); }
.item .pic.k-gloves .ph { color: var(--green); opacity: .9; text-shadow: 0 0 24px rgba(61,220,132,.45); }
.item .pic.k-agent { background: radial-gradient(80% 120% at 50% 0%, rgba(45,212,255,.22), transparent 70%), var(--surface-2); }
.item .pic.k-agent .ph { color: var(--cyan); opacity: .9; text-shadow: 0 0 24px rgba(45,212,255,.45); }
.item .pic .ph { font-weight: 900; letter-spacing: .08em; }

/* результат открытия: картинка не растягивается flex-колонкой (корень бага «растянутое изображение») */
.case-result img, .case-result .cr-img { align-self: center; width: auto; height: auto; max-height: 150px; max-width: min(340px, 80%);
  object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }

/* ---------------- «сейчас в игре» у логотипа: заметная капсула ---------------- */
.online-badge { gap: .42rem; padding: .2rem .62rem .2rem .5rem; border-radius: 999px;
  border: 1px solid rgba(61,220,132,.42);
  background: linear-gradient(135deg, rgba(61,220,132,.20), rgba(61,220,132,.06) 65%), rgba(13,17,24,.6);
  box-shadow: 0 0 0 1px rgba(61,220,132,.08), 0 4px 14px rgba(61,220,132,.14); }
.online-badge .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 9px rgba(61,220,132,.95); animation: none; flex: none; }
.online-badge .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(61,220,132,.55); animation: onlineRing 2.2s ease-out infinite; }
@keyframes onlineRing { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.online-badge b { font-family: var(--font-d); font-weight: 900; font-size: .95rem; color: var(--green); line-height: 1;
  font-variant-numeric: tabular-nums; }
.online-badge span { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); font-weight: 800; }
@media (max-width: 760px) { .online-badge span { display: none; } .online-badge { padding: .2rem .5rem; } }

/* блок доверия у кнопки входа (референс xplay: «официальный API Steam») */
.steam-trust { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(15,19,27,.6); }
.steam-trust .sh { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: .95rem; background: linear-gradient(135deg, rgba(45,212,255,.25), rgba(255,255,255,.03));
  border: 1px solid rgba(45,212,255,.35); }
.steam-trust b { display: block; font-size: .82rem; font-weight: 800; }
.steam-trust span { display: block; font-size: .74rem; color: var(--dim); }

/* ---------------- турниры: обложка-карта, призовой шеврон, полоса мест ---------------- */
.tour-cover { position: relative; height: 112px; display: flex; align-items: flex-start; gap: .4rem; padding: .6rem .7rem;
  overflow: hidden; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10,13,19,.35) 0%, rgba(10,13,19,.88) 78%, var(--surface) 100%),
              var(--cover) center 35% / cover no-repeat, var(--bg-2); }
.tour-cover .pill { backdrop-filter: blur(6px); background: rgba(10,13,19,.6); }
.tour-cover .pill.mode { margin-left: auto; }
.tour-prize { position: absolute; left: .7rem; bottom: .5rem; font-family: var(--font-d); font-weight: 900; font-size: 1.15rem;
  color: var(--gold); text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.tour-flag { position: absolute; right: -34px; top: 12px; transform: rotate(35deg); padding: .18rem 2.2rem;
  background: linear-gradient(135deg, var(--gold), var(--accent)); color: #14100a; font: 900 .68rem var(--font);
  text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.tour:hover .tour-cover { background: linear-gradient(180deg, rgba(10,13,19,.22) 0%, rgba(10,13,19,.82) 78%, var(--surface) 100%),
              var(--cover) center 35% / cover no-repeat, var(--bg-2); }
.tour-slots { display: flex; flex-direction: column; gap: .3rem; }
.tour-slots .bar { display: block; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.tour-slots .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ---------------- розыгрыш: приз со свечением по редкости ---------------- */
.rf-hero { position: relative; overflow: hidden; }
.rf-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 80% at 16% 50%, color-mix(in srgb, var(--rc, var(--cyan)) 20%, transparent), transparent 70%); }
.rf-hero > * { position: relative; }
.rf-prize { position: relative; min-height: 190px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc, var(--cyan)) 26%, transparent), transparent 68%); }
.rf-prize::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 14px; height: 16px; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, color-mix(in srgb, var(--rc, var(--cyan)) 42%, rgba(0,0,0,.6)), transparent 72%); filter: blur(5px); }
.rf-prize img { position: relative; filter: drop-shadow(0 16px 26px rgba(0,0,0,.6)); }
.rf-hero .tile-s { background: rgba(15,19,27,.72); }

/* онлайн-бейдж при нуле игроков — приглушённый, без пульса */
.online-badge.is-zero { border-color: var(--line-2); background: rgba(20,26,36,.7); box-shadow: none; }
.online-badge.is-zero .dot { background: var(--mute); box-shadow: none; }
.online-badge.is-zero .dot::after { display: none; }
.online-badge.is-zero b { color: var(--dim); }

/* лента «Главный» не должна перекрывать бейдж режима */
.tour.featured .tour-cover .pill.mode { margin-left: .35rem; }

/* ---------------- подиум топ-3: центр выше, корона, водяной номер ---------------- */
.podium { gap: 1rem; align-items: end; }
.pod { padding: 1.15rem .9rem 1rem; background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--pc) 16%, transparent), transparent 70%), var(--surface);
  border-color: color-mix(in srgb, var(--pc) 30%, var(--line)); transition: transform .18s, border-color .18s; }
.pod::before { content: attr(data-pos); position: absolute; right: .3rem; bottom: -1.4rem; font-family: var(--font-d); font-weight: 900;
  font-size: 5.4rem; line-height: 1; color: var(--pc); opacity: .09; pointer-events: none; }
.pod > * { position: relative; }
.pod img, .pod .ava { box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--pc) 45%, transparent); }
.pod .v { color: var(--gold); }
.pod:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pc) 60%, var(--line)); }
.pod.p1 { padding-top: 2.2rem; transform: translateY(-12px);
  box-shadow: 0 0 46px rgba(255,209,102,.16) inset, 0 10px 28px rgba(0,0,0,.35); }
.pod.p1::after { content: "👑"; position: absolute; top: .45rem; left: 50%; transform: translateX(-50%); font-size: 1.1rem;
  filter: drop-shadow(0 2px 6px rgba(255,209,102,.7)); }
.pod.p1:hover { transform: translateY(-15px); }
.pod.p1 img, .pod.p1 .ava { width: 72px; height: 72px; }
@media (max-width: 700px) { .pod.p1, .pod.p1:hover { transform: none; padding-top: 2.2rem; } }

/* мобильная шторка: служебные ссылки строкой под плитками */
.more-mini { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: .8rem .2rem 0; margin-top: .6rem;
  border-top: 1px solid var(--line); }
.more-mini a { color: var(--dim); font-size: .86rem; font-weight: 600; }
.more-mini a:hover { color: var(--txt); }

/* ---------------- шапка профиля: не плоская, аватар с рамкой уровня ---------------- */
.profile-h { background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--lvlc, var(--accent)) 14%, transparent), transparent 62%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.014) 18px 20px),
    linear-gradient(135deg, var(--surface), var(--surface-2)); }
.pf-ava { position: relative; flex: none; }
.pf-ava::before { content: ""; position: absolute; inset: -7px; border-radius: 22px;
  background: conic-gradient(from 210deg, color-mix(in srgb, var(--lvlc, var(--accent)) 85%, transparent), transparent 55%,
              color-mix(in srgb, var(--lvlc, var(--accent)) 85%, transparent)); opacity: .55; }
.pf-ava img, .pf-ava .ava { position: relative; border-color: color-mix(in srgb, var(--lvlc, var(--accent)) 55%, var(--line-2));
  box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.pf-lvl { position: absolute; right: -8px; bottom: -8px; z-index: 1; min-width: 30px; height: 30px; padding: 0 .35rem;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  font: 900 .92rem var(--font-d); color: #10141c; background: linear-gradient(135deg, var(--lvlc, var(--accent)), #fff8);
  border: 2px solid var(--bg-2); box-shadow: 0 4px 14px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.profile-h .pill.chev { font-weight: 800; letter-spacing: .02em; }
@media (max-width: 700px) { .pf-ava { align-self: center; } }

/* ---------------- прогресс: шапка с текстурой и свечением шеврона ---------------- */
.pg-hero { position: relative; overflow: hidden; }
.pg-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 130% at 8% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
              repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.014) 18px 20px); }
.pg-hero > * { position: relative; }
.pg-chev-badge { position: relative; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.pg-chev-badge::after { content: ""; position: absolute; inset: -6px; border-radius: 16px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cc, var(--accent)) 40%, transparent), transparent 70%); z-index: -1; }
.pg-hero .bar { height: 9px; }
.pg-hero .bar i { background: linear-gradient(90deg, var(--accent), var(--gold)); box-shadow: 0 0 14px rgba(255,122,26,.5); }

/* ---------------- мобильные переполнения: ленты и таблицы ---------------- */
@media (max-width: 760px) {
  /* ‼ flex-ребёнок с flex:1 не сжимается без min-width:0 — лента режимов раздувала страницу до 938px */
  .filters .mode-sel, .mode-sel { min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filters .mode-sel::-webkit-scrollbar, .mode-sel::-webkit-scrollbar { display: none; }
  .metric-tabs { min-width: 0; }
  .tbl { font-size: .84rem; }
  .tbl th, .tbl td { padding: .5rem .38rem; }
  .panel > .tbl, .panel .tbl { display: table; width: 100%; }
}

/* ленте режимов и картинкам категорий нельзя вылезать за экран */
@media (max-width: 760px) {
  .mode-sel, .filters .mode-sel { max-width: 100%; width: 100%; }
  .sc-pics { overflow: hidden; min-width: 0; }
}

/* === skinchanger (агент A) === */
.sc-h { margin-bottom: .4rem; }
.sc-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .8rem; margin-top: .6rem; }
.sc-slot { min-width: 0; }
.sc-slot-title { font-weight: 700; }
.sc-card .sc-actions { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: auto; align-items: center; }
.sc-btns { display: flex; gap: .3rem; flex-wrap: wrap; }
.sc-card .tag.sc-side { background: #24313f; color: #cfe3ff; }
.sc-card .tag.sc-side-3 { background: #1d3a5f; color: #9fc6ff; }   /* на CT */
.sc-card .tag.sc-side-2 { background: #4a3a17; color: #ffd98a; }   /* на T */
.sc-card .sc-edit { margin-top: .35rem; }
@media (max-width: 760px) { .sc-slots { grid-template-columns: 1fr; } }

/* ---------------- рендеры агентов на баннерах (фигуры выходят за границу блока) ---------------- */
.art { position: absolute; bottom: 0; z-index: 0; pointer-events: none; user-select: none;
  filter: drop-shadow(-12px 14px 26px rgba(0,0,0,.65)); }
.art-r { right: -1.2rem; }
.art-l { left: -1.2rem; transform: scaleX(-1); }
/* «дым» за фигурой — цветное свечение, как на референсах */
.has-art::after { content: ""; position: absolute; right: -4%; bottom: -12%; width: 46%; height: 130%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 55% 60%, rgba(255,122,26,.22), transparent 70%); }

.hero.hero-v2 .art { height: 118%; max-height: none; width: auto; bottom: -6%; }
.hero.hero-v2.has-art { padding-right: 22rem; }
.hero.hero-v2 .hero-in, .hero.hero-v2 .stats { z-index: 1; }
@media (max-width: 1100px) { .hero.hero-v2.has-art { padding-right: 2.2rem; } .hero.hero-v2 .art { opacity: .25; height: 100%; } }
@media (max-width: 700px) { .hero.hero-v2 .art { display: none; } .has-art::after { display: none; } }

/* hero с фигурой: контент и статистика — в левой половине, агент занимает правую */
.hero.hero-v2.has-art { grid-template-columns: minmax(0, 1fr); padding-right: 2.2rem; row-gap: 1.2rem; }
.hero.hero-v2.has-art .hero-in { max-width: 60%; }
.hero.hero-v2.has-art .stats { max-width: 60%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.hero.hero-v2.has-art .stats .stat { padding: .7rem .75rem; }
.hero.hero-v2.has-art .stats .stat b { font-size: 1.35rem; }
.hero.hero-v2.has-art .stats .stat span { font-size: .68rem; letter-spacing: .05em; }
.hero.hero-v2 .art { height: 140%; bottom: -16%; right: 1rem; }
.has-art::after { right: 2%; width: 40%; height: 120%; }
@media (max-width: 1100px) {
  .hero.hero-v2.has-art .hero-in, .hero.hero-v2.has-art .stats { max-width: 100%; }
  .hero.hero-v2.has-art .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- баннер раздела: фон-карта + фигура агента ---------------- */
.page-banner { position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line);
  padding: 1.8rem 2rem; min-height: 200px; display: flex; align-items: center; margin-bottom: 1.2rem;
  background: linear-gradient(90deg, rgba(9,12,18,.97) 25%, rgba(9,12,18,.55) 100%),
              var(--banner-bg, none) center 35% / cover no-repeat, var(--bg-2); }
.page-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 90% at 0% 100%, rgba(255,122,26,.20), transparent 62%),
              repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.012) 18px 20px); }
.pb-in { position: relative; z-index: 1; max-width: 62%; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.pb-in h1 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.pb-in p { max-width: 60ch; }
.page-banner .art { height: 152%; bottom: -22%; right: 1.5rem; }
@media (max-width: 900px) {
  .page-banner { padding: 1.3rem 1.2rem; min-height: 0; }
  .pb-in { max-width: 100%; }
  .page-banner .art { display: none; }
}

/* фигура в баннере лобби */
.lb-hero.has-art .art { height: 128%; bottom: -14%; right: -1rem; opacity: .95; }
.lb-hero.has-art > *:not(.art) { position: relative; z-index: 1; }
@media (max-width: 900px) { .lb-hero.has-art .art { display: none; } }

/* === sticker2d (агент B): 2D-редактор наклеек + модалка выбора === */
.st-side { display: flex; flex-direction: column; gap: .35rem; position: sticky; top: .8rem; }
.st-weapon-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; opacity: .4; }
.st-overlay.active { outline: 1px dashed rgba(255,122,26,.7); outline-offset: 2px; }
.st-overlay:active { cursor: grabbing; }
.st-slot.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,122,26,.4); }
.st-pick { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; font-size: .82rem; text-align: left; }
.st-pick:hover { border-color: var(--accent); }
.st-pick img { width: 36px; height: 28px; object-fit: contain; flex: none; }
.st-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.st-modal[hidden] { display: none; }
.st-modal-box { width: min(880px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.st-modal-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.st-modal-filters { display: flex; flex-direction: column; gap: .45rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.st-modal-filters input[type=search] { width: 100%; }
.st-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.st-chip { padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--dim); font-size: .74rem; font-weight: 700; cursor: pointer; }
.st-chip:hover { border-color: var(--accent); color: var(--text); }
.st-chip.on { border-color: var(--accent); color: var(--text); background: rgba(255,122,26,.12); }
.st-modal-body { overflow: auto; padding: .7rem .9rem 1rem; display: flex; flex-direction: column; gap: .55rem; }
.st-group-title { font-weight: 800; font-size: .85rem; display: flex; align-items: center; gap: .45rem; margin-top: .2rem; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.st-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem .4rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--text); font-size: .72rem; cursor: pointer; text-align: center; }
.st-card img, .st-card .ph { width: 72px; height: 54px; object-fit: contain; display: grid; place-items: center; font-size: 1.6rem; }
.st-card .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2em; }
.st-card:hover:not(.disabled):not(.shopc) { border-color: var(--accent); }
.st-card.disabled { opacity: .5; cursor: default; }
.st-card.shopc { cursor: default; }
.st-note { font-size: .66rem; color: var(--dim); }
.st-empty { padding: .4rem .1rem; }
.st-more { display: flex; justify-content: center; padding: .3rem 0; }
.st-buy-err { padding: .2rem .1rem; }
@media (max-width: 900px) { .st-side { position: static; } }

/* фигура на главной: в полный рост, а не крупным планом (после вырезки полей масштаб изменился) */
.hero.hero-v2 .art { height: 106%; bottom: -3%; right: -0.5rem; }
@media (max-width: 1100px) { .hero.hero-v2 .art { height: 92%; opacity: .22; } }

/* в узкой карточке лобби фигура уходит за правый край и растворяется, иначе перекрывает текст */
.lb-hero.has-art .art { height: 104%; right: -24%; bottom: 0; opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
.lb-hero.has-art .tile-s { background: rgba(15,19,27,.88); }

/* компактный баннер магазина (на витринах, где нет своего первого блока) */
.shop-banner { min-height: 168px; padding: 1.4rem 1.6rem; }
.shop-banner .pb-in h1 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); }
.shop-banner .art { height: 142%; bottom: -20%; }

/* иконка режима: картинка из /gfx/modes/<mode>.png вместо эмодзи, если админ положил файл */
.mode-ic { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; }
.mode-ic.lg { width: 30px; height: 30px; vertical-align: -5px; }

/* ---------------- шапка залогиненного: не разъезжаться на 1280–1450 ---------------- */
/* у игрока в шапке 7 элементов (колокол, стрик, токены, монеты, пополнить, аватар, выход) — раньше бренд рвался на две строки,
   а «Выйти» уезжал за правый край */
.top .wrap { gap: .9rem; }
.brand { flex: none; white-space: nowrap; }
.nav { min-width: 0; }
.user { flex: none; }
.user .logout .ic { display: none; }
@media (max-width: 1450px) {
  .brand span { display: none; }              /* подпись бренда уходит раньше, чем раньше (было 1150) */
  .user .topup .lbl { display: none; }        /* «+ Пополнить» → «+» */
  .user .topup { padding-inline: .7rem; font-weight: 900; }
}
@media (max-width: 1330px) {
  .user .logout .lbl { display: none; }       /* «Выйти» → иконка */
  .user .logout .ic { display: inline; }
  .user { gap: .45rem; }
  .nav a, .nav-top { padding: .45rem .55rem; font-size: .93rem; }
}

/* ‼ бейдж «в игре» лежит внутри .brand и тоже <span> — правило скрытия подписи бренда гасило и его (ширина 0) */
.brand > span.online-badge { display: inline-flex !important; }
@media (max-width: 1450px) { .brand > span:not(.online-badge) { display: none; } }

/* ---------------- промо-пара с рендерами (приём xplay) ---------------- */
.promo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* трио на главной: фигурам разрешено выходить за верхний край баннера — плоская лента прямоугольников оживает */
.promo-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 3.4rem; }
.promo-trio .promo { overflow: visible; min-height: 152px; padding: .95rem 1rem; }
.promo-trio .promo::after { border-radius: inherit; }
/* вылет вверх ~30px: фигура «оживляет» полосу, но не наезжает на hero и не давит текст */
.promo-trio .promo .art { height: 116%; bottom: -3%; right: -.5rem; z-index: 2;
  filter: drop-shadow(-8px 14px 20px rgba(0,0,0,.65)); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.promo-trio .promo:hover .art { transform: translateY(-4px) scale(1.03); }
.promo-trio .promo-in { max-width: 66%; gap: .45rem; }
.promo-trio .promo-in b { font-size: .98rem; }
.promo-trio .promo-in .small { font-size: .78rem; line-height: 1.4; }
@media (max-width: 1100px) { .promo-trio { grid-template-columns: 1fr 1fr; } .promo-trio .promo-prem { grid-column: span 2; } }
@media (max-width: 760px) {
  .promo-trio { grid-template-columns: 1fr; margin-top: 1.4rem; }
  .promo-trio .promo-prem { grid-column: auto; }
  .promo-trio .promo { overflow: hidden; }
}
.promo { position: relative; overflow: hidden; min-height: 168px; padding: 1.1rem 1.2rem; border-radius: var(--r);
  border: 1px solid var(--line); display: flex; align-items: center; transition: transform .18s, border-color .18s;
  background: radial-gradient(70% 120% at 100% 50%, color-mix(in srgb, var(--pc, var(--accent)) 16%, transparent), transparent 65%),
              linear-gradient(135deg, var(--surface), var(--bg-2)); }
.promo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.012) 18px 20px); }
.promo:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pc, var(--accent)) 50%, var(--line-2)); }
.promo-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; max-width: 64%; }
.promo-in b { font-family: var(--font-d); font-size: 1.12rem; line-height: 1.25; }
.promo .art { height: 138%; bottom: -16%; right: -1rem; filter: drop-shadow(-10px 12px 22px rgba(0,0,0,.6)); }
@media (max-width: 900px) {
  .promo-duo { grid-template-columns: 1fr; }
  .promo-in { max-width: 100%; }
  .promo .art { display: none; }
}

/* баннер с фигурами по обеим сторонам (команды) */
.page-banner.duo .pb-in { margin-inline: auto; max-width: 56%; text-align: center; align-items: center; }
.page-banner.duo .art-l { height: 148%; bottom: -20%; left: 0.5rem; }
@media (max-width: 900px) { .page-banner.duo .pb-in { max-width: 100%; text-align: left; align-items: flex-start; } }

/* текст не должен заезжать под фигуры */
.promo-in { max-width: 57%; }
.page-banner.duo .pb-in { max-width: 46%; }
.page-banner.duo::before { background:
    radial-gradient(45% 90% at 50% 55%, rgba(9,12,18,.92), rgba(9,12,18,.55) 70%, transparent),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.012) 18px 20px); }

/* в двухфигурном баннере текст сидит на стеклянной подложке, фигуры уходят к самым краям */
.page-banner.duo .art-l { height: 130%; bottom: -14%; left: -2.5rem; }
.page-banner.duo .art-r { height: 130%; bottom: -14%; right: -2.5rem; }
.page-banner.duo .pb-in { max-width: 52%; padding: 1rem 1.3rem; border-radius: 16px;
  background: rgba(9,12,18,.62); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.06); }
@media (max-width: 900px) { .page-banner.duo .pb-in { background: none; border: 0; padding: 0; backdrop-filter: none; } }

/* ---------------- D.10 скинчейнджер: «полка» набора, стороны цветом ---------------- */
/* семантика сторон как в референсах: CT — синий, T — песочно-оранжевый */
.sc-worn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sc-worn-col { position: relative; overflow: hidden; padding: .9rem 1rem; border-radius: var(--r); border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 12%, transparent), transparent 60%), var(--surface); }
.sc-worn-col.ct { --sc: #4aa3ff; }
.sc-worn-col.t { --sc: #ffab52; }
.sc-worn-col::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sc); }
.sc-worn-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.sc-worn-head b { color: var(--sc); font-family: var(--font-d); letter-spacing: .01em; }
.sc-worn-row { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .6rem; }
.sc-worn-item { width: 76px; height: 52px; display: grid; place-items: center; border-radius: 9px; padding: .2rem;
  border: 1px solid var(--line-2); border-bottom: 2px solid var(--c, var(--line-2));
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--bg-2); }
.sc-worn-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sc-worn-item .ph { font-style: normal; opacity: .5; }
.sc-worn-empty { margin-top: .6rem; }
@media (max-width: 760px) { .sc-worn { grid-template-columns: 1fr; } }

/* кнопки сторон — сегментом, а не вразнобой */
.sc-seg { display: inline-flex; gap: 0; border-radius: 999px; overflow: hidden; border: 1px solid var(--line-2); }
.sc-seg .btn { border-radius: 0; border: 0; border-right: 1px solid var(--line-2); padding: .3rem .7rem; font-weight: 800; }
.sc-seg .btn:last-child { border-right: 0; }
.sc-seg .btn.sc-ct { color: #4aa3ff; }
.sc-seg .btn.sc-t { color: #ffab52; }
.sc-seg .btn:hover { background: var(--surface-2); }
.sc-side-3 { background: rgba(74,163,255,.18) !important; color: #4aa3ff !important; border-color: rgba(74,163,255,.45) !important; }
.sc-side-2 { background: rgba(255,171,82,.18) !important; color: #ffab52 !important; border-color: rgba(255,171,82,.45) !important; }
/* односторонний ствол (AK — только T, M4 — только CT): выбора нет, подписываем сторону */
.sc-seg .sc-onlyside { padding: .3rem .7rem; white-space: nowrap; align-self: center; }
.side-chip { display: inline-block; padding: 0 .35rem; border-radius: 5px; border: 1px solid transparent; font-weight: 700; font-size: .72rem; }
/* ‼ .inv-card .tag прибит к правому верхнему углу — второй бейдж встал бы поверх первого */
.sc-card .tag.sc-warn { right: auto; left: .5rem; background: rgba(235,75,75,.16); color: #ff9a9a;
  border-color: rgba(235,75,75,.45); text-transform: none; letter-spacing: 0; max-width: calc(100% - 1rem);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- D.11 редактор наклеек: лента слотов над оружием ---------------- */
.st-strip { display: flex; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.st-strip-slot { position: relative; width: 72px; height: 62px; padding: 0; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; transition: .15s; }
.st-strip-slot .n { position: absolute; top: 3px; left: 6px; font: 800 .68rem var(--font); color: var(--mute); }
.st-strip-slot img { max-width: 78%; max-height: 78%; object-fit: contain; }
.st-strip-slot .ph { width: 26px; height: 26px; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); opacity: .8; }
.st-strip-slot:hover { border-color: var(--accent); }
.st-strip-slot.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px rgba(255,122,26,.22);
  background: linear-gradient(180deg, rgba(255,122,26,.14), transparent 70%), var(--bg-2); }
.st-strip-slot.ghost { border-style: dashed; cursor: default; opacity: .5; }
.st-slot.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255,122,26,.35); }

/* ---------------- SkinChanger: редактор наклеек, этап 1 (управление как у cybershoke) ---------------- */
.st-strip-bar { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; flex-wrap: wrap; }
.st-hist { display: inline-flex; gap: .25rem; }
.st-hb { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--txt); font-size: 1.05rem; cursor: pointer; transition: .15s; }
.st-hb:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.st-hb:disabled { opacity: .35; cursor: default; }
.st-strip-slot { position: relative; }
.st-strip-lock, .st-strip-del { position: absolute; top: 2px; font-size: .62rem; line-height: 1; padding: 2px 3px; border-radius: 5px;
  opacity: 0; transition: opacity .15s; background: rgba(10,13,19,.75); }
.st-strip-lock { left: 2px; } .st-strip-del { right: 2px; color: var(--red); }
.st-strip-slot:hover .st-strip-lock, .st-strip-slot:hover .st-strip-del,
.st-strip-slot.active .st-strip-lock, .st-strip-slot.active .st-strip-del { opacity: .85; }
.st-strip-lock:hover, .st-strip-del:hover { opacity: 1 !important; }
.st-strip-slot.locked { border-color: var(--gold); }
.st-strip-slot.locked .st-strip-lock { opacity: 1; }
.st-slot.locked { border-color: rgba(255,209,102,.5); }

/* ручка поворота и микропанель у активной наклейки */
.st-handle { position: absolute; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: center;
  transform-origin: center; }
.st-handle-line { flex: 1; width: 1px; background: rgba(255,122,26,.7); }
.st-handle-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid #10141c;
  cursor: grab; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,.6); order: -1; }
.st-handle-dot:active { cursor: grabbing; }
.st-tools { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 2px; transform: translate(120%, -50%); }
.st-tools button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(16,20,28,.92);
  color: var(--txt); cursor: pointer; font-size: .82rem; }
.st-tools button:hover { border-color: var(--accent); }
.st-tools button.del:hover { border-color: var(--red); color: var(--red); }

/* числовые поля рядом со слайдерами */
.st-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin-top: .45rem; }
.st-nums label { display: flex; flex-direction: column; gap: .15rem; font-size: .7rem; color: var(--dim); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.st-nums input { width: 100%; padding: .28rem .4rem; font: 700 .82rem var(--font); font-variant-numeric: tabular-nums; }

/* панель горячих клавиш */
.st-keys { margin-top: .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: .6rem .8rem; }
.st-keys summary { cursor: pointer; font-weight: 800; font-size: .88rem; }
.st-keys ul { list-style: none; padding: .5rem 0 0; margin: 0; display: grid; gap: .35rem; }
.st-keys li { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--dim); flex-wrap: wrap; }
.st-keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .35rem; border-radius: 6px;
  border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--bg-2); color: var(--txt);
  font: 800 .72rem var(--font); }

/* ‼ `.st-tools{display:flex}` перебивает браузерное `[hidden]{display:none}` — панель висела без активной наклейки */
.st-tools[hidden], .st-handle[hidden] { display: none !important; }

/* ---------------- каталог наклеек: две панели (референс cybershoke) ---------------- */
.st-modal-box { width: min(1080px, 100%); }
.st-modal-split { display: grid; grid-template-columns: 208px 1fr; min-height: 0; flex: 1; }
.st-filters { border-right: 1px solid var(--line); padding: .7rem .8rem; overflow: auto; display: flex; flex-direction: column; gap: .55rem; }
.st-filters details { border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.st-filters details:last-of-type { border-bottom: 0; }
.st-filters summary { cursor: pointer; font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.st-chips.col { flex-direction: column; align-items: stretch; margin-top: .45rem; gap: .25rem; }
.st-chips.col .st-chip { text-align: left; border-radius: 8px; padding: .3rem .55rem; font-size: .8rem; }
.st-modal-main { display: flex; flex-direction: column; min-height: 0; }
.st-modal-main .st-modal-filters { border-bottom: 1px solid var(--line); }
.st-modal-main .st-modal-body { flex: 1; }
@media (max-width: 760px) {
  .st-modal-split { grid-template-columns: 1fr; }
  .st-filters { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; gap: .4rem; max-height: 34vh; }
  .st-filters details { flex: 1 1 140px; border-bottom: 0; }
}

/* подсказка редактора (почему действие не выполнилось) */
.st-toast { margin-top: .5rem; padding: .5rem .7rem; border-radius: 10px; font-size: .84rem;
  border: 1px solid rgba(255,209,102,.4); background: rgba(255,209,102,.10); color: var(--gold); }
.st-toast[hidden] { display: none; }

/* ---------------- S.3 редактор: крупное превью, окно параметров, слои ---------------- */
/* правая колонка со слотами убрана — поля формы остаются в DOM (их читают JS и сервер), но не показываются */
.st-editor.wide { display: block; }
.st-editor.wide .st-slots { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ‼ поля слотов остаются в DOM (их читают скрипт и серверная валидация), но не показываются:
   в новой раскладке класса `wide` у формы больше нет, поэтому прячем по атрибуту */
[data-slots-hidden] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-editor.wide .st-side { display: block; }
.st-editor.wide .st-strip-bar { justify-content: flex-start; }
.st-editor.wide .st-save { margin-left: auto; }
.st-stage { position: relative; }
.st-editor.wide .st-preview { aspect-ratio: 16 / 8.2; width: 100%;
  background: radial-gradient(70% 70% at 50% 45%, rgba(255,255,255,.06), transparent 70%), var(--bg-2); }
.st-editor.wide .st-weapon { inset: 6%; width: 88%; height: 88%; }

/* окно параметров активной наклейки — поверх превью слева снизу, как в референсе */
.st-inspect { position: absolute; left: 1rem; bottom: 1rem; z-index: 5; width: min(330px, calc(100% - 2rem));
  display: flex; flex-direction: column; gap: .55rem; padding: .8rem .9rem; border-radius: 14px;
  border: 1px solid var(--line-2); background: rgba(16,20,28,.94); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.st-inspect[hidden] { display: none !important; }
.st-inspect-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.st-inspect-head b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-x { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--dim); cursor: pointer; }
.st-x:hover { color: var(--txt); border-color: var(--accent); }
.st-wear { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .84rem; color: var(--dim); }
.st-wear input { width: 84px; text-align: right; font: 800 .95rem var(--font); font-variant-numeric: tabular-nums; }
.st-wear-range { width: 100%; }
.st-inspect-nums { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.st-inspect-nums label { display: flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--bg-2); }
.st-inspect-nums span { color: var(--mute); font-size: .95rem; }
.st-inspect-nums input { width: 100%; border: 0; background: none; padding: .15rem 0;
  font: 700 .86rem var(--font); font-variant-numeric: tabular-nums; }
.st-inspect-nums input:focus { outline: none; }
.st-layers { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.st-layers button { padding: .32rem .5rem; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--dim); font: 700 .76rem var(--font); cursor: pointer; text-align: left; }
.st-layers button:hover { color: var(--txt); border-color: var(--accent); }

/* нижний ряд: брелок и горячие клавиши рядом */
.st-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; align-items: start; }
.st-charm { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: .6rem .8rem; }
.st-charm summary { cursor: pointer; font-weight: 800; font-size: .88rem; }
.st-charm-in { display: flex; flex-direction: column; gap: .5rem; padding-top: .6rem; }
.st-keys { margin-top: 0; }
@media (max-width: 900px) {
  .st-bottom { grid-template-columns: 1fr; }
  .st-inspect { position: static; width: 100%; margin-top: .6rem; backdrop-filter: none; }
  .st-editor.wide .st-preview { aspect-ratio: 16 / 10; }
}

/* баннер сервера осмотра скинов (референс cybershoke «SKIN INSPECT сервер») */
.st-inspect-banner { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .35rem .3rem .5rem;
  border-radius: 999px; border: 1px solid rgba(61,220,132,.45); background: rgba(61,220,132,.10); }
.st-inspect-banner .ib-go { font: 800 .84rem var(--font); color: var(--green); padding: .1rem .35rem; }
.st-inspect-banner .ib-go:hover { text-decoration: underline; }
.st-inspect-banner .ib-i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; cursor: help;
  background: rgba(61,220,132,.18); color: var(--green); font-style: normal; font-size: .8rem; }
.ib-tip { position: absolute; left: 0; top: calc(100% + .4rem); z-index: 20; width: min(340px, 78vw); padding: .6rem .75rem;
  border-radius: 12px; border: 1px solid var(--line-2); background: rgba(16,20,28,.97); color: var(--dim);
  font: 500 .8rem/1.45 var(--font); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: .15s; }
.st-inspect-banner .ib-i:hover .ib-tip, .st-inspect-banner .ib-i:focus .ib-tip { opacity: 1; visibility: visible; }
.ib-tip b { color: var(--txt); }
.st-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ─────────────────────────────────────────────────────────────
   Навигация: иконки из общего спрайта + выпадающие меню с подписями.
   Эмодзи убраны — у них своя ширина и цвет, строка меню от них «плясала».
   ───────────────────────────────────────────────────────────── */
.ico-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* иконки мелкие во всех форматах: в строке меню они заметно меньше подписи */
.ni { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round; }
.nav .ni, .user .ni { width: 11px; height: 11px; }
.nav a, .nav-top, .nav-l { display: inline-flex; align-items: center; gap: .38rem; }
.nav-l, .nav-top { font: 600 .92rem var(--font); padding-inline: .62rem; }
.nav-drop .ni { width: 14px; height: 14px; }        /* внутри выпадающих места чуть больше */
.tabbar .ni, .more-grid .ni { width: 15px; height: 15px; }
.nav-l .ni, .nav-top .ni { color: var(--faint, var(--mute)); transition: color .15s, transform .15s; }
.nav-l:hover .ni, .nav-l.active .ni, .nav-group:hover .nav-top .ni, .nav-top.active .ni { color: var(--accent); }
.nav-l:hover .ni { transform: translateY(-1px); }
/* активный раздел держит акцентная планка снизу, а не только фон — видно с одного взгляда */
.nav-l, .nav-top { position: relative; }
.nav-l.active::after, .nav-top.active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -.1rem;
  height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cv { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 3px;
  transition: transform .16s; }
.nav-group:hover .cv, .nav-group:focus-within .cv { transform: rotate(180deg); }

/* выпадающее меню-«мега»: иконка, название и подпись — по названию не всегда понятно, что внутри */
.nav-drop.mega { min-width: 430px; display: none; grid-template-columns: 1fr 1fr; gap: .15rem; padding: .5rem; }
.nav-drop.mega.one { min-width: 268px; grid-template-columns: 1fr; }
.nav-group:hover .nav-drop.mega, .nav-group:focus-within .nav-drop.mega { display: grid; }
.nav-drop.mega a { align-items: center; gap: .6rem; padding: .5rem .6rem; white-space: normal; border-left: 0; }
.nav-drop.mega a:hover, .nav-drop.mega a.active { background: var(--surface-2); border-left: 0; }
.nd-i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--dim); transition: .15s; }
.nav-drop.mega a:hover .nd-i, .nav-drop.mega a.active .nd-i { color: var(--accent); border-color: rgba(255,122,26,.45);
  background: rgba(255,122,26,.10); }
.nd-t { display: flex; flex-direction: column; min-width: 0; }
.nd-t b { font: 700 .88rem var(--font); color: var(--txt); }
.nd-t i { font: 500 .74rem var(--font); font-style: normal; color: var(--mute); }

/* ─────────────────────────────────────────────────────────────
   Список лобби: слева колонка вкладок и отбора, справа фильтры и плотные строки.
   ───────────────────────────────────────────────────────────── */
.lob-body { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1.2rem; }
.lob-rail { display: grid; gap: .6rem; position: sticky; top: 80px; }
.lr-tabs { display: grid; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.lr-tab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .8rem;
  color: var(--dim); font: 700 .86rem var(--font); border-left: 3px solid transparent; transition: .14s; }
.lr-tab + .lr-tab { border-top: 1px solid var(--line); }
.lr-tab b { color: var(--faint, var(--mute)); font-variant-numeric: tabular-nums; font-size: .8rem; }
.lr-tab:hover { color: var(--txt); background: var(--surface-2); }
.lr-tab.on { color: var(--txt); background: var(--surface-2); border-left-color: var(--btn); }
.lr-tab.on b { color: var(--btn-2); }

.lr-box { display: grid; gap: .35rem; padding: .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.lr-h { font: 800 .68rem var(--font); text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint, var(--mute)); margin-top: .3rem; }
.lr-h:first-child { margin-top: 0; }
.lr-ck { display: flex; align-items: center; gap: .45rem; cursor: pointer; color: var(--dim); font: 600 .84rem var(--font); }
.lr-ck:hover { color: var(--txt); }
.lr-ck input { accent-color: var(--btn); width: 14px; height: 14px; cursor: pointer; }
.lr-box .btn { margin-top: .4rem; }
.lr-create { text-align: center; }

.lob-filters { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.lob-q { flex: 1; min-width: 180px; padding: .38rem .6rem; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--txt); font: 600 .84rem var(--font); }
.lob-q:focus-visible { outline: 2px solid var(--btn); outline-offset: 1px; }

.lob-list { display: grid; gap: .3rem; }
/* overflow видимый: подсказка модификаторов (A.9) рисуется НАД строкой и не должна обрезаться.
   Полоску заполнения внизу вместо этого скругляем и клипаем саму. */
.lrow { position: relative; display: grid; align-items: center; gap: .7rem;
  grid-template-columns: 56px minmax(0, 1fr) 122px 18px 18px 92px 150px 110px 14px;
  padding: .5rem .7rem .55rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--txt); text-decoration: none; transition: .14s; }
.lrow:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-1px); }
/* Подложка под миниатюрой нужна всегда: если картинки карты нет, дырки в строке быть не должно. */
.lr-pic { width: 56px; height: 34px; border-radius: 6px; flex: none; border: 1px solid var(--line);
  background-image: var(--lm, none), linear-gradient(135deg, var(--surface-2), var(--line-2));
  background-size: cover; background-position: center; }
.lr-map { font: 700 .84rem var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-fmt { color: var(--dim); font: 700 .78rem var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-lock { font-size: .8rem; }
.lr-cnt { font: 800 .82rem var(--font); color: var(--green); }
.lr-cnt b { color: var(--btn-2); }
.lr-cnt.is-full { color: var(--red); }
.lr-host { display: flex; align-items: center; gap: .4rem; color: var(--dim); font: 600 .8rem var(--font);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-host img, .lr-host .ava { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.lr-ago { text-align: right; }
.lr-go { color: var(--faint, var(--mute)); font-size: 1.1rem; text-align: right; }
.lrow:hover .lr-go { color: var(--btn); }
.lr-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent;
  overflow: hidden; border-radius: 0 0 9px 9px; }
.lrow:hover { z-index: 2; }
.lr-fun { position: relative; font-size: .8rem; line-height: 1; text-align: center; }
.lr-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  z-index: 5; display: grid; gap: .15rem; width: max-content; max-width: 260px; padding: .4rem .55rem;
  border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--txt); font: 600 .74rem var(--font); text-align: left; white-space: normal;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .14s; }
.lr-tip b { color: var(--btn); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.lr-fun:hover .lr-tip, .lr-fun:focus-visible .lr-tip { opacity: 1; visibility: visible; }
/* У самой верхней строки «над строкой» — это поверх поиска и фильтров, поэтому ей подсказку роняем вниз. */
.lob-list .lrow:first-child .lr-tip { top: calc(100% + 8px); bottom: auto; }
.lr-bar i { display: block; height: 100%; background: color-mix(in srgb, var(--btn) 55%, transparent); transition: width .5s; }
.lrow:hover .lr-bar i { background: var(--btn); }

.lob-ping { padding: .3rem .55rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--dim); font: 600 .78rem var(--font); white-space: nowrap; }
.lob-ping b { color: var(--green); font-variant-numeric: tabular-nums; }

/* Окно создания лобби поверх списка. */
.lnew-wrap { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 1rem; }
.lnew-wrap[hidden] { display: none; }
.lnew-back { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.lnew { position: relative; width: min(760px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column;
  border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: 0 24px 70px rgba(0,0,0,.6); overflow: hidden; }
.lnew-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.lnew-head h2 { margin: 0; font: 800 1.05rem var(--font); }
.lnew-x { background: none; border: 0; color: var(--dim); font-size: 1rem; cursor: pointer; padding: .2rem .4rem; }
.lnew-x:hover { color: var(--txt); }
.lnew-body { padding: .9rem 1.1rem 1.1rem; overflow-y: auto; display: grid; gap: .4rem; }
.lnew-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem; border-top: 1px solid var(--line); background: var(--surface-2); }

.lnew-sub { margin: 0 0 .5rem; text-align: center; font-size: .86rem; }
.lnew-vis { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .7rem;
  align-items: start; padding: .8rem .9rem; cursor: pointer; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); transition: .14s; }
.lnew-vis input { position: absolute; opacity: 0; pointer-events: none; }
.lnew-vis:hover { border-color: var(--line-2); }
.lnew-vis:has(input:checked) { border-color: var(--btn); background: color-mix(in srgb, var(--btn) 12%, var(--surface-2)); }
.lnew-vis:has(input:focus-visible) { outline: 2px solid var(--btn); outline-offset: 2px; }
.lnew-vi { width: 24px; height: 24px; margin: .1rem auto 0; display: block; color: var(--dim);
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lnew-vis:has(input:checked) .lnew-vi { color: var(--btn); }
.lnew-vt { display: grid; gap: .15rem; }
.lnew-vt b { font: 800 .92rem var(--font); }
.lnew-vt .small { line-height: 1.35; }
.lnew-pw { display: grid; gap: .25rem; margin-top: .3rem; }
.lnew-pw[hidden] { display: none; }

@media (max-width: 560px) {
  .lnew-foot { flex-direction: column-reverse; align-items: stretch; }
  .lnew-foot .btn { width: 100%; text-align: center; }
}

/* ── комната лобби ─────────────────────────────────────────────────────────── */
/* Баннер — первый блок сетки: он занимает три колонки состава, а правая колонка настроек
   начинается от самого верха и оттого получается высокой (там разворачиваются все настройки). */
.lr-banner { position: relative; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  min-height: 132px; padding: .8rem 1rem; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background-image: linear-gradient(135deg, var(--surface-2), var(--line-2));
  background-size: cover; background-position: center; }
/* Карты лобби идут косыми полосами: одна карта — во всю ширину, несколько — «внахлёст». */
.lrb-map { position: absolute; inset: 0; background-image: var(--lmi); background-size: cover; background-position: center;
  clip-path: polygon(calc(var(--i) / var(--n) * 100% - 4%) 0, calc((var(--i) + 1) / var(--n) * 100% + 4%) 0,
                     calc((var(--i) + 1) / var(--n) * 100% - 4%) 100%, calc(var(--i) / var(--n) * 100% - 12%) 100%); }
.lr-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,9,14,.55), rgba(6,9,14,.82)); }
.lr-banner > *:not(.lrb-map) { position: relative; z-index: 1; }
.lrb-copy { min-width: 38px; }
/* Счётчик игроков — ровно по центру баннера, как в оригинале, поэтому он вне потока flex. */
.lrb-count { position: absolute; left: 50%; top: .8rem; transform: translateX(-50%);
  padding: .35rem .8rem; border-radius: 999px; white-space: nowrap;
  background: rgba(6,9,14,.72); border: 1px solid var(--line-2); font: 800 .86rem var(--font); }
.lrb-state { margin-left: auto; }
.lrb-leave { margin-left: .4rem; }
.lrb-fun { position: absolute; right: 1rem; bottom: .7rem; }
.lrb-title { flex: 1 0 100%; min-width: 0; margin-top: .4rem; }
.lrb-title h1 { margin: 0; font: 800 1.35rem var(--font); }
.lrb-title p { margin: .1rem 0 0; }
@media (max-width: 700px) { .lrb-count { position: static; transform: none; } }

.lr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px minmax(0, 1fr) 320px; gap: .8rem; align-items: start; }
.lr-banner, .lr-wide { grid-column: 1 / 4; }          /* баннер и флеши — на три колонки состава */
.lr-side { grid-column: 4; grid-row: 1 / span 20; }   /* правая колонка тянется от верха донизу */
.lr-col-mid { display: grid; gap: .8rem; align-content: start; min-width: 0; }
/* Без min-width:0 колонка распирается длинным содержимым (список карт, широкие кнопки)
   и наезжает на соседнюю: у grid-элемента min-width по умолчанию auto. */
.lr-grid > * { min-width: 0; }
/* Колонки состава и центр держат одну высоту: она рассчитана на пять слотов, поэтому лобби 2×2
   не «схлопывает» середину и блоки стоят ровно. */
.lr-team, .lr-mid { min-height: 22rem; }
.lr-team, .lr-hold { padding: .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
/* Шапка колонки в две строки: название команды не должно ужиматься до нуля из-за счётчика и ELO. */
.lr-th { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin-bottom: .5rem; }
.lr-th b { font: 800 .95rem var(--font); }
.lr-thstat { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
/* A.1: знак стороны — декоративный ярлык колонки; цвет разводит команды глазами, а не заявляет сторону в игре. */
/* Знак стороны — присланный владельцем svg со своими цветами, поэтому крупно и без рамки. */
.lr-mark { width: 34px; height: 34px; flex: none; }
.lr-tname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-pen { flex: none; margin-right: auto; padding: 0 .2rem; background: none; border: 0; cursor: pointer; color: var(--faint, var(--mute)); }
.lr-pen:hover, .lr-pen.on { color: var(--btn); }
.lr-pen .ni { width: 14px; height: 14px; }
.lr-rename { display: flex; gap: .3rem; flex: 1 0 100%; order: 9; }
.lr-rename[hidden] { display: none; }   /* без этого display:flex перебивает атрибут hidden и поле «висит» в шапке */
.lr-rename input { flex: 1; min-width: 0; padding: .25rem .4rem; border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--txt); font: 700 .8rem var(--font); }
.lr-thc { color: var(--dim); font: 700 .78rem var(--font); }
.lr-elo { padding: .18rem .45rem; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--dim); font: 800 .7rem var(--font); }
/* A.7: размер команды — сколько слотов открыто. Формат матча при этом не меняется. */
.lr-cap { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-bottom: .5rem; }
.lr-capb { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; line-height: 1;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--dim); font: 800 1rem var(--font); }
.lr-capb:hover:not(:disabled) { color: var(--btn); border-color: var(--btn); }
.lr-capb:disabled { opacity: .35; cursor: default; }
.lr-capn { min-width: 74px; text-align: center; color: var(--dim); font: 700 .76rem var(--font); }
.lr-slots { display: grid; gap: .35rem; }
.lr-slot { display: flex; align-items: center; gap: .5rem; min-height: 46px; padding: .4rem .6rem;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.lr-slot.free { justify-content: center; border-style: dashed; color: var(--faint, var(--mute));
  background: transparent; font-size: 1.1rem; padding: 0; gap: .3rem; }
.lr-slot.free form { display: flex; flex: 1; min-width: 0; align-items: center; gap: .3rem; }
.lr-slot.free form button { flex: 1; min-height: 44px; background: none; border: 0; cursor: pointer;
  color: var(--faint, var(--mute)); font-size: 1.1rem; }
.lr-slot.free:hover { border-color: var(--btn); }
.lr-slot.free form button:hover { color: var(--btn); }
.lr-slot.free input { flex: 0 1 110px; min-width: 0; padding: .3rem .4rem; border-radius: 6px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--txt); font: 600 .76rem var(--font); }
/* A.10: «поставить бота» — второй, узкой кнопкой в том же слоте, чтобы не путать с «занять место». */
.lr-slot.free .lr-botadd { flex: 0 0 34px; border-left: 1px dashed var(--line); }
.lr-slot.free .lr-botadd button { min-height: 40px; }
.lr-slot.free .lr-botadd .ni { width: 15px; height: 15px; }
.lr-slot.is-bot { border-style: dashed; }
.lr-ava.bot { display: inline-flex; align-items: center; justify-content: center; color: var(--dim); background: var(--surface); }
.lr-ava.bot .ni { width: 16px; height: 16px; }
.lr-slot.is-ready { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); }
.lr-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--line-2); }
.lr-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 .85rem var(--font); color: var(--txt); text-decoration: none; }
.lr-nick:hover { color: var(--btn); }
.lr-badge { color: var(--btn); }
.lr-ready { color: var(--dim); font-weight: 800; }
.lr-slot.is-ready .lr-ready { color: var(--green); }
.lr-x { background: none; border: 0; color: var(--faint, var(--mute)); cursor: pointer; padding: 0 .2rem; }
.lr-x:hover { color: var(--red); }

.lr-mid { display: grid; gap: .6rem; padding: .8rem; border-radius: 12px; align-content: start;
  border: 1px solid var(--line); background: var(--surface); text-align: center; }
.lr-hold .lr-th { justify-content: space-between; }
.lr-hold .lr-slot { min-height: 40px; }
/* A.5: блок ожидания говорит, чего именно ждём, и подсвечивается, когда можно начинать. */
.lr-wait { padding: .6rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); font: 800 .86rem var(--font); }
.lr-wait.w-go { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, var(--line)); }
.lr-wait.w-ready { color: var(--btn); border-color: color-mix(in srgb, var(--btn) 45%, var(--line)); }
.lr-warn { padding: .45rem .6rem; border-radius: 8px; font: 600 .76rem var(--font);
  color: var(--accent-2); background: rgba(255,122,26,.10); border: 1px solid rgba(255,122,26,.35); }
.lr-invite { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; }
.lr-invite .ni { width: 14px; height: 14px; }
.lr-facts, .lr-cfg { display: grid; gap: .25rem; margin: 0; }
/* A.8: сводка в две строки вместо четырёх — центральная колонка не должна быть простынёй.
   Подпись мелкой строкой над значением: в узкой колонке пара «слева-справа» резала значение многоточием. */
.lr-facts.two { grid-template-columns: 1fr 1fr; }
.lr-facts.two > div { display: block; text-align: left; padding: .3rem .45rem; }
.lr-facts.two dt { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.lr-facts.two dd { max-width: 100%; text-align: left; white-space: normal; font-size: .76rem; line-height: 1.25; }
.lr-facts > div, .lr-cfg > div { display: flex; min-width: 0; align-items: baseline; justify-content: space-between;
  gap: .6rem; padding: .32rem .5rem; border-radius: 8px; background: var(--surface-2); }
.lr-facts dt, .lr-cfg dt { color: var(--dim); font: 600 .78rem var(--font); }
.lr-facts dd, .lr-cfg dd { margin: 0; min-width: 0; max-width: 62%; font: 700 .8rem var(--font); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.lr-tools button { width: 100%; min-height: 34px; cursor: pointer; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--dim); font-size: .95rem; transition: .14s; }
.lr-tools button:hover { color: var(--btn); border-color: var(--btn); }

.lr-acts { display: grid; gap: .4rem; justify-items: stretch; }
/* Формы внутри — тоже grid-элементы: без min-width:0 длинная подпись кнопки распирает колонку. */
.lr-mid > *, .lr-acts > *, .lr-acts form { min-width: 0; }
.lr-acts form { display: grid; }
.lr-acts .btn { width: 100%; white-space: normal; }
.lr-join { display: grid; gap: .35rem; }

.lr-side { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.lr-tabs2 { display: grid; grid-template-columns: 1fr 1fr; }
.lr-tabs2.three { grid-template-columns: repeat(3, 1fr); }
.lr-tab2 .dim { font-weight: 700; }
.lr-tab2 { padding: .6rem; background: var(--surface-2); border: 0; border-bottom: 2px solid transparent;
  color: var(--dim); font: 700 .84rem var(--font); cursor: pointer; transition: .14s; }
.lr-tab2:hover { color: var(--txt); }
.lr-tab2.on { color: var(--txt); background: var(--surface); border-bottom-color: var(--btn); }
.lr-pane { padding: .7rem; display: grid; gap: .45rem; }
.lr-pane[hidden] { display: none; }
.lr-side .chat-box { min-height: 220px; max-height: 320px; }
/* A.3: короткая форма настроек прямо во вкладке — те же поля, только самые ходовые. */
.lr-form { display: grid; gap: .35rem; min-width: 0; }
.lr-form .opt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0;
  padding: .42rem .55rem; border-radius: 8px; background: var(--surface-2); font: 600 .84rem var(--font); }
.lr-form .opt > span { color: var(--dim); }
.lr-form .opt select, .lr-form .opt input[type=number], .lr-form .opt input[type=text], .lr-form .opt input:not([type]) {
  max-width: 58%; min-width: 0; padding: .32rem .45rem; border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--txt); font: 700 .82rem var(--font); }
.lr-form input[type=checkbox] { accent-color: var(--btn); }
/* «Раскрыть все настройки» — прямо во вкладке, отдельного окна больше нет. */
.lr-more { display: grid; gap: .35rem; margin-top: .2rem; }
.lr-more > summary { cursor: pointer; list-style: none; padding: .35rem .45rem; border-radius: 8px;
  border: 1px dashed var(--line-2); color: var(--dim); font: 700 .78rem var(--font); text-align: center; }
.lr-more > summary::-webkit-details-marker { display: none; }
.lr-more > summary:hover { color: var(--btn); border-color: var(--btn); }
.lr-more[open] > summary { color: var(--txt); border-style: solid; }
.lr-more .lr-h { margin-top: .35rem; color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.lr-more .opt.off { opacity: .55; }
.lr-form .lob-q { width: 100%; padding: .3rem .4rem; border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--txt); font: 600 .76rem var(--font); }

/* A.11: строка подключения к трансляции — там же, где наблюдатели. */
.lr-gotv { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); display: grid; gap: .3rem; }
.lr-gotv .ni { width: 13px; height: 13px; vertical-align: -2px; }
.lr-gotv code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.glow { box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 45%, transparent); }

.lcfg .opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .4rem; }
/* В окнах лобби управляющие элементы держим в золоте интерфейса, а не в оранжевом по умолчанию. */
.lnew input[type=checkbox], .lnew input[type=radio], .lnew input[type=range] { accent-color: var(--btn); }

@media (max-width: 1250px) {
  .lr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lr-banner, .lr-wide { grid-column: 1 / -1; }
  .lr-side { grid-column: 1 / -1; grid-row: auto; }
  .lr-col-mid { grid-column: 1 / -1; order: -1; }
  .lr-team, .lr-mid { min-height: 0; }
  /* Центральная колонка уезжает наверх во всю ширину — раскладываем её содержимое в ряд,
     иначе кнопки растягиваются на весь экран и блок перестаёт быть лаконичным (A.8). */
  .lr-mid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
  .lr-mid > .lr-wait { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .lr-grid { grid-template-columns: 1fr; }
  .lrb-count, .lrb-leave { margin-left: 0; }
  /* на узком баннере значок модификаторов вне потока наезжал на подпись — возвращаем его в строку */
  .lrb-fun { position: static; align-self: flex-start; }
}

@media (max-width: 1000px) { .lob-body { grid-template-columns: 1fr; } .lob-rail { position: static; } }
@media (max-width: 760px) {
  .lrow { grid-template-columns: 44px minmax(0, 1fr) auto; gap: .5rem; }
  .lr-fmt, .lr-lock, .lr-fun, .lr-ago, .lr-go { display: none; }
  .lr-pic { width: 44px; height: 28px; }
  .lr-host { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .lrow:hover { transform: none; } }

/* ─────────────────────────────────────────────────────────────
   Страница режима: чипсы режимов, плотная шапка, компактный список серверов
   в две колонки и правая колонка удержания. Модалка состава — по клику на строку.
   ───────────────────────────────────────────────────────────── */
.mode-chips { display: flex; gap: .32rem; overflow-x: auto; scrollbar-width: none; padding: .9rem 0 .2rem; }
.mode-chips::-webkit-scrollbar { display: none; }
.mchip { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .6rem; border-radius: 8px; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--dim);
  font: 700 .8rem var(--font); white-space: nowrap; transition: .14s; }
.mchip:hover { color: var(--txt); border-color: var(--line-2); }
.mchip.on { color: #14171f; background: linear-gradient(180deg, var(--btn-2), var(--btn)); border-color: transparent; }
.mchip.on b { color: #14171f; }
.mchip b { color: var(--green); font-variant-numeric: tabular-nums; }
.mchip.soon { opacity: .45; pointer-events: none; }

/* баннер стал выше и просторнее: в нём теперь живут карты, команды и достижения */
.mode-hero { position: relative; overflow: visible; margin: .8rem 0 1.4rem; padding: 1.6rem 1.6rem 1.5rem;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.mode-hero > * { position: relative; }
.mode-hero.has-art::before { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: var(--mh-art) center 40% / cover no-repeat; opacity: .55; }
.mode-hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(10,13,19,.96) 0%, rgba(10,13,19,.82) 45%, rgba(10,13,19,.42) 100%),
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--c, var(--accent)) 22%, transparent), transparent 62%); }
/* ‼️ Общее `.has-art::after { width:46%; height:130%; bottom:-12% }` (другой компонент) налипало на герой режима:
   тёмный градиент вылезал на 30% ниже блока и полупрозрачно накрывал левую часть панели фильтров («Вид», «Слоты»). */
.mode-hero.has-art::after { width: 100%; height: 100%; right: 0; bottom: 0; }
.mh-in { position: relative; z-index: 1; }
.mh-live { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.mh-title { margin: .45rem 0 .2rem; font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); line-height: 1.05; }
.mh-desc { max-width: 62ch; margin: 0 0 .9rem; line-height: 1.5; font-size: .9rem; }
.mh-cta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mh-cta .btn { display: inline-flex; align-items: center; gap: .4rem; }
.mh-quick { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.mh-my { display: inline-flex; align-items: baseline; gap: .4rem; margin-left: auto; }

/* строка фактов под кнопками: карты, команды подключения, достижения */
.mh-facts { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: 1.1rem; }
.mh-fact { position: relative; }
.mh-f-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .6rem; border-radius: 8px;
  border: 1px solid var(--line-2); background: rgba(12,16,23,.72); backdrop-filter: blur(6px);
  color: var(--dim); font: 700 .8rem var(--font); cursor: pointer; transition: .14s; }
.mh-f-btn b { color: var(--txt); font-variant-numeric: tabular-nums; }
.mh-f-btn .q { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: var(--dim); font: 800 .62rem var(--font); font-style: normal; }
.mh-fact:hover .mh-f-btn, .mh-fact.on .mh-f-btn { color: var(--txt); border-color: var(--btn); }
.mh-fact:hover .q, .mh-fact.on .q { background: var(--btn); color: var(--btn-ink); }

.mh-pop { position: absolute; z-index: 40; top: calc(100% + .45rem); left: 0; width: max-content; max-width: min(420px, 82vw);
  padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(16,20,28,.985);
  backdrop-filter: blur(12px); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .14s; }
.mh-pop.wide { max-width: min(560px, 88vw); }
/* ‼️ Окно раскрывается по клику, а не по наведению: оно висит прямо над панелью фильтров
   и на ховере перехватывало курсор — при попытке добраться до фильтра всплывашка закрывала его
   почти на сто пикселей. Подсказка на «?» остаётся на наведении. */
.mh-fact.on .mh-pop { opacity: 1; visibility: visible; transform: none; }
.mh-pop-h { display: block; margin-bottom: .5rem; font: 800 .72rem var(--font); text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint, var(--mute)); }

.mh-maps { display: flex; flex-wrap: wrap; gap: .3rem; }
.mh-map { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .45rem .22rem .28rem;
  border-radius: 7px; border: 1px solid var(--line); background: var(--surface);
  font: 700 .74rem var(--font); color: var(--dim); }
.mh-map img { width: 26px; height: 18px; object-fit: cover; border-radius: 4px; }

.mh-cmds { display: grid; gap: .3rem; margin-bottom: .5rem; }
.mh-cmd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem;
  padding: .4rem .55rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--txt); text-align: left; cursor: pointer; transition: .14s; }
.mh-cmd:hover { border-color: var(--btn); }
.mh-cmd.green { border-color: var(--green); }
.mh-cmd code { color: var(--btn-2); font-weight: 700; }
.mh-cmd-w { text-align: left; }
.mh-cmd code { font: 600 .74rem/1.3 ui-monospace, Consolas, monospace; color: var(--dim); overflow-wrap: anywhere; }
.mh-cmd .ni { color: var(--dim); }

.mh-ach { display: flex; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.mh-ach:last-child { border-bottom: 0; }
.mh-ach-i { font-size: 1.1rem; }
.mh-ach span span { display: block; }

/* min-width: 0 — иначе широкая строка фильтров растягивает колонку грида и вылезает за экран
   (у элемента грида min-width по умолчанию auto = по содержимому). */
.mode-body { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 1rem; align-items: start; }
.mode-main { min-width: 0; }
.srv-filters { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; }

.sf-view { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.sf-v { display: grid; place-items: center; width: 30px; height: 28px; border: 0; background: var(--surface);
  color: var(--dim); cursor: pointer; transition: .14s; }
.sf-v + .sf-v { border-left: 1px solid var(--line-2); }
.sf-v:hover { color: var(--txt); }
.sf-v.on { color: #14171f; background: linear-gradient(180deg, var(--btn-2), var(--btn)); }
/* ‼️ Строка фильтров держится ОДНОЙ линией, а не переносится: «Сортировка» всё равно оставалась
   одна на второй строке под блоком (жалоба владельца), и это читалось как вывалившееся поле.
   Вместо переноса ужимаем сами селекты (`min-width: 0` + `flex-shrink`), а на узких экранах,
   где одна строка физически не помещается, перенос включается обратно медиазапросом ниже. */
.srv-filters { gap: .55rem .7rem; flex-wrap: nowrap; }
.srv-filters > * { flex: none; }
.srv-filters .tf-map { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; flex: 0 1 auto; }
/* переключатель вида не ужимается: иначе кнопки наезжали на подпись «Вид» (скрин владельца 03.09) */
.srv-filters .sf-viewwrap { flex: none; }
.srv-filters .tf-map > span { flex: none; white-space: nowrap; }
/* ‼️ min-width подобран по самому длинному короткому значению («любые»/«любая»): ниже него
   селект начинал показывать «лю…» — сжимать надо «Сортировку», а не фильтры карт и слотов. */
.srv-filters .tf-map select { flex: 1 1 auto; min-width: 6rem; width: auto; text-overflow: ellipsis; }
/* «по свободным местам» — самый длинный пункт в наборе; сжимаем в первую очередь его */
.srv-filters .sf-sort select { max-width: 9.5rem; flex-shrink: 6; }
.srv-filters .tf-sw span { white-space: nowrap; }
.srv-filters .tf-count { margin-left: auto; white-space: nowrap; }
/* Ниже 900px одна линия физически не помещается. Вместо рваного переноса (где последний фильтр
   висел сиротой под блоком) раскладываем фильтры сеткой равных ячеек — перенос выглядит намеренным. */
@media (max-width: 900px) {
  .srv-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: center; }
  .srv-filters .tf-map { min-width: 0; }
  .srv-filters .tf-map select { width: 100%; max-width: none; }
  .srv-filters .tf-count { margin-left: 0; grid-column: 1 / -1; }
}
/* На телефоне ячейка 190px оставляет одну колонку и шесть строк фильтров — держим две колонки,
   а подпись убираем над селектом: рядом она уже не помещается и селект вылезал из колонки. */
@media (max-width: 560px) {
  .srv-filters { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .srv-filters .tf-map { flex-direction: column; align-items: stretch; gap: .2rem; }
  .srv-filters .tf-map > span { text-align: left; }
  .srv-filters .tf-map select { min-width: 0; }
  .srv-filters .sf-viewwrap .sf-view { align-self: flex-start; }   /* переключатель вида по содержимому, а не во всю ячейку */
}

.srv-list { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.srv-list.as-list { grid-template-columns: 1fr; gap: .3rem; }
/* isolation: строка — свой контекст наложения. Без него подложки с z-index:-1 уезжали под собственный фон
   строки (кадр карты проявлялся только на :hover, где контекст создавал transform), а если поднять контент
   через z-index, строки начинали перекрывать всплывающие окна шапки. Контекст решает оба случая сразу. */
.srow { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .5rem .55rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--txt); transition: border-color .14s, transform .14s, background .14s; }
/* кадр карты виден всегда, а не только по наведению (просьба владельца); на ховере он лишь становится ярче */
.srow::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .42;
  background: var(--srow-bg, none) center / cover no-repeat; transition: opacity .16s; }
.srow::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,16,23,.94) 0%, rgba(12,16,23,.72) 55%, rgba(12,16,23,.5) 100%); }
.srow:hover { transform: translateY(-1px); border-color: var(--line-2); }
.srow:hover::before { opacity: .6; }
/* вся левая часть — одна кнопка «открыть состав», кнопки подключения и копирования отдельно справа */
.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sr-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-top { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.sr-st .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: block; flex: none; }
.sr-st .dot.off, .srow.is-off .sr-st .dot { background: var(--red); }
.sr-name { font: 700 .84rem var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-sub { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.sr-dot { color: var(--faint, var(--mute)); }
.sr-ping { padding: .08rem .3rem; border-radius: 5px; background: rgba(255,255,255,.05);
  color: var(--dim); font: 700 .7rem var(--font); }
.sr-map { color: var(--dim); font: 600 .74rem var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch; }
.sr-pl { font: 800 .76rem var(--font); color: var(--green); }
.sr-pl.is-full { color: var(--red); }
.srow.is-off .sr-pl { color: var(--mute); }
.sr-acts { display: flex; gap: .25rem; flex: none; }
.sr-btn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--dim); cursor: pointer; transition: .14s; }
.sr-btn:hover { color: var(--accent); border-color: var(--accent); }
.sr-btn.green { color: var(--green); border-color: var(--green); }
.sr-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); }
.sr-bar i { display: block; height: 100%; background: var(--accent); transition: width .5s; }
.srow.tf-hide { display: none; }
.srow.is-off { opacity: .55; }
.srv-empty { padding: 1.2rem 0; text-align: center; }
/* достижения уехали на баннер, поэтому топ занимает всю ширину;
   при двух и более серверах таблица идёт в два столбца — вровень со списком серверов */
.mode-tables { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.mode-tables.two .tbl tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.mode-tables.two .tbl tbody tr { display: grid; grid-template-columns: 26px minmax(0,1fr) 62px 52px 62px;
  align-items: center; border-bottom: 1px solid var(--line); }
.mode-tables.two .tbl thead { display: none; }   /* в две колонки шапка таблицы теряет смысл */

/* правая колонка удержания */
.mode-side { display: grid; gap: .6rem; position: sticky; top: 80px; }
.side-card { display: grid; gap: .45rem; padding: .9rem 1rem; border-radius: 12px; text-decoration: none; color: var(--txt);
  border: 1px solid var(--line-2); --sc: var(--accent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 16%, var(--surface-2)), var(--surface-2) 72%);
  transition: transform .15s, border-color .15s; }
.side-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sc) 55%, var(--line-2)); }
.sc-h { display: flex; align-items: center; gap: .4rem; font: 700 .92rem var(--font-d); color: var(--sc); }
.sc-l { display: grid; gap: .28rem; margin: 0; padding-left: 1.05rem; color: var(--dim); font-size: .8rem; line-height: 1.4; }
.sc-l li::marker { color: var(--sc); }
.sc-go { font: 800 .78rem var(--font); color: var(--txt); }
.sc-prem { --sc: var(--btn-2); }

/* ── правая колонка режима: баннер Premium и карусель промо (300×500) ──────────────────────────
   Графика лежит в библиотеке (/gfx/promo/*.jpg), в git её нет. Нет файла — баннер живёт на градиенте. */
.prem-b { position: relative; display: block; overflow: hidden; border-radius: 14px; color: var(--txt);
  border: 1px solid color-mix(in srgb, var(--btn) 42%, var(--line-2));
  background: linear-gradient(150deg, color-mix(in srgb, var(--btn) 18%, var(--surface-2)), var(--surface-2) 70%);
  box-shadow: 0 14px 30px -22px var(--btn-glow); transition: transform .15s, border-color .15s; }
.prem-b:hover { transform: translateY(-2px); border-color: var(--btn-2); }
/* картинка отдельным блоком сверху, текст — под ней на плотном фоне: на самой графике он не читался */
.pb-art { position: relative; display: block; height: 138px;
  background: var(--pb-art, linear-gradient(150deg, color-mix(in srgb, var(--btn) 28%, var(--surface-2)), var(--surface-2))) center / cover no-repeat; }
.pb-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,19,.06) 0%, rgba(10,13,19,.55) 62%, var(--surface-2) 100%); }
.pb-tag { position: absolute; z-index: 1; top: .7rem; left: .8rem; display: inline-flex; align-items: center; gap: .35rem;
  padding: .24rem .55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--btn) 55%, transparent);
  background: rgba(12,16,23,.72); backdrop-filter: blur(6px);
  font: 800 .72rem var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--btn-2); }
/* max-width сбрасываем явно: одноимённый `.pb-in` баннера раздела выше по файлу режет
   ширину до 62%, и текст подписки вставал колонкой в 177px. */
.pb-in { display: grid; gap: .3rem; padding: 0 1rem 1rem; max-width: none; }
.pb-h { font: 700 1rem var(--font-d); }
.pb-d { color: var(--dim); font-size: .8rem; line-height: 1.45; }
.pb-go { margin-top: .1rem; font: 800 .78rem var(--font); color: var(--btn-2); }

.promo-car { position: relative; }
.pc-vp { position: relative; aspect-ratio: 3 / 5; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface-2); }
.pc-s { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: .5rem; padding: 1rem;
  color: var(--txt); opacity: 0; visibility: hidden; transform: scale(1.035);
  transition: opacity .35s, transform .5s, visibility .35s; }
.pc-s.on { opacity: 1; visibility: visible; transform: none; }
.pc-s::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--pc-art, linear-gradient(160deg, var(--surface-2), var(--bg-2))) center / cover no-repeat; }
.pc-s::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(10,13,19,.26) 0%, rgba(10,13,19,.34) 30%, rgba(10,13,19,.93) 58%, rgba(10,13,19,.99) 100%); }
.pc-s > * { position: relative; z-index: 1; }
.pc-tag { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; padding: .24rem .55rem;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(12,16,23,.62); backdrop-filter: blur(6px);
  font: 800 .7rem var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.pc-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.pc-in { align-self: end; display: grid; gap: .34rem; }
.pc-h { font: 700 1rem var(--font-d); line-height: 1.25; }
.pc-d { color: var(--dim); font-size: .78rem; line-height: 1.45; }
.pc-cta { margin-top: .35rem; justify-self: start; padding: .42rem .8rem; border-radius: 9px;
  background: linear-gradient(135deg, var(--btn) 0%, var(--btn-2) 52%, #f4ead0 100%);
  border: 1px solid #f0dfae; color: var(--btn-ink); font: 800 .78rem var(--font);
  box-shadow: 0 6px 18px -8px var(--btn-glow), inset 0 1px 0 rgba(255,255,255,.5); transition: filter .15s; }
.pc-s:hover .pc-cta { filter: brightness(1.06); }

/* баннер ближайшего про-матча: фон один и тот же, меняются команды и цифры */
.pcb-tour { display: block; }
.pcb-vs { display: grid; gap: .3rem; margin: .1rem 0 .15rem; }
.pcb-t { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.pcb-t b { font: 700 .86rem var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcb-logo { flex: none; display: grid; place-items: center; width: 26px; height: 26px; overflow: hidden;
  border-radius: 7px; background: rgba(255,255,255,.07); font: 800 .68rem var(--font); color: var(--dim); }
.pcb-logo img { width: 100%; height: 100%; object-fit: contain; }
.pcb-x { font: 800 .68rem var(--font); font-style: normal; color: var(--mute); padding-left: 33px; }
.pcb-when { font-size: .74rem; color: var(--dim); }
.pcb-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.pcb-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--btn-2)); }
.pcb-pct { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font: 800 .76rem var(--font); }

.pc-nav { position: absolute; top: calc(50% - 18px); display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(12,16,23,.72); backdrop-filter: blur(6px);
  color: var(--dim); font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: 0; transition: .16s; }
.pc-nav.prev { left: .5rem; } .pc-nav.next { right: .5rem; }
.promo-car:hover .pc-nav, .pc-nav:focus-visible { opacity: 1; }
.pc-nav:hover { color: var(--txt); border-color: var(--btn); }
.pc-dots { display: flex; justify-content: center; gap: .35rem; margin-top: .45rem; }
.pc-dots button { width: 18px; height: 4px; border: 0; border-radius: 999px; padding: 0;
  background: var(--line-2); cursor: pointer; transition: .16s; }
.pc-dots button.on { width: 26px; background: var(--btn); }
@media (prefers-reduced-motion: reduce) { .pc-s { transition: opacity .01s; transform: none; } .prem-b:hover { transform: none; } }
@media (hover: none) { .pc-nav { opacity: 1; } }
/* кнопка «Смотреть Premium» в промо-баннере — тот же золотой градиент с обводкой, что и в шапке */
.promo-prem .btn { background: linear-gradient(135deg, var(--btn) 0%, var(--btn-2) 52%, #f4ead0 100%);
  border: 1px solid #f0dfae; color: var(--btn-ink); font-weight: 800;
  box-shadow: 0 6px 18px -8px var(--btn-glow), inset 0 1px 0 rgba(255,255,255,.5); }
.promo-prem .btn:hover { filter: brightness(1.05); border-color: #fff4d6; }

/* модалка сервера */
.srv-modal .sm-box { width: min(820px, 100%); padding: 0; overflow: hidden; }
/* шапка модалки — кадр карты этого сервера под тёмной вуалью */
.sm-head { position: relative; display: flex; align-items: flex-end; gap: .8rem; min-height: 96px;
  padding: .9rem 1rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.sm-head::before { content: ""; position: absolute; inset: 0; background: var(--sm-bg, none) center / cover no-repeat; }
.sm-head::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,13,19,.96) 0%, rgba(10,13,19,.82) 55%, rgba(10,13,19,.5) 100%); }
.sm-h-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.sm-title { font: 700 1.12rem var(--font-d); }
.sm-meta { display: flex; gap: .35rem; flex-wrap: wrap; }
.sm-chip { padding: .16rem .42rem; border-radius: 6px; background: rgba(10,13,19,.7);
  border: 1px solid rgba(255,255,255,.1); color: var(--dim);
  font: 700 .72rem var(--font); font-variant-numeric: tabular-nums; }
.sm-x { position: relative; z-index: 2; margin-left: auto; align-self: flex-start; }
.sm-act { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .8rem 1rem; }
.sm-act .btn { display: inline-flex; align-items: center; gap: .4rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.sm-ip { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; padding: .34rem .6rem;
  border-radius: 8px; border: 1px dashed var(--line-2); background: var(--bg-2); color: var(--dim);
  font: 700 .8rem/1 ui-monospace, Consolas, monospace; cursor: pointer; }
.sm-ip:hover { color: var(--txt); border-color: var(--accent); }
.sm-ip.green { color: var(--green); border-color: var(--green); }
.sm-tbl-wrap { max-height: 46vh; overflow: auto; border-top: 1px solid var(--line); }
.sm-tbl { width: 100%; }
.sm-tbl th { position: sticky; top: 0; background: var(--surface); z-index: 1; white-space: nowrap; }
.sm-tbl td, .sm-tbl th { padding: .4rem .7rem; }
.sm-tbl td:first-child, .sm-tbl th:first-child { padding-left: 1rem; }
.sm-c-slots { width: 52px; color: var(--dim); font-variant-numeric: tabular-nums; }
.sm-rank img { width: 26px; height: 26px; display: block; }
.sm-note { padding: .7rem 1rem .9rem; border-top: 1px solid var(--line); line-height: 1.45; }

/* На узком экране всплывашка фактов, привязанная к своей кнопке, вылезала за правый край и растягивала
   страницу по горизонтали (замер: +105 px на 390 px). Привязываем её к строке фактов целиком. */
@media (max-width: 760px) {
  .mh-facts { position: relative; }
  .mh-fact { position: static; }
  .mh-pop, .mh-pop.wide { left: 0; width: auto; max-width: 100%; }
}
@media (max-width: 1100px) { .mode-body { grid-template-columns: 1fr; } .mode-side { position: static; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .srv-list { grid-template-columns: 1fr; }
  .mode-tables { grid-template-columns: 1fr; }
  .mode-side { grid-template-columns: 1fr; }
  .mh-my { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .srow:hover, .side-card:hover { transform: none; } }

/* ─────────────────────────────────────────────────────────────
   Лайв-дроп: широкая полоса с бесшовно едущей лентой последних выпавших предметов.
   Лента дублируется в разметке, поэтому анимация — простой сдвиг на -50% без пересчёта в JS.
   ───────────────────────────────────────────────────────────── */
/* большой отступ от первого экрана: полоса не должна прилипать к hero */
.drop-bar { position: relative; margin: 3.4rem 0 2rem; padding: .9rem 0 1rem; border-radius: var(--r);
  border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(80% 130% at 0% 0%, rgba(255,122,26,.12), transparent 60%), var(--surface); }
.db-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: 0 1rem .8rem; }
.db-kick { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem; border-radius: 6px;
  background: rgba(255,77,94,.14); border: 1px solid rgba(255,77,94,.4); color: #ff8b96;
  font: 800 .68rem var(--font); text-transform: uppercase; letter-spacing: .08em; }
.db-kick .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: mtDot 1.6s ease-in-out infinite; }
.db-title { font: 700 .96rem var(--font-d); }
.db-info { margin-left: auto; }
.db-empty { padding: .6rem 1rem 0; }

.db-rail { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.db-track { display: flex; gap: .6rem; width: max-content; padding: 0 1rem; animation: dbRun 46s linear infinite; }
.db-rail:hover .db-track { animation-play-state: paused; }
@keyframes dbRun { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.dcard { display: flex; align-items: center; gap: .55rem; width: 208px; flex: none; padding: .45rem .55rem;
  border-radius: 11px; border: 1px solid var(--line-2); text-decoration: none; color: var(--txt);
  background: linear-gradient(160deg, color-mix(in srgb, var(--r, var(--accent)) 18%, var(--surface-2)), var(--surface-2) 70%);
  transition: transform .15s, border-color .15s; }
.dcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--r, var(--accent)) 55%, var(--line-2)); }
.dc-pic { display: grid; place-items: center; width: 54px; height: 40px; flex: none; border-radius: 8px;
  background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--r, var(--accent)) 34%, transparent), transparent 72%); }
.dc-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dc-in { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.dc-in b { font: 700 .76rem var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-who { display: flex; align-items: center; gap: .3rem; color: var(--dim); font: 600 .7rem var(--font);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-who img { width: 15px; height: 15px; border-radius: 50%; flex: none; }
.drop-rules { display: grid; gap: .55rem; margin: .9rem 0 0; padding-left: 1.1rem; line-height: 1.45; }
.drop-rules li::marker { color: var(--accent); }

/* низ страницы: пьедестал + боковая колонка с лентой и сообществом */
.bottom-duo { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; align-items: start; }
.bottom-side { display: grid; gap: 1rem; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; align-items: end; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .9rem .5rem 0;
  border-radius: 12px 12px 0 0; text-decoration: none; color: var(--txt);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 16%, transparent), transparent 70%);
  transition: transform .16s; --pc: var(--line-2); }
.pod:hover { transform: translateY(-3px); }
.pod.p1 { --pc: var(--gold); }
.pod.p2 { --pc: #c9d3e3; }
.pod.p3 { --pc: #cd7f32; }
.pod-medal { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pc) 55%, var(--line)); color: var(--pc);
  background: rgba(255,255,255,.03); font: 800 .8rem var(--font); }
.pod-medal .ni { width: 15px; height: 15px; }
.pod-ava img, .pod-ava .ava { width: 46px; height: 46px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--pc) 60%, var(--line)); display: block; }
.pod.p1 .pod-ava img, .pod.p1 .pod-ava .ava { width: 56px; height: 56px; box-shadow: 0 0 22px -6px rgba(255,209,102,.75); }
.pod-name { font: 700 .84rem var(--font); text-align: center; }
.pod-val { color: var(--gold); font: 800 .95rem var(--font); }
.pod-sub { text-align: center; }
.pod-base { display: grid; place-items: center; width: 100%; margin-top: .5rem; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 26%, var(--surface-2)), var(--surface-2));
  border: 1px solid var(--line); border-bottom: 0; }
.pod-base i { font: 900 1.1rem var(--font-d); font-style: normal; color: color-mix(in srgb, var(--pc) 70%, var(--txt)); }
.pod.p1 .pod-base { height: 62px; }
.pod.p2 .pod-base { height: 44px; }
.pod.p3 .pod-base { height: 34px; }

.how { border-top: 1px solid var(--line); padding-top: .9rem; }
.how-h { display: block; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.how-l { display: grid; gap: .4rem; margin: 0; padding-left: 1.1rem; color: var(--dim); font-size: .86rem; line-height: 1.45; }
.how-l li::marker { color: var(--faint, var(--mute)); font-weight: 700; }

/* сообщество: объёмные карточки со своим цветом площадки */
.comm { display: grid; gap: .5rem; }
.cm { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 12px;
  text-decoration: none; color: var(--txt); border: 1px solid var(--line-2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 20%, var(--surface-2)), var(--surface-2) 72%);
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.9); transition: transform .16s, border-color .16s, box-shadow .16s; --cc: var(--accent); }
.cm:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cc) 55%, var(--line-2));
  box-shadow: 0 16px 32px -18px rgba(0,0,0,1), 0 0 0 3px color-mix(in srgb, var(--cc) 16%, transparent); }
.cm-ds { --cc: #5865f2; }
.cm-tg { --cc: #2aabee; }
.cm-ts { --cc: #2580c3; }
.cm-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px;
  color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--cc) 88%, #fff), var(--cc));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cc) 80%, transparent); }
.cm-in { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cm-in b { font: 700 .92rem var(--font-d); }
.cm-go { margin-left: auto; flex: none; padding: .34rem .62rem; border-radius: 8px; font: 800 .78rem var(--font);
  color: #fff; background: color-mix(in srgb, var(--cc) 82%, #0b0e14);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }

/* классический футер */
.foot-v2 { margin-top: 3rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(0,0,0,.28)); }
.foot-v2 .brand span { display: inline !important; }   /* в подвале имя клуба нужно всегда, правило узкой шапки тут не применяем */
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 1.6rem; padding: 2rem 0 1.4rem; }
.fcol { display: flex; flex-direction: column; gap: .42rem; min-width: 0; }
.fcol a { color: var(--dim); font-size: .86rem; }
.fcol a:hover { color: var(--txt); }
.fh { font: 800 .72rem var(--font); text-transform: uppercase; letter-spacing: .09em; color: var(--faint, var(--mute)); margin-bottom: .25rem; }
.fcol-brand p { margin: .5rem 0 .2rem; line-height: 1.5; max-width: 42ch; }
.fsoc { display: flex; gap: .45rem; margin-top: .5rem; }
.fsoc a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--dim); transition: .15s; }
.fsoc a:hover { color: var(--txt); border-color: var(--accent); }
.foot-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; justify-content: space-between;
  padding: .9rem 0 1.6rem; border-top: 1px solid var(--line); }
.fl-req { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.fl-links { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.fl-links a { color: var(--dim); }
.fl-links a:hover { color: var(--txt); }
.fl-copy { width: 100%; }

@media (max-width: 900px) {
  .bottom-duo { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .fcol-brand { grid-column: span 2; }
  .db-title { font-size: .88rem; }
  .db-info { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .db-track { animation: none; }
  .db-kick .dot { animation: none; }
  .pod:hover, .cm:hover, .dcard:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   Искры над фоном первого экрана. Чистый CSS: 18 угольков поднимаются
   и сносятся вбок, параметры разведены через --i, поэтому повтор незаметен.
   Анимируются только transform и opacity — слой не трогает раскладку.
   ───────────────────────────────────────────────────────────── */
.embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-v2 .stats { position: relative; z-index: 1; }   /* иначе позиционированный слой искр перекрыл бы счётчики */
/* ‼️ Все параметры приходят инлайном из шаблона (--l, --d, --dl, --s, --x, --up).
   В calc() нет оператора остатка «%»: строка вида calc(9s + (var(--i) % 5) * 2.4s)
   невалидна, браузер отбрасывал всю декларацию animation, и искры стояли невидимыми. */
.embers i { position: absolute; bottom: -10px; left: var(--l, 50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #fff0d2 0%, var(--accent-2) 35%, var(--accent) 60%, rgba(255,122,26,0) 75%);
  box-shadow: 0 0 6px rgba(255,140,50,.65);
  opacity: 0; will-change: transform, opacity;
  animation: emberUp var(--d, 11s) linear var(--dl, 0s) infinite; }
.embers i:nth-child(3n) { width: 2px; height: 2px; }
.embers i:nth-child(4n) { background: radial-gradient(circle, #fff 0%, #ffd08a 40%, rgba(255,176,97,0) 74%); }
.embers i:nth-child(5n) { width: 4px; height: 4px; filter: blur(.6px); }

@keyframes emberUp {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(calc(var(--s, 1) * .5)); }
  10%  { opacity: .9; }
  60%  { opacity: .65; }
  100% { opacity: 0; transform: translate3d(var(--x, 0px), calc(var(--up, 300px) * -1), 0) scale(var(--s, 1)); }
}
@media (prefers-reduced-motion: reduce) { .embers { display: none; } }

/* ─────────────────────────────────────────────────────────────
   «Пульс клуба» в hero: плитки метрик, которые по кругу меняются.
   Движение намеренно медленное и без прыжков — оно должно читаться
   как жизнь на серверах, а не как мигающий рекламный блок.
   ───────────────────────────────────────────────────────────── */
.stats.pulse .stat { position: relative; overflow: hidden; display: grid; gap: .1rem;
  grid-template-areas: "ic ." "num num" "lbl lbl"; align-content: center; }
.stats.pulse .st-ic { grid-area: ic; display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: .28rem;
  border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--dim); }
.stats.pulse .st-ic .ni { width: 14px; height: 14px; }
.stats.pulse .num { grid-area: num; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stats.pulse .stat > span:last-child { grid-area: lbl; }

/* Арт метрики: собственный рендер в стиле CS, живёт справа как «голограмма» —
   мягко дышит и слегка размыт, поэтому не спорит с числом за внимание. */
/* арт целиком внутри плитки: раньше вылезал за край и обрезался */
.stats.pulse .st-art { position: absolute; right: 6px; bottom: 6px; width: 62px; height: 62px; pointer-events: none;
  background: var(--sa, none) center / contain no-repeat;
  opacity: .5; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)) saturate(1.05);
  animation: saFloat 7s ease-in-out infinite; }
.stats.pulse .st-art::after { content: ""; position: absolute; inset: 0;
  background: var(--sa, none) center / contain no-repeat; filter: blur(7px); opacity: .5; }
.stats.pulse .stat:hover .st-art { opacity: .72; }
@keyframes saFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-1.5deg); }
}
.stats.pulse .stat.is-in .st-art { animation: saIn .55s cubic-bezier(.2,.8,.2,1) both, saFloat 7s ease-in-out .55s infinite; }
@keyframes saIn { from { opacity: 0; transform: translateY(14px) scale(.9) } to { opacity: .5; transform: none } }

/* живая плитка: зелёная точка с медленным пульсом, без «мигалки» */
.stats.pulse .stat-live .st-ic { border-color: rgba(61,220,132,.4); background: rgba(61,220,132,.10); }
.stats.pulse .stat-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(61,220,132,.55); animation: pulseRing 2.4s ease-out infinite; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.5) } 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0) } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0) } }

/* смена метрики: уход вверх — приход снизу, с лёгкой засветкой по акценту */
.stats.pulse .stat .st-ic, .stats.pulse .stat .num, .stats.pulse .stat > span:last-child {
  transition: opacity .19s ease, transform .19s ease; }
.stats.pulse .stat.is-out .st-ic, .stats.pulse .stat.is-out .num, .stats.pulse .stat.is-out > span:last-child {
  opacity: 0; transform: translateY(-8px); }
.stats.pulse .stat.is-in .st-ic, .stats.pulse .stat.is-in .num, .stats.pulse .stat.is-in > span:last-child {
  animation: pulseIn .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pulseIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.stats.pulse .stat.is-in::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 50% 100%, rgba(255,122,26,.18), transparent 70%);
  animation: pulseGlow .6s ease-out both; }
@keyframes pulseGlow { from { opacity: 1 } to { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .stats.pulse .stat-live .dot { animation: none; }
  .stats.pulse .stat .st-ic, .stats.pulse .stat .num, .stats.pulse .stat > span:last-child { transition: none; animation: none; }
  .stats.pulse .stat.is-in::after { display: none; }
  .stats.pulse .st-art, .stats.pulse .stat.is-in .st-art { animation: none; }
}
@media (max-width: 900px) { .stats.pulse .st-art { width: 48px; height: 48px; opacity: .4; } }

/* Магазин — главный коммерческий раздел, поэтому он единственный пункт с заливкой */
.nav-l.nav-shop { color: var(--txt); background: linear-gradient(135deg, rgba(255,122,26,.16), rgba(255,122,26,.05));
  border: 1px solid rgba(255,122,26,.32); border-radius: 999px; }
.nav-l.nav-shop .ni { color: var(--accent); }
.nav-l.nav-shop:hover { background: linear-gradient(135deg, rgba(255,122,26,.28), rgba(255,122,26,.10)); border-color: rgba(255,122,26,.5); }

/* правая часть шапки: Premium, кошелёк, уведомления, профиль */
/* Premium — тот же золотой, но светлее и с обводкой: он должен читаться как «дороже» соседних кнопок.
   Срезанный угол здесь снят намеренно: clip-path режет и рамку, а обводка тут важнее детали. */
.btn-prem { display: inline-flex; align-items: center; gap: .38rem; padding: .34rem .7rem; white-space: nowrap;
  color: var(--btn-ink); font: 800 .84rem var(--font); border-radius: 9px;
  background: linear-gradient(135deg, var(--btn) 0%, var(--btn-2) 52%, #f4ead0 100%);
  border: 1px solid #f0dfae;
  box-shadow: 0 6px 18px -8px var(--btn-glow), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s, box-shadow .15s, filter .15s; }
.btn-prem:hover { transform: translateY(-1px); filter: brightness(1.05); border-color: #fff4d6;
  box-shadow: 0 10px 24px -8px rgba(199,176,110,.75), inset 0 1px 0 rgba(255,255,255,.65); }
.btn-prem .ni { stroke-width: 2.1; }

.wallet { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255,209,102,.34); background: rgba(255,209,102,.10); }
.w-coins { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem .3rem .7rem;
  color: var(--gold); font: 700 .86rem var(--font); font-variant-numeric: tabular-nums; }
.w-coins b { font-weight: 800; }
.w-add { display: grid; place-items: center; width: 30px; color: #16130a;
  background: linear-gradient(135deg, var(--btn-2), var(--btn)); transition: filter .15s; }
.w-add:hover { filter: brightness(1.08); }
.w-add .ni { width: 15px; height: 15px; stroke-width: 2.6; }

.prof-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .35rem .2rem .2rem; border: 0;
  border-radius: 999px; background: transparent; cursor: pointer; color: var(--dim); transition: background .15s; }
.prof-btn img, .prof-btn .ava { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); display: block; }
.nav-group.prof:hover .prof-btn, .nav-group.prof:focus-within .prof-btn { background: var(--surface-2); }
.nav-group.prof:hover .prof-btn img, .nav-group.prof:focus-within .prof-btn img { border-color: var(--accent); }
.prof-drop { margin-top: .35rem; }
.prof-head { border-bottom: 1px solid var(--line); margin-bottom: .25rem; padding-bottom: .5rem !important; }
.prof-out .nd-t b { color: var(--red); }
.prof-out:hover .nd-i { color: var(--red); border-color: rgba(255,77,94,.45); background: rgba(255,77,94,.10); }
/* стрик — отдельная фишка в шапке: пока горит, её видно всегда */
.streak-w { display: inline-flex; align-items: center; gap: .28rem; padding: .3rem .55rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--dim);
  font: 800 .84rem var(--font); font-variant-numeric: tabular-nums; transition: .15s; }
.streak-w.on { color: var(--accent-2); border-color: rgba(255,122,26,.42); background: rgba(255,122,26,.10); }
.streak-w:hover { color: var(--txt); border-color: var(--accent); }
.bell { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--dim); position: relative; }
.bell:hover { color: var(--txt); background: var(--surface-2); }

/* Сжатие шапки по факту нехватки места (класс ставит app.js), а не только по ширине окна.
   Медиа-запрос остаётся нижней границей на случай выключенного JS. */
.top.is-compact .nav-l span, .top.is-compact .nav-top span { display: none; }
.top.is-compact .nav-l, .top.is-compact .nav-top { padding: .45rem .6rem; }
.top.is-compact .nav-l.nav-shop { padding: .45rem .7rem; }
.top.is-compact .btn-prem .lbl { display: none; }
.top.is-compact .btn-prem { padding: .38rem .55rem; }
.top.is-tight .brand span { display: none; }
.top.is-tight .online-badge { display: none; }
.top.is-tight .streak-w { display: none; }

@media (max-width: 1150px) { .nav-l span, .nav-top span { display: none; } .nav-l, .nav-top { padding: .45rem .6rem; }
  .nav-l.nav-shop { padding: .45rem .7rem; } .btn-prem .lbl { display: none; } .btn-prem { padding: .38rem .55rem; } }
@media (max-width: 900px) { .wallet .w-coins { padding-right: .4rem; } }

/* ‼️ Телефон: под логином правый блок шапки (Premium + стрик + кошелёк + колокольчик + аватар)
   не помещался и давал горизонтальную прокрутку всей страницы — на 390px scrollWidth был 408.
   Авто-подгонка из app.js тут не срабатывает: она меряет переполнение меню, а меню на телефоне скрыто.
   Поэтому ужимаем правый блок правилами: стрик уезжает в меню профиля, где он и так есть. */
@media (max-width: 760px) {
  .top .wrap { gap: .5rem; }
  .user { gap: .35rem; min-width: 0; }
  .streak-w { display: none; }
  .btn-prem { padding: .34rem .45rem; }
  .w-coins { padding: .3rem .35rem .3rem .5rem; font-size: .8rem;
    max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w-add { width: 26px; }
  .bell { width: 28px; height: 28px; }
  .prof-btn { padding: .15rem .25rem .15rem .15rem; }
  .prof-btn img, .prof-btn .ava { width: 26px; height: 26px; }
}
@media (max-width: 430px) {
  .brand span { display: none; }          /* остаётся только марка: имя клуба не помещается рядом с балансом */
  .online-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ni, .cv, .promo-trio .promo .art, .btn-prem { transition: none; } }

/* ─────────────────────────────────────────────────────────────
   Витрина режимов на главной: арт-плитки 4:5, ровно 6 в ряд на 1180.
   Приём: у плитки нет «карточной» рамки — её держит сам кадр,
   а срезанный угол живёт только на кнопке действия (фирменная деталь).
   ───────────────────────────────────────────────────────────── */
.modes-sec .sec-h { align-items: center; }
.modes-h-r { display: flex; align-items: center; gap: .8rem; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .6rem; }

.mtile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2);
  text-decoration: none; color: var(--txt); isolation: isolate;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .18s; }
.mtile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--line));
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 22%, transparent) inset; }

/* кадр режима + вуаль: низ уходит в почти чёрный, поверх — лёгкий оттенок режима */
.mtile .mt-art { position: absolute; inset: 0; z-index: -1; background: var(--tile-art, none) center / cover no-repeat, var(--surface-2);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .3s; }
.mtile .mt-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,19,.55) 0%, rgba(10,13,19,.05) 30%, rgba(10,13,19,.82) 68%, rgba(8,10,15,.97) 100%),
    radial-gradient(120% 60% at 50% 120%, color-mix(in srgb, var(--c, var(--accent)) 22%, transparent), transparent 70%); }
.mtile:hover .mt-art { transform: scale(1.06); }

.mt-top { position: absolute; top: .5rem; left: .5rem; right: .5rem; z-index: 4; display: flex; gap: .3rem; flex-wrap: wrap; }
.mt-badge { display: inline-flex; align-items: center; gap: .28rem; padding: .16rem .42rem; border-radius: 7px;
  background: rgba(10,13,19,.66); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.09);
  font: 800 .68rem var(--font); font-variant-numeric: tabular-nums; color: var(--txt); letter-spacing: .01em; }
.mt-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mt-badge.on { color: var(--green); border-color: rgba(61,220,132,.35); }
.mt-badge.warm { color: var(--gold); border-color: rgba(255,209,102,.35); }
.mt-badge.full { color: var(--red); border-color: rgba(255,77,94,.35); }
.mt-badge.off, .is-soon .mt-badge { color: var(--mute); }
.mt-badge.gold { color: var(--gold); border-color: rgba(255,209,102,.35); }
.mt-badge.mine { color: var(--gold); border-color: rgba(255,209,102,.45); background: rgba(255,209,102,.12); }
.mt-badge.act { color: #0d0f14; background: linear-gradient(180deg, var(--btn-2), var(--btn)); border-color: transparent; }
.mt-badge.live { color: var(--green); border-color: rgba(61,220,132,.4); }
.mt-badge.live .dot { animation: mtDot 2s ease-in-out infinite; }
@keyframes mtDot { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.mt-in { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .55rem .6rem .6rem; }
.mt-name { font: 700 .88rem/1.16 var(--font-d); letter-spacing: .01em; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-sub { font: 600 .7rem var(--font); color: var(--dim); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ховер: поверх кадра выезжает описание режима и кнопка со срезанным углом (фирменная деталь витрины) */
.mt-over { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
  padding: .6rem; background: linear-gradient(180deg, rgba(8,10,15,.55) 0%, rgba(8,10,15,.93) 55%);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .16s cubic-bezier(.2,.8,.2,1); }
.mt-desc { font: 500 .72rem/1.38 var(--font); color: var(--txt); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.mt-go { display: block; padding: .34rem .5rem; text-align: center; font: 800 .74rem var(--font); border-radius: 8px;
  background: linear-gradient(180deg, var(--btn-2), var(--btn)); color: #0d0f14;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.mt-go.is-off { background: rgba(255,255,255,.10); color: var(--dim); }
.mtile:hover .mt-over, .mtile:focus-visible .mt-over { opacity: 1; }
.mtile:hover .mt-in { opacity: 0; transition: opacity .12s; }
.mtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* полоса заполненности по нижнему краю */
.mt-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.07); }
.mt-fill i { display: block; height: 100%; background: var(--c, var(--accent)); transition: width .5s; }

/* «скоро» — плитка живая по картинке, но приглушена и не кликается */
.mtile.is-soon { cursor: default; }
.mtile.is-soon .mt-art { filter: grayscale(.7) brightness(.62); }
.mtile.is-soon:hover { transform: none; border-color: var(--line); box-shadow: none; }
.mtile.is-soon:hover .mt-art { transform: none; }
.mtile.is-soon .mt-name { color: var(--dim); }
.mtile.is-empty .mt-art { filter: saturate(.55) brightness(.78); }

/* ─── две служебные плитки: «создать лобби» и промо ───
   Они намеренно ИНВЕРСНЫЕ: не тёмный кадр с белым текстом, а яркая заливка с графитовым текстом.
   На фоне 16 тёмных плиток режимов это читается как «здесь действие», а не «здесь контент». */
.mt-bright { border: 2px solid color-mix(in srgb, var(--c, var(--accent)) 55%, #0b0e14);
  box-shadow: 0 14px 34px -20px rgba(0,0,0,.9); }
.mt-bright .mt-art { background: var(--tile-art, none) center / cover no-repeat, var(--surface-2); }
.mt-bright .mt-art::after { background: none; }          /* никакой засветки — картинка остаётся яркой целиком */

/* обводка: тонкое внутреннее кольцо + засечки по четырём углам */
.mt-bright::before { content: ""; position: absolute; inset: 5px; border-radius: 8px; pointer-events: none; z-index: 2;
  border: 1px solid rgba(255,255,255,.34); }
.mt-bright::after { content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 3;
  --tk: rgba(20,23,31,.9); --tl: 12px; --tw: 2px;
  background:
    linear-gradient(var(--tk), var(--tk)) 0 0 / var(--tl) var(--tw) no-repeat,
    linear-gradient(var(--tk), var(--tk)) 0 0 / var(--tw) var(--tl) no-repeat,
    linear-gradient(var(--tk), var(--tk)) 100% 0 / var(--tl) var(--tw) no-repeat,
    linear-gradient(var(--tk), var(--tk)) 100% 0 / var(--tw) var(--tl) no-repeat,
    linear-gradient(var(--tk), var(--tk)) 0 100% / var(--tl) var(--tw) no-repeat,
    linear-gradient(var(--tk), var(--tk)) 0 100% / var(--tw) var(--tl) no-repeat,
    linear-gradient(var(--tk), var(--tk)) 100% 100% / var(--tl) var(--tw) no-repeat,
    linear-gradient(var(--tk), var(--tk)) 100% 100% / var(--tw) var(--tl) no-repeat; }

/* кикер и иконка-действие в верхних углах */
.mt-kick { display: inline-flex; align-items: center; gap: .28rem; padding: .18rem .44rem; background: #14171f; color: #fff;
  font: 800 .64rem var(--font); text-transform: uppercase; letter-spacing: .07em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.mt-kick .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: mtDot 2s ease-in-out infinite; }
.mt-ico { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: #14171f; color: #fff; }

/* подпись — не «текст на картинке», а графитовая плашка со срезанным углом */
.mt-plate { position: relative; z-index: 4; padding: .5rem .6rem .55rem; background: #14171f;
  border-top: 2px solid color-mix(in srgb, var(--c, var(--accent)) 70%, #14171f);
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0 100%); }
.mt-plate .mt-name { color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.mt-plate .mt-sub { color: var(--dim); }
.mt-bright:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c, var(--accent)) 85%, #fff);
  box-shadow: 0 22px 46px -20px rgba(0,0,0,.95), 0 0 0 4px color-mix(in srgb, var(--c, var(--accent)) 26%, transparent); }
.mt-bright:hover .mt-plate { opacity: 0; }
.mt-bright .mt-over { background: linear-gradient(180deg, rgba(11,14,20,.72) 0%, rgba(11,14,20,.96) 45%); }
.mt-act { --c: var(--accent); }
.mt-art-promo img { z-index: 1; }
.mt-art-promo img { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); max-width: 82%; max-height: 52%;
  object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)); }
.mt-promo:hover .mt-art { transform: none; }
.mt-promo:hover .mt-art-promo img { transform: translate(-50%, -50%) scale(1.05); transition: transform .4s; }

/* панель фильтров витрины */
.tile-filters { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: -.4rem 0 .8rem; }
.tf-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
/* раскрывающаяся панель: карты с миниатюрами + переключатели */
.tf-dd { position: relative; }
.tf-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .6rem; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--dim);
  font: 700 .8rem var(--font); cursor: pointer; transition: .15s; }
.tf-btn:hover, .tf-btn.on { color: var(--txt); border-color: var(--btn); }
.tf-btn .tf-caret { transition: transform .15s; }
.tf-btn.on .tf-caret { transform: rotate(180deg); }
.tf-n { min-width: 17px; height: 17px; padding: 0 .25rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--btn); color: var(--btn-ink); font: 800 .68rem var(--font); }
.tf-n[hidden] { display: none; }        /* авторский display перебивает [hidden] браузера — гасим явно */
.tf-panel { position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; width: min(430px, 88vw);
  padding: .8rem; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(16,20,28,.97);
  backdrop-filter: blur(12px); box-shadow: var(--shadow); animation: navDropIn .14s ease-out; }
.tf-sec + .tf-sec { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.tf-lbl { display: block; margin-bottom: .45rem; color: var(--faint, var(--mute));
  font: 800 .68rem var(--font); text-transform: uppercase; letter-spacing: .08em; }
.tf-maps { display: flex; flex-wrap: wrap; gap: .32rem; max-height: 190px; overflow: auto; }
.tf-mp { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .45rem .22rem .28rem; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--dim);
  font: 700 .74rem var(--font); cursor: pointer; transition: .14s; }
.tf-mp > i { width: 26px; height: 18px; border-radius: 4px; background: var(--mi, linear-gradient(135deg, var(--surface-2), var(--line-2))) center / cover no-repeat; flex: none; }
.tf-mp:not(.has-img) > i { display: none; }
.tf-mp:hover { color: var(--txt); border-color: var(--line-2); }
.tf-mp.on { color: var(--txt); border-color: var(--btn); background: rgba(199,176,110,.14); }
.tf-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem;
  padding-top: .7rem; border-top: 1px solid var(--line); }
.tf-sw { display: flex; align-items: center; gap: .45rem; cursor: pointer; color: var(--dim); font: 700 .8rem var(--font); padding: .18rem 0; }
.tf-sw input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.tf-sw:hover { color: var(--txt); }
.tf-count { margin-left: auto; }
.tile-empty { padding: 1.4rem 0; text-align: center; }
.lnk { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.mtile.tf-hide { display: none; }
.mt-badge.srv { margin-left: auto; color: var(--dim); }

/* полоса «другие игры клуба» — CS 1.6 не в витрине режимов, но с главной не пропадает */
.og-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; }
.og { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: var(--r);
  border: 1px solid var(--line); background: linear-gradient(100deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface) 62%);
  text-decoration: none; color: var(--txt); transition: transform .16s, border-color .16s; }
.og:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); }
.og-ic { font-size: 1.3rem; }
.og-in { display: flex; flex-direction: column; min-width: 0; }
.og-in b { font: 700 .9rem var(--font-d); }
.og-n { margin-left: auto; font-weight: 800; }

@media (max-width: 1100px) { .tile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 760px) {
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .45rem; }
  .mt-name { font-size: .82rem; }
  .mt-over { display: none; }                    /* на тач-экранах ховера нет: тап ведёт сразу на страницу режима */
  .mtile:hover .mt-in { opacity: 1; }
  .modes-h-r .dim { display: none; }
  .tf-count { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mtile, .mtile .mt-art, .mt-over, .mt-fill i { transition: none; }
  .mtile:hover { transform: none; }
  .mtile:hover .mt-art { transform: none; }
  .mt-badge.live .dot { animation: none; }
}

/* ---- 3D-превью редактора наклеек (sticker3d.js) ---- */
.st-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.st-canvas:active { cursor: grabbing; }
/* модель заменяет плоскую картинку, но сама картинка остаётся в разметке как запасной путь */
.st-preview.surf-3d .st-weapon, .st-preview.surf-3d .st-weapon-ph { display: none; }
.st-3d-skel { position: absolute; inset: 0; display: grid; place-items: center; gap: .6rem; grid-auto-flow: row; }
.st-3d-skel span { width: 58%; height: 26%; border-radius: 18px;
  background: linear-gradient(100deg, rgba(255,255,255,.04) 20%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.04) 60%);
  background-size: 240% 100%; animation: st-shimmer 1.4s linear infinite; }
.st-3d-skel i { font-style: normal; font-size: .8rem; color: var(--dim); }
@keyframes st-shimmer { to { background-position: -240% 0; } }
@media (prefers-reduced-motion: reduce) { .st-3d-skel span { animation: none; } }
.st-3d-reset { position: absolute; right: 10px; bottom: 10px; z-index: 5; font-size: .74rem; padding: .3rem .55rem;
  border-radius: 8px; border: 1px solid var(--line-2); background: rgba(16,20,28,.86); color: var(--dim); cursor: pointer; }
.st-3d-reset:hover { border-color: var(--accent); color: var(--fg); }
.st-3d-reset[hidden] { display: none !important; }

/* ---- параметры скина: износ, StatTrak, бирка (S.4) ---- */
.st-skin { position: absolute; left: 12px; top: 12px; z-index: 5; width: min(300px, 46%);
  padding: .7rem .85rem; border: 1px solid var(--line-2); border-radius: var(--r);
  background: rgba(14,17,23,.82); backdrop-filter: blur(6px); }
/* на узком экране карточке в углу тесно — отпускаем её в обычный поток под превью */
@media (max-width: 760px) { .st-skin { position: static; width: auto; margin-top: .7rem; backdrop-filter: none; } }
.st-skin header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.st-skin header b { font-size: .95rem; }
.st-q { font-size: .74rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.st-q.fn { color: #4b9bff; } .st-q.mw { color: #4ad07a; } .st-q.ft { color: #d8c93f; }
.st-q.ww { color: #e08a3c; } .st-q.bs { color: #e05545; }
.st-skin-wear { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--dim); }
.st-skin-wear output { font-variant-numeric: tabular-nums; color: var(--fg); font-size: .9rem; }
.st-wear-track { position: relative; margin: .35rem 0 .6rem; }
/* цветные границы качества под ползунком — ширины взяты из границ float'а CS2 */
.st-wear-bands { display: flex; height: 6px; border-radius: 999px; overflow: hidden; }
.st-wear-bands .band { display: block; }
.band.fn { background: #4b9bff; } .band.mw { background: #4ad07a; } .band.ft { background: #d8c93f; }
.band.ww { background: #e08a3c; } .band.bs { background: #e05545; }
/* ползунок износа едет ПОВЕРХ цветных границ качества: свою дорожку он должен отдать им */
.st-wear-track input[type=range] { position: absolute; inset: -7px 0 auto; width: 100%; height: 20px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; accent-color: transparent; }
.st-wear-track input[type=range]::-webkit-slider-runnable-track { height: 20px; background: transparent; }
.st-wear-track input[type=range]::-moz-range-track { height: 20px; background: transparent; }
.st-wear-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: 3px;
  border-radius: 50%; background: #fff; border: 2px solid #10141c; box-shadow: 0 1px 5px rgba(0,0,0,.65); cursor: pointer; }
.st-wear-track input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #10141c; box-shadow: 0 1px 5px rgba(0,0,0,.65); cursor: pointer; }
.st-wear-track input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-skin-row { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; font-size: .8rem; }
.st-skin-row label { display: flex; align-items: center; gap: .35rem; color: var(--dim); }
.st-skin-row input[type=number] { width: 5rem; } .st-skin-row input[type=text] { width: 10rem; }
.st-st { cursor: pointer; }
.st-skin-note { margin: .5rem 0 0; }
@media (max-width: 640px) { .st-skin-row input[type=text] { width: 100%; } .st-skin-row .st-tag { flex: 1 1 100%; } }

/* метка брелока: честной 3D-модели ремешка нет, показываем точку крепления */
.st-charm-pin { position: absolute; z-index: 3; transform: translate(-50%, -6%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; }
.st-charm-pin i { width: 1px; height: 16px; background: rgba(255,255,255,.45); }
.st-charm-pin img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.7)); }
.st-charm-pin[hidden] { display: none !important; }

/* ═══ Лобби, волна 3 (L2/L3): поток готовности, витрина списка, возврат в лобби ═══════════════
   Блок дописан целиком в конец файла — в этом же CSS параллельно правят другие разделы,
   и лезть в чужие правила ради пары строк значит ловить конфликт на ровном месте. */

/* индикатор «ждём» — одна анимация на весь блок */
@keyframes lspin { to { transform: rotate(360deg); } }
.spin { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--btn) 35%, transparent); border-top-color: var(--btn);
  animation: lspin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

/* L2.3: отметка явки в слоте состава — вместо «готов/не готов», когда явка реально известна */
.lr-live { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; padding: .12rem .45rem;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--dim); font: 700 .68rem var(--font); text-transform: lowercase; white-space: nowrap; }
.lr-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); }
.lr-live.on { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  background: color-mix(in srgb, var(--green) 12%, var(--bg-2)); }
.lr-live.on i { background: var(--green); box-shadow: 0 0 8px var(--green); animation: none; border: 0; }
.lr-note { margin: -.2rem 0 .2rem; grid-column: 1 / -1; }

/* ── L2.2: окно «все в сборе» ──────────────────────────────────────────────────────────────
   Момент у игрока один, а состояний у окна два (подтвердить → зайти), поэтому это одно окно,
   которое переезжает, а не два разных: иначе второе всплывает поверх первого. */
.lgo-wrap { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 1rem; }
.lgo-wrap[hidden] { display: none; }
.lgo-back { position: absolute; inset: 0; background: rgba(4,6,10,.78); backdrop-filter: blur(5px); }
@keyframes lgo-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.lgo { position: relative; width: min(660px, 100%); max-height: calc(100vh - 2rem); overflow: auto;
  border-radius: 18px; border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(199,176,110,.10);
  animation: lgo-in .28s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .lgo { animation: none; } }

/* шапка окна: фото карты, поверх — арт и текст. Золотая нить снизу отделяет её от состава. */
.lgo-art { position: relative; overflow: hidden; min-height: 224px; padding: 1.15rem 1.2rem 1rem;
  border-radius: 18px 18px 0 0; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(199,176,110,.10), transparent 70%), var(--bg-2); }
.lgo-map { position: absolute; inset: 0; background-image: var(--lmi); background-size: cover; background-position: center 40%;
  opacity: .3; filter: saturate(.75) contrast(1.05); }
.lgo-art::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,19,.35), rgba(10,13,19,.92)); }
/* арт клуба — справа, наполовину за краем: так же, как фигуры на баннерах разделов */
.lgo-art > .lgo-kick, .lgo-art > h2, .lgo-art > .lgo-sub, .lgo-art > .lgo-count, .lgo-x { position: relative; z-index: 2; }
/* Арт снят на чёрном фоне — `screen` гасит чёрное до фона панели, и вырезать альфу не нужно:
   получается честная фигура на тёмной подложке без ореола по контуру. */
.lgo-art[style*="--lgo-art"]::before { content: ''; position: absolute; z-index: 1; right: -1%; top: 0; bottom: 0; width: 58%;
  background: var(--lgo-art) right bottom / auto 100% no-repeat; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.lgo-kick { display: inline-block; margin-bottom: .35rem; padding: .16rem .5rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--btn) 40%, var(--line)); color: var(--btn-2);
  font: 800 .68rem var(--font); letter-spacing: .06em; text-transform: uppercase; }
.lgo-art h2 { font-family: var(--font-d); font-size: clamp(1.3rem, 3.4vw, 1.8rem); font-weight: 900; line-height: 1.05; }
.lgo-sub { margin-top: .3rem; max-width: 34ch; color: var(--dim); font-size: .88rem; }
.lgo-count { display: inline-flex; align-items: baseline; gap: .3rem; margin-top: .7rem;
  font: 800 1.15rem var(--font-d); color: var(--btn-2); font-variant-numeric: tabular-nums; }
.lgo-count span { color: var(--dim); font-size: .9rem; }
.lgo-count i { color: var(--dim); font: 600 .78rem var(--font); font-style: normal; }
/* Крестик стоит поверх арта — без плотной подложки он на светлом плече попросту теряется. */
.lgo-x { position: absolute; z-index: 3; top: .6rem; right: .6rem; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line-2); background: rgba(8,11,16,.82); backdrop-filter: blur(4px);
  color: var(--dim); cursor: pointer; }
.lgo-x:hover { color: var(--txt); border-color: var(--btn); }

/* состав: две колонки, у каждого игрока живой статус справа */
.lgo-rows { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1rem; padding: .9rem 1.2rem .3rem; }
.lgo-tn { display: block; margin-bottom: .35rem; color: var(--dim); font: 800 .7rem var(--font);
  letter-spacing: .07em; text-transform: uppercase; }
.lgo-p { display: flex; align-items: center; gap: .5rem; padding: .34rem .5rem; margin-bottom: .2rem;
  border-radius: 9px; border: 1px solid transparent; background: var(--bg-2); }
.lgo-p img, .lgo-p .lr-ava { width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--surface-2); border: 1px solid var(--line); }
.lgo-p .lr-ava.bot { display: grid; place-items: center; }
.lgo-p .lr-ava.bot .ni { width: 13px; height: 13px; }
.lgo-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 .84rem var(--font); }
.lgo-p.is-me { border-color: color-mix(in srgb, var(--btn) 45%, var(--line)); background: color-mix(in srgb, var(--btn) 8%, var(--bg-2)); }
.lgo-p.is-here { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.lgo-st { display: inline-flex; align-items: center; gap: .3rem; flex: none;
  font: 700 .7rem var(--font); color: var(--mute); white-space: nowrap; }
.lgo-st.ok { color: var(--green); }
.lgo-st.wait { color: var(--dim); }
.lgo-p.is-bot { opacity: .7; }

/* низ окна: одно действие крупно, второстепенное — рядом мелко */
.lgo-foot { padding: .9rem 1.2rem 1.15rem; }
.lgo-act { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.lgo-act[hidden] { display: none; }
.lgo-go { flex: 1 1 15rem; justify-content: center; padding: .8rem 1.2rem; font-size: 1rem; }
.lgo-go .ni { width: 17px; height: 17px; }
.lgo-form { flex: 1 1 15rem; display: flex; }
.lgo-wait { display: inline-flex; align-items: center; gap: .45rem; color: var(--dim); font: 700 .9rem var(--font); }
.lgo-ip { flex: 1 1 12rem; padding: .55rem .7rem; border-radius: 9px; border: 1px dashed var(--line-2);
  background: var(--bg-2); color: var(--btn-2); font: 700 .88rem/1.2 ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgo-play { flex: 0 0 auto; padding: .7rem 1.15rem; }
.lgo-play .ni { width: 15px; height: 15px; }
/* «сервер готов» — состояние срочное, шапка это показывает цветом, а не ещё одной надписью */
.lgo.is-go .lgo-art { background: linear-gradient(180deg, rgba(61,220,132,.14), transparent 70%), var(--bg-2); }
.lgo.is-go .lgo-kick { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); color: var(--green); }
.lgo.is-go .lgo-count { color: var(--green); }
@media (max-width: 560px) {
  .lgo-rows { grid-template-columns: 1fr; gap: .1rem; }
  .lgo-art { min-height: 190px; }
  .lgo-art h2 { font-size: 1.3rem; }
  /* На телефоне арт уступает тексту: подпись и так идёт в две строки и упиралась в фигуру. */
  .lgo-art[style*="--lgo-art"]::before { width: 44%; opacity: .5; }
  .lgo-sub { max-width: 20ch; }
  .lgo-act { gap: .5rem; }
}

/* L2.5: бан на лобби — говорим прямо, за что и до когда. Красный, но не «ошибка»: это состояние, а не сбой. */
.lban { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1rem; padding: .8rem .95rem;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--red) 12%, var(--surface)), var(--surface)); }
.lban > .ni { width: 20px; height: 20px; flex: none; margin-top: .15rem; color: var(--red); }
.lban-t { display: grid; gap: .2rem; }
.lban-t b { font: 800 .95rem var(--font); }

/* ── L3: «Вернуться в лобби» в шапке ───────────────────────────────────────────────────────
   Состояние, а не раздел: поэтому не пункт меню, а отдельная плашка с живой точкой. Показывается
   только когда у игрока действительно есть открытая комната, так что кричать ей можно. */
.b2l { display: inline-flex; align-items: center; gap: .5rem; flex: none; max-width: 15rem;
  padding: .32rem .7rem .32rem .55rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--btn) 55%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--btn) 16%, var(--surface)), var(--surface));
  color: var(--txt); transition: .15s; }
.b2l:hover { border-color: var(--btn); background: linear-gradient(135deg, color-mix(in srgb, var(--btn) 26%, var(--surface)), var(--surface-2));
  transform: translateY(-1px); box-shadow: 0 6px 18px var(--btn-glow); }
.b2l .ni { width: 15px; height: 15px; flex: none; color: var(--btn-2); }
.b2l-t { display: grid; min-width: 0; line-height: 1.12; }
.b2l-t b { font: 800 .78rem var(--font); white-space: nowrap; }
.b2l-t i { font: 600 .68rem var(--font); font-style: normal; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes b2lpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; } }
.b2l-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--green);
  animation: b2lpulse 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .b2l-dot { animation: none; } }
/* В сжатой шапке подписи пунктов уже спрятаны — плашке тоже незачем занимать полстроки. */
.top.is-compact .b2l-t i, .top.is-tight .b2l-t { display: none; }
@media (max-width: 760px) { .top .b2l .b2l-t { display: none; } .top .b2l { padding: .32rem .55rem; } }
/* В мобильной шторке — во всю ширину и с подписью: там места хватает */
.b2l-wide { display: flex; max-width: none; margin-bottom: .6rem; padding: .6rem .8rem; border-radius: 12px; }
.b2l-wide .b2l-t { display: grid !important; }
.b2l-wide .b2l-t b { font-size: .9rem; }

/* ── L3: витрина списка лобби — строка с настоящим действием ────────────────────────────────
   Раньше вся строка была одной ссылкой, и кнопке внутри неё места не было. Теперь ссылка —
   название карты, а кликабельность всей строки даёт её псевдоэлемент; действие лежит выше слоем. */
.lob-list .lrow { grid-template-columns: 56px minmax(0, 1fr) 112px 18px 18px 88px 138px 84px 132px; }
.lrow > .lr-map { position: static; color: inherit; text-decoration: none; }
.lrow > .lr-map::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 10px; }
.lrow:focus-within { border-color: var(--btn); }
.lrow > .lr-map:focus-visible::after { outline: 2px solid var(--btn); outline-offset: -2px; }
.lr-act { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.lr-act .btn { white-space: nowrap; }
.lr-act form { display: flex; }
/* нейтральная метка вместо кнопки: состояние, на которое игрок повлиять не может */
.lr-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 8px;
  border: 1px dashed var(--line-2); background: var(--bg-2); color: var(--mute);
  font: 700 .76rem var(--font); white-space: nowrap; }
@keyframes lrlive { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.lr-tag.live { border-style: solid; border-color: color-mix(in srgb, var(--green) 40%, var(--line)); color: var(--green); }
.lr-tag.live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: lrlive 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lr-tag.live i { animation: none; } }
/* сыгранное лобби гасим целиком: оно в списке ради истории, а не ради клика */
.lrow.is-done { opacity: .62; }
.lrow.is-live .lr-pic { filter: saturate(1.1); }
/* Узкий экран: строка перестаёт быть таблицей и становится карточкой — иначе кнопка выдавливает всё. */
/* На узком экране строка перестаёт быть таблицей и становится карточкой. Ячейки расставлены явно:
   при автоматической раскладке элементы налезали друг на друга и формат карты просто пропадал. */
@media (max-width: 900px) {
  .lob-list .lrow { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto;
    gap: .3rem .6rem; padding: .6rem .7rem .7rem; }
  /* ‼️ Старая мобильная раскладка строки прятала формат, замок и модификаторы — в карточке место
     для них есть, и прятать их незачем. Правило ниже по файлу, поэтому перебивает то `display:none`. */
  .lr-fmt, .lr-lock, .lr-fun { display: block; }
  .lr-fun { line-height: 1; }
  .lrow > .lr-map { grid-area: 1 / 2 / 2 / 3; font-size: .92rem; }
  .lr-pic { grid-area: 1 / 1 / 3 / 2; width: 56px; height: 40px; align-self: center; }
  .lr-fun { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
  .lr-fmt { grid-area: 2 / 2 / 3 / 3; }
  .lr-cnt { grid-area: 2 / 3 / 3 / 4; justify-self: end; }
  .lr-host { grid-area: 3 / 1 / 4 / 3; }
  .lr-lock { grid-area: 3 / 3 / 4 / 4; justify-self: end; }
  .lr-ago { display: none; }          /* «6 мин. назад» — самое необязательное, им и жертвуем */
  .lr-act { grid-area: 4 / 1 / 5 / 4; justify-content: stretch; margin-top: .25rem; }
  .lr-act .btn, .lr-act form, .lr-act .lr-tag { flex: 1; justify-content: center; }
  .lr-tip { max-width: 200px; }
}

/* ── L4: вид ПК-меню по умолчанию (настройка nav_compact) ──────────────────────────────────
   Те же правила, что у аварийного .is-compact, но включаются классом с сервера — без моргания
   подписей на загрузке. `nav-wide` — компромисс: иконки везде, подписи на по-настоящему широких. */
.top.nav-icons .nav-l span, .top.nav-icons .nav-top span { display: none; }
.top.nav-icons .nav-l, .top.nav-icons .nav-top { padding: .45rem .6rem; }
.top.nav-icons .nav-l.nav-shop { padding: .45rem .7rem; }
.top.nav-icons .btn-prem .lbl { display: none; }
.top.nav-icons .btn-prem { padding: .38rem .55rem; }
.top.nav-icons .b2l-t i { display: none; }
/* ‼️ Варианта «подписи только на широких экранах» здесь нет намеренно: `.wrap` зафиксирован на
   1180px, и на 1920 шапка ровно та же, что на 1440, — такая настройка обещала бы несуществующее. */
/* Без подписей меню становится рядом одинаковых кружков — активный раздел обязан читаться сразу. */
.top.nav-icons .nav-l.active, .top.nav-icons .nav-top.active,
.top.is-compact .nav-l.active, .top.is-compact .nav-top.active {
  background: color-mix(in srgb, var(--btn) 18%, var(--surface-2)); color: var(--btn-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--btn) 40%, transparent); }

/* ── L6: выбор карты лобби (пул клуба + мастерская) ────────────────────────────────────────
   Карту выбирают глазами, а не по ключу `de_*`: поэтому плитки с превью, а не выпадающий список. */
.opt-pick { display: flex; align-items: center; gap: .4rem; justify-content: space-between;
  padding: .32rem .55rem; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--txt); font: 700 .82rem var(--font); cursor: pointer; }
.opt-pick:hover { border-color: var(--btn); }
.opt-pick .ni { width: 14px; height: 14px; color: var(--dim); }
.mpick .lnew-body { display: grid; gap: .7rem; }
/* ‼️ Карты выбираются СПИСКОМ НАЗВАНИЙ, а не плитками с превью: по кадру карты игрок её не узнаёт
   (просьба владельца), а название читается сразу. Класс НЕ `.mtile`: под этим именем на главной
   живут плитки режимов, и блок ниже по файлу перебивал им раскладку. */
.mpk-list { display: grid; gap: .25rem; max-height: 42vh; overflow: auto; align-content: start; }
.mpk-list[hidden] { display: none; }
.mpk-row { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .6rem;
  border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--txt); text-align: left; cursor: pointer; transition: border-color .14s, background .14s; }
.mpk-row:hover { border-color: var(--btn); background: var(--surface-2); }
.mpk-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mpk-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .85rem var(--font); }
.mpk-k { font: 600 .72rem ui-monospace, Consolas, monospace; }
.mpk-s { margin-left: auto; white-space: nowrap; }
/* ‼️ Вкладки стоят ПОД списком карт (правка владельца), поэтому у них верхняя граница, а не нижняя:
   визуально они подпирают список, а не отделяют шапку окна. */
.mpk-tabs { display: flex; gap: .3rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.mpk-tab { padding: .35rem .7rem; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--dim); font: 700 .8rem var(--font); cursor: pointer; transition: .14s; }
.mpk-tab:hover { color: var(--txt); border-color: var(--btn); }
.mpk-tab.on { color: #14171f; background: linear-gradient(180deg, var(--btn-2), var(--btn)); border-color: var(--btn); }
.mpk-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Переключатель версий редактора наклеек: те же пилюли, что у режима просмотра, но это ссылки —
   версия живёт в адресе и запоминается cookie, чтобы сравнивать на нескольких стволах подряд. */
.st-edsw a { display: inline-flex; align-items: center; padding: .3rem .6rem; border-radius: 8px;
  color: var(--dim); font: 700 .78rem var(--font); text-decoration: none; transition: .14s; }
.st-edsw a:hover { color: var(--txt); }
.st-edsw a.on { color: #14171f; background: linear-gradient(180deg, var(--btn-2), var(--btn)); }

/* Баннер стартового набора: широкая полоса над лайв-дропом. Живёт ровно до тех пор, пока в
   инвентаре есть неоткрытый кейс, поэтому постоянного места в макете не занимает. */
.wpack { display: flex; align-items: center; gap: .9rem; margin: 1rem 0 1rem; padding: .8rem 1rem;   /* отступ сверху: плашка заезжала на блок статистики */
  border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--btn) 45%, var(--line));
  background: linear-gradient(100deg, color-mix(in srgb, var(--btn) 16%, var(--surface)), var(--surface) 62%);
  color: var(--txt); text-decoration: none; transition: transform .16s, border-color .16s; }
.wpack:hover { transform: translateY(-2px); border-color: var(--btn); }
.wpack-ic { font-size: 1.7rem; line-height: 1; flex: none; }
.wpack-t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wpack-t b { font: 800 .98rem var(--font-d); }
.wpack-t i { color: var(--dim); font: 400 .82rem var(--font); font-style: normal; }
.wpack-b { margin-left: auto; flex: none; }
@media (max-width: 700px) {
  .wpack { flex-wrap: wrap; }
  .wpack-b { margin-left: 0; width: 100%; text-align: center; }
}

.mpick-add { display: grid; gap: .4rem; }
.mpick-add[hidden] { display: none; }

/* ── L6: нижние края блоков состава сходятся пиксель в пиксель ─────────────────────────────
   Раньше три колонки держали ОБЩУЮ МИНИМАЛЬНУЮ высоту, но не одинаковую: в центре кнопок больше,
   и он уезжал ниже. Теперь колонки тянутся до высоты самой высокой (align-self: stretch), а внутри
   центральной нижний блок «Ожидание» забирает остаток — так линия низа получается одна на все три. */
.lr-grid .lr-team, .lr-grid .lr-col-mid { align-self: stretch; }
.lr-col-mid { grid-template-rows: auto 1fr; align-content: stretch; }
.lr-team { display: flex; flex-direction: column; }
.lr-team .lr-slots { flex: 1; align-content: start; }
.lr-hold { display: flex; flex-direction: column; }
.lr-hold .lr-slots { flex: 1; align-content: start; }
/* На узких экранах колонки уже идут друг под другом — растягивать там нечего. */
@media (max-width: 1080px) {
  .lr-grid .lr-team, .lr-grid .lr-col-mid { align-self: start; }
  .lr-col-mid { grid-template-rows: none; align-content: start; }
}

/* ══ Волна 4: дизайн-хвосты по лобби (docs/38-game-servers/16-lobby-design-tails.md) ══════════ */

/* ── п.2: подпись плитки не должна читаться поверх фигуры ──────────────────────────────────
   Арты владелец оставил прежние — здесь только вёрстка. Вуаль `.lb-tile::before` держалась
   глухой до 34% ширины, а текстовая зона занимает 60% (`padding-right: 40%`), поэтому середина
   подписи ложилась прямо на фигуру. Теперь вуаль глухая ровно до текстовой зоны, а сам арт
   гаснет по левому и правому краям: раньше фигура обрывалась по границе плитки без затухания. */
   ‼️ Геометрию плитки НЕ трогаем: владелец отдельно попросил оставить их такими, какими они были,
   — компактными в три строки. Расширение текстовой зоны делало плитки на треть выше, поэтому
   `padding-right` остаётся прежним (40% / 34% на узком), а читаемость добираем двумя приёмами,
   которые высоту не меняют: вуаль глухая дальше вправо, а сам арт стал сдержаннее — чуть меньше,
   чуть тише и с мягкими краями вместо жёсткого среза по границе плитки. */
.lb-tile::before { background: linear-gradient(96deg, var(--surface) 52%,
  color-mix(in srgb, var(--surface) 74%, transparent) 70%, transparent 90%); }
.lb-art { height: 100%; bottom: 0; right: -4%; opacity: .88;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 86%, transparent 100%); }

/* ── п.9: верхняя плашка комнаты — одна линия, один радиус ─────────────────────────────────
   Было: `.lrb-count` висел `position: absolute; top: .8rem` у верхнего края, «Покинуть» стоял
   формой посреди флекса и выравнивался по своей высоте, а радиусы шли вразнобой — 8px у `.btn.sm`,
   999px у `.pill` и `.lrb-count`, 14px у самого баннера. Теперь это flex-строка с общей высотой
   и одним радиусом `--lrb-r`; счётчик вернулся в поток, форма выхода — flex-контейнер. */
.lr-banner { --lrb-r: 10px; }
.lrb-bar { position: relative; z-index: 1; flex: 1 0 100%; display: flex; align-items: center;
  gap: .4rem; flex-wrap: wrap; }
.lrb-bar > *, .lrb-bar .btn, .lrb-bar .pill { min-height: 34px; border-radius: var(--lrb-r); }
.lrb-bar .btn, .lrb-bar .pill, .lrb-bar .lrb-count { display: inline-flex; align-items: center; gap: .35rem; }
.lrb-leave { display: flex; align-items: center; margin-left: 0; }
.lrb-leave .btn { border-radius: var(--lrb-r); }
/* счётчик, состояние и выход — единой группой у правого края; «К списку» и ссылка — у левого */
.lrb-count { position: static; left: auto; top: auto; transform: none; margin-left: auto;
  padding: 0 .7rem; border: 1px solid var(--line-2); background: rgba(6,9,14,.55);
  color: var(--dim); font: 600 .8rem var(--font); white-space: nowrap; }
.lrb-count b { color: var(--txt); font-weight: 800; }
.lrb-state { margin-left: 0; }
/* Кнопка ссылки — заметная, но не главная: главная кнопка плашки «Покинуть» остаётся красной. */
.lrb-copy { min-width: 0; padding-inline: .7rem; border-color: color-mix(in srgb, var(--btn) 45%, var(--line-2));
  color: var(--btn-2); background: color-mix(in srgb, var(--btn) 12%, var(--surface)); }
.lrb-copy:hover { border-color: var(--btn); background: color-mix(in srgb, var(--btn) 20%, var(--surface)); }
.lrb-copy .ni { width: 15px; height: 15px; }
/* Подтверждение — классом, а не подменой содержимого: внутри кнопки лежит <svg>. */
.copy-ok { border-color: var(--green) !important; color: var(--green) !important;
  background: color-mix(in srgb, var(--green) 16%, var(--surface)) !important; }
.copy-fail { border-color: var(--red, #ff6b6b) !important; color: var(--red, #ff6b6b) !important; }
@media (max-width: 700px) {
  .lrb-bar { gap: .35rem; }
  .lrb-count { margin-left: 0; }
  .lrb-copy span[data-copy-lbl] { display: none; }   /* на узком остаётся иконка — строка и так плотная */
}

/* ── п.6: колонка команды = состав + свой блок вне состава ─────────────────────────────────
   «Ожидание» переехало из центральной колонки под команду 1, «Смотрят» — под команду 2, и оба
   стали НАСТОЯЩИМИ колонками сетки. Прямой ребёнок `.lr-grid` теперь `.lr-col`, поэтому правила
   выравнивания низа из волны 3 (они держали `align-self: stretch` на самом `.lr-team`) перенесены
   на обёртку: состав забирает остаток высоты, блок вне состава садится на нижнюю кромку.
   Так линия низа у всех трёх колонок по-прежнему одна. */
.lr-grid > .lr-col { align-self: stretch; display: grid; grid-template-rows: 1fr auto;
  gap: .8rem; min-width: 0; }
.lr-col > .lr-team { min-height: 0; }
/* ‼️ У центра ВТОРОЙ ряд условный: GOTV есть только при созданном матче. Явный трек `1fr auto`
   резервировал его всегда — пустой ряд плюс `gap` оставляли 13px, и низ центра не доезжал до
   соседей. Поэтому explicit-трек только один, а GOTV попадает в implicit-ряд, когда он есть. */
.lr-col-mid { grid-template-rows: 1fr; grid-auto-rows: auto; }
/* Шапка блока: иконка, название, счётчик у правого края — а не три элемента враспор. */
.lr-hold .lr-th { justify-content: flex-start; gap: .4rem; }
.lr-hold .lr-th .lr-thc { margin-left: auto; }
.lr-holdi { width: 15px; height: 15px; color: var(--dim); flex: none; }
.lr-holdh { margin: -.15rem 0 .35rem; }
/* Два блока — две роли, и это должно читаться без чтения подписи: у ожидания акцент золотой
   (человек ещё «в очереди на игру»), у зрителей — холодный. */
.lr-hold-wait { border-left: 3px solid color-mix(in srgb, var(--btn) 55%, var(--line)); }
.lr-hold-watch { border-left: 3px solid color-mix(in srgb, var(--cyan) 45%, var(--line)); }
.lr-hold-wait .lr-holdi { color: var(--btn); }
.lr-hold-watch .lr-holdi { color: var(--cyan); }
/* GOTV переехал в центральную колонку: это про трансляцию матча, а не про список людей. */
.lr-gotv-mid { display: grid; gap: .35rem; padding: .7rem .8rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); }
.lr-gotv-mid code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1080px) {
  .lr-grid > .lr-col { align-self: start; grid-template-rows: none; }
  .lr-col-mid { grid-template-rows: none; }
}

/* ── п.7: центральная колонка компактнее ──────────────────────────────────────────────────
   Факты строкой чипов вместо сетки 2×2 — блок стал вдвое ниже, но не превратился в серый текст:
   подпись мелкая заглавными, значение жирным. Длинное значение (пул карт) режется многоточием,
   полное лежит в `title` у чипа. */
.lr-facts.chips { display: flex; flex-wrap: wrap; gap: .3rem; grid-template-columns: none; }
.lr-facts.chips > div { display: inline-flex; align-items: baseline; gap: .35rem; min-width: 0;
  padding: .26rem .5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); }
.lr-facts.chips dt { flex: none; color: var(--mute); font: 700 .6rem var(--font);
  text-transform: uppercase; letter-spacing: .05em; }
.lr-facts.chips dd { margin: 0; max-width: 13ch; text-align: left; color: var(--txt);
  font: 700 .76rem var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Крупные действия — в ряд и одного размера. Раньше «Я готов» и «Старт матча» тянулись во всю
   ширину каждая, а инструменты состава были мелкими квадратами: три разных набора в одной колонке. */
.lr-acts-main { display: flex; gap: .4rem; }
.lr-acts-main > form { flex: 1 1 0; min-width: 0; display: grid; }
.lr-acts-main .btn { width: 100%; min-height: 40px; justify-content: center; white-space: normal;
  padding-inline: .6rem; font-size: .85rem; }
/* Пятая ячейка ряда инструментов — «Закрыть лобби»: та же высота и радиус, но подписью, а не значком. */
.lr-tools.five { grid-template-columns: repeat(4, 1fr) 1.6fr; }
.lr-tools.five .lr-tclose button { font: 700 .74rem var(--font); }
.lr-tools.five .lr-tclose button:hover { color: var(--red, #ff6b6b); border-color: var(--red, #ff6b6b); }
/* ‼️ `min-height: 22rem` на составе и центре был рассчитан на пять слотов, чтобы лобби 2×2 не
   схлопывало середину. После переезда «Ожидания» (п.6) центр стал короче сам, поэтому минимум
   снижен — но не убран: на 1×1 без него колонки складывались в три узкие полоски. */
.lr-team, .lr-mid { min-height: 17rem; }
.lr-mid { align-content: start; }

/* ── п.10: шлем в окне «Состав собран» больше не касается верхнего края ────────────────────
   Арт стоял `bottom / auto 100%` — ровно во всю высоту блока, и над головой не оставалось
   воздуха: фигура упиралась в кромку и читалась как обрезанная. Опускаем на 5%: высота арта
   95% блока и он по-прежнему стоит на нижней кромке. */
.lgo-art[style*="--lgo-art"]::before { background-size: auto 95%; }

/* ── п.10: плитки на узком экране ─────────────────────────────────────────────────────────
   Резерв под арт на ≤560px (34%) пересчитан заново: арт стал ниже и уехал правее (п.2), так что
   запаса хватает — плитка остаётся компактной, подпись на фигуру не наезжает. */
@media (max-width: 560px) { .lb-art { right: -8%; } }

/* ── п.5: двухэтажная шапка — конец качелям «либо имя клуба, либо подписи меню» ────────────
   Было два независимых механизма, споривших за одну ширину: медиа-запрос 1450px включал подпись
   бренда, меряя ОКНО, а `fit()` в app.js прятал подписи пунктов меню, меряя СТРОКУ. И корень
   глубже: `.wrap` = min(1180px, 100% - 2rem) — шапка НИКОГДА не шире 1180px, сколько бы ни было
   экрана, поэтому на 1451px подпись бренда включалась, а места в строке не прибавлялось ни на
   пиксель. Отсюда и качели: появился логотип — пропали слова в меню.

   Решение владельца: развести по этажам. Верхний — бренд, «в игре», возврат в лобби, кошелёк,
   колокольчик, аватар; нижний — только навигация во всю ширину. Подписи пунктов помещаются
   всегда, бренд ни у кого ничего не отнимает, и решение принимает ОДИН механизм.
   Порядок в DOM не тронут (важно для чтения с клавиатуры) — переставляет только `order`.
   ‼️ На мобильном (≤760px) `.top .nav` скрыт, навигация живёт в таб-баре: второй этаж там
   просто исчезает, а не остаётся пустой полосой.
   ‼️ `.b2l` («Вернуться в лобби») появляется только у игрока с активным лобби — ширина верхнего
   этажа зависит и от состояния игрока, а не только от экрана. На втором этаже это уже не важно:
   навигация живёт в своей строке и от соседей не зависит. */
.top .wrap { flex-wrap: wrap; height: auto; align-items: center; row-gap: 0; column-gap: .9rem; }
.top .brand { order: 1; margin-right: auto; min-height: 46px; }
.top .b2l { order: 2; }
.top .user { order: 3; min-height: 46px; }
.top .nav { order: 4; flex: 1 0 100%; min-height: 42px; align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
/* ‼️ Медиа-запрос, гасивший подпись бренда на 1450px, снят намеренно: он и создавал качели.
   Аварийный `is-tight` из `fit()` остаётся — но теперь до него дело не доходит. */
@media (min-width: 761px) {
  .top .brand span:not(.online-badge) { display: inline; }
}
@media (max-width: 760px) {
  /* второго этажа нет — шапка снова однострочная */
  .top .wrap { flex-wrap: nowrap; height: 64px; }
  .top .brand, .top .user { min-height: 0; }
}

/* ── п.8: промо-полоса над футером на /lobbies ────────────────────────────────────────────
   Четыре карточки во всю ширину окна. Базовый вид берём у `.promo` с главной, чтобы полоса не
   была «ещё одним видом карточки», но арты здесь сняты на чёрном и кладутся через `screen`:
   альфу не вырезаем, а левая половина кадра пустая — под текст. */
.lb-promobar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: 2.2rem; }
.lb-promobar .pb-card { min-height: 150px; padding: .9rem 1rem; overflow: hidden; }
/* Вуаль под текстом — та же логика, что у плиток (п.2): без неё подпись читается поверх фигуры.
   Глухая ровно по правый край текстовой зоны, дальше гаснет. */
.lb-promobar .pb-card::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, var(--surface) 56%,
    color-mix(in srgb, var(--surface) 70%, transparent) 72%, transparent 92%); }
.lb-promobar .promo-in { position: relative; z-index: 2; max-width: 54%; gap: .4rem; }
.lb-promobar .promo-in b { font-size: 1rem; }
.lb-promobar .promo-in .small { font-size: .76rem; line-height: 1.4; }
.lb-promobar .promo-in .btn { margin-top: .1rem; }
/* Арт на чёрном: `screen` гасит фон до фона карточки, ореола по контуру нет. По краям гасим
   маской — иначе фигура обрывалась бы по границе карточки, как это было у плиток (п.2). */
/* ‼️ Селектор обязан быть в области своего блока: одиночный `.pb-art` перебивал картинку
   баннера подписки (`.prem-b .pb-art` выше по файлу) — она схлопывалась в ноль по ширине
   и уезжала абсолютом в угол страницы. Тот же капкан, что с `.pc-in` и `.pod img`. */
.lb-promobar .pb-art { position: absolute; z-index: 0; right: -5%; bottom: 0; height: 106%; width: auto;
  pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 88%, transparent 100%);
  transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.lb-promobar .pb-card:hover .pb-art { transform: translateY(-3px) scale(1.03); }
@media (max-width: 1100px) { .lb-promobar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .lb-promobar { grid-template-columns: 1fr; margin-top: 1.4rem; }
  .lb-promobar .promo-in { max-width: 100%; }
  .lb-promobar .pb-art { display: none; }
}

/* ── п.3: окно по «?» — это СПРАВКА, а не панель настроек ─────────────────────────────────
   Игрок жал вкладки и ждал, что там крутятся сами настройки, — отсюда «ничего не меняется».
   Теперь это видно из заголовка и приписки под ним, вкладки различаются иконкой и подзаголовком
   панели (раньше четыре списка dt/dd выглядели одинаково), а внизу — выход в настоящие настройки. */
.lhelp-tabs .lr-tab2 { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.lhelp-tabs .ni { width: 14px; height: 14px; flex: none; opacity: .7; }
.lhelp-tabs .lr-tab2.on .ni { opacity: 1; color: var(--btn); }
.lhelp-note { margin: -.2rem 0 .2rem; padding: 0 1.1rem; }
.lhelp-sub { margin: 0 0 .5rem; color: var(--txt); font: 700 .84rem var(--font); }
.lhelp-sub[hidden] { display: none; }
.lhelp-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .lhelp-tabs .lr-tab2 span { display: none; }   /* на узком остаются иконки — четыре подписи не влезают */
  .lhelp-tabs .ni { width: 16px; height: 16px; }
}

/* ── Найдено при адаптивной проверке волны 4: горизонтальный скролл на 390px ───────────────
   Подсказка модификаторов `.lr-tip` центрируется по значку (`left: 50%` + сдвиг на половину
   ширины). У правого края узкого экрана она вылезала за окно на ~10px, и страница получала
   горизонтальную прокрутку — при том что сама подсказка скрыта до наведения.
   Прижимаем её к правому краю строки и ограничиваем шириной окна. */
@media (max-width: 560px) {
  .lr-tip { left: auto; right: 0; transform: none; max-width: min(220px, calc(100vw - 2.5rem)); }
}

/* ── Найдено при адаптивной проверке: на узком баннер комнаты уезжал ПОД управление ────────
   В волне 3 центральная колонка получила `order: -1`, чтобы на мобильном сводка и кнопки шли
   первыми. Но у самого баннера порядок остался нулевым, и заголовок лобби вместе с «К списку»,
   счётчиком и «Покинуть» оказывался НИЖЕ кнопок — страница начиналась с действий, а не с того,
   куда игрок вообще попал. Баннер и флеши поднимаем выше центральной колонки. */
@media (max-width: 1080px) {
  .lr-banner { order: -3; }
  .lr-wide { order: -2; }
}

/* ── Переключатель вида списка на странице режима ──────────────────────────────────────────
   Владелец: «слева над словом Слоты какое-то поле с затемнением». Наложения там не было —
   это `.sf-view`, безымянный блок 62×30 с иконками 12px, стоявший в ряду ПОДПИСАННЫХ фильтров
   («Слоты», «Карта», «Сортировка»). Без подписи и в таком размере он читался как посторонний
   тёмный прямоугольник, а не как управление. Теперь у него есть подпись «Вид» и та же высота,
   что у соседних селектов, а иконки выросли до читаемых. */
.sf-viewwrap { display: inline-flex; align-items: center; gap: .35rem; }
.sf-viewwrap .sf-view { height: 32px; border-radius: 8px; }
.sf-viewwrap .sf-v { width: 34px; height: 30px; }
.sf-view .ni { width: 15px; height: 15px; }

/* Якорь цен на витрине подписок (§7): «сейчас дешевле, чем будет» — плашка, а не мелкий текст сноской. */
.promo-anchor { border-color: rgba(255,209,102,.5); color: var(--gold); background: linear-gradient(90deg, rgba(255,209,102,.14), transparent);
  font-weight: 700; letter-spacing: .01em; }
.perks .tbl s { opacity: .55; font-weight: 400; }

/* Каталог: путь получения вместо цены у закрытых предметов (§1). Не «нет в продаже», а «вот где взять». */
.inv-card .locked-way { border-color: rgba(45,212,255,.4); color: var(--cyan); font-size: .72rem; white-space: nowrap; }

/* §6 статус подписки: значок тира, золотой ник Pro и рамка карточки профиля.
   Значок Lite намеренно спокойнее — иерархия статусов должна читаться с одного взгляда. */
.btn-prem.tier-vip { border-color: rgba(255,209,102,.45); color: var(--gold); cursor: default; }
.btn-prem.tier-premium { border-color: rgba(179,136,255,.6); color: var(--purple);
  background: linear-gradient(120deg, rgba(179,136,255,.16), rgba(255,209,102,.1)); cursor: default; }
.pill.tier-vip { color: var(--gold); border-color: rgba(255,209,102,.4); }
.pill.tier-premium { color: var(--purple); border-color: rgba(179,136,255,.5); }
h1.nick-pro { background: linear-gradient(90deg, var(--gold), #fff3c4 45%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(255,209,102,.25); }
.profile-h.frame-pro { border-color: rgba(179,136,255,.45); box-shadow: 0 0 0 1px rgba(179,136,255,.25), 0 0 40px rgba(179,136,255,.12); }


/* §7 стартовый оффер: он должен читаться как отдельное предложение, а не как ещё один пакет монет. */
.starter-offer { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 14px; border: 1px solid rgba(255,209,102,.4);
  background: linear-gradient(120deg, rgba(255,209,102,.12), rgba(255,122,26,.07)); }

/* §6 п.26: навигация магазина тремя смыслами. Группа подписана вопросом, на который отвечает,
   поэтому колонки визуально разделены, а не слиты в один длинный ряд вкладок. */
.shop-nav { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-start; }
.shop-nav .sn-all { align-self: center; padding: .45rem .9rem; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface-2); font-weight: 700; }
.shop-nav .sn-all.on { border-color: var(--accent); color: var(--accent); }
.shop-nav .sn-g { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .35rem .55rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.shop-nav .sn-h { display: inline-flex; gap: .3rem; align-items: baseline; font-weight: 800; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--dim); margin-right: .2rem; }
.shop-nav .sn-h i { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .7; }
.shop-nav .sn-g a { padding: .3rem .6rem; border-radius: 8px; font-size: .9rem; }
.shop-nav .sn-g a:hover { background: var(--surface); }
.shop-nav .sn-g a.on { background: var(--accent); color: #12151b; font-weight: 700; }

/* §7 «хочу такой» на карточке лайв-дропа: подложка всплывает по наведению и закрывает карточку
   ЦЕЛИКОМ — торчащий из-под неё ник читался как недоделка. Лента под курсором и так замирает
   (`.db-rail:hover`), так что цель не убегает. Подложка не ловит клики: ссылка — сама карточка. */
.dcard { position: relative; overflow: hidden; }
.dc-want { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  opacity: 0; transition: opacity .14s;
  background: linear-gradient(160deg, color-mix(in srgb, var(--r, var(--accent)) 70%, var(--surface-2)),
              color-mix(in srgb, var(--r, var(--accent)) 34%, var(--surface-2))); }
.dc-want span { font: 900 .78rem var(--font-d); letter-spacing: .02em; padding: .3rem .75rem; border-radius: 8px;
  color: var(--txt); border: 1px solid color-mix(in srgb, var(--r, var(--accent)) 75%, var(--line-2));
  background: rgba(10, 13, 19, .55); }
.dcard:hover .dc-want, .dcard:focus-visible .dc-want { opacity: 1; }
/* Тач: ховера нет — вместо подложки маленький уголок, содержимое карточки остаётся видимым. */
@media (hover: none) {
  .dc-want { opacity: 1; background: none; place-items: end; padding: .25rem .3rem; }
  .dc-want span { font-size: .6rem; padding: .1rem .34rem; border-color: transparent;
    background: color-mix(in srgb, var(--r, var(--accent)) 45%, var(--surface)); }
}
@media (prefers-reduced-motion: reduce) { .dc-want { transition: none; } }

/* ---------------- витрина подписки /premium (волна дизайна, §1) ---------------- */
/* Прошлая версия — честная, но сухая таблица привилегий. Здесь задача обратная: показать, что
   подписка даёт У НАС, картинками и ссылками в живые разделы. Отсюда бенто с рваным ритмом
   (3+3 / 2+2+2 / 3+3 / 3+3), а не сетка одинаковых прямоугольников. */
.prem-hero { position: relative; overflow: hidden; margin-top: 1.2rem; padding: 2.4rem 2.2rem 1.9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: radial-gradient(58% 100% at 88% 18%, rgba(179,136,255,.20), transparent 62%),
              radial-gradient(50% 90% at 2% 100%, rgba(199,176,110,.13), transparent 60%),
              linear-gradient(158deg, #11141d, var(--bg-2) 55%, #0b0e15); }
.prem-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.014) 18px 20px); }
.prem-hero.has-art::after { content: ""; position: absolute; right: -2%; top: -14%; width: 40%; height: 78%; z-index: 0;
  pointer-events: none; background: radial-gradient(50% 50% at 58% 52%, rgba(179,136,255,.26), transparent 70%); }
.prem-hero-in { position: relative; z-index: 2; max-width: 58%; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.prem-hero-in h1 { font-size: clamp(1.75rem, 3.3vw, 2.9rem); }
.prem-hero-in p { max-width: 56ch; }
.prem-pro { color: var(--purple); }
.prem-hero-art { position: absolute; right: 1.2rem; top: -5%; height: 76%; z-index: 1; pointer-events: none; user-select: none;
  filter: drop-shadow(-14px 18px 34px rgba(0,0,0,.7)); }
.prem-mine { display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .8rem; border-radius: 999px;
  border: 1px solid rgba(61,220,132,.4); background: rgba(61,220,132,.1); color: var(--green); font-weight: 700; font-size: .88rem; }
.prem-mine .ni { width: 14px; height: 14px; }

/* тарифы: две карточки, Pro — акцентная. Цены и сроки приходят из живого товара, не из вёрстки */
.prem-plans { position: relative; z-index: 2; margin-top: 1.9rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; }
.prem-plan { --c: var(--btn); display: flex; flex-direction: column; gap: .6rem; padding: 1.15rem 1.25rem;
  border: 1px solid var(--line-2); border-radius: var(--r); backdrop-filter: blur(6px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, rgba(20,26,36,.92)), rgba(15,19,27,.92)); }
.prem-plan.is-pro { --c: var(--purple); border-color: color-mix(in srgb, var(--purple) 45%, var(--line-2));
  box-shadow: 0 16px 44px rgba(179,136,255,.16); }
.prem-plan.is-mine { border-color: rgba(61,220,132,.45); }
.pp-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pp-h b { font-family: var(--font-d); font-size: 1.15rem; color: var(--c); }
.pp-best { color: var(--purple); border-color: rgba(179,136,255,.5); background: rgba(179,136,255,.12); }
.pp-price { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.pp-price b { font-family: var(--font-d); font-size: 2.15rem; font-weight: 900; line-height: 1; }
.pp-price span { color: var(--dim); font-weight: 700; }
.pp-price s { margin-left: .35rem; font-size: .85rem; opacity: .6; }
.pp-list { list-style: none; margin: .15rem 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .34rem;
  font-size: .87rem; color: var(--dim); }
.pp-list li { position: relative; padding-left: 1.05rem; }
.pp-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 2px; background: var(--c); }
.prem-plan form, .prem-plan > .btn { margin-top: auto; }
.prem-plan .btn { width: 100%; justify-content: center; }
.pp-card { margin-top: .45rem; width: 100%; justify-content: center; }

/* бенто механик */
.prem-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.prem-card { grid-column: span var(--span, 3); position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 186px; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r);
  background: radial-gradient(75% 120% at 100% 42%, color-mix(in srgb, var(--pc) 15%, transparent), transparent 66%),
              linear-gradient(150deg, var(--surface), var(--bg-2));
  transition: transform .18s, border-color .18s, box-shadow .18s; }
.prem-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.012) 18px 20px); }
.prem-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pc) 55%, var(--line-2));
  box-shadow: 0 16px 38px rgba(0,0,0,.42); }
.pm-art { position: absolute; z-index: 0; pointer-events: none; user-select: none;
  max-width: 44%; object-fit: contain; object-position: bottom right;
  filter: drop-shadow(-10px 12px 24px rgba(0,0,0,.6)); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.prem-card:hover .pm-art { transform: translateY(-5px) scale(1.04); }
.pm-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .42rem; align-items: flex-start; }
.pm-ico { width: 44px; height: 44px; object-fit: contain; margin-bottom: .1rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }   /* промпт 37: иконки панели */
.prem-card b { font-family: var(--font-d); line-height: 1.25; }
.pm-need { color: var(--pc); border-color: color-mix(in srgb, var(--pc) 45%, transparent);
  background: color-mix(in srgb, var(--pc) 12%, transparent); }
.pm-need.pm-all { color: var(--dim); border-color: var(--line-2); background: transparent; }
.pm-cta { margin-top: .3rem; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .84rem; color: var(--pc); }
.pm-cta i { font-style: normal; transition: transform .18s; }
.prem-card:hover .pm-cta i, .prem-way:hover .pm-cta i { transform: translateX(3px); }
/* широкая карточка: фигура справа во всю высоту, текст в левой половине */
.pm-w3 { min-height: 200px; }
.pm-w3 b { font-size: 1.16rem; }
.pm-w3 .pm-in { max-width: 55%; }
.pm-w3 .pm-art { right: -1rem; bottom: -8%; height: 122%; }
/* узкая карточка: фигура уходит вверх иконкой, текст занимает всю ширину внизу */
/* узкой карточке резервируем полосу сверху под фигуру: иначе длинный заголовок
   («Наклейки, износ и StatTrak™») заезжает под неё. */
.pm-w2 { min-height: 254px; padding-top: 5.4rem; }
.pm-w2 b { font-size: 1.04rem; }
.pm-w2 .pm-in { max-width: 100%; }
.pm-w2 .pm-art { right: -.4rem; top: .6rem; height: 44%; max-width: 40%; object-position: top right; }

/* «как получить» */
.prem-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.prem-way { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; padding: 1.05rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: transform .18s, border-color .18s; }
.prem-way:hover { transform: translateY(-2px); border-color: rgba(255,122,26,.5); }
.prem-way b { font-family: var(--font-d); font-size: .98rem; }
.prem-way .pm-cta { color: var(--accent); margin-top: auto; }
.pw-i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--accent);
  border: 1px solid var(--line-2); background: linear-gradient(135deg, rgba(255,122,26,.18), rgba(199,176,110,.1)); }
.pw-i .ni { width: 17px; height: 17px; }

@media (max-width: 1100px) {
  .prem-hero-in { max-width: 100%; }
  .prem-hero-art, .prem-hero.has-art::after { display: none; }
  .prem-plans { max-width: none; }
  .prem-card { grid-column: span 3; }
  .pm-w2 { min-height: 200px; padding-top: 1.15rem; }
  .pm-w2 .pm-in { max-width: 58%; }
  .pm-w2 .pm-art { right: -1rem; top: auto; bottom: -8%; height: 118%; object-position: bottom right; }
  .prem-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .prem-hero { padding: 1.5rem 1.2rem; }
  .prem-plans { grid-template-columns: 1fr; }
  .prem-card { grid-column: 1 / -1; min-height: 168px; }
  /* на телефоне текст важнее фигуры: колонка шире, рендер ужимается до акцента в углу */
  .prem-card .pm-in { max-width: 64%; }
  .pm-art { max-width: 36%; }
  .prem-ways { grid-template-columns: 1fr; }
}

/* заготовка команд во вкладке «Друзья»: раздел скрыт, но место под него видно (§2 волны дизайна) */
.team-soon { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-style: dashed; border-color: var(--line-2); background: transparent; }
.team-soon .ts-i { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center;
  color: var(--dim); border: 1px solid var(--line-2); background: var(--bg-2); }
.team-soon .ts-i .ni { width: 19px; height: 19px; }
.team-soon .ts-t { display: flex; flex-direction: column; gap: .25rem; min-width: 220px; flex: 1; }
.team-soon .ts-t b { font-family: var(--font-d); }
.team-soon .ts-a { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 620px) { .team-soon .ts-a { width: 100%; } .team-soon .ts-a .btn { flex: 1; justify-content: center; } }

/* ---------------- шевроны: статус игрока виден везде (§3 волны дизайна) ---------------- */
/* Раньше ступень была пилюлей в собственном профиле — то есть её не видел никто, кроме владельца.
   Теперь это значок в рейтинге, лобби, матче и ленте дропов: ради этого фаза и делалась.
   Префикс chv-, а не chev-: .chev уже занят пилюлей в player.html. */
.chv { display: inline-flex; align-items: center; gap: .35rem; vertical-align: -3px; }
.chv-i { width: 18px; height: 18px; object-fit: contain; flex: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cc) 45%, transparent)); }
.chv-t { font: 800 .62rem var(--font); font-style: normal; letter-spacing: .05em; color: var(--cc);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); background: color-mix(in srgb, var(--cc) 12%, transparent);
  border-radius: 5px; padding: .08rem .3rem; }
.chv-n { color: var(--cc); font-weight: 700; font-size: .82rem; }
.chv.lg .chv-i { width: 26px; height: 26px; }
.chv.sm .chv-i { width: 15px; height: 15px; }

/* крупный значок на витрине прогресса */
.chv-big { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  padding: 1.4rem 1.6rem; border-radius: var(--r); border: 1px solid var(--line); position: relative; overflow: hidden;
  background: radial-gradient(60% 110% at 12% 50%, color-mix(in srgb, var(--cc) 20%, transparent), transparent 62%),
              linear-gradient(140deg, var(--surface), var(--bg-2)); }
.chv-big::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.012) 18px 20px); }
.chv-art { position: relative; flex: none; z-index: 1; }
.chv-art img { width: 132px; height: 132px; object-fit: contain;
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--cc) 42%, transparent)); }
.chv-t.lg { display: grid; place-items: center; width: 132px; height: 132px; font-size: 1.7rem; border-radius: 16px; }
.chv-idx { position: absolute; right: -.2rem; bottom: .2rem; padding: .12rem .45rem; border-radius: 999px;
  font: 800 .78rem var(--font); color: var(--cc); background: rgba(10,13,19,.86);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); }
.chv-idx i { font-style: normal; opacity: .55; font-size: .68rem; }
.chv-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; min-width: 240px; flex: 1; }
.chv-txt b { font-family: var(--font-d); font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--cc); line-height: 1.1; }
.chv-p { color: var(--cc); border-color: color-mix(in srgb, var(--cc) 45%, transparent);
  background: color-mix(in srgb, var(--cc) 12%, transparent); }
.chv-bar { width: 100%; height: 9px; border-radius: 999px; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--line-2); margin-top: .3rem; }
.chv-bar i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 70%, #000), var(--cc)); }

/* лестница ступеней: пройденные горят, текущая обведена, будущие приглушены */
.chv-ladder { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .6rem; }
.chv-step { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
  padding: .7rem .4rem; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--bg-2);
  opacity: .45; filter: grayscale(.7); transition: opacity .18s, filter .18s, transform .18s, border-color .18s; }
.chv-step img { width: 46px; height: 46px; object-fit: contain; }
.chv-step b { font-size: .78rem; color: var(--cc); font-family: var(--font-d); }
.chv-step span { font-size: .7rem; }
.chv-step.on { opacity: 1; filter: none; }
.chv-step.now { border-color: var(--cc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc) 35%, transparent),
  0 10px 26px color-mix(in srgb, var(--cc) 18%, transparent); transform: translateY(-3px); }
.chv-step:hover { opacity: 1; filter: none; }
/* медали званий (04.09): широкие 2:1, лестница из 19 — сетка по ширине, не 8 колонок */
.md-ladder { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.chv-step.md img { width: 96px; height: 48px; }
.chv-step.md b { font-size: .7rem; line-height: 1.15; }
.md-now { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.2rem; margin-bottom: .8rem; border: 1px solid var(--line); border-radius: var(--r);
  background: radial-gradient(60% 100% at 0% 50%, rgba(255,209,102,.12), transparent 60%), var(--bg-2); }
.md-art { width: 220px; height: 110px; object-fit: contain; flex: none; filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)); }
.md-txt { display: flex; flex-direction: column; gap: .35rem; min-width: 0; flex: 1; }
.md-txt > b { font: 800 1.4rem var(--font-d); }
.md-txt .chv-bar { max-width: 420px; }
@media (max-width: 620px) { .md-now { flex-direction: column; align-items: flex-start; } .md-art { width: 160px; height: 80px; } }
@media (max-width: 900px) { .chv-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .chv-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* «что даёт следующая ступень» — честный список: значок виден там, где игрока видят другие */
.chv-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.chv-next div { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--bg-2); }
.chv-next .ni { width: 16px; height: 16px; color: var(--cc); flex: none; margin-top: .15rem; }
.chv-next b { display: block; font-size: .9rem; }

/* значок в узких местах: таблица рейтинга, состав лобби, лента дропов */
.tbl .chv { margin-right: .3rem; }
.lr-slot .chv { margin-left: -.15rem; }
.dc-who .chv-i { width: 14px; height: 14px; }

/* шапка «Ежедневного»: ступень первой — её и растят миссии (§3) */
.q-head { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.q-head-in { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.q-head-in h1 { margin: 0; }
.q-head-a { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.q-chev { flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--cc) 35%, var(--line)); background:
  radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--cc) 20%, transparent), transparent 70%), var(--bg-2);
  transition: transform .18s, border-color .18s; }
.q-chev:hover { transform: translateY(-2px); border-color: var(--cc); }
.q-chev img { width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cc) 40%, transparent)); }
@media (max-width: 700px) { .q-chev { width: 68px; height: 68px; } .q-chev img { width: 46px; height: 46px; } }

/* ---------------- достижения: медаль вместо эмодзи (§4 волны дизайна) ---------------- */
/* Награда выглядела как эмодзи в кружке — то есть не выглядела наградой вовсе. Теперь это медаль:
   один силуэт в трёх металлах (бронза/серебро/золото) плюс символ достижения накладкой. Так серия
   не разъезжается: три картинки на 33 достижения вместо 33 разных медалей. */
/* ‼️ Медаль-жетон БЕЗ ЛЕНТЫ и меньше прежнего. Первый заход был с лентой на всю высоту: она съедала
   половину картинки, сам диск оставался мелким, а карточка получалась «про медаль», а не про
   достижение — заголовок и прогресс ужимались в узкую колонку и ломались на две строки.
   Жетон круглый и центрированный, поэтому символ садится ровно в 50%/50%, а не в вычисленную точку. */
.a-medal { position: relative; flex: none; width: 62px; height: 62px; display: grid; place-items: center; }
.a-medal img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 9px rgba(0,0,0,.5)); }
.a-ph { width: 44px; height: 44px; border-radius: 50%; border: 2px dashed var(--line-2); display: block; }
/* символ ложится в углублённый центр жетона (тёмный круг ≈56% ширины — замер по рендеру) */
.a-sym { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.15rem; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)); pointer-events: none; }
/* «не взято» — свой файл неотчеканенной стали; фильтром гасим только символ, медаль трогать не надо */
.ach.locked .a-sym { opacity: .45; filter: grayscale(.8); }
.ach.maxed .a-medal img { filter: drop-shadow(0 0 12px rgba(228,174,57,.45)) drop-shadow(0 3px 9px rgba(0,0,0,.5)); }
/* цель не переносим на две строки: «0 / 100» и «до ступени «бронза»» — разные строки, а не разрывы */
.a-goal { display: flex; align-items: baseline; gap: .4rem; justify-content: space-between; flex-wrap: wrap; }
.a-goal b { white-space: nowrap; }
.a-goal span { white-space: nowrap; }

/* сводка по металлам в боковой колонке */
.ach-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.as-t { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .3rem;
  border-radius: var(--r-s); border: 1px solid var(--line); background: var(--bg-2); }
.as-t img { width: 38px; height: 38px; object-fit: contain; }
.as-t b { font-family: var(--font-d); font-size: .95rem; }
.as-dot { width: 22px; height: 22px; border-radius: 50%; display: block; background: currentColor; opacity: .6; }
.as-t.bronze { color: #cd7f32; } .as-t.silver { color: #c9d3e3; } .as-t.gold { color: var(--gold); }

/* ---------------- пьедестал: своя рамка на каждое призовое место ---------------- */
/* Место обозначалось цифрой в кружке, а три карточки отличались цветом рамки в один пиксель —
   победу не было видно. Теперь у каждого места литая рамка (золото/серебро/бронза), аватар сидит
   в её окне, а рядом то, за что место дали: ступень, уровень, очки и убийства.
   Окно рамки у всех трёх файлов одно и то же — центр 50%/50.5%, около 69% ширины (замер в cut_frame.py),
   поэтому аватару хватает одного правила на все места. */
.pod-frame { position: relative; display: block; width: 142px; aspect-ratio: 1; margin: 0 auto .35rem; }
/* ‼️ Селектор с двумя классами, а не один `.pod-fr`: выше по файлу живёт `.pod img { width:64px;
   height:64px; border-radius:16px; border:3px solid }`, и у него специфичность (0,1,1) — ВЫШЕ, чем у
   одиночного класса (0,1,0). Из-за этого литая рамка ужималась до 64px в углу и обрастала кантом:
   правило стояло позже, но проигрывало по специфичности, а не по порядку. У первого места есть ещё
   более узкое `.pod.p1 img` (0,2,1), поэтому селектор здесь из трёх классов (0,3,0) — он бьёт оба. */
.pod .pod-frame .pod-fr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; pointer-events: none;
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
/* призрачная цифра-подложка была единственным указателем места — с рамкой и цифрой на подиуме
   она стала третьим повтором одного и того же и читалась как грязь */
.pod.has-frame::before { content: none; }
.pod .pod-frame .pod-ava > img { position: absolute; inset: 0; z-index: 1; }
.pod .pod-frame .pod-ava { position: absolute; left: 50%; top: 50.5%; transform: translate(-50%, -50%); z-index: 1;
  width: 52%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--surface-2), var(--bg-2)); border: 0; box-shadow: none; }
.pod .pod-frame .pod-ava img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; box-shadow: none; }
/* заглушка: аватара нет (гость Steam без картинки) — рисуем силуэт, а не пустой круг */
.pod-ava .ni { width: 46%; height: 46%; color: var(--dim); stroke-width: 1.7; }
/* без файла рамки вёрстка не разваливается: аватар просто крупнее и с обводкой места */
.pod:not(.has-frame) .pod-frame { width: 78px; }
.pod:not(.has-frame) .pod-ava { width: 100%; border: 2px solid color-mix(in srgb, var(--pc) 60%, var(--line)); }
.pod-pos { position: absolute; z-index: 3; left: 50%; bottom: -.1rem; transform: translateX(-50%);
  min-width: 22px; height: 22px; padding: 0 .35rem; display: grid; place-items: center; border-radius: 999px;
  font: 900 .78rem var(--font-d); color: var(--btn-ink); background: linear-gradient(135deg, var(--pc), #fff8);
  border: 1px solid rgba(0,0,0,.35); box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.pod:hover .pod-fr { transform: rotate(-2deg) scale(1.05); }
.pod-meta { display: inline-flex; align-items: center; gap: .3rem; }
.pod-meta i { font-style: normal; font: 800 .72rem var(--font); color: var(--dim); letter-spacing: .04em; }
.pod-val { color: var(--gold); font: 900 1.15rem var(--font-d); display: inline-flex; align-items: baseline; gap: .28rem; }
.pod-val i { font: 700 .72rem var(--font); font-style: normal; color: var(--dim); letter-spacing: .02em; }
/* неполный пьедестал: подпись под ним, а не пустые места по бокам */
.pod-fresh { margin: -.4rem 0 .8rem; text-align: center; }
.pod.p1 .pod-frame { width: 168px; }
.pod.p1 .pod-val { font-size: 1.5rem; }
.pod.p1 .pod-name { font-size: 1rem; }
/* у победителя аватар крупнее рамки соседей — иначе первое место читается только по цвету */
.pod.has-frame .pod-name { font-size: .92rem; }
/* корона у первого места больше не нужна: её роль играет гребень на самой рамке */
.pod.p1.has-frame::after { content: none; }
@media (max-width: 1100px) { .pod-frame { width: 118px; } .pod.p1 .pod-frame { width: 136px; } }
@media (max-width: 700px) { .pod-frame, .pod.p1 .pod-frame { width: 112px; } }

/* ---------------- свои значки валют вместо эмодзи (§5 волны дизайна) ---------------- */
/* Эмодзи 🪙 и 🎟 рисовались шрифтом системы: у Windows, macOS и Android они РАЗНЫЕ по ширине,
   цвету и базовой линии — строка «25 🎟» прыгала от машины к машине и не попадала в палитру портала.
   Свои глифы — вектор в общем спрайте: один вид везде, цвет наш, размер привязан к кеглю текста.
   ‼️ Класс .cur, а не .ni: у .ni стоит fill:none — заливка наших глифов от него исчезала бы. */
.cur { width: 1.08em; height: 1.08em; flex: none; display: inline-block; vertical-align: -.16em; }
.cur-cn { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
/* билет шире монеты: у него своё поле 24×17, ширина держит пропорцию фигуры */
.cur-tk { width: 1.52em; height: 1.08em; filter: drop-shadow(0 0 5px rgba(45,212,255,.35)); }
/* в крупных числах значок растёт вместе с ними, потому что размер задан в em */
.ds-big .cur, .pod-val .cur, .pp-price .cur { vertical-align: -.1em; }
.coins .cur, .pill .cur { margin-right: .1em; }

/* ---------------- прокачка сезона внутри раздела прогресса ---------------- */
/* Бывшая вкладка «Пропуск». Очки пропуска — это тот же XP, что и уровень портала, поэтому две
   шкалы на одно число жили в двух вкладках и дробили раздел. Таблица уровней спрятана в <details>:
   тридцать строк на витрине прогресса превратили бы её в простыню. */
.season { display: flex; flex-direction: column; gap: .9rem; }
.season-top { display: flex; gap: 1.2rem; align-items: flex-end; flex-wrap: wrap; }
.season-top .grow { min-width: 260px; display: flex; flex-direction: column; gap: .3rem; }
.season-act { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; }
/* три колонки — не «привилегии», а конкретные числа билетов за сезон */
.season-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.st-col { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .85rem; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--bg-2); }
.st-col b { font: 800 .78rem var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.st-col .num { font: 900 1.5rem var(--font-d); line-height: 1.1; }
.st-col i { font-style: normal; font-size: .76rem; color: var(--dim); line-height: 1.35; }
.st-col.gold { border-color: rgba(199,176,110,.35); } .st-col.gold .num { color: var(--btn-2); }
.st-col.pro { border-color: rgba(179,136,255,.4); } .st-col.pro .num { color: var(--purple); }
.season-hint { margin: 0; padding: .6rem .8rem; border-radius: var(--r-s); color: var(--dim);
  border: 1px solid rgba(179,136,255,.25); background: rgba(179,136,255,.07); }
.season-det > summary { cursor: pointer; padding: .5rem .1rem; font-weight: 700; color: var(--dim);
  list-style: none; display: flex; align-items: center; gap: .4rem; }
.season-det > summary::-webkit-details-marker { display: none; }
.season-det > summary::before { content: "▸"; color: var(--accent); transition: transform .15s; }
.season-det[open] > summary::before { transform: rotate(90deg); }
.season-det > summary:hover { color: var(--txt); }
@media (max-width: 760px) {
  .season-tiers { grid-template-columns: 1fr; }
  .season-act { width: 100%; }
}

/* ---------------- первый блок раздела со своей графикой ---------------- */
/* Кейсы открывались общим баннером магазина с рендером агента Valve, розыгрыши — тем же агентом
   поверх кадра карты: тема раздела в первом экране не читалась вообще. Здесь арт нарисован под
   раздел, а цвет блока задаётся переменной --hc, чтобы «Удача» и «Розыгрыши» отличались тоном.
   ‼️ Префикс phero-: `.sh` занят значком в .steam-trust, `.ph` — заглушкой картинки. */
.phero { position: relative; overflow: hidden; margin-top: 1.2rem; padding: 2rem 2.1rem;
  border: 1px solid var(--line); border-radius: var(--r); min-height: 210px; display: flex; align-items: center;
  background: radial-gradient(60% 105% at 86% 30%, color-mix(in srgb, var(--hc) 20%, transparent), transparent 62%),
              radial-gradient(50% 90% at 0% 100%, rgba(255,122,26,.10), transparent 60%),
              linear-gradient(155deg, #11141d, var(--bg-2) 58%, #0b0e15); }
.phero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.014) 18px 20px); }
.phero.has-art::after { content: ""; position: absolute; right: -3%; top: -12%; width: 42%; height: 90%; z-index: 0;
  pointer-events: none; background: radial-gradient(50% 50% at 56% 52%, color-mix(in srgb, var(--hc) 26%, transparent), transparent 70%); }
.phero-in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; max-width: 60%; }
.phero-in h1 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.phero-in p { max-width: 62ch; }
.phero-k { color: var(--hc); border-color: color-mix(in srgb, var(--hc) 45%, transparent);
  background: color-mix(in srgb, var(--hc) 12%, transparent); }
.phero-art { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); height: 118%; z-index: 1;
  pointer-events: none; user-select: none; max-width: 42%; object-fit: contain;
  filter: drop-shadow(-14px 16px 32px rgba(0,0,0,.7)); }
/* короткие факты раздела: то, что иначе тонет в абзаце */
.phero-facts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .15rem; }
.phero-f { display: flex; flex-direction: column; padding: .45rem .7rem; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: rgba(10,13,19,.5); }
.phero-f b { font: 800 .95rem var(--font-d); color: var(--hc); line-height: 1.1; }
.phero-f i { font-style: normal; font-size: .72rem; color: var(--dim); }
.phero-act { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }

/* розыгрыш: полоса личного шанса — числом он читался хуже, чем полосой */
.rf-chance { height: 8px; border-radius: 999px; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--line-2); margin-top: .7rem; }
.rf-chance i { display: block; height: 100%; border-radius: inherit; min-width: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 60%, #000), var(--rc)); }

@media (max-width: 1000px) {
  .phero-in { max-width: 100%; }
  .phero-art, .phero.has-art::after { display: none; }
}
@media (max-width: 620px) { .phero { padding: 1.4rem 1.2rem; min-height: 0; } }

/* ---------------- лототрон: ввод количества и барабан долей ---------------- */
/* Ключевая идея: шанс должен читаться взглядом. Банк — одна полоса, где доля каждого участника
   это её кусок; свой кусок подсвечен золотом и приподнят. Таблица процентов осталась ниже
   как расшифровка, а не как основной способ понять расклад. */
.rf-buy { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.rf-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.rf-qty input { width: 4.6rem; border: 0; background: transparent; text-align: center; font: 800 1.05rem var(--font-d, var(--font)); color: var(--txt); padding: .45rem .3rem; }
.rf-qty input::-webkit-outer-spin-button, .rf-qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.rf-qty input { -moz-appearance: textfield; }
.rf-step { width: 2.2rem; border: 0; background: transparent; color: var(--dim); font: 900 1.1rem var(--font); cursor: pointer; transition: background .15s, color .15s; }
.rf-step:hover { background: rgba(255,209,102,.14); color: var(--gold); }
.rf-step:active { background: rgba(255,209,102,.24); }
.rf-presets { display: flex; gap: .35rem; flex-wrap: wrap; }
.rf-presets .chip { transition: border-color .15s, color .15s, background .15s; }
.rf-presets .chip:hover { color: var(--gold); border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.1); }
.rf-calc { margin: .1rem 0 0; font-size: .88rem; color: var(--dim); }
.rf-calc b { color: var(--txt); }

.rf-drum .rf-reel { display: flex; height: 26px; margin: .8rem 0 .9rem; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: inset 0 2px 8px rgba(0,0,0,.5); }
/* Цвет сегмента = место в барабане, а не случайный оттенок: лидер яркий бирюзовый, хвост уходит
   в приглушённый синий. Радуга здесь читалась бы как «разные сущности», а это доли одного банка. */
.rf-drum .rf-reel i { display: block; min-width: 3px; position: relative;
  background: hsl(calc(196 - var(--i, 0) * 5) calc(64% - var(--i, 0) * 4%) calc(58% - var(--i, 0) * 3.4%));
  box-shadow: inset -1px 0 0 rgba(0,0,0,.45); transition: filter .18s; }
.rf-drum .rf-reel i:hover { filter: brightness(1.25); }
.rf-drum .rf-reel i.me { background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 65%, #000));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 14px rgba(255,209,102,.55); z-index: 1; }
.rf-drum .rf-reel i.rest { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--bg-2) 6px 12px); }

.rf-holders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.rf-holders li { display: grid; grid-template-columns: 1.4rem minmax(6rem, 1fr) minmax(60px, 2.2fr) 3.2rem auto;
  gap: .5rem; align-items: center; padding: .3rem .45rem; border-radius: 8px; border: 1px solid transparent; }
.rf-holders li.me { border-color: rgba(255,209,102,.4); background: rgba(255,209,102,.08); }
.rf-holders .pos { color: var(--mute); font: 800 .78rem var(--font); text-align: center; }
.rf-holders .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-holders .bar { display: block; height: 9px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); overflow: hidden; }
.rf-holders .bar i { display: block; height: 100%; border-radius: inherit; min-width: 3px;
  background: hsl(calc(196 - var(--i, 0) * 5) calc(64% - var(--i, 0) * 4%) calc(58% - var(--i, 0) * 3.4%)); }
.rf-holders li.me .bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, #000), var(--gold)); }
.rf-holders li.rest .bar i { background: var(--surface-2); }
.rf-holders .pct { text-align: right; font-size: .84rem; }
@media (max-width: 560px) {
  .rf-holders li { grid-template-columns: 1.2rem minmax(4.5rem, 1fr) 3.2rem auto; }
  .rf-holders .bar { display: none; }
}

/* ---------------- предикт: строка лиг и дневная квота прогнозов ---------------- */
/* Лента со своим скроллбаром на 4+ турнира не читалась. Главные лиги — кнопками, хвост — селектом,
   поэтому строка больше не скроллится вбок, а переносится. */
.tour-strip { flex-wrap: wrap; overflow-x: visible; }
.tour-strip .lg-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green, #8ef07a); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green, #8ef07a) 22%, transparent); }
.tour-more { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .5rem .28rem .8rem; border-radius: 999px;
  border: 1px dashed var(--line-2); background: var(--surface); }
.tour-more:hover { border-color: var(--accent); }
.tour-more select { border: 0; background: transparent; color: var(--txt); font: 700 .84rem var(--font); cursor: pointer; padding: .12rem .2rem; }
.tour-more select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.pd-quota { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.pd-quota .bq-bar { width: 72px; }
.pd-quota b { color: var(--dim); font-weight: 700; }
@media (max-width: 720px) { .pd-quota { margin-left: 0; width: 100%; } }

/* ---------------- волна дизайна 3: первые экраны разделов, SkinChanger, лестница ---------------- */
/* Подзаголовок первого блока: под постоянным H1 раздела стоит то, что меняется (лига предикта).
   Раньше имя лиги занимало H1, и раздел выглядел как ошибка вёрстки. */
.phero-sub { font: 700 .95rem var(--font); color: var(--hc); letter-spacing: .01em; margin-top: -.15rem; }
/* полоса «сделано прогнозов» — блок, а не элемент ряда кнопок */
.phero-act .pd-progress { flex: 1 0 100%; margin-top: .2rem; }

/* ‼️ Кнопка SkinChanger — одна из главных фич портала, а выглядела обычной ссылкой в ряду вкладок.
   Рамка нарисована НАКЛАДКОЙ ::after, а не собственными border/background элемента: класс встаёт
   на вкладку магазина (.shop-nav .sn-g a), вкладку профиля (.tabs a), кнопку (.btn) и тег врезки
   (.pc-tag) — у всех свои базовые стили и своя специфичность, и переопределять их пришлось бы
   тремя разными правилами. Накладка ничего не перебивает: она просто рисуется сверху. */
.skb { position: relative; border-radius: 10px; }
a.skb { color: var(--txt); font-weight: 800; }
.pc-tag.skb { border-radius: 999px; }
.skb::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .42rem; flex: none;
  border-radius: 2px; transform: rotate(45deg); vertical-align: 0;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 0 8px rgba(45,212,255,.65); }
.skb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  padding: 1.5px; background: linear-gradient(115deg, var(--cyan), var(--purple) 48%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: 0 3px 16px rgba(45,212,255,.22); transition: box-shadow .18s, filter .18s; }
.skb:hover::after, .skb:focus-visible::after { box-shadow: 0 4px 24px rgba(45,212,255,.5); filter: brightness(1.18); }
/* во врезке страницы режима рамку носит тег, а не весь баннер: у .pc-s обе псевдоэлемента заняты фоном */
.pc-s .skb::after { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .skb::after { transition: none; } }

/* призовой шеврон на обложке турнира: значок вместо эмодзи должен быть в рост числа */
.tour-prize .ni { width: 18px; height: 18px; vertical-align: -3px; }

/* ---- лестница ступеней: что даёт КАЖДАЯ нашивка (поповер по наведению и фокусу) ---- */
.chv-step { position: relative; }
.chv-pop { position: absolute; left: 50%; bottom: calc(100% + .5rem); transform: translate(-50%, 4px);
  width: max-content; max-width: 260px; z-index: 12; display: flex; flex-direction: column; gap: .3rem;
  padding: .7rem .8rem; border-radius: var(--r-s); text-align: left;
  border: 1px solid color-mix(in srgb, var(--cc) 45%, var(--line-2));
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  box-shadow: 0 18px 40px rgba(0,0,0,.55); opacity: 0; visibility: hidden;
  transition: opacity .16s, transform .16s, visibility .16s; }
.chv-pop::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: color-mix(in srgb, var(--cc) 45%, var(--line-2)); }
.chv-step:hover .chv-pop, .chv-step:focus .chv-pop, .chv-step:focus-within .chv-pop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.chv-step:focus-visible { outline: 2px solid var(--cc); outline-offset: 2px; }
.chv-pop > b { color: var(--cc); font-family: var(--font-d); font-size: .92rem; }
.chv-pop ul { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .28rem; }
.chv-pop li { position: relative; padding-left: .8rem; font-size: .8rem; color: var(--dim); line-height: 1.35; }
.chv-pop li::before { content: ""; position: absolute; left: 0; top: .48em; width: 5px; height: 5px;
  border-radius: 2px; transform: rotate(45deg); background: color-mix(in srgb, var(--cc) 70%, transparent); }
.chv-pop code { font-size: .76rem; color: var(--cc); background: color-mix(in srgb, var(--cc) 12%, transparent);
  border-radius: 4px; padding: 0 .25rem; }
.chv-pop-f { margin-top: .15rem; font: 800 .74rem var(--font); text-transform: uppercase; letter-spacing: .05em;
  color: var(--cc); }
/* у крайних столбцов поповер уезжал за край страницы — прижимаем его к своей стороне */
.chv-ladder > .chv-step:first-child .chv-pop { left: 0; transform: translate(0, 4px); }
.chv-ladder > .chv-step:first-child:hover .chv-pop, .chv-ladder > .chv-step:first-child:focus-within .chv-pop { transform: translate(0, 0); }
.chv-ladder > .chv-step:first-child .chv-pop::after { left: 2.2rem; }
.chv-ladder > .chv-step:last-child .chv-pop { left: auto; right: 0; transform: translate(0, 4px); }
.chv-ladder > .chv-step:last-child:hover .chv-pop, .chv-ladder > .chv-step:last-child:focus-within .chv-pop { transform: translate(0, 0); }
.chv-ladder > .chv-step:last-child .chv-pop::after { left: auto; right: 2.2rem; }
/* ‼️ Поповер ступени висит абсолютом шириной до 260px и на узком экране вылезал ЗА ПРАВЫЙ КРАЙ
   документа — страница /progress получала горизонтальную прокрутку (видно Playwright'ом на 390 и 320).
   На тач-экране он и так выключен (после тапа завис бы), на узком десктопе тоже не нужен. */
@media (hover: none), (max-width: 900px) { .chv-pop { display: none; } }

/* ---- «что даст ступень»: три колонки с ровным низом ---- */
/* Владелец: «одна высота, но не просто растянуть». Растяжка давала пустой воздух внизу средней
   карточки; теперь низ занимает строка-итог с собственным фактом, и высота сходится содержимым. */
.chv-next div { flex-direction: column; gap: .45rem; }
.chv-h { display: flex; align-items: center; gap: .5rem; }
.chv-h b { font-size: .92rem; }
.chv-nf { margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--line-2);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 2.2rem; }
.chv-nf .num { font: 900 1.25rem var(--font-d); }
.chv-nf-x { font-style: normal; color: var(--mute); }
.chv-nf-u { font-style: normal; font-size: .76rem; color: var(--dim); }
/* макет строки табло: тег ступени перед ником — ровно так он встанет в игре */
.chv-nf-sb { display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .6rem; border-radius: 6px;
  background: rgba(10,13,19,.75); border: 1px solid var(--line-2); font: 700 .82rem var(--font);
  color: var(--dim); max-width: 100%; overflow: hidden; }
.chv-nf-sb i { font-style: normal; font: 800 .72rem var(--font); letter-spacing: .05em; color: var(--cc);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent);
  background: color-mix(in srgb, var(--cc) 12%, transparent); border-radius: 4px; padding: .04rem .3rem; }

/* ---- строка лиг предикта: селект «ещё N» не должен растягиваться на пол-экрана ---- */
/* Ширину задавало самое длинное название лиги внутри select. Теперь ширина фиксированная,
   а имя обрезается — выбор всё равно делается из раскрытого списка. */
.tour-more { max-width: 15rem; }
.tour-more select { max-width: 10.5rem; text-overflow: ellipsis; }

/* Вкладка «Про-настройки» в шапке профиля: выделяем слово «Про», чтобы на неё хотелось нажать.
   Подсветка живёт на самом слове, а не на всей вкладке — иначе она спорит с активной вкладкой. */
.tabs .tab-pro { color: var(--gold); font-weight: 900; letter-spacing: .01em; }
.tabs a:hover .tab-pro { color: #ffe9a8; }
.tabs a.active .tab-pro { color: inherit; }
.tabs a:has(.tab-pro) { position: relative; }
.tabs a:has(.tab-pro)::after { content: ""; position: absolute; right: .35rem; top: .45rem; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.tabs a.active:has(.tab-pro)::after { display: none; }
/* Знак вопроса: заметный кружок, а не серая мелочь — он ведёт к инструкции «как применить». */
.hint-q { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font: 900 .78rem var(--font); font-style: normal; text-decoration: none; vertical-align: middle;
  color: var(--bg); background: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 70%, #000);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); transition: .15s; }
.hint-q:hover, .hint-q:focus-visible { background: #ffe9a8; box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 26%, transparent); }
/* Раскрывающаяся инструкция над таблицей. ‼️ Живёт ВНЕ .tbl-scroll: внутри контейнера с
   overflow-x браузер обрезает и по вертикали, и раскрытый блок оказался бы подрезан. */
.pro-howto { margin: .7rem 0 0; border: 1px solid var(--line); border-radius: var(--r-s);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface)); padding: .5rem .7rem; }
.pro-howto > summary { cursor: pointer; font-weight: 800; display: flex; align-items: center; gap: .45rem; list-style: none; }
.pro-howto > summary::-webkit-details-marker { display: none; }
.pro-howto[open] > summary { margin-bottom: .5rem; }
.pro-howto-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .9rem; }
.pro-howto-list b { color: var(--txt); }

/* кнопка «скопировать себе» в строке про-игрока */
.pro-take { white-space: nowrap; background: color-mix(in srgb, var(--gold) 16%, transparent);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold); font-weight: 800; }
.pro-take:hover { background: color-mix(in srgb, var(--gold) 26%, transparent); }

/* ---- вкладка «Про-настройки» (промпт 23B): таблица настроек про-игроков ---- */
/* ‼️ Прокрутка живёт ВНУТРИ блока: без этой обёртки широкая таблица уводит вбок всю страницу. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll > .tbl { min-width: 780px; }
.pro-tbl td, .pro-tbl th { white-space: nowrap; }
.pro-tbl .pro-launch td { border-bottom: 1px solid var(--line); padding-top: 0; white-space: normal; }
.pro-tbl .pro-launch code { cursor: pointer; }
.pro-up { color: var(--gold); }        /* чужая сенса выше моей */
.pro-down { color: var(--cyan); }      /* ниже моей */
.pro-same { color: var(--green); font-weight: 800; }
.pro-cross { padding: .2rem .5rem; }
/* Мобильный `.tbl th:nth-child(n+6){display:none}` прячет всё правее пятой колонки — для этой
   таблицы это убрало бы разрешение, герцовку и прицел. Здесь вместо скрытия — горизонтальный скролл. */
@media (max-width: 860px) {
  .pro-tbl th:nth-child(n+6), .pro-tbl td:nth-child(n+6) { display: table-cell; }
  .pro-tbl { font-size: .85rem; }
}

/* Промпт 28: розыгрыш на два экрана — билетный слева, Pro справа; на телефоне друг под другом */
.rf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
.rf-col { display: flex; flex-direction: column; min-width: 0; }
.rf-col .rf-head { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.rf-col .rf-head h2 { margin: 0; }
.rf-col .rf-prize { min-height: 160px; margin-bottom: .6rem; }
.rf-col .rf-prize.gold { background: radial-gradient(circle at 50% 40%, rgba(255,209,102,.18), transparent 70%); }
.rf-col .rf-prize img { max-height: 170px; }
.rf-trophy { font-size: 4rem; line-height: 1; filter: drop-shadow(0 6px 18px rgba(255,209,102,.35)); }
.rf-name { margin: .2rem 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.rf-pro { border-color: rgba(255,209,102,.35); }
.rf-lock { border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; background: rgba(255,255,255,.02); }
.rf-src { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .3rem; }
.rf-src li { display: flex; justify-content: space-between; gap: .6rem; font-size: .9rem; }
.rf-src li b { color: var(--gold); white-space: nowrap; }
.rf-rule { margin: auto 0 0; padding-top: .8rem; font-size: .82rem; color: var(--dim); border-top: 1px dashed var(--line); }
@media (max-width: 720px) { .rf-split { grid-template-columns: 1fr; } .rf-col .rf-prize { min-height: 120px; } }

/* Промпт 28, правки владельца: колонки одной высоты и с одного уровня; нижний ряд из трёх блоков */
.rf-split > .panel { margin: 0; height: 100%; }
.rf-col .rf-head { min-height: 4.4rem; justify-content: flex-start; }
.rf-col .rf-prize { height: 170px; min-height: 170px; }
.rf-col .rf-name { min-height: 2.6rem; }
.rf-row3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; align-items: stretch; }
.rf-row3 > .panel { margin: 0; min-width: 0; }
.rf-promo .rf-tier { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; margin-bottom: .5rem; }
.rf-promo .rf-tier.premium { border-color: rgba(255,209,102,.45); }
.rf-promo .rf-tier.vip { border-color: rgba(45,212,255,.4); }
.rf-promo .rf-tier ul { margin: .3rem 0 0; padding-left: 1rem; font-size: .82rem; color: var(--dim); line-height: 1.45; }
@media (max-width: 1100px) { .rf-row3 { grid-template-columns: 1fr 1fr; } .rf-row3 > .rf-promo { grid-column: 1 / -1; } }
@media (max-width: 720px) { .rf-row3 { grid-template-columns: 1fr; } .rf-col .rf-head { min-height: 0; } .rf-col .rf-name { min-height: 0; } }

/* напоминание о лобби/матче на любой странице (base.html) */
a.lobby-callout { display: block; margin: .6rem auto 0; text-decoration: none; font-weight: 700; }
a.lobby-callout:hover { filter: brightness(1.12); }