/* The Film Room — defense vs position. */

.fm-hero{
  position:relative; border-radius:var(--r); overflow:hidden;
  margin-bottom:var(--sp-5); border:1px solid var(--line);
  box-shadow:var(--sh-3); aspect-ratio:21/8; background:var(--panel2);
}
.fm-hero img{ width:100%; height:100%; object-fit:cover; display:block }
.fm-hero-grade{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,9,7,.1) 30%,rgba(6,9,7,.92) 96%);
}
.fm-hero-t{
  position:absolute; left:var(--sp-5); bottom:var(--sp-4); right:var(--sp-5);
}
.fm-hero-t h2{
  font-family:var(--disp); font-size:clamp(26px,5vw,44px); line-height:var(--lh-disp);
  text-transform:uppercase; color:var(--chalk); text-shadow:0 2px 18px rgba(0,0,0,.8);
}
.fm-hero-t p{ font-size:var(--fs-4); color:var(--muted); margin-top:4px; max-width:60ch }

.fm-load{
  padding:var(--sp-7); text-align:center; color:var(--faint); font-size:var(--fs-4);
}
.fm-load.err b{ display:block; color:var(--red-ink); font-size:var(--fs-6); margin-bottom:var(--sp-2) }
.fm-load.err span{ color:var(--faint) }
.fm-note{ font-size:var(--fs-3); color:var(--faint); line-height:1.6; padding:var(--sp-3) 0 }

/* ---------------------------------------------------------------- header */

.fm-head{ margin-bottom:var(--sp-4) }
.fm-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--sp-3) }
.fm-tab{
  font-size:var(--fs-3); font-weight:700; color:var(--muted);
  border:1px solid var(--line2); border-radius:99px; padding:7px 16px;
  background:var(--panel2);
  transition:color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.fm-tab:hover{ color:var(--chalk) }
.fm-tab.on{ background:var(--yellow); color:#12170f; border-color:transparent }
.fm-tab:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px }

.fm-meta{ font-size:var(--fs-3); color:var(--faint); line-height:1.6 }
.fm-meta b{ color:var(--muted); font-weight:650 }

/* ------------------------------------------------------------------ grid */

.fm-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-5); align-items:start;
}
.fm-panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-5); box-shadow:var(--sh-2); min-width:0;
}
.fm-panel h3{
  font-family:var(--disp); font-size:var(--fs-7); line-height:var(--lh-disp);
  text-transform:uppercase; margin-bottom:var(--sp-4);
}
.fm-h4{
  font-size:var(--fs-1); font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--turf-ink); margin:var(--sp-4) 0 var(--sp-2);
}
.fm-h4:first-child{ margin-top:0 }
.fm-h4-bad{ color:var(--red-ink) }

/* --------------------------------------------------------- ranked table */

.fm-row{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:6px 8px; border-radius:var(--r-xs);
  border-left:3px solid transparent;
}
.fm-row.fm-soft{ border-left-color:var(--turf) }
.fm-row.fm-tough{ border-left-color:var(--red-ink) }
.fm-row:hover{ background:var(--panel2) }

.fm-rk{
  flex:none; width:24px; text-align:right; font-size:var(--fs-2);
  color:var(--faint); font-variant-numeric:tabular-nums;
}
.fm-crest{ flex:none; width:26px; height:26px; object-fit:contain }
span.fm-crest.ph{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--raise); border-radius:50%; font-size:9px; font-weight:800;
  color:var(--muted); letter-spacing:.03em;
}
.fm-team{ display:flex; flex-direction:column; min-width:0; width:118px; flex:none; line-height:1.3 }
.fm-team b{ font-size:var(--fs-4); font-weight:700 }
.fm-team span{
  font-size:var(--fs-1); color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fm-avg{
  flex:none; width:44px; text-align:right; font-size:var(--fs-4); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--chalk);
}
.fm-bar{
  flex:1; height:5px; border-radius:3px; background:var(--raise); overflow:hidden; min-width:40px;
}
.fm-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--turf2),var(--turf-ink)) }
.fm-tough .fm-bar i{ background:linear-gradient(90deg,#7c342f,var(--red-ink)) }

/* ------------------------------------------------------------ soft spots */

.fm-spot{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:8px; border-radius:var(--r-xs); border-left:3px solid transparent;
  background:var(--panel2); margin-bottom:4px;
  box-shadow:inset 0 1px 0 var(--lit);
}
.fm-spot.fm-soft{ border-left-color:var(--turf) }
.fm-spot.fm-tough{ border-left-color:var(--red-ink) }
.fm-spotbody{ display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.35 }
.fm-spotbody b{ font-size:var(--fs-4); font-weight:650 }
.fm-spotbody span{ font-size:var(--fs-2); color:var(--faint) }
.fm-spotnum{ display:flex; flex-direction:column; align-items:flex-end; flex:none; line-height:1.3 }
.fm-spotnum b{
  font-family:var(--disp); font-size:var(--fs-7); line-height:var(--lh-disp);
  color:var(--yellow); font-variant-numeric:tabular-nums;
}
.fm-spotnum span{ font-size:var(--fs-1); color:var(--faint) }

/* ------------------------------------------------------------ responsive */

@media (max-width:880px){
  .fm-grid{ grid-template-columns:minmax(0,1fr) }
  .fm-hero{ aspect-ratio:16/9 }
}
@media (max-width:560px){
  .fm-team{ width:64px }
  .fm-team span{ display:none }
  .fm-panel{ padding:var(--sp-4) }
}

/* ── spruce: the film room gets its lights ──────────────────────────────── */

.fm-head{ position:sticky; top:58px; z-index:20;
  background:linear-gradient(180deg,var(--bg) 82%,transparent);
  padding:var(--sp-3) 0 var(--sp-2); margin:0 0 var(--sp-2) }

.fm-dot{ display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:7px; vertical-align:1px; background:var(--faint) }
.fm-dot-qb{ background:#f2908c } .fm-dot-rb{ background:var(--turf-ink) }
.fm-dot-wr{ background:#8ccdf0 } .fm-dot-te{ background:#eec277 }
.fm-dot-k{ background:#c7d2cc } .fm-dot-dst{ background:#a9bcb2 }

/* the marquee */
.fm-primecard{
  position:relative; overflow:clip;
  background:
    radial-gradient(80% 130% at 12% 0%, rgba(49,173,109,.16), transparent 55%),
    linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid rgba(49,173,109,.35); border-left:3px solid var(--turf);
  border-radius:var(--r); padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--sh-2); margin-bottom:var(--sp-4);
}
.fm-primetag{
  font-size:var(--fs-1); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--turf-ink);
}
.fm-primemain{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-3);
  flex-wrap:wrap }
.fm-primecrest{ width:64px; height:64px; object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) }
span.fm-primecrest.ph{ display:inline-flex; align-items:center; justify-content:center;
  background:var(--raise); border-radius:50%; font-weight:800; color:var(--muted) }
.fm-primeid{ min-width:0; flex:1 }
.fm-primeid b{ display:block; font-size:var(--fs-7); font-weight:750 }
.fm-primeid span{ font-size:var(--fs-3); color:var(--muted) }
.fm-primenum{ text-align:right }
.fm-primenum b{ font-family:var(--disp); font-size:clamp(34px,4vw,46px);
  line-height:var(--lh-disp); color:var(--turf-ink) }
.fm-primenum span{ display:block; font-size:var(--fs-1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint) }
.fm-primefoot{ font-size:var(--fs-3); color:var(--muted); margin-top:var(--sp-3);
  padding-top:var(--sp-3); border-top:1px solid var(--line) }
.fm-primefoot b{ color:var(--chalk) }

/* podium rows stand taller; every bar sweeps in */
.fm-row.fm-podium .fm-rk{ color:var(--yellow); font-size:var(--fs-7) }
.fm-row.fm-podium{ background:linear-gradient(90deg,rgba(255,210,30,.05),transparent 60%) }
.fm-row.fm-soft .fm-bar i{ background:linear-gradient(90deg,var(--turf2),var(--turf-ink)) }
.fm-row.fm-tough .fm-bar i{ background:linear-gradient(90deg,#7c3b36,var(--red-ink)) }
@media (prefers-reduced-motion:no-preference){
  .fm-row .fm-bar i{ transform-origin:left; animation:fmSweep .5s var(--ease) backwards;
    animation-delay:var(--d,0ms) }
  @keyframes fmSweep{ from{ transform:scaleX(0) } }
}

/* the head-to-head crest pair on matchup cards */
.fm-vs{ display:flex; align-items:center; gap:3px; flex:none }
.fm-vs i{ font-style:normal; font-size:var(--fs-1); color:var(--faint) }
.fm-crest-off{ width:26px; height:26px; opacity:.85 }

/* initials sized for the 64px prime chip, not the 26px row chip */
span.fm-primecrest.ph{ font-size:15px; letter-spacing:.04em }