/* ════════════════════════════════════════════════════════════════════════
   SLIDE LIBRARY V3 — SHARED, SITE-LEVEL stylesheet (single source of truth)
   ════════════════════════════════════════════════════════════════════════
   This is THE canonical v3 stylesheet. It is served once and referenced by
   every v3 video via:

       <link rel="stylesheet" href="../../../assets/slide-library-v3.css">

   (the same ../../../assets/ prefix the shared ball mascot uses — resolves
   under serve.py for OBS render, under dist/ on aiftbl.com, and via file://).
   build_site.py copies this file to dist/assets/. Edit HERE once → every v3
   video updates. No per-video CSS duplication.

   FIDELITY: reproduces docs/aiftbl-slide-mockup-v3.html EXACTLY — Barlow
   Condensed display font, the mockup palette, and a 1000px dark rounded card
   per slide. The only addition is the reserved transcript band at the bottom
   of every card so the large Group H/I subtitle never overlaps content.

   Everything is scoped under `main.deck` so it cannot touch the shell chrome
   (header / ball / audio player) or collide with §5 legacy patterns.
   Per-video accent colour is `--accent` (set once per episode).
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;900&family=Inter:wght@400;500;600;700&display=swap');

main.deck {
  /* palette — warmed for more appeal (2026-06-02): a warm amber/coral energy set
     layered over the navy base, with cyan kept as a cool brand counterpoint. */
  --v3-cyan:#00d4ff; --v3-gold:#f5a623; --v3-red:#ff4f4f; --v3-green:#3dff8f;
  --v3-blue:#0055ff; --v3-bg:#0b0d18; --v3-bg2:#16121f; --v3-bg3:#1c1622;
  /* warm energy tokens (used for hero letter, big numbers, bars, top bar, glows) */
  --v3-warm:#ff8a3d; --v3-amber:#ffb347; --v3-coral:#ff5d6c; --v3-warm-soft:#ffcf8a;
  --v3-border:rgba(255,170,90,0.14); --v3-border2:rgba(255,170,90,0.30);
  --v3-txt:#f4ece2; --v3-txt2:#b9a795; --v3-txt3:#7a6553;
  --v3-disp:'Barlow Condensed',sans-serif;
  /* per-slide card width = the mockup's 1000px column */
  --v3-card-w:1000px;
  /* FIXED word-display band reserved at the card bottom — the §28 caption
     (big 1–3 words) lives here, above the player. NO other element may sit in
     it. Sized to JUST clear the word-display zone (pill ~112px + ~28px offset
     ≈ 140px) with a small gap — not bigger, so content keeps its room. */
  --v3-band:clamp(150px,15vh,172px);
  --v3-band-h:clamp(150px,15vh,172px);
}

/* ══ THE CARD ══ Each active slide is one mockup card: 1000px, dark gradient,
   cyan hairline, 20px radius. The shell centres it in the viewport. */
main.deck .slide-content.v3 {
  width:min(var(--v3-card-w),100%);
  max-width:var(--v3-card-w);
  margin:0 auto;
  min-height:min(86vh,860px);
  max-height:100%;
  background:linear-gradient(160deg,var(--v3-bg2) 0%,var(--v3-bg3) 100%);
  border:1px solid var(--v3-border);
  border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,170,90,.04);
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(28px,4vh,52px) clamp(28px,4vw,48px) var(--v3-band);
  color:var(--v3-txt);
  font-family:'Inter',sans-serif;
}
/* top progress accent like the mockup .slide-bar */
main.deck .slide-content.v3::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--v3-amber),var(--v3-warm),var(--v3-coral));z-index:6;
}
/* content stacks and centres vertically above the band (justify-content:center
   on the card). Single big components (hero) fill width naturally. */
/* `safe center` centers short content but TOP-ALIGNS tall content instead of
   overflowing upward under the header — the title/first row is never cut off the
   top; tall overflow goes downward where the no-cutoff gate catches it. */
main.deck .slide-content.v3{ justify-content:safe center; }

/* ── PLAYER-SLIDER slide is ALSO a v3 card (the §21 h-parent). v3_player_slider
   adds `v3` to the slide-content. The band is reserved per h-slide, so the
   parent card's own bottom padding stays small. The h-head sits at the top. */
main.deck .slide-content.h-parent.v3{ justify-content:flex-start; padding-bottom:var(--v3-band); }
main.deck .slide-content.h-parent.v3 .h-slider{ flex:1; min-height:0; }
/* COMPACT the slider head — the legacy .title wraps to ~260px and starves the
   player card (cutoff + crop). Keep it to ~one tight line so the player fills
   the remaining height with a portrait-friendly image box. */
main.deck .slide-content.h-parent.v3 .h-head{ margin-bottom:clamp(8px,1.4vh,16px); gap:14px; align-items:flex-end; }
main.deck .slide-content.h-parent.v3 .h-head .kicker{ font-size:clamp(12px,1.2vw,16px) !important; letter-spacing:3px !important; margin-bottom:6px !important; }
main.deck .slide-content.h-parent.v3 .h-head .title{ font-family:var(--v3-disp) !important; font-weight:900 !important; font-size:clamp(28px,3.2vw,46px) !important; line-height:.95 !important; margin:0 !important; }
/* The word-display band is reserved ONCE on the h-parent card above; the
   individual .h-slide must NOT add its own bottom padding (the v3-band-h class
   on the h-slide is now a no-op — the parent card owns the band). */
/* small inset on ALL sides so the player card never touches the h-slide edges
   (the gate wants >=8px clearance; the player is width/height:100% of the
   h-slide content box). Horizontal padding also restores §21's side gutter. */
main.deck .h-slide.v3-band-h{ padding:2px clamp(16px,1.6vw,24px) clamp(12px,1.6vh,20px); box-sizing:border-box; }

/* ══ §28 WORD-DISPLAY — the MANDATORY visible caption: big, 1–3 words, popping in
   sync with the audio, in the FIXED band at the screen bottom above the player.
   The full-sentence .subtitle-window (§23) is hidden (sync layer only). The word
   band is a child of <section.slide>, so it anchors to the slide (above player);
   the v3 card reserves --v3-band so NOTHING else sits in this zone. ══ */
main.deck .subtitle-window{ display:none !important; }
main.deck .word-display{
  position:absolute; left:0; right:0; margin:0 auto;
  bottom:clamp(22px,2.6vh,44px);
  width:min(var(--v3-card-w),92%);
  text-align:center; z-index:30; pointer-events:none;
}
main.deck .word-display .word{
  display:none; font-family:'Bebas Neue',sans-serif;
  font-size:clamp(46px,4.8vw,88px); color:#fff; letter-spacing:1px; line-height:1;
  padding:12px 26px; background:rgba(0,0,0,0.72); border-radius:14px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  text-shadow:0 4px 16px rgba(0,0,0,0.95),0 2px 6px rgba(0,0,0,0.9);
  max-width:94%; margin:0 auto; overflow-wrap:anywhere;
}
main.deck .word-display .word.active{ display:inline-block; animation:word-pop .18s cubic-bezier(.34,1.56,.64,1); }
@keyframes word-pop{ 0%{transform:scale(.85);opacity:0} 100%{transform:scale(1);opacity:1} }
/* The brand-outro slide also carries a word-display (every section does) — reserve
   the band on its content so the CTA line never sits under the words. */
main.deck .outro-slide .outro-content,
main.deck .outro-slide .slide-content{ padding-bottom:var(--v3-band) !important; box-sizing:border-box; }

/* ══ LIVELINESS (2026-06-02) — data/image entry transitions ══
   1) gentle, always-on Ken-Burns zoom on every entity photo (life on every slide
      + every §21 flip, no JS); 2) per-flip rise/fade for slider sub-slide content,
      keyed on `.h-active` (added by the runtime). Graceful: if `.h-active` never
      fires, content stays at its normal visible state. Respects reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  main.deck .v3-player-img img, main.deck .v3-player-img .entity-photo-img,
  main.deck .v3-split-right img, main.deck .v3-split-right .entity-photo-img,
  main.deck .v3-narrative .entity-photo img, main.deck .v3-venue-strip .entity-photo img {
    animation: v3-kenburns 24s ease-in-out infinite alternate; will-change: transform;
  }
  @keyframes v3-kenburns { from { transform: scale(1.002); } to { transform: scale(1.07); } }

  /* per-flip entrance for the active sub-slide (player / match cards) */
  main.deck .h-slide.h-active .v3-player { animation: v3-sub-rise .52s cubic-bezier(.22,1,.36,1) both; }
  main.deck .h-slide.h-active .v3-player-info > * { animation: v3-sub-rise .5s cubic-bezier(.22,1,.36,1) both; }
  main.deck .h-slide.h-active .v3-player-info > *:nth-child(2){ animation-delay:.06s; }
  main.deck .h-slide.h-active .v3-player-info > *:nth-child(3){ animation-delay:.12s; }
  main.deck .h-slide.h-active .v3-player-info > *:nth-child(4){ animation-delay:.18s; }
  main.deck .h-slide.h-active .v3-player-info > *:nth-child(5){ animation-delay:.24s; }
  main.deck .h-slide.h-active .v3-player-img img,
  main.deck .h-slide.h-active .v3-player-img .entity-photo-img {
    animation: v3-kenburns 24s ease-in-out infinite alternate, v3-fade-in .55s ease both;
  }
  @keyframes v3-sub-rise { from { opacity:0; transform: translateY(15px); } to { opacity:1; transform:none; } }
  @keyframes v3-fade-in  { from { opacity:0; } to { opacity:1; } }

  /* data entry on single slides: stat bars + cards already use §6 .anim fade-up;
     give the big number + stat box a gentle pop as they reveal */
  main.deck .slide.active .v3-bignum, main.deck .slide.active .v3-statbox-num { animation: v3-pop-num .6s cubic-bezier(.34,1.4,.5,1) both; }
  @keyframes v3-pop-num { from { opacity:0; transform: translateY(10px) scale(.92); } to { opacity:1; transform:none; } }
}

/* ══ shared atoms (mockup .sec-label / .h2 / .body-txt) ══ */
main.deck .v3-label{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--v3-amber);background:rgba(255,170,90,.08);
  border:1px solid rgba(255,170,90,.2);padding:5px 14px;border-radius:100px;margin-bottom:16px;
}
main.deck .v3-label.accent{color:var(--accent,var(--v3-gold));background:rgba(245,166,35,.08);border-color:rgba(245,166,35,.2)}
main.deck .v3-label.red{color:var(--v3-red);background:rgba(255,79,79,.08);border-color:rgba(255,79,79,.2)}
main.deck .v3-h2{
  font-family:var(--v3-disp);font-size:clamp(40px,5vw,54px);font-weight:900;
  text-transform:uppercase;line-height:.95;color:#fff;letter-spacing:-.5px;margin-bottom:10px;
}
main.deck .v3-h2 em{color:var(--v3-amber);font-style:normal}
main.deck .v3-h2 b{color:var(--accent,var(--v3-gold));font-style:normal;font-weight:900}
main.deck .v3-body{font-family:'Inter',sans-serif;font-size:clamp(16px,1.6vw,18px);line-height:1.7;color:var(--v3-txt2);max-width:680px;margin-bottom:28px}

/* ══ 1 · HERO (mockup .tp-hero) ══ */
main.deck .v3-hero{align-items:center;text-align:center;position:relative}
main.deck .v3-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(255,170,90,.07) 0%,transparent 70%);pointer-events:none}
main.deck .v3-hero .v3-label{align-self:center}
main.deck .v3-hero-bgletter{
  font-family:var(--v3-disp);font-size:clamp(180px,26vw,260px);font-weight:900;line-height:.85;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;
  background:linear-gradient(135deg,var(--v3-amber),var(--v3-warm),var(--v3-coral));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;opacity:.12;z-index:0;
}
main.deck .v3-hero-title{font-family:var(--v3-disp);font-size:clamp(56px,8vw,80px);font-weight:900;text-transform:uppercase;line-height:.95;color:#fff;letter-spacing:-1px;margin:0 0 6px;position:relative;z-index:1}
main.deck .v3-hero-title span{color:var(--v3-amber)}
main.deck .v3-hero-title b{color:var(--accent,var(--v3-gold));font-weight:900}
main.deck .v3-hero-sub{font-family:var(--v3-disp);font-size:clamp(20px,2.8vw,28px);font-weight:300;color:var(--v3-txt3);letter-spacing:5px;text-transform:uppercase;margin-bottom:28px;position:relative;z-index:1}
main.deck .v3-hero-div{width:72px;height:3px;background:linear-gradient(90deg,var(--v3-amber),var(--v3-coral));border-radius:2px;margin:0 auto 28px;position:relative;z-index:1}
main.deck .v3-hero-body{font-size:clamp(16px,1.8vw,20px);line-height:1.7;color:var(--v3-txt2);max-width:660px;position:relative;z-index:1}

/* ══ 2 · TEAMS GRID (mockup .tp-teams + .tcard) ══ */
main.deck .v3-teams-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%}
main.deck .v3-tcard{background:rgba(255,255,255,.03);border:1px solid var(--v3-border);border-radius:14px;padding:24px 16px 20px;text-align:center;position:relative;overflow:hidden;transition:border-color .25s,background .25s,transform .25s}
main.deck .v3-tcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--v3-amber),var(--v3-coral))}
main.deck .v3-tcard.hl{border-color:var(--accent,var(--v3-gold));background:rgba(255,170,90,.04);transform:translateY(-6px);box-shadow:0 0 40px rgba(245,166,35,.30)}
main.deck .v3-tcard img{height:52px;width:auto;border-radius:4px;margin:0 auto 14px;display:block;box-shadow:0 4px 16px rgba(0,0,0,.4)}
main.deck .v3-tcard-name{font-family:var(--v3-disp);font-size:22px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
main.deck .v3-tcard-rank{font-size:13px;font-weight:700;color:var(--v3-amber);letter-spacing:1px}
main.deck .v3-tcard-detail{font-size:12px;color:var(--v3-txt3);margin-top:4px;line-height:1.4}

/* ══ 3 · STAT SPLIT (mockup .tp-stat) ══ */
main.deck .v3-stat{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;width:100%}
main.deck .v3-bignum{font-family:var(--v3-disp);font-size:clamp(110px,14vw,150px);font-weight:900;line-height:.9;background:linear-gradient(135deg,var(--v3-amber),var(--v3-warm));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
main.deck .v3-statbox{margin-top:24px;padding:22px 24px;background:rgba(255,170,90,.05);border:1px solid var(--v3-border2);border-radius:12px}
main.deck .v3-statbox-lbl{font-size:12px;font-weight:700;color:var(--v3-txt3);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
main.deck .v3-statbox-row{display:flex;align-items:baseline;gap:14px}
main.deck .v3-statbox-num{font-family:var(--v3-disp);font-size:72px;font-weight:900;color:var(--v3-amber);line-height:1}
main.deck .v3-statbox-tag{font-family:var(--v3-disp);font-size:20px;font-weight:700;color:var(--accent,var(--v3-gold))}
main.deck .v3-bars{display:flex;flex-direction:column;gap:18px}
main.deck .v3-bar-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
main.deck .v3-bar-name{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--v3-txt);text-transform:uppercase;letter-spacing:.5px}
main.deck .v3-bar-name img{height:18px;border-radius:2px}
main.deck .v3-bar-val{font-family:var(--v3-disp);font-size:20px;font-weight:700;color:var(--v3-amber)}
main.deck .v3-bar-track{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
main.deck .v3-bar-fill{height:100%;border-radius:4px;width:0;background:linear-gradient(90deg,var(--v3-warm),var(--v3-amber));transition:width 1.2s cubic-bezier(.22,1,.36,1)}
main.deck .v3-bar-fill.accent{background:linear-gradient(90deg,var(--accent,var(--v3-gold)),#ffd479)}

/* ══ 4 · PLAYER CARD (mockup .tp-player) — body of a §21 .h-slide; borderless,
   it FILLS the parent card (the slide-content.h-parent.v3 frame) like the mockup ══ */
main.deck .v3-player{display:grid;grid-template-columns:360px 1fr;width:100%;height:100%;min-height:clamp(300px,36vh,400px);background:transparent;border:none;border-radius:0;overflow:hidden}
main.deck .v3-player-img{position:relative;overflow:hidden;background:linear-gradient(160deg,#0e1e38 0%,#080e1c 100%);border-right:1px solid var(--v3-border);display:flex;align-items:flex-end}
main.deck .v3-player-img img,main.deck .v3-player-img .entity-photo-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
main.deck .v3-player-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,var(--v3-bg2) 0%,transparent 100%);z-index:3;pointer-events:none}
main.deck .v3-player-badge{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:4;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--v3-amber);background:rgba(255,170,90,.12);border:1px solid rgba(255,170,90,.3);padding:5px 14px;border-radius:4px;white-space:nowrap}
main.deck .v3-player-badge.accent{background:rgba(245,166,35,.12);border-color:rgba(245,166,35,.3);color:var(--accent,var(--v3-gold))}
main.deck .v3-player-info{padding:40px 36px;display:flex;flex-direction:column;justify-content:center}
main.deck .v3-player-role{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent,var(--v3-gold));margin-bottom:12px}
main.deck .v3-player-name{font-family:var(--v3-disp);font-size:clamp(48px,5vw,64px);font-weight:900;line-height:.95;text-transform:uppercase;color:#fff;letter-spacing:-.5px;margin-bottom:6px}
main.deck .v3-player-name em{display:block;font-style:normal;color:var(--v3-amber)}
main.deck .v3-player-club{font-size:16px;color:var(--v3-txt2);font-weight:500;margin-bottom:24px}
main.deck .v3-player-stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
main.deck .v3-pstat{background:rgba(255,255,255,.04);border:1px solid var(--v3-border);border-radius:10px;padding:14px 18px;text-align:center;min-width:76px}
main.deck .v3-pstat-v{font-family:var(--v3-disp);font-size:34px;font-weight:900;color:var(--v3-amber);display:block;line-height:1;margin-bottom:4px}
main.deck .v3-pstat-v.red{color:var(--v3-red)} main.deck .v3-pstat-v.gold{color:var(--accent,var(--v3-gold))}
main.deck .v3-pstat-l{font-size:10px;font-weight:700;color:var(--v3-txt3);text-transform:uppercase;letter-spacing:1px}
main.deck .v3-player-quote{font-size:17px;line-height:1.7;color:var(--v3-txt2);border-left:3px solid var(--v3-amber);padding-left:16px}
main.deck .v3-player-quote.accent{border-left-color:var(--accent,var(--v3-gold))}

/* ══ 4b · MATCH CARD — one fixture per §21 sub-slide, stadium photo LEFT (reuses
   the v3-player grid/image/h-slide model, so it inherits every no-cutoff fix).
   Root = .v3-player.v3-match; image = .v3-player-img (stadium); info = .v3-player-info. ══ */
main.deck .v3-match .v3-player-img img,
main.deck .v3-match .v3-player-img .entity-photo-img{ object-position:center 45%; }  /* show the stadium body */
main.deck .v3-match-date{ font-family:var(--v3-disp); font-size:clamp(38px,4.4vw,60px); font-weight:900; color:#fff; line-height:.95; margin-bottom:16px; }
main.deck .v3-match-date em{ color:var(--accent,var(--v3-gold)); font-style:normal; }
main.deck .v3-match-teams{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
main.deck .v3-match-team{ display:flex; align-items:center; gap:12px; font-family:var(--v3-disp); font-size:clamp(26px,2.8vw,38px); font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.5px; }
main.deck .v3-match-team img{ height:clamp(26px,2.4vh,34px); border-radius:3px; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.4); }
main.deck .v3-match-vs{ font-family:var(--v3-disp); font-size:clamp(13px,1.3vw,17px); font-weight:700; color:var(--v3-txt3); letter-spacing:3px; margin-left:46px; }
main.deck .v3-match-venue{ font-family:'Inter',sans-serif; font-size:clamp(14px,1.4vw,18px); color:var(--v3-txt2); margin-bottom:16px; }

/* ══ 5 · NARRATIVE (mockup .tp-narrative) ══ */
main.deck .v3-narrative{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;width:100%}
/* 4 story beats sit in a 2×2 grid (not a tall single column) so a 4-beat
   narrative + an injected hero photo still fits above the word band. */
main.deck .v3-narrative > div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
main.deck .v3-coachpair{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
main.deck .v3-coachcard{background:rgba(255,255,255,.04);border:1px solid var(--v3-border);border-radius:10px;padding:18px 22px;flex:1;min-width:130px}
main.deck .v3-coachcard img{height:36px;border-radius:3px;display:block;margin-bottom:8px}
main.deck .v3-coachcard-name{font-family:var(--v3-disp);font-size:22px;font-weight:700;color:#fff}
main.deck .v3-coachcard-role{font-size:12px;color:var(--v3-txt3);margin-top:3px}
main.deck .v3-ncard{background:rgba(255,255,255,.03);border:1px solid var(--v3-border);border-radius:12px;padding:20px;margin-bottom:12px;transition:border-color .2s,background .2s}
main.deck .v3-ncard:last-child{margin-bottom:0}
main.deck .v3-ncard.hl{border-color:var(--accent,var(--v3-gold));background:rgba(255,170,90,.04)}
main.deck .v3-ncard.star{border-color:rgba(245,166,35,.2)}
main.deck .v3-nc-num{font-family:var(--v3-disp);font-size:44px;font-weight:900;color:rgba(255,170,90,.18);line-height:1;margin-bottom:6px}
main.deck .v3-ncard.star .v3-nc-num{color:rgba(245,166,35,.3)}
main.deck .v3-nc-title{font-size:14px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}
main.deck .v3-ncard.star .v3-nc-title{color:var(--accent,var(--v3-gold))}
main.deck .v3-nc-body{font-size:13px;color:var(--v3-txt3);line-height:1.55}
/* a hero photo injected into a narrative's left column (e.g. the draw venue) is
   capped so the beats clear the word band even on desktop. */
main.deck .v3-narrative .entity-photo{max-height:clamp(150px,18vh,210px) !important}

/* ══ 6 · BIG SPLIT (mockup .tp-split) — left content + right hero photo ══ */
main.deck .v3-split{display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:clamp(340px,44vh,440px);border:none;border-radius:0;overflow:hidden}
main.deck .v3-split-left{padding:40px;display:flex;flex-direction:column;justify-content:center}
main.deck .v3-split-right{position:relative;overflow:hidden;border-left:1px solid var(--v3-border);background:linear-gradient(160deg,#0a1628 0%,#080e1c 100%);display:flex;align-items:center;justify-content:center}
main.deck .v3-split-right img,main.deck .v3-split-right .entity-photo-img{width:100%;height:100%;object-fit:cover;display:block}
main.deck .v3-split-rows{display:flex;flex-direction:column;gap:10px;margin-top:22px}
main.deck .v3-split-row{display:flex;align-items:center;gap:14px;padding:13px 16px;background:rgba(255,255,255,.03);border:1px solid var(--v3-border);border-radius:8px}
main.deck .v3-split-row img{height:22px;border-radius:2px;flex-shrink:0}
main.deck .v3-split-row .arrow{font-size:20px;font-weight:700;color:var(--v3-txt3)}
main.deck .v3-split-row-name{font-weight:700;color:#fff;font-size:15px}
main.deck .v3-split-row-desc{font-size:12px;color:var(--v3-txt3);margin-top:1px}

/* ══ 7 · FIXTURES (mockup .tp-fixtures + .fix-row) ══ */
main.deck .v3-fixtures{display:flex;flex-direction:column;gap:10px;width:100%}
main.deck .v3-fix-row{background:rgba(255,255,255,.03);border:1px solid var(--v3-border);border-radius:10px;padding:16px 22px;display:grid;grid-template-columns:90px 1fr 52px 1fr 150px;align-items:center;gap:14px;transition:background .2s,border-color .2s}
main.deck .v3-fix-row.hl{border-color:var(--accent,var(--v3-gold));background:rgba(245,166,35,.04)}
main.deck .v3-fix-date{font-size:12px;font-weight:700;color:var(--v3-amber);letter-spacing:1px;text-transform:uppercase}
main.deck .v3-fix-team{display:flex;align-items:center;gap:10px}
main.deck .v3-fix-team.r{justify-content:flex-end}
main.deck .v3-fix-team img{height:22px;border-radius:2px;flex-shrink:0}
main.deck .v3-fix-tname{font-family:var(--v3-disp);font-size:20px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px}
main.deck .v3-fix-vs{font-family:var(--v3-disp);font-size:14px;font-weight:700;color:var(--v3-txt3);letter-spacing:2px;text-align:center}
main.deck .v3-fix-venue{font-size:12px;color:var(--v3-txt3);text-align:right;line-height:1.5}
main.deck .v3-venue-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
/* short fixed-height strip so the 3 venue photos always clear the word band
   (a taller strip dips into it). Framed on the stadium body. */
main.deck .v3-venue-strip{margin-top:12px}
main.deck .v3-venue-strip .entity-photo{aspect-ratio:auto;height:clamp(72px,8.5vh,98px);border-radius:10px;overflow:hidden;position:relative}
main.deck .v3-venue-strip .entity-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}

/* ══ 8 · ACTIONS (mockup .tp-actions + .act-card) ══ */
main.deck .v3-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;width:100%}
main.deck .v3-act-card{background:rgba(255,255,255,.03);border:1px solid var(--v3-border);border-radius:14px;padding:28px;position:relative;overflow:hidden;transition:border-color .3s,background .3s}
main.deck .v3-act-card.hl{border-color:rgba(255,170,90,.3);background:rgba(255,170,90,.04)}
main.deck .v3-act-card img{height:40px;border-radius:4px;margin-bottom:12px;display:block}
main.deck .v3-act-team{font-size:11px;font-weight:700;color:var(--v3-txt3);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
main.deck .v3-act-hl{font-family:var(--v3-disp);font-size:28px;font-weight:900;text-transform:uppercase;line-height:1.1;color:#fff;margin-bottom:10px}
main.deck .v3-act-hl em{color:var(--accent,var(--v3-gold));font-style:normal}
main.deck .v3-act-body{font-size:14px;color:var(--v3-txt3);line-height:1.6}

/* ════════════════ RESPONSIVE — aiftbl.com web reading + the no-cutoff gate.
   The 1000px card already fits desktop/tablet; mobile compacts so content
   clears the transcript band (the MP4 renders at 1920 = desktop rules). ═══ */
@media (min-width: 761px) and (max-width: 1100px){
  main.deck .slide-content.v3{ --v3-band:clamp(140px,15vh,170px); --v3-band-h:clamp(104px,11vh,134px); padding-left:clamp(24px,3vw,36px); padding-right:clamp(24px,3vw,36px); min-height:78vh; }
  main.deck .v3-teams-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  main.deck .v3-tcard{padding:16px 12px}
  main.deck .v3-tcard img{height:44px;margin-bottom:10px}
  main.deck .v3-coach-chip{margin-top:7px !important;padding:4px 8px !important}
  main.deck .v3-coach-chip img{width:36px !important;height:36px !important}
  main.deck .v3-stat,main.deck .v3-split{grid-template-columns:1fr;gap:22px}
  /* narrative stacks; cap an injected hero photo + compact beats so they clear the band */
  main.deck .v3-narrative{grid-template-columns:1fr;gap:14px}
  main.deck .v3-narrative .entity-photo{max-height:15vh !important;margin-bottom:8px !important}
  main.deck .v3-narrative > div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:start}
  main.deck .v3-nc-body{font-size:12px;line-height:1.35}
  main.deck .v3-narrative .v3-coachpair{margin-top:14px}
  main.deck .v3-ncard{padding:12px 16px;margin-bottom:8px}
  main.deck .v3-nc-num{font-size:32px;margin-bottom:3px}
  main.deck .v3-nc-title{font-size:13px;margin-bottom:3px}
  main.deck .v3-nc-body{font-size:13px;line-height:1.4}
  /* player card a touch shorter + tighter so the 4th (3-stat) card clears the band */
  main.deck .v3-player{grid-template-columns:minmax(210px,36%) 1fr;min-height:clamp(280px,34vh,380px)}
  main.deck .v3-player-info{padding:18px 22px;justify-content:center}
  main.deck .v3-player-name{font-size:clamp(34px,3.8vw,46px)}
  main.deck .v3-player-club{margin-bottom:10px}
  main.deck .v3-player-stats{gap:10px;margin-bottom:12px}
  main.deck .v3-player-quote{font-size:15px;line-height:1.45}
  main.deck .word-display .word{font-size:clamp(40px,5vw,72px);padding:12px 24px}
}
@media (max-width: 760px){
  main.deck{ --v3-band:clamp(104px,13vh,126px); --v3-band-h:clamp(104px,13vh,126px); }
  main.deck .slide-content.v3{ min-height:0; border-radius:14px; padding:18px 16px var(--v3-band); }
  /* slider head tighter on mobile so the stacked player image+info fit */
  main.deck .slide-content.h-parent.v3 .h-head{ margin-bottom:8px; }
  main.deck .slide-content.h-parent.v3 .h-head .title{ font-size:clamp(24px,6vw,34px) !important; }
  main.deck .v3-h2{font-size:clamp(30px,8vw,40px)}
  main.deck .v3-body{font-size:14px;line-height:1.5;margin-bottom:12px}
  main.deck .v3-hero-title{font-size:clamp(42px,12vw,56px)}
  main.deck .v3-hero-sub{font-size:clamp(15px,4.5vw,20px);letter-spacing:3px;margin-bottom:16px}
  main.deck .v3-hero-body{font-size:clamp(14px,4vw,16px)}
  main.deck .v3-hero-bgletter{font-size:clamp(150px,40vw,200px)}
  /* teams 2×2 compact */
  main.deck .v3-teams-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  main.deck .v3-tcard{padding:10px 8px}
  main.deck .v3-tcard img{height:32px;margin-bottom:6px}
  main.deck .v3-tcard-name{font-size:18px;margin-bottom:2px}
  main.deck .v3-tcard-rank{font-size:12px}
  main.deck .v3-tcard-detail{font-size:10px;margin-top:2px}
  /* coach chip inside a team card — shrink so the 2×2 bottom row clears the band */
  main.deck .v3-coach-chip{margin-top:5px !important;padding:3px 6px !important;gap:6px !important}
  main.deck .v3-coach-chip img{width:28px !important;height:28px !important}
  main.deck .v3-coach-chip span{font-size:10px !important}
  /* stat stacked */
  main.deck .v3-stat{grid-template-columns:1fr;gap:14px}
  main.deck .v3-bignum{font-size:clamp(72px,22vw,100px)}
  main.deck .v3-statbox{margin-top:10px;padding:14px 16px}
  main.deck .v3-statbox-num{font-size:52px}
  main.deck .v3-bars{gap:12px}
  /* player stacked compact */
  /* 1-col on mobile (393px is too narrow for a 2-col player without cramping the
     name/stats). Image is a top banner cropped to the FACE via object-position;
     info gets full width below — no text cutoff. */
  main.deck .v3-player{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0}
  main.deck .v3-player-img{min-height:138px;max-height:22vh}
  main.deck .v3-player-img img,main.deck .v3-player-img .entity-photo-img{object-position:center 22%}
  main.deck .v3-player-info{padding:10px 14px;justify-content:flex-start}
  main.deck .v3-player-role{margin-bottom:4px}
  main.deck .v3-player-name{font-size:clamp(28px,8vw,40px)}
  main.deck .v3-player-name em{display:inline}
  main.deck .v3-player-club{font-size:13px;margin-bottom:7px}
  main.deck .v3-player-stats{gap:6px;margin-bottom:8px}
  main.deck .v3-pstat{padding:6px 10px;min-width:0;flex:1 1 calc(33% - 4px)}
  main.deck .v3-pstat-v{font-size:24px}
  main.deck .v3-player-quote{font-size:13px;line-height:1.35;padding-left:10px}
  /* match card mobile compaction */
  main.deck .v3-match-date{font-size:clamp(26px,6.5vw,36px);margin-bottom:8px}
  main.deck .v3-match-teams{gap:6px;margin-bottom:9px}
  main.deck .v3-match-team{font-size:clamp(19px,5vw,26px);gap:9px}
  main.deck .v3-match-team img{height:20px}
  main.deck .v3-match-vs{margin-left:29px}
  main.deck .v3-match-venue{font-size:12px;margin-bottom:8px}
  /* narrative stacked compact */
  main.deck .v3-narrative{grid-template-columns:1fr;gap:6px}
  main.deck .v3-narrative .v3-body{margin-bottom:6px}
  main.deck .v3-narrative .entity-photo{max-height:11vh !important;margin-bottom:6px !important}
  /* 4 beats → 2×2 grid: halves their stacked height so they clear the word band */
  main.deck .v3-narrative > div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
  main.deck .v3-coachpair{margin-top:8px;gap:8px}
  main.deck .v3-coachcard{padding:10px 12px}
  main.deck .v3-coachcard img{height:26px;margin-bottom:6px}
  main.deck .v3-ncard{padding:8px 12px;margin-bottom:6px}
  main.deck .v3-nc-num{font-size:24px;margin-bottom:1px}
  main.deck .v3-nc-title{font-size:12px;margin-bottom:2px}
  main.deck .v3-nc-body{font-size:12px;line-height:1.3}
  /* split stacked */
  main.deck .v3-split{grid-template-columns:1fr;min-height:0}
  main.deck .v3-split-left{padding:16px}
  main.deck .v3-split-right{min-height:150px;max-height:24vh;border-left:none;border-top:1px solid var(--v3-border)}
  main.deck .v3-split-rows{gap:8px;margin-top:12px}
  main.deck .v3-split-row{padding:9px 12px}
  /* fixtures compact; venue strip is supplementary on mobile web */
  main.deck .v3-fixtures{gap:8px}
  main.deck .v3-fix-row{grid-template-columns:60px 1fr 28px 1fr;column-gap:8px;row-gap:2px;padding:9px 12px}
  main.deck .v3-fix-date{font-size:11px}
  main.deck .v3-fix-tname{font-size:16px}
  main.deck .v3-fix-team img{height:18px}
  main.deck .v3-fix-venue{grid-column:1 / -1;text-align:left;font-size:11px}
  main.deck .v3-venue-strip{display:none}
  /* actions 2×2 compact */
  main.deck .v3-actions{grid-template-columns:repeat(2,1fr);gap:10px}
  main.deck .v3-act-card{padding:12px}
  main.deck .v3-act-card img{height:30px;margin-bottom:8px}
  main.deck .v3-act-hl{font-size:22px;margin-bottom:6px}
  main.deck .v3-act-body{font-size:12px;line-height:1.4}
  /* word-display: smaller chunk on the narrow card, still big + bold */
  main.deck .word-display{bottom:clamp(14px,1.8vh,24px);width:94%}
  main.deck .word-display .word{font-size:clamp(30px,7.5vw,50px);padding:9px 16px;border-radius:10px}
}