/* ==========================================================================
   Bracket Challenge — the modern skin (user/predictions.php?view=bracket, Oct 2026)
   --------------------------------------------------------------------------
   Linked by includes/bracket_view.php (inside the page) and by its hero
   (includes/bracket_ui.php bracketHeroHtml(), inside #hero-container).
   Every selector starts at .bk-modern (the page), .bkh (the hero) or a bk-
   class only this page prints (the toast).
   Cards use EXACTLY the sidebar panel's box (.benfica-layout .bn-panel): body
   background, a 1px hairline ring, the theme radius and the theme shadow; in
   dark mode the tertiary surface and a white hairline. Colours are theme
   tokens (literals only as var() fallbacks and neutral black/white alphas),
   so light, dark and every skin follow.

   Layers: A. tokens  B. hero  C. games bar + section heads + picker
           D. status bar  E. ladder + columns  F. tie cards  G. champion
           H. leaderboard  I. sidebar + notes + toast  J. phones  K. motion
   ========================================================================== */

/* A. Tokens */
.bk-modern, .bk-toast {
    --bk-card: var(--bs-body-bg);
    --bk-ring: rgba(0, 0, 0, .07);
    --bk-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
    --bk-radius: var(--theme-radius-lg, 1.1rem);
    --bk-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --bk-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --bk-line: var(--theme-border, var(--bs-border-color));
    --bk-ink: var(--theme-ink, var(--bs-body-color));
    --bk-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --bk-faint: var(--theme-ink-faint, var(--bs-secondary-color));
    --bk-primary: var(--theme-primary, var(--bs-primary));
    --bk-primary-rgb: var(--theme-primary-rgb, 200, 16, 46);
    --bk-primary-ink: color-mix(in oklab, var(--bk-primary) 80%, var(--bk-ink));
    --bk-on: var(--theme-on-primary, #fff);
    --bk-accent: var(--theme-accent, var(--bs-warning));
    --bk-accent-rgb: var(--theme-accent-rgb, 244, 178, 35);
    --bk-accent-ink: color-mix(in oklab, var(--bk-accent) 62%, var(--bk-ink));
    --bk-ok: var(--theme-success, var(--bs-success));
    --bk-ok-rgb: var(--theme-success-rgb, 25, 135, 84);
    --bk-ok-ink: var(--theme-success-strong, var(--bs-success));
    --bk-bad: var(--theme-danger, var(--bs-danger));
    --bk-bad-rgb: var(--theme-danger-rgb, 220, 53, 69);
    --bk-bad-ink: var(--theme-danger-strong, var(--bs-danger));
    --bk-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
[data-bs-theme="dark"] .bk-modern, [data-bs-theme="dark"] .bk-toast {
    --bk-card: var(--bs-tertiary-bg, #1e1e1e);
    --bk-ring: rgba(255, 255, 255, .08);
    --bk-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .3));
    --bk-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--bk-card));
    --bk-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--bk-card));
    --bk-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --bk-primary-ink: var(--theme-link, var(--bk-ink));
    --bk-accent-ink: var(--bk-accent);
    --bk-ok-ink: color-mix(in oklab, var(--bk-ok) 58%, white);
    --bk-bad-ink: color-mix(in oklab, var(--bk-bad) 58%, white);
}

/* ==========================================================================
   B. Hero (hero.php 'bracketchallenge' -> bracketHeroHtml()). Sizes come from the
      shared page-hero block at the end of style.css (.hero-pv2--page); only the
      layout and the badge's icon colour are the page's own.
   ========================================================================== */
.bkh.hero-pv2--bk .pv2 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 30rem); }
.bkh.hero-pv2--bk .bkh-badge { place-items: center; }
.bkh.hero-pv2--bk .bkh-badge > i { opacity: 1; color: var(--theme-accent-on-primary, var(--theme-accent, #F4B223)); }
.bkh.hero-pv2--bk .bkh-sub { max-width: 40rem; color: color-mix(in oklab, var(--theme-on-primary, #fff) 82%, transparent); }
.bkh.hero-pv2--bk .bkh-panel { display: flex; flex-direction: column; gap: .55rem; }
.bkh.hero-pv2--bk .bkh-side .pv2-stats-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkh.hero-pv2--bk .bkh-side .pv2-stat { flex: 1 1 0; }
.bkh.hero-pv2--bk .bkh-side .pv2-stat-label { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.1; }
@media (max-width: 1199.98px) {
    .bkh.hero-pv2--bk .pv2 { grid-template-columns: auto minmax(0, 1fr); }
    .bkh.hero-pv2--bk .bkh-side { grid-column: 1 / -1; }
}

/* ==========================================================================
   C. Games bar, section heads, the competition picker
   ========================================================================== */
/* The games link bar (luTopBar, #lu-top): sticky under the site header, like the hub. */
.benfica-layout.bk-modern #lu-top {
    position: sticky; top: var(--pl-sticky-top, calc(var(--navbar-height, 50px) + 8px)); z-index: 1020;
    margin-top: 0 !important; margin-bottom: 1rem; transition: top .2s ease;
}
.benfica-layout.bk-modern #lu-top.is-stuck .lu-topbar {
    background: var(--theme-surface, var(--bs-body-bg));
    box-shadow: var(--elev-2, 0 4px 12px rgba(0, 0, 0, .08)), 0 8px 24px rgba(0, 0, 0, .06);
}
.benfica-layout.bk-modern .bn-main > .bn-section + .bn-section { margin-top: 1rem; }

/* The picker: a rounded pill like the season picker (no .btn: the menuizer leaves it). */
.bk-modern .bk-comp-pick { display: inline-flex; align-items: center; gap: .35rem; margin: 0; min-width: 0; max-width: 100%; }
.bk-modern .bk-pick-pill {
    position: relative; display: inline-flex; align-items: center; gap: .35rem; min-width: 0; max-width: 100%;
    height: 1.9rem; margin: 0; padding: 0 .3rem 0 .7rem;
    border: 1px solid color-mix(in oklab, var(--bk-line) 70%, transparent); border-radius: 999px;
    background: var(--bk-soft); color: var(--bk-ink); cursor: pointer;
}
.bk-modern .bk-pick-pill:hover { background: var(--bk-soft-2); }
.bk-modern .bk-pick-pill > i:first-child { color: var(--bk-accent-ink); font-size: .74rem; flex: 0 0 auto; }
.bk-modern .bk-pick-pill select {
    appearance: none; -webkit-appearance: none; border: 0; background: transparent; box-shadow: none;
    min-width: 0; max-width: 16rem; padding: 0 1.15rem 0 0; margin: 0;
    color: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.bk-modern .bk-pick-pill select:focus { outline: none; }
.bk-modern .bk-pick-pill:focus-within { outline: 2px solid var(--bk-primary); outline-offset: 1px; }
.bk-modern .bk-pick-pill select option { color: var(--bs-body-color); background: var(--bs-body-bg); }
.bk-modern .bk-pick-pill .bk-pick-chev,
.bk-modern .bk-pick-pill > i:last-child { position: absolute; right: .6rem; pointer-events: none; font-size: .6rem; color: var(--bk-muted); }

/* ==========================================================================
   D. The status bar (members) / the guest line
   ========================================================================== */
.bk-modern .bk-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap;
    padding: .6rem .8rem; margin-bottom: 1rem;
    background: var(--bk-card); border: 1px solid var(--bk-ring); border-radius: var(--bk-radius); box-shadow: var(--bk-shadow);
}
.bk-modern .bk-bar-stats { display: flex; align-items: center; gap: .4rem 1.1rem; flex-wrap: wrap; min-width: 0; }
.bk-modern .bk-stat { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.bk-modern .bk-stat > b { font-size: 1.15rem; font-weight: 900; color: var(--bk-ink); font-variant-numeric: tabular-nums; }
.bk-modern .bk-stat > b small { font-size: .7rem; font-weight: 800; color: var(--bk-faint); }
.bk-modern .bk-stat > small { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--bk-muted); white-space: nowrap; }
.bk-modern .bk-stat--meter { min-width: 7.5rem; }
.bk-modern .bk-meter { display: block; height: .3rem; margin-top: .25rem; border-radius: 99px; background: var(--bk-soft-2); overflow: hidden; }
.bk-modern .bk-meter-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--bk-primary); transition: width .5s var(--bk-ease); }
.bk-modern .bk-tally { display: inline-flex; gap: .3rem; }
.bk-modern .bk-bar-actions { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.bk-modern .bk-state {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    font-size: .72rem; font-weight: 800; color: var(--bk-muted);
}
.bk-modern .bk-state[data-bk-state="saved"] { color: var(--bk-ok-ink); }
.bk-modern .bk-state[data-bk-state="dirty"] { color: var(--bk-accent-ink); }
.bk-modern .bk-state[data-bk-state="locked"] { color: var(--bk-muted); }
/* Save = green, no shadow (the owner's rule for save / confirm buttons). */
.bk-modern .bk-save {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.1rem; padding: .35rem 1rem;
    border: 0; border-radius: 999px; background: var(--bk-ok); color: #fff; box-shadow: none;
    font-size: .8rem; font-weight: 800; white-space: nowrap; cursor: pointer;
    transition: background-color .2s ease, opacity .2s ease, transform .15s ease;
}
.bk-modern .bk-save:hover:not(:disabled) { background: color-mix(in oklab, var(--bk-ok) 86%, black); }
.bk-modern .bk-save:active:not(:disabled) { transform: scale(.97); }
.bk-modern .bk-save:disabled { opacity: .45; cursor: default; }
.bk-modern .bk-save:focus-visible { outline: 2px solid var(--bk-ok); outline-offset: 2px; }
.bk-modern .bk-save.is-busy i { animation: bkSpin 1s linear infinite; }
.bk-modern .bk-bar.is-guest { justify-content: flex-start; flex-wrap: nowrap; }
.bk-modern .bk-guest-ico {
    flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .7rem;
    background: rgba(var(--bk-primary-rgb), .1); color: var(--bk-primary-ink);
}
.bk-modern .bk-guest-txt { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: var(--bk-muted); line-height: 1.35; }
.bk-modern .bk-pill {
    display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; padding: .32rem .85rem;
    border: 1px solid color-mix(in oklab, var(--bk-line) 70%, transparent); border-radius: 999px;
    background: var(--bk-soft); color: var(--bk-ink); text-decoration: none; box-shadow: none;
    font-size: .76rem; font-weight: 800; white-space: nowrap;
}
.bk-modern .bk-pill:hover { background: var(--bk-soft-2); color: var(--bk-ink); }
.bk-modern .bk-pill i { color: var(--bk-primary-ink); }

/* chips (shared by the bar, the cards and the champion) */
.bk-modern .bk-chip {
    display: inline-flex; align-items: center; gap: .25rem; padding: .08rem .45rem; border-radius: 999px;
    font-size: .64rem; font-weight: 800; line-height: 1.4; white-space: nowrap;
    background: var(--bk-soft); color: var(--bk-muted);
}
.bk-modern .bk-chip[hidden] { display: none; }
.bk-modern .bk-chip i { font-size: .85em; }
.bk-modern .bk-chip.is-picked { background: rgba(var(--bk-primary-rgb), .12); color: var(--bk-primary-ink); }
.bk-modern .bk-chip.is-pending { background: rgba(var(--bk-accent-rgb), .2); color: var(--bk-accent-ink); }
.bk-modern .bk-chip.is-correct { background: rgba(var(--bk-ok-rgb), .14); color: var(--bk-ok-ink); }
.bk-modern .bk-chip.is-wrong { background: rgba(var(--bk-bad-rgb), .12); color: var(--bk-bad-ink); }
.bk-modern .bk-chip.is-locked { background: var(--bk-soft); color: var(--bk-muted); }
.bk-modern .bk-chip.is-gold { background: rgba(var(--bk-accent-rgb), .18); color: var(--bk-accent-ink); }

/* ==========================================================================
   E. The ladder: columns in a sideways scroller (intentional on phones). The
      scroller pads itself (and pulls back with negative margins) so the cards'
      shadows are not clipped by its own overflow.
   ========================================================================== */
.bk-modern .bk-scroller {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    margin: -.5rem -.75rem -1.75rem; padding: .5rem .75rem 1.75rem;
    scroll-snap-type: x proximity; scroll-padding-inline: .75rem;
    scrollbar-width: thin; scrollbar-color: var(--bk-line) transparent;
}
.bk-modern .bk-scroller:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: -2px; border-radius: var(--bk-radius); }
.bk-modern .bk-ladder { position: relative; display: flex; align-items: stretch; gap: 2.25rem; width: max-content; min-width: 100%; }
.bk-modern .bk-lines { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 0; }
.bk-modern .bk-lines path { fill: none; stroke: var(--bk-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bk-modern .bk-lines path.is-done { stroke: color-mix(in oklab, var(--bk-muted) 55%, transparent); }
.bk-modern .bk-lines path.is-mine { stroke: rgba(var(--bk-primary-rgb), .55); }
.bk-modern .bk-lines path.is-hit { stroke: rgba(var(--bk-ok-rgb), .7); }
.bk-modern .bk-round {
    position: relative; z-index: 1; flex: 0 0 13.75rem; display: flex; flex-direction: column; gap: .7rem;
    scroll-snap-align: start; min-width: 0;
}
.bk-modern .bk-round-head {
    display: flex; align-items: center; gap: .4rem; min-width: 0; padding: 0 .15rem;
}
.bk-modern .bk-round-head > i { color: var(--bk-faint); font-size: .72rem; flex: 0 0 auto; }
.bk-modern .bk-round--champ .bk-round-head > i { color: var(--bk-accent-ink); }
.bk-modern .bk-round-name {
    flex: 1 1 auto; min-width: 0; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
    color: var(--bk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-modern .bk-round-n { font-size: .64rem; font-weight: 800; color: var(--bk-faint); }
.bk-modern .bk-round-chip {
    display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto; padding: .06rem .45rem; border-radius: 999px;
    font-size: .6rem; font-weight: 800; white-space: nowrap; background: var(--bk-soft); color: var(--bk-muted);
}
.bk-modern .bk-round-chip i { font-size: .85em; }
.bk-modern .bk-round-chip.is-open { background: rgba(var(--bk-ok-rgb), .14); color: var(--bk-ok-ink); }
.bk-modern .bk-round-chip.is-done { background: var(--bk-soft); color: var(--bk-muted); }
.bk-modern .bk-round-chip.is-gold { background: rgba(var(--bk-accent-rgb), .18); color: var(--bk-accent-ink); }
/* Later rounds hold fewer ties: spreading them evenly reads as a bracket. */
.bk-modern .bk-ties { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; gap: 1rem; }

/* a league / group phase: a table, not ties */
.bk-modern .bk-stage {
    display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem .9rem;
    background: var(--bk-card); border: 1px solid var(--bk-ring); border-radius: var(--bk-radius); box-shadow: var(--bk-shadow);
}
.bk-modern .bk-stage-ico {
    display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .7rem;
    background: var(--bk-soft); color: var(--bk-muted);
}
.bk-modern .bk-stage-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.bk-modern .bk-stage-txt b { font-size: .84rem; font-weight: 900; color: var(--bk-ink); }
.bk-modern .bk-stage-txt small { font-size: .7rem; color: var(--bk-muted); line-height: 1.35; }
.bk-modern .bk-stage-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; color: var(--bk-primary-ink); text-decoration: none; }
.bk-modern .bk-stage-link:hover { text-decoration: underline; }

/* ==========================================================================
   F. Tie cards — the sidebar panel's box; both crests; the pick state
   ========================================================================== */
.bk-modern .bk-tie {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    padding: .45rem .45rem .4rem;
    background: var(--bk-card); border: 1px solid var(--bk-ring); border-radius: var(--bk-radius); box-shadow: var(--bk-shadow);
    transition: border-color .2s ease, transform .2s var(--bk-ease);
}
.bk-modern .bk-tie.is-picked, .bk-modern .bk-tie.has-pending { border-color: rgba(var(--bk-primary-rgb), .35); }
.bk-modern .bk-tie.is-correct { border-color: rgba(var(--bk-ok-rgb), .45); }
.bk-modern .bk-tie.is-wrong { border-color: rgba(var(--bk-bad-rgb), .35); }
.bk-modern .bk-tie.is-busy { opacity: .6; pointer-events: none; }
.bk-modern .bk-tie-meta {
    display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 0;
    padding: .05rem .3rem .3rem; font-size: .66rem; color: var(--bk-faint);
}
.bk-modern .bk-when { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bk-modern .bk-when i { font-size: .9em; flex: 0 0 auto; }
.bk-modern .bk-tie.is-locked .bk-when, .bk-modern .bk-tie.is-tbd .bk-when { color: var(--bk-muted); }

.bk-modern .bk-side {
    display: flex; align-items: center; gap: .5rem; width: 100%; min-width: 0; min-height: 2.5rem;
    padding: .3rem .45rem; margin: 0; border: 1px solid transparent; border-radius: .8rem;
    background: transparent; color: var(--bk-ink); text-align: left; font: inherit; font-size: .82rem; font-weight: 700;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.bk-modern .bk-side + .bk-side { margin-top: .2rem; }
.bk-modern button.bk-side { cursor: pointer; }
.bk-modern button.bk-side:hover { background: var(--bk-soft); }
.bk-modern button.bk-side:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 1px; }
.bk-modern .bk-side.is-pick { background: rgba(var(--bk-primary-rgb), .1); border-color: rgba(var(--bk-primary-rgb), .3); color: var(--bk-primary-ink); }
.bk-modern button.bk-side.is-pick:hover { background: rgba(var(--bk-primary-rgb), .15); }
.bk-modern .bk-side.is-pending { border-style: dashed; border-color: rgba(var(--bk-accent-rgb), .9); background: rgba(var(--bk-accent-rgb), .12); color: var(--bk-ink); }
.bk-modern .bk-side.is-winner { background: rgba(var(--bk-ok-rgb), .12); color: var(--bk-ok-ink); }
.bk-modern .bk-tie.is-wrong .bk-side.is-pick { background: rgba(var(--bk-bad-rgb), .09); border-color: rgba(var(--bk-bad-rgb), .3); color: var(--bk-bad-ink); text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-modern .bk-side.is-out { opacity: .5; }
.bk-modern .bk-side.is-tbd { color: var(--bk-faint); font-weight: 600; font-style: italic; }
.bk-modern .bk-side-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-modern .bk-side-score { flex: 0 0 auto; min-width: 1.2rem; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--bk-ink); }
.bk-modern .bk-side-mark { flex: 0 0 auto; font-size: .8rem; }
.bk-modern .bk-side-mark.is-win { color: var(--bk-accent-ink); }
.bk-modern .bk-crest { width: 1.6rem; height: 1.6rem; object-fit: contain; flex: 0 0 auto; }
.bk-modern .bk-crest-txt {
    display: grid; place-items: center; border-radius: 50%; background: var(--bk-soft);
    color: var(--bk-muted); font-size: .66rem; font-weight: 900; font-style: normal;
}
.bk-modern .bk-crest-txt.is-tbd { color: var(--bk-faint); font-size: .6rem; }
.bk-modern .bk-side.is-picked-now { animation: bkPop .32s var(--bk-ease); }

/* ==========================================================================
   G. Champion
   ========================================================================== */
.bk-modern .bk-champ {
    display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .85rem; text-align: center;
    background: var(--bk-card); border: 1px solid var(--bk-ring); border-radius: var(--bk-radius); box-shadow: var(--bk-shadow);
    background-image: radial-gradient(120% 70% at 50% 0%, rgba(var(--bk-accent-rgb), .16), transparent 70%);
}
.bk-modern .bk-champ-crest {
    display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 1rem;
    background: rgba(var(--bk-accent-rgb), .16); color: var(--bk-accent-ink); font-size: 1.5rem;
}
.bk-modern .bk-champ-crest .bk-crest { width: 2.6rem; height: 2.6rem; }
.bk-modern .bk-champ-crest .bk-crest-txt { font-size: 1rem; }
.bk-modern .bk-champ-name { font-size: .92rem; font-weight: 900; color: var(--bk-ink); line-height: 1.2; }
.bk-modern .bk-champ-sub { font-size: .7rem; color: var(--bk-muted); line-height: 1.35; }
.bk-modern .bk-champ .bk-pick-pill { width: 100%; justify-content: flex-start; }
.bk-modern .bk-champ .bk-pick-pill select { flex: 1 1 auto; max-width: none; }
.bk-modern .bk-champ.is-correct { border-color: rgba(var(--bk-ok-rgb), .45); }
.bk-modern .bk-champ.is-wrong { border-color: rgba(var(--bk-bad-rgb), .35); }
.bk-modern .bk-champ.has-pending { border-color: rgba(var(--bk-accent-rgb), .9); border-style: dashed; }

/* ==========================================================================
   H. Leaderboard rows (avatar faces, rank, one meta line, points)
   ========================================================================== */
.bk-modern .bk-board { display: flex; flex-direction: column; gap: .5rem; }
.bk-modern .bk-row {
    display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .5rem .8rem .5rem .6rem;
    background: var(--bk-card); border: 1px solid var(--bk-ring); border-radius: var(--bk-radius); box-shadow: var(--bk-shadow);
    color: var(--bk-ink); text-decoration: none; transition: transform .18s var(--bk-ease);
}
.bk-modern .bk-row:hover { color: var(--bk-ink); transform: translateY(-1px); }
.bk-modern .bk-row.is-me { border-color: rgba(var(--bk-primary-rgb), .4); box-shadow: inset 3px 0 0 var(--bk-primary), var(--bk-shadow); }
.bk-modern .bk-rank {
    flex: 0 0 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: .55rem;
    background: var(--bk-soft); color: var(--bk-muted); font-size: .74rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.bk-modern .bk-row.is-top-1 .bk-rank { background: rgba(var(--bk-accent-rgb), .25); color: var(--bk-accent-ink); }
.bk-modern .bk-row.is-top-2 .bk-rank { background: color-mix(in oklab, var(--bk-soft-2) 70%, #c0c6cc); color: var(--bk-ink); }
.bk-modern .bk-row.is-top-3 .bk-rank { background: color-mix(in oklab, var(--bk-soft-2) 65%, #cd8b52); color: var(--bk-ink); }
.bk-modern .bk-av {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    display: grid; place-items: center; background: rgba(var(--bk-primary-rgb), .12); color: var(--bk-primary-ink);
    font-size: .74rem; font-weight: 900;
}
.bk-modern .bk-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.bk-modern .bk-row-name { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.bk-modern .bk-uname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 800; }
.bk-modern .bk-you { flex: 0 0 auto; padding: 0 .4rem; border-radius: 999px; background: var(--bk-primary); color: var(--bk-on); font-size: .58rem; font-weight: 900; text-transform: uppercase; line-height: 1.5; }
.bk-modern .bk-row-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--bk-muted); }
.bk-modern .bk-row-meta i { color: var(--bk-accent-ink); }
.bk-modern .bk-row-pts { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: .2rem; }
.bk-modern .bk-row-pts b { font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.bk-modern .bk-row-pts small { font-size: .62rem; font-weight: 800; color: var(--bk-muted); text-transform: uppercase; }
.bk-modern .bk-board-gap { text-align: center; color: var(--bk-faint); font-size: .8rem; line-height: 1; }

/* ==========================================================================
   I. Sidebar list, notes, toast
   ========================================================================== */
.bk-modern .bk-how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.bk-modern .bk-how li { display: flex; gap: .55rem; align-items: flex-start; font-size: .8rem; line-height: 1.4; color: var(--bk-muted); }
.bk-modern .bk-how li i { flex: 0 0 1rem; margin-top: .18rem; text-align: center; color: var(--bk-primary-ink); font-size: .8rem; }
.bk-modern .bk-note {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; margin-bottom: 1rem;
    background: var(--bk-card); border: 1px solid var(--bk-ring); border-radius: var(--bk-radius); box-shadow: var(--bk-shadow);
    font-size: .82rem; color: var(--bk-muted); line-height: 1.4;
}
.bk-modern .bk-note > i { flex: 0 0 auto; color: var(--bk-primary-ink); }
.bk-modern .bk-note.is-bad > i { color: var(--bk-bad-ink); }
.bk-toast {
    position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(1rem); z-index: 1080;
    max-width: calc(100vw - 2rem); padding: .5rem .95rem; border-radius: 999px;
    font-size: .78rem; font-weight: 800; background: var(--bk-ink); color: var(--bs-body-bg);
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.bk-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.bk-toast.is-ok { background: var(--bk-ok); color: #fff; }
.bk-toast.is-bad { background: var(--bk-bad); color: #fff; }

/* ==========================================================================
   J. Phones: one column in view with the next one peeking; the bar stacks
   ========================================================================== */
@media (max-width: 575.98px) {
    .bk-modern .bk-round { flex-basis: min(15rem, calc(100vw - 6.5rem)); }
    .bk-modern .bk-ladder { gap: 1.6rem; }
    .bk-modern .bk-bar { padding: .55rem .65rem; gap: .5rem; }
    .bk-modern .bk-bar-stats { gap: .35rem .85rem; width: 100%; justify-content: space-between; }
    .bk-modern .bk-stat > b { font-size: 1rem; }
    .bk-modern .bk-stat--meter { min-width: 6rem; }
    .bk-modern .bk-bar-actions { width: 100%; justify-content: space-between; margin-left: 0; }
    .bk-modern .bk-save { min-height: 2.4rem; }
    .bk-modern .bk-pick-pill select { max-width: 9.5rem; }
    .bk-modern .bk-row { padding: .45rem .6rem .45rem .5rem; gap: .5rem; }
}
/* Phones: the competition picker in the section head is an icon pill (the select covers
   it, so a tap opens the list); the champion picker keeps its words. */
@media (max-width: 575.98px) {
    .bk-modern .bk-comp-pick { flex: 0 0 auto; }
    .bk-modern .bk-comp-pick .bk-pick-pill { width: 2.3rem; padding: 0; justify-content: center; }
    .bk-modern .bk-comp-pick .bk-pick-pill select { position: absolute; inset: 0; width: 100%; max-width: none; padding: 0; opacity: 0; }
    .bk-modern .bk-comp-pick .bk-pick-chev { display: none; }
}
@media (pointer: coarse) {
    .bk-modern .bk-pick-pill select { font-size: 16px; }
    .bk-modern .bk-side { min-height: 2.75rem; }
}

/* ==========================================================================
   K. Motion (honours prefers-reduced-motion; the script adds .bk-anim only when
      it has committed to finishing the entrance, so content is visible by default)
   ========================================================================== */
.bk-modern .bk-ladder.bk-anim .bk-round { animation: bkRise .45s var(--bk-ease) both; animation-delay: calc(var(--bk-i, 0) * 70ms); }
.bk-modern .bk-lines path.bk-draw { stroke-dasharray: var(--bk-len, 400); stroke-dashoffset: var(--bk-len, 400); animation: bkDraw .6s var(--bk-ease) forwards; animation-delay: .25s; }
@keyframes bkRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
@keyframes bkPop { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes bkSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .bk-modern .bk-ladder.bk-anim .bk-round, .bk-modern .bk-lines path.bk-draw, .bk-modern .bk-side.is-picked-now { animation: none !important; stroke-dashoffset: 0; }
    .bk-modern .bk-meter-fill, .bk-modern .bk-tie, .bk-modern .bk-row, .bk-modern .bk-save, .bk-toast { transition: none !important; }
}

/* ==========================================================================
   L. THE STANDARD: My Benfica (owner, 5 Oct 2026). The games bar, the Save pill
      and the sidebar measured against user/my-benfica.php (mybenfica-modern.css).
   ========================================================================== */
/* Save: My Benfica's solid pill (.4rem .8rem, .76rem 800), green because it saves. */
.bk-modern .bk-save, .bk-modern .bk-bar .bk-save { min-height: 0; padding: .4rem .9rem; font-size: .76rem; line-height: 1.25; }
/* The sidebar panels close like #mbAside's (.75rem under the last line). */
.benfica-layout.bk-modern #bcAside .bn-panel { padding-bottom: .75rem; }
@media (max-width: 767.98px) {
    /* The games bar: icons only (the active one too), packed left and as tall as .mb-topbar
       (its online pill sets the height). */
    .benfica-layout.bk-modern #lu-top .lu-nav { width: auto !important; justify-content: flex-start !important; }
    .benfica-layout.bk-modern #lu-top .lu-nav-link span { display: none; }
    .benfica-layout.bk-modern #lu-top .lu-nav-link { min-height: calc(.76rem * 1.2 + .64rem + 2px); }
}
@media (max-width: 379.98px) {
    .benfica-layout.bk-modern #lu-top .lu-nav-link { padding: .4rem .48rem; }
    .benfica-layout.bk-modern #lu-top .lu-topbar { gap: .25rem; padding: .25rem; }
}

/* Phone section heads with controls (owner, 5 Oct 2026): a title never truncates. style.css
   forces heads onto one row and ellipsizes titles on hero pages; here the Bracket head may
   wrap, so the competition picker moves to its own row (at its right end) only when it does
   not fit beside the full title. */
@media (max-width: 767.98px) {
    body .benfica-layout.bk-modern :is(#bc-ladder, #bc-leaderboard, #bc-empty) > .bn-section-head { flex-wrap: wrap !important; row-gap: .5rem !important; }
    body .benfica-layout.bk-modern :is(#bc-ladder, #bc-leaderboard, #bc-empty) > .bn-section-head > h2 {
        flex: 0 1 auto !important; min-width: 0 !important; max-width: 100%;
        white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
    }
    body .benfica-layout.bk-modern #bc-ladder > .bn-section-head > .bn-head-actions { flex: 0 0 auto !important; margin-left: auto !important; }
    body .benfica-layout.bk-modern :is(#bc-ladder, #bc-leaderboard, #bc-empty) > .bn-section-head::after { min-width: 0 !important; }
}