/* =====================================================================
   World Cup for Books (كأس العالم للكتاب) — campaign page theme.
   ALL rules are scoped under #worldcup-main-content and custom properties
   are namespaced --wc-* so nothing leaks into / clashes with the shared
   site chrome (which uses a custom legacy CSS framework, not Bootstrap).

   IMPORTANT: the site sets html { font-size: 62.5% } => 1rem = 10px.
   Font sizes below follow that /10 convention (e.g. 1.5rem = 15px) and the
   body/headings INHERIT the site's Arabic font (like audio-books-theme.css)
   so the page reads consistently with the rest of abjjad. Only the numeric
   "scoreboard" bits use JetBrains Mono.
   Palette mirrors the Lovable prototype (warm "stadium" amber + stone).
   ===================================================================== */

#worldcup-main-content {
    --wc-primary: oklch(72% .17 55);
    --wc-primary-fg: oklch(98.5% .004 60);
    --wc-bg: oklch(98.5% .004 60);
    --wc-fg: oklch(18% .008 50);
    --wc-muted: oklch(94% .005 60);
    --wc-muted-fg: oklch(42% .01 50);
    --wc-card: oklch(100% 0 0);
    --wc-border: oklch(18% .008 50 / .12);
    --wc-stone: oklch(95% .005 60);
    --wc-live: #e02424;
    --wc-win: oklch(58% .14 150);          /* winner highlight (pitch green) */
    --wc-win-soft: oklch(58% .14 150 / .12);
    --wc-radius: 1rem;
    --wc-shadow: 0 1px 3px oklch(18% .008 50 / .08), 0 8px 24px oklch(18% .008 50 / .06);
    --wc-mono: "JetBrains Mono", ui-monospace, monospace;

    font-family: inherit; /* use the site's Arabic font for consistency */
    font-size: 1.5rem;    /* 15px base (site root is 62.5% => 1rem = 10px) */
    color: var(--wc-fg);
    background: var(--wc-bg);
    line-height: 1.7;
    display: block;
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
    -webkit-font-smoothing: antialiased;
}

#worldcup-main-content *,
#worldcup-main-content *::before,
#worldcup-main-content *::after { box-sizing: border-box; }

#worldcup-main-content h2,
#worldcup-main-content h3,
#worldcup-main-content h4 { margin: 0; color: var(--wc-fg); }

#worldcup-main-content img { max-width: 100%; }

/* ---- hero ---------------------------------------------------------- */
#worldcup-main-content .wc-hero {
    position: relative;
    text-align: center;
    padding: 1.5rem 1rem 1rem;
}
#worldcup-main-content .wc-hero-title {
    height: 104px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px oklch(18% .008 50 / .12));
}
#worldcup-main-content .wc-hero-tagline {
    margin: 1rem auto 1.5rem;
    max-width: 40rem;
    color: var(--wc-muted-fg);
    font-size: 1.6rem;
    font-weight: 500;
}

/* ---- tabs ---------------------------------------------------------- */
#worldcup-main-content .wc-tabs {
    display: inline-flex;
    gap: .3rem;
    padding: .4rem;
    background: oklch(18% .008 50 / .05);
    border-radius: 999px;
}
#worldcup-main-content .wc-tab {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--wc-muted-fg);
    background: transparent;
    padding: .7rem 1.6rem;
    border-radius: 999px;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
#worldcup-main-content .wc-tab.is-active {
    background: var(--wc-card);
    color: var(--wc-fg);
    box-shadow: 0 1px 3px oklch(18% .008 50 / .12);
}

/* ---- panels -------------------------------------------------------- */
#worldcup-main-content .wc-panel { display: none; }
#worldcup-main-content .wc-panel.is-active {
    display: block;
    animation: wc-fade-in .4s var(--wc-ease, cubic-bezier(.16, 1, .3, 1));
}

/* ---- live match card ---------------------------------------------- */
#worldcup-main-content .wc-matchcard {
    position: relative;
    overflow: hidden;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: 1.5rem;
    box-shadow: var(--wc-shadow);
    /* Bottom space reserved for the full-width grass strip. The image's top half
       is solid white and blends into the (white) card, so it spans full width and
       sits just below the countdown; the gap stays ~constant across widths. */
    padding: 2rem 1.5rem min(calc(18.4vw + 10px), 215px);
    margin-bottom: 3rem;
}
#worldcup-main-content .wc-matchcard-grass {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: min(calc(18.4vw + 38px), 245px);
    /* full-bleed width; bottom-anchored so the whole ball + grass shows, never cropped */
    background: url("../images/worldcup/grass-ball.jpg") no-repeat bottom center;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
}
#worldcup-main-content .wc-matchcard > *:not(.wc-matchcard-grass) { position: relative; z-index: 1; }

#worldcup-main-content .wc-matchcard-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
#worldcup-main-content .wc-team { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
#worldcup-main-content .wc-team-flag {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--wc-stone);
    border: 3px solid var(--wc-card);
    box-shadow: 0 4px 14px oklch(18% .008 50 / .18);
}
#worldcup-main-content .wc-team-flag img { width: 100%; height: 100%; object-fit: cover; }
#worldcup-main-content .wc-team-name { font-size: 2.2rem; font-weight: 700; text-align: center; }

#worldcup-main-content .wc-vs { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
#worldcup-main-content .wc-vs-text {
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--wc-muted-fg);
    letter-spacing: -.05em;
}

/* live badge (pulsing) */
#worldcup-main-content .wc-live-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: oklch(57.7% .245 27.325 / .1);
    border: 1px solid oklch(57.7% .245 27.325 / .3);
    color: var(--wc-live);
    font-size: 1.2rem;
    font-weight: 700;
}
#worldcup-main-content .wc-live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--wc-live);
    position: relative;
}
#worldcup-main-content .wc-live-dot::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--wc-live);
    animation: wc-ping 1.4s cubic-bezier(0, 0, .2, 1) infinite;
}

/* ---- possession bar ------------------------------------------------ */
#worldcup-main-content .wc-possession { max-width: 32rem; margin: 0 auto 2rem; text-align: center; }
#worldcup-main-content .wc-possession-caption {
    margin: 0 0 .7rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--wc-muted-fg);
}
#worldcup-main-content .wc-possession-track {
    height: 16px;
    border-radius: 999px;
    background: var(--wc-stone);
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse; /* team A fills from the right (RTL) */
}
#worldcup-main-content .wc-possession-fill {
    height: 100%;
    background: var(--wc-primary);
    border-radius: 999px;
    transition: width .8s cubic-bezier(.16, 1, .3, 1);
    position: relative;
}
#worldcup-main-content .wc-possession-fill::after {
    content: "";
    position: absolute; inset-inline-start: -1px; top: 0;
    width: 2px; height: 100%;
    background: var(--wc-card);
    opacity: .6;
}
#worldcup-main-content .wc-possession-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .6rem;
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: 1.5rem;
}
#worldcup-main-content .wc-possession-labels [data-wc-label-b] { color: var(--wc-muted-fg); }

/* ---- countdown ----------------------------------------------------- */
#worldcup-main-content .wc-countdown { text-align: center; }
#worldcup-main-content .wc-cd-label { display: block; font-size: 1.4rem; color: var(--wc-muted-fg); margin-bottom: .7rem; }
#worldcup-main-content .wc-cd-clock {
    display: inline-flex;
    align-items: flex-start;
    gap: .6rem;
    font-family: var(--wc-mono);
}
#worldcup-main-content .wc-cd-unit { display: inline-flex; flex-direction: column; align-items: center; }
#worldcup-main-content .wc-cd-unit b { font-size: 2.8rem; font-weight: 700; line-height: 1; }
#worldcup-main-content .wc-cd-unit i { font-style: normal; font-size: 1.1rem; font-weight: 600; color: var(--wc-muted-fg); margin-top: .4rem; font-family: inherit; }
#worldcup-main-content .wc-cd-sep { color: var(--wc-primary); font-size: 2.4rem; font-weight: 700; }

/* ---- line-ups (horizontal rails) ----------------------------------- */
#worldcup-main-content .wc-lineup { margin-bottom: 2.75rem; }
#worldcup-main-content .wc-lineup-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--wc-border);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}
#worldcup-main-content .wc-lineup-flag { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; }
#worldcup-main-content .wc-lineup-head h3 { font-size: 1.9rem; font-weight: 700; }
#worldcup-main-content .wc-lineup-count {
    font-family: var(--wc-mono);
    font-size: 1.2rem;
    background: var(--wc-stone);
    padding: .3rem .7rem;
    border-radius: 6px;
    color: var(--wc-muted-fg);
}
#worldcup-main-content .wc-lineup-empty { text-align: center; color: var(--wc-muted-fg); font-size: 1.5rem; }

#worldcup-main-content .wc-rail {
    list-style: none;
    margin: 0;
    padding: 0 0 .75rem;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
#worldcup-main-content .wc-rail > li { scroll-snap-align: start; flex: 0 0 auto; width: 340px; max-width: 82vw; }

/* ---- book card ----------------------------------------------------- */
#worldcup-main-content .wc-book-link {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
#worldcup-main-content .wc-book-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--wc-shadow);
    border-color: var(--wc-primary);
}
#worldcup-main-content .wc-book-cover {
    flex: 0 0 auto;
    width: 90px;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--wc-stone);
    box-shadow: 0 2px 6px oklch(18% .008 50 / .15);
}
#worldcup-main-content .wc-book-cover img { width: 100%; height: 100%; object-fit: cover; }
#worldcup-main-content .wc-book-info { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
#worldcup-main-content .wc-book-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#worldcup-main-content .wc-book-author { font-size: 1.4rem; color: var(--wc-muted-fg); margin: 0; }
#worldcup-main-content .wc-book-meta { display: flex; gap: 1rem; font-size: 1.35rem; color: var(--wc-muted-fg); margin-top: .2rem; }
#worldcup-main-content .wc-book-rating,
#worldcup-main-content .wc-book-downloads { display: inline-flex; align-items: center; gap: .3rem; }
#worldcup-main-content .wc-book-rating span,
#worldcup-main-content .wc-book-downloads span { font-family: var(--wc-mono); }
#worldcup-main-content .wc-book-cta {
    margin-top: auto;
    align-self: flex-start;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--wc-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding-top: .6rem;
}

/* ---- bracket: qualification tree ----------------------------------- */
/* Rounds are columns flowing right->left (QF .. Final). Equal-height columns +
   flex:1 cells make each round's matches centre exactly between their two
   feeders, forming the classic pyramid; connector lines join each pair.
   Layout is fully data-driven, so it adapts to any round count. */
#worldcup-main-content .wc-tree-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
}
#worldcup-main-content .wc-tree {
    display: flex;
    flex-direction: row-reverse;   /* first round (QF) on the right, Final on the left (RTL) */
    align-items: stretch;
    width: 100%;
    min-width: 45rem;              /* keep the 3 columns (QF/SF/Final) legible; scrolls on phones */
    margin: 0 auto;
}
#worldcup-main-content .wc-tree-round { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
#worldcup-main-content .wc-tree-round-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    padding-bottom: .8rem;
    margin-bottom: .4rem;
    border-bottom: 2px solid var(--wc-border);
}
#worldcup-main-content .wc-tree-matches { flex: 1; display: flex; flex-direction: column; }
/* flex:1 0 auto => each cell is at least the card's natural height (never shrinks,
   so the first round's cards can't overlap); shorter rounds still grow to keep the
   pyramid aligned with their feeder pairs. */
#worldcup-main-content .wc-tie { flex: 1 0 auto; display: flex; align-items: center; position: relative; padding: .55rem .85rem; min-height: 84px; }

/* a match card: date on its own line, then two stacked team rows (no ×) */
#worldcup-main-content .wc-tie .wc-bmatch {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: .7rem;
    box-shadow: var(--wc-shadow);
    padding: .5rem .55rem;
    position: relative;
    z-index: 1;
}
#worldcup-main-content .wc-tie .wc-bmatch.is-live { border-color: oklch(57.7% .245 27.325 / .5); box-shadow: 0 0 0 2px oklch(57.7% .245 27.325 / .25); }
#worldcup-main-content .wc-tie .wc-bmatch.is-decided { background: oklch(58% .14 150 / .05); }
#worldcup-main-content .wc-bmatch-date { text-align: center; font-family: var(--wc-mono); font-size: 1.05rem; color: var(--wc-muted-fg); }

#worldcup-main-content .wc-seed { display: flex; align-items: center; gap: .45rem; font-size: 1.35rem; font-weight: 600; padding: .35rem .4rem; border-radius: 5px; min-width: 0; }
#worldcup-main-content .wc-seed + .wc-seed { border-top: 1px solid var(--wc-border); }
#worldcup-main-content .wc-seed img { width: 22px; height: 22px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; }
#worldcup-main-content .wc-seed .wc-seed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#worldcup-main-content .wc-seed.is-tbd { color: var(--wc-muted-fg); font-weight: 500; font-size: 1.2rem; }
#worldcup-main-content .wc-seed.is-tbd .wc-seed-name { white-space: normal; }
#worldcup-main-content .wc-seed.is-winner { color: var(--wc-win); font-weight: 800; background: oklch(58% .14 150 / .14); }
#worldcup-main-content .wc-seed.is-loser { color: var(--wc-muted-fg); opacity: .65; }
#worldcup-main-content .wc-seed .wc-trophy { color: var(--wc-win); flex: 0 0 auto; }

/* connector lines (toward the next round = physical left, since row-reverse) */
#worldcup-main-content .wc-tree-round:not(.is-final) .wc-tie::after {
    content: ""; position: absolute; top: 50%; left: 0; width: .85rem;
    border-top: 2px solid var(--wc-border);
}
#worldcup-main-content .wc-tree-round:not(.is-final) .wc-tie:nth-child(odd)::before {
    content: ""; position: absolute; left: 0; top: 50%; height: 50%; border-left: 2px solid var(--wc-border);
}
#worldcup-main-content .wc-tree-round:not(.is-final) .wc-tie:nth-child(even)::before {
    content: ""; position: absolute; left: 0; bottom: 50%; height: 50%; border-left: 2px solid var(--wc-border);
}
/* incoming stub on receiving rounds (every round except the first one, QF) */
#worldcup-main-content .wc-tree-round:not(:first-child) .wc-tie .wc-bmatch::after {
    content: ""; position: absolute; top: 50%; right: -.85rem; width: .85rem;
    border-top: 2px solid var(--wc-border); z-index: 0;
}

/* ---- leaderboard --------------------------------------------------- */
#worldcup-main-content .wc-leaderboard { margin-top: .5rem; }
/* The [hidden] attribute is toggled from JS to show/hide the personal card, CTA, loading and
   empty states. An author `display` rule (e.g. .wc-myrank{display:flex}) beats the UA
   [hidden]{display:none}, so enforce it here or those elements render empty before JS fills them. */
#worldcup-main-content [hidden] { display: none !important; }

/* personal "your rank" card */
#worldcup-main-content .wc-myrank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, oklch(72% .17 55 / .14), oklch(72% .17 55 / .04));
    border: 1px solid oklch(72% .17 55 / .35);
    border-radius: var(--wc-radius);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.5rem;
}
#worldcup-main-content .wc-myrank-body { display: flex; align-items: center; gap: 1rem; min-width: 0; }
#worldcup-main-content .wc-myrank-medal { font-size: 2.6rem; line-height: 1; flex: 0 0 auto; }
#worldcup-main-content .wc-myrank-text { display: flex; flex-direction: column; min-width: 0; }
#worldcup-main-content .wc-myrank-line { font-size: 1.7rem; font-weight: 700; }
#worldcup-main-content .wc-myrank-sub { font-size: 1.4rem; color: var(--wc-muted-fg); }
#worldcup-main-content .wc-myrank-share {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--wc-primary-fg);
    background: var(--wc-primary);
    padding: .7rem 1.6rem;
    border-radius: 999px;
    flex: 0 0 auto;
    transition: filter .2s;
}
#worldcup-main-content .wc-myrank-share:hover { filter: brightness(1.05); }

/* anonymous re-login prompt (shares the .wc-myrank layout, distinct blue accent) */
#worldcup-main-content .wc-lb-login {
    background: linear-gradient(135deg, oklch(60% .13 250 / .14), oklch(60% .13 250 / .04));
    border-color: oklch(60% .13 250 / .35);
}
#worldcup-main-content .wc-lb-login .wc-myrank-share { text-decoration: none; }

/* toolbar / match selector */
#worldcup-main-content .wc-lb-toolbar {
    display: flex;
    align-items: center;
    gap: .8rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
#worldcup-main-content .wc-lb-selector-label { font-size: 1.4rem; font-weight: 600; color: var(--wc-muted-fg); }
#worldcup-main-content .wc-lb-selector {
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--wc-fg);
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: .6rem 1.2rem;
    max-width: 90%;
}

/* reader-gap CTA */
#worldcup-main-content .wc-lb-cta {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wc-primary);
    background: oklch(72% .17 55 / .08);
    border: 1px dashed oklch(72% .17 55 / .4);
    border-radius: var(--wc-radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}

#worldcup-main-content .wc-lb-loading { text-align: center; color: var(--wc-muted-fg); font-size: 1.5rem; padding: 2rem 1rem; }

/* two team columns */
#worldcup-main-content .wc-lb-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
#worldcup-main-content .wc-lb-col {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow);
    padding: 1.2rem 1rem;
    min-width: 0;
}
#worldcup-main-content .wc-lb-col-head {
    /* The site's legacy CSS has a global `header{position:absolute;top:0;width:100%}` rule; without
       this override our <header> column heads get yanked out of the grid to the page top (the hero
       header avoids it the same way, via its explicit position). */
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    border-bottom: 1px solid var(--wc-border);
    padding-bottom: .9rem;
    margin-bottom: .8rem;
    text-align: center;
}
#worldcup-main-content .wc-lb-flag { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--wc-stone); }
#worldcup-main-content .wc-lb-team { font-size: 1.8rem; font-weight: 700; }
#worldcup-main-content .wc-lb-subtitle { font-size: 1.2rem; color: var(--wc-muted-fg); }

#worldcup-main-content .wc-lb-list { list-style: none; margin: 0; padding: 0; }
#worldcup-main-content .wc-lb-row {
    display: grid;
    grid-template-columns: 2.4rem 1fr;   /* rank | fan — per-contributor score column removed */
    align-items: center;
    gap: .7rem;
    padding: .6rem .4rem;
    border-radius: .6rem;
}
#worldcup-main-content .wc-lb-row:nth-child(even) { background: var(--wc-muted); }
#worldcup-main-content .wc-lb-rank {
    font-family: var(--wc-mono);
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    color: var(--wc-muted-fg);
}
#worldcup-main-content .wc-lb-row.is-rank-1 .wc-lb-rank { color: oklch(76% .15 85); }   /* gold */
#worldcup-main-content .wc-lb-row.is-rank-2 .wc-lb-rank { color: oklch(72% .02 260); }  /* silver */
#worldcup-main-content .wc-lb-row.is-rank-3 .wc-lb-rank { color: oklch(58% .1 50); }    /* bronze */
#worldcup-main-content .wc-lb-row.is-rank-1 { background: oklch(76% .15 85 / .12); }

#worldcup-main-content .wc-lb-fan { display: flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none; color: inherit; position: relative; }
#worldcup-main-content .wc-lb-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; flex: 0 0 auto;
    background: var(--wc-stone);
    border: 1px solid var(--wc-border);
}
#worldcup-main-content .wc-lb-avatar.is-placeholder { background: var(--wc-stone); }
#worldcup-main-content .wc-lb-crown { position: absolute; top: -.6rem; inset-inline-start: 2rem; font-size: 1.4rem; line-height: 1; }
#worldcup-main-content .wc-lb-name {
    font-size: 1.5rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
#worldcup-main-content .wc-lb-chip {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wc-muted-fg);
    white-space: nowrap;
}
#worldcup-main-content .wc-lb-empty { text-align: center; color: var(--wc-muted-fg); font-size: 1.5rem; padding: 2.5rem 1rem; }

/* ---- shareable top-fan card --------------------------------------- */
#worldcup-main-content .wc-sharecard {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: 1.5rem;
    box-shadow: var(--wc-shadow);
    padding: 3rem 1.5rem min(calc(18.4vw + 10px), 215px);
    max-width: 46rem;
    margin: 2rem auto;
}
#worldcup-main-content .wc-sharecard-grass {
    position: absolute; inset-inline: 0; bottom: 0;
    height: min(calc(18.4vw + 38px), 245px);
    background: url("../images/worldcup/grass-ball.jpg") no-repeat bottom center;
    background-size: 100% auto;
    pointer-events: none; z-index: 0;
}
#worldcup-main-content .wc-sharecard > *:not(.wc-sharecard-grass) { position: relative; z-index: 1; }
#worldcup-main-content .wc-sharecard-flag {
    width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
    margin: 0 auto 1.2rem; background: var(--wc-stone);
    border: 3px solid var(--wc-card); box-shadow: 0 4px 14px oklch(18% .008 50 / .18);
}
#worldcup-main-content .wc-sharecard-flag img { width: 100%; height: 100%; object-fit: cover; }
#worldcup-main-content .wc-sharecard-rank { margin-bottom: .6rem; }
#worldcup-main-content .wc-sharecard-rank-num { font-family: var(--wc-mono); font-weight: 700; font-size: 3.6rem; color: oklch(76% .15 85); }
#worldcup-main-content .wc-sharecard-title { font-size: 2.2rem; font-weight: 800; line-height: 1.4; }
#worldcup-main-content .wc-sharecard-tagline { margin: 1rem auto 1.8rem; max-width: 34rem; color: var(--wc-muted-fg); font-size: 1.5rem; }
#worldcup-main-content .wc-sharecard-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
#worldcup-main-content .wc-sharecard-cta {
    display: inline-block;
    font-weight: 700; font-size: 1.6rem;
    color: var(--wc-primary-fg); background: var(--wc-primary);
    padding: 1rem 2.4rem; border-radius: 999px; text-decoration: none;
    transition: filter .2s;
}
#worldcup-main-content .wc-sharecard-cta:hover { filter: brightness(1.05); }
#worldcup-main-content .wc-sharecard-link { font-size: 1.4rem; font-weight: 600; color: var(--wc-muted-fg); text-decoration: underline; text-underline-offset: 2px; }

/* ---- empty / mlnash ------------------------------------------------ */
#worldcup-main-content .wc-empty { text-align: center; color: var(--wc-muted-fg); font-size: 1.6rem; padding: 4rem 1rem; }
#worldcup-main-content .wc-mlnash { display: flex; justify-content: center; padding: 3rem 1rem 0; }
#worldcup-main-content .wc-mlnash img { height: 120px; width: auto; object-fit: contain; }

/* ---- animations ---------------------------------------------------- */
@keyframes wc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wc-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes wc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
    #worldcup-main-content .wc-matchcard { animation: wc-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
    #worldcup-main-content .wc-lineup { animation: wc-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
    #worldcup-main-content .wc-round { animation: wc-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
    #worldcup-main-content .wc-possession-fill { transition: none; }
    #worldcup-main-content .wc-live-dot::after { animation: none; }
    #worldcup-main-content .wc-panel.is-active { animation: none; }
}

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 640px) {
    #worldcup-main-content { font-size: 1.45rem; padding: 1rem 1rem 3rem; }
    #worldcup-main-content .wc-hero-title { height: 72px; }
    #worldcup-main-content .wc-team-flag { width: 66px; height: 66px; }
    #worldcup-main-content .wc-team-name { font-size: 1.7rem; }
    #worldcup-main-content .wc-cd-unit b { font-size: 2.1rem; }
    #worldcup-main-content .wc-rail > li { width: 80vw; }
    #worldcup-main-content .wc-book-title { font-size: 1.5rem; }

    /* The bracket tree keeps its columns (QF/SF/Final) and scrolls horizontally on phones. */
    #worldcup-main-content .wc-tree { min-width: 52rem; }
    #worldcup-main-content .wc-tree-round-title { font-size: 1.35rem; }

    /* leaderboard: stack the two team columns and tighten the personal card */
    #worldcup-main-content .wc-lb-columns { grid-template-columns: 1fr; }
    #worldcup-main-content .wc-myrank { flex-direction: column; align-items: stretch; text-align: center; }
    #worldcup-main-content .wc-myrank-body { justify-content: center; }
    #worldcup-main-content .wc-myrank-share { width: 100%; }
    #worldcup-main-content .wc-sharecard-title { font-size: 1.9rem; }
    #worldcup-main-content .wc-modal-card { padding: 2.4rem 1.2rem 1.6rem; }
    #worldcup-main-content .wc-rules-title { font-size: 1.9rem; }
    #worldcup-main-content .wc-rules-h { font-size: 1.6rem; }
}

/* ---- competition rules: hero link (under the tagline, above the tabs) + deep-linkable popup ---- */
#worldcup-main-content .wc-hero-rules-link {
    /* block, not inline-block: .wc-tabs is inline-flex + the hero is centered, so an inline link would
       sit on the SAME line as the tab pill on wide screens. Block forces it onto its own line above them. */
    display: block;
    margin-bottom: 1.3rem;
    color: var(--wc-muted-fg);
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
#worldcup-main-content .wc-hero-rules-link:hover { color: var(--wc-primary); }

/* rules content (rendered inside the popup) */
#worldcup-main-content .wc-rules { color: var(--wc-fg); line-height: 1.9; text-align: start; }
#worldcup-main-content .wc-rules-title { font-size: 2.2rem; font-weight: 800; margin: 0 0 1rem; text-align: center; }
#worldcup-main-content .wc-rules-h {
    font-size: 1.8rem; font-weight: 800; color: var(--wc-primary);
    margin: 2rem 0 .8rem; padding-bottom: .4rem; border-bottom: 2px solid var(--wc-border);
}
#worldcup-main-content .wc-rules p { font-size: 1.5rem; margin: 0 0 1rem; }
#worldcup-main-content .wc-rules-list { margin: 0 0 1rem; padding-inline-start: 1.6rem; }
#worldcup-main-content .wc-rules-list li { font-size: 1.5rem; margin-bottom: .6rem; }
#worldcup-main-content .wc-rules-list li strong { font-weight: 800; }
#worldcup-main-content .wc-faq-q { font-size: 1.55rem; font-weight: 800; margin: 1.2rem 0 .2rem; }
#worldcup-main-content .wc-faq-a { font-size: 1.45rem; color: var(--wc-muted-fg); margin: 0 0 .6rem; }

/* popup overlay (starts hidden via the [hidden] attribute -> [hidden]{display:none!important} above) */
#worldcup-main-content .wc-modal {
    position: fixed; inset: 0; z-index: 100000;   /* clear of the site's Bootstrap navbar/sticky chrome */
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
#worldcup-main-content .wc-modal-backdrop { position: absolute; inset: 0; background: oklch(18% .02 50 / .55); }
#worldcup-main-content .wc-modal-card {
    position: relative; z-index: 1;
    background: var(--wc-card); color: var(--wc-fg);
    border-radius: var(--wc-radius);
    box-shadow: 0 20px 60px oklch(18% .02 50 / .35);
    max-width: 760px; width: 100%; max-height: 85vh; overflow-y: auto;
    padding: 2.4rem 1.8rem 2rem;
}
#worldcup-main-content .wc-modal-close {
    position: absolute; top: .6rem; inset-inline-end: 1rem;
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font-size: 3rem; line-height: 1; color: var(--wc-muted-fg);
}
#worldcup-main-content .wc-modal-close:hover { color: var(--wc-fg); }