/* ==========================================================================
   MLB Team Picker — the Scoring Shot (Sports)
   Fourth page on scoring-shot-engine.js, sport 'baseball'. Every team is a
   BLEACHER SECTION above the outfield wall; the pitcher throws, the batter
   swings, and the ball has to CLEAR the wall to land in one. Same engine,
   fairness, grid and phases as the NBA, Premier League and NFL pages.
   ⚠️ The ball travels an OPEN ballistic arc to a target and stops. Nothing
   orbits anything, so it is not a wheel in disguise.
   ⚖️ NO TEAM LOGOS, CAPS, MARKS OR WORDMARKS. Each section carries the team
   NAME over its seats with the team colour on the wall padding.
   ========================================================================== */
.page-mlb-team-picker-wheel {
    --mlb-primary: #122f4b;
    --mlb-accent: #d1232a;
    --mlb-grad: linear-gradient(135deg, #d1232a, #122f4b);
    --mlb-ink: var(--theme-text, #1f2430);
    /* ⚠️ --theme-muted, NOT --theme-text-muted (undefined). */
    --mlb-muted: var(--theme-muted, #6b7280);
    --mlb-surface: var(--theme-surface, #ffffff);
    --mlb-border: var(--theme-border, #e5e7eb);
    --mlb-display: 'Georgia', 'Times New Roman', serif;
    --mlb-mono: 'DejaVu Sans Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
    --mlb-plate: #eef1f6;
}

/* ---- Ambient backdrop --------------------------------------------------- */
.page-mlb-team-picker-wheel::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(1040px 560px at 10% -6%, rgba(18, 47, 75, 0.20), transparent 60%),
        radial-gradient(920px 520px at 92% 2%, rgba(209, 35, 42, 0.10), transparent 62%),
        radial-gradient(880px 620px at 50% 108%, rgba(46, 125, 79, 0.12), transparent 60%);
}

/* ---- Stage -------------------------------------------------------------- */
.page-mlb-team-picker-wheel .mlb-stage { position: relative; max-width: 600px; margin: 0 auto; }
.page-mlb-team-picker-wheel .mlb-stage-wrap { position: relative; }
.page-mlb-team-picker-wheel #mlbStage { display: block; }
.page-mlb-team-picker-wheel .mlb-svg {
    width: 100%; height: auto; display: block; max-height: 72vh; border-radius: 16px;
    filter: drop-shadow(0 14px 34px rgba(8, 16, 26, .55));
}
.page-mlb-team-picker-wheel .mlb-fx { pointer-events: none; }

/* ---- Bleacher sections, the wall and the batter ------------------------- */
.page-mlb-team-picker-wheel .mlb-tgt-t {
    fill: #f4efe4; font-family: var(--mlb-display); font-weight: 700; text-anchor: middle;
}
.page-mlb-team-picker-wheel .mlb-tgt { transition: opacity .4s ease; }
.page-mlb-team-picker-wheel .mlb-tgt-bg { transition: fill .25s ease; }
.page-mlb-team-picker-wheel .mlb-seats { transition: opacity .25s ease; }
.page-mlb-team-picker-wheel .mlb-tgt.is-hit .mlb-tgt-bg { filter: drop-shadow(0 0 8px rgba(209, 35, 42, .9)); }
/* the crowd stands up in the section the ball lands in */
.page-mlb-team-picker-wheel .mlb-tgt.is-hit .mlb-seats { opacity: .9; }
.page-mlb-team-picker-wheel .mlb-frame { transition: stroke-width .12s ease; }
.page-mlb-team-picker-wheel .mlb-call {
    fill: #f2c14e; font-family: var(--mlb-mono); font-weight: 800; font-size: 17px;
    letter-spacing: .2em; text-anchor: middle;
}
.page-mlb-team-picker-wheel .mlb-shooter { transition: opacity .3s ease; }
.page-mlb-team-picker-wheel .mlb-hero-t {
    fill: #ffffff; font-family: var(--mlb-display); font-weight: 700; text-anchor: middle;
    /* ⚠️ Several MLB colours are genuinely LIGHT (White Sox silver, Pirates gold,
       Brewers tan, Rays light blue) and those are facts, not choices. An outline
       keeps the winner's name legible on all 30 cards without faking a colour. */
    paint-order: stroke; stroke: rgba(10, 22, 34, .55); stroke-width: 3.5px; stroke-linejoin: round;
}
.page-mlb-team-picker-wheel .mlb-fx-spark { mix-blend-mode: screen; }

/* ⚠️ NO NAME PLATE on this engine — the hero section IS the on-stage winner
   surface, and the result bar below the stage is the only other one. */

/* ---- Start overlay ------------------------------------------------------ */
.page-mlb-team-picker-wheel .mlb-start-overlay {
    /* the clear grass between the pitcher (ends ~65%) and the batter (starts
       ~72%) — the one band nothing occupies at idle */
    position: absolute; left: 50%; top: 68%; z-index: 3;
    display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 999px;
    padding: .8rem 1.9rem; font-size: 1.02rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #fff; background: var(--mlb-grad); cursor: pointer; box-shadow: 0 12px 30px -8px rgba(8, 16, 26, .95);
    animation: mlbStartPulse 1.8s ease-in-out infinite;
}
.page-mlb-team-picker-wheel .mlb-start-overlay:hover { filter: brightness(1.08); }
.page-mlb-team-picker-wheel .mlb-start-overlay[hidden] { display: none; }
@keyframes mlbStartPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

.page-mlb-team-picker-wheel .mlb-count { text-align: center; font-size: .9rem; color: var(--mlb-muted); margin: .7rem 0 .25rem; }
.page-mlb-team-picker-wheel .mlb-count.is-warn { color: var(--mlb-accent); font-weight: 700; }
.page-mlb-team-picker-wheel .mlb-effects { display: flex; gap: 1.2rem; justify-content: center; margin-top: .5rem; flex-wrap: wrap; }
.page-mlb-team-picker-wheel .mlb-effects label { font-size: .85rem; color: var(--mlb-muted); display: inline-flex; align-items: center; gap: .35rem; }

/* ---- Result bar --------------------------------------------------------- */
.page-mlb-team-picker-wheel .wsp-result {
    --wsp-result-accent: var(--mlb-primary);
    --wsp-result-grad: var(--mlb-grad);
    --wsp-result-btn-ink: #ffffff;
    --wsp-result-plate: var(--mlb-plate);
    --wsp-result-display: var(--mlb-display);
    --wsp-result-tint: linear-gradient(135deg, rgba(209, 35, 42, .12), rgba(18, 47, 75, .10));
}

/* ---- Sliders ------------------------------------------------------------ */
.page-mlb-team-picker-wheel .mlb-speed { margin: .9rem auto .2rem; max-width: 420px; }
.page-mlb-team-picker-wheel .mlb-speed > label {
    display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600;
    color: var(--mlb-muted); margin-bottom: .4rem;
}
.page-mlb-team-picker-wheel .mlb-speed-val { margin-left: auto; font-weight: 800; color: var(--mlb-primary); font-variant-numeric: tabular-nums; }
.page-mlb-team-picker-wheel .mlb-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
    background: rgba(120, 120, 120, .25); outline: none; cursor: pointer;
}
.page-mlb-team-picker-wheel .mlb-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: var(--mlb-grad); border: 2px solid #fff; box-shadow: 0 2px 6px -1px rgba(8, 16, 26, .8);
}
.page-mlb-team-picker-wheel .mlb-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #122f4b; border: 2px solid #fff;
}
.page-mlb-team-picker-wheel .mlb-range-ends {
    display: flex; justify-content: space-between; font-size: .72rem; color: var(--mlb-muted);
    opacity: .75; margin-top: .25rem;
}

/* ---- Winner reveal ------------------------------------------------------ */
.page-mlb-team-picker-wheel .mlb-modal-img,
.mlb-modal-img {
    width: 168px; height: 168px; display: inline-block; object-fit: contain;
    background: #eef1f6; border-radius: 12px; padding: 14px;
    box-shadow: inset 0 0 0 3px rgba(18, 47, 75, .5);
}
.mlb-modal-ink {
    width: 168px; height: 168px; display: inline-block;
    background: #eef1f6; border-radius: 12px; padding: 22px;
    box-shadow: inset 0 0 0 3px rgba(18, 47, 75, .5);
}
.mlb-modal-ink svg { width: 100%; height: 100%; display: block; }
.page-mlb-team-picker-wheel #winnerName {
    font-family: var(--mlb-display); font-weight: 700; letter-spacing: .01em; font-size: 2rem;
}
.page-mlb-team-picker-wheel h1 { letter-spacing: .01em; }

/* ---- Team chooser (settings) — text pills, no logos --------------------- */
.page-mlb-team-picker-wheel .mlb-item-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.page-mlb-team-picker-wheel .mlb-chip {
    --chip-c: #122f4b; position: relative;
    border: 2px solid var(--mlb-border); background: var(--mlb-surface); border-radius: 999px;
    padding: .34rem .74rem; cursor: pointer; opacity: .5;
    transition: transform .1s ease, border-color .1s ease, opacity .1s ease;
}
.page-mlb-team-picker-wheel .mlb-chip-t { font-size: .78rem; font-weight: 700; color: var(--mlb-ink); }
.page-mlb-team-picker-wheel .mlb-chip:hover { transform: translateY(-1px); border-color: var(--chip-c); }
.page-mlb-team-picker-wheel .mlb-chip.is-on {
    opacity: 1; border-color: var(--chip-c);
    box-shadow: inset 3px 0 0 var(--chip-c), 0 4px 10px -8px var(--chip-c);
}
.page-mlb-team-picker-wheel .mlb-chip.is-custom { opacity: 1; border-style: dashed; border-color: var(--chip-c); }
.page-mlb-team-picker-wheel .mlb-chip-x {
    position: absolute; top: -6px; right: -4px; width: 17px; height: 17px; border-radius: 50%;
    background: var(--mlb-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 17px; text-align: center;
}
.page-mlb-team-picker-wheel .mlb-custom-row { display: flex; gap: .4rem; margin-top: .7rem; }
.page-mlb-team-picker-wheel .mlb-custom-row input {
    flex: 1 1 auto; border: 1px solid var(--mlb-border); border-radius: 10px; padding: .5rem .7rem; font-size: .9rem;
    background: var(--mlb-surface); color: var(--mlb-ink);
}
.page-mlb-team-picker-wheel .mlb-custom-row button { border: 0; border-radius: 10px; padding: .5rem .9rem; font-weight: 700; color: #fff; background: var(--mlb-grad); cursor: pointer; }

/* ---- SEO content section ------------------------------------------------
   Colour + accents ONLY. Type scale comes from .content-guide on the wrapper. */
.page-mlb-team-picker-wheel .mlb-content {
    color: var(--mlb-ink);
    background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
    padding: 3.5rem 0 3.75rem; margin-top: 1rem;
    border-top: 1px solid var(--mlb-border);
}
body[data-theme].page-mlb-team-picker-wheel .mlb-content { background: var(--theme-bg); }
.page-mlb-team-picker-wheel .mlb-inner { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
.page-mlb-team-picker-wheel .mlb-content h2,
.page-mlb-team-picker-wheel .mlb-content h3 { color: var(--mlb-ink); }
.page-mlb-team-picker-wheel .mlb-content p,
.page-mlb-team-picker-wheel .mlb-content li { color: var(--mlb-muted); }
.page-mlb-team-picker-wheel .mlb-content strong { color: var(--mlb-ink); }
.page-mlb-team-picker-wheel .mlb-content a { color: var(--mlb-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.page-mlb-team-picker-wheel .mlb-content a:hover { color: #0a1f34; }

.page-mlb-team-picker-wheel .mlb-kicker {
    display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; background: var(--mlb-grad); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .85rem;
}
.page-mlb-team-picker-wheel .mlb-lead { font-size: 1.2rem; line-height: 1.7; color: var(--mlb-ink); }
.page-mlb-team-picker-wheel .mlb-section { margin-top: 3rem; }
.page-mlb-team-picker-wheel .mlb-list { margin: .4rem 0 0; padding-left: 1.15rem; }

/* ---- Signature section shape: THE BASE PATH — the four steps standing on the
   four bases, read home → first → second → third. Neither the Premier League
   page's rail DOWN nor the NFL page's markers ACROSS, so three sibling pages on
   one engine never read as the same template. --------------------------- */
.page-mlb-team-picker-wheel .mlb-diamond {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto);
    gap: 1rem .9rem; margin: 2.2rem auto 0; max-width: 760px;
}
.page-mlb-team-picker-wheel .mlb-base {
    position: relative; text-align: center;
    background: var(--mlb-surface); border: 1px solid var(--mlb-border);
    border-radius: 12px; padding: 2rem .85rem 1rem;
}
.page-mlb-team-picker-wheel .mlb-base:nth-child(1) { grid-area: 3 / 2 / 4 / 3; border-bottom: 3px solid var(--mlb-accent); }
.page-mlb-team-picker-wheel .mlb-base:nth-child(2) { grid-area: 2 / 3 / 3 / 4; border-bottom: 3px solid var(--mlb-primary); }
.page-mlb-team-picker-wheel .mlb-base:nth-child(3) { grid-area: 1 / 2 / 2 / 3; border-bottom: 3px solid var(--mlb-primary); }
.page-mlb-team-picker-wheel .mlb-base:nth-child(4) { grid-area: 2 / 1 / 3 / 2; border-bottom: 3px solid var(--mlb-primary); }
/* the base itself: a white square stood on its corner */
.page-mlb-team-picker-wheel .mlb-base-n {
    position: absolute; top: -1rem; left: 50%;
    width: 2rem; height: 2rem; transform: translateX(-50%) rotate(45deg);
    background: var(--mlb-grad); border-radius: 4px; box-shadow: 0 4px 12px -6px rgba(18, 47, 75, .9);
}
.page-mlb-team-picker-wheel .mlb-base-n span {
    display: block; transform: rotate(-45deg); line-height: 2rem;
    font-family: var(--mlb-mono); font-weight: 800; font-size: .74rem; color: #fff;
}
.page-mlb-team-picker-wheel .mlb-base h3 { margin: 0 0 .3rem !important; font-size: .98rem !important; }
.page-mlb-team-picker-wheel .mlb-base p { margin: 0; font-size: .88rem; }

/* signature asset — the 30-row league / division / city table */
.page-mlb-team-picker-wheel .mlb-table-wrap { overflow-x: auto; margin-top: 1.4rem; }
.page-mlb-team-picker-wheel .mlb-ctab { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .95rem; }
.page-mlb-team-picker-wheel .mlb-ctab thead th {
    text-align: left; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 800;
    color: #fff; background: var(--mlb-primary); padding: .7rem 1rem;
}
.page-mlb-team-picker-wheel .mlb-ctab tbody td { padding: .62rem 1rem; border-bottom: 1px solid var(--mlb-border); vertical-align: top; }
.page-mlb-team-picker-wheel .mlb-ctab tbody tr:nth-child(even) { background: rgba(18, 47, 75, .05); }
.page-mlb-team-picker-wheel .mlb-ctab tbody td:first-child { font-weight: 700; color: var(--mlb-ink); white-space: nowrap; }

.page-mlb-team-picker-wheel .mlb-callout {
    margin-top: 1.4rem; border-left: 4px solid var(--mlb-accent); border-radius: 0 12px 12px 0;
    background: rgba(209, 35, 42, .07); padding: 1rem 1.15rem;
}
.page-mlb-team-picker-wheel .mlb-callout p { margin: 0; }

.page-mlb-team-picker-wheel .mlb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.page-mlb-team-picker-wheel .mlb-pair-card {
    background: var(--mlb-surface); border: 1px solid var(--mlb-border); border-radius: 12px;
    padding: 1rem 1.1rem; border-top: 3px solid var(--mlb-primary);
}
.page-mlb-team-picker-wheel .mlb-pair-card h3 { margin-top: 0 !important; font-size: 1.02rem !important; }
.page-mlb-team-picker-wheel .mlb-pair-card p:last-child { margin-bottom: 0; font-size: .9rem; }

@media (max-width: 767.98px) {
    /* the diamond collapses to a straight run home → first → second → third */
    .page-mlb-team-picker-wheel .mlb-diamond { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.8rem; }
    .page-mlb-team-picker-wheel .mlb-base:nth-child(1),
    .page-mlb-team-picker-wheel .mlb-base:nth-child(2),
    .page-mlb-team-picker-wheel .mlb-base:nth-child(3),
    .page-mlb-team-picker-wheel .mlb-base:nth-child(4) { grid-area: auto; }
    .page-mlb-team-picker-wheel .mlb-pair { grid-template-columns: 1fr; }
    .page-mlb-team-picker-wheel .mlb-content { padding: 2.5rem 0 2.75rem; }
}

/* ---- High contrast — THIS BLOCK MUST STAY LAST IN THE FILE ---------------
   HC sets `--theme-muted: #1f2937`, correct on its white cards and 1.4:1 on its
   black body. Light group first, then restore dark ink inside the components HC
   renders WHITE. Equal specificity, so SOURCE ORDER decides.
   ⚠️ Anything inside .card / .accordion-item / a Bootstrap .table is already
   handled by themes.css !important rules — deliberately not touched here. */
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-content p,
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-content li,
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-lead,
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-callout p,
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-callout strong {
    color: rgba(255, 255, 255, .84);
}
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-base h3,
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-base p,
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-pair-card h3,
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-pair-card p,
body[data-theme="high-contrast"].page-mlb-team-picker-wheel .mlb-pair-card strong {
    color: #1f2937;
}