/* ============================================================
   «Иней» — сайт, общие куски страниц site-party / site-review / site-premium.
   Только сайт: шрифты Valve не используются, арт Valve — виды карт фоном (приглушены) и мелкие подписи данных.
   Стекло — только шапка и элементы управления; контент — твёрдые листы.
   ============================================================ */
/* ---------- первый экран страницы: вид карты фоном ---------- */
.phero{position:relative;padding:132px 0 72px}
.phero .h-emoji{top:-14px}
.bgart{position:absolute;left:0;right:0;top:0;height:760px;overflow:hidden;z-index:0;pointer-events:none}
.bgart img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
/* слева — под текстом темнее, снизу — уход в #0d1421 */
.bgart .fade{position:absolute;left:0;right:0;top:0;bottom:0;background:
  linear-gradient(180deg,rgba(13,20,33,.38) 0%,rgba(13,20,33,0) 22%,rgba(13,20,33,.12) 55%,rgba(13,20,33,.7) 82%,#0d1421 100%),
  linear-gradient(90deg,rgba(13,20,33,.84) 0%,rgba(13,20,33,.6) 30%,rgba(13,20,33,.08) 62%,rgba(13,20,33,0) 100%)}
.phero > .wrap{z-index:2}
.phero h1{font-size:56px;line-height:1.02;font-weight:700;letter-spacing:-.04em;margin-top:18px;max-width:640px;text-shadow:0 2px 24px rgba(13,20,33,.6)}
.lead{font:400 19px/1.55 var(--f-ui);color:rgba(231,235,242,.82);margin-top:20px;max-width:520px;text-shadow:0 1px 12px rgba(13,20,33,.7)}
.cta{display:flex;align-items:center;gap:18px;margin-top:32px;flex-wrap:wrap}
.cta .btn{width:auto;height:56px;padding:0 24px 0 20px;font-size:17px;border-radius:17px}
.cta .btn .i{width:22px;height:22px}
.cta .note{font:400 14.5px/1.4 var(--f-ui);color:rgba(231,235,242,.78)}

/* подпись капсом + эмодзи-акцент (одно на раздел) */
.ek{display:flex;align-items:center;gap:12px}
.ek .fe{width:56px;height:56px}
.ek .kick{color:var(--text)}
.page-s .fe{-webkit-filter:drop-shadow(0 8px 14px rgba(2,6,14,.45));filter:drop-shadow(0 8px 14px rgba(2,6,14,.45))}

/* ---------- разделы ---------- */
.sec{padding:80px 0;border-top:1px solid var(--hair);position:relative}
.sec.flush{border-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:36px}
.sec-head h2{font-size:44px;line-height:1.05;letter-spacing:-.03em;font-weight:700;margin-top:16px;max-width:680px}
.sec-head p{font:400 17px/1.55 var(--f-ui);color:var(--text2);max-width:440px}
h3.h3{font-size:24px;line-height:1.15;letter-spacing:-.02em;font-weight:700}

/* твёрдые поверхности сайта */
.panel{background:var(--sheet);border-radius:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 40px 80px -40px rgba(0,0,0,.9)}
.tile{background:var(--cell);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px -14px rgba(0,0,0,.6)}

/* финальная полоса с действием */
.band{position:relative;border-radius:32px;overflow:hidden;padding:56px 56px;display:flex;align-items:center;gap:40px}
.band .bgimg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band .bgfade{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;background:linear-gradient(90deg,rgba(13,20,33,.94) 0%,rgba(13,20,33,.78) 45%,rgba(13,20,33,.3) 100%)}
.band > *:not(.bgimg):not(.bgfade){position:relative;z-index:2}
.band .fe{width:96px;height:96px}
.band h2{font-size:38px;line-height:1.08;letter-spacing:-.03em;font-weight:700}
.band p{font:400 17px/1.5 var(--f-ui);color:rgba(231,235,242,.82);margin-top:10px;max-width:560px}
.band .btn{width:auto;height:56px;padding:0 24px 0 20px;font-size:17px;border-radius:17px;margin-left:auto;flex:none}
.band .btn .i{width:22px;height:22px}

.cmd{font:600 0.92em/1 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:var(--text);background:rgba(231,235,242,.09);padding:3px 7px;border-radius:6px;white-space:nowrap}
.sfoot-note{font:400 13px/1.4 var(--f-ui);color:var(--text2);margin-top:28px}

/* ---------- адаптив: 1100 / 900 / 760 / 480 ---------- */
@media (max-width:1080px){
  .phero{padding-top:176px}
  .phero .h-emoji{top:-10px}
}
@media (max-width:980px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:760px){
  .phero{padding:150px 0 48px}
  .phero .h-emoji{top:-16px;right:16px}
  .phero h1{padding-right:62px}
  .bgart{height:640px}
  .bgart .fade{background:linear-gradient(180deg,rgba(13,20,33,.5) 0%,rgba(13,20,33,.45) 40%,rgba(13,20,33,.8) 75%,#0d1421 100%)}
  .phero h1{font-size:40px}
  .lead{font-size:17px}
  .cta .btn{width:100%}
  .sec{padding:64px 0}
  .sec-head h2{font-size:32px}
  .sec-head p{font-size:16px}
  .band{flex-direction:column;align-items:flex-start;padding:32px 22px;gap:18px;border-radius:26px}
  .band .bgfade{background:linear-gradient(180deg,rgba(13,20,33,.9) 0%,rgba(13,20,33,.8) 60%,rgba(13,20,33,.6) 100%)}
  .band .fe{width:64px;height:64px}
  .band h2{font-size:28px}
  .band .btn{margin-left:0;width:100%}
}
@media (max-width:480px){
  .phero h1{font-size:36px}
}


/* ---------- разборы ---------- */
.phero{padding-bottom:40px}
.phero h1{max-width:700px}

/* шаги: привяжи Steam → играй → разбор в Telegram (твёрдые плитки над уходящим артом) */
.steps3{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr);align-items:stretch;margin-top:72px}
.stp{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:22px;background:rgba(19,28,44,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 40px -24px rgba(0,0,0,.9)}
.stp .fe{width:56px;height:56px}
.stp b{display:block;font:600 18px/1.2 var(--f-display);letter-spacing:-.01em}
.stp small{display:block;font:400 14px/1.4 var(--f-ui);color:var(--text2);margin-top:4px}
.stp .n{font:600 12px/1 var(--f-ui);color:var(--text2);letter-spacing:.06em;display:block;margin-bottom:6px}
.arr{display:flex;align-items:center;justify-content:center;color:var(--text2)}
.arr .i{width:20px;height:20px}

/* ---------- пример разбора ---------- */
.ex{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:20px}
.ex-full{grid-column:1 / -1}

/* шапка матча: кадр рендера над видом карты */
.mh{position:relative;overflow:hidden;border-radius:28px;background:#0f1726;min-height:220px;display:flex;align-items:center;padding:28px 32px 28px 300px}
.mh .mbg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.mh .mfade{position:absolute;left:0;top:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(13,20,33,.2) 0%,rgba(13,20,33,.62) 26%,rgba(13,20,33,.9) 55%,rgba(13,20,33,.94) 100%)}
.mh .still{position:absolute;left:24px;bottom:-6px;width:236px;height:236px;object-fit:contain;-webkit-filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.mh-body{position:relative;z-index:2;flex:1;min-width:0;display:flex;align-items:center;gap:36px}
.mh-t{flex:1;min-width:0}
.mh-over{display:flex;align-items:center;gap:8px;font:500 14px/1 var(--f-ui);color:rgba(231,235,242,.8)}
.mh-over .role{width:16px;height:16px}
.mh h3{font-size:44px;line-height:1;letter-spacing:-.035em;font-weight:700;margin:10px 0 14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips .chip{height:30px;font-size:13.5px}
.vs{flex:none}
.vs .row2{display:flex;align-items:center;gap:6px}
.vs .row2 + .row2{margin-top:10px}
.vs small{width:58px;font:500 13px/1 var(--f-ui);color:var(--text2)}
.vs img{width:40px;height:40px;border-radius:11px}
.vs .us img{box-shadow:0 0 0 2px rgba(34,211,238,.6)}
.vs .them img{box-shadow:0 0 0 2px rgba(255,122,110,.75)}
.vs .us img.me{box-shadow:0 0 0 2.5px var(--amber)}

/* Главное — единственное громкое место */
.main{padding:30px 34px 28px}
.kick.amber{color:var(--amber)} .kick.amber .d{background:var(--amber)}
.main-q{font:500 32px/1.25 var(--f-display);letter-spacing:-.022em;margin:16px 0 12px;max-width:900px}
.main-q em{font-style:normal;color:var(--amber)}
.main-src{font:400 14px/1.4 var(--f-ui);color:var(--text2)}
.good{display:flex;gap:10px;margin-top:20px;padding:13px 16px;border-radius:16px;background:rgba(34,197,94,.08);font:400 16px/1.45 var(--f-ui);color:var(--text);max-width:760px}
.good .d{width:8px;height:8px;border-radius:4px;background:var(--green);flex:none;margin-top:8px}
.good b{color:var(--green);font-weight:600}

/* момент на карте */
.mom{padding:18px 18px 20px}
.mom-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 4px 14px}
.mom-h b{font:600 20px/1 var(--f-display);letter-spacing:-.01em}
.map{position:relative;width:100%;padding-top:100%;border-radius:20px;overflow:hidden;background:var(--well)}
.map > img.mm{position:absolute;left:-6%;top:-6%;width:112%;height:112%;max-width:none;-webkit-filter:saturate(.8) brightness(.8) contrast(1.05);filter:saturate(.8) brightness(.8) contrast(1.05)}
.map .trail{position:absolute;left:0;top:0;width:100%;height:100%}
.dot{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:16px;overflow:hidden;background:#0d1421}
.dot img{width:100%;height:100%}
.dot.us{box-shadow:0 0 0 2px var(--cyan),0 3px 8px rgba(0,0,0,.6)}
.dot.them{box-shadow:0 0 0 2px var(--coral),0 3px 8px rgba(0,0,0,.6)}
.dot.me{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:20px;box-shadow:0 0 0 3px var(--amber),0 0 0 8px rgba(251,191,36,.24),0 4px 10px rgba(0,0,0,.6)}
.ghost{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:13px;padding:3px;background:rgba(13,20,33,.78)}
.ghost img{width:100%;height:100%}
.gt{position:absolute;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);margin-top:16px;font:600 12px/1 var(--f-ui);color:var(--text);background:rgba(13,20,33,.78);padding:3px 6px;border-radius:6px;white-space:nowrap}
.play{position:absolute;left:14px;bottom:14px;height:46px;border-radius:23px;display:flex;align-items:center;gap:9px;padding:0 18px 0 8px;font:600 15px/1 var(--f-ui);color:var(--text)}
.play .pb{width:30px;height:30px;border-radius:15px;background:var(--text);color:#0d1421;display:flex;align-items:center;justify-content:center}
.play .pb .i{width:13px;height:13px;margin-left:2px}
.legend{position:absolute;left:14px;top:14px;display:flex;gap:14px;padding:10px 14px;border-radius:14px;font:500 12.5px/1 var(--f-ui);color:var(--text)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:5px}
.legend img{width:14px;height:14px;margin:-2px}
.mom-cap{font:400 15.5px/1.5 var(--f-ui);color:var(--text2);padding:14px 4px 0}
.mom-cap b{color:var(--text);font-weight:600}

/* темы */
.topics{display:flex;flex-direction:column;gap:10px}
.topics .next{margin-top:10px}
.topics-h{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 2px}
.topics-h b{font:600 20px/1 var(--f-display);letter-spacing:-.01em}
.tp{display:flex;gap:14px;padding:16px 16px;align-items:flex-start}
.tp .grow{flex:1;min-width:0;padding-top:1px}
.tp .t{display:flex;align-items:center;gap:8px;font:600 16px/1.25 var(--f-ui)}
.tp .s{font:400 14px/1.4 var(--f-ui);color:var(--text2);margin-top:3px}
.glyph{width:46px;height:46px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--well)}
.g-num{font:600 23px/1 var(--f-display);letter-spacing:-.02em}
.g-dots{display:grid;grid-template-columns:repeat(5,6px);gap:4px 3px}
.g-dots i{width:6px;height:6px;border-radius:3px;background:rgba(231,235,242,.16)}
.g-dots i.on{background:var(--cyan)}
.g-lane{color:var(--green)}
.g-lane .role{width:22px;height:22px}
.foe{width:46px;height:46px;border-radius:13px;box-shadow:0 0 0 2px var(--coral);object-fit:cover}
.item{width:46px;height:46px;border-radius:13px;object-fit:cover;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mini{display:flex;gap:6px;margin-top:10px}
.mini span{display:flex;align-items:center;gap:6px;height:28px;padding:0 9px 0 4px;border-radius:9px;background:rgba(231,235,242,.06);font:600 13px/1 var(--f-ui);white-space:nowrap}
.mini span img{width:28px;height:20px;border-radius:5px;object-fit:cover}
/* шкала смертей */
.tl{position:relative;height:40px;margin-top:12px}
.tl .track{position:absolute;left:0;right:0;top:20px;height:2px;border-radius:1px;background:rgba(231,235,242,.1)}
.tl i{position:absolute;top:16px;width:10px;height:10px;margin-left:-5px;border-radius:5px;background:#7c8598;box-shadow:0 0 0 2.5px var(--cell)}
.tl i.alone{background:var(--orange)}
.tl .br{position:absolute;top:8px;height:6px;border:1.5px solid rgba(249,115,22,.6);border-bottom:0;border-radius:4px 4px 0 0}
.tl .brl{position:absolute;top:-6px;font:600 11.5px/1 var(--f-ui);color:var(--orange);white-space:nowrap;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.tl .ax{position:absolute;top:31px;font:500 11px/1 var(--f-ui);color:var(--text2)}
.tl-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font:400 12.5px/1.3 var(--f-ui);color:var(--text2)}
.tl-key span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tl-key i{width:8px;height:8px;border-radius:4px;flex:none}

/* в следующей игре */
.next{padding:20px 20px 20px;display:flex;align-items:center;gap:28px;box-shadow:inset 0 0 0 1.5px rgba(34,211,238,.28),0 10px 24px -14px rgba(0,0,0,.6)}
.next .kick{color:var(--text2)} .next .kick .d{background:var(--cyan)}
.next p{font:500 21px/1.3 var(--f-display);letter-spacing:-.015em;margin-top:12px}
.next small{display:block;font:400 14px/1.4 var(--f-ui);color:var(--text2);margin-top:8px}
.next .grow{flex:1;min-width:0}

/* как устроен разбор */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.how .tile{padding:24px 24px 26px}
.how .fe{width:64px;height:64px}
.how .glyph-x{width:64px;height:64px;border-radius:20px;background:rgba(34,211,238,.1);color:var(--cyan);display:flex;align-items:center;justify-content:center}
.how .glyph-x .i{width:28px;height:28px}
.how h3{font-size:21px;line-height:1.2;letter-spacing:-.015em;font-weight:600;margin-top:18px}
.how p{font:400 15.5px/1.55 var(--f-ui);color:var(--text2);margin-top:8px}

.band .links2{display:flex;align-items:center;gap:18px;margin-left:auto;flex:none}
.band .links2 .btn{margin-left:0}
.band .links2 a.more{display:flex;align-items:center;gap:7px;font:600 15.5px/1 var(--f-ui);color:var(--text)}
.band .links2 a.more .i{width:16px;height:16px;color:var(--text2)}

@media (max-width:1100px){
  /* 901–1100: карта и темы остаются рядом, колонка тем уже */
  .ex{grid-template-columns:minmax(0,1fr) 360px}
  .mh{padding-left:250px}
  .mh .still{width:210px;height:210px}
  .mh-body{flex-direction:column;align-items:flex-start;gap:18px}
  /* полоса Premium: кнопки уходят второй строкой под текст */
  .band{flex-wrap:wrap}
  .band > div:not(.links2){-webkit-flex:1 1 0;flex:1 1 0;min-width:0}
  .band .links2{margin-left:0;width:100%;padding-left:136px}
}
@media (max-width:900px){
  .steps3{grid-template-columns:1fr;gap:10px;max-width:560px}
  .arr{display:none}
  /* одна колонка: карта момента не шире 640 px, а не на весь экран */
  .ex{grid-template-columns:minmax(0,1fr)}
  .mom,.topics{width:100%;max-width:640px}
  /* «Как это устроено» — строкой: эмодзи слева, текст справа */
  .how{grid-template-columns:minmax(0,1fr);gap:10px;max-width:680px}
  .how .tile{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;padding:16px 16px 18px;align-items:start}
  .how .fe,.how .glyph-x{width:52px;height:52px;grid-row:1 / 3}
  .how .glyph-x{border-radius:16px}
  .how .glyph-x .i{width:24px;height:24px}
  .how h3{margin-top:4px;font-size:18px}
  .how p{font-size:14.5px;margin-top:4px}
}
@media (max-width:760px){
  .steps3{margin-top:40px}
  .mh{flex-direction:column;align-items:flex-start;padding:196px 18px 20px;border-radius:24px}
  /* рендер выше подписи: сапоги не попадают под «Разбор матча · Керри» */
  .mh .still{left:50%;top:-6px;bottom:auto;margin-left:-96px;width:192px;height:192px}   /* 19.10: маска не срезана верхним краем карточки (было top:-22px) */
  .mh .mfade{background:linear-gradient(180deg,rgba(13,20,33,.1) 0%,rgba(13,20,33,.5) 36%,rgba(13,20,33,.95) 56%)}
  .mh h3{font-size:34px}
  .vs small{width:auto;margin-right:4px}
  .vs img{width:36px;height:36px}
  .main{padding:22px 18px}
  .main-q{font-size:23px}
  .good{font-size:15px}
  .mom{padding:12px 10px 14px}
  .legend{gap:9px;padding:8px 10px;font-size:11.5px}
  .dot{width:24px;height:24px;margin:-12px 0 0 -12px}
  .dot.me{width:30px;height:30px;margin:-15px 0 0 -15px}
  .ghost{width:20px;height:20px;margin:-10px 0 0 -10px;padding:2px}
  .gt{font-size:10.5px;margin-top:11px}
  .next{flex-direction:column;align-items:flex-start;padding:22px 18px}
  .next p{font-size:20px}
  .band .links2{flex-direction:column;align-items:stretch;width:100%;padding-left:0}
  .band .links2 a.more{justify-content:center;padding:8px 0}
}
/* 21.10 (аудит): в шаге 1 — открытая история матчей */
.stp small a{color:var(--cta);font-weight:600;white-space:nowrap}
/* ---------- 21.10, проход «чего не хватает» (ничего не убрано) ---------- */
.prem-c{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:7px;background:rgba(34,211,238,.1);font:600 12px/1 var(--f-ui);color:var(--cyan)}
.prem-c i{width:6px;height:6px;border-radius:3px;background:var(--cyan)}
.how .tile p a{color:var(--cta);font-weight:600;white-space:nowrap}

/* style="" из макета → классы (inline-стиль сильнее любого правила — отсюда !important) */
.u-0760a5f8{left:86% !important;top:60% !important}
.u-0c42c185{object-position:50% 30% !important}
.u-1936eff4{left:78% !important;top:71% !important}
.u-2a143ef7{left:55% !important;top:62% !important}
.u-3890821c{left:19% !important;top:32% !important}
.u-441463a2{object-position:30% 30% !important}
.u-45f0143d{left:56.7% !important}
.u-480eec87{background:var(--coral) !important}
.u-48d8d65b{object-position:40% 30% !important}
.u-4fa335db{left:40.1% !important}
.u-60516728{object-position:38% 30% !important}
.u-61b4aadf{left:89% !important;top:44% !important}
.u-6765dc71{-webkit-mask-image:url(/app/assets/roles/pos1.png) !important;mask-image:url(/app/assets/roles/pos1.png) !important}
.u-67ebf8ee{left:57% !important;top:33% !important}
.u-6aca2603{left:0 !important}
.u-6f545f48{object-position:55% 30% !important}
.u-7490b6ba{left:54.9% !important}
.u-804275ba{left:34% !important}
.u-811a1309{padding-top:0 !important}
.u-82c8bcf4{left:76% !important;top:50% !important}
.u-8fa86b64{background:#7c8598 !important}
.u-92b5be5e{left:47% !important;top:50% !important}
.u-934e259d{left:90% !important;top:85% !important}
.u-95e3a863{object-position:44% 25% !important}
.u-97f08b71{right:0 !important}
.u-9bad4bbc{background:var(--orange) !important}
.u-a4ac028b{left:82% !important}
.u-a71de42f{object-position:55% 25% !important}
.u-cf127951{left:62.4% !important}
.u-d101edbf{object-position:45% 30% !important}
.u-d7ac94cb{left:93% !important;top:70% !important}
.u-d7cf57ec{left:37% !important;top:62% !important}
.u-d8ad33f0{left:46.3% !important;width:17.1% !important}
.u-d8c44da2{background:var(--amber) !important}
.u-db0aace3{left:71% !important;top:15% !important}
.u-e078168d{left:47.3% !important}
.u-ed2d26e0{background:var(--cyan) !important}
.u-f308dcba{color:var(--text2) !important}