/* FILE: site/src/css/site.css — M-SITE: живые блоки сайта (онлайн-матчи, турниры, сетка, окно серии, заметки).
   Все классы с префиксом tr- (их ставит h() в site/src/js/core.js) — с классами холста «Инея» (.row, .card, .live, .chip)
   не пересекаются; токены — свои --tr-* со значениями «Инея». Вёрстка страниц, шапка и подвал — CSS холста (canvas-*.css). */
:root{--tr-bg:#0d1421;--tr-bg-elev:#131c2c;--tr-card:#161e2e;--tr-card-top:#1c2538;--tr-cell:#1b2437;--tr-well:#101827;
  --tr-border:#1f2a3f;--tr-border-hi:#2d3a55;--tr-hair:rgba(231,235,242,.07);--tr-text:#e7ebf2;--tr-text2:#8a93a6;--tr-muted:#5d6478;
  --tr-label:#b7bfcc;--tr-cyan:#22d3ee;--tr-cta:#4a9eed;--tr-amber:#fbbf24;--tr-green:#22c55e;--tr-coral:#ff7a6e;--tr-red:#ef4444;
  --tr-r-sheet:30px;--tr-r-card:22px;--tr-r-tile:16px;--tr-r-ctl:14px;--tr-r-chip:9px;
  --tr-f-display:'Geologica','Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --tr-f-ui:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--tr-ease:cubic-bezier(.33,1,.68,1);--tr-gut:24px}
@media (max-width:760px){:root{--tr-gut:16px}}
.tr-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:8px;
  overflow:hidden;background:var(--tr-well);font:700 9px/1 var(--tr-f-ui);color:var(--tr-text2);text-transform:uppercase;letter-spacing:.02em}
.tr-mark img{display:block;width:100%;height:100%;object-fit:contain}
.tr-mark-sm{width:20px;height:20px;border-radius:6px;font-size:8px}
.tr-mark-lg{width:40px;height:40px;border-radius:11px;font-size:11px}
.tr-tn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tr-coral);flex:none;
  box-shadow:0 0 0 0 rgba(255,122,110,.6);animation:tr-pulse 1.8s ease-out infinite}
@keyframes tr-pulse{0%{box-shadow:0 0 0 0 rgba(255,122,110,.55)}80%,100%{box-shadow:0 0 0 8px rgba(255,122,110,0)}}
.tr-live{display:block;padding:16px;text-decoration:none;color:inherit;box-shadow:inset 0 0 0 1px rgba(255,122,110,.3),0 18px 40px -28px rgba(2,6,14,.9)}
a.tr-live:hover{box-shadow:inset 0 0 0 1px rgba(255,122,110,.55),0 18px 40px -28px rgba(2,6,14,.9)}
.tr-live-h{display:flex;align-items:center;gap:8px;font:600 13px/1.3 var(--tr-f-ui);color:var(--tr-text2);min-width:0}
.tr-live-h .tr-tn{flex:1}
.tr-live-clock{margin-left:auto;color:var(--tr-text);flex:none}
.tr-vs{display:flex;align-items:center;gap:10px;margin-top:12px}
.tr-side{display:flex;align-items:center;gap:9px;flex:1;min-width:0;font:600 16px/1.25 var(--tr-f-ui)}
.tr-side-r{justify-content:flex-end;text-align:right}
.tr-tn-tag{display:none}
@media (max-width:479px){.tr-side .tr-tn-full{display:none}.tr-side .tr-tn-tag{display:block}}
.tr-score{flex:none;min-width:58px;text-align:center;font:700 24px/1 var(--tr-f-display)}
.tr-live-s{margin-top:10px;font-size:14px;line-height:1.4;color:var(--tr-text2)}
.tr-picks-row{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.tr-picks{display:flex;gap:3px}
.tr-picks-r{justify-content:flex-end}
.tr-pick{display:block;width:26px;height:26px;border-radius:7px;background:var(--tr-well);object-fit:cover}
@media (min-width:420px){.tr-pick{width:30px;height:30px}}
.tr-spark{display:block;width:100%;height:44px;margin-top:12px}
.tr-spark-mid{stroke:var(--tr-hair);stroke-width:1}
.tr-spark-r{fill:rgba(34,211,238,.18)}
.tr-spark-d{fill:rgba(255,122,110,.18)}
.tr-spark-l{fill:none;stroke:var(--tr-label);stroke-width:1.5;stroke-linejoin:round}
.tr-spark-key{display:flex;justify-content:space-between;margin-top:4px;font-size:12px;color:var(--tr-muted)}
.tr-tcard{display:flex;flex-direction:column;gap:12px;padding:18px;text-decoration:none;color:inherit;min-width:0}
a.tr-tcard:hover{box-shadow:inset 0 0 0 1px var(--tr-border-hi),0 18px 40px -28px rgba(2,6,14,.9)}
.tr-tcard-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tr-tcard h3{font-size:19px;line-height:1.25;font-weight:700}
.tr-tcard-meta{font-size:14px;color:var(--tr-text2)}
.tr-tcard-next{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;font-size:14px;color:var(--tr-label);
  box-shadow:inset 0 1px 0 var(--tr-hair);min-width:0}
.tr-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;
  font:600 12px/1 var(--tr-f-ui);color:var(--tr-text2);background:rgba(231,235,242,.06);white-space:nowrap}
.tr-chip-live{color:var(--tr-coral);background:rgba(255,122,110,.12)}
.tr-chip-on{color:var(--tr-cyan);background:rgba(34,211,238,.12)}
.tr-chip-soon{color:var(--tr-amber);background:rgba(251,191,36,.1)}
@media (min-width:720px){.tr-thead h1{font-size:44px}}
.tr-stages{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1*var(--tr-gut)) 16px;padding:2px var(--tr-gut) 4px;scrollbar-width:none}
.tr-stages::-webkit-scrollbar{display:none}
.tr-stage-b{flex:none;height:38px;padding:0 15px;border:0;border-radius:12px;cursor:pointer;font:600 14px/1 var(--tr-f-ui);
  color:var(--tr-text2);background:rgba(231,235,242,.06)}
.tr-stage-b:hover{color:var(--tr-text)}
.tr-stage-b[aria-selected="true"]{color:#06121d;background:var(--tr-text)}
.tr-br{overflow-x:auto;margin:0 calc(-1*var(--tr-gut));padding:0 var(--tr-gut) 8px;-webkit-overflow-scrolling:touch}
.tr-lane{margin-bottom:22px}
.tr-lane-t{margin:0 2px 10px;font:700 13px/1.3 var(--tr-f-ui);color:var(--tr-label);text-transform:uppercase;letter-spacing:.05em}
.tr-cols{display:flex;gap:14px;align-items:stretch;width:max-content}
.tr-col{display:flex;flex-direction:column;gap:8px;width:208px;flex:none}
@media (max-width:479px){.tr-col{width:180px}}
.tr-col-t{margin:0 2px;font:600 13px/1.3 var(--tr-f-ui);color:var(--tr-text2)}
.tr-col-b{display:flex;flex-direction:column;justify-content:space-around;gap:10px;flex:1}
.tr-node{display:flex;flex-direction:column;gap:5px;width:100%;padding:10px 12px;border:0;border-radius:14px;cursor:pointer;
  text-align:left;background:var(--tr-cell);box-shadow:inset 0 0 0 1px var(--tr-border)}
.tr-node:hover{box-shadow:inset 0 0 0 1px var(--tr-border-hi)}
.tr-node-live{box-shadow:inset 0 0 0 1px rgba(255,122,110,.55)}
.tr-row{display:flex;align-items:center;gap:7px;min-width:0;font:500 14px/1.3 var(--tr-f-ui);color:var(--tr-text)}
.tr-row .tr-w{margin-left:auto;padding-left:6px;font-weight:700}
.tr-row.tr-win{font-weight:700}
.tr-row.tr-lose{color:var(--tr-text2)}
.tr-row.tr-tbd{color:var(--tr-muted)}
.tr-node-s{font-size:12px;line-height:1.3;color:var(--tr-text2)}
.tr-table{padding:6px 0;margin-bottom:14px}
.tr-tr{display:flex;align-items:center;gap:10px;padding:10px 16px;font:500 15px/1.3 var(--tr-f-ui)}
.tr-th{font:600 13px/1.3 var(--tr-f-ui);color:var(--tr-text2)}
.tr-tp{width:22px;flex:none;color:var(--tr-text2);text-align:right}
.tr-tt{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.tr-tc{width:64px;flex:none;text-align:right}
.tr-adv .tr-tp{color:var(--tr-cyan)}
.tr-cut{box-shadow:inset 0 1px 0 var(--tr-border-hi)}
.tr-tnote{padding:8px 16px 10px;font-size:13px;line-height:1.4;color:var(--tr-text2)}
.tr-sers{padding:4px 0}
.tr-ser{display:grid;grid-template-columns:1fr;gap:5px;width:100%;padding:12px 16px;border:0;background:transparent;cursor:pointer;
  text-align:left;box-shadow:inset 0 -1px 0 var(--tr-hair)}
.tr-ser:last-child{box-shadow:none}
.tr-ser:hover{background:rgba(231,235,242,.03)}
.tr-ser-live{box-shadow:inset 3px 0 0 var(--tr-coral),inset 0 -1px 0 var(--tr-hair)}
.tr-ser-w{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tr-text2)}
.tr-ser-w .tr-bo{margin-left:auto}
@media (min-width:720px){
  .tr-ser{grid-template-columns:170px 1fr 1fr;align-items:center;gap:18px}
  .tr-ser-w .tr-bo{margin-left:0}
}
.tr-prize{padding:6px 0}
.tr-prize .tr-tr{font-size:15px}
.tr-prize .tr-tc{width:auto;min-width:96px}
.tr-prize-pct{color:var(--tr-text2);min-width:56px}
.tr-streams{display:grid;gap:8px}
@media (min-width:720px){.tr-streams{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tr-stream{display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;color:inherit}
.tr-stream:hover{box-shadow:inset 0 0 0 1px var(--tr-border-hi)}
.tr-stream-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--tr-well);color:var(--tr-cyan);flex:none}
.tr-stream-ic svg{width:18px;height:18px}
.tr-stream-t{font-weight:600}
.tr-stream-s{font-size:13px;color:var(--tr-text2)}
.tr-more-b{border:0;cursor:pointer;background:transparent;color:var(--tr-cyan);font:500 15px/1 var(--tr-f-ui);padding:12px 2px}
.tr-scrim{position:fixed;left:0;right:0;top:0;bottom:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,8,16,.64);opacity:0;transition:opacity .2s var(--tr-ease)}
.tr-scrim.tr-open{opacity:1}
@media (min-width:720px){.tr-scrim{align-items:center}}
.tr-dlg{width:100%;max-width:520px;max-height:86vh;overflow:auto;padding:22px 20px 24px;border-radius:var(--tr-r-sheet) var(--tr-r-sheet) 0 0;
  background:var(--tr-bg-elev);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 -20px 60px -20px rgba(0,0,0,.8);
  transform:translateY(24px);transition:transform .28s var(--tr-ease)}
.tr-scrim.tr-open .tr-dlg{transform:translateY(0)}
@media (min-width:720px){.tr-dlg{border-radius:var(--tr-r-sheet)}}
.tr-dlg-h{display:flex;align-items:flex-start;gap:12px}
.tr-dlg-h h2{font-size:21px;line-height:1.25;font-weight:700;flex:1}
.tr-dlg-x{flex:none;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;background:rgba(231,235,242,.08);color:var(--tr-text)}
.tr-dlg-sub{margin-top:4px;color:var(--tr-text2);font-size:14px}
.tr-dlg-maps{margin-top:16px;padding:4px 0}
.tr-dlg-acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.tr-dlg p.tr-dlg-p{margin-top:16px;color:var(--tr-text2)}
@media (min-width:720px){.tr-foot-in{flex-direction:row;align-items:flex-start;justify-content:space-between}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.tr-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 18px;border:0;
  border-radius:var(--tr-r-ctl);font:600 15px/1 var(--tr-f-ui);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .12s var(--tr-ease),opacity .12s var(--tr-ease)}
.tr-btn:active{transform:scale(.97)}
.tr-btn svg{width:18px;height:18px;flex:none}
.tr-btn-primary{color:#06121d;background:linear-gradient(180deg,#36dbf1,var(--tr-cta));
  box-shadow:0 10px 28px -10px rgba(34,211,238,.55)}
.tr-btn-tonal{color:var(--tr-text);background:rgba(231,235,242,.07);box-shadow:inset 0 0 0 1px rgba(231,235,242,.08)}
.tr-btn-tonal:hover{background:rgba(231,235,242,.1)}
.tr-btn-lg{min-height:52px;padding:0 24px;font-size:16px;border-radius:16px}
.tr-btn-sm{min-height:36px;padding:0 13px;font-size:14px;border-radius:12px}
.tr-sec{padding:28px 0}
.tr-sec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.tr-sec-h h2{font-size:24px;line-height:1.2;font-weight:700}
.tr-sec-h .tr-more{margin-left:auto;font:500 15px/1 var(--tr-f-ui);color:var(--tr-cyan);text-decoration:none;white-space:nowrap}
.tr-sec-h .tr-more:hover{text-decoration:underline}
.tr-sec-sub{margin:-8px 0 16px;color:var(--tr-text2);font-size:15px}
.tr-card{background:linear-gradient(180deg,var(--tr-card-top),var(--tr-card));border-radius:var(--tr-r-card);
  box-shadow:inset 0 0 0 1px var(--tr-border),0 18px 40px -28px rgba(2,6,14,.9)}
.tr-grid{display:grid;gap:12px}
@media (min-width:1024px){.tr-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:720px) and (max-width:1023px){.tr-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tr-note{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 14px;border-radius:14px;
  font-size:14px;line-height:1.4;color:var(--tr-amber);background:rgba(251,191,36,.08);box-shadow:inset 0 0 0 1px rgba(251,191,36,.22)}
.tr-empty{padding:22px;text-align:left}
.tr-empty h3{font-size:18px;font-weight:700}
.tr-empty p{margin-top:6px;color:var(--tr-text2);font-size:15px}
.tr-empty .tr-btn{margin-top:14px}
.tr-fresh{margin-top:10px;font-size:13px;line-height:1.4;color:var(--tr-text2)}
.tr-skel{height:92px;border-radius:var(--tr-r-card);background:linear-gradient(90deg,var(--tr-card) 0%,var(--tr-card-top) 50%,var(--tr-card) 100%);
  background-size:200% 100%;animation:tr-skel 1.4s ease-in-out infinite}
@keyframes tr-skel{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- основа живых блоков: карточка, кнопка, секции, сетка ---------- */
.tr-card{background:linear-gradient(180deg,var(--tr-card-top),var(--tr-card));border-radius:var(--tr-r-card);
  box-shadow:inset 0 0 0 1px var(--tr-border),0 18px 40px -28px rgba(2,6,14,.9)}
.tr-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 18px;border:0;
  border-radius:var(--tr-r-ctl);font:600 15px/1 var(--tr-f-ui);text-decoration:none;cursor:pointer;white-space:nowrap;color:var(--tr-text)}
.tr-btn-primary{color:#06121d;background:var(--tr-cta);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -12px rgba(0,0,0,.7)}
.tr-btn-tonal{background:rgba(231,235,242,.07);box-shadow:inset 0 0 0 1px rgba(231,235,242,.08)}
.tr-grid{display:grid;gap:12px}
@media (min-width:720px){.tr-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.tr-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.tr-sec{padding:36px 0 8px}}
.tr-sec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.tr-sec-h h2{font:700 24px/1.2 var(--tr-f-display);letter-spacing:-.015em}
@media (min-width:720px){.tr-sec-h h2{font-size:28px}}
.tr-wrap-note{padding-top:18px}

/* ---------- шапка холста с седьмым разделом «Турниры» (03.11): в один ряд от 1201 px, «Профиль» — иконкой;
   уже — разделы вторым рядом с прокруткой (как у холста ниже 1080 px) ---------- */
.me-btn{width:44px;padding:0;justify-content:center}
.me-btn span{display:none}
.links a{padding:0 11px 0 8px}
@media (max-width:1200px){
  .nav{padding:0 8px 6px 10px}
  .links{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:1px solid rgba(255,255,255,.06);padding-top:6px}
  .links::-webkit-scrollbar{display:none}
  .links.fr{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 80%,transparent 100%)}
  .links.fl{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%)}
  .links.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 80%,transparent 100%)}
}

/* ---------- живые страницы холста (pg-*): списки, поле поиска, скелетон (03.11) ---------- */
.pg-pop{position:relative}
.pg-pop .cap-g{cursor:pointer}
.pg-menu{position:absolute;left:0;top:50px;z-index:60;min-width:230px;max-height:60vh;overflow:auto;padding:6px;border-radius:18px;
  background:#131c2c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 24px 48px -16px rgba(0,0,0,.8)}
.pg-menu a{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;border-radius:12px;font:500 14.5px/1 var(--tr-f-ui);
  color:var(--tr-text);cursor:pointer}
.pg-menu a:hover,.pg-menu a[aria-selected="true"]{background:rgba(231,235,242,.08)}
.pg-menu img{width:30px;height:30px}
.pg-input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--tr-text);font:500 15px/1 var(--tr-f-ui)}
.pg-input::placeholder{color:var(--tr-text2)}
.pg-input::-webkit-search-cancel-button{opacity:.6}
.search:focus-within{box-shadow:inset 0 0 0 1px rgba(74,158,237,.6)}
.seg-g a,.roles-s a{cursor:pointer}
.pg-skel{height:52px;margin:8px 0;border-radius:12px;background:linear-gradient(90deg,var(--tr-card) 0%,var(--tr-card-top) 50%,var(--tr-card) 100%);
  background-size:200% 100%;animation:tr-skel 1.4s ease-in-out infinite}
.pg-cell-msg{padding:28px 16px;color:var(--tr-text2);font:400 15px/1.5 var(--tr-f-ui);text-align:center}
.c-hero{color:inherit}
a.c-hero:hover .nm{text-decoration:underline}
.c-sv{color:var(--tr-text2);font:400 13px/1 var(--tr-f-ui);text-align:right}
.tier.pg-svit .ax-h span{visibility:hidden}
.mv{color:inherit}
.pg-mt{margin-top:14px}
.pg-twr{display:block;margin-top:6px;font:500 12px/1.2 var(--tr-f-ui);color:var(--tr-text2)}
.tbox.pick .pg-twr{color:var(--tr-amber)}
.pg-guide{margin-top:14px;display:flex;flex-direction:column;gap:10px;font:400 14.5px/1.55 var(--tr-f-ui);color:rgba(231,235,242,.86);white-space:pre-line}
.pg-steam{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.mu-row,.pr{color:inherit}
.o1 .card-h + .dr{margin-top:18px}
/* метка «пример» у иллюстраций главной (разбор, диалог, пик) — данные там условные */
.pg-ex{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:8px;border-radius:6px;background:rgba(231,235,242,.1);
  color:var(--tr-label);font:600 11px/1 var(--tr-f-ui);letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.pg-ex-r{margin-left:auto;order:3}
/* кнопки на картинках-примерах (диалог бота на главной и в пати, «Продлить») ничего не делают: не вдавливаются при нажатии */
.ikb[aria-hidden="true"],.lc-foot a[aria-hidden="true"]{cursor:default}
.ikb[aria-hidden="true"]:active{transform:none}
.dock.pg-dock7{grid-template-columns:repeat(7,minmax(0,1fr))}
.dock.pg-dock7 a{gap:9px;padding-right:8px}
@media (max-width:1240px){.dock.pg-dock7{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.dock.pg-dock7{grid-template-columns:1fr 1fr}}
a.tr{color:inherit}
/* лента без картинок с CDN Telegram (CSP: только свои адреса) */
.pg-lead{display:block}
.pg-lead .lp-body{padding:26px 26px 24px}
.pg-post{display:block}
.pg-post .bd{padding:20px}
.lead-post .ph,.post .ph{margin-left:8px}
/* знак Свита — эмблема канала, как в аппе (FrMark: .fr-mark-pic + золотое кольцо .fr-mark-svit) */
.mark-plate{overflow:hidden;background:#0f1622;box-shadow:0 0 0 1.5px rgba(251,191,36,.55),0 4px 12px -4px rgba(2,6,14,.6)}
.mark-plate .svit-img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
img[data-still]{cursor:pointer}
/* 03.11 (владелец: «анимаций не меньше, чем в боте») — движение «Инея», site/src/js/motion.js. Только transform/opacity. */
.pg-rv{opacity:0;transform:translateY(16px)}
.pg-rv.pg-in{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.33,1,.68,1),transform .55s cubic-bezier(.05,.7,.1,1)}
html.pg-still .pg-rv{opacity:1;transform:none}
/* нажатие: вдавливание 90 мс, возврат 220 мс без отскока */
.btn,.go,.dock a,.seg a,.seg-g a,.sel,.cap-g,.gh,.sl,.play,.vplay,.ikb,.more,.roles-s a,.stage-b,.pg-menu a,.pg-qrb,.raf,.plan,.mv,.hx-items > div,.sg{
  transition:transform .22s cubic-bezier(.33,1,.68,1)}
.btn:active,.go:active,.dock a:active,.seg a:active,.seg-g a:active,.sel:active,.cap-g:active,.gh:active,.sl:active,.play:active,
.vplay:active,.ikb:active,.more:active,.roles-s a:active,.stage-b:active,.pg-menu a:active,.pg-qrb:active,.raf:active,.mv:active{
  transform:scale(.96);transition-duration:.09s}
.go{display:inline-flex}
.go .i{transition:transform .22s cubic-bezier(.33,1,.68,1)}
@media (hover:hover){
  .go:hover .i{transform:translateX(4px)}
  .dock a .fe,.kick-e .fe{transition:transform .28s cubic-bezier(.33,1,.68,1)}
  .dock a:hover .fe{transform:translateY(-3px) scale(1.08)}
  .plan:hover,.hx-items > div:hover{transform:translateY(-3px)}
  .gh:hover .ph,.c-hero:hover img,.tr:hover .c-hero img{transform:scale(1.06)}
  .gh .ph,.c-hero img{transition:transform .28s cubic-bezier(.33,1,.68,1)}
}
/* сплэши героев в квадратах — без растяжения (иконки в примерах пика и разбора) */
img[src*="/heroes/splash/"]{object-fit:cover}
/* момент на мини-карте: главная смерть — череп у иконки героя, минута под ней, круг удара */
.map .pg-ring{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 0 0 3px rgba(249,115,22,.9),0 0 18px rgba(249,115,22,.55)}
.map .ghost.pg-dm{margin:-27px 0 0 2px;width:22px;height:22px;padding:3px;box-shadow:0 0 0 1.5px rgba(249,115,22,.85)}
.map .gt.pg-dm{margin-top:25px;color:#fdba74}
@media (max-width:760px){
  .map .pg-ring{width:30px;height:30px;margin:-15px 0 0 -15px}
  .map .ghost.pg-dm{margin:-22px 0 0 1px;width:18px;height:18px;padding:2px}
  .map .gt.pg-dm{margin-top:19px}
}
.map .play{cursor:pointer}

/* ---------- 04.11 (волна сайта): доступность, телефон, ошибки, новые блоки пользы. Движение — только transform/opacity ---------- */
/* атрибут hidden сильнее display классов холста (.roles-s{display:flex} и т. п.): скрытый блок не оставляет пустую плашку */
[hidden]{display:none!important}
/* «К содержанию»: первая ссылка страницы, видна при фокусе */
.skip-link{position:absolute;left:12px;top:12px;z-index:200;padding:12px 16px;border-radius:12px;background:var(--tr-text);color:#0d1421;
  font:600 15px/1 var(--tr-f-ui);transform:translateY(-200%);opacity:0;transition:transform .15s var(--tr-ease),opacity .15s}
.skip-link:focus{transform:none;opacity:1}
main:focus{outline:0}
/* кольцо фокуса: ряд разделов прокручивается — кольцо рисуем внутри ссылки, чтобы контейнер его не срезал */
.links{padding-bottom:3px}
.links a:focus-visible{outline:2px solid var(--tr-cta);outline-offset:-2px}
:focus-visible{outline-color:var(--tr-cta)}
/* цели касания ≥40 px без смены вида: зона нажатия у строчных ссылок шире самой надписи */
.crumbs a,.go,.go-n,.all-h,.more-l,.lnk,.f-col a{position:relative}
.crumbs a::after,.go::after,.go-n::after,.all-h::after,.more-l::after,.lnk::after{content:'';position:absolute;left:-6px;right:-6px;top:-13px;bottom:-13px}
.f-col a::after{content:'';position:absolute;left:0;right:0;top:-6px;bottom:-6px}
/* safe-area (viewport-fit=cover): в горизонтальной ориентации шапка и текст не уходят под вырез */
@supports (padding:max(0px)){
  .nav{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
  .wrap{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
  .footer{padding-bottom:max(40px,env(safe-area-inset-bottom))}
  @media (max-width:760px){
    .nav{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right))}
    .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  }
}
/* меню ранга — в пределах экрана (JS rankMenu ещё и прижимает к краю) */
.pg-menu{max-width:calc(100vw - 32px)}
/* ждём новый ответ: старые строки стоят приглушёнными */
.pg-wait{opacity:.55;transition:opacity .2s}
/* ошибка загрузки: что, почему, «Повторить» */
.pg-fail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:6px 0;padding:14px 16px;border-radius:14px;text-align:left;
  background:rgba(255,122,110,.07);box-shadow:inset 0 0 0 1px rgba(255,122,110,.22);color:var(--tr-label);font:400 14.5px/1.45 var(--tr-f-ui)}
.pg-fail p{flex:1 1 220px;margin:0}
.pg-retry{min-height:40px;padding:0 16px;border:0;border-radius:12px;background:rgba(231,235,242,.1);color:var(--tr-text);
  font:600 14px/1 var(--tr-f-ui);cursor:pointer;transition:transform .22s var(--tr-ease)}
.pg-retry:active{transform:scale(.96);transition-duration:.09s}
.pg-pnote{margin-top:8px}
.live.pg-off{opacity:.3;animation:none}
.c-tx{display:block;min-width:0}
.nm-t{min-width:0}

/* H2 ось минут (карточка героя и «герой дня» на главной): точка — середина, полоса — у половины игроков, черта — p90 */
.mx{--mx-n:4;margin-top:16px}
.mx-rows{display:flex;flex-direction:column;gap:4px}
.mx-row,.mx-ax{display:grid;grid-template-columns:40px minmax(0,150px) minmax(0,1fr) 56px;align-items:center;column-gap:12px}
.mx-row{min-height:42px}
.mx-ic{display:block;width:40px;height:30px}
.mx-ic img{display:block;width:40px;height:30px;border-radius:7px;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 6px 12px -6px rgba(0,0,0,.7)}
.mx-nm{font:500 14px/1.2 var(--tr-f-ui);color:var(--tr-text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mx-tr{position:relative;display:block;height:30px;
  background:repeating-linear-gradient(90deg,rgba(231,235,242,.09) 0,rgba(231,235,242,.09) 1px,transparent 1px,transparent calc(100% / var(--mx-n)))}
.mx-tr::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:rgba(231,235,242,.07)}
.mx-band{position:absolute;top:50%;height:10px;margin-top:-5px;border-radius:5px;background:linear-gradient(90deg,rgba(251,191,36,.22),rgba(251,191,36,.48))}
.mx-late{position:absolute;top:50%;width:2px;height:14px;margin:-7px 0 0 -1px;border-radius:1px;background:rgba(251,191,36,.5)}
.mx-dot{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--tr-amber);box-shadow:0 0 0 3px #161e2e}
.mx-m{font:600 14px/1 var(--tr-f-display);color:var(--tr-text);text-align:right;white-space:nowrap}
.mx-ax{margin-top:6px}
.mx-axl{font:500 11.5px/1 var(--tr-f-ui);color:var(--tr-muted);text-align:right}
.mx-axt{position:relative;display:block;height:14px}
.mx-axt span{position:absolute;top:0;transform:translateX(-50%);font:500 11.5px/1 var(--tr-f-ui);color:var(--tr-text2)}
.mx-cap{margin-top:12px}
.mx-c .mx-row,.mx-c .mx-ax{grid-template-columns:36px minmax(0,120px) minmax(0,1fr) 50px}
/* телефон: название над шкалой — шкала на всю ширину строки, разброс виден */
@media (max-width:480px){
  .mx-row,.mx-c .mx-row{grid-template-columns:32px minmax(0,1fr) 46px;grid-template-areas:"ic nm m" "ic tr m";column-gap:10px;row-gap:3px;padding:3px 0}
  .mx-ic{grid-area:ic}
  .mx-nm{grid-area:nm;font-size:13px;-webkit-line-clamp:1}
  .mx-tr{grid-area:tr;height:20px}
  .mx-m{grid-area:m;font-size:13px}
  .mx-ic,.mx-ic img{width:32px;height:24px}
  .mx-dot{width:10px;height:10px;margin:-5px 0 0 -5px}
  .mx-ax,.mx-c .mx-ax{grid-template-columns:32px minmax(0,1fr) 46px;column-gap:10px}
  .mx-axl{display:none}
}

/* H3 «чаще берут против» */
.sx-vs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sx-f{min-height:40px;padding:0 12px;border:0;border-radius:11px;background:rgba(231,235,242,.07);color:var(--tr-label);font:500 13.5px/1 var(--tr-f-ui);
  cursor:pointer;transition:transform .22s var(--tr-ease)}
.sx-f:active{transform:scale(.96)}
.sx-f[aria-pressed="true"]{background:var(--tr-text);color:#0d1421}
.sx{display:flex;flex-direction:column;margin-top:10px}
.sx-row{display:flex;align-items:center;gap:12px;min-height:58px;transition:opacity .25s var(--tr-ease)}
.sx-row + .sx-row{border-top:1px solid var(--tr-hair)}
.sx-row.dim{opacity:.35}
.sx-ic img{display:block;width:46px;height:34px;border-radius:8px;object-fit:cover}
.sx-row b{display:block;font:600 15px/1.25 var(--tr-f-ui)}
.sx-row small{display:block;font:400 13px/1.35 var(--tr-f-ui);color:var(--tr-text2);margin-top:3px}

/* H5 порядок прокачки + бледные клетки сетки топ-игроков */
.so{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin-top:16px}
.so-g{display:flex;align-items:center;gap:6px}
.so-it{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:12px;background:rgba(231,235,242,.05)}
.so-it img{width:32px;height:32px;border-radius:8px}
/* иконки способности нет в ассетах — буквы имени на её месте */
.ab span.ab-x,.so-it span.ab-x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:9px;
  background:rgba(231,235,242,.08);box-shadow:inset 0 0 0 1px rgba(231,235,242,.12);color:var(--tr-text2);font:600 12px/1 var(--tr-f-ui);overflow:visible}
.so-it span.ab-x{width:32px;height:32px;border-radius:8px}
@media (max-width:760px){.ab span.ab-x{width:30px;height:30px;border-radius:8px;font-size:11px}}
.so-it b{display:block;font:600 13.5px/1.2 var(--tr-f-ui)}
.so-it small{display:block;font:400 12px/1.2 var(--tr-f-ui);color:var(--tr-text2);margin-top:2px}
.so-ar .i{display:block;width:14px;height:14px;color:var(--tr-muted)}
.so + .cap{margin-top:12px}
.sk-h{margin-top:22px;padding-top:18px;border-top:1px solid var(--tr-hair)}
.c.on.lo{opacity:.42}

/* H6 таланты: доля выбора */
.tsh{display:flex;align-items:center;gap:8px;margin-top:8px}
.tsh-t{flex:1;min-width:24px;height:4px;border-radius:2px;background:rgba(231,235,242,.08);overflow:hidden}
.tsh-b{display:block;height:100%;border-radius:2px;background:rgba(231,235,242,.45)}
.tbox.pick .tsh-b{background:var(--tr-amber)}
.tsh small{font:600 12px/1 var(--tr-f-ui);color:var(--tr-text2);white-space:nowrap}
.tbox.pick .tsh small{color:var(--tr-amber)}
.tl-wr{margin:-3px 0 3px;text-align:center;font:400 12px/1.3 var(--tr-f-ui);color:var(--tr-muted)}

/* H4 линия и «сильнее вместе» */
.ln-row{display:grid;grid-template-columns:40px minmax(0,1fr) 56px 74px;align-items:center;gap:10px;min-height:54px;color:inherit}
.ln-row + .ln-row{border-top:1px solid var(--tr-hair)}
.ln-row img{display:block;width:40px;height:40px;border-radius:11px;object-fit:cover}
.ln-row .nm{font:600 14.5px/1.2 var(--tr-f-ui);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln-row .v{text-align:right}
.ln-row .v b{display:block;font:600 16px/1 var(--tr-f-display)}
.ln-row .v small{display:block;font:400 11.5px/1.2 var(--tr-f-ui);color:var(--tr-text2);margin-top:3px;white-space:nowrap}
.mu-h.hard i{background:var(--tr-coral)}
.mu-h.easy i{background:var(--tr-green)}
.pg-dv{display:block;position:relative;height:8px}
.pg-dv::before{content:'';position:absolute;left:0;right:0;top:3px;height:2px;border-radius:1px;background:rgba(231,235,242,.08)}
.pg-dv::after{content:'';position:absolute;left:50%;top:-5px;bottom:-5px;width:1px;margin-left:-.5px;background:rgba(231,235,242,.3)}
.pg-dv i{position:absolute;top:0;height:8px;border-radius:4px}
.pg-dv i.p{left:50%;background:var(--tr-green)}
.pg-dv i.n{right:50%;background:var(--tr-coral)}
.mu-row.syn img{box-shadow:0 0 0 2px rgba(74,158,237,.6)}
.mu-row.syn .v b{color:var(--tr-cta)}

/* H7 неделя: шкала 45–55 % всегда одна */
.ht-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:14px}
.ht-top b{font:700 26px/1 var(--tr-f-display);letter-spacing:-.02em}
.ht-top span{font:400 13.5px/1.3 var(--tr-f-ui);color:var(--tr-text2)}
.ht{margin-top:12px}
.ht-ch{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:104px auto;gap:6px 8px}
.ht-y{display:flex;flex-direction:column;justify-content:space-between;padding:2px 0;font:500 11px/1 var(--tr-f-ui);color:var(--tr-muted);text-align:right}
.ht-plot{position:relative;height:104px;overflow:hidden;border-radius:8px}
.ht-svg,.ht-dots{position:absolute;left:6px;right:6px;top:6px;bottom:6px}
.ht-svg{width:calc(100% - 12px);height:calc(100% - 12px)}
.ht-g{stroke:rgba(231,235,242,.07);stroke-width:1}
.ht-mid{stroke:rgba(231,235,242,.24);stroke-width:1;stroke-dasharray:3 4}
.ht-l{fill:none;stroke:var(--tr-cta);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ht-p{stroke-dasharray:4 5;opacity:.75}
.ht-dots i{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--tr-cta);box-shadow:0 0 0 2px #161e2e}
.ht-dots i.pt{background:#161e2e;box-shadow:inset 0 0 0 2px var(--tr-cta)}
.ht-x{grid-column:2;display:flex;justify-content:space-between;padding:0 2px;font:500 11.5px/1 var(--tr-f-ui);color:var(--tr-text2)}
.ht-sh{position:absolute;left:0;top:0;bottom:0;width:100%;background:#161e2e}

/* тир-лист: изменение винрейта на 2 с после смены ранга, доля игр, период крупно */
.pg-dl{display:block;margin-top:4px;font:600 11.5px/1 var(--tr-f-ui);text-align:right}
.pg-dl.up{color:var(--tr-green)}
.pg-dl.down{color:var(--tr-coral)}
.fq{color:var(--tr-text2)}
.pg-per{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:14px;text-shadow:0 1px 12px rgba(13,20,33,.8)}
.pg-per:empty{display:none}
.pg-per b{font:600 19px/1.25 var(--tr-f-display);letter-spacing:-.01em;color:var(--tr-text)}
.pg-old{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:9px;background:rgba(251,191,36,.12);
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.3);color:var(--tr-amber);font:600 13px/1.3 var(--tr-f-ui);text-shadow:none}

/* пик: полоса «Кого взять ↑» на телефоне и шансы по шагам драфта */
.pk-jump{display:none}
@media (max-width:760px){
  .pk-jump:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-top:14px;padding:0 14px;border-radius:14px;
    background:rgba(74,158,237,.12);box-shadow:inset 0 0 0 1px rgba(74,158,237,.35);color:var(--tr-text);font:500 13.5px/1.2 var(--tr-f-ui);
    transition:transform .22s var(--tr-ease)}
  .pk-jump b{color:var(--tr-cta);font-weight:600;white-space:nowrap}
  .pk-jump:active{transform:scale(.97)}
}
#pk-recs{scroll-margin-top:16px}
#pk-recs:focus{outline:0}
.ch-sh{margin-top:16px;padding-top:14px;border-top:1px solid var(--tr-hair)}
.ch-sh small{display:block;font:500 12.5px/1 var(--tr-f-ui);color:var(--tr-text2)}
.ch-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.ch-st{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 4px;border-radius:10px;background:rgba(231,235,242,.06)}
.ch-st img{width:26px;height:26px;border-radius:7px;object-fit:cover}
.ch-st b{font:600 14px/1 var(--tr-f-display)}
.ch-st.now{background:rgba(74,158,237,.14);box-shadow:inset 0 0 0 1px rgba(74,158,237,.4)}
.ch-ar{color:var(--tr-muted);font:500 13px/1 var(--tr-f-ui)}

/* герои: сортировка и доля игр на карточке */
.pg-sort{display:inline-flex;height:44px}
.pg-sort a{padding:0 14px;font-size:14px}
.hc-q{color:var(--tr-text2)}
/* 04.11: разметка серверного рендера (M-SITE-RENDER, src/core/site_render.py) — сводка героя и турнира, ссылки на героев в постах */
.ssr-sum{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.ssr-sum:first-child{margin-top:0;padding-top:0;border-top:0}
.ssr-sum h2{font:600 17px/1.3 var(--f-display);letter-spacing:-.01em;margin:20px 0 8px;color:var(--text)}
.ssr-sum h2:first-child{margin-top:0}
.ssr-sum p{font:400 15px/1.55 var(--f-ui);color:var(--text2);margin:6px 0}
.ssr-sum .ssr-lead{font:500 15.5px/1.5 var(--f-ui);color:var(--text)}
.ssr-sum .ssr-note{font-size:13.5px;line-height:1.45;color:var(--text2)}
.ssr-sum a{color:var(--cta);text-decoration:none}
.ssr-sum a:hover{text-decoration:underline}
.ssr-items,.ssr-mu,.ssr-series{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.ssr-items li,.ssr-mu li,.ssr-series li{font:400 14.5px/1.45 var(--f-ui);color:var(--text2);padding:8px 12px;border-radius:12px;background:rgba(231,235,242,.04)}
.ssr-items li b,.ssr-mu li a,.ssr-series li b{color:var(--text);font-weight:600}
.ssr-items{counter-reset:ssr}
.ssr-items li{counter-increment:ssr}
.ssr-items li::before{content:counter(ssr) ".";display:inline-block;min-width:22px;color:var(--text2);font-variant-numeric:tabular-nums}
.ssr-more{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ssr-more li a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:14px;background:rgba(231,235,242,.06);color:var(--text);font:500 14px/1.2 var(--f-ui)}
.ssr-more li a:hover{background:rgba(231,235,242,.1);text-decoration:none}
.ssr-table{width:100%;border-collapse:collapse;margin:6px 0 4px;font:400 14px/1.4 var(--f-ui);color:var(--text2)}
.ssr-table th,.ssr-table td{padding:8px 10px;border-bottom:1px solid var(--hair);text-align:left}
.ssr-table th{font-weight:600;color:var(--text)}
.ssr-table td:last-child,.ssr-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
a.ssr-hero{color:var(--cta);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
@media (max-width:760px){.ssr-sum h2{font-size:16px}.ssr-items li,.ssr-mu li,.ssr-series li{padding:8px 10px}}
/* 04.11: карточка «Свит в Telegram» на узком экране — парящий эмодзи не налезает на текст (лента, пост, герой, FAQ) */
@media (max-width:760px){.cta-card .fe{width:56px;height:56px;right:10px;top:10px}.cta-card h3,.cta-card > p{padding-right:58px}}
/* блок «Ещё» рендера (section.ssr-next) — отдельно от сводки .ssr-sum, которую JS прячет после живых данных */
.ssr-next{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}