/* Página do jogo (sportsbook): card do jogo com campo ao fundo, abas com contagem, mercados em cards recolhíveis
   (ROW / LINES / GRID, "Ver mais"), coluna lateral com campo, contagem, probabilidade, forma e confrontos.
   Tudo preso em section.dt.ev2 — o resto do sportsbook (lista, cupom) segue com o CSS do brava.css. */
section.ev2 {
  /* cores do tema (.sb no brava.css) — só a paleta; medidas iguais às da referência */
  --e2-card: var(--card);
  --e2-btn: var(--card-2);
  --e2-btn-h: color-mix(in srgb, var(--card-2) 85%, #fff);
  --e2-odd: var(--txt);
  --e2-txt: var(--txt);
  --e2-mut: var(--txt-2);
  --e2-acc: var(--acc);
  --e2-r: 12px;
  color: var(--e2-txt);
  font-family: Roboto, var(--font), system-ui, sans-serif;
  padding: 0 14px 24px;
}
section.ev2 button { font: inherit; color: inherit; }

/* ---- trilha: voltar · esporte · liga · favorito */
.e2-bc { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 2px; }
.e2-bc .e2-back, .e2-bc .e2-fav { background: none; border: 0; cursor: pointer; display: inline-flex; padding: 6px; color: var(--e2-mut); border-radius: 8px; }
.e2-bc .e2-back:hover, .e2-bc .e2-fav:hover { color: var(--e2-txt); background: rgba(255,255,255,.05); }
.e2-bc .e2-lg { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--e2-mut); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e2-bc .e2-fav.on { color: #f5c542; }
.e2-bc .e2-lg svg { width: 16px !important; height: 16px !important; flex: none; }
.e2-bc .e2-fav.on svg { fill: currentColor; }

/* ---- card do jogo (campo desenhado ao fundo) */
.e2-hero { position: relative; height: 260px; margin-bottom: 14px; }
.e2-hero .e2-pitch { position: absolute; inset: 0; color: var(--line); }
.e2-hero .e2-pitch svg { width: 100%; height: 100%; }
.e2-hero .e2-box { position: absolute; inset: 14px 110px; background: var(--e2-card); border-radius: 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 0 26px; box-shadow: inset 0 0 0 1px var(--line); }
.e2-tm { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 700; font-size: 16px; }
.e2-tm.h { justify-content: flex-end; text-align: right; }
.e2-tm .e2-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e2-tm .tb { width: 44px !important; height: 44px !important; flex: none; }
.e2-mid { text-align: center; color: var(--e2-mut); font-weight: 700; font-size: 15px; white-space: nowrap; }
.e2-mid .e2-sc { display: block; color: var(--e2-txt); font-size: 30px; font-weight: 800; letter-spacing: 1px; }
.e2-mid .e2-clk { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--e2-acc); font-size: 12px; font-weight: 700; }
.e2-mid .e2-clk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: e2pulse 1.4s infinite; }
@keyframes e2pulse { 50% { opacity: .3; } }

/* ---- abas */
.e2-tabs { position: sticky; top: 61px; z-index: 5; background: var(--e2-card); border-radius: var(--e2-r); padding: 6px; margin-bottom: 12px; box-shadow: 0 0 0 10px var(--bg), inset 0 0 0 1px var(--line); }
.e2-tabs .dt-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.e2-tabs .dt-tabs::-webkit-scrollbar { display: none; }
.e2-tabs .dt-pill { display: none; }
.e2-tabs .dt-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--e2-mut); white-space: nowrap; }
.e2-tabs .dt-tab:hover { background: rgba(255,255,255,.04); }
.e2-tabs .dt-tab.on { background: var(--e2-btn); color: var(--e2-txt); box-shadow: inset 0 -2px 0 var(--e2-acc); }
.e2-tabs .dt-tn { font-size: 11px; font-weight: 500; color: var(--e2-mut); }

/* ---- mercado */
section.ev2 .dt-mkts { display: flex; flex-direction: column; gap: 12px; }
section.ev2 .dt-grp { background: var(--e2-card); border-radius: var(--e2-r); padding: 0 16px 16px; box-shadow: inset 0 0 0 1px var(--line); }
section.ev2 .dt-grp.closed { padding-bottom: 0; }
section.ev2 .dt-gh { display: flex; align-items: center; gap: 4px; }
section.ev2 .dt-gh-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 17px 0 15px; font-size: 15px; font-weight: 700; text-align: left; }
section.ev2 .dt-gh-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
section.ev2 .e2-chev { width: 16px; height: 16px; color: var(--e2-mut); transition: transform .2s; transform: rotate(180deg); }
section.ev2 .dt-grp.closed .e2-chev { transform: none; }
section.ev2 .dt-pin { background: none; border: 0; cursor: pointer; padding: 6px; color: var(--txt-3); display: inline-flex; order: 2; }
section.ev2 .dt-grp.pinned .dt-pin { color: var(--e2-acc); }
section.ev2 .dt-grp.closed .dt-grp-body { display: none; }
section.ev2 .dt-grp-body { display: block; }

/* botão de odd: rótulo à esquerda, odd verde à direita */
section.ev2 .dodd { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 40px; padding: 0 13px; background: var(--e2-btn); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; cursor: pointer; transition: background .15s, box-shadow .15s; animation: none !important; }
section.ev2 .dodd:hover { background: var(--e2-btn-h); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--e2-acc) 40%, var(--line)); }
section.ev2 .dodd .dk { font-size: 13px; font-weight: 500; color: var(--e2-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-align: left; }
section.ev2 .dodd .dv { font-size: 16px; font-weight: 700; color: var(--e2-odd); font-variant-numeric: tabular-nums; flex: none; }
section.ev2 .dodd.sel { background: var(--e2-acc); box-shadow: none; }
section.ev2 .dodd.sel .dv, section.ev2 .dodd.sel .dk { color: #fff; }
section.ev2 .dodd[disabled] { opacity: .45; cursor: default; }
/* célula empilhada (Intervalo/Final, grades): rótulo em cima, odd embaixo */
section.ev2 .dodd.stk { flex-direction: column; justify-content: center; gap: 3px; height: 54px; }
section.ev2 .dodd.stk .dk { text-align: center; white-space: normal; line-height: 1.2; font-size: 12.5px; }
section.ev2 .dodd.stk .dv { font-size: 15px; }

section.ev2 .e2-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px 7px; }
section.ev2 .e2-lines { display: flex; flex-direction: column; gap: 10px; }
section.ev2 .e2-ln { display: grid; grid-template-columns: 48px repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px; align-items: center; }
section.ev2 .e2-lv { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #c9cfdc; border-radius: 8px; font-variant-numeric: tabular-nums; }
section.ev2 .e2-ln.main .e2-lv { background: var(--e2-btn); color: #fff; box-shadow: inset 2px 0 0 var(--e2-acc); }
section.ev2 .e2-ln .dodd { height: 40px; }
section.ev2 .e2-cs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 7px; }
section.ev2 .e2-cs .e2-col { display: flex; flex-direction: column; gap: 6px; }
section.ev2 .dt-grp:not(.all) .e2-x { display: none !important; }
section.ev2 .e2-more { background: none; border: 0; cursor: pointer; padding: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--e2-acc); }
section.ev2 .dt-grp.all .e2-more .a { display: none; }
section.ev2 .dt-grp:not(.all) .e2-more .b { display: none; }
section.ev2 .e2-empty { padding: 40px 0; text-align: center; color: var(--e2-mut); }

/* ---- coluna lateral */
.e2-side { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.e2-card { background: var(--e2-card); border-radius: var(--e2-r); padding: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.e2-card h4 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--e2-txt); display: flex; justify-content: space-between; align-items: baseline; }
.e2-card h4 small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--e2-mut); }
.e2-vs { text-align: center; }
.e2-vs .e2-lgn { font-size: 12px; color: var(--e2-mut); margin-bottom: 10px; }
.e2-vs .e2-vsrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 14px; }
.e2-vs .e2-vt { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; min-width: 0; }
.e2-vs .e2-vt span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e2-vs .e2-vt .tb { width: 36px !important; height: 36px !important; }
.e2-vs .e2-vsx { font-size: 20px; font-weight: 800; color: var(--e2-mut); }
.e2-field { border-radius: 8px; overflow: hidden; aspect-ratio: 248 / 131; background: repeating-linear-gradient(90deg, #2f6b33 0 9.09%, #357539 9.09% 18.18%); }
.e2-field svg { width: 100%; height: 100%; display: block; }
.e2-cd { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; font-weight: 700; font-size: 15px; }
.e2-cd svg { color: var(--e2-acc); }
.e2-cd.live { color: var(--e2-acc); }
.e2-prob .e2-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: 12px; }
.e2-prob .e2-bar i:nth-child(1) { background: var(--e2-acc); }
.e2-prob .e2-bar i:nth-child(2) { background: var(--txt-3); }
.e2-prob .e2-bar i:nth-child(3) { background: var(--e2-txt); }
.e2-prob .e2-pv { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.e2-prob .e2-pv div:nth-child(2) { text-align: center; }
.e2-prob .e2-pv div:nth-child(3) { text-align: right; }
.e2-prob b { display: block; font-size: 16px; }
.e2-prob span { font-size: 11px; color: var(--e2-mut); }
.e2-fm { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 8px; }
.e2-fm .e2-ft { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; min-width: 0; }
.e2-fm .e2-ft span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e2-fm .e2-ft .tb { width: 20px !important; height: 20px !important; flex: none; }
.e2-fm .e2-bd { display: flex; gap: 5px; }
.e2-fm .e2-bd i { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; }
.e2-fm .e2-bd i.V { background: var(--green); color: #06230f; }
.e2-fm .e2-bd i.E { background: var(--e2-btn); color: var(--e2-mut); }
.e2-fm .e2-bd i.D { background: var(--red); color: #fff; }
.e2-fm .e2-bd i:first-child { box-shadow: 0 0 0 2px var(--e2-card), 0 0 0 3px var(--txt-3); }
.e2-h2 .e2-hs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.e2-h2 .e2-hs div { background: var(--e2-btn); border-radius: 8px; padding: 8px 4px; text-align: center; }
.e2-h2 .e2-hs b { display: block; font-size: 17px; }
.e2-h2 .e2-hs span { font-size: 11px; color: var(--e2-mut); }
.e2-h2 .e2-hj { border-top: 1px solid var(--line); padding: 9px 0 0; margin-top: 9px; font-size: 12px; }
.e2-h2 .e2-hj .r { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-weight: 700; }
.e2-h2 .e2-hj .r span:first-child { text-align: right; }
.e2-h2 .e2-hj .r b { background: var(--e2-btn); border-radius: 6px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.e2-h2 .e2-hj .m { display: flex; justify-content: space-between; color: var(--e2-mut); font-size: 11px; margin-top: 4px; }

/* desktop largo: coluna lateral fixa na coluna do cupom (posição medida pelo sb.js) */
@media (min-width: 1200px) {
  .e2-side.fixa { position: fixed; z-index: 6; margin: 0; top: var(--e2y, 72px); left: var(--e2x); width: var(--e2w); max-height: calc(100vh - var(--e2y, 72px) - 76px); overflow-y: auto; scrollbar-width: none; }
  .e2-side.fixa::-webkit-scrollbar { display: none; }
}
@media (max-width: 1100px) {
  .e2-hero .e2-box { inset: 14px 40px; }
}
@media (max-width: 640px) {
  section.ev2 { padding: 0 10px 20px; }
  .e2-hero { height: 196px; }
  .e2-hero .e2-box { inset: 0 0; grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 0 12px; }
  .e2-tm { gap: 10px; font-size: 14px; }
  .e2-tm.h { flex-direction: column-reverse; text-align: center; }  /* markup do mandante é nome→escudo: inverte p/ escudo em cima */
  .e2-tm.a { flex-direction: column; }
  .e2-tm .e2-nm { text-align: center; max-width: 100%; }
  .e2-mid { font-size: 13px; }
  .e2-tabs { top: 52px; }
  section.ev2 .dt-grp { padding: 0 12px 12px; }
  section.ev2 .dt-gh-toggle { font-size: 14px; }
  /* 3 opções por linha no celular: empilha rótulo e odd (como na referência) */
  section.ev2 .e2-row.c3 .dodd { flex-direction: column; justify-content: center; gap: 3px; height: 54px; padding: 0 6px; }
  section.ev2 .e2-row.c3 .dodd .dk { text-align: center; white-space: normal; line-height: 1.2; font-size: 12px; }
  section.ev2 .e2-ln { grid-template-columns: 40px repeat(var(--n, 2), minmax(0, 1fr)); }
  section.ev2 .e2-ln[style*="--n: 3"] .dodd { flex-direction: column; justify-content: center; gap: 2px; height: 50px; padding: 0 5px; }
  section.ev2 .e2-ln[style*="--n: 3"] .dodd .dk { font-size: 11px; white-space: normal; text-align: center; line-height: 1.15; }
  section.ev2 .dodd .dk { font-size: 12px; }
  section.ev2 .dodd .dv { font-size: 15px; }
}

/* ---- card do jogo: estádio de fundo (desenhado em CSS; cena por esporte via [data-cena]) */
.e2-hero .e2-box { overflow: hidden; isolation: isolate; }
.e2-box > .e2-tm, .e2-box > .e2-mid { position: relative; z-index: 2; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
.e2-box > .e2-tm .tb { filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.e2-box > .e2-mid { color: #e6e8ef; }
.e2-stad, .e2-stad > i { position: absolute; inset: 0; display: block; pointer-events: none; }
.e2-stad { z-index: 0; border-radius: inherit; overflow: hidden; }
/* céu noturno */
.e2-stad .s-sky { background: radial-gradient(120% 90% at 50% -10%, #1d2c4f 0%, #0b1222 48%, #05070d 80%); }
/* torcida: pontos coloridos desfocados na arquibancada */
.e2-stad .s-crowd {
  top: 14%; bottom: 44%;
  background:
    radial-gradient(circle, rgba(255,255,255,.42) 1px, transparent 1.7px) 0 0 / 7px 6px,
    radial-gradient(circle, color-mix(in srgb, var(--e2-acc) 70%, transparent) 1.1px, transparent 1.8px) 3px 2px / 9px 7px,
    radial-gradient(circle, rgba(140,175,255,.4) 1px, transparent 1.7px) 5px 4px / 11px 8px,
    radial-gradient(circle, rgba(255,214,120,.32) 1px, transparent 1.7px) 1px 5px / 13px 9px,
    linear-gradient(180deg, #0a0f1d 0%, #141d33 70%, #0c1222 100%);
  filter: blur(.7px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 85%, transparent 100%);
}
/* piso em perspectiva (gramado / quadra / palco) */
.e2-stad .s-floor { top: 50%; perspective: 260px; overflow: hidden; }
.e2-stad .s-floor b {
  position: absolute; left: -40%; right: -40%; top: 0; height: 220%; transform-origin: 50% 0; transform: rotateX(58deg);
  background-color: #1f7130;
  filter: blur(.4px);
  background-image:
    radial-gradient(circle at 50% 32%, transparent 9%, rgba(255,255,255,.55) 9.4%, rgba(255,255,255,.55) 9.9%, transparent 10.3%),
    linear-gradient(90deg, transparent 49.85%, rgba(255,255,255,.55) 49.85% 50.15%, transparent 50.15%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0 .6%, transparent .6%),
    repeating-linear-gradient(90deg, #1d6a2b 0 6.25%, #237a33 6.25% 12.5%);
}
/* refletores: dois focos nos cantos + fachos de luz */
.e2-stad .s-lights {
  background:
    radial-gradient(circle at 9% 6%, #fff 0 2px, rgba(205,225,255,.75) 3px, rgba(150,190,255,.22) 26px, transparent 90px),
    radial-gradient(circle at 91% 6%, #fff 0 2px, rgba(205,225,255,.75) 3px, rgba(150,190,255,.22) 26px, transparent 90px),
    conic-gradient(from 128deg at 9% 6%, transparent 0deg, rgba(200,225,255,.10) 14deg, transparent 34deg),
    conic-gradient(from 198deg at 91% 6%, transparent 0deg, rgba(200,225,255,.10) 20deg, transparent 34deg);
  mix-blend-mode: screen;
  animation: e2luz 6s ease-in-out infinite;
}
@keyframes e2luz { 50% { opacity: .82; } }
/* escurece pra leitura + vinheta + toque da cor da marca no pé */
.e2-stad .s-shade {
  background:
    radial-gradient(90% 120% at 50% 55%, transparent 35%, rgba(4,5,10,.7) 100%),
    linear-gradient(180deg, rgba(4,5,10,.25) 0%, rgba(4,5,10,.35) 45%, rgba(4,5,10,.72) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--e2-acc) 22%, transparent) 0%, transparent 35%);
}
/* basquete: quadra de madeira, luz mais quente */
.e2-box[data-cena="basquete"] .s-sky { background: radial-gradient(120% 90% at 50% -10%, #2a2016 0%, #120d09 50%, #070504 82%); }
.e2-box[data-cena="basquete"] .s-floor b { background-color: #8a5a2b; background-image:
    radial-gradient(circle at 50% 30%, transparent 8%, rgba(255,255,255,.6) 8.4%, rgba(255,255,255,.6) 8.9%, transparent 9.3%),
    linear-gradient(90deg, transparent 49.85%, rgba(255,255,255,.6) 49.85% 50.15%, transparent 50.15%),
    linear-gradient(180deg, rgba(255,255,255,.6) 0 .6%, transparent .6%),
    repeating-linear-gradient(90deg, #8f5c2b 0 2.2%, #9a6532 2.2% 4.4%, #86552a 4.4% 6.6%); }
.e2-box[data-cena="basquete"] .s-lights { filter: sepia(.6) saturate(1.4); }
/* e-sports: palco com grade neon */
.e2-box[data-cena="esports"] .s-sky { background: radial-gradient(120% 90% at 50% -10%, #2b1250 0%, #120822 50%, #06030d 82%); }
.e2-box[data-cena="esports"] .s-crowd { filter: blur(.9px) hue-rotate(220deg) saturate(1.6); }
.e2-box[data-cena="esports"] .s-floor b { background-color: #0c0618; background-image:
    linear-gradient(90deg, rgba(186,85,255,.55) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0,224,255,.45) 1px, transparent 1px);
  background-size: 6.25% 100%, 100% 9%; }
.e2-box[data-cena="esports"] .s-lights { filter: hue-rotate(250deg) saturate(2); }
@media (prefers-reduced-motion: reduce) { .e2-stad .s-lights { animation: none; } }

/* ---- filtros de esporte da lista (Ao vivo / Próximos) no padrão das abas do jogo */
.sb .sb-sporttabs[data-v-f216093a] { gap: 4px; padding: 6px; margin: 0 0 12px; background: var(--card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.sb .spt[data-v-f216093a] { height: 36px; padding: 0 12px; gap: 8px; border: 0; border-radius: 9px; background: none; color: var(--txt-2); font-size: 13px; font-weight: 700; }
.sb .spt[data-v-f216093a]:hover { color: var(--txt); background: none; }
.sb .spt.on[data-v-f216093a] { background: var(--card-2); border: 0; color: var(--txt); box-shadow: inset 0 -2px 0 var(--acc); }
.sb .spt .spt-n { font-size: 11px; font-weight: 500; color: var(--txt-2); }
.sb .spt.on svg[data-v-f216093a] { color: var(--acc); }

/* futebol: foto de estádio no lugar do desenho (o escurecimento .s-shade continua por cima pra leitura) */
.e2-box[data-cena="futebol"] .e2-stad { background: #05070d url(ui/estadio-futebol.webp) center 58% / cover no-repeat; }
.e2-box[data-cena="futebol"] .s-sky, .e2-box[data-cena="futebol"] .s-crowd, .e2-box[data-cena="futebol"] .s-floor, .e2-box[data-cena="futebol"] .s-lights { display: none; }
.e2-box[data-cena="futebol"] .s-shade {
  background:
    radial-gradient(80% 110% at 50% 50%, rgba(4,5,10,.05) 30%, rgba(4,5,10,.5) 100%),
    linear-gradient(180deg, rgba(4,5,10,.1) 0%, rgba(4,5,10,.25) 55%, rgba(4,5,10,.55) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--e2-acc) 18%, transparent) 0%, transparent 30%);
}
@media (max-width: 640px) {
  .e2-box[data-cena="futebol"] .e2-stad { background-image: url(ui/estadio-futebol-800.webp); background-position: center 62%; }
}

/* ---- chips de liga da lista no padrão das abas (barra escura, ativo cinza com traço vermelho, contagem) */
.sb .sb-lgchips[data-v-f216093a] { gap: 4px; padding: 6px; background: var(--card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.sb .lgchip[data-v-f216093a], .sb .lgchip.pop[data-v-f216093a] { height: 36px; padding: 0 12px; gap: 8px; border: 0; border-radius: 9px; background: none; color: var(--txt-2); font-size: 13px; font-weight: 700; white-space: nowrap; }
.sb .lgchip[data-v-f216093a]:hover { color: var(--txt); background: none; }
.sb .lgchip.on[data-v-f216093a], .sb .lgchip.pop.on[data-v-f216093a] { background: var(--card-2); color: var(--txt); box-shadow: inset 0 -2px 0 var(--acc); }
.sb .lgchip .lg-n { font-size: 11px; font-weight: 500; color: var(--txt-2); }

/* basquete: foto de ginásio no lugar do desenho */
.e2-box[data-cena="basquete"] .e2-stad { background: #070504 url(ui/ginasio-basquete.webp) center 62% / cover no-repeat; }
.e2-box[data-cena="basquete"] .s-sky, .e2-box[data-cena="basquete"] .s-crowd, .e2-box[data-cena="basquete"] .s-floor, .e2-box[data-cena="basquete"] .s-lights { display: none; }
.e2-box[data-cena="basquete"] .s-shade {
  background:
    radial-gradient(80% 110% at 50% 50%, rgba(4,5,10,.05) 30%, rgba(4,5,10,.5) 100%),
    linear-gradient(180deg, rgba(4,5,10,.1) 0%, rgba(4,5,10,.28) 55%, rgba(4,5,10,.6) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--e2-acc) 18%, transparent) 0%, transparent 30%);
}
@media (max-width: 640px) {
  .e2-box[data-cena="basquete"] .e2-stad { background-image: url(ui/ginasio-basquete-800.webp); background-position: center 66%; }
}
/* botão "Todas N" ao lado da barra de ligas: mesma altura e formato da barra */
.sb .lgdrop-btn[data-v-f216093a] { height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.sb .lgdrop-btn.open[data-v-f216093a], .sb .lgdrop-btn[data-v-f216093a]:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 55%, var(--line)); }

/* "Todas" agora é a 1ª aba da barra; o botão separado da referência (sem função) sai */
.sb .sb-lgdrop[data-v-f216093a] { display: none !important; }
.sb .sb-lgbar[data-v-f216093a] { position: relative; }
.sb .lgchip.lg-all .lg-chev { width: 14px; height: 14px; color: var(--txt-2); transition: transform .2s; }
.sb .lgchip.lg-all.aberto[data-v-f216093a] { background: var(--card-2); color: var(--txt); }
.sb .lgchip.lg-all.aberto .lg-chev { transform: rotate(180deg); }
/* painel com todas as ligas (mesma pele da barra) */
.sb .lg-panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); background: var(--card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px rgba(0,0,0,.55); padding: 10px; }
.sb .lg-busca input { width: 100%; height: 38px; border: 0; border-radius: 9px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--txt); font: inherit; font-size: 13px; padding: 0 12px; outline: none; }
.sb .lg-busca input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 55%, var(--line)); }
.sb .lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; margin-top: 10px; max-height: min(420px, 60vh); overflow-y: auto; scrollbar-width: thin; }
.sb .lg-item { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--txt-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; min-width: 0; }
.sb .lg-item:hover { background: var(--card-2); color: var(--txt); }
.sb .lg-item.on { background: var(--card-2); color: var(--txt); box-shadow: inset 2px 0 0 var(--acc); }
.sb .lg-item .lgflag-img { width: 16px; height: 16px; flex: none; }
.sb .lg-item .lg-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb .lg-item .lg-n, .sb .lgchip .lg-n { font-size: 11px; font-weight: 500; color: var(--txt-2); }
@media (max-width: 640px) { .sb .lg-grid { grid-template-columns: 1fr; } }
.sb .lg-busca input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); cursor: pointer; }

/* e-sports: foto do palco no lugar do desenho */
.e2-box[data-cena="esports"] .e2-stad { background: #05040c url(ui/palco-esports.webp) center 55% / cover no-repeat; }
.e2-box[data-cena="esports"] .s-sky, .e2-box[data-cena="esports"] .s-crowd, .e2-box[data-cena="esports"] .s-floor, .e2-box[data-cena="esports"] .s-lights { display: none; }
.e2-box[data-cena="esports"] .s-shade {
  background:
    radial-gradient(80% 110% at 50% 50%, rgba(4,5,10,0) 30%, rgba(4,5,10,.45) 100%),
    linear-gradient(180deg, rgba(4,5,10,.05) 0%, rgba(4,5,10,.2) 55%, rgba(4,5,10,.55) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--e2-acc) 18%, transparent) 0%, transparent 30%);
}
@media (max-width: 640px) {
  .e2-box[data-cena="esports"] .e2-stad { background-image: url(ui/palco-esports-800.webp); background-position: center 58%; }
}