/* FightIQ — bout (receipt) page stylesheet. GENERATED by gen_bout.py; do not edit by hand. Source: gen_site.PAGE_CSS + gen_fight.FIGHT_CSS + gen_bout.BOUT_CSS + tott_view.TOTT_CSS + roundzones_view.ROUNDZONES_CSS + scorecards_view.SCORECARDS_CSS. */

* { box-sizing: border-box; }
html,body { margin:0; background:var(--bg-app); color:var(--fg-1); font-family:var(--font-body); }
a { color:inherit; text-decoration:none; }
.wrap { max-width: var(--container-xl, 1280px); margin:0 auto; padding:0 24px; }
.disp { font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:-0.01em; line-height:1; }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.eyebrow { font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red-400); }

/* live bar (kept at very top, per operator) */
.livebar { background:var(--ink-1000); border-bottom:1px solid var(--border); }
.livebar .wrap { display:flex; align-items:center; gap:14px; height:38px; font-size:12.5px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 var(--red-glow); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--red-glow);} 70%{box-shadow:0 0 0 7px rgba(230,38,47,0);} 100%{box-shadow:0 0 0 0 rgba(230,38,47,0);} }
.livebar b { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; }
.livebar .muted { color:var(--fg-3); }
.livebar .cta { margin-left:auto; color:var(--red-400); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
/* the event/venue line is the only elastic item in the bar: it truncates, everything
   else keeps its intrinsic width. Without min-width:0 a flex item refuses to shrink
   below its longest word, which is what pushed a 380px page out to 500px+. */
.livebar b, .livebar .cta { flex:none; white-space:nowrap; }
.livebar .muted { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* nav */
.nav { position:sticky; top:0; z-index:200; background:rgba(11,14,19,.82); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--border); }
.nav .wrap { height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:9px; }
.brand .mk { width:26px; height:26px; }
.brand .wm { font-family:var(--font-display); font-weight:900; font-size:23px; text-transform:uppercase; letter-spacing:-.5px; }
.brand .wm .iq { color:var(--red-500); }
.navrow { display:flex; align-items:center; gap:26px; min-width:0; }
.navlinks { display:flex; gap:4px; margin-left:6px; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.navlinks::-webkit-scrollbar { width:0; height:0; }
.navlinks a { font-family:var(--font-display); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3); padding:8px 12px; white-space:nowrap; flex:0 0 auto; }
.navlinks a.on, .navlinks a:hover { color:var(--fg-1); }
/* MOBILE NAV OVERFLOW (fixed 2026-08-22, and the reason .navrow exists as a class
   rather than an inline style). Seven nav items cannot fit a 380px viewport, and a
   flex row that cannot fit does not wrap by default — it grows, and it grew the whole
   PAGE, so every surface scrolled sideways at phone width.
   The fix is the smallest correct one: the link row itself becomes horizontally
   scrollable and everything above it is allowed to shrink (min-width:0 on both the row
   and its flex parent — without that, overflow-x:auto is inert on a flex child). No
   hamburger, no JS, no second nav to keep in sync; every link stays reachable, and the
   scrollbar is hidden because the row is short enough to swipe. */
@media (max-width:900px){
  .nav .wrap { gap:12px; padding:0 16px; }
  .navrow { gap:14px; }
  .navlinks { margin-left:0; }
  .navlinks a { padding:8px 9px; font-size:13px; }
}
.btn { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:13px; padding:9px 15px; border-radius:8px; cursor:pointer; border:1px solid transparent; }
.btn.primary { background:var(--red-500); color:#fff; box-shadow:0 0 20px var(--red-glow); }
.btn.ghost { background:transparent; color:var(--fg-2); border-color:var(--border-strong); }
.btn.sat { background:transparent; color:var(--red-400); border-color:rgba(230,38,47,.4); }

/* hero */
.hero { position:relative; border-bottom:1px solid var(--border); background:radial-gradient(120% 100% at 50% 0%, rgba(230,38,47,.10), transparent 60%); }
.hero .wrap { padding:48px 24px 40px; }
.hero h1.prop { font-family:var(--font-body); font-weight:700; text-transform:none; letter-spacing:.01em; font-size:16px; color:var(--fg-2); margin:0 0 18px; }
.hero .evname { font-size:clamp(38px,6vw,68px); margin:6px 0 6px; }
.hero .venue { color:var(--fg-3); font-size:14px; }
.trust { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; padding-top:20px; border-top:1px solid var(--border); align-items:baseline; }
.trust .big { font-family:var(--font-display); font-weight:900; font-size:30px; }
.trust .big .u { color:var(--win); }
.trust .lbl { color:var(--fg-3); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.trust .proof { margin-left:auto; color:var(--fg-2); font-size:13px; max-width:360px; line-height:1.5; }
.trust .proof a { color:var(--red-400); font-weight:700; }

/* card list */
.section { padding:40px 0 8px; }
.section h2 { font-size:15px; letter-spacing:.1em; color:var(--fg-2); margin:0 0 4px; }
.seg { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:12px; letter-spacing:.1em; color:var(--fg-4); margin:26px 0 12px; }
.seg.first { margin-top:14px; }
.fight { display:block; background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:12px; transition:border-color .18s, transform .18s; }
.fight:hover { border-color:var(--border-strong); transform:translateY(-1px); }
.fight.main { border-left:3px solid var(--red-500); }
.fight .top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.fight .wc { font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--fg-3); }
.names { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin-bottom:12px; }
.fighter { display:flex; align-items:center; gap:10px; min-width:0; }
.fighter.blue { justify-content:flex-end; text-align:right; }
.av { width:40px; height:40px; border-radius:50%; background:var(--ink-600); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--fg-2); flex:none; border:2px solid var(--corner-red); }
.fighter.blue .av { border-color:var(--corner-blue); order:2; }
.fn { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:17px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vs { font-family:var(--font-display); color:var(--fg-4); font-size:13px; font-weight:700; }
.odds { font-family:var(--font-mono); font-size:12.5px; color:var(--fg-3); }
.odds.fav { color:var(--fg-1); }

/* confidence bar */
.cbar { height:34px; border-radius:8px; overflow:hidden; display:flex; background:var(--ink-600); position:relative; }
.cbar .r { background:linear-gradient(90deg, var(--corner-red), rgba(230,51,41,.55)); }
.cbar .b { background:linear-gradient(270deg, var(--corner-blue), rgba(46,125,246,.55)); }
.cbar span { display:flex; align-items:center; font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fff; padding:0 10px; }
.cbar .b span { margin-left:auto; }
.pickrow { display:flex; align-items:center; gap:10px; margin-top:12px; }
.tier { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.06em; padding:3px 8px; border-radius:6px; }
.tier.LOCK { background:var(--red-tint); color:var(--red-400); }
.tier.HIGH { background:var(--corner-blue-bg); color:#7fb0ff; }
.tier.STANDARD { background:var(--ink-600); color:var(--fg-2); }
.tier.TOSSUP { background:var(--ink-600); color:var(--fg-3); }
.pickline { font-size:13.5px; color:var(--fg-2); }
.pickline b { color:var(--fg-1); font-weight:700; }
.livelozenge { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }

/* inline-expand accordion (progressive disclosure, SSG-safe via <details>) */
details.fight { padding:0; }                 /* summary carries the padding so the collapsed look is identical */
details.fight > summary { list-style:none; cursor:pointer; padding:16px 18px; display:block; }
details.fight > summary::-webkit-details-marker { display:none; }
details.fight > summary::marker { content:""; }
details.fight[open] { border-color:var(--border-strong); }
.exp-hint { margin-left:auto; font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--fg-4); display:flex; align-items:center; gap:3px; }
details.fight[open] .exp-hint .mater { transform:rotate(180deg); }
.exp-hint .mater { font-size:16px; transition:transform .18s; }
.exp-body { padding:0 18px 16px; border-top:1px solid var(--border); margin-top:2px; }
.exp-body .row { display:flex; flex-wrap:wrap; gap:8px 22px; padding:14px 0 4px; }
.exp-body .cell .l { color:var(--fg-4); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.exp-body .cell .v { font-family:var(--font-mono); font-size:13.5px; color:var(--fg-1); margin-top:2px; }
.exp-read { color:var(--fg-2); font-size:13.5px; line-height:1.55; margin:10px 0 14px; }
.exp-read b { color:var(--fg-1); }
.exp-cta { display:inline-flex; align-items:center; gap:6px; color:var(--red-400); font-family:var(--font-display); text-transform:uppercase; font-weight:700; letter-spacing:.04em; font-size:13px; }
.exp-ed { border-left:2px solid var(--border-strong); padding-left:12px; margin:0 0 14px; color:var(--fg-2); font-size:13.5px; line-height:1.6; }
.exp-ed .edlab { display:block; font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:10px; letter-spacing:.07em; color:var(--fg-4); margin-bottom:4px; }
.exp-cta .mater { font-size:17px; }

/* dropped-bout honesty note */
.honest { margin:20px 0; padding:14px 16px; border:1px dashed var(--border-strong); border-radius:10px; color:var(--fg-3); font-size:13px; line-height:1.5; }
.honest b { color:var(--fg-2); }

/* news teaser */
.news { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:16px; }
.ncard { background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:18px; }
.ncard .tag { font-size:10px; }
.ncard h3 { font-family:var(--font-display); text-transform:uppercase; font-size:18px; margin:10px 0 6px; line-height:1.05; }
.ncard p { color:var(--fg-3); font-size:13px; line-height:1.5; margin:0; }

/* footer */
footer { border-top:1px solid var(--border); background:var(--ink-900); margin-top:56px; }
footer .wrap { padding:34px 24px; display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
footer .disc { max-width:560px; color:var(--fg-4); font-size:12px; line-height:1.6; }
.mater { font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; }

.av.has-photo { overflow:hidden; padding:0; background:var(--ink-600); }
.av.has-photo img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

.fp { padding:28px 0 8px; }
.crumbs { color:var(--fg-3); font-size:12.5px; margin:10px 0 6px; }
.crumbs a { color:var(--fg-2); }
.crumbs a:hover { color:var(--fg-1); }

/* fight header */
.fhead { border-bottom:1px solid var(--border); background:radial-gradient(120% 100% at 50% 0%, rgba(230,38,47,.08), transparent 62%); }
.fhead .wrap { padding:22px 24px 28px; }
.fhead .wc { font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:12.5px; letter-spacing:.06em; color:var(--fg-3); }
.fmatch { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin-top:12px; }
.fmatch .side { display:flex; align-items:center; gap:12px; min-width:0; }
.fmatch .side.blue { justify-content:flex-end; text-align:right; }
.fmatch .av { width:56px; height:56px; border-radius:50%; background:var(--ink-600); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--fg-2); flex:none; border:2px solid var(--corner-red); }
.fmatch .side.blue .av { border-color:var(--corner-blue); order:2; }
.fmatch .nm { font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(20px,3vw,30px); letter-spacing:-.01em; line-height:1; }
.fmatch .nm a:hover { color:var(--red-400); }
.fmatch .rec { color:var(--fg-3); font-size:12.5px; margin-top:5px; }
.fmatch .vs { font-family:var(--font-display); color:var(--fg-4); font-size:15px; font-weight:800; }

/* section shell */
.sec { padding:30px 0 4px; }
.sec > h2 { font-family:var(--font-display); text-transform:uppercase; font-weight:900; letter-spacing:-.01em; font-size:clamp(20px,3vw,26px); margin:0 0 4px; }
.sec .sub { color:var(--fg-3); font-size:13px; margin:0 0 16px; }
.card { background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:20px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:720px){ .grid2 { grid-template-columns:1fr; } }

/* AI overview */
.aiov { background:linear-gradient(180deg,var(--ink-700),var(--ink-800)); border:1px solid var(--border-strong); border-radius:14px; padding:22px 24px; position:relative; overflow:hidden; }
.aiov::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--corner-red),var(--corner-blue)); }
.aiov .lab { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:12px; letter-spacing:.08em; color:var(--red-400); margin-bottom:12px; }
.aiov p { color:var(--fg-1); font-size:16px; line-height:1.62; margin:0 0 10px; }
.aiov p b { color:#fff; }
.aiov .foot { color:var(--fg-4); font-size:11.5px; line-height:1.5; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }

/* prediction: confidence bar reuse + method/round bars */
.predtop { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.predtop .tier { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.06em; padding:3px 8px; border-radius:6px; }
.predtop .tier.LOCK { background:var(--red-tint); color:var(--red-400); }
.predtop .tier.HIGH { background:var(--corner-blue-bg); color:#7fb0ff; }
.predtop .tier.STANDARD { background:var(--ink-600); color:var(--fg-2); }
.predtop .tier.TOSSUP { background:var(--ink-600); color:var(--fg-3); }
.predtop .call { font-size:15px; color:var(--fg-2); }
.predtop .call b { color:var(--fg-1); }
.cbar { height:38px; border-radius:8px; overflow:hidden; display:flex; background:var(--ink-600); }
.cbar .r { background:linear-gradient(90deg, var(--corner-red), rgba(230,51,41,.55)); }
.cbar .b { background:linear-gradient(270deg, var(--corner-blue), rgba(46,125,246,.55)); }
.cbar span { display:flex; align-items:center; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:#fff; padding:0 12px; }
.cbar .b span { margin-left:auto; }

.dbar { margin:11px 0; }
.dbar .k { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; }
.dbar .k .lab { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; color:var(--fg-2); font-size:12.5px; }
.dbar .k .v { font-family:var(--font-mono); color:var(--fg-1); }
.dbar .track { height:9px; border-radius:6px; background:var(--ink-600); overflow:hidden; }
.dbar .track i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--corner-blue),var(--red-500)); }
.metaline { display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.metaline .cell .v { font-family:var(--font-display); font-weight:900; font-size:22px; }
.metaline .cell .l { color:var(--fg-3); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }

/* odds */
.oddsgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.obox { border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--surface-card); }
.obox.pending { border-style:dashed; color:var(--fg-3); }
.obox .src { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:12px; letter-spacing:.05em; color:var(--fg-2); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.obox .src .dot { width:7px; height:7px; }
.orow { display:flex; justify-content:space-between; align-items:center; margin:7px 0; font-size:14px; }
.orow .n { color:var(--fg-2); }
.orow .p { font-family:var(--font-mono); color:var(--fg-1); }
.obox .asof { color:var(--fg-4); font-size:11px; margin-top:10px; }
.pendtag { font-family:var(--font-display); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--gold); background:var(--gold-bg); padding:2px 7px; border-radius:5px; }

/* props / stats tables */
.ptable { width:100%; border-collapse:collapse; font-size:13.5px; }
.ptable th, .ptable td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
.ptable th { font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.05em; color:var(--fg-3); font-weight:700; }
.ptable td.mono, .ptable th.mono { font-family:var(--font-mono); text-align:right; }
.ptable td.our { color:var(--fg-1); font-weight:600; }
.ptable td.mkt { color:var(--fg-3); }

/* tale of the tape */
.tott { width:100%; border-collapse:collapse; }
.tott td { padding:11px 10px; border-bottom:1px solid var(--border); font-size:14px; }
.tott td.mid { text-align:center; font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.06em; color:var(--fg-3); width:150px; }
.tott td.red { text-align:right; font-family:var(--font-mono); color:var(--fg-1); }
.tott td.blue { text-align:left; font-family:var(--font-mono); color:var(--fg-1); }
/* the full vitals table, folded under the living face-off (sec_tott_living). Closed by
   default and still in the markup, so nothing the table used to show is lost and a
   crawler still reads every row. */
.tottfull { margin-top:14px; }
.tottfull > summary { font-size:12px; color:var(--fg-3); cursor:pointer; font-family:var(--font-body); letter-spacing:.02em; }
.tottfull > summary:hover { color:var(--fg-2); }

/* stat H2H bars */
.h2h { margin:14px 0; }
.h2h .lab { text-align:center; font-family:var(--font-display); text-transform:uppercase; font-size:11.5px; letter-spacing:.05em; color:var(--fg-2); margin-bottom:5px; }
.h2h .bars { display:grid; grid-template-columns:1fr 54px 1fr; align-items:center; gap:8px; }
.h2h .val { font-family:var(--font-mono); font-size:12.5px; color:var(--fg-1); }
.h2h .val.r { text-align:right; }
.h2h .bar { height:8px; border-radius:6px; background:var(--ink-600); overflow:hidden; display:flex; }
.h2h .bar.r { justify-content:flex-end; }
.h2h .bar.r i { background:var(--corner-red); }
.h2h .bar.b i { background:var(--corner-blue); }
.h2h .bar i { display:block; height:100%; }
.h2h .mid { text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--fg-4); }

/* pending block */
.pending-block { border:1px dashed var(--border-strong); border-radius:12px; padding:22px; color:var(--fg-3); font-size:13.5px; line-height:1.6; }
.pending-block .pendtag { margin-bottom:10px; display:inline-block; }
.pending-block ul { margin:10px 0 0; padding-left:18px; }
.pending-block li { margin:3px 0; }

.backlink { display:inline-flex; align-items:center; gap:6px; margin:6px 0 0; color:var(--red-400); font-family:var(--font-display); text-transform:uppercase; font-weight:700; letter-spacing:.04em; font-size:13px; }

/* profile / editorial prose */
.bioprose p { color:var(--fg-1); font-size:15px; line-height:1.66; margin:0 0 11px; max-width:72ch; }
.bioprose p:last-child { margin-bottom:0; }
.biocard { display:flex; flex-direction:column; }
.bioname { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:15px; letter-spacing:.01em; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bioname a { color:var(--fg-1); }
.bioname a:hover { color:var(--red-400); }
.biokind { font-family:var(--font-display); text-transform:uppercase; font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:5px; }
.biokind.news { color:var(--red-400); background:var(--red-tint); }
.biokind.prof { color:var(--fg-3); background:var(--ink-600); }
.archchip { font-family:var(--font-display); text-transform:uppercase; font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--fg-3); background:var(--ink-600); padding:3px 8px; border-radius:5px; }
.biofoot { color:var(--fg-4); font-size:11.5px; line-height:1.55; margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }
.biofoot a { color:var(--red-400); font-weight:700; }
.facwrap { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.factitle { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:.07em; color:var(--fg-3); margin-bottom:8px; }
ul.factors { margin:0; padding-left:18px; }
ul.factors li { color:var(--fg-2); font-size:14px; line-height:1.55; margin:5px 0; }

/* related coverage */
.newslist { display:grid; gap:10px; }
.newsrow { display:block; background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; transition:border-color .18s, transform .18s; }
.newsrow:hover { border-color:var(--border-strong); transform:translateY(-1px); }
.newsrow .nmeta { display:block; font-family:var(--font-mono); font-size:11px; color:var(--fg-4); text-transform:uppercase; letter-spacing:.05em; }
.newsrow .ntitle { display:block; font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:15px; color:var(--fg-1); margin-top:5px; line-height:1.2; }
.newsrow .ndek { display:block; color:var(--fg-3); font-size:13px; margin-top:5px; line-height:1.5; }

.mh2h { display:flex; flex-direction:column; gap:2px; }
.mh2h .mrowh { display:grid; grid-template-columns:1fr 190px 1fr; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.mh2h .mrowh:last-child { border-bottom:none; }
.mh2h .mrowh.iq { margin-top:6px; padding-top:15px; border-top:1px solid var(--border-strong); border-bottom:none; }
.mh2h .mlab { text-align:center; font-family:var(--font-display); text-transform:uppercase; font-size:11.5px; letter-spacing:.05em; color:var(--fg-2); line-height:1.3; }
.mh2h .mlab small { display:block; font-family:var(--font-body); text-transform:none; letter-spacing:0; color:var(--fg-4); font-size:10.5px; margin-top:3px; }
.mh2h .mrowh.iq .mlab { color:var(--red-400); font-size:12.5px; }
.mh2h .mside { display:flex; flex-direction:column; gap:5px; }
.mh2h .mside.r { align-items:flex-end; }
.mh2h .mside.b { align-items:flex-start; }
.mh2h .mv { font-family:var(--font-display); font-weight:900; font-size:19px; color:var(--fg-1); font-variant-numeric:tabular-nums; line-height:1; }
.mh2h .mv.na { font-size:12.5px; color:var(--fg-4); font-weight:700; }
.mh2h .mside.r.win .mv { color:var(--corner-red); }
.mh2h .mside.b.win .mv { color:#7fb0ff; }
.mh2h .mrowh.iq .mv { font-size:23px; }
.mh2h .mbar { width:100%; height:8px; border-radius:6px; background:var(--ink-600); overflow:hidden; display:flex; }
.mh2h .mside.r .mbar { justify-content:flex-end; }
.mh2h .mbar i { display:block; height:100%; }
.mh2h .mside.r .mbar i { background:var(--corner-red); opacity:.55; }
.mh2h .mside.b .mbar i { background:var(--corner-blue); opacity:.55; }
.mh2h .mside.win .mbar i { opacity:1; }
.mh2h .mbar.na { background:repeating-linear-gradient(45deg,var(--ink-600),var(--ink-600) 6px,var(--ink-700) 6px,var(--ink-700) 12px); }
.mh2h .lim { font-family:var(--font-display); text-transform:uppercase; font-style:normal; font-size:9px; font-weight:800; letter-spacing:.06em; color:var(--gold); background:var(--gold-bg); padding:1px 5px; border-radius:4px; }
.mh2h-names { display:grid; grid-template-columns:1fr 190px 1fr; gap:12px; margin-bottom:10px; font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:12.5px; letter-spacing:.04em; }
.mh2h-names .r { text-align:right; color:var(--corner-red); }
.mh2h-names .b { text-align:left; color:#7fb0ff; }
@media (max-width:640px){
  .mh2h .mrowh, .mh2h-names { grid-template-columns:1fr 110px 1fr; gap:8px; }
  .mh2h .mlab { font-size:10.5px; }
  .mh2h .mlab small { display:none; }
}

.mrow, .mh2h .mrowh, .raterow { position:relative; }
button.mi { position:static; display:inline-grid; place-items:center; width:15px; height:15px;
  margin-left:6px; padding:0; border-radius:50%; border:1px solid var(--border-strong);
  background:transparent; color:var(--fg-4); font-family:var(--font-body); font-size:9.5px;
  font-weight:700; line-height:1; cursor:help; vertical-align:1px; flex:none;
  -webkit-tap-highlight-color:transparent; }
button.mi:hover, button.mi:focus { color:var(--fg-1); border-color:var(--fg-3); outline:none; }
button.mi .mtip { position:absolute; left:0; right:0; margin-inline:auto; bottom:100%;
  margin-bottom:7px; width:max-content; max-width:100%; box-sizing:border-box;
  background:var(--ink-1000); color:var(--fg-1); border:1px solid var(--border-strong);
  border-radius:8px; padding:8px 11px; font-family:var(--font-body); font-size:12px;
  font-weight:400; line-height:1.45; letter-spacing:0; text-transform:none; text-align:center;
  white-space:normal; opacity:0; visibility:hidden; transition:opacity .14s;
  box-shadow:0 10px 28px rgba(0,0,0,.55); z-index:60; pointer-events:none; }
button.mi:hover .mtip, button.mi:focus .mtip { opacity:1; visibility:visible; }
/* Centring in the row is right for the head-to-head layout, where the label (and so the
   ⓘ) sits in the middle column. On the single-fighter cards the label is hard left, so
   the bubble is left-anchored there instead — it still starts inside the row and is
   still capped at the row's width, so the no-overflow guarantee is unchanged. */
.mrow button.mi .mtip, .raterow button.mi .mtip { right:auto; margin-inline:0; text-align:left; }

/* line-movement chart (oddschart_view) — static SVG, no script */
.oc-card { background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:14px; padding:16px 18px 14px; }
.oc-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-bottom:10px; }
.oc-key { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--fg-2,#aeb8c4); }
.oc-key em { font-style:normal; color:var(--fg-4,#4b5563); }
.oc-sw { width:18px; height:0; border-top:3px solid currentColor; border-radius:2px; flex:none; }
.oc-sw.oc-red { color:var(--corner-red,#e63329); }
.oc-sw.oc-blue { color:var(--corner-blue,#2e7df6); }
.oc-sw.oc-solid { color:var(--fg-2,#aeb8c4); }
.oc-sw.oc-dashed { color:var(--fg-3,#717d8c); border-top-style:dashed; }
/* The chart is an 880-unit viewBox. Letting it shrink to a 360px phone would scale a
   10px tick to 4px — a chart nobody can read is worse than one you have to nudge. So
   below the breakpoint the drawing keeps a legible width and the FIGURE scrolls, the
   same treatment the data table gets. The page body itself never scrolls sideways. */
.oc-figure { margin:0; overflow-x:auto; overflow-y:hidden; }
.lm-svg { display:block; width:100%; height:auto; overflow:visible; }
@media (max-width:720px) { .lm-svg { width:760px; max-width:none; } }
.lm-svg text { font-family:var(--font-mono,'JetBrains Mono',monospace); }
.lm-grid { stroke:var(--line-soft,rgba(255,255,255,.06)); stroke-width:1; }
.lm-axis { stroke:var(--line,rgba(255,255,255,.10)); stroke-width:1; }
.lm-tick { fill:var(--fg-4,#4b5563); font-size:10px; }
.lm-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.lm-line.oc-red { stroke:var(--corner-red,#e63329); }
.lm-line.oc-blue { stroke:var(--corner-blue,#2e7df6); }
.lm-line.lm-dash { stroke-width:1.5; stroke-dasharray:4 4; opacity:.55; }
.lm-end.oc-red { fill:var(--corner-red,#e63329); }
.lm-end.oc-blue { fill:var(--corner-blue,#2e7df6); }
.lm-endring { fill:none; stroke:var(--surface-card,#161b23); stroke-width:2; }
.lm-svg text.lm-endlab { font-size:11.5px; font-weight:700; }
.lm-endlab.oc-red { fill:var(--corner-red,#e63329); }
.lm-endlab.oc-blue { fill:var(--corner-blue,#2e7df6); }
.lm-freezeline { stroke:var(--gold,#f5b32b); stroke-width:1.5; stroke-dasharray:3 3; opacity:.75; }
.lm-freezedot { fill:var(--gold,#f5b32b); }
.lm-freezering { fill:none; stroke:var(--surface-card,#161b23); stroke-width:2; }
/* `.lm-svg text` above sets the mono face for the ticks; this label is prose, so it
   needs the higher-specificity selector to win the face back. */
.lm-svg text.lm-freezelab { fill:var(--gold,#f5b32b); font-family:var(--font-display,'Saira Condensed',sans-serif); font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.oc-read { font-size:13.5px; color:var(--fg-2,#aeb8c4); line-height:1.6; margin:12px 0 0; }
.oc-read b { color:var(--fg-1,#f4f6f8); }
.oc-table { margin-top:10px; }
.oc-table summary { font-size:11.5px; color:var(--fg-3,#717d8c); cursor:pointer; }
.oc-table summary:hover { color:var(--fg-2,#aeb8c4); }
.oc-tablewrap { overflow-x:auto; }
.oc-table table { width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px; }
.oc-table th, .oc-table td { text-align:left; padding:6px 9px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); font-family:var(--font-mono,'JetBrains Mono',monospace); white-space:nowrap; }
.oc-table thead th { color:var(--fg-4,#4b5563); font-weight:700; letter-spacing:.04em; }
.oc-table tbody th { color:var(--fg-2,#aeb8c4); font-weight:600; white-space:normal; }
.oc-table td.v, .oc-table th.v { text-align:right; color:var(--fg-1,#f4f6f8); }
.oc-att { margin-top:12px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); padding-top:9px; font-size:10.5px; color:var(--fg-4,#4b5563); line-height:1.6; }
.oc-att b { color:var(--fg-3,#717d8c); }
.oc-att .mono { font-family:var(--font-mono,'JetBrains Mono',monospace); }
.oc-nohist { border:1px dashed var(--border-strong,rgba(255,255,255,.16)); border-radius:14px; background:var(--bg-raised,#11151c); padding:16px 18px; }
.oc-nohist p { font-size:12.5px; color:var(--fg-3,#717d8c); line-height:1.6; margin:0; }
.oc-nohist .oc-why { color:var(--fg-4,#4b5563); }
.oc-nohist-sub { margin-top:6px !important; color:var(--fg-4,#4b5563) !important; font-size:11.5px !important; }
@media (max-width:560px) { .oc-card { padding:13px 12px 11px; } }

/* ---- bout (receipt) page ---- */
.bhead { border-bottom:1px solid var(--border); background:radial-gradient(120% 100% at 50% 0%, rgba(245,179,43,.07), transparent 62%); }
.bhead .wrap { padding:18px 24px 6px; }
.bp { padding:8px 0 8px; }

/* the receipt: our call beside the fight */
.receipt { display:grid; grid-template-columns:1fr auto 1fr; gap:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface-card); }
@media (max-width:760px) { .receipt { grid-template-columns:1fr; } }
.rcell { padding:18px 20px 20px; min-width:0; }
.rcell.call { background:linear-gradient(180deg, rgba(230,38,47,.07), transparent 70%); }
.rcell.fight { background:linear-gradient(180deg, rgba(245,179,43,.07), transparent 70%); }
.rsplit { width:1px; background:var(--border); }
@media (max-width:760px) { .rsplit { width:auto; height:1px; } }
.rlab { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:.14em; color:var(--fg-4); margin-bottom:10px; }
.rname { font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(20px,3.4vw,30px); line-height:1.02; color:var(--fg-1); overflow-wrap:anywhere; }
.rline { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:9px; }
.rconf { font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--fg-1); }
.rmeta { margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); display:grid; gap:7px; }
.rmeta .m { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; }
.rmeta .m span:first-child { color:var(--fg-3); }
.rmeta .m span:last-child { font-family:var(--font-mono); color:var(--fg-1); text-align:right; }

/* verdict banner — record-page marks, at receipt size */
.vbanner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; padding:14px 18px; border-radius:12px; border:1px solid var(--border); background:var(--bg-raised,#11151c); }
.vbanner.win { border-color:rgba(45,190,120,.34); background:linear-gradient(90deg, rgba(45,190,120,.10), transparent 70%); }
.vbanner.loss { border-color:rgba(230,38,47,.30); background:linear-gradient(90deg, rgba(230,38,47,.10), transparent 70%); }
.vbanner .big { font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(20px,3vw,28px); letter-spacing:.02em; line-height:1; }
.vbanner.win .big { color:var(--win); }
.vbanner.loss .big { color:var(--loss); }
.vbanner .say { font-size:13.5px; color:var(--fg-2); line-height:1.55; }
.vbanner .say b { color:var(--fg-1); }

/* identical to gen_record.RECORD_CSS */
.verdict { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.04em; }
.verdict.win { color:var(--win); }
.verdict.loss { color:var(--loss); }
.verdict .dot { width:8px; height:8px; border-radius:50%; }
.verdict.win .dot { background:var(--win); }
.verdict.loss .dot { background:var(--loss); }
.mmark { font-size:11px; margin-left:5px; opacity:.8; cursor:help; }
.mmark.hit { color:var(--win); }
.mmark.miss { color:var(--loss); }
.rtier { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:10px; letter-spacing:.05em; padding:3px 7px; border-radius:5px; }
.rtier.LOCK { background:var(--red-tint); color:var(--red-400); }
.rtier.HIGH { background:var(--corner-blue-bg); color:#7fb0ff; }
.rtier.MED { background:var(--ink-600); color:var(--fg-2); }
.rtier.LOW, .rtier.STANDARD { background:var(--ink-600); color:var(--fg-3); }
.rtier.TOSSUP { background:var(--ink-500); color:var(--fg-3); }

/* honest placeholders — W4 / W5 fill these */
.soon { border:1px dashed var(--border-strong,rgba(255,255,255,.16)); border-radius:14px; background:var(--bg-raised,#11151c); padding:17px 19px; }
.soon .t { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:13px; letter-spacing:.05em; color:var(--fg-2); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.soon .tag { font-family:var(--font-body); text-transform:uppercase; font-size:9.5px; font-weight:800; letter-spacing:.12em; color:var(--gold); background:var(--gold-bg); padding:2px 7px; border-radius:5px; }
.soon p { font-size:12.5px; color:var(--fg-3); line-height:1.6; margin:8px 0 0; max-width:74ch; }

/* onward links */
.blinks { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.blink { display:block; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface-card); }
.blink:hover { border-color:var(--border-strong,rgba(255,255,255,.16)); }
.blink .k { font-family:var(--font-body); text-transform:uppercase; font-size:9.5px; font-weight:800; letter-spacing:.14em; color:var(--fg-4); }
.blink .v { font-family:var(--font-display); text-transform:uppercase; font-weight:800; font-size:15px; color:var(--fg-1); margin-top:5px; line-height:1.15; overflow-wrap:anywhere; }
.backlink { display:inline-block; margin:22px 0 34px; color:var(--fg-2); font-size:13.5px; }
.backlink:hover { color:var(--fg-1); }

/* ===== FightIQ Living Tale of the Tape ===== */
/* The corner vars are declared on the CARD as well as the section: a caller is free
   to embed living_tott_block() in a wrapper of its own, and a var() with no fallback
   resolving to nothing is an invalid declaration, not a graceful one. */
.tvt, .tvt-card { --tvt-r: var(--corner-red,#e63329); --tvt-b: var(--corner-blue,#2e7df6); }
.tvt-card { position:relative; background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:16px; overflow:hidden; }

/* --- the face-off --- */
.tvt-faceoff { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; background:var(--ink-850,#0b0e13); }
.tvt-side { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; min-height:clamp(190px,30vw,270px); padding:14px clamp(10px,2.4vw,22px) clamp(12px,2vw,18px); isolation:isolate; }
.tvt-side.blue { align-items:flex-end; text-align:right; }
/* the corner-tinted scrim: a wash from the outer edge, so the two portraits read as
   two corners of one cage rather than two cut-outs on a flat panel */
.tvt-side::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; }
/* The scrim does two jobs: tint the corner, and GUARANTEE the name is legible on top of
   a photograph nobody vetted. So it ramps to near-opaque from ~40% down, where the
   identity block actually sits, rather than only at the very bottom edge — at which
   point "RED CORNER" was being read off a fighter's chest. */
.tvt-side.red::before { background:radial-gradient(120% 90% at 6% 8%, rgba(230,38,47,.30) 0%, rgba(230,38,47,.07) 42%, transparent 72%), linear-gradient(180deg, transparent 10%, rgba(4,6,10,.58) 42%, rgba(4,6,10,.94) 80%); }
.tvt-side.blue::before { background:radial-gradient(120% 90% at 94% 8%, rgba(46,125,246,.30) 0%, rgba(46,125,246,.07) 42%, transparent 72%), linear-gradient(180deg, transparent 10%, rgba(4,6,10,.58) 42%, rgba(4,6,10,.94) 80%); }

/* The headshots are 160x160 cut-outs. The plate is capped just above that so the
   portrait never has to be blown up into mush; it bleeds off the top edge instead. */
.tvt-portrait { position:absolute; top:0; z-index:-1; width:clamp(120px,21vw,196px); height:clamp(120px,21vw,196px); display:flex; align-items:flex-end; justify-content:center; }
.tvt-side.red .tvt-portrait { left:clamp(4px,1.6vw,20px); }
.tvt-side.blue .tvt-portrait { right:clamp(4px,1.6vw,20px); }
.tvt-portrait img { width:100%; height:100%; object-fit:contain; object-position:bottom center; display:block; filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)); }
.tvt-mono { width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ink-600,#1c222c); border:1px solid var(--line,rgba(255,255,255,.10)); font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:clamp(34px,6vw,56px); color:var(--fg-3,#717d8c); letter-spacing:.02em; }

/* text-shadow as well as the scrim: belt and braces on top of an arbitrary photograph */
.tvt-id { position:relative; z-index:1; min-width:0; text-shadow:0 1px 14px rgba(2,4,8,.92), 0 1px 3px rgba(2,4,8,.75); }
.tvt-corner { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3,#717d8c); }
.tvt-corner::before { content:''; width:14px; height:2px; border-radius:2px; background:currentColor; }
.tvt-side.blue .tvt-corner { flex-direction:row-reverse; }
.tvt-side.red .tvt-corner { color:var(--tvt-r); }
.tvt-side.blue .tvt-corner { color:var(--tvt-b); }
.tvt-first { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:700; font-size:clamp(11px,2.1vw,15px); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2,#aeb8c4); margin-top:5px; }
.tvt-last { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:clamp(26px,6.4vw,58px); line-height:.92; letter-spacing:-.005em; text-transform:uppercase; color:var(--fg-1,#f4f6f8); overflow-wrap:anywhere; }
a.tvt-last { text-decoration:none; }
a.tvt-last:hover { color:#fff; }
.tvt-nick { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:700; font-size:clamp(11px,2vw,15px); letter-spacing:.05em; color:var(--gold,#f5b32b); margin-top:5px; }
.tvt-gym { display:block; font-family:var(--font-body,system-ui); font-size:11px; line-height:1.45; color:var(--fg-3,#717d8c); margin-top:5px; }

/* --- the centre column --- */
.tvt-centre { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:14px clamp(2px,1vw,10px); background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.10)); border-left:1px solid var(--line-soft,rgba(255,255,255,.06)); border-right:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.tvt-vs { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:clamp(15px,3vw,26px); letter-spacing:.06em; color:var(--fg-4,#4b5563); }
.tvt-ribbon { display:inline-block; padding:4px 10px; border-radius:999px; font-family:var(--font-body,system-ui); font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; border:1px solid var(--line,rgba(255,255,255,.10)); color:var(--fg-3,#717d8c); background:rgba(0,0,0,.30); }
.tvt-ribbon.settled { color:var(--gold,#f5b32b); border-color:rgba(245,179,43,.38); background:rgba(245,179,43,.10); }
.tvt-ribbon.upcoming { color:var(--tvt-r); border-color:rgba(230,38,47,.34); background:rgba(230,38,47,.10); }

/* --- meta strip under the face-off --- */
.tvt-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:9px clamp(12px,2vw,18px); border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.18); font-family:var(--font-body,system-ui); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3,#717d8c); }
.tvt-meta a { color:var(--fg-2,#aeb8c4); }
.tvt-meta b { color:var(--fg-2,#aeb8c4); font-weight:700; }

/* --- storyline bullets --- */
.tvt-story { list-style:none; margin:0; padding:14px clamp(12px,2vw,18px) 4px; display:grid; gap:9px; }
@media (min-width:760px) { .tvt-story { grid-template-columns:1fr 1fr; gap:9px 18px; } }
.tvt-storyhead { padding:14px clamp(12px,2vw,18px) 0; font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-4,#4b5563); }
.tvt-bul { position:relative; padding-left:13px; font-family:var(--font-body,system-ui); font-size:13px; line-height:1.5; color:var(--fg-2,#aeb8c4); }
.tvt-bul::before { content:''; position:absolute; left:0; top:7px; width:4px; height:4px; border-radius:50%; }
.tvt-bul.red::before { background:var(--tvt-r); }
.tvt-bul.blue::before { background:var(--tvt-b); }
.tvt-bul b { color:var(--fg-1,#f4f6f8); font-weight:700; }

/* --- the advantage ladder --- */
.tvt-ladder { padding:10px clamp(8px,2vw,14px) 6px; }
.tvt-lrow { display:grid; grid-template-columns:1fr minmax(76px,116px) 1fr; align-items:center; gap:6px; padding:9px 4px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.tvt-lrow:last-child { border-bottom:none; }
.tvt-llab { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-4,#4b5563); }
.tvt-lv { display:flex; align-items:center; gap:8px; min-width:0; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:clamp(12px,2.2vw,15px); font-weight:600; color:var(--fg-2,#aeb8c4); }
/* Both VALUES hug the centre label, so the eye compares two numbers a few characters
   apart instead of two numbers at opposite ends of a wide card; the tick and chip sit
   OUTSIDE them, on the corner's own side. The cell's DOM order is fixed (tick, chip,
   text) so a screen reader always hears the mark before the value it qualifies —
   `row-reverse` on the blue side mirrors the painting, not the reading order. */
.tvt-lv.red { flex-direction:row; justify-content:flex-end; text-align:right; }
.tvt-lv.blue { flex-direction:row-reverse; justify-content:flex-end; text-align:left; }
.tvt-lv .tvt-txt { min-width:0; overflow-wrap:anywhere; }
.tvt-lv .tvt-sub { display:block; font-size:9.5px; font-weight:500; color:var(--fg-4,#4b5563); margin-top:2px; }
/* the tick bar: a corner-coloured rule on the OUTER edge of the winning value */
.tvt-lv.win { color:var(--fg-1,#f4f6f8); font-weight:700; }
.tvt-lv.win .tvt-tick { flex:none; width:3px; align-self:stretch; min-height:20px; border-radius:2px; }
.tvt-lv.red.win .tvt-tick { background:var(--tvt-r); box-shadow:0 0 8px rgba(230,38,47,.45); }
.tvt-lv.blue.win .tvt-tick { background:var(--tvt-b); box-shadow:0 0 8px rgba(46,125,246,.45); }
.tvt-chip { flex:none; padding:2px 7px; border-radius:999px; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10px; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.tvt-lv.red .tvt-chip { color:var(--tvt-r); background:rgba(230,38,47,.13); border:1px solid rgba(230,38,47,.30); }
.tvt-lv.blue .tvt-chip { color:#7fb0ff; background:rgba(46,125,246,.13); border:1px solid rgba(46,125,246,.30); }

/* --- footer --- */
.tvt-foot { padding:11px clamp(12px,2vw,18px) 13px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.16); font-family:var(--font-body,system-ui); font-size:10.5px; line-height:1.6; color:var(--fg-4,#4b5563); }
.tvt-foot b { color:var(--fg-3,#717d8c); font-weight:700; }

/* --- motion. `.tvt-anim` is added by SCRIPT ONLY: with JS off none of these apply
       and the server-rendered final state is what the reader gets. --- */
.tvt-anim .tvt-id { opacity:0; transform:translateY(10px); transition:opacity 600ms var(--ease-out,cubic-bezier(.22,1,.36,1)), transform 600ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tvt-anim .tvt-id.is-in { opacity:1; transform:none; }
.tvt-anim .tvt-bul { opacity:0; transform:translateY(6px); transition:opacity 520ms var(--ease-out,cubic-bezier(.22,1,.36,1)), transform 520ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tvt-anim .tvt-bul.is-in { opacity:1; transform:none; }
.tvt-anim .tvt-lrow { opacity:0; transition:opacity 520ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tvt-anim .tvt-lrow.is-in { opacity:1; }
.tvt-anim .tvt-lrow .tvt-lv { transform:translateX(var(--tvt-slide,0)); transition:transform 560ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.tvt-anim .tvt-lrow .tvt-lv.red { --tvt-slide:-14px; }
.tvt-anim .tvt-lrow .tvt-lv.blue { --tvt-slide:14px; }
.tvt-anim .tvt-lrow.is-in .tvt-lv { transform:none; }
.tvt-anim .tvt-chip, .tvt-anim .tvt-tick { opacity:0; transform:scale(.55); transition:opacity 320ms var(--ease-out,cubic-bezier(.22,1,.36,1)), transform 420ms cubic-bezier(.2,1.5,.4,1); }
.tvt-anim .tvt-lrow.is-in .tvt-chip, .tvt-anim .tvt-lrow.is-in .tvt-tick { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .tvt-anim .tvt-id, .tvt-anim .tvt-bul, .tvt-anim .tvt-lrow,
  .tvt-anim .tvt-lv, .tvt-anim .tvt-chip, .tvt-anim .tvt-tick {
    opacity:1 !important; transform:none !important; transition:none !important; }
  .tvt * { animation:none !important; }
}

/* --- narrow: the face-off stays a face-off (that is the whole point), it just
       tightens. Nothing here may make the page scroll sideways. --- */
@media (max-width:560px) {
  .tvt-side { min-height:170px; padding:12px 8px 10px; }
  .tvt-gym { display:none; }
  .tvt-centre { padding:10px 2px; }
  .tvt-lrow { grid-template-columns:1fr minmax(58px,86px) 1fr; gap:4px; padding:8px 2px; }
  .tvt-llab { font-size:9px; letter-spacing:.08em; }
  .tvt-lv { gap:5px; }
  .tvt-chip { padding:1px 5px; font-size:9px; }
}

/* ===== FightIQ Round-by-Round Timeline ===== */
.rz-card { position:relative; background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:14px; overflow:hidden; }
.rz-defs { position:absolute; width:0; height:0; overflow:hidden; }

.rz-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:15px 18px 13px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-eyebrow { font-family:var(--font-body,system-ui); font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3,#717d8c); display:flex; align-items:center; gap:8px; }
.rz-eyebrow::before { content:''; width:16px; height:2px; background:var(--corner-red,#e63329); border-radius:2px; }
.rz-title { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:21px; line-height:1.05; color:var(--fg-1,#f4f6f8); text-transform:uppercase; margin:5px 0 0; }
.rz-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* --- round scrubber + cumulative toggle (revealed by JS; hidden markup otherwise) --- */
.rz-scrub, .rz-mode { display:inline-flex; padding:3px; gap:2px; background:var(--ink-850,#0b0e13); border:1px solid var(--line,rgba(255,255,255,.10)); border-radius:999px; }
.rz-scrub[hidden], .rz-mode[hidden] { display:none; }
.rz-scrub button, .rz-mode button { appearance:none; border:0; background:transparent; cursor:pointer; padding:6px 13px; border-radius:999px; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:12.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--fg-3,#717d8c); transition:color var(--dur,180ms) var(--ease-out,ease), background var(--dur,180ms) var(--ease-out,ease); }
.rz-scrub button:hover, .rz-mode button:hover { color:var(--fg-1,#f4f6f8); }
.rz-scrub button[aria-selected="true"] { color:#fff; background:var(--corner-red,#e63329); box-shadow:0 2px 10px rgba(230,38,47,.35); }
.rz-mode button[aria-pressed="true"] { color:var(--ink-850,#0b0e13); background:var(--gold,#f5b32b); }
.rz-scrub button:focus-visible, .rz-mode button:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ink-850,#0b0e13), 0 0 0 4px var(--red-400,#ff3b46); }
.rz-scrub button .rz-kdot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold,#f5b32b); margin-left:5px; vertical-align:middle; }

/* --- one round --- */
.rz-round { padding:16px 18px 18px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-round:first-child { border-top:none; }
.rz-card.rz-tabbed .rz-round { display:none; }
.rz-card.rz-tabbed .rz-round.is-on { display:block; border-top:none; }
@keyframes rz-fade-kf { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }
.rz-card.rz-tabbed.rz-anim .rz-round.is-on { animation:rz-fade-kf 300ms var(--ease-out,cubic-bezier(.22,1,.36,1)) both; }

.rz-rlab { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 12px; }
.rz-rn { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; text-transform:uppercase; font-size:15px; letter-spacing:.05em; color:var(--fg-1,#f4f6f8); }
.rz-rmeta { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; color:var(--fg-4,#4b5563); letter-spacing:.02em; }
.rz-flag { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.rz-flag.kd { color:var(--gold,#f5b32b); background:var(--gold-bg,rgba(245,179,43,.14)); border:1px solid rgba(245,179,43,.34); }
.rz-flag.kd.r { color:var(--corner-red,#e63329); background:var(--corner-red-bg,rgba(230,51,41,.16)); border-color:rgba(230,51,41,.34); }
.rz-flag.kd.b { color:#7fb0ff; background:var(--corner-blue-bg,rgba(46,125,246,.16)); border-color:rgba(46,125,246,.34); }
.rz-flag.sub { color:var(--fg-2,#aeb8c4); border:1px solid var(--line,rgba(255,255,255,.10)); }
.rz-flag.end { color:var(--fg-2,#aeb8c4); background:var(--ink-600,#1d2530); border:1px solid var(--line,rgba(255,255,255,.10)); }
@keyframes rz-flash-kf { 0%{ box-shadow:0 0 0 0 rgba(245,179,43,.55) } 70%{ box-shadow:0 0 0 9px rgba(245,179,43,0) } 100%{ box-shadow:0 0 0 0 rgba(245,179,43,0) } }
.rz-card.rz-anim .rz-round.is-on .rz-flag.kd { animation:rz-flash-kf 1400ms var(--ease-out,cubic-bezier(.22,1,.36,1)) 240ms 1; }

/* --- the silhouette pair --- */
.rz-stage { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:end; margin-bottom:6px; }
.rz-fig { min-width:0; margin:0; }
.rz-corner { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.02em; color:var(--fg-1,#f4f6f8); margin:0 0 2px; line-height:1.12; overflow-wrap:anywhere; }
.rz-corner.r { color:var(--corner-red,#e63329); }
.rz-corner.b { color:#7fb0ff; }
.rz-corner small { display:block; font-family:var(--font-mono,'JetBrains Mono',monospace); font-weight:500; font-size:9.5px; letter-spacing:.03em; color:var(--fg-4,#4b5563); text-transform:none; margin-top:2px; }
.rz-svg { width:100%; max-width:224px; height:auto; display:block; margin:0 auto; overflow:visible; }
.rz-svg text { font-family:var(--font-display,'Saira Condensed',sans-serif); }
.rz-heat { opacity:0; transition:opacity 720ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.rz-lead { stroke:rgba(255,255,255,.20); stroke-width:1; }
.rz-zn { font-size:12px; font-weight:800; letter-spacing:.14em; fill:var(--fg-3,#717d8c); }
.rz-zp { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:21px; font-weight:700; fill:var(--fg-1,#f4f6f8); }
.rz-zs { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; font-weight:500; fill:var(--fg-3,#717d8c); letter-spacing:.02em; }
.rz-nothing { font-family:var(--font-body,system-ui); font-size:10.5px; text-align:center; color:var(--fg-4,#4b5563); margin:2px 0 0; }

/* --- the head-to-head ledger --- */
.rz-rows { margin-top:10px; }
.rz-row { display:grid; grid-template-columns:1fr 104px 1fr; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-row:last-child { border-bottom:none; }
.rz-lab { text-align:center; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3,#717d8c); line-height:1.2; }
.rz-side { min-width:0; }
.rz-side.r { text-align:right; }
.rz-v { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:14px; font-weight:700; color:var(--fg-2,#aeb8c4); white-space:nowrap; }
.rz-side.lead .rz-v { color:var(--fg-1,#f4f6f8); }
.rz-side.r.lead .rz-v { color:var(--corner-red,#e63329); }
.rz-side.b.lead .rz-v { color:#7fb0ff; }
.rz-v em { font-style:normal; font-size:11px; color:var(--fg-4,#4b5563); }
.rz-bar { position:relative; height:7px; margin-top:5px; border-radius:4px; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); overflow:hidden; }
.rz-bar i { position:absolute; top:0; bottom:0; width:0; border-radius:3px; transition:width 720ms var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.rz-side.r .rz-bar i { right:0; background:linear-gradient(270deg, var(--corner-red,#e63329), rgba(230,51,41,.45)); }
.rz-side.b .rz-bar i { left:0; background:linear-gradient(90deg, var(--corner-blue,#2e7df6), rgba(46,125,246,.45)); }

/* --- position rail (distance / clinch / ground) --- */
.rz-pos { display:grid; grid-template-columns:1fr 104px 1fr; align-items:center; gap:8px; padding:11px 0 2px; margin-top:2px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-rail { display:flex; height:9px; border-radius:5px; overflow:hidden; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.rz-seg { height:100%; }
.rz-side.r .rz-seg.distance { background:var(--corner-red,#e63329); }
.rz-side.r .rz-seg.clinch { background:rgba(230,51,41,.52); }
.rz-side.r .rz-seg.ground { background:rgba(230,51,41,.24); }
.rz-side.b .rz-seg.distance { background:var(--corner-blue,#2e7df6); }
.rz-side.b .rz-seg.clinch { background:rgba(46,125,246,.52); }
.rz-side.b .rz-seg.ground { background:rgba(46,125,246,.24); }
.rz-poskey { display:flex; gap:9px; flex-wrap:wrap; margin-top:6px; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9px; color:var(--fg-4,#4b5563); }
.rz-side.r .rz-poskey { justify-content:flex-end; }
.rz-poskey i { display:inline-block; width:6px; height:6px; border-radius:2px; margin-right:4px; }

/* --- foot / absent --- */
.rz-foot { padding:11px 18px 13px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.16); font-family:var(--font-body,system-ui); font-size:11px; line-height:1.55; color:var(--fg-4,#4b5563); margin:0; }
.rz-absent { padding:18px; }
.rz-absent-t { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-2,#aeb8c4); margin:0 0 6px; }
.rz-absent-p { font-family:var(--font-body,system-ui); font-size:12.5px; line-height:1.6; color:var(--fg-3,#717d8c); margin:0; max-width:64ch; }

/* The in-SVG labels are drawn in USER UNITS, so they shrink with the figure. Squeezing
   two 224px figures into a phone leaves the "8 of 8" line at about four physical pixels.
   Between 720px and 560px the type is scaled up to compensate; below that the pair
   STACKS, each figure gets the full column, and the base sizes are legible again. */
@media (max-width:720px) {
  .rz-stage { gap:4px; }
  .rz-svg { max-width:100%; }
  .rz-zp { font-size:30px; }
  .rz-zn { font-size:17px; }
  .rz-zs { font-size:15px; }
  .rz-row, .rz-pos { grid-template-columns:1fr 74px 1fr; gap:5px; }
  .rz-lab { font-size:9px; letter-spacing:.06em; }
  .rz-v { font-size:12.5px; }
  .rz-round { padding:14px 12px 16px; }
  .rz-head { padding:13px 12px 11px; }
  .rz-foot { padding:10px 12px 12px; }
}
@media (max-width:560px) {
  .rz-stage { grid-template-columns:1fr; gap:14px; }
  .rz-svg { max-width:300px; }
  .rz-zp { font-size:21px; }
  .rz-zn { font-size:12px; }
  .rz-zs { font-size:10.5px; }
}
@media (max-width:380px) {
  .rz-row, .rz-pos { grid-template-columns:1fr 60px 1fr; }
  .rz-v { font-size:11.5px; }
  .rz-v em { font-size:10px; }
  .rz-poskey { gap:4px 9px; }
  .rz-scrub button, .rz-mode button { padding:5px 9px; font-size:11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rz-heat, .rz-bar i { transition:none !important; }
  .rz-card * { animation:none !important; }
}

/* ===== FightIQ Judges' Scorecards ===== */
.sc-card { background:var(--surface-card,#161b23); border:1px solid var(--border,rgba(255,255,255,.10)); border-radius:14px; overflow:hidden; }
.sc-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:15px 18px 13px; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.sc-eyebrow { font-family:var(--font-body,system-ui); font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3,#717d8c); display:flex; align-items:center; gap:8px; }
.sc-eyebrow::before { content:''; width:16px; height:2px; background:var(--gold,#f5b32b); border-radius:2px; }
.sc-title { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; font-size:21px; line-height:1.05; color:var(--fg-1,#f4f6f8); text-transform:uppercase; margin:5px 0 0; }
.sc-ref { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; color:var(--fg-4,#4b5563); }
.sc-body { padding:14px 18px 16px; }
.sc-blk { margin-top:20px; }
.sc-blk:first-child { margin-top:0; }
.sc-blab { font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-4,#4b5563); margin:0 0 9px; }

/* --- corner key --- */
.sc-key { display:flex; gap:16px; flex-wrap:wrap; margin:0 0 10px; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
.sc-key span { display:inline-flex; align-items:center; gap:6px; color:var(--fg-2,#aeb8c4); }
.sc-key i { width:9px; height:9px; border-radius:2px; display:inline-block; }
.sc-key i.r { background:var(--corner-red,#e63329); }
.sc-key i.b { background:var(--corner-blue,#2e7df6); }

/* --- the grid --- */
.sc-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.sc-grid { width:100%; min-width:340px; border-collapse:collapse; }
/* the totals-only table is two columns; stretched across a desktop page it puts a
   judge's name and his score at opposite ends of a metre of empty table */
.sc-wrap.narrow table.sc-grid { max-width:440px; min-width:0; }
.sc-grid th, .sc-grid td { padding:9px 6px; text-align:center; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06)); }
.sc-grid thead th { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4,#4b5563); border-bottom:1px solid var(--line,rgba(255,255,255,.10)); }
.sc-grid tbody tr:last-child td { border-bottom:none; }
.sc-jn { text-align:left !important; min-width:118px; }
.sc-jn b { display:block; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:13px; color:var(--fg-1,#f4f6f8); letter-spacing:.01em; line-height:1.2; }
.sc-jt { display:block; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9px; color:var(--fg-4,#4b5563); margin-top:3px; letter-spacing:.01em; }
.sc-cell { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13px; font-weight:700; color:var(--fg-3,#717d8c); white-space:nowrap; }
.sc-cell.r { color:var(--corner-red,#e63329); background:rgba(230,51,41,.07); }
.sc-cell.b { color:#7fb0ff; background:rgba(46,125,246,.07); }
.sc-cell.even { color:var(--fg-3,#717d8c); }
.sc-tot { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:14px; font-weight:700; color:var(--fg-2,#aeb8c4); white-space:nowrap; }
.sc-tot .w { display:inline-block; padding:2px 8px; border-radius:999px; color:var(--fg-1,#f4f6f8); }
.sc-tot .w.r { border:1px solid var(--corner-red,#e63329); background:var(--corner-red-bg,rgba(230,51,41,.16)); }
.sc-tot .w.b { border:1px solid var(--corner-blue,#2e7df6); background:var(--corner-blue-bg,rgba(46,125,246,.16)); }

/* --- warning mark: never silent --- */
.sc-warn { color:var(--gold,#f5b32b); font-size:11px; margin-left:5px; cursor:help; }
.sc-note { display:flex; gap:8px; align-items:flex-start; margin:11px 0 0; padding:10px 12px; border-radius:9px; border:1px solid rgba(245,179,43,.28); background:var(--gold-bg,rgba(245,179,43,.14)); }
.sc-note i { font-style:normal; color:var(--gold,#f5b32b); font-size:12px; line-height:1.5; }
.sc-note p { margin:0; font-family:var(--font-body,system-ui); font-size:11.5px; line-height:1.55; color:var(--fg-2,#aeb8c4); }

/* --- media strip --- */
.sc-media { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:7px; }
.sc-m { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 11px; border:1px solid var(--line-soft,rgba(255,255,255,.06)); border-radius:9px; background:var(--ink-850,#0b0e13); }
.sc-m .who { font-family:var(--font-body,system-ui); font-size:11.5px; color:var(--fg-2,#aeb8c4); line-height:1.3; overflow-wrap:anywhere; }
.sc-m .sco { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:12.5px; font-weight:700; white-space:nowrap; }
.sc-m .sco.r { color:var(--corner-red,#e63329); }
.sc-m .sco.b { color:#7fb0ff; }
.sc-m .sco.even { color:var(--fg-3,#717d8c); }
.sc-more { appearance:none; margin-top:9px; padding:7px 14px; border-radius:999px; border:1px solid var(--line,rgba(255,255,255,.10)); background:transparent; color:var(--fg-2,#aeb8c4); cursor:pointer; font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; }
.sc-more:hover { color:var(--fg-1,#f4f6f8); border-color:var(--line-strong,rgba(255,255,255,.16)); }
.sc-more[hidden] { display:none; }
.sc-m.is-hid { display:none; }

/* --- fan vote --- */
.sc-fanbar { display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--ink-850,#0b0e13); border:1px solid var(--line-soft,rgba(255,255,255,.06)); }
/* the hairline is what makes a bar of five red segments read as five scores rather
   than one block: a card where every voter picked the same fighter is the common case */
.sc-fanseg { height:100%; box-shadow:inset -1px 0 0 rgba(0,0,0,.45); }
.sc-fanseg:last-child { box-shadow:none; }
.sc-fanseg.r { background:var(--corner-red,#e63329); }
.sc-fanseg.b { background:var(--corner-blue,#2e7df6); }
.sc-fanseg.x { background:var(--ink-500,#28323f); }
.sc-fankey { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.sc-fankey span { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; color:var(--fg-3,#717d8c); }
.sc-fankey i { display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:5px; }
.sc-fanfoot { font-family:var(--font-body,system-ui); font-size:10.5px; color:var(--fg-4,#4b5563); margin:8px 0 0; }

/* --- the finish banner --- */
.sc-finish { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:20px 22px; border-radius:14px; border:1px solid var(--border,rgba(255,255,255,.10)); background:var(--surface-card,#161b23); }
.sc-finish.r { border-left:4px solid var(--corner-red,#e63329); background:linear-gradient(90deg, rgba(230,51,41,.11), transparent 62%); }
.sc-finish.b { border-left:4px solid var(--corner-blue,#2e7df6); background:linear-gradient(90deg, rgba(46,125,246,.11), transparent 62%); }
.sc-fk { font-family:var(--font-body,system-ui); font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-4,#4b5563); }
.sc-fw { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:900; text-transform:uppercase; font-size:clamp(20px,3.2vw,30px); line-height:1.03; color:var(--fg-1,#f4f6f8); margin:4px 0 0; overflow-wrap:anywhere; }
.sc-fm { display:flex; gap:22px; flex-wrap:wrap; margin-left:auto; }
.sc-fm div { min-width:62px; }
.sc-fm .k { font-family:var(--font-body,system-ui); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-4,#4b5563); }
.sc-fm .v { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:16px; font-weight:700; color:var(--fg-1,#f4f6f8); margin-top:3px; }
.sc-fnote { font-family:var(--font-body,system-ui); font-size:11.5px; line-height:1.55; color:var(--fg-3,#717d8c); margin:12px 0 0; max-width:74ch; }

/* --- foot / absent --- */
.sc-foot { padding:11px 18px 13px; border-top:1px solid var(--line-soft,rgba(255,255,255,.06)); background:rgba(0,0,0,.16); font-family:var(--font-body,system-ui); font-size:11px; line-height:1.55; color:var(--fg-4,#4b5563); margin:0; }
.sc-absent { padding:18px; }
.sc-absent-t { font-family:var(--font-display,'Saira Condensed',sans-serif); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-2,#aeb8c4); margin:0 0 6px; }
.sc-absent-p { font-family:var(--font-body,system-ui); font-size:12.5px; line-height:1.6; color:var(--fg-3,#717d8c); margin:0; max-width:64ch; }

@media (max-width:640px) {
  .sc-head, .sc-body { padding-left:12px; padding-right:12px; }
  .sc-foot { padding-left:12px; padding-right:12px; }
  .sc-finish { padding:16px 14px; gap:12px; }
  .sc-fm { margin-left:0; gap:16px; }
  .sc-media { grid-template-columns:1fr; }
}
@media (max-width:380px) {
  .sc-grid th, .sc-grid td { padding:8px 3px; }
  .sc-cell, .sc-tot { font-size:11.5px; }
  .sc-jn { min-width:96px; }
  .sc-jn b { font-size:12px; }
}