/* ==========================================================================
   NFL Team Picker — the Scoring Shot (Sports)
   Third page on scoring-shot-engine.js, sport 'american-football'. Every team
   is an END ZONE; the quarterback drops back, a few passes fall incomplete,
   then one is caught. Same engine, fairness, grid and phases as the NBA and
   Premier League pages — only the target, the figure and the ball change.
   ⚠️ 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, HELMET MARKS OR WORDMARKS. Each end zone carries the team
   NAME stretched across it on the team colour — which is how a real end zone is
   painted, and a colour is a fact, not a protected mark.
   ========================================================================== */
.page-nfl-team-picker-wheel {
    --nfl-primary: #8a1538;
    --nfl-accent: #f6a01a;
    --nfl-grad: linear-gradient(135deg, #f6a01a, #8a1538);
    --nfl-ink: var(--theme-text, #1f2430);
    /* ⚠️ --theme-muted, NOT --theme-text-muted (undefined). */
    --nfl-muted: var(--theme-muted, #6b7280);
    --nfl-surface: var(--theme-surface, #ffffff);
    --nfl-border: var(--theme-border, #e5e7eb);
    --nfl-display: 'Georgia', 'Times New Roman', serif;
    --nfl-mono: 'DejaVu Sans Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
    --nfl-plate: #f4ece6;
}

/* ---- Ambient backdrop --------------------------------------------------- */
.page-nfl-team-picker-wheel::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(1040px 560px at 8% -6%, rgba(138, 21, 56, 0.18), transparent 60%),
        radial-gradient(920px 520px at 94% 2%, rgba(246, 160, 26, 0.12), transparent 62%),
        radial-gradient(880px 620px at 50% 108%, rgba(11, 22, 34, 0.14), transparent 60%);
}

/* ---- Stage -------------------------------------------------------------- */
.page-nfl-team-picker-wheel .nfl-stage { position: relative; max-width: 600px; margin: 0 auto; }
.page-nfl-team-picker-wheel .nfl-stage-wrap { position: relative; }
.page-nfl-team-picker-wheel #nflStage { display: block; }
.page-nfl-team-picker-wheel .nfl-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-nfl-team-picker-wheel .nfl-fx { pointer-events: none; }

/* ---- End zones, pylons, goalposts and the passer ------------------------ */
.page-nfl-team-picker-wheel .nfl-tgt-t {
    fill: #f4efe4; font-family: var(--nfl-display); font-weight: 700; text-anchor: middle;
}
/* the painted end-zone lettering: block caps, and the engine stretches it to
   the width with textLength — so nothing is ever truncated on the field */
.page-nfl-team-picker-wheel .nfl-ez-t { font-weight: 800; letter-spacing: 0; }
.page-nfl-team-picker-wheel .nfl-tgt { transition: opacity .4s ease; }
.page-nfl-team-picker-wheel .nfl-tgt-bg { transition: fill .25s ease; }
.page-nfl-team-picker-wheel .nfl-paint { transition: opacity .25s ease; }
.page-nfl-team-picker-wheel .nfl-tgt.is-hit .nfl-tgt-bg { filter: drop-shadow(0 0 8px rgba(246, 160, 26, .9)); }
.page-nfl-team-picker-wheel .nfl-tgt.is-hit .nfl-paint { opacity: .16; }
.page-nfl-team-picker-wheel .nfl-frame { transition: stroke-width .12s ease; }
.page-nfl-team-picker-wheel .nfl-call {
    fill: #f6a01a; font-family: var(--nfl-mono); font-weight: 800; font-size: 17px;
    letter-spacing: .2em; text-anchor: middle;
}
.page-nfl-team-picker-wheel .nfl-shooter { transition: opacity .3s ease; }
.page-nfl-team-picker-wheel .nfl-hero-t {
    fill: #ffffff; font-family: var(--nfl-display); font-weight: 700; text-anchor: middle;
    /* ⚠️ Several NFL colours are genuinely LIGHT (Steelers gold, Raiders silver,
       Saints old gold, Titans light blue) and those are facts, not choices. An
       outline behind the white keeps the winner's name legible on every one of
       the 32 cards without faking any team's colour. */
    paint-order: stroke; stroke: rgba(11, 22, 34, .55); stroke-width: 3.5px; stroke-linejoin: round;
}
.page-nfl-team-picker-wheel .nfl-fx-spark { mix-blend-mode: screen; }

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

/* ---- Start overlay ------------------------------------------------------ */
.page-nfl-team-picker-wheel .nfl-start-overlay {
    /* the empty corridor between the last row of end zones (~47%) and the
       quarterback (~79%) — the one band nothing occupies at idle */
    position: absolute; left: 50%; top: 62%; 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(--nfl-grad); cursor: pointer; box-shadow: 0 12px 30px -8px rgba(8, 16, 26, .95);
    animation: nflStartPulse 1.8s ease-in-out infinite;
}
.page-nfl-team-picker-wheel .nfl-start-overlay:hover { filter: brightness(1.08); }
.page-nfl-team-picker-wheel .nfl-start-overlay[hidden] { display: none; }
@keyframes nflStartPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}

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

/* ---- Result bar --------------------------------------------------------- */
.page-nfl-team-picker-wheel .wsp-result {
    --wsp-result-accent: var(--nfl-primary);
    --wsp-result-grad: var(--nfl-grad);
    --wsp-result-btn-ink: #ffffff;
    --wsp-result-plate: var(--nfl-plate);
    --wsp-result-display: var(--nfl-display);
    --wsp-result-tint: linear-gradient(135deg, rgba(246, 160, 26, .14), rgba(138, 21, 56, .10));
}

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

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

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

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

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

/* ---- Signature section shape: the CHAIN-GANG DOWN MARKERS — four numbered
   markers standing in a row, the way the chain crew posts the down. Deliberately
   ACROSS rather than the Premier League page's numbered rail DOWN, so the two
   sibling pages on the same engine don't read as one template twice. -------- */
.page-nfl-team-picker-wheel .nfl-downs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.5rem;
}
.page-nfl-team-picker-wheel .nfl-down {
    position: relative; text-align: center;
    background: var(--nfl-surface); border: 1px solid var(--nfl-border);
    border-radius: 12px; padding: 2.1rem .8rem 1rem;
    border-bottom: 3px solid var(--nfl-primary);
}
.page-nfl-team-picker-wheel .nfl-down-n {
    position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%);
    width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--nfl-mono); font-weight: 800; font-size: .95rem;
    color: #fff; background: var(--nfl-grad); box-shadow: 0 4px 12px -6px rgba(138, 21, 56, .9);
}
.page-nfl-team-picker-wheel .nfl-down h3 { margin: 0 0 .3rem !important; font-size: .98rem !important; }
.page-nfl-team-picker-wheel .nfl-down p { margin: 0; font-size: .88rem; }

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

.page-nfl-team-picker-wheel .nfl-callout {
    margin-top: 1.4rem; border-left: 4px solid var(--nfl-accent); border-radius: 0 12px 12px 0;
    background: rgba(246, 160, 26, .08); padding: 1rem 1.15rem;
}
.page-nfl-team-picker-wheel .nfl-callout p { margin: 0; }

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

@media (max-width: 767.98px) {
    .page-nfl-team-picker-wheel .nfl-downs { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
    .page-nfl-team-picker-wheel .nfl-pair { grid-template-columns: 1fr; }
    .page-nfl-team-picker-wheel .nfl-content { padding: 2.5rem 0 2.75rem; }
}
@media (max-width: 419.98px) {
    .page-nfl-team-picker-wheel .nfl-downs { grid-template-columns: 1fr; }
}

/* ---- High contrast — THIS BLOCK MUST STAY LAST IN THE FILE ---------------
   HC sets `--theme-muted: #1f2937`, which is correct on its white cards and
   1.4:1 on its black body — so body copy that consumes --nfl-muted goes almost
   invisible. Light group first, then restore dark ink inside the components HC
   renders WHITE. The two groups are 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-nfl-team-picker-wheel .nfl-content p,
body[data-theme="high-contrast"].page-nfl-team-picker-wheel .nfl-content li,
body[data-theme="high-contrast"].page-nfl-team-picker-wheel .nfl-lead,
body[data-theme="high-contrast"].page-nfl-team-picker-wheel .nfl-callout p,
body[data-theme="high-contrast"].page-nfl-team-picker-wheel .nfl-callout strong {
    color: rgba(255, 255, 255, .84);
}
/* the down markers and the use-case cards ARE white surfaces on HC */
body[data-theme="high-contrast"].page-nfl-team-picker-wheel .nfl-down h3,
body[data-theme="high-contrast"].page-nfl-team-picker-wheel .nfl-down p,
body[data-theme="high-contrast"].page-nfl-team-picker-wheel .nfl-pair-card h3,
body[data-theme="high-contrast"].page-nfl-team-picker-wheel .nfl-pair-card p,
body[data-theme="high-contrast"].page-nfl-team-picker-wheel .nfl-pair-card strong {
    color: #1f2937;
}