/* Карточка разбора. Телефон: одна колонка. От 960px: сетка как на десктопном макете. */

.r-body { background-attachment: scroll; }
.r { max-width: 430px; margin: 0 auto; padding: 16px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.r-loading { display: grid; gap: 10px; }
.card { border-radius: 28px; padding: 18px; }
.r .glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 44px rgba(0, 0, 0, .3); }
.h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.h3 small { font-size: 12px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, .08); padding: 4px 10px; border-radius: 999px; }

.r-top { padding: 2px 4px; }
.r-top .logo { font-size: 18px; }
.r-meta { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.r-actions { display: none; gap: 8px; }
.r-venue { display: none; }

/* Команды */
.teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; text-align: center; }
.team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.team .crest { width: 52px; height: 52px; }
.team b { font-size: 16px; line-height: 1.2; }
.team small { font-size: 12px; color: var(--muted); }
.vs { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vs > span:first-child { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.vs .xs { display: none; }
.forms { display: flex; justify-content: space-between; margin-top: 14px; }
.form { display: flex; gap: 4px; }
.form span { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.f-W { background: rgba(91, 227, 160, .16); color: var(--green); }
.f-D { background: rgba(255, 255, 255, .1); color: #C9C6D2; }
.f-L { background: rgba(255, 107, 138, .16); color: var(--red); }
.verdict-box { display: none; }

/* Оценка */
.bet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bet-head b { display: block; font-size: 22px; letter-spacing: -.02em; margin-top: 2px; }
.score-wrap { display: flex; flex-direction: column; align-items: center; }
.ring { position: relative; width: 200px; height: 200px; margin: 14px auto 0; flex: none; }
.ring svg { transform: rotate(-90deg); filter: drop-shadow(0 0 18px rgba(238, 108, 196, .25)); }
.ring .arc { stroke-dasharray: var(--v) 200; animation: draw 1.6s .35s cubic-bezier(.3, .7, .2, 1) both; }
.ring__val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring__val b { font-size: 60px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.ring__val span { display: block; font-size: 13px; font-weight: 700; margin-top: 2px; }
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; padding: 5px; border-radius: 20px; background: rgba(0, 0, 0, .18); width: 100%; }
.num { padding: 10px 8px; border-radius: 16px; text-align: center; }
.num small { font-size: 11px; color: var(--muted); }
.num b { display: block; font-size: 18px; margin-top: 3px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.t-cyan { background: rgba(127, 227, 255, .1); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(127, 227, 255, .25); }
.verdict { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* Блоки */
.factor { padding: 7px 0; }
.factor .row { font-size: 14px; }
.bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); margin-top: 7px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; transform-origin: 0 50%; animation: grow 1s .4s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }
.stat { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; align-items: center; gap: 6px; padding: 7px 0; }
.stat span { text-align: center; }
.stat .v { font-weight: 700; padding: 6px 0; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--muted); }
.stat .v.best { background: rgba(91, 227, 160, .16); color: var(--green); }
.h2h-split { display: flex; gap: 4px; margin: 0 0 10px; height: 30px; font-size: 12px; font-weight: 700; }
.h2h-split span { border-radius: 10px; display: grid; place-items: center; min-width: 28px; white-space: nowrap; overflow: hidden; }
.h2h-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 54px minmax(0, 1fr); gap: 6px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.h2h-row .s { text-align: center; padding: 4px 0; border-radius: 10px; font-size: 15px; background: rgba(255, 255, 255, .08); color: #C9C6D2; }
.h2h-row .s.over { background: rgba(91, 227, 160, .16); color: var(--green); }
.player { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .06); }
.player + .player { margin-top: 8px; }
.player > span:first-child { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.st-out { background: #FF4F7A; color: #fff; }
.st-doubt { background: var(--amber); color: #3A2400; }
.st-ok { background: #3FCF8E; color: #06291A; }
.arg { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14px; line-height: 1.5; }
.arg > span:first-child { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.arg.pro > span:first-child { background: rgba(91, 227, 160, .16); color: var(--green); }
.arg.con > span:first-child { background: rgba(255, 107, 138, .16); color: var(--red); }
.arg.con > span:last-child { color: #C9C6D2; }
.r-foot { font-size: 11px; line-height: 1.5; padding: 2px 6px; color: var(--muted); }
.r-foot a { color: inherit; text-underline-offset: 2px; }

/* ---------- Десктоп ---------- */
@media (min-width: 960px) {
  .r { max-width: 1440px; padding: 20px 48px 40px; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .r > * { grid-column: span 6; }
  .r-top { border-radius: 999px; padding: 8px 8px 8px 22px; background: var(--glass-fill); border: 1px solid var(--glass-border); }
  .r-top .logo { font-size: 20px; }
  .r-meta { background: none; box-shadow: none; color: var(--muted); font-size: 13px; }
  .r-actions { display: flex; }
  .r-venue { display: inline; }
  .r-actions .btn { min-height: 40px; font-size: 14px; padding: 0 18px; }
  .r > [data-span] { grid-column: span var(--span); } /* ширину блоков считает layout() в result.js */
  .c-teams { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px 32px; }
  .c-score { padding: 24px 26px; }
  .c-h2h { padding: 18px 22px; }
  .r--lite .team b { font-size: 24px; }
  .team .crest { width: 96px; height: 96px; }
  .team b { font-size: 28px; letter-spacing: -.02em; }
  .team small { font-size: 14px; }
  .form span { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
  .forms { display: none; }
  .team .form { display: flex; }
  .vs .xs { display: block; }
  .vs .xs b { font-size: 30px; letter-spacing: -.03em; color: var(--cyan); }
  .verdict-box { display: block; border-radius: 22px; padding: 18px 20px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .verdict-box p { margin-top: 6px; font-size: 17px; line-height: 1.55; color: var(--text-2); }
  .c-score .verdict, .c-score .t-cyan { display: none; }
  .score-wrap { flex-direction: row; flex-wrap: wrap; gap: 16px 24px; margin-top: 16px; }
  .score-wrap .nums { flex: 1 1 180px; min-width: 0; }
  .score-wrap .ring { margin: 0; }
  .nums { grid-template-columns: 1fr; margin-top: 0; padding: 0; background: none; }
  .num { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); text-align: left; }
  .num small { font-size: 13px; }
  .num b { margin-top: 0; font-size: 19px; }
  .stat { grid-template-columns: 72px minmax(0, 1fr) 72px; padding: 8px 0; }
  .h2h-row { grid-template-columns: 90px minmax(0, 1fr) 70px minmax(0, 1fr); font-size: 15px; }
  .h2h-split { height: 34px; font-size: 13px; }
  .arg { font-size: 15px; }
}
@media (max-width: 959px) {
  .team .form { display: none; }
}

/* ---------- Глубина: три уровня поверхностей, шрифт цифр, движение ---------- */
/* Цифры — Manrope: кириллица, моноширинные цифры (tnum) и плотный 800 для крупных значений. Текст остаётся системным */
.r { --num: "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --spring: cubic-bezier(.22, 1, .36, 1); }
.r-body::before { /* уровень 1: мягкое свечение сверху поверх общего фона */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 45% at 50% -8%, rgba(142, 125, 255, .16), transparent 70%),
              radial-gradient(40% 30% at 100% 0%, rgba(238, 108, 196, .10), transparent 70%);
}
/* Уровень 2: карточка. Рамка 1px светлее сверху (маска), слоистая тень, блик по верхнему краю */
.r .card {
  position: relative; isolation: isolate; border-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02) 38%, rgba(255, 255, 255, .012)), rgba(16, 14, 22, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -8px rgba(0, 0, 0, .5), 0 34px 70px -24px rgba(0, 0, 0, .65);
}
.r .card.glass--hot { background: linear-gradient(160deg, rgba(255, 79, 184, .11), rgba(155, 92, 255, .06) 50%, rgba(255, 255, 255, .02)), rgba(16, 14, 22, .6); }
.r .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .07) 28%, rgba(255, 255, 255, .03) 72%, rgba(255, 255, 255, .08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Уровень 3: вложенные блоки утоплены в карточку */
.r .nums, .ex-strip, .ex-stat, .ex-dlg__sec, .ex-short {
  background: rgba(0, 0, 0, .24);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 0 rgba(255, 255, 255, .04);
}
/* Цифры */
.r .ring__val b, .r .num b, .r .factor b, .r .xs b, .r .bet-head b, .ex-ring__val b, .ex-strip b, .ex-stat b, .ex-odds b, .ex-node, .ex-dlg__xs b, .r .stat .v, .r .h2h-row .s {
  font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.r .ring__val b { font-weight: 800; letter-spacing: -.05em; }
/* Мелкие подписи: заглавные с разрядкой */
.ex-eyebrow, .ex-strip small, .ex-stat small, .r .num small, .ex-dlg__xs small, .ex-risk small {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
}
.ex-eyebrow { color: var(--muted); }

/* Каскад: блок появляется, когда попал в экран. Только transform и opacity */
.mo:not(.is-in) { opacity: 0; }
.mo.is-in { animation: mo-rise .7s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.mo .bar i { animation: none; }
.mo.is-in .bar i { animation: grow .9s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms + 260ms + var(--j, 0) * 60ms); }
@keyframes mo-rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Экспресс (ТЗ 4.16) ---------- */
.ex-aside, .ex-chain { display: grid; gap: 12px; min-width: 0; }

/* Кольцо шанса. Дорисовка дуги — stroke-dasharray у маленького SVG: дёшево, раскладку не трогает */
.ex-ring { position: relative; flex: none; width: var(--rs, 76px); aspect-ratio: 1; }
.ex-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ex-ring__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: var(--rw, 9); }
.ex-ring__arc { fill: none; stroke-width: var(--rw, 9); stroke-linecap: round; stroke-dasharray: var(--v) 100; filter: drop-shadow(0 0 6px rgba(238, 108, 196, .25)); }
.mo.is-in .ex-ring__arc, .ex-dlg[open] .ex-ring__arc { animation: ex-draw 1.2s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
@keyframes ex-draw { from { stroke-dasharray: 0 100; } }
.ex-ring__val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ex-ring__val b { font-size: calc(var(--rs, 76px) * .27); font-weight: 800; letter-spacing: -.05em; }
.ex-ringbox { margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ex-ringbox figcaption { max-width: max(calc(var(--rs, 76px) + 16px), 96px); font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--muted); text-align: center; text-wrap: balance; }
.ex-ring--hero { --rs: 168px; --rw: 8; }
.ex-ring--hero .ex-ring__val b { font-size: 50px; letter-spacing: -.06em; }
.ex-ring--hero figcaption { font-size: 13px; }
.ex-ring--dlg { --rs: 104px; --rw: 8; }

/* Hero экспресса */
.ex-hero { padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow: hidden;
  background: radial-gradient(120% 70% at 0% 0%, rgba(238, 108, 196, .14), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(142, 125, 255, .12), transparent 60%), rgba(16, 14, 22, .6) !important; }
.ex-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ex-hero__main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.ex-hero__stats { display: grid; gap: 8px; }
.ex-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-radius: 16px; }
.ex-stat b { font-size: 22px; font-weight: 800; line-height: 1.1; }
.ex-stat b i, .ex-strip b i { font-style: normal; font-size: .6em; font-weight: 600; color: var(--dim); letter-spacing: 0; }
.ex-hero__verdict { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.ex-short { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(142, 125, 255, .14), rgba(238, 108, 196, .06)) !important; }
.ex-short__icon { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #CFC6FF;
  background: rgba(142, 125, 255, .2); box-shadow: inset 0 0 0 1px rgba(170, 155, 255, .35), 0 0 18px rgba(142, 125, 255, .25); }
.ex-short b { display: block; font-size: 14px; }
.ex-short small { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.ex-short--link { background: linear-gradient(135deg, rgba(127, 227, 255, .1), rgba(255, 255, 255, .02)) !important; }
.ex-short--link .ex-short__icon { color: var(--cyan); background: rgba(127, 227, 255, .12); box-shadow: inset 0 0 0 1px rgba(127, 227, 255, .3); }

/* Риск: цветной чип */
.ex-risk { display: inline-flex; flex-direction: column; gap: 2px; }
.ex-risk--high b { color: var(--red); } .ex-risk--mid b { color: var(--amber); } .ex-risk--low b { color: var(--green); }
.ex-hero__risk { flex-direction: row; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ex-hero__risk.ex-risk--high { background: rgba(255, 107, 138, .12); box-shadow: inset 0 0 0 1px rgba(255, 107, 138, .3); }
.ex-hero__risk.ex-risk--mid { background: rgba(255, 196, 77, .1); box-shadow: inset 0 0 0 1px rgba(255, 196, 77, .28); }
.ex-hero__risk.ex-risk--low { background: rgba(91, 227, 160, .1); box-shadow: inset 0 0 0 1px rgba(91, 227, 160, .28); }
.ex-hero__risk b { font-size: 13px; }

.ex-chances .factor .row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.ex-chances--weak .row span { color: var(--red); font-weight: 600; }

/* Цепочка позиций: вертикальная линия и узлы в цвете риска */
.ex-chain { --gut: 34px; --node: 26px; position: relative; padding-left: var(--gut); gap: 14px; }
.ex-chain::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: 38px; bottom: var(--tail, 40px); width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(238, 108, 196, .5), rgba(142, 125, 255, .35) 50%, rgba(255, 255, 255, .08));
  transform-origin: top; animation: ex-line 1.4s var(--spring) .25s backwards; }
@keyframes ex-line { from { transform: scaleY(0); } }
.ex-node { position: absolute; z-index: 2; left: calc(-1 * var(--gut, 34px)); top: 26px; width: var(--node, 26px); height: var(--node, 26px); border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--rc); background: #110F18;
  box-shadow: 0 0 0 2px var(--rc), 0 0 0 6px var(--bg), 0 0 18px -2px var(--rc); }
.ex-node--high { --rc: #FF6B8A; } .ex-node--mid { --rc: #FFC44D; } .ex-node--low { --rc: #5BE3A0; }
.ex-node--flat { position: static; flex: none; box-shadow: 0 0 0 2px var(--rc), 0 0 14px -2px var(--rc); }
.ex-weak .ex-node::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--rc); animation: ex-ripple 2.2s ease-out infinite; }
@keyframes ex-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }

/* Карточка позиции */
.c-ex-leg { display: flex; flex-direction: column; gap: 14px; cursor: pointer; overflow: visible;
  transition: transform .35s var(--spring); -webkit-tap-highlight-color: transparent; }
.c-ex-leg::after { /* тень посильнее для hover: меняем только opacity слоя */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--spring);
  box-shadow: 0 28px 60px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06), 0 0 40px -10px color-mix(in srgb, var(--h) 35%, transparent); }
@media (hover: hover) {
  .c-ex-leg:hover { transform: translateY(-3px); }
  .c-ex-leg:hover::after { opacity: 1; }
}
.c-ex-leg.is-pressed { transform: scale(.98); transition-duration: .08s; }
.ex-accent { position: absolute; left: 22px; right: 22px; top: 0; height: 1px; pointer-events: none; opacity: .85;
  background: linear-gradient(90deg, transparent, var(--h), var(--a), transparent); }
.ex-pulse { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 107, 138, .65), 0 0 26px -4px rgba(255, 107, 138, .45); animation: ex-pulse 2.4s ease-in-out infinite; }
@keyframes ex-pulse { 50% { opacity: .35; } }
.ex-leg__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ex-leg__head .ex-eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-odds { flex: none; font-size: 12px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ex-odds b { font-size: 14px; font-weight: 800; color: var(--text); margin-left: 2px; }
.ex-leg__body { display: flex; align-items: center; gap: 14px; }
.ex-teams { flex: 1; min-width: 0; display: grid; gap: 10px; }
.ex-team { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ex-team .crest, .r .team .crest { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16), 0 3px 8px rgba(0, 0, 0, .5), inset 0 -2px 4px rgba(0, 0, 0, .35), 0 0 22px -2px color-mix(in srgb, var(--c1, #888) 55%, transparent); }
.ex-team .crest { width: 30px; height: 30px; }
.ex-team b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-team .form span { width: 18px; height: 18px; border-radius: 6px; font-size: 10px; }
.ex-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 4px; border-radius: 18px; }
.ex-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ex-strip > div { padding: 10px 14px; border-radius: 14px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ex-strip b { font-size: 16px; font-weight: 800; line-height: 1.2; }
.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  color: var(--muted); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ex-tag--weak { color: var(--red); background: rgba(255, 107, 138, .12); box-shadow: inset 0 0 0 1px rgba(255, 107, 138, .32); }
.ex-tag--weak i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: ex-pulse 1.6s ease-in-out infinite; }
.ex-tag--quick { color: #CFC6FF; background: rgba(142, 125, 255, .14); box-shadow: inset 0 0 0 1px rgba(170, 155, 255, .3); text-transform: none; letter-spacing: 0; }
.ex-verdict { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.ex-factors { display: grid; gap: 2px 20px; }
.ex-factors .factor { padding: 4px 0; }
.ex-factors .factor .row { font-size: 13px; color: var(--muted); }
.ex-factors .bar { height: 6px; margin-top: 5px; }
.ex-args { border-top: 1px solid var(--line); padding-top: 6px; }
.ex-args .arg { font-size: 13px; padding: 4px 0; }
.ex-open { margin-top: auto; width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 16px -6px rgba(0, 0, 0, .6);
  transition: transform .1s ease-out; }
.ex-open:active { transform: scale(.97); }

/* ---------- Полный разбор: диалог по центру ---------- */
html.ex-dlg-open { overflow: hidden; }
.ex-dlg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 14px;
  border: 0; background: transparent; color: var(--text); overflow-y: auto; overscroll-behavior: contain; }
.ex-dlg[open] { display: grid; }
.ex-dlg::backdrop { background: rgba(4, 3, 8, .6); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); animation: ex-fade .35s ease both; }
.ex-dlg.is-closing::backdrop { animation: ex-fade .25s ease reverse both; }
.ex-dlg__panel { --num: "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --spring: cubic-bezier(.22, 1, .36, 1);
  position: relative; margin: auto; width: min(780px, 100%); padding: 18px; border-radius: 30px; display: flex; flex-direction: column; gap: 14px;
  background: radial-gradient(90% 40% at 50% 0%, rgba(142, 125, 255, .14), transparent 70%), linear-gradient(180deg, rgba(30, 26, 40, .97), rgba(13, 11, 19, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 100px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
  animation: ex-dlg-in .5s var(--spring) both; }
.ex-dlg.is-closing .ex-dlg__panel { animation: ex-dlg-out .25s cubic-bezier(.4, 0, 1, 1) both; }
.ex-dlg .mo-d { animation: mo-rise .55s var(--spring) backwards; animation-delay: calc(180ms + var(--i, 0) * 60ms); }
.ex-dlg .bar i { animation-delay: calc(320ms + var(--i, 0) * 60ms + var(--j, 0) * 50ms); animation-timing-function: var(--spring); }
.ex-dlg .ex-ring__arc { animation-delay: .3s; }
.ex-dlg.is-closing .mo-d { animation: none; }
@keyframes ex-fade { from { opacity: 0; } }
@keyframes ex-dlg-in { from { opacity: 0; transform: scale(.8); } }
@keyframes ex-dlg-out { to { opacity: 0; transform: scale(.8); } }
.ex-dlg__head { display: flex; align-items: center; gap: 10px; }
.ex-dlg__head .ex-eyebrow { flex: 1; min-width: 0; }
.ex-dlg__x { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer;
  color: var(--text); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .1s ease-out; }
.ex-dlg__x:active { transform: scale(.92); }
.ex-dlg__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; text-align: center; }
.ex-dlg__teams .team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ex-dlg__teams .team .crest { width: 54px; height: 54px; }
.ex-dlg__teams .team b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.ex-dlg__teams .team .form { display: flex; }
.ex-dlg__teams .form span { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.ex-dlg__mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ex-dlg__xs { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ex-dlg__xs b { font-size: 22px; font-weight: 800; color: var(--cyan); }
.ex-dlg__grid { display: grid; gap: 10px; }
.ex-dlg__sec { padding: 14px 16px; border-radius: 22px; min-width: 0; }
.ex-dlg__sec .h3 { margin-bottom: 8px; }
.ex-dlg__comment { background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)) !important; }
.ex-dlg__comment .ex-tags { margin-top: 10px; }
.ex-dlg__text { font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--text); letter-spacing: -.005em; }
.ex-dlg__args { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.ex-dlg__note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ex-dlg__sec .stat { grid-template-columns: 64px minmax(0, 1fr) 64px; }
.ex-dlg__sec .h2h-row { grid-template-columns: 62px minmax(0, 1fr) 54px minmax(0, 1fr); font-size: 14px; }
@media (max-width: 560px) {
  .ex-team { grid-template-columns: 30px minmax(0, 1fr); row-gap: 3px; }
  .ex-team .crest { grid-row: span 2; }
  .ex-team .form { grid-column: 2; }
  .ex-team b { font-size: 16px; }
  .ex-ring--sm { --rs: 70px; }
}
@media (max-width: 420px) {
  .ex-hero { padding: 18px; }
  .ex-hero__main { gap: 12px; }
  .ex-ring--hero { --rs: 132px; }
  .ex-ring--hero .ex-ring__val b { font-size: 40px; }
  .ex-stat { padding: 10px 14px; }
  .ex-strip b { font-size: 15px; }
  .ex-strip .ex-risk b { font-size: 14px; }
  .ex-stat b { font-size: 20px; }
  .ex-dlg__teams { gap: 6px; }
  .ex-dlg__teams .team b { font-size: 15px; }
  .ex-dlg__teams .team .crest { width: 44px; height: 44px; }
  .ex-dlg__teams .form { gap: 3px; }
  .ex-dlg__teams .form span { width: 16px; height: 16px; border-radius: 5px; font-size: 9px; }
  .ex-dlg__xs small { font-size: 9px; letter-spacing: .04em; }
  .ex-dlg__xs b { font-size: 20px; }
  .ex-ring--dlg { --rs: 88px; }
  .ex-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
  .ex-dlg { padding: 32px; }
  .ex-dlg__panel { padding: 24px 26px; gap: 16px; }
  .ex-dlg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-dlg__sec--wide { grid-column: 1 / -1; }
  .ex-dlg__teams .team .crest { width: 72px; height: 72px; }
  .ex-dlg__teams .team b { font-size: 22px; }
  .ex-ring--dlg { --rs: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-dlg__panel, .ex-dlg.is-closing .ex-dlg__panel { animation-name: ex-fade; }
  .c-ex-leg, .c-ex-leg:hover, .c-ex-leg.is-pressed { transform: none; }
}

/* ---------- Десктоп: hero и шансы слева (липкие), цепочка позиций справа ---------- */
@media (min-width: 960px) {
  .r.r--ex { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .r.r--ex > * { grid-column: 1 / -1; }
  .r.r--ex > .ex-aside { grid-column: 1 / span 5; position: sticky; top: 16px; }
  .r.r--ex > .ex-chain { grid-column: 6 / -1; --gut: 44px; --node: 30px; }
  .ex-hero { padding: 26px; }
  .c-ex-leg { padding: 22px 24px; }
  .ex-ring--sm { --rs: 88px; }
  .ex-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-node { font-size: 13px; }
}

/* Скриншот для бота: без анимаций */
.is-static *, .is-static *::before, .is-static *::after { animation: none !important; transition: none !important; }

/* ---------- Десктоп: фокус на цепочке при прокрутке + мини-итог ---------- */
@media (min-width: 960px) {
  .r.r--ex > .ex-aside { transform-origin: left center; will-change: transform, opacity; z-index: 0; }
  .r.r--ex > .ex-chain { position: relative; z-index: 1; will-change: transform; }
}
/* Мини-итог: экспресс показывает его только на десктопе, одиночная ставка везде */
.ex-pill { position: fixed; top: 16px; left: var(--cx, 50%); z-index: 20; display: inline-flex; align-items: center; gap: 18px;
  padding: 8px 18px 8px 8px; border: 0; border-radius: 999px; color: var(--text); font: inherit; cursor: pointer;
  background: rgba(28, 22, 44, .62); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .38);
  opacity: 0; visibility: hidden; transform: translate(-50%, -14px) scale(.96);
  transition: opacity .3s var(--spring), transform .45s var(--spring), visibility 0s .45s; }
.ex-pill.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.ex-pill:active { transform: translate(-50%, 0) scale(.97); transition-duration: .1s; }
.ex-pill:focus-visible { outline: 2px solid #ee6cc4; outline-offset: 3px; }
.ex-pill__ring { --s: 44px; position: relative; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(28, 22, 44, .95) 76%, transparent 78% 100%), conic-gradient(#EE6CC4, #8E7DFF calc(var(--v) * 1%), rgba(255, 255, 255, .1) 0); }
.ex-pill__ring b { font-family: var(--num); font-size: 13px; font-weight: 800; letter-spacing: -.04em; }
.ex-pill__item { display: grid; gap: 1px; text-align: left; line-height: 1.1; }
.ex-pill__item small { font-size: 11px; font-weight: 600; color: var(--muted); }
.ex-pill__item b { font-family: var(--num); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.ex-pill__item i { font-style: normal; font-weight: 600; color: var(--muted); font-size: 12px; }
.ex-pill__risk { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.ex-pill__risk b { font-size: 12px; }
@media (max-width: 959px) { .r--ex .ex-pill { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ex-pill, .ex-pill.is-on { transform: translate(-50%, 0); transition: opacity .2s ease, visibility 0s .2s; }
  .ex-pill.is-on { transition-delay: 0s; }
}
@media (prefers-reduced-transparency: reduce) {
  .ex-pill { background: rgb(28, 22, 44); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Одиночная ставка: сцена матча в цветах клубов ---------- */
.r--one { gap: 12px; }
.s-stage { padding: 20px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.s-glow { position: absolute; z-index: -1; width: 80%; aspect-ratio: 1; top: -30%; border-radius: 50%; pointer-events: none; filter: blur(10px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 34%, transparent), transparent 72%); }
.s-glow--h { --g: var(--hc); left: -40%; }
.s-glow--a { --g: var(--ac); right: -40%; }
.s-stage__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s-stage__top .ex-eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 959px) { /* лига и время уже в шапке страницы */
  .s-stage__top { justify-content: center; }
  .s-stage__top .ex-eyebrow { display: none; }
}

.s-duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h a" "c c"; gap: 18px 12px; align-items: start; }
.s-side--h { grid-area: h; } .s-side--a { grid-area: a; } .s-core { grid-area: c; }
.s-side, .s-core { will-change: transform; transform-origin: 50% 40%; }
.s-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.s-team b { font-size: 17px; line-height: 1.2; letter-spacing: -.01em; }
.s-team small { font-size: 12px; color: var(--muted); }
.s-team .form span { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.r .s-crest { width: 64px; height: 64px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .16), 0 6px 14px rgba(0, 0, 0, .5), inset 0 -3px 6px rgba(0, 0, 0, .35), 0 0 40px -4px color-mix(in srgb, var(--c1, #888) 70%, transparent); }

.s-core { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.s-bet { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 22px; border-radius: 18px; text-align: center;
  background: linear-gradient(135deg, rgba(255, 79, 184, .16), rgba(155, 92, 255, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.s-bet small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.s-bet b { font-family: var(--num); font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ex-ring--stage { --rs: 156px; --rw: 8; }
.ex-ring--stage .ex-ring__val b { font-size: 54px; letter-spacing: -.06em; }
.ex-ring--stage .ex-ring__arc { filter: drop-shadow(0 0 10px rgba(238, 108, 196, .35)); }
.s-grade { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.s-grade--low { color: var(--green); } .s-grade--mid { color: var(--amber); } .s-grade--high { color: var(--red); }

/* Телефон: всегда сетка 2×2, подпись в одну строку, значения на одной линии */
.s-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.s-strip > div { justify-content: space-between; gap: 6px; padding: 12px 14px; }
.s-strip small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-strip b { font-size: 20px; line-height: 1.1; white-space: nowrap; }
.s-strip[style*="--n:3"] > div:last-child { grid-column: 1 / -1; }
.s-verdict { font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.s-hint { display: none; }

/* Появление сцены: свечение разгорается, команды выезжают с краёв навстречу друг другу */
.s-stage.mo.is-in { animation: none; }
.s-stage.is-in .s-glow { animation: s-bloom 1.4s var(--spring) backwards; }
.s-stage.is-in .s-team { animation: s-in-h .9s var(--spring) .1s backwards; }
.s-stage.is-in .s-side--a .s-team { animation-name: s-in-a; }
.s-stage.is-in .s-crest { animation: s-pop .8s cubic-bezier(.34, 1.4, .64, 1) .2s backwards; }
.s-stage.is-in .s-bet { animation: mo-rise .6s var(--spring) .25s backwards; }
.s-stage.is-in .ex-ringbox { animation: s-pop .8s var(--spring) .3s backwards; }
.s-stage.is-in .s-grade, .s-stage.is-in .s-stage__top { animation: mo-rise .6s var(--spring) .45s backwards; }
.s-stage.is-in .s-strip > div { animation: mo-rise .6s var(--spring) backwards; }
.s-stage.is-in .s-strip > div:nth-child(1) { animation-delay: .5s; } .s-stage.is-in .s-strip > div:nth-child(2) { animation-delay: .56s; }
.s-stage.is-in .s-strip > div:nth-child(3) { animation-delay: .62s; } .s-stage.is-in .s-strip > div:nth-child(4) { animation-delay: .68s; }
.s-stage.is-in .s-verdict { animation: mo-rise .7s var(--spring) .7s backwards; }
@keyframes s-bloom { from { opacity: 0; transform: scale(.6); } }
@keyframes s-in-h { from { opacity: 0; transform: translateX(-48px); } }
@keyframes s-in-a { from { opacity: 0; transform: translateX(48px); } }
@keyframes s-pop { from { opacity: 0; transform: scale(.6); } }

/* Блоки разбора */
.s-grid { display: grid; gap: 12px; min-width: 0; }
.s-sec { padding: 18px; min-width: 0; }
.s-note { font-size: 12px; color: var(--muted); padding-top: 10px; }
.s-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; height: 150px; padding-top: 4px; }
.s-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.s-col b { font-family: var(--num); font-size: 13px; font-weight: 800; color: var(--muted); }
.s-col__bar { display: block; width: 100%; max-width: 44px; height: var(--h); border-radius: 10px 10px 4px 4px; overflow: hidden; background: rgba(255, 255, 255, .05); }
.s-col__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, rgba(142, 125, 255, .7), rgba(142, 125, 255, .25)); transform-origin: 50% 100%; }
.s-col.is-top b { color: var(--text); }
.s-col.is-top .s-col__bar i { background: var(--grad); box-shadow: 0 0 18px rgba(238, 108, 196, .35); }
.s-col__score { font-family: var(--num); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.mo.is-in .s-col__bar i { animation: s-up .9s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms + 220ms + var(--j, 0) * 70ms); }
@keyframes s-up { from { transform: scaleY(0); } }

.s-vs { padding: 8px 0; }
.s-vs__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 6px; text-align: center; }
.s-vs__row .v { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; color: var(--muted); }
.s-vs__row .v.best { color: var(--green); }
.s-vs__bars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
.s-vs__bars > span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; display: flex; }
.s-vs__h { justify-content: flex-end; }
.s-vs__bars i { display: block; height: 100%; border-radius: 4px; }
.s-vs__h i { background: linear-gradient(270deg, var(--hc), color-mix(in srgb, var(--hc) 40%, transparent)); transform-origin: 100% 50%; }
.s-vs__a i { background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 40%, transparent)); transform-origin: 0 50%; }
.mo.is-in .s-vs__bars i { animation: grow .9s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms + 220ms + var(--j, 0) * 70ms); }
.s-split__h { background: linear-gradient(135deg, var(--hc), color-mix(in srgb, var(--hc) 70%, #000)); color: var(--hc-ink, #fff); }
.s-split__a { background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 70%, #000), var(--ac)); color: var(--ac-ink, #fff); }

@media (max-width: 380px) {
  .ex-ring--stage { --rs: 136px; }
  .ex-ring--stage .ex-ring__val b { font-size: 46px; }
}
/* Мини-итог одиночной ставки на телефоне: компактнее */
.s-pill { gap: 12px; padding-right: 16px; width: max-content; max-width: calc(100vw - 32px); }
.s-pill__bet small { white-space: nowrap; }
.s-pill__crests { display: flex; padding-left: 4px; }
.s-pill__crests .crest { width: 30px; height: 30px; box-shadow: 0 0 0 2px rgba(28, 22, 44, .95); }
.s-pill__crests .crest + .crest { margin-left: -10px; }
.s-pill__bet { min-width: 0; }
.s-pill__bet b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-pill .ex-pill__ring { --s: 40px; }
@media (max-width: 420px) { .s-pill__chance { display: none; } }

/* Десктоп: сцена на первый экран, блоки разбора в две колонки */
@media (min-width: 960px) {
  .r--one { gap: 16px; }
  .r--one .s-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .s-sec--wide { grid-column: 1 / -1; }
  .s-sec { padding: 22px 24px; }
  .s-stage { padding: 26px 32px 22px; gap: 22px; min-height: min(720px, calc(100vh - 110px)); justify-content: space-between; }
  .s-glow { width: 60%; top: -20%; }
  .s-glow--h { left: -22%; } .s-glow--a { right: -22%; }
  .s-duel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "h c a"; align-items: center; gap: 24px; }
  .r .s-crest { width: 128px; height: 128px; }
  .s-team { gap: 12px; }
  .s-team b { font-size: 30px; letter-spacing: -.025em; }
  .s-team small { font-size: 14px; }
  .s-team .form span { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
  .s-bet b { font-size: 26px; }
  .ex-ring--stage { --rs: 210px; --rw: 7; }
  .ex-ring--stage .ex-ring__val b { font-size: 72px; }
  .ex-ring--stage figcaption { font-size: 13px; }
  .s-strip { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); max-width: 860px; width: 100%; margin: 0 auto; }
  .s-strip[style*="--n:3"] > div:last-child { grid-column: auto; }
  .s-verdict { font-size: 19px; max-width: 760px; margin: 0 auto; text-align: center; }
  .s-hint { display: inline-flex; align-self: center; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
  .s-hint svg { animation: s-bob 1.6s ease-in-out 1.6s 3; }
  .s-cols { height: 180px; }
  .s-vs__row { grid-template-columns: 72px minmax(0, 1fr) 72px; }
}
@keyframes s-bob { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .s-stage.is-in *, .s-hint svg { animation: none !important; }
}