/* Cade sports v8 (2026-10-06): the sports lobby in the v8 language. The shared language and the product parts (hero + stage
   tabs, the stats band, the live round on the field or the court with the scorebug, stamp and ticket, the scoreboard game
   card, the list panel rows, the cards, the ticker) live in the kit, /lib/v8/v8.css (README there).
   This file keeps the lobby's own parts: the game groups on the market board, tournaments, how it settles, and its deltas. */

/* ═════ HERO: two arts; the league tabs a touch wider ═════ */
.stage-art[data-art=nfl]{--obj-sm:18% 40%}
.stage-art[data-art=nba]{--obj:60% 40%;--obj-sm:62% 40%}
.hero-tabs .tab span{min-width:120px}
.band-h{min-width:3.4em}

/* ═════ THE BIG GAME: the kit .round given whole to the skycam (/lib/v8/skycam.css), NFL or NBA ═════ */

/* ═════ THE MARKETS: one group per game on the kit's board ═════ */
.grp+.grp{margin-top:56px}
.grp-hd{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;margin:0 0 24px;padding-bottom:18px;border-bottom:2px solid var(--bg5)}
.grp-med{flex:none;display:block;height:52px}
.grp-med svg{height:100%;width:auto;display:block}
.grp-t{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(30px,2.8vw,40px);line-height:.9;color:var(--paper)}
.grp-m{margin:6px 0 0;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.grp-m b{color:var(--paper);font-weight:800}
.grp-go{margin-left:auto;font-size:16px}
.more-row{margin-top:48px}

/* ═════ LIVE PREDICTIONS ═════ */
.tick-sec{padding-top:88px}

/* ═════ UP NEXT + BIGGEST CALLS: two kit list panels ═════ */
.two-sec{padding-top:96px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.calls .irow{grid-template-columns:auto minmax(0,1fr) auto}

/* ═════ TOURNAMENTS ═════ */
.tour-sec{padding-top:96px}
.tour{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.tour-face{height:100%;display:flex;flex-direction:column;align-items:flex-start;padding:38px 44px 34px 40px}
.tour-k{margin:0;font-family:var(--data);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.violet .tour-k{color:var(--yellow)}.cream .tour-k{color:var(--violet-deep)}
.tour-h{margin:12px 0 0;font-size:clamp(40px,4vw,60px)}
.tour-p{margin:14px 0 0;font-family:var(--read);font-size:18px;line-height:1.38;max-width:36ch}
.tour-l{display:flex;gap:28px;margin:16px 0 0}
.tour-l div{display:flex;flex-direction:column-reverse;gap:4px}
.tour-l dt{font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#4A453E}
.tour-l dd{margin:0;font-family:var(--data);font-weight:800;font-size:15px}
.tour-cta{margin-top:auto;position:relative;top:10px}
.tour-face>p:last-of-type{margin-bottom:28px}

/* ═════ HOW IT SETTLES (a kit band holding the numbers) ═════ */
.how-face{display:block;padding:30px 48px}
.how-st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.how-st div{display:flex;flex-direction:column-reverse;gap:8px;padding:0 24px}
.how-st div:first-child{padding-left:0}
.how-st div+div{border-left:2px solid #34312d}
.how-st dd{margin:0;font-family:var(--data);font-weight:800;font-size:clamp(28px,2.8vw,42px);line-height:1;color:var(--paper);white-space:nowrap}
.how-st div:first-child dd{color:var(--yellow)}
.how-st dt{font-family:var(--read);font-size:16px;color:var(--muted)}
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;counter-reset:st}
.steps li{counter-increment:st;display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:2px solid #2E2B28}
.steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--data);font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--orange)}
.steps b{font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(28px,2.4vw,36px);line-height:.92;color:var(--paper)}
.steps span{font-family:var(--read);font-size:18px;line-height:1.38;color:var(--muted);max-width:32ch}
.trust{margin:40px 0 0;max-width:72ch;font-family:var(--read);font-size:17px;line-height:1.45;color:var(--paper)}
.fine{margin-top:40px;text-align:left}

/* ═════ the 1180 / 1100 / 1023 / 760 / 360 rungs ═════ */
@media (max-width:1180px){.how-face{padding:28px 40px}}
@media (max-width:1100px){
  .how-st{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .how-st div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:1023px){
  .two,.tour{grid-template-columns:1fr;gap:30px}
  .steps{grid-template-columns:1fr;gap:24px}
}
@media (max-width:760px){
  .hero-tabs .tab span{min-width:0;white-space:normal}
  .band-h{min-width:0}
  .live-tabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .live-tabs .tab span{white-space:nowrap}
  .grp+.grp{margin-top:40px}
  .grp-hd{gap:12px 14px;margin-bottom:20px}
  .grp-med{height:44px}
  .grp-go{margin-left:0;flex-basis:100%;min-height:40px}
  .grp .grid>li:nth-child(n+3){display:none}
  .more-row{margin-top:36px}
  .tick-sec{padding-top:56px}
  .two-sec,.tour-sec{padding-top:64px}
  .two,.tour{gap:32px}
  .calls .irow .irow-med{display:block;height:34px}
  .tour-face{padding:30px 24px 28px 22px}
  .tour-p{font-size:17px}
  .how-face{display:flex;padding:24px 22px}
  .how-st dd{font-size:clamp(22px,7vw,30px)}
  .how-st dt{font-size:14px}
  .how-st div{padding:0 0 0 14px}
  .how-st div:nth-child(odd){padding-left:0;border-left:0}
  .steps{margin-top:36px}
  .steps span{font-size:17px}
  .trust{margin-top:32px;font-size:16px}
  .fine{margin-top:32px}
}
@media (max-width:360px){
  .live-tabs .tab span{font-size:15px;gap:6px}
  .tour-cta{font-size:19px;padding:0 22px 2px 20px}
}