/* ============================================================
   games-card-redesign D1a — restyled per-game card body
   Namespaced .dpe-* classes (port of the approved mockup) so they
   never collide with the legacy .game-card rules above. Existing
   functional hooks (.team-pick-btn / .selected / .spread-info /
   .confidence-select / .mode-stats / .team-display) are untouched
   by JS; this block only restyles them + adds new visual zones.
   ============================================================ */

/* META STRIP — one muted line (status chip + optional star) */
.dpe-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    color: #6b7280;
    font-size: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .dpe-meta { color: #9aa6b2; border-bottom-color: rgba(255, 255, 255, 0.08); }
/* On narrow cards keep the WHOLE header on ONE line (network · venue · time):
   no wrap, the venue truncates with an ellipsis, the time chip holds its size
   at the right. Font shrinks further below 430px so it never spills to 2 lines. */
@media (max-width: 640px) {
    .dpe-meta {
        font-size: 10px;
        gap: 4px 6px;
        padding: 7px 9px;
        flex-wrap: nowrap;          /* network · venue · time stay on ONE row */
    }
    .dpe-meta .dpe-venue {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;               /* allow the venue to shrink/truncate */
    }
    .dpe-meta .dpe-status {
        font-size: 9px;
        padding: 2px 6px;
        flex: 0 0 auto;             /* time keeps its size, pinned to the right */
    }
}
@media (max-width: 430px) {
    .dpe-meta { font-size: 9px; gap: 3px 4px; padding: 6px 7px; }
    .dpe-meta .dpe-status { font-size: 8px; padding: 2px 5px; }
}
.dpe-meta .dpe-dot { color: #9ca3af; }
.dpe-meta .dpe-net { font-weight: 600; color: inherit; }
.dpe-meta .dpe-venue { white-space: normal; line-height: 1.25; }
.dpe-meta .dpe-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e5f4ec;
    color: #0a7d4f;
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
}
.dark .dpe-meta .dpe-status { background: #1e2a2d; color: #6ee7b7; }
.dpe-meta .dpe-status.dpe-live { background: rgba(239, 68, 68, 0.16); color: #ef4444; }
.dpe-meta .dpe-status.dpe-final { background: #eef0f1; color: #6b7280; }
.dark .dpe-meta .dpe-status.dpe-final { background: #202a2d; color: #9aa6b2; }
.dpe-meta .dpe-status.dpe-locked { background: #fdebd0; color: #b45309; }
.dark .dpe-meta .dpe-status.dpe-locked { background: #3a3320; color: #f59e0b; }
.dpe-star { color: #cbd5e1; font-size: 14px; line-height: 1; }
.dpe-star.on { color: #f59e0b; }
.dpe-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ef4444; display: inline-block;
    animation: dpePulse 1.4s infinite;
}
@keyframes dpePulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.dpe-closing { color: #ea580c; font-weight: 700; font-size: 11px; }
/* league-aware lock line (PickLockingService::getLockStatusMessage) */
.dpe-lockmsg { color: #b45309; font-weight: 600; font-size: 11px; white-space: nowrap; }
.dark .dpe-lockmsg { color: #f59e0b; }

/* MATCHUP ZONE — 3-col grid: away | center | home */
.dpe-matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
}
.dpe-team { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dpe-team.home { align-items: flex-end; text-align: right; }
.dpe-idrow { display: flex; align-items: center; gap: 3px; }
.dpe-team.home .dpe-idrow { flex-direction: row-reverse; }
.dpe-teampill {
    padding: 3px 9px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .5px;
    flex: none;
    line-height: 1.3;
}
.dpe-fav { font-size: 13px; line-height: 1; }
.dpe-nick {
    color: #6b7280;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}
.dark .dpe-nick { color: #9aa6b2; }
.dpe-center {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; min-width: 48px;
}
.dpe-at { color: #9ca3af; font-size: 18px; font-weight: 600; }
.dpe-score { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: #374151; }
.dark .dpe-score { color: #e8eef0; }
.dpe-score .dpe-w { color: #10b981; }
.dpe-score .dpe-l { color: #9ca3af; }
.dpe-clk { font-size: 10px; color: #9ca3af; }
/* ≤900px: the final score + dash were too big and overlapped on 2-up cards —
   keep the smaller size all the way up so it fits better across screen sizes. */
@media (max-width: 900px) {
    .dpe-score { font-size: 16px; letter-spacing: 0; }
    .dpe-at { font-size: 15px; }
    .dpe-center { min-width: 38px; }
}
/* ≤500px: drop the 💰 favorite marker on started (final/locked) cards. */
@media (max-width: 500px) {
    .dpe-team.team-display .dpe-fav { display: none; }
}

/* CONSENSUS BAR */
.dpe-consensus { padding: 4px 12px 2px; }
.dpe-cbar {
    display: flex; height: 8px; border-radius: 6px;
    overflow: hidden; background: #e5e7eb;
}
.dark .dpe-cbar { background: #0e1415; }
.dpe-cbar .dpe-h { background: #10b981; }
.dpe-cbar .dpe-a { background: #94a3b8; }
.dpe-clabels {
    display: flex; justify-content: space-between;
    font-size: 11px; color: #6b7280; margin-top: 5px;
}
.dark .dpe-clabels { color: #9aa6b2; }
.dpe-clabels .dpe-cnt { color: #9ca3af; }

/* RECORDS / STREAKS */
.dpe-records {
    display: flex; justify-content: space-between;
    padding: 4px 12px 8px; font-size: 12px; color: #6b7280;
}
.dark .dpe-records { color: #9aa6b2; }
.dpe-records .dpe-strk-w { color: #10b981; font-weight: 600; }
.dpe-records .dpe-strk-l { color: #c98b8b; font-weight: 600; }

/* PICK CONTROLS ROW — pick buttons + confidence on ONE wrapping row
   (mirrors the mockup .controls). The confidence section sits inline
   in the same row; switchMode toggles its visibility. */
.dpe-controls {
    display: flex;
    flex-wrap: wrap;            /* confidence drops to its OWN full-width row */
    align-items: center;
    gap: 5px;
    padding: 6px 8px;           /* tighter — keeps cards from getting over-wide */
}
.dpe-controls .dpe-pickbtn { flex: 1 1 0; min-width: 0; }   /* two team buttons share row 1 */
/* Confidence selector + meter + feedback span the FULL pick row on their own
   line below the team buttons (was crammed inline, too wide on small screens). */
.dpe-controls .pick-mode-section[data-mode="confidence"] { flex: 1 1 100%; min-width: 0; }
.dpe-controls .pick-mode-section[data-mode="confidence"] > .flex { margin: 0; width: 100%; }
.dpe-controls .pick-mode-section[data-mode="confidence"] .confidence-select {
    padding: 6px 28px 6px 10px !important;
    width: 100%;
    max-width: none;
    font-size: 13px;
    border-radius: 9px;
    background-position: right 8px center;
    box-shadow: none;
}

/* PICK CONTROLS — abbr-only pick buttons (NO pill/nick/💰 inside).
   Identity lives in the matchup zone above; the button is just the
   abbreviation, painted in the team color when .selected.
   Keep .helmet-pick-btn / .team-pick-btn / .selected hooks. */
/* Default = NEUTRAL outline button (transparent fill, muted border) so it
   never reads as "selected". Selecting paints it the team color AND adds
   a bright accent ring + ✓ so even dark team colors are unmistakably on. */
.game-card .helmet-pick-btn.dpe-pickbtn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 44px;            /* touch-target floor (project non-negotiable) */
    padding: 4px 6px !important; /* compact — was bulky */
    border-radius: 9px;
    border: 1.5px solid #cbd5e1;
    background: #eef1f4;         /* SOLID neutral fill — reads as a button, not transparent */
    box-shadow: none;
    backdrop-filter: none;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .3px;
    color: #374151;
}
.dark .game-card .helmet-pick-btn.dpe-pickbtn { background: #1b2426; border-color: #33424a; color: #e8eef0; }
.game-card .helmet-pick-btn.dpe-pickbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    background: #e2e8f0;
}
.dark .game-card .helmet-pick-btn.dpe-pickbtn:hover { background: #243036; }
/* abbr label inside the button */
.game-card .helmet-pick-btn.dpe-pickbtn .dpe-btn-abbr {
    font-weight: 800; font-size: 13px; letter-spacing: .3px;
}
/* Selected pick renders in the team color (set inline via getTeamColor),
   with a bright accent ring so dark colors still read as selected. */
/* Selected = LIGHT button (both modes, so it stands out against the card and
   dark team colors never conflict) + a THICK team-color border for identity +
   an inset edge so even light team colors stay visible + a ✓. */
.game-card .helmet-pick-btn.dpe-pickbtn.selected {
    background: #eef2f6 !important;
    border: 3px solid var(--dpe-team-color, #10b981) !important;
    color: #111827 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.18);
    transform: none;
    animation: none;
}
.dark .game-card .helmet-pick-btn.dpe-pickbtn.selected { background: #e2e8f0 !important; color: #111827 !important; }
.game-card .helmet-pick-btn.dpe-pickbtn.selected .dpe-btn-abbr { color: #111827 !important; }
/* ✓ badge — dark so it reads on the light selected background, any team */
.game-card .helmet-pick-btn.dpe-pickbtn.selected::after {
    content: '✓';
    position: absolute;
    top: 3px;
    right: 6px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    color: #111827;
}
/* .spread-info carries the per-team ± line. switchMode force-shows every
   .spread-info (display:block) AND updates each .helmet-pick-btn[data-mode] to
   the active mode, so we gate visibility to spread mode via the data-mode hook
   (no JS change). Hidden in every other mode so it never clutters the button. */
.game-card .helmet-pick-btn.dpe-pickbtn .spread-info {
    display: none !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-top: 3px;
    color: #047857;
}
.dark .game-card .helmet-pick-btn.dpe-pickbtn .spread-info { color: #6ee7b7; }
.game-card .helmet-pick-btn.dpe-pickbtn[data-mode="spread"] .spread-info:not(:empty) {
    display: block !important;
}
/* Selected button now has a LIGHT bg (team color moved to the border), so the
   spread line must be DARK to match the abbreviation — white was unreadable. */
.game-card .helmet-pick-btn.dpe-pickbtn.selected[data-mode="spread"] .spread-info { color: #111827; }
.dark .game-card .helmet-pick-btn.dpe-pickbtn.selected[data-mode="spread"] .spread-info { color: #111827; }

/* ---- SURVIVOR: used-team disabling (survivor-redesign-restore-001) ----
   In survivor mode a team used in a PRIOR week of the season can't be reused.
   JS adds .dpe-used + disabled to that team's pick button and injects a small
   "Used W{n}" badge (.dpe-used-badge). Grayed, not-allowed, non-interactive —
   but the markup stays so the 44px button footprint is unchanged. The current
   week's survivor pick is exempt (it keeps .selected styling above). */
.game-card .helmet-pick-btn.dpe-pickbtn.dpe-used,
.game-card .helmet-pick-btn.dpe-pickbtn[disabled].dpe-used {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
    color: #9ca3af !important;
    /* The greyed "used" look comes from the explicit grey bg + grey text above
       — NOT opacity/grayscale, which would also mute the team-colored
       "Used W{n}" badge (a child can't escape a parent's opacity/filter). */
    cursor: not-allowed !important;
    pointer-events: none;        /* belt-and-suspenders with JS click guard */
    box-shadow: none !important;
    transform: none !important;
}
.dark .game-card .helmet-pick-btn.dpe-pickbtn.dpe-used {
    background: #1a1f22 !important;
    border-color: #2a3438 !important;
    color: #6b7480 !important;
}
.game-card .helmet-pick-btn.dpe-pickbtn.dpe-used:hover {
    background: #e5e7eb !important;
    transform: none !important;
    box-shadow: none !important;
}
.dark .game-card .helmet-pick-btn.dpe-pickbtn.dpe-used:hover { background: #1a1f22 !important; }
.game-card .helmet-pick-btn.dpe-pickbtn.dpe-used .dpe-btn-abbr { color: inherit !important; }
/* "Used W{n}" badge — small pill in the button's top-right corner. */
.game-card .helmet-pick-btn.dpe-pickbtn.dpe-used .dpe-used-badge {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .2px;
    padding: 2px 4px;
    border-radius: 6px;
    background: #ffffff;
    /* Text in the team's color (the same --dpe-team-color the pick button
       carries) so the badge identifies which team it was. */
    color: var(--dpe-team-color, #374151);
    border: 1px solid var(--dpe-team-color, #d1d5db);
    pointer-events: none;
    white-space: nowrap;
}
.dark .game-card .helmet-pick-btn.dpe-pickbtn.dpe-used .dpe-used-badge {
    background: #ffffff;
    color: var(--dpe-team-color, #e5e7eb);
    border-color: var(--dpe-team-color, #4b5563);
}

/* Defensive fallback (survivor-used-team-scoping-001): the inline JS adds
   `.dpe-used` directly to `.team-pick-btn[data-team-id]`. The selectors above
   require the full `.game-card .helmet-pick-btn.dpe-pickbtn` chain — true for
   the current pick-card.php markup, but if a future markup change drops one of
   those classes the used styling would silently disappear. Key the core
   used-state + badge on the exact class the JS applies so the visual contract
   survives markup churn. Lower-specificity than the chained rules above, so it
   only fills the gap when those don't match. */
.team-pick-btn.dpe-used {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #9ca3af;
    /* No opacity/grayscale — see the chained rule above: the explicit greys
       carry the "used" look and let the team-colored badge read true. */
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}
.dark .team-pick-btn.dpe-used {
    background: #1a1f22;
    border-color: #2a3438;
    color: #6b7480;
}
.team-pick-btn.dpe-used .dpe-used-badge {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .2px;
    padding: 2px 4px;
    border-radius: 6px;
    background: #ffffff;
    color: var(--dpe-team-color, #374151);
    border: 1px solid var(--dpe-team-color, #d1d5db);
    pointer-events: none;
    white-space: nowrap;
}
.dark .team-pick-btn.dpe-used .dpe-used-badge {
    background: #ffffff;
    color: var(--dpe-team-color, #e5e7eb);
    border-color: var(--dpe-team-color, #4b5563);
}

/* ---- SURVIVOR: status banner (survivor-redesign-restore-001) ----
   Rendered hidden in the markup at the top of the games area; JS shows + fills
   it only in survivor mode (statusMessage from SurvivorPickService). */
.dpe-survivor-banner {
    margin: 0 auto 10px;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    line-height: 1.3;
    border: 1.5px solid transparent;
}
.dpe-survivor-banner--active {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}
.dark .dpe-survivor-banner--active {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10b981;
    color: #6ee7b7;
}
.dpe-survivor-banner--eliminated {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}
.dark .dpe-survivor-banner--eliminated {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #fca5a5;
}

/* MERGED PICK HIGHLIGHT — updatePickHighlighting() adds Tailwind
   border/bg classes to the matchup .team-display divs (final/locked).
   Port the highlight onto the pill layout so the user's pick is
   visible on the new card. */
.dpe-team.team-display {
    position: relative;
    border-radius: 10px;
    padding: 6px 8px;
    border: 2px solid transparent;
    transition: background .2s ease, border-color .2s ease;
    /* The win/loss result box must hug its content (pill + 💰 + nick) and sit
       at the OUTER edge of its 1fr grid track instead of stretching the full
       half-width into the center — the old full-width box reached the score and
       overlapped on narrow screens. fit-content + per-side justify-self keeps it
       tight to the edge so the gap to the 💰 favorite icon shrinks too. */
    width: fit-content;
    max-width: 100%;
}
.dpe-team.away.team-display { justify-self: start; }
.dpe-team.home.team-display { justify-self: end; }
.dpe-team.team-display.border-green-400 { border-color: #34d399 !important; background: rgba(16,185,129,.10); }
.dpe-team.team-display.border-red-400   { border-color: #f87171 !important; background: rgba(239,68,68,.10); }
.dpe-team.team-display.bg-green-50      { background: rgba(16,185,129,.10) !important; }
.dpe-team.team-display.bg-red-50        { background: rgba(239,68,68,.10) !important; }
.dpe-pick-tag {
    position: absolute;
    top: -8px;
    right: 4px;
    background: #10b981;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
}
.dpe-pick-tag.bg-red-500 { background: #ef4444; }
.dpe-team.home.team-display .dpe-pick-tag { right: auto; left: 4px; }

/* ============================================================
   games-card-redesign D1c — FULL CARD shell + per-state body.
   Everything below moved out of public/picks.php's inline <style>
   so the page carries ZERO card styling. The .dpe-card outer panel
   replaces the old Tailwind look-classes (bg-white rounded-2xl
   shadow-2xl ...) on the .game-card div; the body zones replace the
   inline Tailwind gradient wrappers. Polished, engaging look — not a
   flat panel — while matching the mockup's anatomy.
   ============================================================ */

/* ---- OUTER CARD PANEL (replaces Tailwind look-classes) ---- */
.game-card.dpe-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow .25s ease;
}
.dark .game-card.dpe-card {
    background: #1f2937;
    border-color: rgba(75, 85, 99, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* accent bar on hover (kept from legacy .game-card::before) */
.game-card.dpe-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}
.game-card.dpe-card:hover::before { opacity: 1; }
.game-card.dpe-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
}

/* ---- AI RECOMMENDATION STAR — REMOVED 2026-05-21 (user request).
   The floating pulsing ⭐ badge was redundant with the Insights recommendation
   headline card and overlapped the card meta. Markup removed in pick-card.php. */

/* ---- HIDDEN HOOK BAR (.game-points / .mode-points only) ---- */
.dpe-hooks { display: none !important; }

/* ---- FINAL BODY ---- */
.dpe-body-final {
    margin: 8px 8px 8px;
    padding: 8px 8px 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}
.dark .dpe-body-final { background: linear-gradient(135deg, #374151, #1f2937); }
.dpe-mypicks { margin-bottom: 4px; }
.dpe-mypicks-toggle {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    transition: color .2s ease;
}
.dark .dpe-mypicks-toggle { color: #d1d5db; }
.dpe-mypicks-toggle:hover { color: #111827; }
.dark .dpe-mypicks-toggle:hover { color: #f3f4f6; }
.dpe-mypicks-toggle .toggle-icon { color: #374151; }
.dark .dpe-mypicks-toggle .toggle-icon { color: #fff; }
.dpe-mypicks-list { margin-top: 2px; }
.dpe-mypick-row { line-height: 1.3; }

.dpe-community-final {
    padding-top: 4px;
    margin-top: 4px;
    border-top: 1px solid #e5e7eb;
}
.dark .dpe-community-final { border-top-color: #4b5563; }
.dpe-community-final-inner {
    font-size: 12px;
    color: #4b5563;
}
.dark .dpe-community-final-inner { color: #d1d5db; }
.dpe-community-final-inner .font-medium { margin-bottom: 2px; }

/* ---- LOCKED BODY ---- */
.dpe-body-locked { padding: 2px 8px 8px; }
.dpe-lockedpicks,
.dpe-lockedpicks-expandable {
    background: #f9fafb;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
}
.dark .dpe-lockedpicks,
.dark .dpe-lockedpicks-expandable { background: #1f2937; }
.dpe-lockedpicks .pick-mode-detail,
.dpe-lockedpicks-expandable .pick-mode-detail { margin-bottom: 4px; }
.dpe-nopicks {
    background: rgba(239, 68, 68, 0.08);
    border-radius: 8px;
    padding: 5px 8px;
    text-align: center;
}
.dark .dpe-nopicks { background: rgba(239, 68, 68, 0.16); }
.dpe-nopicks-title { font-size: 11px; font-weight: 600; color: #b91c1c; }
.dark .dpe-nopicks-title { color: #fca5a5; }
.dpe-nopicks-sub { font-size: 10px; color: #dc2626; }
.dark .dpe-nopicks-sub { color: #f87171; }
/* Tiebreaker predicted-vs-actual line (final/locked) — small, centered. */
.dpe-tb-predline { text-align: center; font-size: 11px; font-weight: 600; color: #92400e; margin-top: 6px; }
.dark .dpe-tb-predline { color: #fcd34d; }
.dpe-community-locked {
    margin-top: 8px;
    padding: 8px 8px 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}
.dark .dpe-community-locked { background: linear-gradient(135deg, #374151, #1f2937); }
.dpe-community-locked-inner {
    font-size: 12px;
    color: #4b5563;
    text-align: center;
}
.dark .dpe-community-locked-inner { color: #d1d5db; }

/* ---- TIEBREAKER CARD ---- */
.dpe-tb-wrap { margin-top: 16px; width: 100%; }
.game-card.dpe-card-tiebreaker {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 3px solid transparent;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: content-box, border-box;
    animation: dpeTiebreakerGlow 3s ease-in-out infinite;
}
.dark .game-card.dpe-card-tiebreaker {
    background-image: linear-gradient(#1f2937, #1f2937), linear-gradient(135deg, #667eea, #764ba2);
}
@keyframes dpeTiebreakerGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(102, 126, 234, 0.4); }
    50% { box-shadow: 0 0 45px rgba(118, 75, 162, 0.6); }
}
.dpe-tb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(90deg, #7c3aed, #2563eb);
    color: #fff;
}
.dpe-tb-header-title { margin: 0; font-size: 13px; font-weight: 600; color: #fde047; }
.dpe-tb-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fff;
}
.dpe-tb-badge-final  { background: #22c55e; }
.dpe-tb-badge-locked { background: #f97316; }
.dpe-tb-badge-open   { background: #6b7280; }

/* Compact tiebreaker box — was much taller than the other cards (16px pad,
   18px title, 112x56 input). Sized down to sit in line with a normal card. */
.dpe-tiebreaker-box {
    background: #ffffff;
    margin: 6px 10px 10px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #d8b4fe;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
}
.dark .dpe-tiebreaker-box { background: #1f2937; border-color: #7c3aed; }
.dpe-tiebreaker-head { text-align: center; margin-bottom: 2px; }
.dpe-tiebreaker-title { font-size: 13px; font-weight: 800; color: #6d28d9; margin: 0; }
.dark .dpe-tiebreaker-title { color: #c4b5fd; }
.dpe-tiebreaker-sub { font-size: 10px; color: #6b7280; margin: 1px 0 0; }
.dark .dpe-tiebreaker-sub { color: #9ca3af; }
.dpe-tiebreaker-inputwrap { display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.dpe-tiebreaker-input {
    width: 84px;
    height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    border-radius: 9px;
}
.dpe-tiebreaker-foot { text-align: center; font-size: 10px; color: #6b7280; margin-top: 6px; }
.dark .dpe-tiebreaker-foot { color: #9ca3af; }

/* tiebreaker finished/locked results */
.dpe-body-tb-final { padding: 0 12px 8px; }
.dpe-tb-resultshead {
    text-align: center;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border: 1px solid #d1d5db;
}
.dark .dpe-tb-resultshead { background: linear-gradient(135deg, #1f2937, #111827); border-color: #374151; }
.dpe-tb-resultshead-title { font-size: 13px; font-weight: 600; color: #111827; }
.dark .dpe-tb-resultshead-title { color: #fff; }
.dpe-tb-scoregrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}
.dpe-tb-scorecell {
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #d1d5db;
    background: #f9fafb;
}
.dark .dpe-tb-scorecell { background: #374151; border-color: #4b5563; }
.dpe-tb-scorecell.dpe-tb-win { background: rgba(16, 185, 129, 0.10); border-color: #34d399; }
.dark .dpe-tb-scorecell.dpe-tb-win { background: rgba(16, 185, 129, 0.18); border-color: #34d399; }
.dpe-tb-logo { width: 48px; height: 48px; margin: 0 auto 8px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
/* Tiebreaker result cell now uses the redesign's colored abbr pill (no logo). */
.dpe-tb-pill { display: inline-block; margin: 0 auto 8px; padding: 6px 12px; font-size: 14px; font-weight: 800; border-radius: 8px; letter-spacing: .5px; }
.dpe-tb-score { font-size: 22px; font-weight: 800; color: #374151; }
.dark .dpe-tb-score { color: #e5e7eb; }
.dpe-tb-scorecell.dpe-tb-win .dpe-tb-score { color: #047857; }
.dark .dpe-tb-scorecell.dpe-tb-win .dpe-tb-score { color: #6ee7b7; }
.dpe-tb-abbr { font-size: 13px; font-weight: 600; color: #4b5563; }
.dark .dpe-tb-abbr { color: #9ca3af; }
.dpe-tb-scorecell.dpe-tb-win .dpe-tb-abbr { color: #059669; }
.dark .dpe-tb-scorecell.dpe-tb-win .dpe-tb-abbr { color: #6ee7b7; }
.dpe-tb-winner { font-size: 11px; font-weight: 700; color: #059669; margin-top: 4px; }
.dark .dpe-tb-winner { color: #6ee7b7; }
.dpe-tb-mypicks,
.dpe-tb-community {
    margin: 8px 0;
    padding: 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    text-align: center;
}
.dark .dpe-tb-mypicks,
.dark .dpe-tb-community { background: linear-gradient(135deg, #374151, #1f2937); }
.dpe-tb-mypicks-list > div { margin-bottom: 4px; }
.dpe-tb-community-inner { font-size: 12px; color: #4b5563; }
.dark .dpe-tb-community-inner { color: #d1d5db; }
.dpe-tb-community-inner > div { margin-bottom: 4px; }
.dpe-tb-nopicks { font-size: 13px; color: #6b7280; margin-top: 8px; text-align: center; }
.dark .dpe-tb-nopicks { color: #9ca3af; }

/* ============================================================
   Migrated legacy card rules still referenced by inline JS / dynamic
   classList toggles (moved verbatim from picks.php's inline <style>).
   Kept so applyPickResultFeedback() / pick animations / confidence
   meter visuals keep working on the componentized card.
   ============================================================ */

/* legacy .pick-button base + selected (the buttons also carry .dpe-pickbtn
   which restyles them; these remain as the JS-driven .selected fallback +
   the .pulse keyframe the legacy selected state referenced) */
@keyframes pulse {
    0% { box-shadow: 0 12px 30px rgba(76, 175, 80, 0.5); }
    50% { box-shadow: 0 16px 40px rgba(76, 175, 80, 0.7); }
    100% { box-shadow: 0 12px 30px rgba(76, 175, 80, 0.5); }
}

/* winner/loser feedback (applyPickResultFeedback adds .pick-winner / .pick-loser) */
.helmet-pick-btn.pick-winner {
    background: linear-gradient(135deg, #4CAF50, #45a049) !important;
    border-color: #fff !important;
    animation: winnerPulse 2s ease-in-out infinite;
}
.helmet-pick-btn.pick-loser {
    background: linear-gradient(135deg, #f44336, #d32f2f) !important;
    border-color: #fff !important;
    opacity: 0.7;
    animation: loserFade 1s ease-out;
}
@keyframes winnerPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.6); }
    50% { box-shadow: 0 0 30px rgba(76, 175, 80, 0.9); }
}
@keyframes loserFade {
    0% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* pick success bounce (pick-success-animation toggled by JS) */
.pick-success-animation { animation: pickSuccess 0.6s ease-out; }
@keyframes pickSuccess {
    0% { transform: scale(1); background-color: inherit; }
    25% { transform: scale(1.1); background-color: #10b981; }
    50% { transform: scale(0.95); background-color: #10b981; }
    100% { transform: scale(1); background-color: inherit; }
}

/* confidence-select dropdown (inline in the controls row) */
.confidence-select {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="white" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.confidence-select:hover {
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.confidence-select:focus {
    outline: none;
    border-color: #fff;
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(102, 126, 234, 0.8);
}
.confidence-select option { background: #667eea; color: white; font-weight: bold; }
.confidence-select option:disabled { color: #999; background: #444; }

/* live confidence meter (shown by switchMode + updateConfidenceMeter) */
.confidence-meter {
    height: 8px;
    background: linear-gradient(to right, #ff4444 0%, #ff8800 25%, #ffdd00 50%, #88dd00 75%, #44dd00 100%);
    border-radius: 10px;
    position: relative;
    margin: 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.confidence-indicator {
    position: absolute;
    top: -2px;
    width: 12px;
    height: 12px;
    background: white;
    border: 3px solid #333;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.confidence-feedback {
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    margin-top: 4px;
    transition: all 0.3s ease;
}
.confidence-glow { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); transition: box-shadow 0.3s ease; }
.confidence-glow.high-confidence { box-shadow: 0 0 30px rgba(239, 68, 68, 0.7); }

/* crowd sentiment (legacy hook used by updateCrowdSentiment) */
.crowd-sentiment {
    background: rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 11px;
    text-align: center;
    transition: all 0.3s ease;
}
.crowd-agree { background: linear-gradient(135deg, #4CAF50, #45a049); color: white; animation: crowdPulse 2s infinite; }
.crowd-disagree { background: linear-gradient(135deg, #ff6b6b, #ee5a6f); color: white; }
@keyframes crowdPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.02); opacity: 1; }
}

/* tiebreaker number input base (the .tiebreaker-input hook) */
.tiebreaker-input {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    padding: 12px 20px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s ease;
    min-width: 120px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.tiebreaker-input:hover {
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.tiebreaker-input:focus {
    outline: none;
    border-color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(102, 126, 234, 0.8);
}
.tiebreaker-input::placeholder { color: rgba(255,255,255,0.7); }

/* ---- MOBILE (<= 640px) — card touch sizing ---- */
@media (max-width: 640px) {
    .game-card.dpe-card { margin-bottom: 4px; max-width: 100%; }
    .dpe-matchup { padding: 7px 7px; gap: 5px; }
    .dpe-controls { padding: 5px 6px; gap: 4px; }
    .game-card .helmet-pick-btn.dpe-pickbtn { min-height: 44px; font-size: 12px; padding: 4px 4px !important; }
    .game-card .helmet-pick-btn.dpe-pickbtn .dpe-btn-abbr { font-size: 12px; }
    .dpe-controls .pick-mode-section[data-mode="confidence"] .confidence-select { font-size: 11px; min-width: 46px; }
    .dpe-nick { max-width: 88px; font-size: 12px; }
    .dpe-teampill { font-size: 14px; }
    .dpe-tiebreaker-input { font-size: 16px; } /* prevent iOS zoom */
}

/* ---- Touch-friendly (no hover) ---- */
@media (hover: none) and (pointer: coarse) {
    .game-card .helmet-pick-btn.dpe-pickbtn { min-height: 44px; }
}

/* ============================================================
   games-card-redesign-001-D1b slice 1 — per-card TAB strip + panels
   (Overview / Insights / Comments / ⋯ More). Port of the approved mockup
   <style> (documentation/plan/games-card-redesign-2026-05-20-mockup.html),
   adapted to dpe-* class names. Selector-isolated from switchMode.
   ============================================================ */

/* TAB STRIP — horizontal, scroll without visible scrollbar */
.dpe-tabs {
    display: flex;
    gap: 1px;
    padding: 0 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dark .dpe-tabs { border-top-color: rgba(255, 255, 255, 0.08); background: #13191a; }
.dpe-tabs::-webkit-scrollbar { display: none; }
.dpe-tabs button {
    background: none;
    border: 0;
    color: #6b7280;
    padding: 11px 10px; /* 44px touch target */
    min-height: 44px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    line-height: 1.1;
}
.dark .dpe-tabs button { color: #8aa0a6; }
.dpe-tabs button.active {
    color: #0a7d4f;
    border-bottom-color: #10b981;
}
.dark .dpe-tabs button.active { color: #6ee7b7; }
/* Premium tab — gold/lock styling */
.dpe-tabs button.dpe-tab-prem { color: #b8860b; }
.dark .dpe-tabs button.dpe-tab-prem { color: #d9b25a; }
.dpe-tabs button.dpe-tab-prem::after { content: " 🔒"; font-size: 10px; }
.dpe-tabs button.dpe-tab-prem.active {
    color: #a87b16;
    border-bottom-color: #d9b25a;
}
.dark .dpe-tabs button.dpe-tab-prem.active { color: #f0c674; }
/* ⋯ More — opens the in-card popup (Stats / Injuries / Edge math) */
.dpe-tabs button.dpe-moretab {
    color: #6b7280;
    cursor: pointer;
}
.dark .dpe-tabs button.dpe-moretab { color: #8aa0a6; }
.dpe-tabs button.dpe-moretab:hover { color: #111827; }
.dark .dpe-tabs button.dpe-moretab:hover { color: #e8eef0; }

/* Tab icon/label: desktop shows the text label; ≤750px collapses to icons so
   all four tabs (incl. ⋯ More) fit without overflow / clipping. */
.dpe-tab .dpe-tab-ico { display: none; }
@media (max-width: 750px) {
    .dpe-tab .dpe-tab-ico { display: inline; font-size: 15px; }
    .dpe-tab .dpe-tab-label { display: none; }
    .dpe-tabs button { flex: 1 1 0; padding: 11px 6px; text-align: center; }
    /* Icon-only mode: drop the 🔒 on the Insights/premium tab — it crowds the
       bare icon and reads as broken (user 2026-05-21). */
    .dpe-tabs button.dpe-tab-prem::after { display: none; content: none; }
}

/* two-column subhead (label + "updated …" / movement) */
.dpe-panel .dpe-subhd { display: flex; justify-content: space-between; }

/* PANELS */
.dpe-panel {
    display: none;
    padding: 11px 13px;
    font-size: 12px;
    color: #4b5563;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #f8fafb;
}
.dark .dpe-panel { color: #8aa0a6; border-top-color: rgba(255, 255, 255, 0.08); background: #0f1516; }
.dpe-panel.show { display: block; }

.dpe-panel .dpe-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    gap: 10px;
}
.dpe-panel .dpe-row b { color: #111827; font-weight: 600; }
.dark .dpe-panel .dpe-row b { color: #e8eef0; }

.dpe-panel .dpe-subhd {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 4px 0 6px;
    font-weight: 700;
}
.dark .dpe-panel .dpe-subhd { color: #5f7176; }

/* INSIGHTS — betting line rows */
.dpe-betrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 9px;
    padding: 7px 9px;
    margin-bottom: 6px;
}
.dark .dpe-betrow { background: #10171a; border-color: #27343a; }
.dpe-betrow .dpe-nm { font-weight: 700; color: #111827; font-size: 12px; }
.dark .dpe-betrow .dpe-nm { color: #e8eef0; }
.dpe-betrow .dpe-vals { display: flex; gap: 6px; align-items: center; }
/* Lines pair — AWAY | HOME side by side, aligned to the .dpe-matchup columns
   (away left, home right). Each col reuses the betrow card look. */
.dpe-betpair { display: flex; gap: 8px; margin-bottom: 6px; }
.dpe-betcol {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 9px;
    padding: 7px 9px;
}
.dark .dpe-betcol { background: #10171a; border-color: #27343a; }
.dpe-betcol .dpe-nm { font-weight: 700; color: #111827; font-size: 12px; white-space: nowrap; }
.dark .dpe-betcol .dpe-nm { color: #e8eef0; }
.dpe-betcol .dpe-vals { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.dpe-pill2 {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f1f5f4;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #374151;
}
.dark .dpe-pill2 { background: #0c1213; border-color: #27343a; color: #e8eef0; }
.dpe-ou {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(124, 58, 237, 0.10);
    border-radius: 9px;
    padding: 7px 9px;
    margin-top: 2px;
}
.dpe-ou .dpe-ou-l {
    color: #7c3aed;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
}
.dark .dpe-ou { background: rgba(124, 58, 237, 0.16); }
.dark .dpe-ou .dpe-ou-l { color: #b89cf0; }
.dpe-ou b { color: #111827; }
.dark .dpe-ou b { color: #e8eef0; }
.dpe-provider {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
}
.dark .dpe-provider { color: #5f7176; }

/* OVERVIEW — weather grid (games-card-redesign-001-D1b-S3).
   Ported from the mockup .wxgrid / .wxcell (2026-05-20 mockup ~L173-176),
   dpe-* prefixed + light/dark variants. 2-col grid of stat cells. */
.dpe-wxgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}
.dpe-wxcell {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 9px;
    padding: 8px 10px;
}
.dark .dpe-wxcell { background: #10171a; border-color: #27343a; }
.dpe-wxcell .dpe-wx-k {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.dark .dpe-wxcell .dpe-wx-k { color: #5f7176; }
.dpe-wxcell .dpe-wx-v {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    margin-top: 2px;
}
.dark .dpe-wxcell .dpe-wx-v { color: #e8eef0; }
/* Smaller variant for text-y values (Conditions / Humidity) — matches the
   mockup's inline font-size:13px on those two cells. */
.dpe-wxcell .dpe-wx-v.dpe-wx-sm { font-size: 13px; }
/* Shrink the weather text on small screens so the 2-col grid stays compact. */
@media (max-width: 640px) {
    .dpe-wxgrid { gap: 6px; }
    .dpe-wxcell { padding: 6px 8px; }
    .dpe-wxcell .dpe-wx-k { font-size: 9px; }
    .dpe-wxcell .dpe-wx-v { font-size: 14px; }
    .dpe-wxcell .dpe-wx-v.dpe-wx-sm { font-size: 11px; }
}

/* INSIGHTS — premium gate (non-subscriber) */
.dpe-gate {
    text-align: center;
    padding: 12px 8px;
    border: 1px dashed rgba(217, 178, 90, 0.5);
    border-radius: 10px;
    background: rgba(217, 178, 90, 0.08);
}
.dpe-gate-title { color: #b8860b; font-weight: 700; font-size: 13px; }
.dark .dpe-gate-title { color: #d9b25a; }
.dpe-gate-sub { color: #6b7280; font-size: 11px; margin: 3px 0 9px; }
.dark .dpe-gate-sub { color: #8aa0a6; }
.dpe-gate-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #d9b25a;
    color: #1a1405;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
}
.dpe-gate-cta:hover { background: #c79f48; }

/* COMMENTS */
.dpe-cmt-list { margin-bottom: 8px; }
.dpe-cmt-empty {
    text-align: center;
    color: #9ca3af;
    padding: 12px 0;
    font-size: 12px;
}
.dark .dpe-cmt-empty { color: #5f7176; }
.dpe-cmt {
    display: flex;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .dpe-cmt { border-bottom-color: #16201f; }
.dpe-cmt .dpe-cbody { flex: 1; min-width: 0; }
.dpe-cmt .dpe-ctop { font-size: 10px; color: #9ca3af; }
.dpe-cmt .dpe-ctop b { color: #111827; font-size: 12px; }
.dark .dpe-cmt .dpe-ctop b { color: #e8eef0; }
.dpe-cmt .dpe-ctxt {
    color: #1f2937;
    font-size: 12px;
    margin: 2px 0;
    overflow-wrap: anywhere;
}
.dark .dpe-cmt .dpe-ctxt { color: #e8eef0; }
/* Comment compose — input + Post on ONE row, both the SAME compact height so
   the sizing is consistent with the rest of the card's controls. */
.dpe-addc { display: flex; gap: 6px; margin-top: 8px; align-items: stretch; }
.dpe-addc .dpe-cmt-input {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
    color: #111827;
    font-size: 13px;
}
.dark .dpe-addc .dpe-cmt-input { background: #0c1213; border-color: #27343a; color: #e8eef0; }
.dpe-addc .dpe-cmt-post {
    flex: 0 0 auto;
    background: #10b981;
    border: 0;
    color: #04110c;
    border-radius: 8px;
    padding: 0 12px;
    min-height: 0;
    height: 34px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.dpe-addc .dpe-cmt-post:hover { background: #0ea271; }
.dpe-addc .dpe-cmt-post:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   games-card-redesign-001-M6-desktop — comment affordances
   (react / pin / report) parity with mobile CommentsSheet.
   ============================================================ */
/* Indented reply variant — server flattens to depth 1. */
.dpe-cmt-reply { margin-left: 22px; }
.dpe-cmt-reply .dpe-cbody { border-left: 2px solid rgba(0, 0, 0, 0.06); padding-left: 8px; }
.dark .dpe-cmt-reply .dpe-cbody { border-left-color: #1c2826; }
/* Pinned glyph in the comment header. */
.dpe-cmt .dpe-cmt-pinned {
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #0ea271;
}
/* desktop-comments-hide-needs-unhide-001 — admin "Show hidden" affordances. */
/* "Hidden (admin)" badge in the comment header. Amber to read as a moderation
   state, distinct from the green pinned glyph. */
.dpe-cmt .dpe-cmt-hiddenbadge {
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #b45309;
}
.dark .dpe-cmt .dpe-cmt-hiddenbadge { color: #f59e0b; }
/* Dim an admin-hidden row so it's visually obvious it isn't live to users. */
.dpe-cmt.dpe-cmt-adminhidden { opacity: 0.62; }
.dpe-cmt.dpe-cmt-adminhidden .dpe-cbody {
    border-left: 2px solid #f59e0b;
    padding-left: 8px;
}
/* Admin-only "Show hidden" toggle above the comment list. */
.dpe-cmt-showhidden {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 4px 2px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
}
.dark .dpe-cmt-showhidden { color: #9fb0b3; }
.dpe-cmt-showhidden-input { width: 16px; height: 16px; cursor: pointer; }
/* Per-comment action bar. position:relative so the report reason menu can
   anchor to it. */
.dpe-cmt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    position: relative;
}
/* Action buttons — 44px effective touch target via padding + min-height.
   Visible chrome is compact; the tap area meets the floor. */
.dpe-cmt-act {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 4px 8px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
.dpe-cmt-act:hover { background: rgba(0, 0, 0, 0.05); }
.dark .dpe-cmt-act { color: #9fb0b3; }
.dark .dpe-cmt-act:hover { background: rgba(255, 255, 255, 0.06); }
.dpe-cmt-act:disabled { opacity: 0.5; cursor: default; }
.dpe-cmt-act .dpe-cmt-act-ico { font-size: 14px; line-height: 1; }
/* Liked / pinned "on" states. */
.dpe-cmt-like.on { color: #ef4444; }
.dpe-cmt-pin.on { color: #0ea271; }
.dpe-cmt-likecount { font-variant-numeric: tabular-nums; }
/* Report reason menu — anchored above-left of the report button. */
.dpe-cmt-reasonmenu {
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
.dark .dpe-cmt-reasonmenu { background: #0c1213; border-color: #27343a; }
.dpe-cmt-reason {
    text-align: left;
    background: transparent;
    border: 0;
    color: #1f2937;
    font-size: 13px;
    padding: 11px 12px;
    min-height: 44px;
    cursor: pointer;
}
.dpe-cmt-reason:hover { background: rgba(0, 0, 0, 0.05); }
.dark .dpe-cmt-reason { color: #e8eef0; }
.dark .dpe-cmt-reason:hover { background: rgba(255, 255, 255, 0.06); }
/* Inline status note after a react/pin/report action. */
.dpe-cmt-toast {
    font-size: 11px;
    color: #0ea271;
    align-self: center;
    margin-left: 2px;
}
.dark .dpe-cmt-toast { color: #34d399; }

/* ============================================================
   games-card-redesign hero — week + your-picks summary status bar
   (port of the mockup .summary / .modeselect / .sg / .prog). The mode
   <select> here is the VISIBLE control; the legacy .tab-button row is
   hidden-in-DOM as the switchMode wiring bridge.
   ============================================================ */
.dpe-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 11px 15px;
    margin-bottom: 14px;
}
.dark .dpe-summary { background: #10171a; border-color: #27343a; }
.dpe-summary .dpe-wk { font-weight: 800; font-size: 15px; color: #111827; line-height: 1.2; }
.dark .dpe-summary .dpe-wk { color: #e8eef0; }
.dpe-summary .dpe-wk small { display: block; font-weight: 400; font-size: 11px; color: #9ca3af; }
.dpe-summary .dpe-sg { text-align: center; min-width: 50px; }
/* Keep Live + Final together as a unit so they always wrap onto the SAME row
   (they were splitting across rows on narrow screens). */
.dpe-summary .dpe-sg-pair { display: flex; gap: 12px; }
.dpe-summary .dpe-sg .dpe-n { font-weight: 800; font-size: 16px; color: #10b981; }
.dpe-summary .dpe-sg .dpe-n.dpe-mut { color: #374151; }
.dark .dpe-summary .dpe-sg .dpe-n.dpe-mut { color: #e8eef0; }
.dpe-summary .dpe-sg .dpe-l { font-size: 9.5px; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; }
.dpe-summary .dpe-prog { flex-basis: 100%; height: 6px; border-radius: 4px; background: #e5e7eb; overflow: hidden; }
.dark .dpe-summary .dpe-prog { background: #0e1415; }
.dpe-summary .dpe-prog > div { height: 100%; background: #10b981; transition: width .3s ease; }

.dpe-modeselect {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 3px 8px 3px 12px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
}
.dark .dpe-modeselect { background: #10171a; border-color: #27343a; color: #8aa0a6; }
.dpe-modeselect select {
    background: transparent;
    border: 0;
    color: #047857;
    font-weight: 700;
    font-size: 13px;
    padding: 5px 2px;
    min-height: 34px;
    cursor: pointer;
}
.dark .dpe-modeselect select { color: #10b981; }
/* native option list: force a readable white bg + dark text in BOTH themes
   (dark mode previously rendered dark text on a dark list = invisible). */
.dpe-modeselect select option { background: #ffffff; color: #111111; font-weight: 600; }
/* Mode + Clear grouped: stay on one row, Clear immediately right of the mode
   pill, on all widths (user 2026-05-21). */
.dpe-mode-clear { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.dpe-mode-clear .dpe-modeselect { margin-left: 0; }
/* Clear Picks — outlined pill matching the mode selector's shape (it lost its
   quickbar-scoped style when moved here), with a red/destructive accent. */
.dpe-mode-clear .dpe-clear {
    display: inline-flex;
    align-items: center;
    background: #f3f4f6;
    border: 1px solid #f0c8c8;
    border-radius: 10px;
    padding: 5px 12px;
    min-height: 34px;
    font-size: 13px;
    font-weight: 700;
    color: #b91c1c;
    cursor: pointer;
    white-space: nowrap;
}
.dark .dpe-mode-clear .dpe-clear { background: #10171a; border-color: #3a2a2a; color: #c98b8b; }
.dpe-mode-clear .dpe-clear:hover { background: #fef2f2; }
.dark .dpe-mode-clear .dpe-clear:hover { background: #1c1414; }
/* Small screens: the group gets its own full-width row, but mode + Clear stay
   side by side WITHIN it (override the standalone modeselect flex-basis:100%). */
@media (max-width: 640px) {
    /* Full-width row; mode + Clear each take an EQUAL half (no crazy gap). */
    .dpe-summary .dpe-mode-clear { flex-basis: 100%; margin-left: 0; }
    .dpe-summary .dpe-mode-clear .dpe-modeselect { flex: 1 1 0; flex-basis: 0; justify-content: center; }
    .dpe-summary .dpe-mode-clear .dpe-clear { flex: 1 1 0; flex-basis: 0; justify-content: center; }
}
/* On small screens the mode selector gets its OWN full-width row instead of
   being crammed onto the Live/Final stat row. */
@media (max-width: 640px) {
    .dpe-summary .dpe-modeselect {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
}

/* Hero controls — Year / Season-Type / Week selectors PLUS the Pick-Summary &
   Share buttons, all in ONE compact 2-column grid so they fit every screen.
   .dpe-swpicker uses display:contents so its three selects become direct grid
   children alongside the two buttons. Selects reuse the page's existing themed
   .week-select look (blue pill + BLUE option list + white arrow) — not a white
   box — so the dropdown list matches the theme in both light and dark mode. */
.dpe-controlsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; max-width: 360px; margin: 0 auto; }
.dpe-swpicker { display: contents; }
.dpe-controlsgrid select.dpe-swselect {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-color: rgb(59, 130, 246);
    color: #fff;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    padding: 8px 26px 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="white" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 11px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.dpe-controlsgrid select.dpe-swselect:focus { outline: none; box-shadow: 0 0 14px rgba(59, 130, 246, 0.55); }
.dark .dpe-controlsgrid select.dpe-swselect { background-color: rgb(99, 102, 241); border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); }
.dpe-controlsgrid select.dpe-swselect option { background: rgb(59, 130, 246); color: #fff; font-weight: 600; }
.dark .dpe-controlsgrid select.dpe-swselect option { background: rgb(99, 102, 241); color: #fff; }
/* Week select spans both columns on its own row. */
.dpe-controlsgrid select#picksWeekSelect { grid-column: 1 / -1; }
/* Pick-Summary / Share buttons — sit in the same grid, themed to match. */
.dpe-ctrlbtn {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}
.dpe-ctrlbtn:hover { background: rgba(255, 255, 255, 0.3); }
.dpe-ctrlbtn:active { transform: scale(.98); }
.dpe-ctrlbtn-share { background: linear-gradient(90deg, #22c55e, #3b82f6); border-color: transparent; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25); }
.dpe-ctrlbtn-share:hover { background: linear-gradient(90deg, #16a34a, #2563eb); }

/* Live-picker ticker — small text that scrolls (marquee) across the summary
   box. Spans the full summary width; the inner span animates right→left. */
.dpe-ticker { flex-basis: 100%; overflow: hidden; white-space: nowrap; min-width: 0; }
.dpe-ticker-in {
    display: inline-block;
    padding-left: 100%;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    animation: dpe-marquee 60s linear infinite;
}
.dark .dpe-ticker-in { color: #8aa0a6; }
.dpe-ticker:hover .dpe-ticker-in { animation-play-state: paused; }
@keyframes dpe-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .dpe-ticker-in { animation: none; padding-left: 0; } }

/* ============================================================
   Custom themed dropdown (SHARED component — pick-card-tabs.js
   enhanceFancySelects() upgrades any <select class="dpe-fancy">).
   Replaces the native grey OS option list with a rounded, themed
   menu. Reusable on any page that loads picks-card.css + the JS.
   ============================================================ */
.dpe-dd { position: relative; width: 100%; }
.dpe-dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); }
.dpe-dd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.dpe-dd-trigger::after { content: '▾'; font-size: 10px; opacity: .85; flex: 0 0 auto; }
.dpe-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    /* desktop-picks-league-dropdown-z-index-001 — was z-60 (> the z-50 site
       header). Scoped inside .dpe-dd.dpe-dd-open (z-41) so this only orders the
       menu within its own context; kept at 30 so it never reads as out-ranking
       the shared header dropdowns. */
    z-index: 30;
    display: none;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    padding: 6px;
    max-height: 300px;
    overflow-y: auto;
}
.dpe-dd.dpe-dd-open .dpe-dd-menu { display: block; }
.dpe-dd-opt {
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}
.dpe-dd-opt:hover { background: #eff6ff; }
.dpe-dd-opt.dpe-dd-sel { background: rgb(59, 130, 246); color: #fff; }
.dark .dpe-dd-menu { background: #10171a; border-color: #27343a; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); }
.dark .dpe-dd-opt { color: #e8eef0; }
.dark .dpe-dd-opt:hover { background: #1b2530; }
.dark .dpe-dd-opt.dpe-dd-sel { background: rgb(99, 102, 241); }

/* Picker triggers (Year/Type/Week) — blue pill matching .week-select. */
.dpe-controlsgrid .dpe-dd { width: 100%; }
.dpe-controlsgrid .dpe-dd.dpe-dd-wide { grid-column: 1 / -1; }
.dpe-controlsgrid .dpe-dd-trigger {
    background: rgb(59, 130, 246);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.dark .dpe-controlsgrid .dpe-dd-trigger { background: rgb(99, 102, 241); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); }

/* Mode trigger — match the .dpe-modeselect green-on-grey pill. */
.dpe-modeselect .dpe-dd { width: auto; }
.dpe-modeselect .dpe-dd-trigger { background: transparent; color: #047857; font-weight: 700; padding: 4px 2px; min-height: 34px; }
.dark .dpe-modeselect .dpe-dd-trigger { color: #10b981; }
.dpe-modeselect .dpe-dd-menu { min-width: 160px; right: auto; left: 0; }

/* Stacking fix: the hero (backdrop-filter) and the summary bar are separate
   stacking contexts, and the summary is a LATER sibling — so an open dropdown
   menu in the hero was painted UNDER the summary's ticker + mode text. Lift the
   open dropdown's container above later siblings while a menu is open.
   desktop-picks-league-dropdown-z-index-001 — these were z-index:1000/1001,
   which OVERSHOT the shared site header (position:fixed; z-50) and painted the
   header's active-league + user-menu dropdowns BEHIND the picks content. The
   sibling content these need to beat (hero/summary/cards) is all z-auto, so
   z-40/41 wins the intra-page battle while staying UNDER the z-50 header. */
.picks-hero-compact:has(.dpe-dd-open) { position: relative; z-index: 40; }
.dpe-summary:has(.dpe-dd-open) { position: relative; z-index: 40; }
.dpe-dd.dpe-dd-open { z-index: 41; }

/* Confidence-points dropdown on the pick card — matches the card's light
   surface (was dark bg-gray-900, out of place on the redesigned card). Option
   list forced white-bg/dark-text in both themes (same fix as the mode list). */
.dpe-confselect {
    background: #ffffff;
    color: #111827;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}
.dpe-confselect:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.dark .dpe-confselect { background: #0f1417; color: #e5e7eb; border-color: #27343a; }
.dpe-confselect option { background: #ffffff; color: #111111; font-weight: 600; }

@media (max-width: 640px) {
    .dpe-summary { gap: 8px; padding: 9px 11px; }
    .dpe-summary .dpe-sg { min-width: 42px; }
    .dpe-modeselect { margin-left: 0; }
    .dpe-swpicker { gap: 6px; width: 100%; justify-content: center; }
}

/* Desktop hero control row (>=768px, Tailwind md:). .dpe-controlsgrid is a
   DIRECT CHILD of .picks-hero-compact, so width:100% == the full hero content
   box. Here the 2-col mobile grid becomes ONE non-wrapping flex row holding ALL
   six controls — the 3 selects (Year / Season-Type / Week) AND the 3 action
   buttons (Pick Summary / Share / Copy to leagues) — spanning the hero
   edge-to-edge. .dpe-swpicker is display:contents, so its 3 selects are direct
   flex children alongside the buttons. Selects size to content but may shrink
   (flex:0 1 auto); buttons grow to fill the remaining width equally
   (flex:1 1 0). Mobile (<768px) is untouched — every rule below is gated behind
   min-width:768px, so the centered 2-col grid stays byte-identical to before. */
@media (min-width: 768px) {
    /* Drop the 360px cap + auto-centering: span the full hero width as a row. */
    .dpe-controlsgrid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: none;
        margin: 12px 0 0;
    }
    /* Selects keep their natural-ish width but may shrink to share the row;
       cancel the mobile week-select full-row span. */
    .dpe-controlsgrid select.dpe-swselect {
        flex: 0 1 auto;
        min-width: 0;
        width: auto;
    }
    .dpe-controlsgrid select#picksWeekSelect { grid-column: auto; }
    /* Enhanced themed dropdowns (.dpe-dd, built by enhanceFancySelects()) are
       the actual flex children for the 3 selects. Override the base width:100%
       + the week dropdown's full-row span so each shares the single row. */
    .dpe-controlsgrid .dpe-dd {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
    }
    .dpe-controlsgrid .dpe-dd.dpe-dd-wide { grid-column: auto; }
    /* Buttons grow to fill the remaining width equally, edge-to-edge. */
    .dpe-controlsgrid .dpe-ctrlbtn {
        flex: 1 1 0;
        width: auto;
        white-space: nowrap;
    }
}

/* ---- Live picker activity strip (mockup .liveact) -----------------------
   Page-level pulsing-dot status line between the summary bar and the quickbar.
   Picks count + trending team abbrs are computed from $gameStats week totals
   in picks.php (no "last hour" precision). Pulse reuses the dpePulse keyframe. */
.dpe-liveact {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 9px 13px;
    margin: 0 0 16px;
    font-size: 12px;
    color: #6b7280;
}
.dark .dpe-liveact { background: #10171a; border-color: #27343a; color: #8aa0a6; }
.dpe-liveact b { color: #111827; font-weight: 700; }
.dark .dpe-liveact b { color: #e8eef0; }
.dpe-liveact-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444; display: inline-block; flex: 0 0 auto;
    animation: dpePulse 1.4s infinite;
}

/* ---- Quick actions row (mockup .quickbar) -------------------------------
   Smart-pick tools + Clear as ONE flex-wrap pill row. The #smart-pick-tools
   and #clear-picks-button-container wrappers use display:contents so their
   button children participate directly in this flex row (switchMode toggles
   the wrappers between none and contents). Clear is right-aligned + reddish. */
.dpe-quickbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 16px;
}
.dpe-qbgroup,
.dpe-clear-wrap { display: contents; }
/* Override the legacy .smart-pick-btn gradient pill (defined inline in picks.php)
   with the mockup quickbar pill — scoped to .dpe-quickbar so it wins on
   specificity without touching the legacy rule. */
.dpe-quickbar button,
.dpe-quickbar .smart-pick-btn {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #111827;
    border-radius: 9px;
    padding: 8px 13px;
    margin: 0;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition: background .15s ease, border-color .15s ease;
}
.dpe-quickbar button:hover,
.dpe-quickbar .smart-pick-btn:hover {
    background: #f3f4f6;
    transform: none;
    box-shadow: none;
}
.dark .dpe-quickbar button,
.dark .dpe-quickbar .smart-pick-btn { background: #10171a; border-color: #27343a; color: #e8eef0; }
.dark .dpe-quickbar button:hover,
.dark .dpe-quickbar .smart-pick-btn:hover { background: #16201f; }
.dpe-quickbar button:disabled,
.dpe-quickbar button.opacity-50,
.dpe-quickbar .smart-pick-btn:disabled,
.dpe-quickbar .smart-pick-btn.opacity-50 { opacity: .5; cursor: not-allowed; }
.dpe-quickbar button:disabled:hover,
.dpe-quickbar .smart-pick-btn:disabled:hover { background: #ffffff; }
.dark .dpe-quickbar button:disabled:hover,
.dark .dpe-quickbar .smart-pick-btn:disabled:hover { background: #10171a; }
.dpe-quickbar .dpe-clear {
    margin-left: auto;
    color: #b91c1c;
    border-color: #f0c8c8;
}
.dpe-quickbar .dpe-clear:hover { background: #fef2f2; }
.dark .dpe-quickbar .dpe-clear { color: #c98b8b; border-color: #3a2a2a; }
.dark .dpe-quickbar .dpe-clear:hover { background: #1c1414; }

@media (max-width: 640px) {
    .dpe-quickbar { gap: 6px; }
    .dpe-quickbar button { padding: 8px 11px; font-size: 12px; }
}

/* ============================================================
   games-card-redesign-001-D1b S2-S6 — FULL card tab content.
   Ported + dpe-* prefixed from the approved mockup CSS
   (documentation/plan/games-card-redesign-2026-05-20-mockup.html L130-188).
   Adds: gold "Edge" subhead, odds toggle, movement deltas, edge rows,
   stats grid, injuries groups, and the ⋯ More overlay. Light + dark
   variants; 44px touch targets on the popup controls. Selector-isolated
   from switchMode + the existing dpe-tabs JS.
   ============================================================ */

/* ---- Gold subhead (Lines / Edge) ---- */
.dpe-panel .dpe-subhd2 {
    font-size: 10px;
    color: #b8860b;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 9px 0 4px;
    font-weight: 700;
}
.dark .dpe-panel .dpe-subhd2 { color: #d9b25a; }

/* ---- Odds-format toggle ---- */
.dpe-oddstoggle {
    display: inline-flex;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 8px;
}
.dark .dpe-oddstoggle { border-color: #27343a; }
.dpe-oddstoggle span {
    padding: 6px 11px; /* taller for a comfortable tap target */
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}
.dark .dpe-oddstoggle span { color: #8aa0a6; }
.dpe-oddstoggle span.on { background: #10b981; color: #04110c; font-weight: 700; }

/* ---- Movement deltas ---- */
.dpe-delta-up { color: #10b981; font-size: 10px; }
.dpe-delta-down { color: #ef6b6b; font-size: 10px; }

/* ---- Edge rows ---- */
.dpe-edge {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .dpe-edge { border-bottom-color: #16201f; }
.dpe-edge .dpe-k { color: #0a7d4f; font-weight: 700; font-size: 11px; }
.dark .dpe-edge .dpe-k { color: #34d399; }
.dpe-edge .dpe-v { color: #111827; font-size: 12px; text-align: right; }
.dark .dpe-edge .dpe-v { color: #e8eef0; }
.dpe-edge .dpe-v small { color: #9ca3af; }
.dark .dpe-edge .dpe-v small { color: #5f7176; }

/* ---- "Show model details" button (gold, 44px tap) ---- */
.dpe-showdet {
    background: none;
    border: 1px solid rgba(217, 178, 90, 0.5);
    color: #b8860b;
    border-radius: 8px;
    padding: 10px 12px;
    min-height: 44px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}
.dark .dpe-showdet { color: #d9b25a; }
.dpe-showdet:hover { background: rgba(217, 178, 90, 0.10); }

/* ---- Assumptions footnote ---- */
.dpe-assump {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 6px;
    font-style: italic;
}
.dark .dpe-assump { color: #5f7176; }

/* ---- Empty-state line ---- */
.dpe-empty {
    text-align: center;
    color: #9ca3af;
    padding: 14px 0;
    font-size: 12px;
}
.dark .dpe-empty { color: #5f7176; }

/* ---- Stats grid (3-col: away | label | home) ---- */
.dpe-statgrid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 5px 12px;
    align-items: center;
}
.dpe-statgrid .dpe-hd {
    font-weight: 700;
    text-align: center;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    font-size: 12px;
}
.dark .dpe-statgrid .dpe-hd { border-bottom-color: #27343a; }
.dpe-statgrid .dpe-hd-a { color: #2563eb; text-align: left; }
.dark .dpe-statgrid .dpe-hd-a { color: #6ab0ff; }
.dpe-statgrid .dpe-hd-h { color: #0a7d4f; text-align: right; }
.dark .dpe-statgrid .dpe-hd-h { color: #34d399; }
.dpe-statgrid .dpe-lbl { color: #9ca3af; text-align: center; font-size: 11px; }
.dark .dpe-statgrid .dpe-lbl { color: #5f7176; }
.dpe-statgrid .dpe-av { text-align: left; color: #111827; font-weight: 600; }
.dpe-statgrid .dpe-hv { text-align: right; color: #111827; font-weight: 600; }
.dark .dpe-statgrid .dpe-av,
.dark .dpe-statgrid .dpe-hv { color: #e8eef0; }
.dpe-statgrid .dpe-pg { color: #9ca3af; font-size: 10px; font-weight: 400; }
.dark .dpe-statgrid .dpe-pg { color: #5f7176; }
.dpe-statgrid .dpe-lead { color: #0a7d4f; }
.dark .dpe-statgrid .dpe-lead { color: #34d399; }

/* ---- Injuries ---- */
.dpe-injsum { display: flex; gap: 8px; margin-bottom: 8px; font-size: 11px; flex-wrap: wrap; }
.dpe-injsum span {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.dark .dpe-injsum span { background: #10171a; border-color: #27343a; }
.dpe-injsum .dpe-inj-o { color: #ef4444; }
.dpe-injsum .dpe-inj-d { color: #f97316; }
.dpe-injsum .dpe-inj-q { color: #f59e0b; }

/* Inner status tabs WITHIN the Injuries panel (Out / Doubtful / Questionable).
   Selector-isolated from the outer .dpe-mtabs — these are .dpe-injtabs buttons
   carrying data-injtab; the sections are .dpe-injsec[data-injsec]. The JS in
   pick-card-tabs.js toggles .active (button) + .show (section). */
.dpe-injtabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    margin-bottom: 8px;
}
.dark .dpe-injtabs { border-bottom-color: #27343a; }
.dpe-injtabs button {
    background: none;
    border: 0;
    color: #6b7280;
    padding: 8px 10px;
    min-height: 40px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.dark .dpe-injtabs button { color: #8aa0a6; }
.dpe-injtabs button.active { border-bottom-color: currentColor; }
.dpe-injtabs button.dpe-st-out { color: #ef4444; }
.dpe-injtabs button.dpe-st-doubt { color: #f97316; }
.dpe-injtabs button.dpe-st-quest { color: #f59e0b; }
.dpe-injbody { max-height: 220px; overflow-y: auto; padding-right: 8px; }
.dpe-injsec { display: none; }
.dpe-injsec.show { display: block; }
.dpe-injnone {
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    padding: 12px 0;
}
.dark .dpe-injnone { color: #5f7176; }
.dpe-inj {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    color: #111827;
    font-size: 12px;
}
.dark .dpe-inj { color: #e8eef0; }
.dpe-inj .dpe-tm { color: #9ca3af; font-size: 11px; flex: 0 0 auto; white-space: nowrap; }
.dark .dpe-inj .dpe-tm { color: #5f7176; }

/* ---- ⋯ More popup overlay (absolute, inside the position:relative card) ---- */
.dpe-moremodal {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.97);
    display: none;
    z-index: 20;
    padding: 13px;
    border-radius: 16px;
    overflow: auto;
}
.dark .dpe-moremodal { background: rgba(8, 12, 12, 0.97); }
.dpe-moremodal.open { display: block; }
.dpe-moresheet { min-height: 0; }
.dpe-mshead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}
.dark .dpe-mshead { color: #e8eef0; }
.dpe-mshead .dpe-x {
    cursor: pointer;
    color: #6b7280;
    font-size: 16px;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}
.dark .dpe-mshead .dpe-x { color: #8aa0a6; }
.dpe-mtabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    margin-bottom: 10px;
}
.dark .dpe-mtabs { border-bottom-color: #27343a; }
.dpe-mtabs button {
    background: none;
    border: 0;
    color: #6b7280;
    padding: 11px 12px;
    min-height: 44px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.dark .dpe-mtabs button { color: #8aa0a6; }
.dpe-mtabs button.active { color: #0a7d4f; border-bottom-color: #10b981; }
.dark .dpe-mtabs button.active { color: #34d399; }
.dpe-mtabs button.dpe-mtab-prem { color: #b8860b; }
.dark .dpe-mtabs button.dpe-mtab-prem { color: #d9b25a; }
.dpe-mpanel { display: none; }
.dpe-mpanel.show { display: block; }

/* Results sub-tab (community results/picks, locked/final only). The inner
   wrappers carry their own font/color; this only normalizes spacing so the
   panel matches the other More panels. */
.dpe-mcr { padding: 2px 0; }
.dpe-mcr .dpe-community-final-inner,
.dpe-mcr .dpe-community-locked-inner { font-size: 13px; }
.dpe-mcr .dpe-community-final-inner .font-medium,
.dpe-mcr .dpe-community-locked-inner .font-medium { margin-bottom: 4px; }
/* My-Picks results block inside the Results sub-tab (moved from the final card
   body). Separates the personal ✓/✗ rows from the Community Results below. */
.dpe-mcr .dpe-mypicks-results { font-size: 13px; margin-bottom: 10px; }
.dpe-mcr .dpe-mypicks-results .font-medium { margin-bottom: 4px; }
.dpe-mcr .dpe-mypicks-none { margin-bottom: 10px; }

@media (max-width: 640px) {
    .dpe-mtabs button { padding: 11px 9px; }
}

/* ≤750px: the ⋯ More popup detaches from the game card — on small cards the
   in-card (position:absolute inset:0) overlay clipped/rendered wrong. Here it
   becomes a centered overlay sheet over the viewport (NOT full-screen). Desktop
   keeps the in-card overlay. */
@media (max-width: 750px) {
    /* The card's :hover transform (translateY+scale) creates a containing block
       that would trap position:fixed inside the card (narrow desktop + mouse).
       Disable it ≤750px so the detached More popup escapes to the viewport. */
    .game-card.dpe-card:hover { transform: none; }
    .dpe-moremodal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.55);
        padding: 16px;
        border-radius: 0;
        align-items: center;
        justify-content: center;
    }
    .dpe-moremodal.open { display: flex; }
    .dpe-moresheet {
        width: 100%;
        max-width: 460px;
        max-height: 85vh;
        overflow: auto;
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    }
    .dark .dpe-moremodal { background: rgba(0, 0, 0, 0.66); }
    .dark .dpe-moresheet { background: #10171a; }
}

/* ============================================================
   games-card-redesign-001-logged-out-picks SLICE 1 — additive only.
   Read-only schedule + sign-in CTA shown to anonymous visitors of
   public/picks.php when FEATURE_PICKS_CONSOLIDATED is ON. These
   selectors are NEW (.dpe-lo-* + .dpe-card--readonly modifier) and
   do NOT alter any existing rule above. Mobile-first; 44px touch
   targets on the CTA buttons.
   ============================================================ */
.dpe-lo-wrap { max-width: 980px; }

/* Read-only card modifier: suppress the interactive lift/cursor of the
   shared .dpe-card panel so guests don't think the card is clickable. */
.game-card.dpe-card.dpe-card--readonly { cursor: default; }
.game-card.dpe-card.dpe-card--readonly:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.dark .game-card.dpe-card.dpe-card--readonly:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
}
.game-card.dpe-card.dpe-card--readonly:hover::before { opacity: 0; }

.dpe-lo-logo { width: 28px; height: 28px; object-fit: contain; flex: none; }

/* Public consensus lines (spread / O/U) on the read-only card. */
.dpe-lo-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 4px 12px 10px;
    font-size: 12px;
    color: #6b7280;
}
.dark .dpe-lo-lines { color: #9aa6b2; }
.dpe-lo-lines strong { color: #374151; font-weight: 700; }
.dark .dpe-lo-lines strong { color: #e8eef0; }

/* Sign-in / sign-up CTA panel — primary intent, above the schedule. */
.dpe-lo-cta {
    background: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 100%);
    color: #fff;
    border-radius: 16px;
    padding: 20px 18px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.dpe-lo-cta-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; line-height: 1.25; }
.dpe-lo-cta-sub { font-size: 14px; opacity: 0.92; margin: 0 auto 16px; max-width: 540px; line-height: 1.4; }
.dpe-lo-cta-btns { display: flex; flex-direction: column; gap: 10px; }
.dpe-lo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;            /* touch-target floor (project non-negotiable) */
    width: 100%;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dpe-lo-btn-primary { background: #fff; color: #1e3a8a; }
.dpe-lo-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.dpe-lo-btn-secondary { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); }
.dpe-lo-btn-secondary:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
@media (min-width: 480px) {
    .dpe-lo-cta-btns { flex-direction: row; justify-content: center; }
    .dpe-lo-btn { width: auto; min-width: 160px; }
}

.dpe-lo-sched-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: #374151; }
.dark .dpe-lo-sched-title { color: #e8eef0; }

/* Schedule grid — single column on mobile, multi-column on wider screens. */
.dpe-lo-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) {
    .dpe-lo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 1024px) {
    .dpe-lo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dpe-lo-empty {
    padding: 28px 16px;
    text-align: center;
    color: #6b7280;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    font-size: 15px;
}
.dark .dpe-lo-empty { color: #9aa6b2; border-color: #33424a; }
.dpe-lo-empty a { color: #2563eb; font-weight: 600; }
.dark .dpe-lo-empty a { color: #60a5fa; }

/* ------------------------------------------------------------------
   games-card-redesign-001-logged-out-picks (card parity) — additive.
   Schedule header row (title + week selector) + the interactive week
   <select> + the guest pick CTA shown inside a read-only card body in
   place of the pick controls. NEW selectors only; no existing rule above
   is altered. Mobile-first; 44px touch targets.
   ------------------------------------------------------------------ */

/* Schedule header: title on the left, week selector on the right; stacks
   on the smallest screens so neither truncates. */
.dpe-lo-schedhd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.dpe-lo-schedhd .dpe-lo-sched-title { margin: 0; }

/* Interactive week selector — guest-safe GET navigation (onchange=location). */
.dpe-lo-weeknav-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dpe-lo-weeknav-lbl {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
.dark .dpe-lo-weeknav-lbl { color: #9aa6b2; }
.dpe-lo-weeknav {
    min-height: 44px;            /* touch-target floor (project non-negotiable) */
    padding: 8px 34px 8px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23475569" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    max-width: 220px;
}
.dpe-lo-weeknav:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.dark .dpe-lo-weeknav {
    border-color: #33424a;
    background-color: #10171a;
    color: #e8eef0;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%238aa0a6" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
}

/* Guest "Sign in to make your picks" CTA — replaces the write controls in a
   read-only card body. Full-width, >=44px touch target. */
.dpe-guest-pickcta {
    padding: 10px 12px 12px;
}
.dpe-guest-pickcta a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.dpe-guest-pickcta a:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.32);
}

/* ============================================================
   INSIGHTS — "readable card" edge look (games-card-redesign-001-insights-revert)
   Restores the old games.php getInsightsContent() presentation:
   a tinted recommendation headline card + 3-col colored tile grid,
   and a 2-up disclosure for the ⋯More → Edge-math popup.
   Presentation only — every data binding lives in the partial.
   Every rule pairs a `.dark .X` for the file's dark-mode convention.
   ============================================================ */

/* ---- Recommendation headline card (tinted by pick type) ---- */
.dpe-rec-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.6);
}
.dark .dpe-rec-card { background: rgba(17, 24, 39, 0.6); border-color: #27343a; }
/* pick-type tints */
.dpe-rec-card.dpe-rec-ml { border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.06); }
.dark .dpe-rec-card.dpe-rec-ml { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.10); }
.dpe-rec-card.dpe-rec-spread { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.07); }
.dark .dpe-rec-card.dpe-rec-spread { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.10); }
.dpe-rec-card.dpe-rec-none { border-color: rgba(0, 0, 0, 0.10); background: rgba(255, 255, 255, 0.6); }
.dark .dpe-rec-card.dpe-rec-none { border-color: #27343a; background: rgba(17, 24, 39, 0.6); }

.dpe-rec-main { min-width: 0; flex: 1 1 auto; }
.dark .dpe-rec-main { color: inherit; }
.dpe-rec-top { display: flex; align-items: center; gap: 8px; }
.dark .dpe-rec-top { color: inherit; }
/* Standalone "Show model details" — its own full-width row below the edge
   tiles, styled like a clean tab-consistent affordance (user request
   2026-05-21: not crammed in the edge row). */
.dpe-showdet-full {
    display: block;
    width: 100%;
    text-align: center;
    margin: 2px 0 4px;
}
/* The ML Edge + Spread Δ summary tiles relocate into the model-details popup on
   small screens only — hidden by default (large) so they don't double-render
   alongside the inline grid. Compound selector outranks the base .dpe-tilegrid
   display:grid regardless of source order. */
.dpe-tilegrid.dpe-tilegrid-popup { display: none; }

/* Badge pill (NO EDGE / ML / Spread) — colored by pick type */
.dpe-rec-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #e5e7eb;
    color: #374151;
}
.dark .dpe-rec-badge { background: #1f2937; color: #d1d5db; }
.dpe-rec-ml .dpe-rec-badge { background: #d1fae5; color: #065f46; }
.dark .dpe-rec-ml .dpe-rec-badge { background: rgba(6, 95, 70, 0.4); color: #6ee7b7; }
.dpe-rec-spread .dpe-rec-badge { background: #fef3c7; color: #92400e; }
.dark .dpe-rec-spread .dpe-rec-badge { background: rgba(146, 64, 14, 0.4); color: #fcd34d; }

.dpe-rec-team {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .dpe-rec-team { color: #e8eef0; }

.dpe-rec-reason {
    margin-top: 3px;
    font-size: 11px;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .dpe-rec-reason { color: #9ca3af; }

/* Confidence cluster (right side) */
.dpe-rec-conf { flex: 0 0 auto; text-align: right; }
.dark .dpe-rec-conf { color: inherit; }
.dpe-rec-conf-label { font-size: 11px; color: #4b5563; }
.dark .dpe-rec-conf-label { color: #9ca3af; }
.dpe-rec-conf-bar {
    margin-top: 4px;
    width: 112px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
.dark .dpe-rec-conf-bar { background: #374151; }
.dpe-rec-conf-fill { height: 6px; border-radius: 999px; background: #9ca3af; }
.dark .dpe-rec-conf-fill { background: #6b7280; }
.dpe-rec-ml .dpe-rec-conf-fill { background: #10b981; }
.dark .dpe-rec-ml .dpe-rec-conf-fill { background: #10b981; }
.dpe-rec-spread .dpe-rec-conf-fill { background: #f59e0b; }
.dark .dpe-rec-spread .dpe-rec-conf-fill { background: #f59e0b; }

/* ---- 3-col colored tile grid (ML / Spread / Totals) ---- */
.dpe-tilegrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
.dark .dpe-tilegrid { color: inherit; }
.dpe-tile { border-radius: 10px; padding: 8px; min-width: 0; }
.dark .dpe-tile { color: inherit; }
.dpe-tile-ml { background: #ecfdf5; }
.dark .dpe-tile-ml { background: rgba(6, 78, 59, 0.2); }
.dpe-tile-spread { background: #fffbeb; }
.dark .dpe-tile-spread { background: rgba(120, 53, 15, 0.2); }
.dpe-tile-tot { background: #f5f3ff; }
.dark .dpe-tile-tot { background: rgba(76, 29, 149, 0.2); }

.dpe-tile-k {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dpe-tile-ml .dpe-tile-k { color: #047857; }
.dark .dpe-tile-ml .dpe-tile-k { color: #6ee7b7; }
.dpe-tile-spread .dpe-tile-k { color: #92400e; }
.dark .dpe-tile-spread .dpe-tile-k { color: #fcd34d; }
.dpe-tile-tot .dpe-tile-k { color: #6d28d9; }
.dark .dpe-tile-tot .dpe-tile-k { color: #c4b5fd; }

.dpe-tile-v {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.dark .dpe-tile-v { color: #e8eef0; }

.dpe-tile-sub {
    font-size: 10px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dpe-tile-ml .dpe-tile-sub { color: #065f46; }
.dark .dpe-tile-ml .dpe-tile-sub { color: #6ee7b7; }
.dpe-tile-spread .dpe-tile-sub { color: #78350f; }
.dark .dpe-tile-spread .dpe-tile-sub { color: #fcd34d; }
.dpe-tile-tot .dpe-tile-sub { color: #5b21b6; }
.dark .dpe-tile-tot .dpe-tile-sub { color: #c4b5fd; }

/* ---- 2-up detail grid (Edge-math popup) ---- */
.dpe-detgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 8px;
}
.dark .dpe-detgrid { color: inherit; }
@media (min-width: 560px) {
    .dpe-detgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dpe-detcard {
    border-radius: 10px;
    padding: 9px 10px;
    background: #f9fafb;
    font-size: 12px;
    color: #111827;
}
.dark .dpe-detcard { background: #1f2937; color: #e8eef0; }
.dpe-detcard > div { padding: 1px 0; }
.dpe-detcard-k {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4b5563;
    margin-bottom: 3px;
    font-weight: 700;
}
.dark .dpe-detcard-k { color: #9ca3af; }
.dpe-detcard small { color: #6b7280; }
.dark .dpe-detcard small { color: #8aa0a6; }
.dpe-pos { color: #047857; font-weight: 700; }
.dark .dpe-pos { color: #34d399; }
.dpe-neg { color: #b91c1c; font-weight: 700; }
.dark .dpe-neg { color: #f87171; }

/* ---- "Show details" disclosure (Insights inline expander) ---- */
.dpe-disclosure {
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
}
.dark .dpe-disclosure { border-color: #27343a; background: rgba(17, 24, 39, 0.5); }
.dpe-disclosure > summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    padding: 10px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}
.dark .dpe-disclosure > summary { color: #e8eef0; }
.dpe-disclosure > summary::-webkit-details-marker { display: none; }
.dpe-disclosure > summary::after { content: " ▸"; margin-left: auto; color: #9ca3af; }
.dpe-disclosure[open] > summary::after { content: " ▾"; }
.dpe-disclosure-body { padding: 0 12px 12px; }
.dark .dpe-disclosure-body { color: inherit; }

/* 375px: tiles shrink (no horizontal scroll) and detgrid stays 1-col. */
/* Show-details label swaps to "Show more" on small screens (default = large). */
.dpe-sd-sm { display: none; }
.dpe-sd-lg { display: inline; }

/* Insights "small card" rules. Breakpoint is 600px (not 430) because the picks
   grid is 2-up — each card is ~half the viewport — so large modern phones
   (430–450px CSS width) and the narrow 2-up column both need the folded layout.
   (user device feedback 2026-05-21: phone was wider than the old 430 cutoff.) */
@media (max-width: 600px) {
    .dpe-tilegrid { gap: 6px; }
    .dpe-tile { padding: 6px; }
    .dpe-tile-v { font-size: 12px; }
    .dpe-rec-conf-bar { width: 88px; }
    /* Small screens: fold ML Edge + Spread Δ out of the INLINE grid (keep only
       Totals inline) and surface them inside the model-details popup instead
       (.dpe-tilegrid-popup turns on below). Hide the reason line — unreadable
       at this width (user request 2026-05-21). */
    .dpe-tilegrid { grid-template-columns: 1fr; }
    .dpe-tilegrid-inline .dpe-tile-ml,
    .dpe-tilegrid-inline .dpe-tile-spread { display: none; }
    /* Popup tiles: ML Edge + Spread Δ side by side (2-col) — the model-details
       modal is wide enough, and the user wants them on one row (2026-05-21). */
    .dpe-tilegrid.dpe-tilegrid-popup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dpe-rec-reason { display: none; }
    .dpe-sd-lg { display: none; }
    .dpe-sd-sm { display: inline; }
    /* Lines pair STACKS on small cards — at 2-up half-width the away|home
       side-by-side columns are too narrow and the 🏠 + abbr overflowed its
       background. Stacking gives each team a full-width row (nm left, pills
       right), so nothing clips and "implied" fits (user device feedback). */
    .dpe-betpair { flex-direction: column; gap: 6px; }
    .dpe-betcol { padding: 5px 7px; gap: 6px; }
    .dpe-betcol .dpe-nm { font-size: 11px; }
    .dpe-betcol .dpe-vals { gap: 4px; }
    .dpe-betcol .dpe-pill2 { font-size: 10px; padding: 2px 5px; }
    /* Edge recommendation card stacks so the "mode" line (NO EDGE / ML / Spread
       + team) gets its own full-width line above the confidence bar instead of
       being squeezed/clipped next to it (user device feedback 2026-05-21). */
    .dpe-rec-card { flex-direction: column; align-items: stretch; gap: 6px; }
    .dpe-rec-conf { width: 100%; }
    .dpe-rec-conf-bar { width: 100%; }
    /* Odds-format toggle: full-width with 3 equal segments + smaller text/padding
       so american·decimal·implied all fit inside the narrow card (was inline-flex
       with overflow:hidden clipping "implied") — user device feedback 2026-05-21. */
    .dpe-oddstoggle { display: flex; width: 100%; }
    .dpe-oddstoggle span { flex: 1 1 0; justify-content: center; padding: 6px 4px; font-size: 9px; }
    /* Comment composer: shrink input + Post so the "Add a comment…" placeholder
       isn't clipped in the narrow card (user device feedback 2026-05-21). */
    .dpe-addc { gap: 4px; }
    .dpe-addc .dpe-cmt-input { font-size: 12px; padding: 6px 8px; }
    .dpe-addc .dpe-cmt-post { padding: 0 9px; font-size: 11px; }
}