/* ============================================================
   «Иней» — общий слой страниц сайта части 1 (только сайт; frost.css не трогаем).
   Шапка, подвал, знак, эмодзи, крошки — в _src/site_shell.css (общий для всех страниц сайта).
   Здесь: сцена с видом карты, заголовок страницы, стеклянные капсулы и сегменты, твёрдые карточки.
   Без шрифтов Valve: буквы тиров — Geologica 800.
   ============================================================ */

/* ---------- сцена: вид карты (арт Valve), тонирован к navy заранее (gen_bg.py) ---------- */
.scene{position:absolute;left:0;right:0;top:0;height:var(--scene-h,720px);overflow:hidden;z-index:0;pointer-events:none;background:var(--bg)}
.scene img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:var(--scene-pos,50% 50%)}
.scene .fade{position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(180deg,rgba(13,20,33,.22) 0%,rgba(13,20,33,.0) 26%,rgba(13,20,33,.30) 62%,rgba(13,20,33,.82) 86%,#0d1421 100%),
             linear-gradient(90deg,rgba(13,20,33,.72) 0%,rgba(13,20,33,.38) 36%,rgba(13,20,33,0) 70%)}
.page{position:relative;z-index:2}

/* ---------- заголовок страницы над сценой ---------- */
.p-head{padding:132px 0 0;position:relative}
.p-head h1{font-size:56px;line-height:1.02;font-weight:700;letter-spacing:-.035em;margin-top:18px;text-shadow:0 2px 24px rgba(13,20,33,.6)}
.p-head .lead{font:400 18px/1.55 var(--f-ui);color:rgba(231,235,242,.86);margin-top:16px;max-width:660px;text-shadow:0 1px 12px rgba(13,20,33,.8)}
.p-head .lead .svit{vertical-align:2px}

/* стеклянные капсулы управления (ранг, патч, сброс) */
.cap-g{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 12px;border-radius:22px;font:600 14.5px/1 var(--f-ui);color:var(--text);white-space:nowrap}
.cap-g .i{width:14px;height:14px;color:var(--label)}
.cap-g img{width:34px;height:34px;margin-left:-6px}
.cap-g .live{background:var(--meta);box-shadow:0 0 0 3px rgba(74,158,237,.25)}

/* сегменты: стеклянный трек + «линза» (у линзы своего blur нет) */
.seg-g{position:relative;display:flex;height:48px;border-radius:24px;padding:4px}
.seg-g a{display:flex;align-items:center;justify-content:center;gap:7px;padding:0 18px;border-radius:20px;font:600 14.5px/1 var(--f-ui);color:var(--label);white-space:nowrap}
.seg-g a.on{color:var(--text)}
.seg-g .dot{width:8px;height:8px;border-radius:4px;background:var(--meta)}
.seg-g .i{width:14px;height:14px;color:var(--amber)}

/* роли — один сегмент (как в аппе) */
.roles-s{display:flex;gap:2px;padding:4px;border-radius:18px;background:rgba(16,24,39,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.roles-s a{flex:1;min-width:0;height:44px;padding:0 12px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:7px;font:600 13.5px/1 var(--f-ui);color:var(--label);white-space:nowrap}
.roles-s .role,.roles-s .i{width:17px;height:17px}
.roles-s a.on{background:var(--text);color:#0d1421}

/* ---------- твёрдые карточки контента ---------- */
.card{background:var(--sheet);border-radius:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 40px 80px -40px rgba(0,0,0,.9)}
.card-h{display:flex;align-items:center;gap:12px}
.card-h .fe{width:40px;height:40px;margin:-4px 0}
.card-h h2,.card-h h3{font-size:22px;line-height:1.15;letter-spacing:-.015em}
.card-h .ctx{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:500 13.5px/1.2 var(--f-ui);color:var(--text2);text-align:right}
.card-h .ctx i{width:8px;height:8px;border-radius:4px;background:var(--meta);flex:none}
.cap{font:400 13.5px/1.45 var(--f-ui);color:var(--text2)}

/* CTA «Открыть в Telegram» — карточка с эмодзи */
.cta-card{position:relative;padding:24px 24px 24px;overflow:hidden}
.cta-card .fe{position:absolute;right:14px;top:14px;width:72px;height:72px}
.cta-card h3{font-size:22px;line-height:1.2;letter-spacing:-.015em;max-width:200px}
.cta-card p{font:400 15px/1.5 var(--f-ui);color:var(--text2);margin-top:10px;max-width:300px}
.cta-card .btn{margin-top:18px}

/* ---------- адаптив заголовка ---------- */
@media (max-width:1080px){
  .p-head{padding-top:176px}
}
@media (max-width:760px){
  .p-head{padding-top:150px}
  .p-head h1{font-size:38px;padding-right:62px}
  .p-head .lead{font-size:16px}
}

/* ---------- тир-лист ---------- */
.site{--scene-h:620px;--scene-pos:50% 62%}
.p-head h1{max-width:760px}

/* панель фильтров — стекло над сценой (управление) */
.toolbar{margin-top:30px;border-radius:26px;padding:10px;display:flex;flex-direction:column;gap:10px}
.tb-row{display:flex;align-items:center;gap:8px}
.tb-row .cap-g{background:rgba(231,235,242,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.tb-row .seg-g{background:rgba(231,235,242,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.tb-lbl{font:600 12px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text2);padding:0 6px 0 8px;white-space:nowrap}
.search{margin-left:auto;display:flex;align-items:center;gap:10px;width:280px;height:44px;padding:0 14px;border-radius:14px;background:rgba(9,14,24,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font:500 15px/1 var(--f-ui);color:var(--text2)}
.search .i{width:17px;height:17px}
.mode{display:flex;align-items:center;gap:8px;font:500 14px/1.35 var(--f-ui);color:var(--meta);margin:14px 6px 0}
.mode .i{width:16px;height:16px;flex:none}

/* раскладка: таблица + колонка «Как читать» */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;margin-top:34px;align-items:start}

/* таблица — настоящая HTML-таблица */
.tbl-card{padding:10px 24px 18px}
table.tier{width:100%;border-collapse:collapse;table-layout:fixed}
table.tier caption{text-align:left}
.tier col.c1{width:auto}.tier col.c2{width:230px}.tier col.c3{width:92px}.tier col.c4{width:96px}
.tier thead th{font:500 12.5px/1.2 var(--f-ui);color:var(--text2);text-align:left;padding:16px 0 10px;border-bottom:1px solid var(--hair)}
.tier thead th.r{text-align:right}
.axis{display:flex;justify-content:space-between;position:relative;padding:0 2px}
.axis span:nth-child(2){position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);color:var(--text)}
/* заголовок группы тира */
.tier tbody th{text-align:left;padding:26px 0 10px;font-weight:400}
.tier tbody:first-of-type th{padding-top:20px}
.tg-h{display:flex;align-items:baseline;gap:12px}
.tg-h .L{font:800 30px/1 var(--f-display);letter-spacing:-.03em;width:44px;flex:none}
.tg-h b{font:600 19px/1 var(--f-display);letter-spacing:-.01em;color:var(--text)}
.tg-h small{font:500 13.5px/1 var(--f-ui);color:var(--text2)}
.tg-h .rule{flex:1;height:1px;background:var(--hair);margin-left:6px;align-self:center}
/* строка героя */
.tier td{padding:0;height:64px;vertical-align:middle;border-top:1px solid var(--hair)}
.tier tbody tr.tg + tr td{border-top:0}
.c-hero{display:flex;align-items:center;gap:14px;min-width:0}
.c-hero img{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none;background:var(--card)}
.c-hero .nm{display:flex;align-items:center;gap:8px;font:600 16px/1.2 var(--f-ui);white-space:nowrap}
.c-hero .ps{display:flex;align-items:center;gap:6px;font:400 13.5px/1 var(--f-ui);color:var(--text2);margin-top:6px;white-space:nowrap}
.c-hero .ps .role{width:14px;height:14px}
.tr-sp .c-hero img{box-shadow:0 0 0 2px rgba(139,92,246,.6)}
/* расходящаяся полоса от 50 %: шкала 44–56 % подписана в шапке */
.dv{display:block;position:relative;height:8px;margin:0 2px}
.dv:before{content:'';position:absolute;left:0;right:0;top:3px;height:2px;border-radius:1px;background:rgba(231,235,242,.06)}
.dv:after{content:'';position:absolute;left:50%;top:-6px;bottom:-6px;width:1px;margin-left:-.5px;background:rgba(231,235,242,.32)}
.dv i{position:absolute;top:0;height:8px;border-radius:4px}
.dv i.p{left:50%;background:var(--meta)}
.dv i.n{right:50%;background:#6b7487}
.c-wr{text-align:right;font:600 17.5px/1 var(--f-display);color:var(--meta);white-space:nowrap}
.c-sh{text-align:right}
.c-sh .shift{justify-content:flex-end}
.tbl-foot{display:flex;justify-content:space-between;gap:20px;padding:16px 0 0;margin-top:8px;border-top:1px solid var(--hair)}

/* колонка справа */
.aside{display:flex;flex-direction:column;gap:16px;position:-webkit-sticky;position:sticky;top:96px}
/* за 3 дня: кто вырос и кто упал — те же герои, что в таблице */
.moves{padding:22px 22px 18px}
.moves .card-h .fe{width:44px;height:44px}
.moves .card-h h2{font-size:21px}
.mv-h{font:600 13px/1 var(--f-ui);color:var(--text2);margin:18px 0 4px}
.mv{display:flex;align-items:center;gap:12px;min-height:52px}
.mv + .mv{border-top:1px solid var(--hair)}
.mv img{width:36px;height:36px;border-radius:10px;object-fit:cover;flex:none}
.mv b{flex:1;min-width:0;font:600 15px/1.2 var(--f-ui)}
.mv .shift{font-size:14px}
.howto{padding:22px 22px 20px}
.howto .card-h .fe{width:44px;height:44px}
.howto .card-h h2{font-size:21px}
.hw-tiers{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.hw-tiers div{display:flex;align-items:baseline;gap:12px;font:500 15px/1.2 var(--f-ui);color:var(--text)}
.hw-tiers b{width:30px;flex:none;font:800 21px/1 var(--f-display);letter-spacing:-.02em}
.hw-list{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:14px}
.hw-list p{font:400 14.5px/1.5 var(--f-ui);color:var(--text2)}
.hw-list p b{color:var(--text);font-weight:600}
.hw-list .svit{vertical-align:1px}
.hw-list .sw{display:inline-flex;align-items:center;gap:3px;font:600 13px/1 var(--f-ui);vertical-align:0}
.hw-list .sw .i{width:10px;height:10px}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .aside{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:static}
  .aside .cta-card{grid-column:1 / -1}
  .tb-row.r1{flex-wrap:wrap}
  .search{width:100%;margin-left:0;order:5}
}
@media (max-width:760px){
  .site{--scene-h:560px}
  .toolbar{margin-top:22px;border-radius:22px;padding:8px}
  .tb-row.r1{gap:6px}
  .tb-lbl{display:none}
  .tb-row .seg-g{width:100%}
  .tb-row .seg-g a{flex:1;padding:0 8px}
  .roles-s{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .roles-s::-webkit-scrollbar{display:none}
  .roles-s a{flex:none;padding:0 12px}
  .mode{font-size:13px;align-items:flex-start}
  .layout{margin-top:24px}
  .aside{grid-template-columns:1fr}
  .tbl-card{padding:4px 14px 14px;border-radius:22px}
  /* на телефоне строки — сетка: герой | винрейт | сдвиг; шапка таблицы остаётся для чтения экрана */
  table.tier,.tier tbody,.tier colgroup{display:block}
  .tier colgroup{display:none}
  .tier thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tier tr{display:grid;grid-template-columns:minmax(0,1fr) 64px 56px;align-items:center}
  .tier tr.tg{display:block}
  .tier tr.tg th{display:block}
  .tier td{display:block;height:auto;padding:10px 0;border-top:0}
  .tier tbody tr + tr:not(.tg){border-top:1px solid var(--hair)}
  .tier tbody tr.tg + tr{border-top:0}
  .tier td.c-dv{display:none}
  .shift.flat{white-space:normal;text-align:right;line-height:1.15;display:block;font-size:11.5px}
  .c-hero{gap:11px}
  .c-hero img{width:40px;height:40px;border-radius:11px}
  .c-hero .nm{font-size:15px;gap:6px}
  .c-hero .nm .svit{padding:0 6px 0 5px}
  .c-wr{font-size:16px}
  .tg-h .L{font-size:26px;width:36px}
  .tg-h b{font-size:17px}
  .tbl-foot{flex-direction:column;gap:4px}
}
@media (max-width:400px){
  .c-hero .ps{font-size:12.5px}
}

/* ---------- 21.10: дополнения по аудиту (ничего не убрано) — другие состояния страницы ---------- */
.states{margin-top:56px}
.st-cap{display:flex;justify-content:space-between;gap:16px;padding:16px 4px;border-top:1px solid var(--hair);font:500 14px/1.4 var(--f-ui);color:var(--text2)}
.st-cap b{color:var(--text);font-weight:600}
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px;align-items:start}
.st-card{padding:20px 20px 18px}
.st-k{display:flex;align-items:center;gap:10px;font:700 12px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}
.st-k .fe{width:30px;height:30px}
.st-card h3{font:600 20px/1.25 var(--f-display);letter-spacing:-.01em;margin:12px 0 14px}
.mini-seg{display:flex;gap:4px;padding:4px;border-radius:16px;background:rgba(231,235,242,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.mini-seg a{flex:1;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font:600 13.5px/1 var(--f-ui);color:var(--label)}
.mini-seg a.on{background:rgba(231,235,242,.13);color:var(--text)}
.mini-seg .dot{width:7px;height:7px;border-radius:4px;background:var(--meta)}
.mini-seg .i{width:13px;height:13px;color:var(--amber)}
.sv-mode{display:flex;gap:8px;align-items:flex-start;margin:12px 2px 6px;font:500 13.5px/1.4 var(--f-ui);color:var(--amber)}
.sv-mode .i{width:15px;height:15px;flex:none;margin-top:2px}
.sv-list{margin-top:6px}
.sv-g{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px}
.sv-g .L{font:800 22px/1 var(--f-display);width:34px}
.sv-g b{font:600 15px/1 var(--f-display)}
.sv-row{display:flex;align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--hair)}
.sv-g + .sv-row{border-top:0}
.sv-row img{width:38px;height:38px;border-radius:11px;object-fit:cover}
.sv-row .nm{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font:600 15px/1.2 var(--f-ui)}
.sv-row .ps{font:400 13px/1 var(--f-ui);color:var(--text2);display:flex;align-items:center;gap:5px}
.sv-row .ps .role{width:13px;height:13px}
.cap-g.stale{color:var(--amber);background:rgba(251,191,36,.10);box-shadow:inset 0 0 0 1px rgba(251,191,36,.25)}
.cap-g.stale .live{background:var(--amber);box-shadow:0 0 0 3px rgba(251,191,36,.22)}
.stale-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:14px 16px;border-radius:16px;background:rgba(251,191,36,.08);box-shadow:inset 0 0 0 1px rgba(251,191,36,.2);font:400 14.5px/1.5 var(--f-ui);color:var(--text)}
.stale-note .fe{width:26px;height:26px;flex:none}
.stale-note b{font-weight:600}
.dim-rows{opacity:.8;margin-top:6px}
.search.full{width:100%;margin:0;color:var(--text)}
.search.full b{font-weight:500;flex:1}
.search.full .x{color:var(--text2)}
.nores{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 8px 6px}
.nores .fe{width:64px;height:64px}
.nores b{font:600 18px/1.3 var(--f-display);margin-top:12px}
.nores small{font:400 14px/1.5 var(--f-ui);color:var(--text2);margin-top:6px}
.nores .ghost-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;margin-top:16px;border-radius:14px;background:rgba(231,235,242,.08);font:600 15px/1 var(--f-ui);color:var(--text)}
@media (max-width:1100px){.st-grid{grid-template-columns:1fr}}

/* style="" из макета → классы (inline-стиль сильнее любого правила — отсюда !important) */
.u-00dade85{object-position:52% 30% !important}
.u-027c8a55{width:10% !important}
.u-04ea3065{width:22.5% !important}
.u-065cedfc{-webkit-mask-image:url(/app/assets/roles/pos2.png) !important;mask-image:url(/app/assets/roles/pos2.png) !important}
.u-06c51e36{-webkit-mask-image:url(/app/assets/roles/pos4.png) !important;mask-image:url(/app/assets/roles/pos4.png) !important}
.u-07ce524e{width:10.8% !important}
.u-0c42c185{object-position:50% 30% !important}
.u-28b7cf56{width:24.2% !important}
.u-29ab00cb{object-position:56% 30% !important}
.u-29bf2a0a{width:6.7% !important}
.u-2e5ab18b{width:25.8% !important}
.u-2ec2b3ea{object-position:42% 30% !important}
.u-3e4e1d08{color:var(--t-s) !important}
.u-441463a2{object-position:30% 30% !important}
.u-48d8d65b{object-position:40% 30% !important}
.u-60516728{object-position:38% 30% !important}
.u-6498dd8f{width:15% !important}
.u-6765dc71{-webkit-mask-image:url(/app/assets/roles/pos1.png) !important;mask-image:url(/app/assets/roles/pos1.png) !important}
.u-6839a558{object-position:48% 30% !important}
.u-68c77de5{-webkit-mask-image:url(/app/assets/roles/pos3.png) !important;mask-image:url(/app/assets/roles/pos3.png) !important}
.u-6ef2745f{-webkit-mask-image:url(/app/assets/roles/pos5.png) !important;mask-image:url(/app/assets/roles/pos5.png) !important}
.u-6f545f48{object-position:55% 30% !important}
.u-753d8a1e{width:35% !important}
.u-76346e2c{width:9.2% !important}
.u-78d35f33{width:.8% !important}
.u-83725d2c{flex:1 !important}
.u-848c95f5{object-position:62% 35% !important}
.u-86928b8f{width:4.2% !important}
.u-95e3a863{object-position:44% 25% !important}
.u-964d405d{width:1.7% !important}
.u-99a3674d{object-position:30% 35% !important}
.u-9be630b1{width:28.3% !important}
.u-a71de42f{object-position:55% 25% !important}
.u-a738e48b{color:var(--t-a) !important}
.u-a9841a77{width:38.3% !important}
.u-aadd71ae{color:var(--t-b) !important}
.u-af807451{width:13.3% !important}
.u-b0fce3e9{object-position:50% 35% !important}
.u-b9a4b590{width:42.5% !important}
.u-bec017aa{width:8.3% !important}
.u-c53ea1da{margin-top:14px !important}
.u-d101edbf{object-position:45% 30% !important}
.u-dbf2aef8{width:16.7% !important}
.u-de0989c4{object-position:34% 30% !important}
.u-e182b97d{object-position:62% 30% !important}
.u-e1c0ee27{object-position:46% 30% !important}
.u-e70b1915{width:5.8% !important}
.u-e71deecc{color:var(--t-sp) !important}
.u-f483492b{width:21.7% !important}
.u-f9e6aa72{object-position:42% 25% !important}
.u-fcc15690{width:3.3% !important}
.u-fe5d9e7a{object-position:28% 30% !important}
.u-feb9444b{width:7.5% !important}

/* ---------- 04.11: телефон — плашка «Свит» не налезает на винрейт (имя переносится), доля игр ---------- */
.c-hero .ps{flex-wrap:wrap;row-gap:4px}
.c-hero .ps .fq{white-space:nowrap}
@media (max-width:420px){
  .c-hero .nm{flex-wrap:wrap;white-space:normal;row-gap:4px}
}