/* ==========================================================================
   /champions/{year}/ — one Stanley Cup Final, game by game.

   Loaded AFTER champions.css, which this sheet treats as its base: the token
   aliases (--field/--card/--ink/--mint/--coral/--receipt/--navy-ink), the
   masthead, the research-desk strip, .crest, .rcpt, .cav and .foot all come
   from there. This file adds only what the deep layer needs.

   House law observed here: Newsreader upright (champions.css carries the
   i,em guard), no gold outside the ◷ receipt glyph, mint/coral strictly
   semantic. On this page mint means "the eventual champion" and nothing else —
   a goal is never coral, because a goal is not a bad outcome.
   ========================================================================== */

/* ---- breadcrumb ---------------------------------------------------------- */
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:20px 0 0}
.crumb a{color:var(--muted);border-bottom:1px solid transparent}
.crumb a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.crumb a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.crumb .sep{opacity:.5}
.crumb b{color:var(--ink)}

/* ==========================================================================
   THE HERO — franchise-tinted navy band, two crests facing, live series score.

   The band is the house navy hero lerped toward the champion's colour by
   heroTint() (scripts/build-cup-final-pages.js, ported from the canonical copy
   in scripts/generate-seo-pages.js). --th-a/b/c are the three stops and
   --th-bloom is the club identity as a corner glow, with its alpha shrunk until
   white copy clears 5:1. A navy band stays navy in both themes, so this block
   never re-theming: crests are forced to _dark.svg and accent text is
   --navy-ink.
   ========================================================================== */
.fhero{
  position:relative;overflow:hidden;border-radius:22px;margin:16px 0 0;
  padding:32px 36px 26px;color:#eef4fc;box-shadow:var(--shadow);
  background:
    radial-gradient(112% 128% at 88% 4%, rgba(var(--th-bloom,21,47,92), var(--th-bloom-a,.38)) 0%, rgba(var(--th-bloom,21,47,92),0) 62%),
    linear-gradient(118deg, var(--th-a,#071427) 0%, var(--th-b,#0d1f3c) 55%, var(--th-c,#17325c) 100%);
}
.fhero .eyeb{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--navy-ink)}
.fhero-top{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap;position:relative;z-index:1}
.fhero-id{flex:1.35;min-width:290px}
.fhero h1{font-weight:900;font-size:clamp(1.9rem,3.7vw,2.85rem);letter-spacing:-.022em;line-height:1.06;margin:12px 0 0}
.fhero h1 .in{font-family:var(--serif);font-weight:600;color:var(--navy-ink)}
.fhero .blurb{max-width:56ch;color:#c9d8ee;font-size:.92rem;line-height:1.62;font-weight:500;margin:12px 0 0}

/* the two crests, facing */
.faceoff{display:flex;align-items:center;gap:16px;margin:20px 0 0}
.faceoff .fo-side{display:flex;align-items:center;gap:11px;min-width:0}
.faceoff .fo-side.is-lose{opacity:.72}
/* The loser's crest is mirrored so the two badges face each other across the
   "def." rule. Purely geometric; no data is implied by the flip. */
.faceoff .fo-side.is-lose .crest{transform:scaleX(-1)}
.faceoff .crest{width:46px;height:46px}
.faceoff .fo-t{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;color:#eef4fc}
.faceoff .fo-side.is-lose .fo-t{color:#c9d8ee}
.faceoff .fo-vs{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-ink)}
/* Mint is the champion, here as it is in the ledger's winner rule. */
.faceoff .fo-side.is-win{border-left:3px solid var(--mint);padding-left:12px}

/* the live figure: the series score, repainted as the reader scrubs */
.fhero-fig{flex:1;min-width:230px;border-left:3px solid var(--navy-ink);padding-left:26px}
.fhero-fig .v{font-family:var(--serif);font-weight:700;font-size:clamp(3.6rem,7.6vw,5.4rem);line-height:.86;color:var(--navy-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fhero-fig .k{font-size:.6rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#c9d8ee;margin-top:9px;line-height:1.6}
.fhero-fig .st{font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;color:#c9d8ee;margin-top:12px;line-height:1.7;min-height:2.6em}
.fhero-fig .st b{color:#fff;font-weight:700}

/* the scrub rail — the hero's interaction. Buttons, so it is keyboard-reachable
   and screen-reader legible; the game strip below drives the same state. */
.scrub{display:flex;align-items:center;gap:7px;margin:22px 0 0;position:relative;z-index:1;flex-wrap:wrap}
.scrub .lbl{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-ink);margin-right:5px}
.scrub button{
  font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;
  color:#c9d8ee;background:rgba(255,255,255,.07);border:1px solid rgba(157,184,221,.32);
  border-radius:999px;padding:5px 13px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.scrub button:hover{background:rgba(255,255,255,.16);color:#fff}
.scrub button:focus-visible{outline:2px solid var(--navy-ink);outline-offset:2px}
.scrub button[aria-pressed="true"]{background:var(--navy-ink);border-color:var(--navy-ink);color:#081120}
.fhero .rcpt{color:#8fa5c4;position:relative;z-index:1;margin-top:16px}
.fhero .rcpt::before{color:#e0bd6e}

/* ==========================================================================
   THE GAME STRIP
   ========================================================================== */
/* 156px is deliberate, not arbitrary: the content column is 1,164px inside its
   padding, so a seven-game Final needs 7 cards + 6 gaps <= 1164 to sit on ONE
   row. At 178px the seventh card wrapped alone under six, which read as a
   separate thing rather than the last game of the same series. */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:12px;margin:18px 0 0}
.gcard{
  text-align:left;background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px 13px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s,background .15s,transform .15s;position:relative;
}
.gcard:hover{border-color:var(--blue);background:var(--blue-soft)}
.gcard:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.gcard[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.gcard .gn{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gcard .sl{display:flex;align-items:baseline;gap:8px;margin:8px 0 0;font-variant-numeric:tabular-nums}
.gcard .sl .t{font-family:var(--mono);font-size:.63rem;font-weight:700;color:var(--muted);letter-spacing:.06em}
.gcard .sl .n{font-family:var(--serif);font-weight:700;font-size:1.42rem;line-height:1;color:var(--ink)}
/* Mint marks the champion's line in the box score. Semantic, not decorative. */
.gcard .sl.is-champ .n{color:var(--mint)}
.gcard .sl.is-champ .t{color:var(--mint)}
.gcard .meta{font-family:var(--mono);font-size:.56rem;letter-spacing:.03em;color:var(--muted);margin-top:9px;line-height:1.65}
.gcard .meta b{color:var(--ink);font-weight:700}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.bdg{font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;padding:2px 6px;border:1px solid var(--border);color:var(--muted)}
.bdg.is-ot{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.bdg.is-cup{border-color:var(--mint);color:var(--mint);background:var(--mint-soft)}

/* ==========================================================================
   THE GAME PANEL — goal timeline, goalies, leaders
   ========================================================================== */
.gpanel{border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--shadow);padding:24px 26px 22px;margin:16px 0 0}
.gpanel[hidden]{display:none}
.gp-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.gp-head h3{font-family:var(--serif);font-weight:600;font-size:1.34rem;letter-spacing:-.01em}
.gp-head .when{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--muted);margin-left:auto}
/* The STORYLINES line — the panel's one sentence. */
.story{font-size:.99rem;line-height:1.6;font-weight:600;color:var(--ink);border-left:3px solid var(--blue);padding-left:14px;margin:16px 0 0;max-width:78ch}
.story .none{color:var(--muted);font-weight:500}

.gp-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:26px;margin-top:20px}
.gp-sub{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}

/* ---- the goal timeline -------------------------------------------------- */
.tl{position:relative;padding-left:2px}
.tl-period{margin-top:14px}
.tl-period:first-child{margin-top:0}
/* the period rule */
.tl-rule{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.tl-rule b{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tl-rule .r{flex:1;height:1px;background:var(--border)}
.tl-rule .sc{font-family:var(--mono);font-size:.56rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-empty{font-size:.82rem;color:var(--muted);font-weight:500;padding:2px 0 4px 15px}

.goal{display:grid;grid-template-columns:46px 12px minmax(0,1fr);gap:11px;align-items:start;padding:7px 0}
.goal .clock{font-family:var(--mono);font-size:.64rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;padding-top:2px}
/* the marker: mint for the eventual champion, ink for the finalist. Never coral
   — a goal is not a bad outcome, and coral is reserved for real negatives. */
.goal .mk{position:relative;height:100%;display:flex;justify-content:center;padding-top:5px}
.goal .mk i{width:9px;height:9px;border-radius:50%;background:var(--ink);flex-shrink:0;z-index:1}
.goal .mk::before{content:"";position:absolute;top:0;bottom:-14px;left:50%;width:1px;margin-left:-.5px;background:var(--hairline)}
.goal:last-child .mk::before{display:none}
.goal.is-champ .mk i{background:var(--mint)}
.goal .who{min-width:0}
.goal .who .nm{font-size:.9rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.goal.is-champ .who .nm{color:var(--mint)}
.goal .who .tri{font-family:var(--mono);font-size:.58rem;font-weight:700;color:var(--muted);letter-spacing:.06em;margin-left:7px}
/* block, or the assist list runs straight into the tricode ("EDMAssists: …") */
.goal .who .nm{display:inline}
.goal .who .as{display:block;font-size:.79rem;color:var(--muted);font-weight:500;margin-top:3px;line-height:1.5}
.goal .who .ln{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.chip{font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;padding:2px 6px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.chip.is-gw{border-color:var(--mint);background:var(--mint-soft);color:var(--mint)}
.chip.is-eq{border-color:var(--blue);color:var(--blue)}
.chip.is-score{font-variant-numeric:tabular-nums;color:var(--ink);border-color:var(--hairline)}
.chip.is-gap{border-style:dashed}

/* ---- goalie lines + leaders -------------------------------------------- */
.gline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--hairline)}
.gline:first-of-type{border-top:0}
/* Both are blocks: as inline spans the goaltender's line ran together as
   "S. Bobrovsky FLA79:29 · 4 GA". */
.gline .nm{display:block;font-size:.88rem;font-weight:700;color:var(--ink)}
.gline .nm .tri{font-family:var(--mono);font-size:.57rem;font-weight:700;color:var(--muted);letter-spacing:.06em;margin-left:7px}
.gline .sub{display:block;font-family:var(--mono);font-size:.57rem;color:var(--muted);margin-top:4px;letter-spacing:.03em;line-height:1.6}
.gline .fig{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gline .fig .dec{display:block;font-size:.54rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.gline .fig .dec.is-w{color:var(--mint)}

.lead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--hairline);font-variant-numeric:tabular-nums}
.lead:first-of-type{border-top:0}
.lead .nm{font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead .nm .tri{font-family:var(--mono);font-size:.55rem;font-weight:700;color:var(--muted);letter-spacing:.06em;margin-left:6px}
.lead .v{font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--ink)}
.lead-block+.lead-block{margin-top:18px}

/* ==========================================================================
   SERIES PANELS + ERA
   ========================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;margin-top:16px}
.panel{border:1px solid var(--border);border-radius:15px;background:var(--card);box-shadow:var(--shadow);padding:19px 21px 17px}
.panel h3{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.stat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--hairline);font-variant-numeric:tabular-nums}
.stat:first-of-type{border-top:0}
.stat .k{font-size:.83rem;color:var(--muted);font-weight:500}
.stat .v{font-family:var(--mono);font-size:.76rem;font-weight:700;color:var(--ink)}
.stat .v.is-mint{color:var(--mint)}
.panel .rcpt{text-align:left;margin-top:14px}

/* the era comparison: this Final's rate against the decade and all-era rate */
.era-row{padding:11px 0;border-top:1px solid var(--hairline)}
.era-row:first-of-type{border-top:0}
.era-top{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums}
.era-top .k{font-size:.85rem;font-weight:600;color:var(--ink)}
.era-top .v{margin-left:auto;font-family:var(--mono);font-size:.74rem;font-weight:700;color:var(--ink)}
/* Two bars on one baseline: this Final over the era. One ink; length is the
   only variable. Geometry animates, the figures never do. */
.era-bars{margin-top:8px;display:grid;gap:5px}
.era-bar{display:grid;grid-template-columns:68px minmax(0,1fr) 44px;gap:9px;align-items:center}
.era-bar .bl{font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.era-bar .tr{height:8px;background:var(--hairline);border-radius:0 3px 3px 0;overflow:hidden}
.era-bar .tr i{display:block;height:100%;width:var(--f,0%);background:var(--blue);transform-origin:left center;animation:era-grow var(--mo-base,.5s) var(--mo-ease,cubic-bezier(.22,.61,.36,1)) both}
.era-bar.is-this .tr i{background:var(--mint)}
.era-bar .bv{font-family:var(--mono);font-size:.6rem;font-weight:700;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.era-bar.is-this .bv{color:var(--mint)}
@keyframes era-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- coverage: what is absent, and why -------------------------------- */
.cov{display:grid;gap:9px;margin-top:14px}
.cov-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:baseline;padding:9px 0;border-top:1px solid var(--hairline)}
.cov-row:first-child{border-top:0}
.cov-row .m{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.cov-row .why{font-size:.84rem;color:var(--muted);line-height:1.6;font-weight:500}
.cov-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.cov-tags .chip.is-on{border-color:var(--mint);color:var(--mint);background:var(--mint-soft)}

/* ---- prev/next ---------------------------------------------------------- */
.pn{display:flex;gap:12px;justify-content:space-between;margin:30px 0 0;flex-wrap:wrap}
.pn a{flex:1;min-width:200px;border:1px solid var(--border);border-radius:13px;padding:14px 18px;background:var(--card);transition:border-color .15s,background .15s}
.pn a:hover{border-color:var(--blue);background:var(--blue-soft)}
.pn a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pn a .d{font-family:var(--mono);font-size:.53rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pn a .t{font-size:.92rem;font-weight:700;color:var(--ink);margin-top:6px}
.pn a.is-next{text-align:right}

/* ==========================================================================
   THE BRACKET — the whole tournament, in the shape that spring actually had.

   Nothing in this block assumes a size. The board is a flex row of round
   columns, each column a flex column of series nodes distributed evenly, so a
   two-round/three-club 1918 and a five-round/24-club 2020 both draw correctly
   from the same rules; --brk-cols is carried only so the board can claim a
   minimum width and scroll rather than crush.

   The ink line is the champion's road. Mint appears at exactly one node — the
   Stanley Cup Final — and nowhere else, which is the house rule for mint on
   this page. Losing sides are dimmed by weight, never by colour.
   ========================================================================== */
.brk-wrap{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:18px;align-items:start;margin:4px 0 0}
.brk-boardwrap{position:relative;min-width:0}
.brk-scroll{
  overflow-x:auto;overflow-y:hidden;padding:6px 2px 12px;
  scrollbar-width:thin;scroll-behavior:smooth;
}
.brk-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:12px}
/* The mask is the honest edge: it says "there is more board this way" without
   inventing a shadow. Applied only while the board actually overflows. */
.brk-boardwrap.is-scrollable .brk-scroll{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
}
.brk-boardwrap.at-start .brk-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%)}
.brk-boardwrap.at-end .brk-scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px);mask-image:linear-gradient(90deg,transparent 0,#000 26px)}
.brk-boardwrap.at-start.at-end .brk-scroll{-webkit-mask-image:none;mask-image:none}

.brk-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);
  color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;box-shadow:var(--shadow);
  transition:border-color .15s,background .15s;
}
.brk-arrow:hover{border-color:var(--blue);background:var(--blue-soft)}
.brk-arrow:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.brk-arrow.is-prev{left:-6px}
.brk-arrow.is-next{right:-6px}

.brk-board{display:flex;align-items:stretch;min-height:220px;width:max-content;min-width:100%}
.brk-col{display:flex;flex-direction:column;flex:1 0 auto;width:clamp(186px,20vw,214px);padding-right:34px}
.brk-rlbl{
  display:flex;align-items:flex-end;gap:8px;font-family:var(--mono);font-size:.55rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.35;
  min-height:2.9em;padding-bottom:7px;border-bottom:1px solid var(--hairline);margin-bottom:12px;
}
/* Round names are as long as the era made them ("Eastern Conference Finals"), so
   the label wraps rather than truncating. Every label reserves the same two-line
   height, which keeps the columns' first nodes on one baseline. */
.brk-rlbl span{white-space:normal}
.brk-rlbl i{margin-left:auto;font-style:normal;opacity:.75;white-space:nowrap}
.brk-col[data-final] .brk-rlbl{color:var(--ink);border-bottom-color:var(--border)}
.brk-nodes{display:flex;flex-direction:column;justify-content:space-around;gap:10px;flex:1}

.brk-node{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:11px;background:var(--card);
  padding:8px 9px;transition:border-color .15s,background .15s,box-shadow .15s;
}
.brk-node:hover{border-color:var(--blue);background:var(--blue-soft)}
.brk-node:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.brk-node.is-open{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
/* The connectors. A stub leaves every node to the right and meets the next
   round; the champion's stubs are ink, the finalist's are a traceable dash, and
   everyone else's are hairline. */
.brk-node::after{content:"";position:absolute;left:100%;top:50%;width:34px;border-top:1px solid var(--hairline)}
.brk-node::before{content:"";position:absolute;right:100%;top:50%;width:0;border-top:1px solid var(--hairline)}
.brk-col:not(:first-child) .brk-node::before{width:0}
.brk-col:last-child .brk-node::after{border-top-color:transparent}
.brk-node.is-champ{border-color:var(--ink)}
.brk-node.is-champ::after{border-top:2px solid var(--ink)}
.brk-node.is-fin{border-color:var(--muted)}
.brk-node.is-fin::after{border-top:1px dashed var(--muted)}
.brk-node.is-cupfinal{border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint)}
.brk-node.is-cupfinal::after{border-top-color:transparent}

.brk-side{display:flex;align-items:center;gap:7px;padding:3px 0;min-width:0}
.brk-side .crest,.brk-side .mono{width:22px;height:22px}
.brk-side .mono{font-size:.5rem;border-radius:6px}
.brk-side .tri{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.brk-side .sd{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.06em;color:var(--muted);opacity:.72;border:1px solid var(--hairline);border-radius:5px;padding:1px 3px}
.brk-side .w{margin-left:auto;font-family:var(--serif);font-weight:700;font-size:1.02rem;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.brk-side.is-win .tri{color:var(--ink)}
.brk-side.is-win .w{color:var(--ink)}
.brk-node.is-cupfinal .brk-side.is-cup .tri,.brk-node.is-cupfinal .brk-side.is-cup .w{color:var(--mint)}

.brk-sc{
  position:absolute;left:100%;top:50%;transform:translate(2px,-50%);z-index:2;
  font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.04em;
  color:var(--muted);background:var(--field);border:1px solid var(--hairline);
  border-radius:999px;padding:1px 5px;white-space:nowrap;
}
.brk-node.is-champ .brk-sc{color:var(--ink);border-color:var(--border)}
.brk-node.is-cupfinal .brk-sc{color:var(--mint);border-color:var(--mint)}

/* ---- the side read-out --------------------------------------------------- */
.brk-read{border:1px solid var(--border);border-radius:13px;background:var(--card2);padding:14px 15px 15px;position:sticky;top:14px}
.brk-read-lbl{font-family:var(--mono);font-size:.53rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.brk-read-idle{font-size:.8rem;line-height:1.6;color:var(--muted);font-weight:500}
.brk-read h3{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);margin:0 0 3px}
.brk-read .rd-meta{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.brk-read .rd-teams{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.brk-read .rd-t{display:flex;align-items:baseline;gap:8px;font-size:.8rem;color:var(--muted);font-weight:600}
.brk-read .rd-t .sd{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.06em;border:1px solid var(--hairline);border-radius:5px;padding:1px 3px;opacity:.8}
.brk-read .rd-t b{margin-left:auto;font-family:var(--serif);font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}
.brk-read .rd-t.is-win{color:var(--ink)}
.brk-read .rd-g{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:6px;align-items:baseline;padding:4px 0;border-top:1px solid var(--hairline);font-variant-numeric:tabular-nums}
.brk-read .rd-g .n{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.brk-read .rd-g .s{font-size:.76rem;color:var(--ink);font-weight:600}
.brk-read .rd-g .d{font-family:var(--mono);font-size:.5rem;color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.brk-read .rd-g .ot{color:var(--coral);font-weight:700}
.brk-read .rd-note{font-size:.72rem;line-height:1.6;color:var(--muted);margin-top:9px;border-left:2px solid var(--hairline);padding-left:8px}

/* ---- the expanded game list --------------------------------------------- */
.brk-expand{margin:16px 0 0;border:1px solid var(--border);border-radius:14px;background:var(--card);padding:16px 18px 17px}
.brk-expand .ex-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.brk-expand .ex-head h3{font-family:var(--serif);font-weight:600;font-size:1.16rem;color:var(--ink)}
.brk-expand .ex-head .sc{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.brk-expand .ex-close{margin-left:auto;border:1px solid var(--border);background:var(--card2);border-radius:999px;padding:3px 11px;font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.brk-expand .ex-close:hover{border-color:var(--blue);color:var(--ink)}
.brk-expand .ex-close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.brk-games{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px}
.brk-gm{border:1px solid var(--hairline);border-radius:10px;background:var(--card2);padding:9px 11px}
.brk-gm .n{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brk-gm .sl{display:flex;align-items:baseline;gap:8px;margin-top:5px;font-variant-numeric:tabular-nums}
.brk-gm .sl .t{font-family:var(--mono);font-size:.6rem;font-weight:700;color:var(--muted)}
.brk-gm .sl .v{margin-left:auto;font-family:var(--serif);font-weight:700;font-size:1.08rem;color:var(--ink)}
.brk-gm .sl.is-win .t,.brk-gm .sl.is-win .v{color:var(--ink)}
.brk-gm .mt{font-family:var(--mono);font-size:.5rem;letter-spacing:.03em;color:var(--muted);margin-top:7px;line-height:1.6}
.brk-gm .mt .ot{color:var(--coral);font-weight:700}
.brk-empty{font-size:.82rem;color:var(--muted);line-height:1.6;font-weight:500}

@media(max-width:1040px){
  .brk-wrap{grid-template-columns:minmax(0,1fr)}
  .brk-read{position:static}
}
@media(max-width:900px){
  .gp-grid{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media(max-width:820px){
  .fhero{padding:24px 20px 22px;margin-top:12px}
  .fhero-top{gap:22px;flex-direction:column;align-items:stretch}
  .fhero-id,.fhero-fig{min-width:0;flex:none}
  .fhero-fig{padding-left:18px}
  .fhero-fig .v{font-size:3.5rem}
  .gpanel{padding:19px 16px 18px}
  .cov-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .goal{grid-template-columns:42px 12px minmax(0,1fr);gap:9px}
  .strip{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px}
  /* On a phone the board keeps its shape and scrolls sideways, one round at a
     time: rounds are the reading unit, so squeezing four of them onto a 375px
     screen would be the wrong compression. */
  .brk-col{width:min(72vw,208px);padding-right:28px}
  .brk-node::after{width:28px}
  .brk-arrow{width:30px;height:30px}
  .brk-arrow.is-prev{left:-4px}
  .brk-arrow.is-next{right:-4px}
  .brk-expand{padding:14px 13px 15px}
}
/* prefers-reduced-motion = complete content, zero motion. The era bars render
   at full width with no animation; nothing here depends on a transition to be
   legible. */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  /* The bracket's arrows jump the board a round instead of gliding it. */
  .brk-scroll{scroll-behavior:auto!important}
  .era-bar .tr i{animation:none!important;transform:none!important}
}

/* the league's box: three stars + the team line (data/game_stories) and the clip chip on the goal sequence */
.chip.is-clip{border-color:var(--blue);color:var(--blue);text-decoration:none}
.chip.is-clip:hover,.chip.is-clip:focus-visible{background:var(--blue);color:#fff;outline:none}
.league-box .lead .star{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:7px;border-radius:50%;background:var(--ink);color:var(--card);font:800 .55rem/1 var(--mono)}
.league-box .lead .v i{font-style:normal;color:var(--muted);padding:0 3px}
.box-note{margin:10px 0 0;font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;color:var(--muted)}