/* === Sports Interaction brand kit === */
:root{
  --si-sportsbook-orange:#FE4000;
  --si-stadium-navy:#0B2234;
  --si-off-side-teal:#027496;
  --si-yellow-card:#FFBC00;
  --si-paper-white:#FFFFFF;
  --si-off-white:#FBFAF7;
  --si-stadium-100:#F2EFE9;
  --si-stadium-200:#D7DDE2;
  --si-stadium-400:#5C6E7C;

  /* Typography — Inter is the placeholder display + body face until
     Entain's brand tokens land (the ClickUp tickets call for Adobe Pro,
     but we don't have the foundry licence wired yet). Inter 700 sits
     in for the editorial display lockups; Inter 600 sits in for
     mid-weight UI labels. NEVER fall back to Arial / system-ui — the
     widget should read as type-foundry-grade or not at all. */
  --font-display:'Inter','Inter Tight',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --font-sans:'Inter','Inter Tight',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Bracket connector lines — classic ESPN/FlashScore neutral grey.
     Slightly cooler than the stadium-400 ink so the lines recede
     behind the cards instead of competing with them. */
  --bracket-conn:#B4BCC4;

  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{
  /* Hard cap on body width so no card / no flex child can produce
     horizontal scroll on a phone — overflow inside containers is
     fine, overflow at the document level isn't. */
  max-width:100vw;
  overflow-x:hidden;
}
body{
  font-family:var(--font-sans);
  color:var(--si-paper-white);
  background:var(--si-stadium-navy);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
button{font-family:inherit;cursor:pointer;border:0}
a{color:inherit}

/* === Widget shell ===
   Sportsinteraction.com surface rhythm: navy header strip, off-white
   below. 60/25/10/5 = paper-white SURFACE, navy INK. */
.widget{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background:var(--si-off-white);
  color:var(--si-stadium-navy);
}
.widget-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  background:var(--si-stadium-navy);
  color:var(--si-paper-white);
  border-bottom:1px solid rgba(0,0,0,0.06);
  flex-wrap:wrap;
}
.widget-top-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.widget-top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.si-mark{height:22px;width:auto;display:block}
.year-pills{display:flex;gap:6px}
.year-pill{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.02em;
  padding:6px 14px;
  border-radius:var(--radius);
  background:var(--si-stadium-navy);
  color:var(--si-paper-white);
  border:1px solid rgba(255,255,255,0.55);
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  transition:background 0.08s ease,color 0.08s ease,border-color 0.08s ease;
}
.year-pill:hover{background:rgba(255,255,255,0.07)}
.year-pill[aria-pressed="true"]{
  background:var(--si-sportsbook-orange);
  color:var(--si-paper-white);
  border-color:var(--si-sportsbook-orange);
}
.live-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--si-off-side-teal);
  display:inline-block;
  animation:livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(0.78)}
}
.status-line{
  font-family:var(--font-sans);
  color:var(--si-stadium-400);
  font-size:12px;
  line-height:1.4;
  max-width:420px;
  text-align:right;
}
.refresh-btn{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:12px;letter-spacing:0.02em;
  background:transparent;color:var(--si-paper-white);
  border:1px solid rgba(255,255,255,0.55);
  padding:7px 14px;border-radius:var(--radius);
  min-height:32px;
}
.refresh-btn:hover{background:rgba(255,255,255,0.07)}
.refresh-btn:disabled{opacity:.45;cursor:not-allowed}

/* === Bracket === */
.bracket-area{
  flex:1;
  padding:22px 18px 16px;
  overflow-x:auto;
  background:var(--si-off-white);
}
/* Wrap holds the SVG connectors layer underneath the grid so the
   lines paint behind cards without intercepting clicks. */
.bracket-wrap{
  position:relative;
  width:100%;
}
.bracket-connectors{
  position:absolute;
  pointer-events:none;
  z-index:0;
  display:block;
}
.bracket-conn-line{
  stroke:var(--bracket-conn);
  stroke-width:1.5;
  fill:none;
  stroke-linecap:square;
  stroke-linejoin:miter;
  /* shape-rendering keeps the 1.5px stroke from blurring across
     fractional subpixel positions when the bracket flexes. */
  shape-rendering:crispEdges;
  vector-effect:non-scaling-stroke;
}
.bracket{
  display:grid;
  gap:14px;
  align-items:stretch;
  position:relative;
  z-index:1;
}
/* 7-column variant (32-team format: R16|QF|SF|F|SF|QF|R16) */
.bracket.bracket--7col{
  grid-template-columns:repeat(7,minmax(132px,1fr));
  min-width:980px;
}
/* 9-column variant (48-team format: R32|R16|QF|SF|F|SF|QF|R16|R32).
   R32 columns get a smaller min-width since they pack twice as many
   cards into the same vertical space. Bracket gets a wider min-width
   so the container can horizontally scroll if the viewport can't fit
   the natural width. */
.bracket.bracket--9col{
  grid-template-columns:
    minmax(118px,0.85fr) /* R32 left  */
    minmax(132px,1fr)    /* R16 left  */
    minmax(132px,1fr)    /* QF  left  */
    minmax(132px,1fr)    /* SF  left  */
    minmax(140px,1.05fr) /* FINAL     */
    minmax(132px,1fr)    /* SF  right */
    minmax(132px,1fr)    /* QF  right */
    minmax(132px,1fr)    /* R16 right */
    minmax(118px,0.85fr);/* R32 right */
  min-width:1240px;
}
/* Each column is a flex container that distributes its cards via
   space-around. CRITICAL: the column header lives OUTSIDE the
   space-around distribution (absolute, pinned to the top) so it
   doesn't eat one of the flex slots and shift cards downward
   asymmetrically. Without this, a single SF card no longer lands
   on the exact mid-Y of the two QF cards above its level. */
.bracket-col{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:stretch;
  gap:8px;
  min-width:0;
  padding-top:26px;   /* clear space the absolute header occupies */
}
.bracket-col-header{
  position:absolute;
  top:0;left:0;right:0;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:11px;letter-spacing:0.14em;
  color:var(--si-stadium-400);
  text-align:center;
  text-transform:uppercase;
  line-height:1.4;
  pointer-events:none;
}
/* R32 columns: 8 cards in the same vertical height as a 4-card R16
   column. Reduce per-card padding so the column doesn't outgrow the
   bracket; keep space-around so the midpoint of card pair K lines up
   with the centre-Y of R16 card K (after SVG measurement). */
.bracket--9col .col-r32-left,
.bracket--9col .col-r32-right{
  gap:4px;
}
.bracket--9col .col-r32-left .match,
.bracket--9col .col-r32-right .match{
  min-height:60px;
  padding:6px 10px;
}
.bracket--9col .col-r32-left .team-code,
.bracket--9col .col-r32-right .team-code{font-size:13px}
.bracket--9col .col-r32-left .match-head,
.bracket--9col .col-r32-right .match-head{font-size:9px;letter-spacing:0.06em}
/* FINAL column: no decorative L/R rails. The header label + the
   connector ligatures coming in from the two semis are enough to
   mark the column as the trophy spot; orange rails flanking the box
   looked like dangling vertical lines (regression flagged in QA).
   Keep the symmetrical inner padding so the column width matches
   the SF columns either side. */
.col-final{
  padding-left:10px;
  padding-right:10px;
}

/* Match card — paper-white surface, navy ink.
   Rendered as a <button> so click + keyboard focus + Enter/Space
   are native; the click opens the in-widget detail modal (lineups,
   goals, venue from sport_event_summary). */
.match{
  background:var(--si-paper-white);
  border:1px solid var(--si-stadium-200);
  border-radius:var(--radius);
  padding:8px 12px;
  display:flex;
  flex-direction:column;
  gap:5px;
  position:relative;
  text-align:left;
  width:100%;
  color:var(--si-stadium-navy);
  transition:border-color 0.08s ease, background 0.08s ease, transform 0.08s ease;
  min-height:78px;
  text-decoration:none;
  font:inherit;          /* reset <button> default font-size/weight */
  appearance:none;       /* reset platform button chrome */
}
.match--clickable{
  cursor:pointer;
}
.match--clickable:hover{
  border-color:var(--si-stadium-400);
  background:var(--si-paper-white);
  transform:translateY(-1px);
}
.match--clickable:focus-visible{
  outline:2px solid var(--si-sportsbook-orange);
  outline-offset:2px;
}
.match-head{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:10px;
  letter-spacing:0.06em;
  color:var(--si-stadium-400);
  text-transform:uppercase;
}
.match-aet{
  color:var(--si-sportsbook-orange);
  margin-left:6px;
  font-weight:700;
}
.match-row{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  padding:2px 0;
}
/* Winner indication WITHOUT the old vertical red bar. Just a small
   weight bump on the team code and a solid-fill score cell — reads
   as "this team advanced" without polluting the column with a stripe. */
.match-row--winner .team-code{
  color:var(--si-stadium-navy);
  font-weight:700;
}
.match-row--winner .score-cell{
  background:var(--si-stadium-navy);
  color:var(--si-paper-white);
  border-color:var(--si-stadium-navy);
}
.flag{
  width:18px;height:18px;
  border-radius:var(--radius);
  background:var(--si-stadium-200);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;
  overflow:hidden;
  flex-shrink:0;
}
.flag img{display:block;width:100%;height:100%;object-fit:cover}
.team-code{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:14px;letter-spacing:0.01em;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.placeholder-slot{
  display:inline-block;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:13px;letter-spacing:0.02em;
  color:var(--si-stadium-400);
  padding-left:4px;
  /* Slot strings can be long (e.g. "3A/3B/3C/3D/3F"); allow wrapping
     instead of overflow-hidden truncation. */
  white-space:normal;
  word-break:break-word;
  line-height:1.2;
  flex:1;
  min-width:0;
}
/* Placeholder rows: keep a stable height even with one short label
   so the card never collapses to an empty stripe. */
.match-row--placeholder{
  min-height:20px;
}
.score-cell{
  background:var(--si-off-white);
  color:var(--si-stadium-navy);
  border:1px solid var(--si-stadium-200);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:13px;
  min-width:24px;
  text-align:center;
  padding:1px 6px;
  border-radius:var(--radius);
  margin-left:auto;
}

/* Champion strip — full-width DARK band pinned to the bottom of the
   widget. The previous "card with orange border" treatment got lost
   in the off-white surface; this strip restores the editorial
   poster-style hit the customer asked for. ALWAYS rendered:
     - tone="current"  → the year being viewed has its own champion
                         (2018 / 2022 historical).
     - tone="previous" → the year being viewed has no champion yet
                         (2026 mid-tournament view) → show the
                         previous edition's winner as context.
   The name is the ONE place we keep the brand red — everywhere else
   on the strip is white-on-dark. */
.champion-strip{
  width:100%;
  background:#1A1A1A;
  color:var(--si-paper-white);
  margin-top:24px;
  border-top:2px solid var(--si-sportsbook-orange);
  border-bottom:1px solid #000;
}
.champion-strip-inner{
  max-width:1180px;
  margin:0 auto;
  padding:22px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.champion-strip-eyebrow{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:11px;letter-spacing:0.18em;
  color:#A4ADB6;
  text-transform:uppercase;
}
.champion-strip-main{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:4px;
}
.champion-strip-flag{
  width:34px;height:34px;
  border-radius:var(--radius);
  background:#2a2a2a;
  overflow:hidden;
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.champion-strip-flag img{display:block;width:100%;height:100%;object-fit:cover}
.champion-strip-name{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:30px;letter-spacing:0.02em;
  color:var(--si-sportsbook-orange);
  text-transform:uppercase;
  line-height:1;
}
.champion-strip-sub{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:12px;
  color:#A4ADB6;
  margin-top:2px;
}
/* Previous-edition variant — slightly muted name colour to read as
   "historical context" not "current champion". Still red, still the
   focal point, just one notch dimmer. */
.champion-strip--previous .champion-strip-name{
  color:#FF6A3D;
  font-size:26px;
}

/* third place card */
.third-place-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:18px 0 4px;
  gap:8px;
}
/* Reset the absolute positioning the bracket-col-header rule applies,
   since the third-place header lives outside the column grid and
   should just flow normally above its single card. */
.third-place-wrap .bracket-col-header{
  position:static;
  margin:0;
  color:var(--si-stadium-400);
}
.third-place-wrap .match{max-width:220px;width:100%}

/* legend — sits on the off-white page surface */
.legend-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 20px 18px;
  border-top:1px solid var(--si-stadium-200);
  flex-wrap:wrap;
  background:var(--si-off-white);
}
.legend-left{display:flex;gap:10px;flex-wrap:wrap}
.legend-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:11px;letter-spacing:0.1em;
  color:var(--si-stadium-400);
  text-transform:uppercase;
  padding:5px 10px;
  background:var(--si-paper-white);
  border:1px solid var(--si-stadium-200);
  border-radius:var(--radius);
}
.legend-chip .legend-bar{
  width:3px;height:14px;background:var(--si-sportsbook-orange);display:inline-block;border-radius:1px;
}
.legend-chip .legend-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--si-off-side-teal);
}
.legend-chip .legend-placeholder{
  font-family:var(--font-display);font-weight:700;
  color:var(--si-stadium-400);font-size:11px;
}
.legend-right{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--si-stadium-400);
  letter-spacing:0.02em;
}

/* banners */
.banner{
  margin:0 16px 12px;
  padding:10px 14px;
  border-radius:var(--radius);
  font-family:var(--font-sans);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
}
.banner-warn{
  background:var(--si-stadium-navy);
  color:var(--si-yellow-card);
  border:1px solid var(--si-yellow-card);
}
.banner-error{
  background:var(--si-stadium-navy);
  color:var(--si-paper-white);
  border:1px solid var(--si-sportsbook-orange);
}
.banner-info{
  background:var(--si-stadium-navy);
  color:var(--si-off-side-teal);
  border:1px solid var(--si-off-side-teal);
}

/* Empty + loading */
.empty,.loading{
  padding:60px 24px;
  text-align:center;
  color:var(--si-stadium-400);
  font-family:var(--font-sans);
  font-size:14px;
}

/* === Side panel — same surface rhythm as the rest of the page ===
   White surface, navy ink. Orange reserved for the section bracket
   marks. Muted labels stay --si-stadium-400. */
.panel-backdrop{
  position:fixed;inset:0;
  background:rgba(11,34,52,0.55);
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.12s ease;
}
.panel-backdrop.open{opacity:1;pointer-events:auto}
.panel{
  position:fixed;
  top:0;right:0;height:100%;
  width:min(480px,100%);
  background:var(--si-paper-white);
  color:var(--si-stadium-navy);
  border-left:1px solid var(--si-stadium-200);
  z-index:101;
  transform:translateX(100%);
  transition:transform 0.18s ease;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.panel.open{transform:translateX(0)}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 18px;
  background:var(--si-paper-white);
  border-bottom:1px solid var(--si-stadium-200);
}
.panel-round{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;letter-spacing:0.06em;
  color:var(--si-sportsbook-orange);
  text-transform:uppercase;
}
.panel-dates{
  font-family:var(--font-sans);
  font-size:11px;
  color:var(--si-stadium-400);
  margin-top:2px;
}
.panel-close{
  background:transparent;
  color:var(--si-stadium-navy);
  font-size:18px;line-height:1;
  width:44px;height:44px;
  border-radius:var(--radius);
  border:1px solid var(--si-stadium-200);
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.panel-close:hover{background:var(--si-stadium-100);border-color:var(--si-stadium-400)}
.panel-close:focus-visible{outline:2px solid var(--si-sportsbook-orange);outline-offset:2px}
.panel-body{
  flex:1;
  overflow-y:auto;
  padding:16px 18px 28px;
}
.panel-hero{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:center;
  padding:14px 0 18px;
  border-bottom:1px solid var(--si-stadium-200);
}
.hero-side{
  display:flex;align-items:center;gap:8px;
}
.hero-side.away{justify-content:flex-end}
.hero-flag{
  width:28px;height:28px;border-radius:var(--radius);
  overflow:hidden;background:var(--si-stadium-200);
  flex-shrink:0;
}
.hero-flag img{width:100%;height:100%;object-fit:cover;display:block}
.hero-code{
  font-family:var(--font-display);
  font-weight:700;
  font-size:24px;letter-spacing:0.04em;
  color:var(--si-stadium-navy);
}
.hero-score{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:34px;
  letter-spacing:0.04em;
  color:var(--si-stadium-navy);
  white-space:nowrap;
  text-align:center;
}
.hero-aet{
  font-family:var(--font-sans);
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--si-stadium-400);
  text-transform:uppercase;
  display:block;
  text-align:center;
  margin-top:2px;
}
/* Entain / Sports Interaction matchup deep-link CTA */
.matchup-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:14px 0 4px;
  padding:12px 16px;
  background:var(--si-sportsbook-orange);
  color:var(--si-paper-white);
  text-decoration:none;
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-style:italic;font-weight:900;
  font-size:14px;letter-spacing:0.06em;
  text-transform:uppercase;
  transition:filter .12s ease, transform .12s ease;
}
.matchup-cta:hover{filter:brightness(1.08)}
.matchup-cta:active{transform:translateY(1px)}
.matchup-cta:focus-visible{outline:2px solid var(--si-yellow-card);outline-offset:2px}
.matchup-cta-arrow{font-style:normal;font-weight:700}

.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:12px;letter-spacing:0.12em;
  color:var(--si-stadium-navy);
  text-transform:uppercase;
  border-left:2px solid var(--si-sportsbook-orange);
  padding:0 0 0 10px;
  margin:22px 0 10px;
}
.lineup-block{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lineup-team{display:flex;flex-direction:column;gap:6px;min-width:0}
.lineup-team-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;letter-spacing:0.04em;
  color:var(--si-stadium-navy);
  display:flex;align-items:center;gap:8px;
}
.lineup-list{display:flex;flex-direction:column;gap:3px;list-style:none;padding:0;margin:0}
.lineup-list li{
  display:flex;align-items:baseline;gap:7px;
  font-size:12px;
  color:var(--si-stadium-navy);
}
.lineup-list li.bench{color:var(--si-stadium-400)}
.lineup-list .num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--si-stadium-400);
  font-size:11px;
  min-width:16px;
}
.lineup-list .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lineup-list .scored{color:var(--si-sportsbook-orange);font-size:10px}
.lineup-section-label{
  font-family:var(--font-sans);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--si-stadium-400);
  margin:6px 0 2px;
}
.goal-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid var(--si-stadium-100);
  font-size:13px;
  color:var(--si-stadium-navy);
}
.goal-row:last-child{border-bottom:0}
.goal-min{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--si-stadium-400);
  font-size:12px;
  min-width:30px;
}
.goal-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goal-tag{
  font-family:var(--font-display);font-weight:700;
  font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--si-stadium-navy);
  padding:2px 8px;border-radius:var(--radius);
  background:var(--si-paper-white);
  border:1px solid var(--si-stadium-200);
}
.shootout-table{
  display:grid;
  grid-template-columns:1fr 22px 1fr;
  gap:4px 8px;
  align-items:center;
  margin-top:6px;
  font-size:12px;
}
.shootout-table .so-h{
  font-family:var(--font-display);font-weight:700;
  font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--si-stadium-400);
  padding-bottom:4px;
}
.shootout-table .so-glyph{
  font-size:14px;text-align:center;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  background:var(--si-paper-white);
  border:1px solid var(--si-stadium-200);
  border-radius:var(--radius);
  padding:1px 0;
}
.shootout-table .scored{color:var(--si-stadium-navy)}
.shootout-table .missed{color:var(--si-stadium-400)}
.shootout-table .nottaken{color:var(--si-stadium-400);opacity:.45}
.shootout-table .kick{
  text-align:center;
  font-family:var(--font-mono);font-size:11px;color:var(--si-stadium-400);
}
.info-row{
  display:flex;justify-content:space-between;gap:14px;
  padding:8px 0;
  font-size:13px;
  border-bottom:1px solid var(--si-stadium-100);
  color:var(--si-stadium-navy);
}
.info-row:last-child{border-bottom:0}
.info-key{
  font-family:var(--font-display);font-weight:700;
  font-size:10px;letter-spacing:0.1em;color:var(--si-stadium-400);
  text-transform:uppercase;
  flex-shrink:0;
}
.info-val{
  text-align:right;
  color:var(--si-stadium-navy);
  font-size:13px;
}
.info-val.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.empty-state{
  padding:24px 0;
  text-align:center;
  color:var(--si-stadium-400);
  font-size:13px;
}

/* === Showcase landing ===
   Same surface rhythm as the widget: navy header strip, off-white body. */
.showcase{
  background:var(--si-off-white);
  color:var(--si-stadium-navy);
  min-height:100vh;
  display:flex;flex-direction:column;
}
.showcase-header{
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--si-stadium-navy);
  color:var(--si-paper-white);
  border-bottom:1px solid rgba(0,0,0,0.06);
  flex-wrap:wrap;gap:14px;
}
.showcase-header .si-mark{height:28px}
.showcase-header nav{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
}
.showcase-header nav a{
  font-family:var(--font-display);font-weight:700;
  font-size:13px;letter-spacing:0.08em;
  color:var(--si-stadium-200);
  text-transform:uppercase;
  text-decoration:none;
}
.showcase-header nav a:hover{color:var(--si-paper-white)}
.hero-section{
  padding:56px 28px 24px;
  max-width:1180px;margin:0 auto;
  width:100%;
}
.hero-eyebrow{
  font-family:var(--font-display);font-weight:700;
  font-size:13px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--si-sportsbook-orange);
  margin-bottom:14px;
}
.hero-h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(48px,8vw,108px);
  line-height:0.92;
  letter-spacing:0.01em;
  margin:0 0 18px;
  text-transform:uppercase;
  color:var(--si-stadium-navy);
}
.hero-h1 span{color:var(--si-sportsbook-orange)}
.hero-sub{
  max-width:620px;
  color:var(--si-stadium-400);
  font-size:16px;
  line-height:1.55;
  margin:0 0 26px;
}
.stat-chips{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-bottom:32px;
}
.stat-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:700;
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  padding:7px 12px;border-radius:var(--radius);
  background:var(--si-paper-white);
  border:1px solid var(--si-stadium-200);
  color:var(--si-stadium-navy);
}
.stat-chip span{color:var(--si-sportsbook-orange);font-family:var(--font-mono);font-weight:600}
.preview-card{
  max-width:1180px;margin:0 auto 48px;
  width:100%;
  padding:0 28px;
}
.preview-frame-wrap{
  position:relative;
  aspect-ratio:5/4;
  background:var(--si-off-white);
  border:1px solid var(--si-stadium-200);
  border-radius:var(--radius);
  overflow:hidden;
}
@media (max-width:767px){
  .preview-frame-wrap{aspect-ratio:4/5}
}
.preview-frame-wrap iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  background:var(--si-off-white);
}
.preview-caption{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:14px;
  font-family:var(--font-sans);font-size:13px;
  color:var(--si-stadium-400);
  flex-wrap:wrap;
}
.standalone-link{
  font-family:var(--font-display);font-weight:700;
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--si-stadium-navy);text-decoration:none;
}
.standalone-link:hover{color:var(--si-sportsbook-orange)}

.embed-section{
  max-width:1180px;margin:0 auto 64px;
  padding:0 28px;
}
.cta-block{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:18px 22px;
  background:var(--si-sportsbook-orange);
  border-radius:var(--radius);
  margin-bottom:32px;
  flex-wrap:wrap;
}
.cta-block h2{
  margin:0;
  font-family:var(--font-display);font-weight:700;
  font-size:24px;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--si-paper-white);
}
.cta-block .cta-sub{
  color:rgba(255,255,255,0.85);font-size:13px;margin-top:2px;
}
.cta-arrow{
  font-family:var(--font-display);font-weight:700;
  font-size:18px;color:var(--si-paper-white);
}
.snippet-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
@media (max-width:760px){
  .snippet-grid{grid-template-columns:1fr}
}
.snippet{
  background:var(--si-paper-white);
  border:1px solid var(--si-stadium-200);
  border-radius:var(--radius);
  padding:18px;
  display:flex;flex-direction:column;gap:10px;
}
.snippet-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.snippet-title{
  font-family:var(--font-display);font-weight:700;
  font-size:13px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--si-stadium-navy);
}
.snippet-desc{
  color:var(--si-stadium-400);font-size:12px;
}
.copy-btn{
  font-family:var(--font-display);font-weight:700;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--radius);
  background:transparent;color:var(--si-stadium-navy);
  border:1px solid var(--si-stadium-navy);
  min-height:32px;
}
.copy-btn:hover{background:rgba(11,34,52,0.06)}
.copy-btn.copied{
  background:var(--si-off-side-teal);
  border-color:var(--si-off-side-teal);
  color:var(--si-paper-white);
}
.snippet pre{
  background:var(--si-stadium-navy);
  border:1px solid var(--si-stadium-navy);
  border-radius:var(--radius);
  padding:14px;
  margin:0;
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.55;
  color:var(--si-off-white);
  white-space:pre;
}

.showcase-footer{
  margin-top:auto;
  padding:20px 28px;
  border-top:1px solid var(--si-stadium-200);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--si-stadium-400);
  text-align:center;
  letter-spacing:0.04em;
  background:var(--si-off-white);
}
.showcase-footer a{color:var(--si-stadium-navy);text-decoration:none}
.showcase-footer a:hover{color:var(--si-sportsbook-orange)}

/* === Responsive (widget) ===
   Desktop (>=1024px): unchanged 7-column bracket.
   Tablet (768–1023px): bracket scrolls horizontally inside its container,
     page itself does not scroll horizontally. Sticky header at the top
     of the viewport so the year selector + status line stay visible.
   Mobile (<768px): stack the bracket vertically by round. All cards
     from both halves of a round flow under a single section header.
     Match cards become full-width minus gutter. Modal is full-screen. */

/* Tablet — horizontal scroll on the inner bracket container, sticky widget header. */
@media (max-width:1023px){
  .widget-top{
    position:sticky;
    top:0;
    z-index:50;
  }
  .bracket-area{
    padding:18px 14px 14px;
  }
  .bracket.bracket--7col{
    min-width:1280px;
    grid-template-columns:repeat(7,minmax(150px,1fr));
  }
  .bracket.bracket--9col{
    min-width:1480px;
    /* keep the desktop column ratios; just bump the floor minimums so
       cards don't crush when the bracket scrolls horizontally. */
    grid-template-columns:
      minmax(128px,0.85fr)
      minmax(148px,1fr)
      minmax(148px,1fr)
      minmax(148px,1fr)
      minmax(160px,1.05fr)
      minmax(148px,1fr)
      minmax(148px,1fr)
      minmax(148px,1fr)
      minmax(128px,0.85fr);
  }
  .status-line{max-width:240px;font-size:11px}
}

/* Mobile — vertical stack by round. */
@media (max-width:767px){
  .widget-top{
    padding:12px 14px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .widget-top-left{justify-content:space-between;flex-wrap:nowrap}
  .widget-top-right{
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
  }
  .year-pills{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .status-line{
    flex:1;
    text-align:left;
    max-width:none;
    font-size:11px;
  }

  /* Mobile box-model lockdown: the whole bracket chain has to live
     INSIDE the viewport. Desktop .bracket--7col/--9col sets
     min-width:980/1240px (specificity 0,2,0) which beats a flat
     .bracket{min-width:0}; override with matching specificity. */
  .bracket-area{
    padding:14px 0 14px;
    overflow-x:hidden;    /* never spill the viewport on mobile */
    max-width:100vw;
  }
  .bracket,
  .bracket.bracket--7col,
  .bracket.bracket--9col{
    display:flex;
    flex-direction:column;
    gap:0;
    min-width:0;           /* kill desktop's 980/1240 floor */
    grid-template-columns:none; /* 7/9-col grid templates go away */
    width:100%;
    max-width:100%;
    align-items:stretch;
    padding:0 14px;
    box-sizing:border-box;
  }
  /* Order columns into a sensible top-to-bottom flow.
     9-col (R32) tournaments: R32 -> R16 -> QF -> SF -> FINAL.
     7-col tournaments: R16 -> QF -> SF -> FINAL.
     R32 is OMITTED for 7-col seasons since the column simply isn't
     present in the DOM. Champion + 3rd-place blocks follow in DOM order. */
  .bracket-col{
    order:99;
    flex-direction:column;
    justify-content:flex-start;
    gap:10px;
    margin-bottom:18px;
  }
  .bracket-col.col-r32-left  { order:1 }
  .bracket-col.col-r32-right { order:2 }
  .bracket-col.col-r16-left  { order:3 }
  .bracket-col.col-r16-right { order:4 }
  .bracket-col.col-qf-left   { order:5 }
  .bracket-col.col-qf-right  { order:6 }
  .bracket-col.col-sf-left   { order:7 }
  .bracket-col.col-sf-right  { order:8 }
  .bracket-col.col-final     { order:9 }

  /* Single section header per round — hide the right-side duplicates. */
  .bracket-col.col-r32-right .bracket-col-header,
  .bracket-col.col-r16-right .bracket-col-header,
  .bracket-col.col-qf-right  .bracket-col-header,
  .bracket-col.col-sf-right  .bracket-col-header{ display:none }
  /* Tighter top margin on the right-side cards since they continue
     the same round visually. */
  .bracket-col.col-r32-right,
  .bracket-col.col-r16-right,
  .bracket-col.col-qf-right,
  .bracket-col.col-sf-right{ margin-top:-8px; margin-bottom:18px }

  /* R32 columns: same card sizing as R16 on mobile so 16 placeholder
     cards don't shrink to bare stripes. Per-card overrides are below
     in the consolidated .match block. */
  .bracket--9col .col-r32-left,
  .bracket--9col .col-r32-right{ gap:8px }

  .bracket-col-header{
    text-align:left;
    font-size:13px;
    letter-spacing:0.14em;
    margin:0 0 8px;
    color:var(--si-stadium-400);
  }

  /* FINAL column: drop the inline orange L/R edges, treat the
     section header as the orange marker with 2px top + bottom rules. */
  .bracket-col.col-final{
    border-left:0;
    border-right:0;
    padding:0;
  }
  .bracket-col.col-final .bracket-col-header{
    color:var(--si-stadium-navy);
    border-top:2px solid var(--si-sportsbook-orange);
    border-bottom:2px solid var(--si-sportsbook-orange);
    padding:10px 0;
    margin:6px 0 12px;
    text-align:center;
    font-size:14px;
    letter-spacing:0.18em;
  }

  /* Mobile cards: tighten padding so more cards fit per screen, but
     enforce a 64px floor so even a slot-only placeholder card has
     visual presence (never a bare empty stripe). Each card claims
     100% of its column width and box-sizing prevents padding from
     pushing the score off-screen. */
  .match{
    min-height:64px;
    padding:10px 12px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  /* Each card row: flag · sigla on the left, placar pinned right.
     justify-content:space-between guarantees the score stays inside
     even if the row has only 2 items (real team) or 1 item
     (placeholder). */
  .match-row{
    padding:2px 0;
    min-height:18px;
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    min-width:0;
    justify-content:space-between;
  }
  .match-row > .flag{flex:0 0 auto}
  .team-code{
    flex:1 1 auto;
    min-width:0;
    font-size:14px;        /* 1px down from desktop 14px? actually keep, but allow shrink */
    letter-spacing:0.03em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .score-cell{
    flex:0 0 auto;
    margin-left:auto;
    font-size:13px;        /* trim 1px so 2-digit scores never wrap */
    padding:1px 7px;
    min-width:26px;
    max-width:48px;
  }
  .match-row--placeholder{min-height:22px}
  .placeholder-slot{
    font-size:13px;
    padding-left:0;
    flex:1 1 auto;
    min-width:0;
  }
  /* Mobile bracket stacks vertically — hide the SVG connector layer
     entirely (lines would be drawn at meaningless coordinates against
     a column-stacked layout, and clip via overflow:hidden anyway). */
  .bracket-connectors{display:none}
  /* Column header reverts to inline flow on mobile (the desktop
     absolute positioning was needed for space-around math; mobile
     stacks cards top-to-bottom so the header just flows above). */
  .bracket-col{padding-top:0}
  .bracket-col-header{
    position:static;
    text-align:left;
  }
  /* R32 cards on mobile keep the same sizing as R16 cards. The
     desktop tighter-padding R32 override is suppressed here. */
  .bracket--9col .col-r32-left .match,
  .bracket--9col .col-r32-right .match{
    min-height:64px;
    padding:10px 12px;
  }
  .bracket--9col .col-r32-left .team-code,
  .bracket--9col .col-r32-right .team-code{font-size:14px}
  .bracket--9col .col-r32-left .match-head,
  .bracket--9col .col-r32-right .match-head{font-size:10px}

  .third-place-wrap{
    margin:8px 0 8px;
    padding:0 14px;
    max-width:100%;
    box-sizing:border-box;
  }
  .third-place-wrap .bracket-col-header{
    width:100%;
    text-align:left;
    font-size:13px;
    letter-spacing:0.14em;
  }
  .third-place-wrap .match{max-width:100%;width:100%}

  .champion-strip{margin-top:16px}
  .champion-strip-inner{padding:18px 18px}
  .champion-strip-name{font-size:22px}
  .champion-strip--previous .champion-strip-name{font-size:20px}
  .champion-strip-flag{width:28px;height:28px}

  .legend-strip{
    padding:14px 14px 18px;
    gap:10px;
    justify-content:flex-start;
  }
  .legend-right{font-size:10px}

  /* Modal: full-screen on mobile (already covers the safe areas
     since .panel uses top:0 right:0 height:100%). */
  .panel{
    width:100%;
    border-left:0;
  }
  .lineup-block{grid-template-columns:1fr;gap:18px}
  .panel-hero{grid-template-columns:1fr auto 1fr;gap:8px}
  .hero-code{font-size:20px}
  .hero-score{font-size:28px}

  /* Showcase landing on mobile */
  .showcase-header{padding:14px 18px}
  .showcase-header nav{gap:14px}
  .hero-section{padding:32px 18px 16px}
  .hero-h1{font-size:clamp(40px,11vw,72px);margin-bottom:14px}
  .hero-sub{font-size:14px;margin-bottom:20px}
  .stat-chips{gap:8px;margin-bottom:24px}
  .preview-card{padding:0 18px;margin-bottom:36px}
  .preview-caption{font-size:12px;justify-content:flex-start;gap:8px}
  .embed-section{padding:0 18px;margin-bottom:48px}
  .cta-block{padding:16px 18px;flex-direction:column;align-items:flex-start;gap:6px}
  .cta-block h2{font-size:20px;letter-spacing:0.03em}
  .cta-arrow{display:none}
  .snippet pre{font-size:11px;padding:12px}
  .showcase-footer{padding:18px 18px;font-size:10px}
}

/* Accessibility */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}