/* bracket/polish.css — entrance + interaction animations for /bracket
 * Presentation-only. Scoped to html[data-route="/bracket"].
 * Reduced-motion fallbacks included.
 * E1 final / polish/e1-final-routes 2026-06-09
 */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes bk-fade-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bk-scale-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Entrance: page header ────────────────────────────────── */
html[data-route="/bracket"] .bk-page-header {
  animation: bk-fade-rise .4s .05s ease both;
}
html[data-route="/bracket"] .bk-season-bar {
  animation: bk-fade-rise .35s .12s ease both;
}
html[data-route="/bracket"] .bk-switcher {
  animation: bk-fade-rise .35s .18s ease both;
}
html[data-route="/bracket"] .bk-roundnav {
  animation: bk-fade-rise .35s .22s ease both;
}
html[data-route="/bracket"] .bk-tree-wrap {
  animation: bk-fade-rise .4s .28s ease both;
}
html[data-route="/bracket"] .bk-champ {
  animation: bk-scale-in .4s .32s ease both;
}
html[data-route="/bracket"] .bk-footer {
  animation: bk-fade-rise .35s .36s ease both;
}

/* ── Button hover / active / focus-visible ────────────────── */
html[data-route="/bracket"] .btn-primary,
html[data-route="/bracket"] .btn--primary,
html[data-route="/bracket"] .btn--secondary {
  transition: transform .14s ease, box-shadow .14s ease, background .18s ease;
}
html[data-route="/bracket"] .btn-primary:hover,
html[data-route="/bracket"] .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 26, 26, .3);
}
html[data-route="/bracket"] .btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,45,45, .2);
}
html[data-route="/bracket"] .btn-primary:active,
html[data-route="/bracket"] .btn--primary:active,
html[data-route="/bracket"] .btn--secondary:active {
  transform: translateY(0);
}
html[data-route="/bracket"] .btn-primary:focus-visible,
html[data-route="/bracket"] .btn--primary:focus-visible,
html[data-route="/bracket"] .btn--secondary:focus-visible {
  outline: 2px solid var(--gold-accent, #FF2D2D);
  outline-offset: 3px;
}

/* JOIN BRACKET ghost — a visible tappable affordance on the dark hero
   (the canonical 10% hairline reads as near-invisible here). Stays a clear
   second to the red CREATE primary. */
html[data-route="/bracket"] .bk-header-actions .btn-ghost {
  border-color: var(--gray-border, #2A2A2A);
  background: rgba(255, 255, 255, .03);
}
html[data-route="/bracket"] .bk-header-actions .btn-ghost:hover {
  border-color: var(--red-primary, #FF1A1A);
  background: rgba(255, 26, 26, .07);
}

/* ── Round nav chip hover ─────────────────────────────────── */
html[data-route="/bracket"] .bk-rn {
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .14s ease;
}
html[data-route="/bracket"] .bk-rn:hover {
  transform: translateY(-1px);
}
html[data-route="/bracket"] .bk-rn:focus-visible {
  outline: 2px solid var(--gold-accent, #FF2D2D);
  outline-offset: 2px;
}

/* ── Bracket stat card hover ──────────────────────────────── */
html[data-route="/bracket"] .bk-stat {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-route="/bracket"] .bk-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  border-color: rgba(255,45,45, .25);
}

/* ── Modal entrance ───────────────────────────────────────── */
html[data-route="/bracket"] .bk-modal {
  animation: bk-scale-in .28s ease both;
}

/* ── Skeleton shimmer ─────────────────────────────────────── */
html[data-route="/bracket"] .bk-skeleton-match,
html[data-route="/bracket"] .bk-skeleton-head {
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: bk-shimmer 1.6s infinite;
}

/* ════════════════════════════════════════════════════════════
   DESIGN OVERHAUL 2026-06-13 (pass 2) — kills the ghost background
   bracket, angle-bracket connectors, concept-art seed badges + card
   surfaces on our own design language. Unlayered → wins over @layer.
   ════════════════════════════════════════════════════════════ */

/* (1) KILL the ghost second bracket: trophy_bg.png was painted as a 34%
   watermark behind the tree (.bk-tree::before) — it's the baked concept MOCK
   (its own bracket + championship card), so it read as a duplicate bracket
   superimposed on the real one. Gone. */
html[data-route="/bracket"] .bk-tree::before { display: none !important; content: none !important; }
/* Tone the misty-trophy backdrop down so the cards read cleanly on top. */
html[data-route="/bracket"] .bk-trophy-bg { opacity: .14 !important; }

/* (2) ANGLE-BRACKET connectors — crisp right-angle joins, red winner path
   (geometry drawn as H/V/H elbows in script.js; this styles the strokes). */
html[data-route="/bracket"] .bk-connectors path {
  fill: none; stroke: rgba(255,45,45,.34); stroke-width: 2;
  stroke-linejoin: miter; stroke-linecap: butt; shape-rendering: crispEdges;
}
html[data-route="/bracket"] .bk-connectors .bk-conn-winner {
  stroke: rgba(255,45,45,.92); stroke-width: 2.6;
  filter: drop-shadow(0 0 4px rgba(255,45,45,.45));
}

/* (3) Seed badges (concept art): RED chip for top-4 byes, blue-outline for the
   5–12 play-in seeds — replaces the bare gray number. */
html[data-route="/bracket"] .bk-team-seed {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; min-width: 22px; border-radius: 6px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0; line-height: 1;
}
html[data-route="/bracket"] .bk-team-seed--top {
  background: var(--red-primary, #FF1A1A); color: #0A0A0A;
  box-shadow: 0 0 0 1px rgba(255,26,26,.5);
}
html[data-route="/bracket"] .bk-team-seed--play {
  background: rgba(0,183,255,.14); color: var(--brand-blue, #00B7FF);
  box-shadow: inset 0 0 0 1px rgba(0,183,255,.45);
}
html[data-route="/bracket"] .bk-team--loser .bk-team-seed { opacity: .55; }

/* (3b) Team-row grid — FOUR explicit columns so seed | logo | name | score|pill
   all sit on ONE row. The shared base grid had only 3 tracks (32px | 1fr | auto);
   with the helmet <img> always present that was a 4th grid item, so the score
   (and the BYE pill) wrapped onto an implicit 2nd row at the far left — the
   "floating score / BYE-below-name" overlap. An explicit 4-col grid pins the
   logo next to the seed, lets the name flex+ellipsis, and keeps the score (or
   BYE pill) hard-right on the same line. Applies at every width. */
html[data-route="/bracket"] .bk-team {
  grid-template-columns: 26px 18px minmax(0, 1fr) auto;
  gap: 0 6px;
}
html[data-route="/bracket"] .bk-team-name { min-width: 0; }
html[data-route="/bracket"] .bk-team-score { white-space: nowrap; min-width: 24px; }

/* (4) Match cards in OUR design language: soft top-lit gradient surface,
   hairline border, red winner through-line rail. Not a generic library card. */
html[data-route="/bracket"] .bk-match {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, var(--black-soft, #121212), var(--black-card, #0B0B0B));
  border: 1px solid var(--hairline-2, rgba(255,255,255,.10));
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* Hover glow is a click affordance — scope it to cards that are ACTUALLY
   clickable (read-only info popup, pickable, or a wired bye stub). A plain
   `.bk-match` (a future-round TBD placeholder with no data yet) has no
   handler at all; giving it the same red-glow hover invited taps that did
   nothing (dead-click audit 2026-07-03 follow-up). */
html[data-route="/bracket"] .bk-match--info:hover,
html[data-route="/bracket"] .bk-match--pickable:hover,
html[data-route="/bracket"] .bk-match--bye-info:hover {
  border-color: rgba(255,45,45,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
html[data-route="/bracket"] .bk-team--winner {
  background: linear-gradient(90deg, rgba(255,45,45,.12), rgba(255,45,45,0) 60%) !important;
  box-shadow: inset 3px 0 0 var(--gold-accent, #FF2D2D);
}
html[data-route="/bracket"] .bk-team--winner .bk-team-name,
html[data-route="/bracket"] .bk-team--winner .bk-team-score { color: var(--gold-accent, #FF2D2D) !important; }
/* Kill the shared base's winner checkmark (components.css .bk-match--decided
   .bk-team--winner::after = ✓ absolutely positioned at right:14px) — that's
   exactly where the score now sits, so the ✓ rendered ON TOP of the score. The
   winner is already obvious from the red name+score, the highlighted row and
   the glowing red connector path, so the mark is redundant clutter. */
html[data-route="/bracket"] .bk-match--decided .bk-team--winner::after {
  content: none !important; display: none !important;
}
html[data-route="/bracket"] .bk-match--championship {
  border-color: rgba(255,45,45,.6) !important;
  box-shadow: 0 0 22px rgba(255,45,45,.22) !important;
}
html[data-route="/bracket"] .bk-round-name { font-family: var(--f-display, 'Graduate', sans-serif); }
html[data-route="/bracket"] .bk-round-sub { color: var(--gold-accent, #FF2D2D); opacity: .8; }

/* ════════════════════════════════════════════════════════════
   BRACKET REDESIGN 2026-06-13 — mobile round-pagination + champion
   spotlight + electric accent. Route-scoped, reduced-motion-guarded.
   See vision/_program/BRACKET-REDESIGN-SUPERPROMPT.md.
   ════════════════════════════════════════════════════════════ */

/* ── End-of-path champion spotlight — bigger, centered, red glow ── */
html[data-route="/bracket"] .bk-champ {
  margin-top: 20px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,45,45,.12), transparent 60%),
    linear-gradient(135deg, rgba(255,26,26,.12), rgba(10,10,10,.6) 62%);
  box-shadow: 0 0 0 1px rgba(255,45,45,.25), 0 18px 50px rgba(0,0,0,.5);
  overflow: hidden;
}
/* Electric outline (Pat's "electric bolt through the container") — a red arc
   that travels the championship spotlight border. Decorative; motion-guarded. */
@keyframes bk-electric {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
html[data-route="/bracket"] .bk-champ::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%, rgba(255,45,45,0) 38%, rgba(255,45,45,.95) 50%,
    rgba(255,255,255,.85) 53%, rgba(255,45,45,0) 66%, transparent 100%);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bk-electric 3.4s linear infinite;
}

/* Round-nav: long label on desktop, short label on mobile. */
html[data-route="/bracket"] .bk-rn-sm { display: none; }

/* ── Desktop fit: keep all 4 round columns on screen with no horizontal
   scroll at common widths. Tighten the inter-column gap, cap column width,
   and ellipsis long team names so the Championship column never clips. ── */
@media (min-width: 1280px) {
  /* The full 4-column tree only renders at ≥1280px. Below that the 250px sidebar
     leaves too little room for 4 readable columns + connectors, so the tree
     overflowed/overlapped (champ column clipped). Narrower widths now use the
     round-paginated layout below — one clean round per screen. */
  /* Inter-column gap so the angle-bracket connectors are a real visual element
     (the concept art's elbows), not invisible stubs. Columns + gaps tuned so the
     4 columns fit the content area (viewport − sidebar) from 1280px up with no
     horizontal scroll. */
  /* Gap grows with the viewport so the bracket fills a wide screen (the columns
     spread out with long connector elbows) instead of bunching on the left.
     CENTER the row so any leftover space is balanced left+right, never dumped as
     a dead black void on the right (the full-screen "messed up" look). */
  html[data-route="/bracket"] .bk-tree { gap: clamp(28px, 4.5vw, 96px) !important; justify-content: center; }
  /* EQUAL fixed-width columns + cards that fill them → every card's left/right
     edge sits at the same x, so the horizontal connector segments are the same
     length and perfectly straight (classic bracket). No content-driven width
     jitter that made the lines look ragged. Max grows on big screens so the
     cards don't look tiny in all that room. */
  html[data-route="/bracket"] .bk-round { flex: 0 0 clamp(160px, 12vw, 240px); min-width: 0; max-width: none; }
  html[data-route="/bracket"] .bk-match { width: 100%; }
  html[data-route="/bracket"] .bk-team-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* ── SYMMETRIC BRACKET GEOMETRY (screen-independent) ───────────────
     Columns are equal height (flex-row stretch). Give every card the SAME
     height and let `space-around` (NO gap) distribute them: each round's card
     centers then fall on clean fractions of the column height, so a QF sits
     exactly between its two feeders, a SF between two QFs, the Final between
     two SFs — a textbook bracket at 24″/27″/32″/any width. Venue detail moves
     into the click-through game popup so the cards stay uniform height. */
  html[data-route="/bracket"] .bk-matches { justify-content: space-around; gap: 0; padding: 6px 0; }
  html[data-route="/bracket"] .bk-match { height: 84px; box-sizing: border-box; display: flex; flex-direction: column; }
  html[data-route="/bracket"] .bk-match .bk-team { flex: 1 1 0; min-height: 0; }
  html[data-route="/bracket"] .bk-match .bk-match-venue { display: none; }
  html[data-route="/bracket"] .bk-match--championship { height: 84px; }
  html[data-route="/bracket"] .bk-match.bk-match--info { cursor: pointer; }
}

/* ── Compact (≤1279px): round-paginated, swipe-snap layout ──────────
   One round fills the screen; horizontal scroll-snap swaps rounds.
   The round-nav becomes a sticky segmented control (synced in JS via
   IntersectionObserver). Tree connector lines are hidden in this mode —
   each card carries its own context. Used for phones, tablets, half-screen
   windows and laptops too narrow to hold the 4-wide tree (which needs the
   full viewport minus the 250px sidebar — i.e. ~1280px+). */
@media (max-width: 1279px) {
  html[data-route="/bracket"] .bk-tree-scroll {
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none;
  }
  html[data-route="/bracket"] .bk-tree-scroll::-webkit-scrollbar { display: none; }
  html[data-route="/bracket"] .bk-tree { gap: 0; min-width: 100%; }
  html[data-route="/bracket"] .bk-round {
    min-width: 100%; flex: 0 0 100%; scroll-snap-align: start; padding: 0 2px;
  }
  /* No drawn tree on a phone — the paginated cards stand alone. */
  html[data-route="/bracket"] .bk-connectors,
  html[data-route="/bracket"] .bk-spark-canvas { display: none !important; }

  /* Sticky segmented round control */
  html[data-route="/bracket"] .bk-roundnav {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6;
    background: rgba(5,5,5,.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding: 10px 0; margin: 0 0 10px; gap: 6px;
    flex-wrap: nowrap;
  }
  /* Round tabs + LIST VIEW stay a single equal-width segmented row; SHARE sits
     outside the group so it never squeezes the tabs into overlap. */
  html[data-route="/bracket"] .bk-rn-group {
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 6px;
  }
  html[data-route="/bracket"] .bk-roundnav .bk-rn[data-goto] {
    flex: 1 1 0; min-width: 0; text-align: center; justify-content: center;
    padding: 9px 4px; font-size: 12px; letter-spacing: .04em; min-height: 40px;
    white-space: nowrap;
  }
  html[data-route="/bracket"] .bk-rn-lg { display: none; }
  html[data-route="/bracket"] .bk-rn-sm { display: inline; }
  html[data-route="/bracket"] .bk-roundnav .bk-share {
    flex: 0 0 auto; min-height: 40px;
  }
  /* Let the header subtitle wrap instead of clipping to "…· 2" on narrow screens. */
  html[data-route="/bracket"] .bk-page-subtitle {
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  /* Roomier full-width matchup cards + clear ≥44px tap rows on mobile. */
  html[data-route="/bracket"] .bk-round { min-width: 100%; }
  html[data-route="/bracket"] .bk-match { width: 100%; }
  html[data-route="/bracket"] .bk-team { min-height: 44px; }
}

/* Electric + confetti respect reduced motion (confetti is also JS-guarded). */
@media (prefers-reduced-motion: reduce) {
  html[data-route="/bracket"] .bk-champ::after { animation: none; opacity: .5; }
}

/* ── Reduced-motion overrides ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-route="/bracket"] .bk-page-header,
  html[data-route="/bracket"] .bk-season-bar,
  html[data-route="/bracket"] .bk-switcher,
  html[data-route="/bracket"] .bk-roundnav,
  html[data-route="/bracket"] .bk-tree-wrap,
  html[data-route="/bracket"] .bk-champ,
  html[data-route="/bracket"] .bk-footer,
  html[data-route="/bracket"] .bk-modal {
    animation: none;
    opacity: 1;
  }
  html[data-route="/bracket"] .bk-skeleton-match,
  html[data-route="/bracket"] .bk-skeleton-head {
    animation: none;
  }
  html[data-route="/bracket"] .bk-stat:hover,
  html[data-route="/bracket"] .bk-rn:hover,
  html[data-route="/bracket"] .btn-primary:hover,
  html[data-route="/bracket"] .btn--primary:hover,
  html[data-route="/bracket"] .btn--secondary:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════
   GAME-DETAIL POPUP (2026-06-13) — click a bracket card → game info
   → click through to either team. On-brand dark card, red accents.
   ════════════════════════════════════════════════════════════ */
html[data-route="/bracket"] ~ * .bk-gm-overlay,
.bk-gm-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.66);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: bk-gm-fade .18s ease both;
}
.bk-gm-overlay[hidden] { display: none; }
@keyframes bk-gm-fade { from { opacity: 0; } to { opacity: 1; } }
.bk-gm {
  position: relative; width: min(440px, 94vw);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,45,45,.10), transparent 58%),
    linear-gradient(180deg, #141414, #0B0B0B);
  border: 1px solid rgba(255,45,45,.35);
  border-radius: 16px; padding: 22px 22px 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  animation: bk-gm-pop .22s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes bk-gm-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.bk-gm-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; color: var(--gray-light, var(--gray-light,#C2C2C2));
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.bk-gm-close:hover { color: #fff; background: rgba(255,255,255,.06); }
.bk-gm-eyebrow {
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-accent, #FF2D2D); margin-bottom: 4px; padding-right: 28px;
}
.bk-gm-status {
  font-family: var(--f-mono, monospace); font-size: 12px; letter-spacing: .06em;
  color: var(--gray-light, var(--gray-light,#C2C2C2)); margin-bottom: 14px;
}
.bk-gm-team {
  display: grid; grid-template-columns: 26px 30px 1fr auto auto; align-items: center; gap: 10px;
  padding: 10px 0;
}
.bk-gm-team.is-winner .bk-gm-name { color: var(--gold-accent, #FF2D2D); font-weight: 700; }
.bk-gm-logo { width: 30px; height: 30px; object-fit: contain; }
.bk-gm-name { font-family: var(--f-display, 'Graduate', sans-serif); font-size: 18px; color: #F5F5F5; letter-spacing: .01em; }
.bk-gm-score { font-family: var(--f-numeral, monospace); font-size: 20px; font-weight: 700; color: #F5F5F5; min-width: 28px; text-align: right; }
.bk-gm-adv { width: 16px; color: var(--gold-accent, #FF2D2D); text-align: center; }
.bk-gm-teamlink {
  display: inline-block; margin: 2px 0 6px 36px;
  font-family: var(--f-mono, monospace); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--red-bright, #FF3B30); text-decoration: none;
}
.bk-gm-teamlink:hover { color: var(--gold-accent, #FF2D2D); }
.bk-gm-teamlink--off { color: var(--gray-light, var(--gray-light,#C2C2C2)); }
.bk-gm-vs {
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray-light, var(--gray-light,#C2C2C2)); text-align: center; margin: 2px 0;
}
.bk-gm-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--f-display, 'Graduate', sans-serif); letter-spacing: .04em;
  color: var(--gold-accent, #FF2D2D); font-size: 14px; text-align: center;
}
body.bk-gm-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .bk-gm-overlay, .bk-gm { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   "INVITE FRIENDS" panel after a pool is created (2026-06-13).
   ════════════════════════════════════════════════════════════ */
.bk-invite { text-align: center; padding: 4px 0 2px; animation: bk-gm-pop .24s cubic-bezier(.2,.9,.3,1.2) both; }
.bk-invite[hidden] { display: none; }
.bk-invite-emoji { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.bk-invite-lead { font-family: var(--f-body,'Inter',sans-serif); font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.5; margin: 0 0 10px; }
.bk-invite-note { font-family: var(--f-body,'Inter',sans-serif); font-size: 12px; color: var(--gold-accent, #FF2D2D); line-height: 1.5; margin: 0 0 12px; }
.bk-invite-label { display: block; text-align: left; font-family: var(--f-mono,monospace); font-size: 10px; letter-spacing: .14em; color: var(--gray-light,var(--gray-light,#C2C2C2)); margin: 10px 0 4px; }
.bk-invite-row { display: flex; align-items: stretch; gap: 8px; }
.bk-invite-code, .bk-invite-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,45,45,.4); border-radius: 8px;
  padding: 10px 12px; font-family: var(--f-mono,monospace); color: var(--white-bright,#F5F5F5);
}
.bk-invite-code { font-size: 22px; font-weight: 700; letter-spacing: .22em; color: var(--gold-accent, #FF2D2D); justify-content: center; }
.bk-invite-link { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gray-light,var(--gray-light,#C2C2C2)); }
.bk-invite-copy { flex: 0 0 auto; white-space: nowrap; }
.bk-invite-start { margin-top: 16px; }

/* Practice-mode banner (off-season pool filling out a completed CFP). */
.bk-practice-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,45,45,.12), rgba(255,45,45,.04));
  border: 1px solid rgba(255,45,45,.35);
  font-family: var(--f-body,'Inter',sans-serif); font-size: 13px; line-height: 1.45;
  color: rgba(255,255,255,.88);
}
.bk-practice-banner strong { color: var(--gold-accent, #FF2D2D); }
.bk-practice-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-accent, #FF2D2D); box-shadow: 0 0 8px rgba(255,45,45,.7); }

/* ════════════════════════════════════════════════════════════
   BREATHING ROOM + LIST VIEW (2026-06-13) — free the bracket from
   the cramped/overlapping feel; add a clear game-order list.
   ════════════════════════════════════════════════════════════ */

/* Give the bracket real vertical room so the cards aren't crammed edge-to-edge
   (space-around then spreads them out) and the rounds don't feel squished by the
   champion banner / footer below. */
@media (min-width: 1280px) {
  html[data-route="/bracket"] .bk-tree { min-height: clamp(540px, 64vh, 760px); }
  html[data-route="/bracket"] .bk-tree-scroll { padding-bottom: 22px; }
  html[data-route="/bracket"] .bk-champ { margin-top: 28px; }
  html[data-route="/bracket"] .bk-footer { margin-top: 22px; }
}

/* ── List view: clear, scannable game order (incl. byes) ───────────────── */
html[data-route="/bracket"] .bk-listview { max-width: 860px; margin: 0 auto; padding: 4px 0 8px; }
html[data-route="/bracket"] .bk-listview[hidden] { display: none; }
.bk-lv-round { margin: 0 0 22px; }
.bk-lv-round-name {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--f-display, 'Graduate', sans-serif); font-size: 18px; letter-spacing: .06em;
  color: var(--white-bright, #F5F5F5); margin: 0 0 10px;
  border-bottom: 1px solid rgba(255,45,45,.25); padding-bottom: 8px;
}
.bk-lv-round-where { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-accent, #FF2D2D); opacity: .85; }
.bk-lv-byes {
  font-family: var(--f-body, sans-serif); font-size: 13px; color: rgba(255,255,255,.78);
  margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
  background: rgba(255,45,45,.08); border: 1px solid rgba(255,45,45,.25);
}
.bk-lv-byes b { color: var(--gold-accent, #FF2D2D); }
.bk-lv-game {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 11px 14px; margin: 0 0 8px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border: 1px solid var(--hairline-2, rgba(255,255,255,.10));
}
.bk-lv-matchup { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.bk-lv-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.bk-lv-team .bk-team-seed { width: 22px; height: 22px; min-width: 22px; }
.bk-lv-name { font-family: var(--f-display, 'Graduate', sans-serif); font-size: 16px; color: #F5F5F5; }
.bk-lv-team.is-win .bk-lv-name { color: var(--gold-accent, #FF2D2D); }
.bk-lv-score { font-family: var(--f-numeral, monospace); font-size: 16px; font-weight: 700; color: #F5F5F5; margin-left: 2px; }
.bk-lv-vs { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light, var(--gray-light,#C2C2C2)); }
.bk-lv-meta { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: .04em; color: var(--gray-light, var(--gray-light,#C2C2C2)); text-align: right; flex: 0 0 auto; }
.bk-lv-adv { color: var(--gold-accent, #FF2D2D); }
.bk-layout-toggle .bk-btn-icon { font-size: 1em; }
@media (max-width: 600px) {
  .bk-lv-game { padding: 10px; }
  .bk-lv-meta { width: 100%; text-align: left; }
}

/* ════════════════════════════════════════════════════════════
   POOL PANEL — members, compare brackets, reveal setting (2026-06-13)
   ════════════════════════════════════════════════════════════ */
html[data-route="/bracket"] .bk-pool-panel {
  position: relative; z-index: 1; max-width: var(--sns-app-max, 1200px);
  margin: 22px auto 6px; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(180deg, var(--black-soft, #121212), var(--black-card, #0B0B0B));
  border: 1px solid var(--hairline-2, rgba(255,255,255,.10));
}
.bk-pp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bk-pp-title { font-family: var(--f-display, 'Graduate', sans-serif); font-size: 17px; letter-spacing: .06em; color: var(--gold-accent, #FF2D2D); margin: 0; }
.bk-pp-count { font-family: var(--f-mono, monospace); font-size: 12px; color: var(--gray-light, var(--gray-light,#C2C2C2)); }
.bk-pp-setting { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--hairline, rgba(255,255,255,.06)); font-family: var(--f-body, sans-serif); font-size: 13px; color: rgba(255,255,255,.85); }
.bk-pp-setting-lbl { font-weight: 700; }
.bk-pp-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bk-pp-radio input { accent-color: var(--gold-accent, #FF2D2D); }
.bk-pp-locked { font-family: var(--f-body, sans-serif); font-size: 13px; color: var(--gold-accent, #FF2D2D); background: rgba(255,45,45,.08); border: 1px solid rgba(255,45,45,.25); border-radius: 8px; padding: 9px 12px; margin: 0 0 12px; }
.bk-pp-members { display: flex; flex-direction: column; gap: 6px; }
.bk-pp-member { display: grid; grid-template-columns: 26px 1fr auto auto auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.025); border: 1px solid var(--hairline, rgba(255,255,255,.06)); }
.bk-pp-member.is-me { border-color: rgba(255,45,45,.4); background: rgba(255,45,45,.06); }
.bk-pp-rank { font-family: var(--f-mono, monospace); font-size: 13px; color: var(--gray-light, var(--gray-light,#C2C2C2)); text-align: center; }
.bk-pp-name { font-family: var(--f-display, 'Graduate', sans-serif); font-size: 15px; color: #F5F5F5; }
.bk-pp-you { font-family: var(--f-mono, monospace); font-size: 9px; letter-spacing: .1em; color: var(--white-bright, #F5F5F5); background: var(--gold-accent, #FF2D2D); padding: 1px 5px; border-radius: 4px; vertical-align: middle; }
.bk-pp-picked { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--gray-light, var(--gray-light,#C2C2C2)); }
.bk-pp-pts { font-family: var(--f-numeral, monospace); font-size: 14px; font-weight: 700; color: var(--white-bright, #F5F5F5); }
.bk-pp-view { font-family: var(--f-mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--white-bright, #F5F5F5); background: var(--gold-accent, #FF2D2D); border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.bk-pp-view:hover { background: #FF5C5C; }
.bk-pp-hidden { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--gray-light, var(--gray-light,#C2C2C2)); }
/* Compare modal */
.bk-compare { width: min(560px, 94vw); max-height: 86vh; overflow-y: auto; }
.bk-cmp-round { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-accent, #FF2D2D); margin: 14px 0 6px; }
.bk-cmp-row { display: grid; grid-template-columns: 1fr 100px 100px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.bk-cmp-headrow { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: .06em; color: var(--gray-light, var(--gray-light,#C2C2C2)); text-transform: uppercase; }
.bk-cmp-game { font-family: var(--f-body, sans-serif); font-size: 12px; color: rgba(255,255,255,.7); }
.bk-cmp-pick { font-family: var(--f-display, 'Graduate', sans-serif); font-size: 13px; color: #F5F5F5; }
.bk-cmp-pick.bk-cmp-correct { color: #3dba6e; }
.bk-cmp-pick.bk-cmp-wrong { color: var(--red-bright, #FF3B30); opacity: .8; }
@media (max-width: 600px) { .bk-pp-member { grid-template-columns: 22px 1fr auto; row-gap: 4px; } .bk-pp-picked, .bk-pp-pts { grid-column: 2 / -1; } }

/* ════════════════════════════════════════════════════════════
   PICK-CARD LAYOUT FIX (2026-06-13) — the click boxes must overlay
   the teams. The cramped 84px card squished the two team rows to
   ~22px each (tiny, misaligned click targets) to fit a 3rd "pick"
   line. Give pickable cards real height so each team row is a full
   ≥46px clickable box, and reserve the spread margin row so picking
   never changes the card height (which used to shift everything).
   Uniform per pool → first-round games stay aligned with the QF
   game they feed into.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  html[data-route="/bracket"] .bk-match--pickable { height: 96px; }
  html[data-route="/bracket"] .bk-match--pickable.bk-match--spread { height: 140px; }
}
/* Full-size clickable team rows — the click box IS the visible team. */
html[data-route="/bracket"] .bk-match--pickable .bk-team[data-pick-side] {
  min-height: 46px; align-items: center; cursor: pointer; border-radius: 7px; margin: 0 2px;
}
html[data-route="/bracket"] .bk-match--pickable .bk-team[data-pick-side]:first-child { border-bottom: none; }
html[data-route="/bracket"] .bk-match--pickable .bk-team[data-pick-side]:hover { background: rgba(255,45,45,.10); }
html[data-route="/bracket"] .bk-match--pickable .bk-team--picked {
  background: linear-gradient(90deg, rgba(255,45,45,.22), rgba(255,45,45,.05)) !important;
  box-shadow: inset 3px 0 0 var(--gold-accent, #FF2D2D);
}
html[data-route="/bracket"] .bk-match--pickable .bk-team--picked .bk-team-name { color: var(--gold-accent, #FF2D2D) !important; font-weight: 700; }
/* Spread margin row — always reserved (constant height), dim until a team is picked. */
html[data-route="/bracket"] .bk-match--spread .bk-pick-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  height: 40px; padding: 0 12px; margin-top: 2px;
  border-top: 1px solid var(--hairline, rgba(255,255,255,.06)); opacity: .5;
}
html[data-route="/bracket"] .bk-match--spread .bk-pick-bar.bk-pick-bar--armed { opacity: 1; }
html[data-route="/bracket"] .bk-pick-margin { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono, monospace); font-size: 12px; color: var(--gray-light, var(--gray-light,#C2C2C2)); }
html[data-route="/bracket"] .bk-margin-input { width: 52px; height: 28px; text-align: center; background: rgba(0,0,0,.4); border: 1px solid rgba(255,45,45,.4); border-radius: 6px; color: #F5F5F5; font-family: var(--f-mono, monospace); font-size: 14px; }
html[data-route="/bracket"] .bk-margin-input:disabled { border-color: rgba(255,255,255,.12); }
/* Compact/paginated: pickable cards size to content but keep ≥46px rows. */
@media (max-width: 1279px) {
  html[data-route="/bracket"] .bk-match--pickable .bk-team[data-pick-side] { min-height: 48px; }
}

/* ════════════════════════════════════════════════════════════
   REAL CFP TOPOLOGY (2026-06-13) — first column = 4 first-round games
   interleaved with 4 bye stubs, each pair feeding one quarterfinal, so
   the connector lines are short, straight and CORRECT.
   ════════════════════════════════════════════════════════════ */
/* Bye-stub card: a single top-4 seed entering at the quarterfinals. Same height
   as the game cards so the 8 first-column slots stay uniform and every QF centers
   exactly between its two feeders. */
html[data-route="/bracket"] .bk-match--bye {
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--black-card, #0B0B0B);
  border: 1px dashed rgba(255,45,45,.30);
}
html[data-route="/bracket"] .bk-match--bye .bk-team--byerow {
  width: 100%; min-height: 0; border-bottom: none; opacity: .92; cursor: default;
}
/* Wired bye stub (real team, has a /team/<slug> destination) — tap opens the
   same game-detail popup pattern as a read-only matchup card (dead-click
   audit 2026-07-03 follow-up: this card was visually identical to a clickable
   team row but had no handler at all). */
html[data-route="/bracket"] .bk-match--bye-info {
  cursor: pointer;
}
html[data-route="/bracket"] .bk-match--bye-info .bk-team--byerow {
  cursor: pointer;
}
/* Non-interactive team row (future-round slot with no decided teams yet, or
   a TBD placeholder for a round that hasn't been generated): no pick handler,
   no info-mode ancestor — kill the pointer cursor so it doesn't read as a
   dead button (dead-click audit 2026-07-03). */
html[data-route="/bracket"] .bk-team--static {
  cursor: default;
}
html[data-route="/bracket"] .bk-bye-pill {
  margin-left: auto; font-family: var(--f-mono, monospace); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; color: var(--gold-accent, #FF2D2D);
  background: rgba(255,45,45,.12); border: 1px solid rgba(255,45,45,.4);
  border-radius: 4px; padding: 2px 7px;
}
/* Match the bye stub to the taller pickable card height in pick mode (alignment). */
html[data-route="/bracket"] .bk-tree--pick .bk-match--bye { height: 96px; }
html[data-route="/bracket"] .bk-tree--pick.bk-tree--spread .bk-match--bye { height: 140px; }