.oscar-tip{position:relative;display:inline-flex;
  --pop-bg:var(--card-2,var(--active,#1b1e26));
  --pop-line:var(--line-2,var(--line,#3a4150));
  --pop-ink:var(--ink,#f4f6fa);
  --pop-dim:var(--dim,var(--muted,#b6bfcd));
  --pop-faint:var(--faint,var(--muted,#8d97a6));
  --pop-mark:var(--gold,var(--pink,#ffd479))}
.oscar-trigger{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;
  padding:0;font:inherit;color:inherit;cursor:pointer;border-radius:10px;
  display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
/* Панель НЕ занимает места в потоке и не двигает вёрстку: она вне потока, а
   показ и скрытие идут через visibility/opacity, а не display. */
.oscar-pop-body{position:absolute;top:100%;right:0;z-index:30;
  /* Отступ до карточки — ВНУТРИ панели: между значком и карточкой не остаётся
     полосы «не наведено», иначе подсказка гасла на полпути к ней. */
  padding-top:8px;
  width:max-content;max-width:min(280px,calc(100vw - 24px));
  transform:translateX(var(--tip-shift,0px));
  visibility:hidden;opacity:0;
  /* Закрытие с небольшой задержкой: короткий проход указателя мимо края не
     должен мигать подсказкой. */
  transition:opacity .14s ease .18s,visibility 0s linear .32s}
.oscar-tip[data-place="up"] .oscar-pop-body{top:auto;bottom:100%;padding:0 0 8px}
.oscar-tip[data-open] .oscar-pop-body,
.oscar-tip:has(.oscar-trigger:focus-visible) .oscar-pop-body{
  visibility:visible;opacity:1;transition:opacity .14s ease 0s,visibility 0s linear 0s}
/* Наведение открывает подсказку везде, КРОМЕ пальца: после касания :hover на
   телефоне «залипает», и повторное касание не закрывало бы. Признак ставит
   скрипт по типу указателя — `@media(hover)` для этого не годится: планшет с
   мышью и безголовый браузер отвечают на него неверно, и проверить правило
   было бы нечем. */
html:not([data-pointer="coarse"]) .oscar-tip:hover .oscar-pop-body{
  visibility:visible;opacity:1;transition:opacity .14s ease 0s,visibility 0s linear 0s}
/* Escape закрывает и наведённую подсказку. Правило стоит последним и с
   !important намеренно: это состояние обязано перебивать :hover, который
   никуда не делся — указатель всё ещё на значке. */
.oscar-tip[data-hidden] .oscar-pop-body{visibility:hidden!important;opacity:0!important}
@media(prefers-reduced-motion:reduce){.oscar-pop-body{transition-duration:0s}}
/* Длинный перечень прокручивается ВНУТРИ карточки: страница из-за подсказки
   расти не должна, а к самой карточке можно подвести мышку и прокрутить. */
.oscar-pop-card{max-height:min(46vh,320px);overflow-y:auto;overscroll-behavior:contain;
  padding:12px 14px;text-align:left;
  background:var(--pop-bg);border:1px solid var(--pop-line);border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.55)}
.oscar-pop-head{margin:0 0 8px;font-size:13px;line-height:18px;font-weight:600;color:var(--pop-ink)}
.oscar-pop-list{margin:0;padding:0 0 0 16px;font-size:13px;line-height:19px;color:var(--pop-dim)}
.oscar-pop-list li{margin:2px 0;overflow-wrap:anywhere}
.oscar-times{color:var(--pop-mark);font-variant-numeric:tabular-nums;white-space:nowrap}
.oscar-pop-empty{margin:0;font-size:13px;line-height:19px;color:var(--pop-dim);overflow-wrap:anywhere}
.oscar-pop-note{margin:8px 0 0;font-size:11px;line-height:16px;color:var(--pop-faint)}


  .league-faq { --faq-dim: var(--dim, var(--muted, #b6bfcd));
                --faq-line: var(--line, #2c313c);
                --faq-focus: var(--focus, var(--pink, #ffd479));
                margin-top: 18px; max-width: 750px; }
  .league-faq .faq-lead { margin: 0 0 14px; color: var(--faq-dim);
                          font-size: 15px; line-height: 1.5; }
  .league-faq .faq-item { margin: 8px 0; border: 1px solid var(--faq-line);
                          border-radius: 12px; background: #ffffff08; }
  .league-faq .faq-item[open] { background: #ffffff12; }
  /* Нажимается вся плашка целиком, а не значок: summary — блок на всю ширину
     с зоной не меньше 44 px. */
  .league-faq summary { display: flex; align-items: center; gap: 10px;
                        min-height: 44px; padding: 11px 14px; cursor: pointer;
                        font-size: 16px; font-weight: 500; line-height: 1.35;
                        list-style: none; border-radius: 12px; }
  .league-faq summary::-webkit-details-marker { display: none; }
  .league-faq summary::after { content: "+"; margin-left: auto; font-size: 20px;
                               line-height: 1; color: var(--faq-dim); }
  .league-faq .faq-item[open] > summary::after { content: "−"; }
  .league-faq summary:hover { background: #ffffff0f; }
  .league-faq summary:focus-visible { outline: 3px solid var(--faq-focus);
                                      outline-offset: -3px; }
  .league-faq .faq-answer { padding: 0 14px 14px; }
  .league-faq .faq-answer p { margin: 0; color: var(--faq-dim);
                              font-size: 15px; line-height: 1.6; }
  @media (max-width: 650px) {
    .league-faq summary { font-size: 15px; padding: 10px 12px; }
    .league-faq .faq-answer { padding: 0 12px 12px; }
    .league-faq .faq-answer p { font-size: 14px; }
  }