/* Cade football v8 (2026-10-06): the NFL game centre in the v8 language. The shared language and the product parts (the strip
   stage, the scoreline + Live chip, the ghost keys, the stamp, the fixed stake chips, the play log, the comparison bars, the box
   score, the cards, the ticker) are the kit /lib/v8/v8.css (README there); THE LIVE FIELD + its market is the kit skycam
   (/lib/v8/skycam.css + skycam.js, the client's sportcade render). This file keeps the frame around it and the deltas. */

/* ═════ HERO: the art band (the kit's stage, cut to a band so the field stays the hero) ═════ */
.fb-hero{padding:104px 0 0}
.fbv8 .stage-art img{--obj:50% 30%}
.fbv8 .stage-h{top:auto;bottom:6.4cqw;max-width:none;font-size:clamp(56px,11.5cqw,168px);white-space:nowrap}
.fbv8 .stage-shade{background:linear-gradient(90deg,rgba(14,13,12,.82) 0,rgba(14,13,12,.5) 34%,rgba(14,13,12,0) 58%),linear-gradient(0deg,rgba(11,11,11,.75) 0,rgba(11,11,11,0) 40%)}
.fbv8 .stage-sign{top:6cqw}

/* ═════ THE LIVE FIELD + MARKET: the kit skycam (their sportcade render) in a torn frame, the keys under it ═════ */
.gc{padding-top:40px}
.sky{position:relative;filter:drop-shadow(var(--sh-9))}
.sky .skc-st{clip-path:var(--clip-panel)}
.sky-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-top:24px}
.sky-note{margin:0;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sky-ctl{display:flex;gap:12px}
.sky-ctl .ghost{padding:0 16px}
.sky-ctl[hidden]{display:none}

/* ═════ LIVE FEED ═════ */
.tick-sec{padding-top:72px}

/* ═════ THE DRIVE: one panel, two tabs; the kit play log on dark rows ═════ */
.drive{padding:34px 42px 36px 40px}
.dp[hidden]{display:none}
.plog li{grid-template-columns:118px 58px minmax(0,1fr) auto;gap:0 18px;min-height:58px;padding:8px 20px 8px 18px;background:#1E1C1A}
.plog li:first-child{background:var(--bg5);box-shadow:inset 6px 0 0 var(--yellow)}
.plog li.new{animation-duration:.5s}
.plog-m{height:30px}
.plog-m svg{height:100%;width:auto;display:block}
#dp-stats:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;align-items:start}
.duels{display:flex;flex-direction:column;gap:26px}
.duel-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 10px}
.duel-h b{font-family:var(--data);font-weight:800;font-size:clamp(26px,2.4vw,34px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.duel-h span{font-family:var(--call);font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.duel-k{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.box th,.box td{padding:12px 0;border-bottom:2px solid var(--bg5)}
.box thead th{padding-top:0}
.box td{width:22%}
.comm{display:flex;align-items:center;gap:16px;margin:26px 0 0;padding:12px 18px 11px;background:var(--paper);color:var(--ink);box-shadow:var(--sh-4)}
.comm small{flex:none;font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#4A453B}
.comm span{font-family:var(--read);font-size:17px;line-height:1.35}

/* ═════ LIVE MARKETS: three across ═════ */
.grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 34px}


/* ═════ the 1180 / 1100 / 900 / 760 / 360 rungs ═════ */
@media (max-width:1100px){
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
  .grid3 .card-id{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:1023px){
  #dp-stats:not([hidden]){grid-template-columns:1fr;gap:34px}
}
@media (max-width:900px){
  .grid3{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:760px){
  .fb-hero{padding-top:84px}
  .fbv8 .stage-h{top:auto;bottom:8cqw;left:6cqw;font-size:21cqw}
  .fbv8 .stage-sign{top:6cqw;bottom:auto}
  .fbv8 .stage-shade{background:linear-gradient(0deg,rgba(14,13,12,.85) 0,rgba(14,13,12,.35) 40%,rgba(14,13,12,0) 60%)}
  .gc{padding-top:32px}
  .sky{filter:drop-shadow(var(--sh-5))}
  .sky-bar{flex-direction:column;align-items:stretch;margin-top:20px}
  .sky-ctl{display:grid;grid-template-columns:1fr 1fr}
  .sky-ctl .ghost{justify-content:center;padding:0 10px}
  .tick-sec{padding-top:56px}
  .drive-tabs{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .drive-tabs .tab span{white-space:nowrap}
  .drive{padding:24px 18px 26px 18px}
  .plog li{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"t tm res" "w w w";gap:8px 12px;padding:10px 14px 12px 14px}
  .plog-t{grid-area:t}
  .plog-m{grid-area:tm;height:26px}
  .plog-r{grid-area:res}
  .plog-w{grid-area:w}
  .duel-h span{font-size:16px}
  .comm{flex-direction:column;align-items:flex-start;gap:6px;margin-top:22px}
  .comm span{font-size:16px}
  .grid3{max-width:none}
}
@media (max-width:360px){
  .sky-ctl .ghost{font-size:11px;letter-spacing:.06em;padding:0 6px}
}