/* ============================================================
   «Иней» — общий слой страниц сайта части 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:640px;--scene-pos:50% 55%}
.p-ctl{display:flex;align-items:center;gap:10px;margin-top:24px}

.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:36px;align-items:start}
.col{display:flex;flex-direction:column;gap:20px}
.pad{padding:22px 24px 24px}

/* драфт */
.dr + .dr{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair)}
.dr-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dr-h .n{font:500 13px/1 var(--f-ui);color:var(--text2)}
.k-them{color:var(--coral)} .k-them .d{background:var(--coral)}
.k-us{color:var(--cyan)} .k-us .d{background:var(--cyan)}
.k-me{color:var(--amber)} .k-me .d{background:var(--amber)}
.slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sl{position:relative;display:block;border-radius:16px;padding-top:100%}
.sl > *{position:absolute}
.sl img.pt{left:0;top:0;width:100%;height:100%;border-radius:16px}
.sl.them img{box-shadow:0 0 0 2px var(--coral)}
.sl.us img{box-shadow:0 0 0 2px var(--cyan)}
.sl .nm{left:-4px;right:-4px;top:calc(100% + 8px);text-align:center;font:500 12.5px/1.15 var(--f-ui);color:var(--text2)}
/* занятый слот — одна кнопка «Убрать героя»; крестик — только знак */
.sl .x{right:-6px;top:-6px;width:22px;height:22px;border-radius:11px;background:#222c40;box-shadow:0 0 0 2px var(--sheet);display:flex;align-items:center;justify-content:center;color:var(--text2);pointer-events:none}
.sl .x .i{width:11px;height:11px}
.sl.empty .pl{left:0;top:0;right:0;bottom:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:600 12px/1 var(--f-ui)}
.sl.empty .pl .i{width:22px;height:22px}
.sl.empty.them .pl{border:1.5px dashed rgba(255,122,110,.5);background:rgba(255,122,110,.05);color:var(--coral)}
.sl.empty.us .pl{border:1.5px dashed rgba(34,211,238,.45);background:rgba(34,211,238,.05);color:var(--cyan)}
.sl.empty.me .pl{border:1.5px dashed rgba(251,191,36,.55);background:rgba(251,191,36,.06);color:var(--amber)}
.sl.active .pl{border-style:solid;box-shadow:0 0 0 4px rgba(255,122,110,.18)}
.sl.ghost{visibility:hidden}
.slots{padding-bottom:36px}
.me-row{display:flex;align-items:center;gap:16px}
.me-row .sl{width:92px;flex:none;padding-top:92px}
.me-row .t{font:600 16.5px/1.25 var(--f-ui)}
.me-row .s{font:400 14px/1.4 var(--f-ui);color:var(--text2);margin-top:4px;max-width:330px}
.pos-h{margin:20px 0 10px;font:600 14px/1 var(--f-ui);color:var(--text)}
.roles-s a{padding:0 8px}
.roles-cap{margin-top:9px}

/* поиск героя */
.search{display:flex;align-items:center;gap:10px;height:52px;padding:0 8px 0 16px;border-radius:16px;background:var(--well);box-shadow:inset 0 0 0 1.5px rgba(255,122,110,.5)}
.search > .i{width:19px;height:19px;color:var(--text2)}
.search .q{flex:1;font:500 16px/1 var(--f-ui);color:var(--text2)}
.search .to{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:12px;background:rgba(255,122,110,.12);color:var(--coral);font:600 13px/1 var(--f-ui);white-space:nowrap}
.hint{margin:10px 2px 0}
.grid-h{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 12px;margin-top:18px}
.gh{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.gh .ph{position:relative;display:block;width:100%;padding-top:100%;border-radius:13px;overflow:hidden;background:var(--cell)}
.gh .ph img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.gh .n{font:500 12.5px/1.2 var(--f-ui);color:var(--text2);text-align:center;max-width:100%;min-height:30px}
.gh.in img{opacity:.28}
.all-h{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font:600 14.5px/1 var(--f-ui);color:var(--cta)}
.all-h .i{width:14px;height:14px}
.gh.in .n{color:var(--muted)}

/* шансы */
.verdict{flex:none;white-space:nowrap;margin-left:auto;height:28px;padding:0 11px;border-radius:8px;background:rgba(34,197,94,.15);color:var(--green);display:inline-flex;align-items:center;font:600 13.5px/1 var(--f-ui)}
.ch-nums{display:flex;align-items:flex-end;justify-content:space-between;margin-top:18px}
.ch-nums b{display:block;font:600 46px/1 var(--f-display);letter-spacing:-.035em}
.ch-nums small{display:block;font:500 13.5px/1 var(--f-ui);color:var(--text2);margin-top:8px}
.ch-nums .us b{color:var(--cyan)}
.ch-nums .them{text-align:right}
.ch-nums .them b{color:var(--coral);font-size:30px}
.ch-bar{position:relative;display:flex;gap:4px;height:12px;margin-top:16px}
.ch-bar i{display:block;height:100%;border-radius:6px}
.ch-bar .u{background:var(--cyan)}
.ch-bar .t{flex:1;background:rgba(255,122,110,.55)}
.ch-bar .mid{position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;margin-left:-1px;border-radius:1px;background:var(--text)}
.ch-ax{position:relative;height:16px;margin-top:6px;font:500 12px/1 var(--f-ui);color:var(--text2)}
.ch-ax span{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}
.chance .cap{margin-top:10px}

/* «Кого взять» — карточки ничего не открывают: без шеврона и без ссылки */
.recs{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.rec{background:var(--cell);border-radius:20px;padding:16px 16px 6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.rec-h{display:flex;align-items:center;gap:14px}
.rec-h .pt{width:56px;height:56px;border-radius:15px}
.rec-h .grow{flex:1;min-width:0}
.rec-h .t{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;font:600 17px/1.25 var(--f-ui)}
.tg{font:800 15px/1 var(--f-display);letter-spacing:-.02em}
.wr{flex:none;text-align:right}
.wr b{display:block;font:600 24px/1 var(--f-display);letter-spacing:-.025em;color:var(--green);white-space:nowrap}
.wr small{display:block;font:400 12.5px/1.25 var(--f-ui);color:var(--text2);margin-top:5px;white-space:nowrap}
.rec-b{display:flex;align-items:center;gap:10px;margin-top:12px;padding:6px 0 4px;border-top:1px solid var(--hair)}
.rl{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;min-height:44px}
.rl .lb{flex:none;font:500 13.5px/1 var(--f-ui);color:var(--text2)}
.rl .minis{display:flex;flex:none}
.rl .minis img{width:30px;height:30px;border-radius:9px;box-shadow:0 0 0 1.5px var(--coral)}
.rl .minis img + img{margin-left:6px}
.rl .nm{flex:1;min-width:0;font:400 14px/1.3 var(--f-ui);color:var(--text)}
.hide{flex:none;height:44px;display:flex;align-items:center}
.hide span{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--border-hi);color:var(--text2);font:600 13px/1 var(--f-ui);white-space:nowrap}
.hide .i{width:14px;height:14px}
.more{display:flex;align-items:center;justify-content:center;gap:7px;height:50px;border-radius:16px;background:var(--well);color:var(--cta);font:600 15px/1 var(--f-ui)}
.more .i{width:15px;height:15px}
.sec-cap{margin-top:6px}

/* «Точно не бери» */
.bad{margin-top:12px}
.bad .row2{display:flex;align-items:center;gap:14px;min-height:66px}
.bad .row2 + .row2{border-top:1px solid var(--hair)}
.bad .pt{width:46px;height:46px;border-radius:13px;box-shadow:0 0 0 2px rgba(255,122,110,.7)}
.bad .grow{flex:1;min-width:0}
.bad .t{font:600 16px/1.25 var(--f-ui)}
.bad .s{font:400 13.5px/1.35 var(--f-ui);color:var(--text2);margin-top:3px}
.bad .wr b{color:var(--coral)}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  /* 901–1100: две колонки, советы справа уже; плитки драфта не шире 120 px */
  .layout{grid-template-columns:minmax(0,1fr) 380px;gap:20px}
  .slots{grid-template-columns:repeat(5,minmax(0,120px))}
  .grid-h{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rec-b{flex-wrap:wrap;gap:0}
  .rl{-webkit-flex:1 1 100%;flex:1 1 100%;padding-top:6px}
  .hide{margin-left:auto}
}
@media (max-width:900px){
  /* одна колонка не шире 680 px: драфт → шансы → кого взять → «не бери» → поиск → Telegram */
  .layout{grid-template-columns:minmax(0,1fr);max-width:680px}
  .col{display:contents}
  .o1{-webkit-order:1;order:1}.o2{-webkit-order:2;order:2}.o3{-webkit-order:3;order:3}
  .o4{-webkit-order:4;order:4}.o5{-webkit-order:5;order:5}.o6{-webkit-order:6;order:6}
}
@media (max-width:760px){
  .site{--scene-h:560px}
  .p-ctl{margin-top:18px}
  .layout{margin-top:24px;gap:16px}
  .col{gap:16px}
  .pad{padding:18px 16px 18px}
  .card{border-radius:22px}
  .slots{gap:8px}
  .sl,.sl img.pt,.sl.empty .pl{border-radius:13px}
  .sl .nm{font-size:11px}
  .sl.empty .pl span{display:none}
  .me-row{gap:12px}
  .me-row .sl{width:70px;padding-top:70px}
  .me-row .t{font-size:15.5px}
  .me-row .s{font-size:13px}
  .roles-s{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .roles-s::-webkit-scrollbar{display:none}
  .roles-s a{flex:none;padding:0 11px}
  .search{height:50px;padding-left:14px}
  .search .q{font-size:15px}
  .search .to span{display:none}
  .grid-h{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}
  .gh .n{font-size:12px;min-height:0}
  /* на телефоне — два ряда, остальное в списке героев */
  .grid-h .gh:nth-child(n+9){display:none}
  .ch-nums b{font-size:38px}
  .ch-nums .them b{font-size:26px}
  .rec{padding:14px 12px 4px}
  .rec-h{gap:12px}
  .rec-h .pt{width:50px;height:50px;border-radius:14px}
  .rec-h .t{font-size:16px}
  .wr b{font-size:21px}
  .wr small{white-space:normal;max-width:92px;font-size:11.5px}
  .rec-b{flex-wrap:wrap;gap:0}
  .rl{-webkit-flex:1 1 100%;flex:1 1 100%;padding-top:6px}
  .hide{margin-left:auto}
  .chance .card-h{flex-wrap:wrap;row-gap:10px}
  .chance .verdict{margin-left:52px}
  .sl .nm{font-size:11px;top:calc(100% + 6px)}
  .slots{padding-bottom:30px}
}
/* ---------- 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(2,minmax(0,1fr));gap:20px;margin-top:8px;align-items:start}
.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 21px/1.25 var(--f-display);letter-spacing:-.01em;margin-top:12px}
.st-card .dr{margin-top:16px}
.st-card .btn{margin-top:4px;height:52px;border-radius:16px;font-size:16px}
.e-hint{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font:400 14.5px/1.5 var(--f-ui);color:var(--text2)}
.e-hint .fe{width:26px;height:26px;margin-top:-2px}
.e-hint b{color:var(--text);font-weight:600}
.busy{display:flex;align-items:center;gap:10px;margin-top:14px;font:500 15px/1.3 var(--f-ui);color:var(--text)}
.busy .fe{width:26px;height:26px}
.sk-rec{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--cell);margin-top:10px}
.sk-rec i{display:block;border-radius:8px;background:rgba(231,235,242,.08)}
.sk-rec .a{width:52px;height:52px;border-radius:15px;flex:none}
.sk-rec .ln{flex:1;display:flex;flex-direction:column;gap:8px}
.sk-rec .ln i:first-child{width:46%;height:14px}
.sk-rec .ln i:last-child{width:70%;height:10px;background:rgba(231,235,242,.05)}
.sk-rec .w{width:58px;height:26px;flex:none}
.warm{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(251,191,36,.07);box-shadow:inset 0 0 0 1px rgba(251,191,36,.18);font:400 14.5px/1.5 var(--f-ui);color:var(--text2)}
.warm .fe{width:24px;height:24px;flex:none}
.warm b{color:var(--text);font-weight:600}
.rec.sm{padding-bottom:12px;margin-top:10px}
.rec.sm .rec-s{font:400 13.5px/1.3 var(--f-ui);color:var(--text2);margin-top:4px}
.err{padding:16px 16px 14px;border-radius:18px;background:var(--cell);margin-top:12px}
.err h4{display:flex;align-items:center;gap:10px;font:600 17px/1.25 var(--f-ui)}
.err h4 .fe{width:28px;height:28px}
.err p{font:400 14.5px/1.5 var(--f-ui);color:var(--text2);margin-top:6px}
.err a{display:inline-flex;align-items:center;gap:6px;margin-top:10px;height:40px;padding:0 14px;border-radius:13px;background:rgba(231,235,242,.08);font:600 14px/1 var(--f-ui);color:var(--text)}
.err a .i{width:14px;height:14px;color:var(--label)}
.rl .minis.us img{box-shadow:0 0 0 1.5px var(--cyan)}
@media (max-width:1100px){.st-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .st-cap{flex-direction:column;gap:4px}
  .states .card{border-radius:22px}
}

/* style="" из макета → классы (inline-стиль сильнее любого правила — отсюда !important) */
.u-00dade85{object-position:52% 30% !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-0c42c185{object-position:50% 30% !important}
.u-1d7ebaf8{width:53% !important}
.u-29ab00cb{object-position:56% 30% !important}
.u-2bdf8e45{margin-top:18px !important}
.u-2ec2b3ea{object-position:42% 30% !important}
.u-301647f5{margin-top:6px !important}
.u-3e820c76{object-position:37% 30% !important}
.u-441463a2{object-position:30% 30% !important}
.u-48d8d65b{object-position:40% 30% !important}
.u-60516728{object-position:38% 30% !important}
.u-6765dc71{-webkit-mask-image:url(/app/assets/roles/pos1.png) !important;mask-image:url(/app/assets/roles/pos1.png) !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-848c95f5{object-position:62% 35% !important}
.u-95e3a863{object-position:44% 25% !important}
.u-99a3674d{object-position:30% 35% !important}
.u-a71de42f{object-position:55% 25% !important}
.u-a738e48b{color:var(--t-a) !important}
.u-aadd71ae{color:var(--t-b) !important}
.u-d101edbf{object-position:45% 30% !important}
.u-de0989c4{object-position:34% 30% !important}
.u-e182b97d{object-position:62% 30% !important}
.u-e1c0ee27{object-position:46% 30% !important}
.u-e71deecc{color:var(--t-sp) !important}
.u-eee3f850{margin-top:20px !important}
.u-f9e6aa72{object-position:42% 25% !important}
.u-fe5d9e7a{object-position:28% 30% !important}

/* ---------- 04.11: резерв высоты драфта (CLS) — его рисует JS после загрузки скрипта ---------- */
#pk-draft{min-height:560px}
@media (max-width:760px){#pk-draft{min-height:600px}}