/* ==========================================================================
   Predictions — the modern skin (Oct 2026; round 2: compact, whole page)
   --------------------------------------------------------------------------
   Linked by user/predictions.php (inside the hub) and by match.php (next to
   match-modern.css). Every selector starts at .pr-modern, a class only these
   carry:
     - user/predictions.php: the page root .benfica-layout.mb-modern.pr-modern
       .pr-page.predictions-hub (its sidebar: #prAside). Since 5 Oct 2026 that
       root also carries My Benfica's .mb-modern and the page links
       mybenfica-modern.css: layout, gaps, heads, switches, boxes, rows and
       pills come from there (THE STANDARD, section J);
     - match.php, Predict & Vote tab: .pr-modern.pr-match around the Fan
       Prediction card, .pr-modern.pr-match-summary around "Your Prediction".
   Shared .bn-aside / .bn-panel / style.css rules are never redefined outside
   that scope.

   Layers:
     A. tokens          B. prediction card (no-JS + .pr-enh compact layout)
     C. page: the season filter        D. leaderboards
     E. this page's sidebar   F. match page   G. reduced motion   H. the hero
     I. round 4 (card header, season filter in the head)   J. THE STANDARD
   Colours are theme tokens (literals only as var() fallbacks, the
   forum-standard 1px ring and neutral black shadows).
   ========================================================================== */

/* ==========================================================================
   A. Tokens
   ========================================================================== */
.pr-modern {
    --pr-card-bg: var(--theme-surface, var(--bs-body-bg));
    --pr-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --pr-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --pr-line: var(--theme-border, var(--bs-border-color));
    --pr-ring: rgba(0, 0, 0, .07);
    --pr-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
    --pr-radius: var(--theme-radius-lg, 1.1rem);
    --pr-radius-sm: .7rem;
    --pr-ink: var(--theme-ink, var(--bs-body-color));
    --pr-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --pr-primary: var(--theme-primary, var(--bs-primary));
    --pr-primary-rgb: var(--theme-primary-rgb, 200, 16, 46);
    --pr-primary-ink: color-mix(in oklab, var(--pr-primary) 80%, var(--pr-ink));
    --pr-accent: var(--theme-accent, var(--bs-warning));
    --pr-accent-rgb: var(--theme-accent-rgb, 244, 178, 35);
    --pr-accent-ink: color-mix(in oklab, var(--pr-accent) 62%, var(--pr-ink));
    --pr-w: var(--theme-win, var(--theme-success, var(--bs-success)));
    --pr-d: var(--theme-draw, var(--bs-secondary-bg));
    --pr-d-ink: var(--theme-draw-ink, var(--bs-body-color));
    --pr-l: var(--theme-loss, var(--theme-danger, var(--bs-danger)));
    --pr-ok: var(--theme-success, var(--bs-success));
    --pr-ok-rgb: var(--theme-success-rgb, 25, 135, 84);
    --pr-ok-ink: var(--theme-success-strong, var(--bs-success));
    --pr-bad-ink: var(--theme-danger-strong, var(--bs-danger));
    --pr-on: var(--theme-on-primary, #fff);
    --pr-gold: var(--pr-accent);
    --pr-silver: color-mix(in oklab, var(--pr-muted) 55%, var(--pr-card-bg));
    --pr-bronze: color-mix(in oklab, var(--pr-accent) 55%, var(--theme-secondary, var(--pr-primary)));
    --pr-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
    --pr-spring: var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}
[data-bs-theme="dark"] .pr-modern {
    --pr-card-bg: var(--bs-tertiary-bg, var(--theme-surface-2));
    --pr-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--pr-card-bg));
    --pr-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--pr-card-bg));
    --pr-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --pr-ring: rgba(255, 255, 255, .08);
    --pr-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .3));
    --pr-primary-ink: var(--theme-link, var(--pr-ink));
    --pr-accent-ink: var(--pr-accent);
    --pr-ok-ink: color-mix(in oklab, var(--pr-ok) 58%, white);
    --pr-bad-ink: color-mix(in oklab, var(--pr-l) 58%, white);
    --pr-silver: color-mix(in oklab, var(--pr-ink) 62%, var(--pr-card-bg));
}

/* The forum-standard card, reused by every boxed block below. */
.pr-modern .pr-cardlike,
.pr-modern .predictions-open-list > .prediction-match-card,
.pr-modern .prediction-missing-reminder,
.pr-modern .prediction-mini-board,
.pr-modern .prediction-leaderboard {
    border: 1px solid var(--pr-ring);
    border-radius: var(--pr-radius);
    background: var(--pr-card-bg);
    box-shadow: var(--pr-shadow);
}

/* ==========================================================================
   B. Prediction card
   ========================================================================== */
.pr-modern .predictions-open-list { gap: .75rem; margin-bottom: .9rem; }
.pr-modern .predictions-open-list > .prediction-match-card {
    position: relative;
    margin: 0;
    padding: .7rem .9rem .8rem;
    background:
        radial-gradient(120% 6rem at 50% -2.5rem, rgba(var(--pr-primary-rgb), .06), transparent 70%),
        var(--pr-card-bg);
    color: var(--pr-ink);
    transition: border-color var(--dur-base, .24s) ease, box-shadow var(--dur-base, .24s) ease;
}
[data-bs-theme="dark"] .pr-modern .predictions-open-list > .prediction-match-card {
    background:
        radial-gradient(120% 6rem at 50% -2.5rem, rgba(var(--pr-primary-rgb), .14), transparent 70%),
        var(--pr-card-bg);
}
.pr-modern .predictions-open-list > .prediction-match-card.pr-dirty {
    border-color: rgba(var(--pr-accent-rgb), .65);
    box-shadow: 0 0 0 3px rgba(var(--pr-accent-rgb), .16), var(--pr-shadow);
}

/* ---- Header: one slim line ---------------------------------------------- */
.pr-modern .prediction-match-card .prediction-match-card-header {
    align-items: center;
    gap: .35rem .8rem;
    margin-bottom: .55rem;
}
.pr-modern .prediction-match-card .prediction-match-title-row { gap: .6rem; min-width: 0; }
.pr-modern .prediction-match-card .prediction-team-logo { width: 2.1rem; height: 2.1rem; }
.pr-modern .prediction-match-card .prediction-match-card-header strong { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.pr-modern .prediction-match-card .prediction-match-label {
    display: inline-flex; align-items: center;
    margin-bottom: .1rem; padding: .05rem .45rem;
    border-radius: 999px;
    background: rgba(var(--pr-primary-rgb), .09);
    color: var(--pr-primary-ink);
    font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
[data-bs-theme="dark"] .pr-modern .prediction-match-card .prediction-match-label { background: rgba(var(--pr-primary-rgb), .22); }
.pr-modern .prediction-match-card .prediction-match-meta {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--pr-muted); font-size: .76rem; font-weight: 600;
}
.pr-modern .prediction-match-card .prediction-match-card-header > .d-flex {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: .35rem !important;
    flex: 0 0 auto;
}
.pr-modern .prediction-match-card .prediction-status-pill {
    gap: .3rem; min-width: 0; padding: .18rem .55rem;
    font-size: .66rem; letter-spacing: .02em;
}
.pr-modern .prediction-match-card .prediction-status-pill.is-open::before {
    content: ""; width: .4rem; height: .4rem; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(var(--pr-ok-rgb), .2);
}
[data-bs-theme="dark"] .pr-modern .prediction-status-pill.is-open {
    background: rgba(var(--pr-ok-rgb), .22);
    color: var(--pr-ok-ink);
}

/* ---- Countdown chip (cards and the sidebar's Next Deadline) -------------- */
.pr-modern .prediction-kickoff-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: .16rem .55rem .16rem .45rem;
    border: 1px solid var(--pr-line);
    border-radius: 999px;
    background: var(--pr-soft);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pr-modern .prediction-kickoff-chip .pr-clock { margin-right: .35rem; color: var(--pr-muted); font-size: .7rem; }
.pr-modern .prediction-kickoff-chip .pkc-unit {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center;
    min-width: 0; padding: 0 .26rem; gap: .08rem;
    border: 0; border-radius: 0; background: none;
}
.pr-modern .prediction-kickoff-chip .pkc-unit + .pkc-unit::before {
    content: ":";
    position: absolute; left: -.1rem; top: -.04rem;
    color: var(--pr-muted); font-weight: 700; font-size: .74rem; opacity: .7;
}
.pr-modern .prediction-kickoff-chip .pkc-unit[style*="none"] + .pkc-unit::before { content: none; }
.pr-modern .prediction-kickoff-chip .pkc-unit b { color: var(--pr-ink); font-size: .78rem; font-weight: 800; line-height: 1; }
.pr-modern .prediction-kickoff-chip .pkc-unit small {
    color: var(--pr-muted); font-size: .44rem; font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase;
}
.pr-modern .prediction-kickoff-chip.pkc-urgent {
    border-color: rgba(var(--pr-primary-rgb), .55);
    background: rgba(var(--pr-primary-rgb), .1);
    animation: prUrgent 1.5s ease-in-out infinite;
}
.pr-modern .prediction-kickoff-chip.pkc-urgent .pkc-unit { border: 0; animation: none; box-shadow: none; }
.pr-modern .prediction-kickoff-chip.pkc-urgent :is(.pkc-unit b, .pr-clock) { color: var(--pr-primary-ink); }
@keyframes prUrgent {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pr-primary-rgb), .32); }
    50% { box-shadow: 0 0 0 5px rgba(var(--pr-primary-rgb), 0); }
}
.pr-modern .prediction-kickoff-chip .pkc-locked { color: var(--pr-muted); font-size: .7rem; }

/* Guest notice: a quiet pill (moved next to Save once enhanced). */
.pr-modern .prediction-match-card .alert {
    display: flex; align-items: center; gap: .35rem;
    margin-bottom: .55rem !important;
    padding: .3rem .7rem !important;
    border: 0 !important; border-radius: 999px !important;
    background: rgba(var(--pr-accent-rgb), .14);
    color: var(--pr-ink);
    font-size: .74rem; font-weight: 600;
}
.pr-modern .prediction-match-card .alert i { color: var(--pr-accent-ink); }

/* ---- B1. Without JS: the server's fields row, polished ------------------ */
.pr-modern .prediction-card-fields .form-label {
    margin-bottom: .2rem;
    color: var(--pr-muted); font-size: .64rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase;
}
.pr-modern .prediction-match-card :is(.prediction-score-input, .prediction-confidence-input, .prediction-select) {
    min-height: 2.15rem;
    border: 1px solid var(--pr-line);
    border-radius: 999px;
    background-color: var(--pr-soft);
    color: var(--pr-ink);
    font-size: .84rem;
    transition: border-color var(--dur-fast, .12s) ease, box-shadow var(--dur-fast, .12s) ease, background-color var(--dur-fast, .12s) ease;
}
.pr-modern .prediction-match-card .prediction-score-input { font-size: 1.15rem; font-weight: 900; }
.pr-modern .prediction-match-card .prediction-select { padding-left: .85rem; font-weight: 600; }
.pr-modern .prediction-match-card :is(.prediction-score-input, .prediction-confidence-input, .prediction-select):focus {
    border-color: rgba(var(--pr-primary-rgb), .55);
    background-color: var(--pr-card-bg);
    box-shadow: 0 0 0 .2rem rgba(var(--pr-primary-rgb), .16);
    outline: 0;
}
.pr-modern .prediction-match-card .prediction-save-btn {
    /* My Benfica's solid block pill (.mb-pill--solid.mb-pill--block: .4rem .8rem, .76rem 800),
       green because it saves (the standard, 5 Oct 2026). */
    min-height: 0;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--pr-ok);
    color: var(--pr-on);
    font-size: .76rem; font-weight: 800; line-height: 1.25;
    box-shadow: none; /* flat, the owner's call (4 Oct 2026) */
    transition: transform var(--dur-fast, .12s) ease, box-shadow var(--dur-fast, .12s) ease, background-color var(--dur-fast, .12s) ease;
}
.pr-modern .prediction-match-card .prediction-save-btn:hover:not(:disabled),
.pr-modern .prediction-match-card .prediction-save-btn:focus-visible {
    background: var(--pr-ok-ink);
    color: var(--pr-on);
    box-shadow: none;
    transform: translateY(-1px);
}
[data-bs-theme="dark"] .pr-modern .prediction-match-card .prediction-save-btn:hover:not(:disabled) { background: color-mix(in oklab, var(--pr-ok) 85%, black); }
.pr-modern .prediction-match-card .prediction-save-btn:focus-visible { outline: 2px solid var(--pr-ok); outline-offset: 2px; }
.pr-modern .prediction-match-card .prediction-save-btn:disabled {
    background: var(--pr-soft-2); color: var(--pr-muted); box-shadow: none; opacity: 1;
}

/* ---- B2. Enhanced: the compact layout ----------------------------------- */
.pr-modern .pr-enh .prediction-matchup-logos { display: none; }
.pr-modern .pr-enh .prediction-match-title-row strong {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.pr-modern .pr-enh .prediction-match-title-row > div {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .45rem; min-width: 0;
}
.pr-modern .pr-enh .prediction-match-label { margin: 0; flex: 0 0 auto; }

/* Grid of the enhanced card. Areas change with the CARD's width (style.css
   makes every prediction card an inline-size container). */
.pr-modern .pr-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "strip strip"
        "verdict verdict"
        "fs fs"
        "ft pm"
        "conf conf"
        "act act";
    gap: .5rem .5rem;
    align-items: end;
}
.pr-modern .pr-strip { grid-area: strip; }
.pr-modern .pr-verdict { grid-area: verdict; }
.pr-modern .pr-b-fs { grid-area: fs; }
.pr-modern .pr-b-ft { grid-area: ft; }
.pr-modern .pr-b-potm { grid-area: pm; }
.pr-modern .pr-conf { grid-area: conf; }
.pr-modern .pr-actions { grid-area: act; }
@container (min-width: 560px) {
    .pr-modern .pr-body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "strip strip strip"
            "verdict verdict verdict"
            "fs ft pm"
            "conf act act";
        gap: .55rem .6rem;
    }
}
@container (min-width: 900px) {
    .pr-modern .pr-body {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
        grid-template-areas:
            "strip strip strip verdict verdict"
            "fs ft pm conf act";
        gap: .6rem .75rem;
    }
}

/* Scoreboard strip. Phones: a column per team. From 640px: one line,
   name + crest + stepper on each side of the dash. */
.pr-modern .pr-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: .25rem .4rem;
    padding: .45rem .5rem;
    border-radius: var(--pr-radius-sm);
    background:
        radial-gradient(80% 90% at 50% 0%, rgba(var(--pr-primary-rgb), .06), transparent 75%),
        var(--pr-soft);
}
.pr-modern .pr-side { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; }
.pr-modern .pr-team { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; max-width: 100%; }
.pr-modern .pr-crest { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; }
.pr-modern .pr-crest img,
.pr-modern .pr-crest .prediction-team-logo {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .14));
}
.pr-modern .pr-crest > i { font-size: 1.6rem; color: var(--pr-muted); }
.pr-modern .pr-name {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%; margin: 0;
    color: var(--pr-ink); font-size: .78rem; font-weight: 800; line-height: 1.2;
    text-transform: none; letter-spacing: 0;
}
.pr-modern .pr-sep {
    align-self: end;
    display: flex; align-items: center;
    height: calc(2.1rem + .3rem + 2px);
    color: var(--pr-muted); font-size: 1.2rem; font-weight: 300; line-height: 1;
}
@container (min-width: 640px) {
    .pr-modern .pr-strip { align-items: center; padding: .35rem .6rem; gap: .5rem; }
    .pr-modern .pr-side { flex-direction: row; justify-content: flex-end; gap: .55rem; }
    .pr-modern .pr-side-away { flex-direction: row-reverse; }
    .pr-modern .pr-team { flex-direction: row-reverse; gap: .45rem; }
    .pr-modern .pr-side-away .pr-team { flex-direction: row; }
    .pr-modern .pr-side-home .pr-name { text-align: right; }
    .pr-modern .pr-crest { width: 2.5rem; height: 2.5rem; }
    .pr-modern .pr-name { font-size: .86rem; }
    .pr-modern .pr-sep { align-self: center; height: auto; }
}

.pr-modern .pr-stepper {
    display: inline-flex; align-items: center; gap: .15rem; flex: 0 0 auto;
    padding: .15rem;
    border-radius: 999px;
    background: var(--pr-card-bg);
    border: 1px solid var(--pr-line);
    box-shadow: var(--elev-1, 0 1px 2px rgba(0, 0, 0, .05));
}
.pr-modern .pr-stepper:focus-within {
    border-color: rgba(var(--pr-primary-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--pr-primary-rgb), .14);
}
.pr-modern .pr-step {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2.1rem; height: 2.1rem; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--pr-soft-2);
    color: var(--pr-ink);
    font-size: .72rem;
    cursor: pointer;
    transition: background-color var(--dur-fast, .12s) ease, color var(--dur-fast, .12s) ease, transform var(--dur-fast, .12s) ease;
}
.pr-modern .pr-step:hover:not(:disabled) { background: var(--pr-primary); color: var(--pr-on); }
.pr-modern .pr-step:active:not(:disabled) { transform: scale(.92); }
.pr-modern .pr-step:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: 2px; }
.pr-modern .pr-step:disabled { opacity: .38; cursor: default; }
.pr-modern .pr-score.prediction-score-input {
    width: 2.3rem; min-height: 0; height: 2.1rem;
    padding: 0;
    border: 0; border-radius: .5rem;
    background: transparent;
    box-shadow: none;
    color: var(--pr-ink);
    font-size: 1.45rem; font-weight: 900; line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.pr-modern .pr-score::-webkit-outer-spin-button,
.pr-modern .pr-score::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-modern .pr-score::placeholder { color: var(--pr-muted); opacity: .6; font-weight: 500; }
.pr-modern .pr-score:focus { background: transparent; box-shadow: none; }
.pr-modern .pr-score:disabled { background: transparent; opacity: .7; }
.pr-modern .pr-bump .pr-score { animation: prBump .26s var(--pr-spring); }
@keyframes prBump { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* Verdict: your pick + the points potential. */
.pr-modern .pr-verdict {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .45rem;
    min-width: 0;
}
@container (min-width: 900px) {
    .pr-modern .pr-verdict { flex-direction: column; align-items: stretch; justify-content: center; align-self: center; gap: .3rem; min-width: 11.5rem; }
}
.pr-modern .pr-pick {
    display: inline-flex; align-items: center; gap: .4rem;
    max-width: 100%; min-width: 0;
    padding: .15rem .65rem .15rem .2rem;
    border-radius: 999px;
    background: var(--pr-card-bg);
    border: 1px solid var(--pr-line);
    font-size: .74rem; font-weight: 800;
    transition: background-color var(--dur-base, .24s) ease, border-color var(--dur-base, .24s) ease, color var(--dur-base, .24s) ease;
}
.pr-modern .pr-pick-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-modern .pr-pick-none { padding-left: .65rem; color: var(--pr-muted); font-weight: 700; justify-content: center; }
/* The W/D/L chip is the site's squared letter (radius .25rem). */
.pr-modern .pr-wdl {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.2rem; height: 1.2rem;
    border-radius: .25rem;
    font-size: .66rem; font-weight: 900; line-height: 1;
}
.pr-modern .pr-pick-w { border-color: rgba(var(--theme-win-rgb, 25, 135, 84), .45); color: var(--pr-ok-ink); }
.pr-modern .pr-pick-l { border-color: rgba(var(--theme-loss-rgb, 220, 53, 69), .45); color: var(--pr-bad-ink); }
.pr-modern :is(.pr-pick-w, .pr-wdl-w) .pr-wdl,
.pr-modern .pr-wdl.pr-wdl-w { background: var(--pr-w); color: var(--pr-on); }
.pr-modern .pr-pick-d .pr-wdl,
.pr-modern .pr-wdl.pr-wdl-d { background: var(--pr-d); color: var(--pr-d-ink); }
.pr-modern .pr-pick-l .pr-wdl,
.pr-modern .pr-wdl.pr-wdl-l { background: var(--pr-l); color: var(--pr-on); }

.pr-modern .pr-pot {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .15rem .65rem;
    border-radius: 999px;
    background: rgba(var(--pr-accent-rgb), .16);
    color: var(--pr-ink);
    font-size: .74rem; font-weight: 700;
    white-space: nowrap;
}
.pr-modern .pr-pot > i { color: var(--pr-accent-ink); }
.pr-modern .pr-pot b { font-size: .88rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.pr-modern .pr-meter {
    position: relative; display: inline-block;
    width: 2.2rem; height: .28rem;
    border-radius: 999px; overflow: hidden;
    background: rgba(var(--pr-accent-rgb), .28);
}
.pr-modern .pr-meter-fill {
    position: absolute; inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--pr-accent);
    transition: width var(--dur-slow, .4s) var(--pr-ease);
}
.pr-modern .pr-pop { animation: prPop .3s var(--pr-spring); }
@keyframes prPop { 0% { transform: scale(.94); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }

/* Bonus picks: labels as small caps above, icon inside the pill. */
.pr-modern .pr-pickfield { width: auto; max-width: none; min-width: 0; flex: none; padding: 0; margin: 0; }
.pr-modern .pr-pickfield .form-label {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: .18rem;
    color: var(--pr-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.pr-modern .pr-selectwrap { position: relative; display: block; min-width: 0; }
/* No JS: the native select is the pill. */
.pr-modern .pr-pickfield.is-set .prediction-select {
    border-color: rgba(var(--pr-primary-rgb), .35);
    background-color: rgba(var(--pr-primary-rgb), .05);
    font-weight: 700;
}
[data-bs-theme="dark"] .pr-modern .pr-pickfield.is-set .prediction-select { background-color: rgba(var(--pr-primary-rgb), .14); }
/* With JS: the select is kept (submitted, synced) but hidden; the trigger shows the pick. */
.pr-modern .pr-sel-native {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.pr-modern .pr-pk {
    display: flex; align-items: center; gap: .45rem;
    width: 100%; min-height: 2.15rem;
    padding: .15rem .6rem .15rem .2rem;
    border: 1px solid var(--pr-line);
    border-radius: 999px;
    background: var(--pr-soft);
    color: var(--pr-ink);
    font-size: .84rem; font-weight: 600; text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-fast, .12s) ease, background-color var(--dur-fast, .12s) ease, box-shadow var(--dur-fast, .12s) ease;
}
.pr-modern .pr-pk:hover:not(:disabled) { border-color: rgba(var(--pr-primary-rgb), .4); }
.pr-modern .pr-pk:focus-visible, .pr-modern .pr-pk[aria-expanded="true"] {
    outline: 0; border-color: rgba(var(--pr-primary-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--pr-primary-rgb), .16);
}
.pr-modern .pr-pk:disabled { cursor: default; opacity: .7; }
.pr-modern .pr-pickfield.is-set .pr-pk { border-color: rgba(var(--pr-primary-rgb), .35); background: rgba(var(--pr-primary-rgb), .05); font-weight: 700; }
[data-bs-theme="dark"] .pr-modern .pr-pickfield.is-set .pr-pk { background: rgba(var(--pr-primary-rgb), .14); }
.pr-modern .pr-pk-picslot { display: inline-flex; flex: 0 0 auto; }
.pr-modern .pr-pk-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-modern .pr-pk-chev { flex: 0 0 auto; color: var(--pr-muted); font-size: .66rem; }
/* The picture: a face, a crest, or (nothing chosen) the role icon. */
.pr-modern .pr-pk-pic {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    background: var(--pr-card-bg);
    color: var(--pr-muted);
    font-size: .7rem;
}
.pr-modern .pr-pk-pic.is-small { width: 2rem; height: 2rem; }
.pr-modern .pr-pk-pic .pr-face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--pr-soft-2); }
.pr-modern .pr-face-ini {
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--pr-primary) 16%, var(--pr-card-bg));
    color: var(--pr-primary-ink); font-size: .62rem; font-weight: 900;
}
.pr-modern .pr-pk-pic.is-face { box-shadow: 0 0 0 2px var(--pr-card-bg), 0 0 0 3px rgba(var(--pr-primary-rgb), .45); }
.pr-modern .pr-pk-pic.is-crest { background: transparent; }
.pr-modern .pr-pk-pic .pr-crest-img { width: 88%; height: 88%; object-fit: contain; }
.pr-modern .pr-pk-badge {
    position: absolute; right: -.22rem; bottom: -.18rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: .95rem; height: .95rem;
    border-radius: 50%;
    border: 1.5px solid var(--pr-card-bg);
    background: var(--pr-primary); color: var(--pr-on);
    font-size: .44rem;
}
.pr-modern .pr-b-potm .pr-pk-badge { background: var(--pr-accent); color: var(--theme-on-accent, var(--pr-ink)); }
.pr-modern .pr-b-ft .pr-pk-badge { background: var(--pr-ink); color: var(--pr-card-bg); }

/* The popover (appended to <body> inside its own .pr-modern layer). */
.pr-modern.pr-pk-layer { position: absolute; inset: 0 auto auto 0; width: 0; height: 0; z-index: 1065; }
.pr-modern.pr-pk-layer .pr-pk-back { display: none; }
.pr-modern .pr-pk-pop {
    position: absolute;
    display: flex; flex-direction: column;
    max-height: 380px;
    border: 1px solid var(--pr-ring);
    border-radius: var(--pr-radius-sm);
    background: var(--pr-card-bg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
    color: var(--pr-ink);
    overflow: hidden;
}
[data-bs-theme="dark"] .pr-modern .pr-pk-pop { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.pr-modern.pr-pk-layer.is-anim .pr-pk-pop { animation: prPkIn .16s var(--pr-ease); }
@keyframes prPkIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.pr-modern .pr-pk-head { display: none; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .8rem .3rem; }
.pr-modern .pr-pk-title { font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-muted); }
.pr-modern .pr-pk-x {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border: 0; border-radius: 50%; background: var(--pr-soft); color: var(--pr-ink);
}
.pr-modern .pr-pk-search { position: relative; padding: .5rem .5rem .35rem; border-bottom: 1px solid color-mix(in oklab, var(--pr-line) 70%, transparent); }
.pr-modern .pr-pk-search i { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-40%); color: var(--pr-muted); font-size: .72rem; pointer-events: none; }
.pr-modern .pr-pk-search input {
    width: 100%; min-height: 2.1rem; padding: .25rem .75rem .25rem 1.9rem;
    border: 1px solid var(--pr-line); border-radius: 999px;
    background: var(--pr-soft); color: var(--pr-ink);
    font-size: .84rem;
}
.pr-modern .pr-pk-search input:focus { outline: 0; border-color: rgba(var(--pr-primary-rgb), .55); box-shadow: 0 0 0 .18rem rgba(var(--pr-primary-rgb), .14); }
.pr-modern .pr-pk-list { list-style: none; margin: 0; padding: .3rem; overflow-y: auto; overscroll-behavior: contain; }
.pr-modern .pr-pk-list:focus { outline: 0; }
.pr-modern .pr-pk-list:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--pr-primary-rgb), .35); }
.pr-modern .pr-pk-group {
    position: sticky; top: -.3rem; z-index: 1;
    padding: .4rem .55rem .2rem;
    background: var(--pr-card-bg);
    color: var(--pr-muted); font-size: .6rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.pr-modern .pr-pk-opt {
    display: flex; align-items: center; gap: .55rem;
    padding: .3rem .5rem;
    border-radius: .55rem;
    font-size: .84rem; font-weight: 600;
    cursor: pointer;
}
.pr-modern .pr-pk-opt[hidden], .pr-modern .pr-pk-group[hidden], .pr-modern .pr-pk-empty[hidden] { display: none; }
.pr-modern .pr-pk-opt:hover, .pr-modern .pr-pk-opt.is-active { background: var(--pr-soft); }
.pr-modern .pr-pk-opt.is-active { box-shadow: inset 0 0 0 1px rgba(var(--pr-primary-rgb), .35); }
.pr-modern .pr-pk-opt[aria-selected="true"] { font-weight: 800; color: var(--pr-primary-ink); }
.pr-modern .pr-pk-otext { display: flex; align-items: baseline; gap: .4rem; flex: 1 1 auto; min-width: 0; }
.pr-modern .pr-pk-num { flex: 0 0 auto; min-width: 1.5rem; color: var(--pr-muted); font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pr-modern .pr-pk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-modern .pr-pk-tick { color: var(--pr-primary-ink); font-size: .72rem; }
.pr-modern .pr-pk-empty { padding: .8rem; color: var(--pr-muted); font-size: .8rem; text-align: center; }
/* Phones: a bottom sheet. */
.pr-modern.pr-pk-layer.is-sheet { position: fixed; inset: 0; width: auto; height: auto; }
.pr-modern.pr-pk-layer.is-sheet .pr-pk-back { display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.pr-modern.pr-pk-layer.is-sheet .pr-pk-pop {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    width: auto !important; max-height: min(78vh, 560px);
    border-radius: 1.1rem 1.1rem 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.pr-modern.pr-pk-layer.is-sheet .pr-pk-head { display: flex; }
.pr-modern.pr-pk-layer.is-sheet .pr-pk-head::before {
    content: ""; position: absolute; left: 50%; top: .35rem; width: 2.4rem; height: .25rem; margin-left: -1.2rem;
    border-radius: 999px; background: var(--pr-line);
}
.pr-modern.pr-pk-layer.is-sheet .pr-pk-search input { font-size: 16px; }
.pr-modern.pr-pk-layer.is-sheet.is-anim .pr-pk-pop { animation: prSheetIn .22s var(--pr-ease); }
@keyframes prSheetIn { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }

/* Faces on community / history chips, crests on the pick chip and the legend. */
.pr-modern .pr-chip-face { position: relative; display: inline-flex; flex: 0 0 auto; width: 1.45rem; height: 1.45rem; }
.pr-modern .pr-chip-face .pr-face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--pr-soft-2); }
.pr-modern .pr-chip-face .pr-pk-badge { width: .8rem; height: .8rem; font-size: .38rem; right: -.25rem; bottom: -.15rem; }
.pr-modern .prediction-community-picks > span.has-face { padding-left: .15rem; }
.pr-modern .pr-pick-crest, .pr-modern .pr-legend-crest { width: 1rem; height: 1rem; object-fit: contain; flex: 0 0 auto; }
/* A club with no crest file gets renderTeamLogo()'s shield icon at an inline 32px: keep it
   inside the 1rem slot (it overlapped the club name). */
.pr-modern :is(.pr-pick-crest, .pr-legend-crest):has(> i) { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.pr-modern :is(.pr-pick-crest, .pr-legend-crest) > i { font-size: .9rem !important; line-height: 1; color: var(--pr-muted); }
.pr-modern .pr-comp-logo {
    display: inline-block; width: 1.1em; height: 1.1em; margin-right: .3em;
    object-fit: contain; vertical-align: -.2em;
}

/* Confidence chips. */
.pr-modern .pr-subhead {
    display: block;
    margin-bottom: .18rem;
    color: var(--pr-muted);
    font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.pr-modern .pr-conf { min-width: 0; }
.pr-modern .pr-conf-native {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.pr-modern .pr-chips {
    display: flex; gap: .2rem;
    padding: .15rem;
    border-radius: 999px;
    background: var(--pr-soft);
    border: 1px solid color-mix(in oklab, var(--pr-line) 70%, transparent);
}
.pr-modern .pr-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: .05rem;
    flex: 1 1 0;
    min-width: 2rem; height: 1.85rem;
    padding: 0 .35rem;
    border: 0; border-radius: 999px;
    background: transparent;
    color: var(--pr-muted);
    font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color var(--dur-base, .24s) var(--pr-ease), color var(--dur-base, .24s) ease, transform var(--dur-fast, .12s) ease;
}
.pr-modern .pr-chip-x { font-size: .7em; font-weight: 700; opacity: .75; }
.pr-modern .pr-chip.is-below { background: rgba(var(--pr-primary-rgb), .1); color: var(--pr-primary-ink); }
[data-bs-theme="dark"] .pr-modern .pr-chip.is-below { background: rgba(var(--pr-primary-rgb), .22); color: var(--pr-ink); }
.pr-modern .pr-chip.is-on { background: var(--pr-primary); color: var(--pr-on); box-shadow: 0 3px 10px rgba(var(--pr-primary-rgb), .3); }
.pr-modern .pr-chip:hover:not(:disabled):not(.is-on) { background: var(--pr-soft-2); color: var(--pr-ink); }
.pr-modern .pr-chip:active:not(:disabled) { transform: scale(.94); }
.pr-modern .pr-chip:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: 2px; }
.pr-modern .pr-chip:disabled { cursor: default; opacity: .55; }

/* State + Save (+ the guest note). */
.pr-modern .pr-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; min-width: 0; }
.pr-modern .pr-actions .prediction-submit-field { width: auto; max-width: none; flex: 0 0 auto; padding: 0; margin: 0; }
.pr-modern .pr-actions .prediction-save-btn { min-width: 6.2rem; }
.pr-modern .pr-body > .pr-guest-note {
    grid-column: 1 / -1; justify-self: start;
    margin: 0 !important; padding: .2rem .65rem !important;
    font-size: .7rem;
}
.pr-modern .pr-save-ico { margin-right: .35rem; font-size: .8em; }
.pr-modern .pr-saving .prediction-save-btn { pointer-events: none; opacity: .85; }
.pr-modern .pr-saving .pr-save-ico::before { content: "\f110"; display: inline-block; animation: prSpin .9s linear infinite; }
@keyframes prSpin { to { transform: rotate(360deg); } }
.pr-modern .pr-state {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--pr-muted);
    font-size: .7rem; font-weight: 700;
    white-space: nowrap;
}
.pr-modern .pr-state[hidden] { display: none; }
.pr-modern .pr-state.is-saved { color: var(--pr-ok-ink); }
.pr-modern .pr-state.is-dirty { color: var(--pr-ink); }
.pr-modern .pr-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--pr-accent); box-shadow: 0 0 0 3px rgba(var(--pr-accent-rgb), .25); }
@container (min-width: 900px) {
    /* One row with the picks: the state sits above Save so the row stays one line. */
    .pr-modern .pr-actions { flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: .15rem; }
    .pr-modern .pr-conf .pr-chips { width: 11.5rem; }
}

/* ---- Community: three compact lines -------------------------------------- */
.pr-modern .prediction-match-card .prediction-community-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head top" "bar bar" "legend picks";
    align-items: center;
    gap: .35rem .8rem;
    margin-top: .6rem;
    padding: .55rem .7rem;
    border: 0;
    border-radius: var(--pr-radius-sm);
    background: var(--pr-soft);
    font-size: .76rem;
}
.pr-modern .prediction-community-panel > * { margin: 0 !important; min-width: 0; }
.pr-modern .prediction-community-header { grid-area: head; gap: .3rem; }
.pr-modern .prediction-top-scores { grid-area: top; justify-content: flex-end; gap: .25rem; }
.pr-modern .pr-split { grid-area: bar; }
.pr-modern .prediction-outcome-split { grid-area: legend; gap: .2rem .7rem; }
.pr-modern .prediction-community-picks { grid-area: picks; justify-content: flex-end; gap: .3rem; }
.pr-modern .prediction-community-header span {
    padding: .1rem .5rem; background: var(--pr-card-bg); color: var(--pr-ink); font-size: .68rem;
}
.pr-modern .prediction-community-header span:first-child {
    padding-left: 0; background: transparent; color: var(--pr-ink);
    font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.pr-modern .prediction-community-header span:first-child i { color: var(--pr-primary-ink); }
.pr-modern .pr-split {
    display: flex; gap: 2px; height: 1rem;
    border-radius: .35rem; overflow: hidden;
    background: var(--pr-soft-2);
}
.pr-modern .pr-seg {
    display: flex; align-items: center; justify-content: center;
    flex: 1 1 0; min-width: .4rem;
    color: var(--pr-on); font-size: .62rem;
    transition: flex-grow var(--dur-slow, .4s) var(--pr-ease);
}
.pr-modern .pr-seg b { font-weight: 800; }
.pr-modern .pr-seg-w { background: var(--pr-w); }
.pr-modern .pr-seg-d { background: var(--pr-d); color: var(--pr-d-ink); }
.pr-modern .pr-seg-l { background: var(--pr-l); }
.pr-modern .prediction-outcome-split span { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; font-size: .7rem; }
.pr-modern .pr-enh .prediction-outcome-split span { padding: 0; background: transparent; color: var(--pr-ink); }
.pr-modern .pr-enh .prediction-outcome-split span::before { content: ""; width: .55rem; height: .55rem; border-radius: .15rem; flex: 0 0 auto; }
.pr-modern .pr-enh .prediction-outcome-split .is-benfica::before { background: var(--pr-w); }
.pr-modern .pr-enh .prediction-outcome-split .is-draw::before { background: var(--pr-d); }
.pr-modern .pr-enh .prediction-outcome-split .is-opponent::before { background: var(--pr-l); }
.pr-modern .pr-enh .prediction-outcome-split.pr-split-away .is-benfica { order: 3; }
.pr-modern .pr-enh .prediction-outcome-split.pr-split-away .is-draw { order: 2; }
.pr-modern .pr-enh .prediction-outcome-split.pr-split-away .is-opponent { order: 1; }
.pr-modern .prediction-top-scores > span {
    margin-right: .1rem; color: var(--pr-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.pr-modern .prediction-top-scores strong {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .08rem .2rem .08rem .5rem;
    border: 1px solid var(--pr-line);
    background: var(--pr-card-bg);
    font-size: .76rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.pr-modern .prediction-top-scores strong small {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.2rem; height: 1.05rem; padding: 0 .3rem;
    border-radius: 999px; background: var(--pr-soft-2); color: var(--pr-muted);
    font-size: .6rem; font-weight: 800;
}
.pr-modern .prediction-community-picks > span {
    display: inline-flex; align-items: center; gap: .35rem;
    margin: 0 !important;
    padding: .1rem .6rem .1rem .15rem;
    border-radius: 1rem;
    background: var(--pr-card-bg);
    color: var(--pr-ink);
    font-size: .7rem; font-weight: 700;
}
.pr-modern .prediction-community-picks > span > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; margin: 0 !important;
    border-radius: 50%;
    background: rgba(var(--pr-primary-rgb), .12);
    color: var(--pr-primary-ink);
    font-size: .62rem;
}
.pr-modern .prediction-community-picks > span > i.fa-star { background: rgba(var(--pr-accent-rgb), .22); color: var(--pr-accent-ink); }
[data-bs-theme="dark"] .pr-modern .prediction-community-picks > span > i { background: rgba(var(--pr-primary-rgb), .25); }
@container (max-width: 640px) {
    .pr-modern .prediction-match-card .prediction-community-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "bar" "legend" "top" "picks";
    }
    .pr-modern .prediction-top-scores,
    .pr-modern .prediction-community-picks { justify-content: flex-start; }
}

/* Locked card (kickoff passed while open, or a locked render). */
.pr-modern .prediction-match-card .small.text-muted.mt-2 {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem;
    margin-top: .55rem !important; padding: .25rem .7rem;
    border-radius: 999px; background: var(--pr-soft);
    font-size: .74rem !important;
}
.pr-modern .prediction-match-card .small.text-muted.mt-2 strong { color: var(--pr-ink); }

/* ---- Card: phones ---------------------------------------------------------- */
@container (max-width: 420px) {
    .pr-modern .prediction-match-card .prediction-match-card-header { align-items: stretch; }
    .pr-modern .prediction-match-card .prediction-match-card-header > .d-flex { justify-content: space-between; }
    .pr-modern .pr-strip { padding: .45rem .3rem; gap: .2rem .25rem; }
    .pr-modern .pr-step { width: 1.85rem; height: 1.85rem; font-size: .66rem; }
    .pr-modern .pr-score.prediction-score-input { width: 2rem; height: 1.85rem; font-size: 1.3rem; }
    .pr-modern .pr-sep { height: calc(1.85rem + .3rem + 2px); font-size: 1rem; }
    .pr-modern .pr-actions .prediction-submit-field { flex: 1 1 auto; }
    .pr-modern .pr-actions .prediction-save-btn { width: 100%; }
    .pr-modern .pr-actions { flex-wrap: wrap; }
    .pr-modern .pr-body > .pr-guest-note { border-radius: .8rem; }
}
@container (max-width: 360px) {
    .pr-modern .pr-body { grid-template-areas: "strip strip" "verdict verdict" "fs fs" "ft ft" "pm pm" "conf conf" "act act"; }
}
@container (max-width: 300px) {
    .pr-modern .pr-strip { padding-left: .2rem; padding-right: .2rem; column-gap: .1rem; }
    .pr-modern .pr-step { width: 1.65rem; height: 1.65rem; }
    .pr-modern .pr-score.prediction-score-input { width: 1.7rem; font-size: 1.2rem; }
    .pr-modern .pr-stepper { gap: 0; }
    .pr-modern .pr-sep { height: calc(1.85rem + .3rem + 2px); font-size: .9rem; }
    .pr-modern .pr-chip { min-width: 0; padding: 0 .15rem; }
}
@media (max-width: 575.98px) {
    .pr-modern .predictions-open-list > .prediction-match-card { padding: .6rem .65rem .7rem; }
}
@media (pointer: coarse) {
    .pr-modern .prediction-match-card :is(.prediction-select, .prediction-score-input, .prediction-confidence-input) { font-size: max(16px, 1em); }
    .pr-modern .pr-score.prediction-score-input { font-size: 1.3rem; }
}

/* ==========================================================================
   C. The predictions page
   ========================================================================== */
/* The season filter (in the Open Predictions head; auto-submits with JS). */
.pr-modern .predictions-season-filter { gap: .4rem; }
.pr-modern .predictions-season-filter label {
    color: var(--pr-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.pr-modern .predictions-season-filter .form-select {
    min-height: 2rem; min-width: 8.5rem;
    border: 1px solid var(--pr-line); border-radius: 999px;
    background-color: var(--pr-soft);
    font-size: .82rem; font-weight: 700;
}
.pr-modern .predictions-season-filter .btn { min-height: 2rem; border-radius: 999px; padding: .2rem .9rem; font-size: .8rem; font-weight: 800; }
.pr-modern .predictions-season-filter.pr-autosubmit .btn { display: none; }

/* (5 Oct 2026: the page alerts, reminder, history, results and calibration are My Benfica's
   rows and boxes now; their rules live in section J.) */

/* ==========================================================================
   D. Leaderboards: ONE row component (.pr-row, prediction_page_ui.php)
      rank badge (fixed) | 32px avatar | name (+ You) over one stats line |
      points (fixed column). Same in the Top 20, Season Standings, Hall of
      Fame, the Weekly / Monthly boards and the sidebar's Top Predictors.
   ========================================================================== */
/* Mini Leaderboards: Weekly / Monthly switch (JS), both boards without JS. */
.pr-modern .prediction-mini-boards { gap: .5rem; margin-bottom: .5rem; }
.pr-modern .prediction-mini-boards.pr-switched { display: block; }
.pr-modern .pr-seg-switch {
    display: flex; gap: .2rem;
    margin-bottom: .45rem; padding: .18rem;
    border-radius: 999px;
    background: var(--pr-soft);
    border: 1px solid color-mix(in oklab, var(--pr-line) 70%, transparent);
}
.pr-modern .pr-seg-btn {
    flex: 1 1 0; padding: .25rem .6rem;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--pr-muted); font-size: .74rem; font-weight: 800;
    transition: background-color var(--dur-base, .24s) var(--pr-ease), color var(--dur-base, .24s) ease;
}
.pr-modern .pr-seg-btn.is-on { background: var(--pr-card-bg); color: var(--pr-ink); box-shadow: var(--elev-1, 0 1px 2px rgba(0, 0, 0, .08)); }
.pr-modern .pr-seg-btn:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: 1px; }
.pr-modern .prediction-mini-board { padding: .2rem .55rem; border-radius: var(--pr-radius-sm); box-shadow: none; }
.pr-modern .prediction-mini-board[hidden] { display: none; }
.pr-modern .prediction-mini-board-head { margin: .3rem 0 .1rem; font-size: .74rem; }
.pr-modern .prediction-mini-board-head span { padding: .02rem .45rem; border-radius: 999px; background: var(--pr-soft); font-size: .62rem; }
.pr-modern .pr-switched .prediction-mini-board-head { display: none; }

/* Empty states: one slim line. */
.pr-modern .pr-empty,
.pr-modern .prediction-mini-board > .pr-empty {
    display: block;
    margin: 0 0 .5rem; padding: .45rem .75rem !important;
    border: 1px solid var(--pr-ring) !important; border-radius: var(--pr-radius-sm);
    background: var(--pr-card-bg); color: var(--pr-muted);
    font-size: .76rem !important; line-height: 1.35;
}
.pr-modern .prediction-mini-board > .pr-empty { margin: .3rem 0; border: 0 !important; padding: .35rem .1rem !important; background: transparent; }

.pr-modern .prediction-leaderboard { padding: .15rem .55rem; border-radius: var(--pr-radius-sm); box-shadow: none; overflow: hidden; }

/* The row. */
.pr-modern .pr-row {
    position: relative;
    display: grid !important;
    grid-template-columns: 1.6rem 2rem minmax(0, 1fr) 3.1rem;
    align-items: center;
    column-gap: .55rem;
    margin: 0;
    padding: .45rem .1rem;
    border: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--pr-line) 60%, transparent);
    border-radius: 0;
    background: transparent;
    font-size: .78rem;
}
.pr-modern .pr-row:last-child { border-bottom: 0; }
.pr-modern .pr-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem;
    border-radius: .45rem;
    background: var(--pr-soft-2);
    color: var(--pr-ink);
    font-size: .7rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.pr-modern .pr-rank-ico { background: rgba(var(--pr-accent-rgb), .22); color: var(--pr-accent-ink); font-size: .66rem; }
.pr-modern .pr-medal-1 > .pr-rank { background: var(--pr-gold); color: var(--theme-on-accent, var(--pr-ink)); }
.pr-modern .pr-medal-2 > .pr-rank { background: var(--pr-silver); color: var(--pr-ink); }
.pr-modern .pr-medal-3 > .pr-rank { background: var(--pr-bronze); color: var(--pr-on); }
.pr-modern .pr-av {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    background: color-mix(in oklab, var(--pr-primary) 16%, var(--pr-card-bg));
    color: var(--pr-primary-ink);
    font-size: .8rem; font-weight: 900;
    box-shadow: inset 0 0 0 1px var(--pr-ring);
}
.pr-modern .pr-medal-1 > .pr-av { box-shadow: 0 0 0 2px var(--pr-gold); }
.pr-modern .pr-medal-2 > .pr-av { box-shadow: 0 0 0 2px var(--pr-silver); }
.pr-modern .pr-medal-3 > .pr-av { box-shadow: 0 0 0 2px var(--pr-bronze); }
.pr-modern .pr-row-main { min-width: 0; }
.pr-modern .pr-row-name { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .84rem; font-weight: 800; line-height: 1.25; }
.pr-modern .pr-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pr-modern .pr-row-stats {
    display: flex; align-items: center; gap: .25rem .35rem;
    margin-top: .12rem; min-width: 0;
    overflow: hidden; white-space: nowrap;
    font-size: .66rem;
}
.pr-modern .pr-row > .prediction-points-pill { justify-self: end; min-width: 2.6rem; }
.pr-modern .pr-you, .pr-modern .pr-lb-yourpos {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    padding: .02rem .4rem; border-radius: 999px;
    background: var(--pr-primary); color: var(--pr-on);
    font-size: .54rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
.pr-modern .pr-lb-yourpos { background: var(--pr-soft-2); color: var(--pr-ink); }
/* You: a subtle tint and a left accent bar, not a box. */
.pr-modern .pr-row.is-me {
    background: linear-gradient(90deg, rgba(var(--pr-primary-rgb), .09), rgba(var(--pr-primary-rgb), .02));
    box-shadow: inset 3px 0 0 var(--pr-primary);
    border-radius: .35rem;
    /* Room for the accent bar: no negative margin, so the rank badge never sits on the bar
       (it did in the narrow sidebar, 4 Oct 2026). */
    padding-left: .6rem; margin-left: 0;
}
[data-bs-theme="dark"] .pr-modern .pr-row.is-me { background: linear-gradient(90deg, rgba(var(--pr-primary-rgb), .2), rgba(var(--pr-primary-rgb), .05)); }
.pr-modern .pr-row.is-me .pr-rank { margin-left: 0; }
.pr-modern .pr-lb-pinned { margin-top: .5rem; border-top: 1px dashed var(--pr-line); }
.pr-modern .pr-lb-bar {
    position: absolute; left: 0; bottom: -1px; height: 2px;
    width: var(--pr-share, 0%); border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--pr-primary-rgb), .6), rgba(var(--pr-primary-rgb), .2));
    transition: width var(--dur-slow, .4s) var(--pr-ease);
}
/* Stats line pieces. */
.pr-modern .pr-rate { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.pr-modern .pr-rate b { font-weight: 800; color: var(--pr-ink); font-variant-numeric: tabular-nums; }
.pr-modern .pr-rate-track { position: relative; width: 2.2rem; height: .28rem; border-radius: 999px; overflow: hidden; background: var(--pr-soft-2); }
.pr-modern .pr-rate-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--pr-ok); }
.pr-modern .pr-mini-chip {
    display: inline-flex; align-items: center; gap: .2rem; flex: 0 0 auto;
    padding: .02rem .4rem; border-radius: 999px;
    background: var(--pr-soft);
    color: var(--pr-muted);
    font-size: .64rem; font-weight: 700;
}
.pr-modern .pr-mini-chip i { font-size: .56rem; }
.pr-modern .pr-mini-chip .fa-star, .pr-modern .pr-mini-chip .fa-trophy { color: var(--pr-accent-ink); }
.pr-modern .pr-mini-chip .fa-bullseye { color: var(--pr-ok-ink); }
.pr-modern .pr-mini-chip .fa-fire { color: var(--pr-primary-ink); }
.pr-modern .pr-chip-season { color: var(--pr-ink); }
.pr-modern .prediction-mini-trend { display: inline-flex; align-items: center; gap: .2rem; flex: 0 0 auto; padding: .02rem .4rem; border-radius: 999px; font-size: .64rem; font-weight: 800; }
.pr-modern .pr-trend-up { background: rgba(var(--pr-ok-rgb), .14); color: var(--pr-ok-ink) !important; }
.pr-modern .pr-trend-down { background: rgba(var(--theme-danger-rgb, 220, 53, 69), .12); color: var(--pr-bad-ink) !important; }
.pr-modern .pr-trend-flat { background: var(--pr-soft); color: var(--pr-muted) !important; }

/* Points pill (all boards). */
.pr-modern .prediction-points-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.6rem; padding: .18rem .5rem;
    border-radius: 999px;
    background: rgba(var(--pr-primary-rgb), .1);
    color: var(--pr-primary-ink);
    font-size: .8rem; font-weight: 900; font-variant-numeric: tabular-nums;
}

/* Podium (JS, three or more ranked rows only). Rows 1-3 stay for screen readers. */
.pr-modern .pr-podium {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end;
    gap: .4rem;
    margin: .2rem 0 .3rem; padding: .5rem .2rem 0;
    border-bottom: 1px solid color-mix(in oklab, var(--pr-line) 60%, transparent);
}
.pr-modern .pr-podium-step { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; text-align: center; }
.pr-modern .pr-podium-av { position: relative; display: inline-flex; }
.pr-modern .pr-podium-av .pr-av { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
.pr-modern .pr-step-1 .pr-podium-av .pr-av { width: 3.2rem; height: 3.2rem; font-size: 1.2rem; box-shadow: 0 0 0 3px var(--pr-gold); }
.pr-modern .pr-step-2 .pr-podium-av .pr-av { box-shadow: 0 0 0 3px var(--pr-silver); }
.pr-modern .pr-step-3 .pr-podium-av .pr-av { box-shadow: 0 0 0 3px var(--pr-bronze); }
.pr-modern .pr-podium-medal {
    position: absolute; right: -.25rem; bottom: -.2rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    border: 2px solid var(--pr-card-bg);
    font-size: .58rem; font-weight: 900;
}
.pr-modern .pr-step-1 .pr-podium-medal { background: var(--pr-gold); color: var(--theme-on-accent, var(--pr-ink)); }
.pr-modern .pr-step-2 .pr-podium-medal { background: var(--pr-silver); color: var(--pr-ink); }
.pr-modern .pr-step-3 .pr-podium-medal { background: var(--pr-bronze); color: var(--pr-on); }
.pr-modern .pr-podium-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 800; }
.pr-modern .pr-podium-step.is-me .pr-podium-name { color: var(--pr-primary-ink); }
.pr-modern .pr-podium-pts { font-size: .74rem; font-weight: 900; color: var(--pr-primary-ink); font-variant-numeric: tabular-nums; }
.pr-modern .pr-podium-block { display: block; width: 100%; margin-top: .15rem; border-radius: .45rem .45rem 0 0; }
.pr-modern .pr-step-1 .pr-podium-block { height: 1.6rem; background: linear-gradient(180deg, rgba(var(--pr-accent-rgb), .45), rgba(var(--pr-accent-rgb), .12)); }
.pr-modern .pr-step-2 .pr-podium-block { height: 1.05rem; background: linear-gradient(180deg, color-mix(in oklab, var(--pr-silver) 70%, transparent), transparent); }
.pr-modern .pr-step-3 .pr-podium-block { height: .7rem; background: linear-gradient(180deg, color-mix(in oklab, var(--pr-bronze) 55%, transparent), transparent); }
.pr-modern .pr-lb-top .pr-on-podium {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
@media (max-width: 420px) {
    .pr-modern .pr-row { grid-template-columns: 1.45rem 1.8rem minmax(0, 1fr) 2.8rem; column-gap: .45rem; }
    .pr-modern .pr-av { width: 1.8rem; height: 1.8rem; }
    .pr-modern .pr-rank { width: 1.45rem; height: 1.45rem; }
    .pr-modern .pr-chip-picks, .pr-modern .pr-chip-bonus { display: none; }
}

/* ==========================================================================
   E. This page's sidebar (#prAside on .benfica-layout.pr-modern only)
   ========================================================================== */
.benfica-layout.pr-modern #prAside .bn-panel { padding-bottom: .65rem; }
/* How Scoring Works: a compact two-column table. */
.benfica-layout.pr-modern #prAside .pr-side-scoring ul { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .15rem; }
.benfica-layout.pr-modern #prAside .pr-side-scoring li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--pr-line) 70%, transparent); font-size: .74rem; }
.benfica-layout.pr-modern #prAside .pr-side-scoring li strong {
    flex: 0 0 auto; padding: .05rem .45rem; border-radius: 999px;
    background: rgba(var(--pr-primary-rgb), .1); color: var(--pr-primary-ink); font-size: .68rem; font-weight: 900;
}
.benfica-layout.pr-modern #prAside .pr-side-scoring li:not(:has(strong)) { display: block; border: 0; padding: .25rem 0 0; color: var(--pr-muted); font-size: .7rem; }
/* Explore: links as compact pills, two per row. */
.benfica-layout.pr-modern #prAside .bn-cta .bn-cta-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.benfica-layout.pr-modern #prAside .bn-cta .bn-cta-links a {
    margin: 0; padding: .3rem .55rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .72rem;
}

/* ==========================================================================
   F. Match page (Predict & Vote tab): no card-in-a-card
   ========================================================================== */
.pr-modern.pr-match .prediction-match-card { container-type: inline-size; }
.pr-modern.pr-match .prediction-match-card .prediction-match-card-header { margin-bottom: .5rem; }
.pr-modern.pr-match .prediction-match-card .prediction-community-panel { margin-top: .55rem; }
.mm-page #match-tab-panel .pr-modern.pr-match + script + .alert,
.mm-page #match-tab-panel .bn-section:has(.pr-match) + .alert { margin-top: .75rem !important; }
/* Your Prediction (after kickoff): the badges as chips, the checks inline. */
.pr-modern.pr-match-summary > .d-flex { gap: .35rem !important; margin-bottom: .45rem !important; }
.pr-modern.pr-match-summary .badge {
    padding: .3rem .7rem; border-radius: 999px;
    font-size: .78rem !important; font-weight: 800;
}
.pr-modern.pr-match-summary .badge.text-bg-primary { background: rgba(var(--pr-primary-rgb), .12) !important; color: var(--pr-primary-ink) !important; }
.pr-modern.pr-match-summary .badge.text-bg-secondary { background: var(--pr-soft-2) !important; color: var(--pr-ink) !important; }
.pr-modern.pr-match-summary .badge.text-bg-success { background: var(--pr-ok) !important; color: var(--pr-on) !important; }
.pr-modern.pr-match-summary ul { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem !important; }
.pr-modern.pr-match-summary li {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .6rem; border-radius: 999px; background: var(--pr-soft);
    font-size: .74rem; font-weight: 700;
}
.pr-modern.pr-match-summary li i { margin: 0 !important; }
.pr-modern.pr-match-summary > a { font-size: .76rem; font-weight: 700; }

/* ==========================================================================
   G. Reduced motion: nothing moves.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pr-modern .prediction-kickoff-chip.pkc-urgent { animation: none; }
    .pr-modern :is(.pr-bump .pr-score, .pr-pop, .pr-saving .pr-save-ico::before, .pr-pk-pop) { animation: none !important; }
    .pr-modern :is(.prediction-match-card, .pr-step, .pr-chip, .pr-pick, .pr-pk, .pr-meter-fill, .pr-seg, .prediction-save-btn, .prediction-select,
        .pr-seg-btn, .pr-lb-bar, .prediction-mini-board-row) { transition: none !important; }
    .pr-modern .prediction-mini-board-row::after { transition: none !important; }
    .pr-modern :is(.pr-step, .pr-chip, .prediction-save-btn):is(:hover, :active) { transform: none !important; }
}

/* ==========================================================================
   H. The predictions hero (themes/default/components/hero.php 'predictions'
      branch -> predictionsHeroHtml()). Built on the shared .hero-pv2 layout
      (style.css): badge card | title, deadline + to-do chips, pill tabs |
      the turning .cv-rot spot. Glass on the brand gradient, like the other
      pv2 heroes; on-primary text.
   ========================================================================== */
.pr-modern.prh.hero-pv2--pred .pv2 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 30rem); gap: .8rem 1.4rem; }
.pr-modern.prh.hero-pv2--pred .prh-badge {
    width: 6.2rem; height: 6.2rem;
    place-items: center;
    border-radius: 1.4rem;
}
.pr-modern.prh.hero-pv2--pred .prh-badge > i { font-size: 3.1rem; opacity: 1; color: var(--theme-accent-on-primary, var(--pr-accent)); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.pr-modern.prh.hero-pv2--pred .pv2-name { margin: .3rem 0 .15rem; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem); }
.pr-modern.prh.hero-pv2--pred .prh-sub { margin: 0 0 .5rem; max-width: 40rem; color: color-mix(in oklab, var(--theme-on-primary, #fff) 82%, transparent); font-size: .84rem; line-height: 1.35; }
.pr-modern.prh.hero-pv2--pred .prh-chips { gap: .4rem; }
.pr-modern.prh.hero-pv2--pred .prh-next {
    display: inline-flex; align-items: center; gap: .5rem;
    max-width: 100%; min-width: 0;
    padding: .25rem .35rem .25rem .3rem;
    background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .26);
    color: var(--theme-on-primary, #fff); text-decoration: none;
    transition: background-color var(--dur-fast, .12s) ease, transform var(--dur-fast, .12s) ease;
}
.pr-modern.prh.hero-pv2--pred .prh-next:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.pr-modern.prh.hero-pv2--pred .prh-next-crests { display: inline-flex; align-items: center; flex: 0 0 auto; padding: .1rem .35rem; border-radius: 999px; background: rgba(255, 255, 255, .9); }
.pr-modern.prh.hero-pv2--pred .prh-next-crests .prediction-matchup-logos { display: inline-flex; align-items: center; }
.pr-modern.prh.hero-pv2--pred .prh-next-crests img { width: 1.35rem !important; height: 1.35rem !important; object-fit: contain; border-radius: 0; }
.pr-modern.prh.hero-pv2--pred .prh-next-crests .prediction-matchup-vs { margin: 0 .2rem; color: rgba(0, 0, 0, .45); font-size: .52rem; font-weight: 900; text-transform: uppercase; }
.pr-modern.prh.hero-pv2--pred .prh-next-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pr-modern.prh.hero-pv2--pred .prh-next-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 800; }
.pr-modern.prh.hero-pv2--pred .prh-next-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; font-weight: 600; opacity: .85; }
.pr-modern.prh.hero-pv2--pred .prh-next-comp .pr-comp-logo { width: 1em; height: 1em; margin-right: .25em; border-radius: 2px; background: rgba(255, 255, 255, .9); }
.pr-modern.prh.hero-pv2--pred .prh-lock { flex: 0 0 auto; font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--theme-accent-on-primary, var(--pr-accent)); }
.pr-modern.prh.hero-pv2--pred .prediction-kickoff-chip.prh-cd {
    flex: 0 0 auto;
    padding: .2rem .5rem;
    border: 0; border-radius: 999px;
    background: rgba(0, 0, 0, .25);
}
.pr-modern.prh.hero-pv2--pred .prh-cd .pkc-unit b { color: var(--theme-on-primary, #fff); font-size: .86rem; }
.pr-modern.prh.hero-pv2--pred .prh-cd .pkc-unit small { color: color-mix(in oklab, var(--theme-on-primary, #fff) 70%, transparent); }
.pr-modern.prh.hero-pv2--pred .prh-cd .pkc-unit + .pkc-unit::before { color: color-mix(in oklab, var(--theme-on-primary, #fff) 60%, transparent); }
.pr-modern.prh.hero-pv2--pred .prh-cd.pkc-urgent { background: var(--theme-accent-on-primary, var(--pr-accent)); animation: prUrgent 1.5s ease-in-out infinite; }
.pr-modern.prh.hero-pv2--pred .prh-cd.pkc-urgent .pkc-unit b, .pr-modern.prh.hero-pv2--pred .prh-cd.pkc-urgent .pkc-unit small { color: var(--theme-on-accent, #2b2100); }
.pr-modern.prh.hero-pv2--pred .prh-todo {
    color: var(--theme-on-primary, #fff); text-decoration: none;
    background: rgba(var(--theme-accent-rgb, 244, 178, 35), .26); border-color: rgba(var(--theme-accent-rgb, 244, 178, 35), .55);
}
.pr-modern.prh.hero-pv2--pred .prh-todo.is-done { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .26); }
.pr-modern.prh.hero-pv2--pred .prh-todo:hover { filter: brightness(1.08); }
.pr-modern.prh.hero-pv2--pred .prh-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .6rem; }
.pr-modern.prh.hero-pv2--pred .prh-tab {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--theme-on-primary, #fff);
    font-size: .74rem; font-weight: 800; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-fast, .12s) ease;
}
.pr-modern.prh.hero-pv2--pred .prh-tab i { color: var(--theme-accent-on-primary, var(--pr-accent)); font-size: .8em; }
.pr-modern.prh.hero-pv2--pred .prh-tab:hover, .pr-modern.prh.hero-pv2--pred .prh-tab:focus-visible { background: rgba(255, 255, 255, .22); color: var(--theme-on-primary, #fff); }
/* Season filter, as a glass pill at the end of the tabs. */
.pr-modern.prh.hero-pv2--pred .prh-season { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; padding: 0; }
.pr-modern.prh.hero-pv2--pred .prh-season label { margin: 0; color: var(--theme-accent-on-primary, var(--pr-accent)); font-size: .8rem; }
.pr-modern.prh.hero-pv2--pred .prh-season .form-select {
    min-height: 1.95rem; min-width: 7.5rem; padding: .15rem 2rem .15rem .75rem;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
    background-color: rgba(0, 0, 0, .2);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    color: var(--theme-on-primary, #fff);
    font-size: .76rem; font-weight: 800;
}
.pr-modern.prh.hero-pv2--pred .prh-season .form-select option { color: var(--pr-ink); background: var(--pr-card-bg); }
.pr-modern.prh.hero-pv2--pred .prh-season .btn {
    min-height: 1.95rem; padding: .15rem .7rem; border-radius: 999px;
    background: rgba(255, 255, 255, .9); color: var(--pr-primary); font-size: .74rem; font-weight: 800;
}
.pr-modern.prh.hero-pv2--pred .prh-season.pr-autosubmit .btn { display: none; }
.pr-modern.prh.hero-pv2--pred .prh-side .pv2-stat-label { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.1; }
@media (max-width: 1199.98px) {
    .pr-modern.prh.hero-pv2--pred .pv2 { grid-template-columns: auto minmax(0, 1fr); }
    .pr-modern.prh.hero-pv2--pred .prh-side { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    /* Phones: badge + eyebrow + title on top, then the deadline, the tabs and the
       turning spot at full width (the body's children join the hero grid). */
    .pr-modern.prh.hero-pv2--pred .pv2 { grid-template-columns: auto minmax(0, 1fr); row-gap: .55rem; }
    .pr-modern.prh.hero-pv2--pred .pv2-body { display: contents; }
    .pr-modern.prh.hero-pv2--pred .prh-badge { grid-column: 1; grid-row: 1 / span 2; width: 3.6rem; height: 3.6rem; min-height: 0; border-radius: .9rem; align-self: center; }
    .pr-modern.prh.hero-pv2--pred .prh-badge > i { font-size: 1.8rem; }
    .pr-modern.prh.hero-pv2--pred .pv2-position { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; }
    .pr-modern.prh.hero-pv2--pred .pv2-name { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
    .pr-modern.prh.hero-pv2--pred .prh-sub { display: none; }
    .pr-modern.prh.hero-pv2--pred .prh-chips,
    .pr-modern.prh.hero-pv2--pred .prh-tabs,
    .pr-modern.prh.hero-pv2--pred .prh-side { grid-column: 1 / -1; }
    .pr-modern.prh.hero-pv2--pred .prh-chips { flex-wrap: wrap !important; overflow: visible !important; }
    .pr-modern.prh.hero-pv2--pred .prh-next { flex-wrap: wrap; width: 100%; border-radius: 1rem; row-gap: .35rem; }
    .pr-modern.prh.hero-pv2--pred .prh-todo { white-space: normal; }
    .pr-modern.prh.hero-pv2--pred .prh-next-text { flex: 1 1 calc(100% - 7.5rem); }
    .pr-modern.prh.hero-pv2--pred .prh-lock { margin-left: .2rem; }
    .pr-modern.prh.hero-pv2--pred .prh-cd { margin-left: auto; }
    .pr-modern.prh.hero-pv2--pred .prh-tabs {
        flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem .1rem;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .pr-modern.prh.hero-pv2--pred .prh-tabs::-webkit-scrollbar { display: none; }
    .pr-modern.prh.hero-pv2--pred .prh-tab { flex: 0 0 auto; }
    .pr-modern.prh.hero-pv2--pred .prh-season { flex: 0 0 auto; margin-left: 0; }
}
@media (max-width: 420px) {
    .pr-modern.prh.hero-pv2--pred .prh-side .pv2-stat-label { font-size: .52rem; letter-spacing: .02em; }
    .pr-modern.prh.hero-pv2--pred .prh-tab { padding: .25rem .55rem; font-size: .7rem; }
    .pr-modern.prh.hero-pv2--pred .prh-next-text b { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pr-modern.prh.hero-pv2--pred .prh-cd.pkc-urgent { animation: none; }
    .pr-modern.prh.hero-pv2--pred .prh-next, .pr-modern.prh.hero-pv2--pred .prh-tab { transition: none; }
    .pr-modern.prh.hero-pv2--pred .prh-next:hover { transform: none; }
}

/* ==========================================================================
   I. Round 4 (4 Oct 2026): round line, season filter in the heading,
      the 2px rhythm.
   ========================================================================== */
/* ---- Card header: competition on line 1, "Matchday 8 · date" under it ---- */
.pr-modern .prediction-match-round { color: var(--pr-muted); font-size: .72rem; font-weight: 600; line-height: 1.25; }
.pr-modern .pr-enh .prediction-match-title-row > div {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .45rem; row-gap: .02rem;
    align-items: center;
    min-width: 0;
}
.pr-modern .pr-enh .prediction-match-label { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.pr-modern .pr-enh .prediction-match-meta { display: contents; }
.pr-modern .pr-enh .pr-comp {
    grid-column: 2 / 4; grid-row: 1;
    display: flex; align-items: center; min-width: 0;
    color: var(--pr-ink); font-size: .8rem; font-weight: 800; line-height: 1.2;
}
.pr-modern .pr-enh .pr-comp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-modern .pr-enh .pr-meta-dot { display: none; }
.pr-modern .pr-enh .prediction-match-round { grid-column: 2; grid-row: 2; white-space: nowrap; font-size: .7rem; }
.pr-modern .pr-enh .pr-date {
    grid-column: 3; grid-row: 2; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--pr-muted); font-size: .7rem; font-weight: 600; line-height: 1.25;
}
.pr-modern .pr-enh .prediction-match-title-row > div:has(.prediction-match-round) .pr-date::before { content: "·"; margin-right: .45rem; }
.pr-modern .pr-enh .prediction-match-title-row > div:not(:has(.prediction-match-round)) .pr-date { grid-column: 2 / 4; }

/* ---- Season filter on the right of the "Predictions Hub" heading ----------
   A real form inside .bn-head-actions. The menuizer (footer.php) only moves
   a.btn / button.btn, and this form has neither, so it is left whole. */
.benfica-layout.pr-modern .bn-section-head .pr-head-season {
    display: inline-flex; align-items: center; gap: .3rem;
    margin: 0; padding: 0;
}
.benfica-layout.pr-modern .bn-section-head .pr-head-season label {
    display: inline-flex; align-items: center; gap: .3rem; margin: 0;
    color: var(--pr-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.benfica-layout.pr-modern .bn-section-head .pr-head-season label i { color: var(--slb-gold, var(--pr-accent)); font-size: .8rem; }
.benfica-layout.pr-modern .bn-section-head .pr-head-season .form-select {
    width: auto; min-width: 7.2rem; min-height: 1.9rem;
    padding: .1rem 1.9rem .1rem .7rem;
    border: 1px solid var(--pr-line); border-radius: 999px;
    background-color: var(--pr-soft); color: var(--pr-ink);
    font-size: .78rem; font-weight: 800;
}
.benfica-layout.pr-modern .bn-section-head .pr-head-season .form-select:focus {
    border-color: rgba(var(--pr-primary-rgb), .55); box-shadow: 0 0 0 .18rem rgba(var(--pr-primary-rgb), .14);
}
.benfica-layout.pr-modern .bn-section-head .pr-season-apply {
    min-height: 1.9rem; padding: .1rem .75rem;
    border: 0; border-radius: 999px;
    background: var(--pr-primary); color: var(--pr-on);
    font-size: .74rem; font-weight: 800;
}
.benfica-layout.pr-modern .bn-section-head .pr-head-season.pr-autosubmit .pr-season-apply { display: none; }
@media (max-width: 767.98px) {
    /* Phones: the title may shrink and wrap; the filter keeps its icon + select. */
    .benfica-layout.pr-modern .bn-section-head:has(.pr-head-season) { gap: .5rem; }
    .benfica-layout.pr-modern .bn-section-head:has(.pr-head-season) h2 { flex: 0 1 auto; min-width: 0; }
    .benfica-layout.pr-modern .bn-section-head:has(.pr-head-season)::after { min-width: .75rem; }
    .benfica-layout.pr-modern .bn-section-head .pr-head-season .pr-season-label {
        position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;
    }
    .benfica-layout.pr-modern .bn-section-head .pr-head-season .form-select { min-width: 6.4rem; font-size: 16px; min-height: 2rem; }
}

/* The round line starts under the competition NAME, not under its logo. */
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) .prediction-match-round,
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo):not(:has(.prediction-match-round)) .pr-date { padding-left: calc(.8rem * 1.4); }
/* style.css stacks .predictions-season-filter into a column on phones and the theme
   ellipsises section titles: in the heading the filter stays one row, the title wraps. */
.benfica-layout.pr-modern .bn-section-head .pr-head-season { flex-direction: row !important; flex-wrap: nowrap; }
.benfica-layout.pr-modern .bn-section-head .pr-head-season .form-select { width: auto !important; }
@media (max-width: 767.98px) {
    /* Beats style.css's body:has(.hero-pv2) … :has(.bn-head-actions) > h2 ellipsis (!important). */
    body .benfica-layout.pr-modern.pr-page .bn-section-head:has(.pr-head-season) > h2 { flex: 1 1 auto !important; min-width: min-content !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15; }
    .benfica-layout.pr-modern .bn-section-head:has(.pr-head-season)::after { display: none; }
    .benfica-layout.pr-modern .bn-section-head:has(.pr-head-season) .bn-head-actions { margin-left: auto; }
}
@media (max-width: 420px) {
    .benfica-layout.pr-modern .bn-section-head .pr-head-season label { display: none; }
    .benfica-layout.pr-modern .bn-section-head .pr-head-season .form-select { min-width: 0; padding-left: .6rem; padding-right: 1.7rem; background-position: right .5rem center; }
}

/* ---- Competition logo as tall as its two lines (the owner, 4 Oct 2026) ------
   With a logo, the header grid becomes: pill | logo (both rows) | name over
   "Matchday 8 · date". The logo leaves .pr-comp (display: contents) so it can
   span the two text rows; headers without a logo keep the layout above. */
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) {
    grid-template-columns: auto auto auto minmax(0, 1fr);
}
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) .pr-comp { display: contents; }
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) .pr-comp-logo {
    grid-column: 2; grid-row: 1 / span 2; align-self: center;
    width: 1.9rem; height: 1.9rem; margin: 0;
    vertical-align: middle;
}
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) .pr-comp-name {
    grid-column: 3 / 5; grid-row: 1;
    color: var(--pr-ink); font-size: .8rem; font-weight: 800; line-height: 1.2;
}
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) .prediction-match-round { grid-column: 3; grid-row: 2; padding-left: 0; }
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo):has(.prediction-match-round) .pr-date { grid-column: 4; grid-row: 2; }
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo):not(:has(.prediction-match-round)) .pr-date { grid-column: 3 / 5; grid-row: 2; padding-left: 0; }


/* ---- No HOME / AWAY pill on the cards (the owner, 4 Oct 2026) ---------------
   The scoreboard's order already says who is at home. The header grid closes up:
   [logo] name over "Matchday 8 · date", or name over the date without a logo. */
.pr-modern .pr-enh .prediction-match-label { display: none; }
.pr-modern .pr-enh .prediction-match-title-row > div { grid-template-columns: auto minmax(0, 1fr); }
.pr-modern .pr-enh .pr-comp { grid-column: 1 / 3; }
.pr-modern .pr-enh .prediction-match-round { grid-column: 1; }
.pr-modern .pr-enh .pr-date { grid-column: 2; }
.pr-modern .pr-enh .prediction-match-title-row > div:not(:has(.prediction-match-round)) .pr-date { grid-column: 1 / 3; }
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) { grid-template-columns: auto auto minmax(0, 1fr); }
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) .pr-comp-logo { grid-column: 1; grid-row: 1 / span 2; }
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) .pr-comp-name { grid-column: 2 / 4; grid-row: 1; }
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo) .prediction-match-round { grid-column: 2; grid-row: 2; }
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo):has(.prediction-match-round) .pr-date { grid-column: 3; grid-row: 2; }
.pr-modern .pr-enh .prediction-match-title-row > div:has(.pr-comp-logo):not(:has(.prediction-match-round)) .pr-date { grid-column: 2 / 4; grid-row: 2; }

/* The match page's Fan Prediction box: a smaller gap around the card than the
   section's p-3 (16px) (the owner, 4 Oct 2026). */
.card-body.p-3:has(> .pr-modern.pr-match) { padding: 8px 10px !important; }

/* No wrapper card around the page's sections (owner, 4 Oct 2026): the hub and the
   mini-leagues sit straight under their heading, like the News page; only the match
   cards, history rows and boards inside keep their own boxes. */
.benfica-layout.pr-modern .bn-main > .bn-section > .card {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.benfica-layout.pr-modern .bn-main > .bn-section > .card > .card-body { padding: 0 !important; }

/* The games link bar (luTopBar, #lu-top): sticky under the site header, like the XI Builder. */
.benfica-layout.pr-modern #lu-top {
    position: sticky; top: var(--pl-sticky-top, calc(var(--navbar-height, 50px) + 8px)); z-index: 1020;
    margin-bottom: 1rem; transition: top .2s ease;
}
.benfica-layout.pr-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);
}

/* The (now invisible) section card still clipped its overflow, cutting the match cards'
   shadows at the edges: let them show like the sidebar's. */
.benfica-layout.pr-modern .bn-main > .bn-section > .card,
.benfica-layout.pr-modern .bn-main > .bn-section > .card > .card-body { overflow: visible !important; }

/* The games bar starts level with the sidebar's first card (no section top margin; the
   stylesheet link printed before it stopped it being the column's :first-child). */
.benfica-layout.pr-modern .bn-main > #lu-top { margin-top: 0 !important; }


/* ==========================================================================
   J. THE STANDARD: My Benfica (owner, 5 Oct 2026)
      "the standard style should be like we have on my-benfica.php". The page
      root is .benfica-layout.mb-modern.pr-modern.pr-page and it links
      mybenfica-modern.css: the grid, the gaps, the section heads, the .mb-seg
      switches, the .mb-box cards, THE row (.mb-row), pills, chips, empty
      states and countdowns are My Benfica's own rules. Below: only what this
      page adds on top (board rows inside an .mb-box, the history row's side,
      the mini-league forms, the #prAside copies of #mbAside's sidebar look)
      and the games bar's phone labels.
   ========================================================================== */
/* The games bar (luTopBar, #lu-top) on phones: icons only, like .mb-topbar (the active
   link's label made the bar 7px taller than My Benfica's). */
@media (max-width: 767.98px) {
    .benfica-layout.pr-page #lu-top .lu-nav-link span { display: none; }
}

/* Open Predictions: cards stacked 1rem apart (the sidebar's gap), nothing under the last. */
.benfica-layout.pr-page .predictions-open-list { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.benfica-layout.pr-page #pr-open .mb-box + .predictions-open-list,
.benfica-layout.pr-page #pr-open .mb-box + .mb-box,
.benfica-layout.pr-page #pr-open .pr-alert + .mb-box,
.benfica-layout.pr-page #pr-open .pr-intro + .mb-box,
.benfica-layout.pr-page #pr-open .pr-intro + .predictions-open-list { margin-top: 1rem; }
.benfica-layout.pr-page .pr-intro { margin: 0; color: var(--mb-muted); font-size: .8rem; line-height: 1.4; }
.benfica-layout.pr-page .pr-alert {
    display: flex; align-items: center; gap: .45rem;
    margin: 0 0 1rem; padding: .45rem .85rem;
    border: 0; border-radius: 999px;
    font-size: .82rem; font-weight: 600;
}
/* The reminder: one line, then the matches still to predict as rows. */
.benfica-layout.pr-page .prediction-missing-reminder { margin: 0; padding: .3rem .7rem; border-left: 1px solid var(--mb-ring); background: var(--mb-card-bg); }
.benfica-layout.pr-page .pr-reminder-line { padding: .5rem .1rem .35rem; }
.benfica-layout.pr-page .pr-reminder-line > i { color: var(--mb-accent-ink); opacity: 1; }
.benfica-layout.pr-page .pr-reminder-line b { color: var(--mb-ink); font-weight: 800; }
.benfica-layout.pr-page .pr-reminder-line strong { color: var(--mb-primary-ink); font-weight: 900; }
.benfica-layout.pr-page .prediction-missing-reminder .mb-rows { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }

/* Boards inside an .mb-box: no card in a card. */
.benfica-layout.pr-page .mb-box .prediction-leaderboard,
.benfica-layout.pr-page .mb-box .prediction-mini-board {
    padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
}
.benfica-layout.pr-page .mb-box .prediction-mini-boards { display: block; margin: 0; }
.benfica-layout.pr-page .mb-box .pr-podium { margin-top: .35rem; }
.benfica-layout.pr-page .mb-box .pr-row { padding: .45rem .1rem; }
.benfica-layout.pr-page .mb-box .pr-row.is-me { padding-left: .6rem; }
.benfica-layout.pr-page .mb-box .pr-row-stats { font-size: .7rem; }
.benfica-layout.pr-page .mb-box .pr-lb-pinned { margin-top: .35rem; }
.benfica-layout.pr-page .mb-foot-note a { color: var(--mb-primary-ink); font-weight: 800; }
.benfica-layout.pr-page .mb-foot-note > i { color: var(--mb-accent-ink); }

/* History / Recent Results rows: the followed-match row (crests | title over one meta line |
   side). Side: your pick + the points, or the picks count + the W/D/L square. */
.benfica-layout.pr-page .mb-row--match .prediction-matchup-logos { display: inline-flex; align-items: center; gap: .3rem; }
.benfica-layout.pr-page .mb-row--match .prediction-team-logo,
.benfica-layout.pr-page .mb-row--match .prediction-matchup-logos img,
.benfica-layout.pr-page .mb-row--match .prediction-matchup-logos svg { width: 1.5rem !important; height: 1.5rem !important; max-width: none; object-fit: contain; }
.benfica-layout.pr-page .mb-row--match .prediction-matchup-vs { margin: 0; color: var(--mb-muted); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.benfica-layout.pr-page .pr-pts {
    display: inline-flex; align-items: center; justify-content: center; min-width: 3.1rem;
    padding: .12rem .45rem; border-radius: .25rem;
    background: var(--mb-soft-2); color: var(--mb-muted);
    font-size: .74rem; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.benfica-layout.pr-page .pr-pts.is-exact { background: var(--mb-ok); color: #fff; }
.benfica-layout.pr-page .pr-pts.is-outcome { background: rgba(var(--mb-accent-rgb), .28); color: var(--mb-ink); }
.benfica-layout.pr-page .pr-pts.is-miss { background: rgba(var(--mb-bad-rgb), .1); color: var(--mb-bad-ink); }
.benfica-layout.pr-page .pr-rrow .pr-wdl { position: static; transform: none; }
/* Calibration: stake tile | stake over picks · exact | bar + outcome rate. */
.benfica-layout.pr-page .pr-calrow .mb-ico strong { font-size: .74rem; }
.benfica-layout.pr-page .pr-cal-bar { position: relative; display: block; width: 5.5rem; height: .45rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
.benfica-layout.pr-page .pr-cal-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--mb-ok); transition: width .9s var(--mb-ease); }
.benfica-layout.pr-page .pr-cal-pct { min-width: 2.6rem; text-align: right; font-size: .78rem; font-weight: 900; font-variant-numeric: tabular-nums; }

/* Mini-leagues: Create | Join (two tiles, .mb-zone's .6rem gap), then the leagues box. */
.benfica-layout.pr-page .pr-league-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .6rem; }
.benfica-layout.pr-page .pr-league-forms + .mb-box { margin-top: .6rem; }
.benfica-layout.pr-page .pr-lform { display: flex; flex-direction: column; gap: .55rem; padding: .6rem .75rem; overflow: visible; }
.benfica-layout.pr-page .pr-lform-top { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.benfica-layout.pr-page .pr-lform-top .mb-ico { width: 2.3rem; height: 2.3rem; border-radius: .7rem; font-size: .95rem; }
.benfica-layout.pr-page .pr-lform-title { display: flex; flex-direction: column; min-width: 0; }
.benfica-layout.pr-page .pr-lform-title b { font-size: .84rem; font-weight: 900; line-height: 1.2; }
.benfica-layout.pr-page .pr-lform-title small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mb-muted); font-size: .7rem; line-height: 1.35; }
.benfica-layout.pr-page .pr-lform-row { display: flex; align-items: center; gap: .4rem; margin: 0; }
.benfica-layout.pr-page .pr-input {
    flex: 1 1 auto; min-width: 0; height: 1.95rem; padding: .2rem .8rem;
    border: 1px solid var(--mb-line); border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink);
    font-size: .8rem; font-weight: 700; box-shadow: none;
}
.benfica-layout.pr-page .pr-input:focus { border-color: rgba(var(--mb-primary-rgb), .55); box-shadow: 0 0 0 .18rem rgba(var(--mb-primary-rgb), .14); background: var(--mb-card-bg); }
/* Pills on this page: save / confirm / add / join are green, destructive is red; flat. */
.benfica-layout.pr-page .mb-pill { cursor: pointer; }
.benfica-layout.pr-page .mb-pill--ok { background: var(--mb-ok); border-color: transparent; color: #fff; }
.benfica-layout.pr-page .mb-pill--ok:hover { background: color-mix(in oklab, var(--mb-ok) 86%, black); color: #fff; }
.benfica-layout.pr-page .mb-pill--bad { background: rgba(var(--mb-bad-rgb), .1); border-color: rgba(var(--mb-bad-rgb), .3); color: var(--mb-bad-ink); }
.benfica-layout.pr-page .mb-pill--bad:hover { background: var(--mb-bad); border-color: transparent; color: #fff; }
.benfica-layout.pr-page .pr-leagues .mb-row-side .mb-pill { padding: .2rem .65rem; }
.benfica-layout.pr-page .pr-league-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .45rem 0 .2rem; }
.benfica-layout.pr-page .pr-league-chips code { color: var(--mb-primary-ink); font-weight: 900; }
.benfica-layout.pr-page .pr-invites { display: flex; flex-wrap: wrap; gap: .35rem; padding-bottom: .4rem; }
.benfica-layout.pr-page #league-standings .mb-foot { flex-wrap: wrap; }

/* ---- This page's sidebar: #mbAside's look (mybenfica-modern.css section I) ---- */
.benfica-layout.pr-page #prAside .bn-panel { padding-bottom: .75rem; }
.benfica-layout.pr-page #prAside .pr-side-tiles {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem;
    margin: 0; padding: 0; list-style: none;
}
.benfica-layout.pr-page #prAside .pr-side-tiles li {
    display: flex; flex-direction: column; gap: .1rem; min-width: 0;
    padding: .35rem .5rem; border-radius: .6rem; background: var(--mb-soft);
}
.benfica-layout.pr-page #prAside .pr-side-tiles span { color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.benfica-layout.pr-page #prAside .pr-side-tiles b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.benfica-layout.pr-page #prAside .pr-side-tiles b small { color: var(--mb-muted); font-size: .68em; font-weight: 800; }
.benfica-layout.pr-page #prAside .mb-side-links { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent); }
.benfica-layout.pr-page #prAside .mb-side-links a { color: var(--mb-primary-ink); font-size: .74rem; font-weight: 800; text-decoration: none; }
.benfica-layout.pr-page #prAside .mb-side-links a:hover { text-decoration: underline; }
.benfica-layout.pr-page #prAside .pr-side-deadline .mb-row { padding-top: .2rem; }
.benfica-layout.pr-page #prAside .pr-side-cd { display: flex; justify-content: center; margin-top: .35rem; padding: .5rem .4rem .4rem; border-radius: .6rem; background: var(--mb-soft); }
.benfica-layout.pr-page #prAside .bn-cta .bn-cta-links a { box-shadow: none; }

/* ---- Phones: My Benfica's rhythm ---- */
@media (max-width: 575.98px) {
    .benfica-layout.pr-page .mb-row--match .prediction-team-logo,
    .benfica-layout.pr-page .mb-row--match .prediction-matchup-logos img,
    .benfica-layout.pr-page .mb-row--match .prediction-matchup-logos svg { width: 1.3rem !important; height: 1.3rem !important; }
    .benfica-layout.pr-page .pr-cal-bar { width: 3.6rem; }
    .benfica-layout.pr-page .pr-leagues .pr-hide-xs { display: none; }
}
/* ---- Games bar on phones: icons only (the active one too), packed left like .mb-topbar,
   as tall as My Benfica's bar (its online-count pill — .32rem padding, .76rem text, 1px ring
   — sets that height, so the links get the pill's height). ---- */
@media (max-width: 767.98px) {
    .benfica-layout.pr-page #lu-top .lu-nav { width: auto !important; justify-content: flex-start !important; }
    .benfica-layout.pr-page #lu-top .lu-nav-link { min-height: calc(.76rem * 1.2 + .64rem + 2px); }
}
@media (max-width: 379.98px) {
    .benfica-layout.pr-page #lu-top .lu-nav-link { padding: .4rem .48rem; }
    .benfica-layout.pr-page #lu-top .lu-topbar { gap: .25rem; padding: .25rem; }
}
@media (max-width: 575.98px) {
    .benfica-layout.pr-page .pr-leagues .mb-row-side .mb-chip { display: none; }
}

/* ---- Phone section heads with controls (owner, 5 Oct 2026): a title NEVER truncates. ----
   style.css forces every head onto one row (flex-wrap: nowrap !important) and ellipsizes
   titles on hero pages; these id-scoped rules win over it.
   - Open Predictions (season picker) and History (switch): the head may wrap. The title keeps
     its full width, so the controls move to their own row only when they do not fit beside
     it, and sit at the right end of that row (the season picker as a compact pill).
   - Leaderboard (five-button switch): below 440px the switch always takes its own
     full-width row, the buttons equal (My Benfica's #mb-follow rule, which style.css
     overrides on that page). */
@media (max-width: 767.98px) {
    body .benfica-layout.mb-modern.pr-page :is(#pr-open, #pr-history, #pr-leaderboard) > .bn-section-head { flex-wrap: wrap !important; row-gap: .5rem !important; }
    body .benfica-layout.mb-modern.pr-page :is(#pr-open, #pr-history, #pr-leaderboard) > .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.mb-modern.pr-page :is(#pr-open, #pr-history, #pr-leaderboard) > .bn-section-head > .bn-head-actions {
        flex: 0 0 auto !important; margin-left: auto !important;
    }
    /* The colour line may shrink to nothing so it stays on the title's row (it wrapped onto
       the controls' row beside a long title). */
    body .benfica-layout.mb-modern.pr-page :is(#pr-open, #pr-history, #pr-leaderboard) > .bn-section-head::after { min-width: 0 !important; }
}
@media (max-width: 439.98px) {
    body .benfica-layout.mb-modern.pr-page #pr-leaderboard > .bn-section-head > .bn-head-actions { flex: 1 0 100% !important; justify-content: stretch !important; margin-left: 0 !important; }
    body .benfica-layout.mb-modern.pr-page #pr-leaderboard > .bn-section-head > .bn-head-actions > .mb-seg { width: 100% !important; flex: 1 1 auto !important; overflow: visible; justify-content: space-between !important; }
    body .benfica-layout.mb-modern.pr-page #pr-leaderboard > .bn-section-head > .bn-head-actions > .mb-seg > .mb-seg-btn { flex: 1 1 0 !important; justify-content: center; }
}
@media (max-width: 379.98px) {
    /* A long translated title ("Prognósticos em Aberto") fills the 320px row: the leading
       rule gives way (as on My Benfica's switch heads at this width) so the trailing one stays
       beside the title instead of dropping onto the picker's row. */
    body .benfica-layout.mb-modern.pr-page #pr-open > .bn-section-head::before { display: none !important; }
}