/* ==========================================================================
   The Perfect Roster — Stylesheet (mobile-first)
   ========================================================================== */

/* ── Brand colours (fixed, never change with theme) ── */
:root {
    --tpr-blue:       #1a5c8a;
    --tpr-blue-light: #2980b9;
    --tpr-red:        #c0392b;
    --tpr-gold:       #d4af37;
    --tpr-radius:     0px;

    /* ── Light mode (default) ── */
    --tpr-bg:         #f0f4f8;
    --tpr-surface:    #ffffff;
    --tpr-surface-2:  #f0f4f8;
    --tpr-border:     #cdd8e3;
    --tpr-header-bg:  #0d2137;
    --tpr-header-text:#ffffff;
    --tpr-text:       #1a2a3a;
    --tpr-text-muted: #5a7080;
    --tpr-text-inv:   #ffffff;
    --tpr-navy:       #0d2137;
    --tpr-shadow:     0 4px 16px rgba(0,0,0,0.10);

    /* legacy aliases */
    --tpr-white:      #ffffff;
    --tpr-ice:        #f0f4f8;
    --tpr-grey-light: #f0f4f8;
    --tpr-grey-mid:   #cdd8e3;
}

/* ── Dark mode ── */
.tpr-dark {
    --tpr-bg:         #0f1923;
    --tpr-surface:    #1a2535;
    --tpr-surface-2:  #111c28;
    --tpr-border:     #2a3a4d;
    --tpr-header-bg:  #0a1219;
    --tpr-header-text:#e8f4f8;
    --tpr-text:       #d4e4f0;
    --tpr-text-muted: #7a9ab0;
    --tpr-text-inv:   #0f1923;
    --tpr-navy:       #0a1219;
    --tpr-shadow:     0 4px 20px rgba(0,0,0,0.4);

    /* legacy aliases */
    --tpr-white:      #1a2535;
    --tpr-ice:        #111c28;
    --tpr-grey-light: #111c28;
    --tpr-grey-mid:   #2a3a4d;
}

/* ============================================================
   BASE / WRAP
============================================================ */
/* ── Body background sync ─────────────────────────────────────────
   Match the WordPress page body background to the plugin container
   so there's no visible contrast between them.
   Light mode: #f0f4f8, Dark mode: #0f1923
──────────────────────────────────────────────────────────────── */
body {
    background-color: #f0f4f8 !important;
    transition: background-color 0.2s;
}
.tpr-dark ~ body,
body:has(.tpr-dark) {
    background-color: #0f1923 !important;
}

/* Fallback: if :has() not supported, apply via JS-added class on body */
body.tpr-body-dark {
    background-color: #0f1923 !important;
}

.tpr-wrap {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 40px;
    color: var(--tpr-text);
    font-size: 15px;
    box-sizing: border-box;
    position: relative;
}


.tpr-wrap *, .tpr-wrap *::before, .tpr-wrap *::after { box-sizing: inherit; }

/* Reset headings — prevent theme (Avada) from injecting background/padding/color */
.tpr-wrap h1, .tpr-wrap h2, .tpr-wrap h3,
.tpr-wrap h4, .tpr-wrap h5, .tpr-wrap h6 {
    background: none !important;
    background-image: none !important;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    line-height: inherit;
}

/* ============================================================
   HEADER
============================================================ */
.tpr-header {
    background: var(--tpr-navy);
    border-radius: 0;
    color: #ffffff;
    padding: 14px 0 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
/* .tpr-logo and .tpr-title removed — site uses its own branding */
.tpr-subtitle {
    font-size: 0.82rem;
    color: var(--tpr-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ============================================================
   SHARED PANEL
============================================================ */
.tpr-mode-selector,
.tpr-game-area,
.tpr-results {
    background: var(--tpr-bg);
    border: none;
    padding: 16px 0;
}

@media (min-width: 1200px) {
    .tpr-game-area {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto 1fr;
        gap: 0 20px;
        align-items: start;
    }
    /* Status bar spans full width */
    .tpr-game-area .tpr-status-bar {
        grid-column: 1 / -1;
        margin-bottom: 16px;
    }
    /* Spin panel: left column, full height */
    .tpr-game-area .tpr-spin-panel {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 0;
    }
    /* Roster board: right column, sticky */
    .tpr-game-area .tpr-roster-board {
        grid-column: 2;
        grid-row: 2;
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
}

/* ============================================================
   MODE SELECTOR
============================================================ */
.tpr-mode-label {
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: var(--tpr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tpr-mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.tpr-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--tpr-surface);
    border: 2px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    padding: 14px 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-size: 0.82rem;
    text-align: center;
}
.tpr-mode-card:hover  { border-color: var(--tpr-blue-light); }
.tpr-mode-card.active {
    border-color: var(--tpr-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}
.tpr-mode-card strong { font-size: 0.95rem; display: block; }
.tpr-mode-card small  { color: var(--tpr-text-muted); font-size: 0.72rem; display: block; line-height: 1.3; }
.tpr-mode-spins { color: var(--tpr-blue-light) !important; font-weight: 700 !important; }
.tpr-mode-icon  { font-size: 1.5rem; }
.tpr-mode-desc  {
    font-size: 0.70rem !important;
    color: var(--tpr-text-muted) !important;
    line-height: 1.45 !important;
    margin-top: 2px;
    margin-bottom: 2px;
    opacity: 0.85;
}

/* ============================================================
   BUTTONS
============================================================ */
.tpr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    touch-action: manipulation; /* prevents 300ms tap delay on mobile */
    -webkit-tap-highlight-color: transparent;
}
.tpr-btn:active:not(:disabled) { transform: scale(0.97); opacity: 0.85; }
.tpr-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tpr-btn-primary {
    background: var(--tpr-blue);
    color: #ffffff;
    width: 100%;
    font-size: 1rem;
    padding: 14px;
}
.tpr-btn-spin {
    background: var(--tpr-navy);
    color: #ffffff;
    font-size: 1.05rem;
    width: 100%;
    padding: 14px;
}
.tpr-btn-simulate {
    background: var(--tpr-red);
    color: #ffffff;
    font-size: 1rem;
}
.tpr-btn-reroll-both {
    background: linear-gradient(135deg, var(--tpr-blue-light), var(--tpr-gold));
    color: #fff;
    border-color: transparent;
}
.tpr-btn-reroll {
    background: var(--tpr-surface);
    border: 2px solid var(--tpr-border);
    color: var(--tpr-text);
    font-size: 0.78rem;
    padding: 8px 12px;
    font-weight: 700;
    flex: 1;
}
.tpr-btn-reroll:disabled { opacity: 0.35; }
.tpr-btn-share {
    background: #2c3e50;
    color: #ffffff;
    flex: 1;
}

/* ============================================================
   STATUS BAR
============================================================ */
.tpr-status-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.1);
    background-color: var(--tpr-navy);
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}
.tpr-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    background: var(--tpr-navy);
    color: #ffffff;
}
.tpr-status-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tpr-text-muted);
    white-space: nowrap;
}
.tpr-status-val {
    font-size: 0.82rem;
    font-weight: 700;
    margin-top: 2px;
    text-align: center;
}

/* ============================================================
   SPIN PANEL
============================================================ */
.tpr-spin-panel {
    background: var(--tpr-surface);
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: var(--tpr-shadow);
}
.tpr-spin-result {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tpr-grey-light);
}
.tpr-spin-franchise {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--tpr-text);
    line-height: 1.2;
}
.tpr-spin-era {
    font-size: 0.85rem;
    color: var(--tpr-blue-light);
    font-weight: 600;
    margin-top: 2px;
}
.tpr-reroll-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
@media (max-width: 599px) {
    .tpr-reroll-row {
        grid-template-columns: 1fr;
    }
    .tpr-btn-reroll {
        width: 100%;
        padding: 13px 44px 13px 16px !important;
        font-size: 0.88rem;
        min-height: 48px;
    }
    .tpr-reroll-count {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
        right: 12px;
    }
    .tpr-btn-reroll-both {
        padding: 13px 16px !important;
        grid-column: 1 / -1;
    }
}

/* ============================================================
   PLAYER POOL
============================================================ */
.tpr-player-pool {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 14px;
    min-height: 40px;
}
.tpr-pool-hint {
    text-align: center;
    color: var(--tpr-text-muted);
    font-style: italic;
    padding: 16px;
    font-size: 0.85rem;
}
.tpr-pool-section { margin-bottom: 10px; }
.tpr-pool-pos-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tpr-text-muted);
    margin-bottom: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--tpr-border);
}
.tpr-pool-slots-left {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--tpr-blue-light);
    font-weight: 700;
}

/* Player cards — tighter on mobile */
.tpr-player-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tpr-surface-2);
    border: 2px solid transparent;
    border-radius: 7px;
    padding: 11px 10px;
    margin-bottom: 6px;
    transition: border-color 0.15s;
}
.tpr-player-card:hover { border-color: var(--tpr-blue-light); }
.tpr-player-card.unavailable { opacity: 0.35; }
.tpr-player-card.tpr-card-elite {
    border-color: rgba(212,175,55,0.5);
    box-shadow: 0 0 0 1px rgba(212,175,55,0.18), inset 0 0 12px rgba(212,175,55,0.05);
}
.tpr-player-card.tpr-card-elite:hover { border-color: var(--tpr-gold); }
/* In GM Mode ratings are hidden — gold border would expose them, so suppress it */
.tpr-gm-mode .tpr-player-card.tpr-card-elite {
    border-color: var(--tpr-border);
    box-shadow: none;
}
.tpr-gm-mode .tpr-player-card.tpr-card-elite:hover { border-color: var(--tpr-blue-light); }

.tpr-player-pos-badge {
    background: var(--tpr-navy);
    color: #ffffff;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 3px 5px;
    min-width: 26px;
    text-align: center;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.tpr-player-info { flex: 1; min-width: 0; } /* min-width:0 lets text truncate */
.tpr-player-name {
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpr-player-meta {
    font-size: 0.68rem;
    color: var(--tpr-text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpr-player-rating {
    font-size: 1rem;
    font-weight: 900;
    color: var(--tpr-text);
    min-width: 30px;
    text-align: right;
    flex-shrink: 0;
}
.tpr-player-rating.rating-elite { color: var(--tpr-gold); }
.tpr-player-rating.rating-great { color: var(--tpr-blue-light); }
.tpr-player-rating.rating-solid { color: #3daa5c; }

.tpr-pick-btn {
    background: var(--tpr-blue);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
.tpr-pick-btn:active { opacity: 0.8; transform: scale(0.96); }

.tpr-pos-full-label {
    font-size: 0.68rem;
    color: var(--tpr-text-muted);
    font-style: italic;
    flex-shrink: 0;
}
.tpr-spin-actions { margin-top: 4px; }

/* ============================================================
   ROSTER BOARD
============================================================ */
.tpr-roster-board {
    background: var(--tpr-surface);
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    padding: 14px;
    box-shadow: var(--tpr-shadow);
}
.tpr-board-title {
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tpr-text) !important;
    background: none !important;
    margin: 0 0 12px !important;
    border: none !important;
    border-bottom: 2px solid var(--tpr-border) !important;
    padding: 0 0 8px !important;
    line-height: inherit !important;
}
.tpr-dark .tpr-board-title { color: #d4e4f0 !important; }
.tpr-roster-section { margin-bottom: 12px; }
.tpr-section-label {
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tpr-text-muted);
    margin-bottom: 6px;
}
.tpr-roster-slots { display: flex; flex-direction: column; gap: 4px; }
.tpr-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tpr-surface-2);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.82rem;
}
.tpr-slot.empty {
    border: 1.5px dashed var(--tpr-border);
    background: transparent;
    color: var(--tpr-text-muted);
    font-style: italic;
    font-size: 0.78rem;
}
@keyframes tpr-slot-fill {
    0%   { opacity: 0; transform: translateX(-6px); background: rgba(41,128,185,0.15); }
    60%  { opacity: 1; transform: translateX(2px); }
    100% { opacity: 1; transform: translateX(0); background: var(--tpr-surface-2); }
}
.tpr-slot-filled-anim {
    animation: tpr-slot-fill 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.tpr-slot-name { font-weight: 700; flex: 1; font-size: 0.82rem; }
.tpr-slot-meta { font-size: 0.68rem; color: var(--tpr-text-muted); }
.tpr-simulate-row { margin-top: 14px; }

/* ============================================================
   RESULTS
============================================================ */
.tpr-results-inner { text-align: center; }
.tpr-results-record {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--tpr-text);
    margin-bottom: 2px;
    line-height: 1;
}
.tpr-results-pts {
    font-size: 0.9rem;
    color: var(--tpr-text-muted);
    margin-bottom: 14px;
}
.tpr-results-verdict {
    font-size: 0.95rem;
    font-weight: 600;
    background: var(--tpr-navy);
    color: #ffffff;
    border-radius: 8px;
    margin-bottom: 16px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tpr-results-verdict span {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    line-height: 1.5;
}

/* ============================================================
   SIM EXPLAINER
============================================================ */
.tpr-sim-explainer {
    margin: 14px 0;
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    overflow: hidden;
    text-align: left;
}
.tpr-explainer-toggle {
    width: 100%;
    background: var(--tpr-surface-2);
    border: none;
    padding: 11px 14px;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--tpr-text);
    touch-action: manipulation;
}
.tpr-explainer-toggle:active { background: var(--tpr-grey-mid); }
.tpr-toggle-arrow { font-size: 0.75rem; flex-shrink: 0; }
.tpr-explainer-body { padding: 14px; background: var(--tpr-surface); }
.tpr-explainer-intro {
    font-size: 0.82rem;
    color: var(--tpr-text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
}
.tpr-explainer-weights { margin-bottom: 14px; }
.tpr-weight-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.78rem;
}
.tpr-weight-label { min-width: 150px; font-weight: 600; }
.tpr-weight-bar-wrap {
    flex: 1;
    background: var(--tpr-surface-2);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}
.tpr-weight-bar { display: block; height: 100%; background: var(--tpr-blue-light); border-radius: 4px; }
.tpr-weight-pct { font-weight: 700; color: var(--tpr-blue-light); min-width: 32px; text-align: right; font-size: 0.78rem; }

.tpr-sim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin-bottom: 12px;
}
.tpr-sim-table th, .tpr-sim-table td {
    padding: 5px 8px;
    border: 1px solid var(--tpr-border);
    text-align: left;
}
.tpr-sim-table th { background: var(--tpr-surface-2); font-weight: 700; }
.tpr-sim-total td { font-weight: 700; background: var(--tpr-navy); color: #ffffff; }
.tpr-explainer-notes p { font-size: 0.78rem; color: var(--tpr-text-muted); margin: 4px 0; line-height: 1.4; }

/* ============================================================
   POST-MORTEM
============================================================ */
.tpr-postmortem {
    margin: 14px 0;
    background: var(--tpr-surface);
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    padding: 14px;
    text-align: left;
}
.tpr-postmortem-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tpr-text-muted);
    margin: 0 0 8px;
}
.tpr-pm-line {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 6px 10px 6px 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--tpr-text-muted);
    border-bottom: 1px solid var(--tpr-border);
}
.tpr-pm-line:last-child { border-bottom: none; }
.tpr-pm-text { color: var(--tpr-text-muted); }
.tpr-pm-strength { background: transparent; }
.tpr-pm-weakness { background: transparent; }
.tpr-pm-note     { background: transparent; }
.tpr-pm-icon { display: none; }

/* ============================================================
   RESULTS ROSTER
============================================================ */
.tpr-results-breakdown { text-align: left; margin: 14px 0; background: transparent; border: none; }
#tpr-app .tpr-results-breakdown h3,
.tpr-results-breakdown h3 {
    font-size: 1.25rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tpr-text) !important;
    background: none !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
    font-weight: 900;
    line-height: inherit !important;
}
#tpr-app.tpr-dark .tpr-results-breakdown h3 { color: #d4e4f0 !important; }
.tpr-click-hint {
    font-size: 0.72rem;
    color: var(--tpr-text-muted);
    font-style: italic;
    margin: 0 0 10px;
}
.tpr-final-section { margin-bottom: 4px; }
.tpr-final-roster { display: flex; flex-direction: column; gap: 4px; }
.tpr-final-player {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f8fb;
    border-radius: 6px;
    padding: 9px 10px;
    min-height: 48px;
}
.tpr-final-player-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tpr-player-name-btn {
    background: none;
    border: none;
    padding: 0;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--tpr-blue-light);
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    touch-action: manipulation;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
.tpr-player-name-btn:active { color: var(--tpr-text); }
.tpr-final-meta {
    font-size: 0.68rem;
    color: var(--tpr-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpr-final-rating {
    font-size: 0.9rem;
    font-weight: 900;
    flex-shrink: 0;
    min-width: 26px;
    text-align: right;
    color: var(--tpr-text);
}
.tpr-final-rating.rating-elite { color: var(--tpr-gold); }
.tpr-final-rating.rating-great { color: var(--tpr-blue-light); }
.tpr-final-rating.rating-solid { color: #3daa5c; }

/* ============================================================
   RESULTS ACTIONS
============================================================ */
/* ============================================================
   RESULTS SHARE ACTION ROW + DROPDOWNS
============================================================ */
.tpr-mobile-share-row {
    display: none;
    margin-bottom: 10px;
}
.tpr-mobile-share-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 0.95rem;
    min-height: 48px;
}
@media (max-width: 699px) {
    .tpr-mobile-share-row  { display: block; }
    .tpr-share-action-row  { display: none; }
}

.tpr-share-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
@media (min-width: 700px) {
    .tpr-share-action-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
}
.tpr-share-action-row .tpr-btn-card {
    width: 100%;
    justify-content: center;
}
.tpr-submit-wrap {
    grid-column: 1 / -1;
}
.tpr-play-again-wrap {
    grid-column: auto;
}
.tpr-play-again-wrap .tpr-btn-card {
    width: 100%;
    justify-content: center;
}
.tpr-share-dd-wrap {
    position: relative;
}
.tpr-btn-card {
    background: var(--tpr-surface);
    border: 2px solid var(--tpr-border);
    color: var(--tpr-text);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: var(--tpr-radius);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    touch-action: manipulation;
    transition: border-color 0.15s;
}
.tpr-btn-card:hover { border-color: var(--tpr-blue-light); }
.tpr-btn-card.open  { border-color: var(--tpr-blue-light); }
.tpr-dd-caret { font-size: 0.65rem; opacity: 0.6; }
.tpr-share-dd {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--tpr-surface);
    border: 1px solid var(--tpr-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
}
.tpr-share-dd.open { display: block; }
@media (hover: hover) {
    .tpr-share-dd-wrap:hover .tpr-share-dd { display: block; }
    .tpr-share-dd-wrap:hover .tpr-btn-card { border-color: var(--tpr-blue-light); }
}
.tpr-dd-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--tpr-text);
    transition: background 0.1s;
}
.tpr-dd-item:hover { background: var(--tpr-surface-2); }
.tpr-submit-wrap {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tpr-rank-reveal {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tpr-blue-light);
    padding: 6px 0;
    line-height: 1.4;
}

/* ============================================================
   RESULTS TWO-PANEL LAYOUT
============================================================ */
.tpr-results-panels {
    display: block;
}
.tpr-results-main    { min-width: 0; }
.tpr-results-secondary { min-width: 0; }

@media (max-width: 599px) {
    .tpr-results-secondary { order: -1; }
}
@media (min-width: 1200px) {
    .tpr-results-panels {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 24px;
        align-items: start;
    }
}

/* .tpr-results-actions removed — Play Again moved to top action row */

/* ============================================================
   POSITION BADGE COLOURS
============================================================ */
.tpr-player-pos-badge.pos-LW,
.tpr-pool-pos-badge.pos-LW  { background: #c0392b; }
.tpr-player-pos-badge.pos-C,
.tpr-pool-pos-badge.pos-C   { background: #1a5c8a; }
.tpr-player-pos-badge.pos-RW,
.tpr-pool-pos-badge.pos-RW  { background: #d35400; }
.tpr-player-pos-badge.pos-D,
.tpr-pool-pos-badge.pos-D   { background: #27ae60; }
.tpr-player-pos-badge.pos-G,
.tpr-pool-pos-badge.pos-G   { background: #6c3483; }

/* pool header position badge — hidden, position shown as text only */
.tpr-pool-pos-badge {
    display: none !important;
}

/* ============================================================
   PLAYER MODAL
============================================================ */
@keyframes tpr-dialog-in {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
@keyframes tpr-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes tpr-sheet-out {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}
@keyframes tpr-overlay-in {
    from { background: rgba(0,0,0,0); }
    to   { background: rgba(0,0,0,0.75); }
}
.tpr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: tpr-overlay-in 0.25s ease-out;
}
.tpr-modal {
    background: var(--tpr-surface);
    border-radius: 16px 16px 0 0;
    padding: 20px 18px 36px;
    width: 100%;
    max-width: 100%;
    position: relative;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.3);
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: tpr-sheet-in 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    transform-origin: bottom center;
    will-change: transform;
}
.tpr-modal.tpr-closing {
    animation: tpr-sheet-out 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
/* Pull handle */
.tpr-modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--tpr-grey-mid);
    border-radius: 2px;
    margin: 0 auto 18px;
    opacity: 0.5;
}
.tpr-modal-close {
    display: block;
    width: 80px;
    margin: 0 auto 16px;
    background: var(--tpr-surface-2);
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--tpr-text-muted);
    text-align: center;
    touch-action: manipulation;
    letter-spacing: 0.04em;
}
.tpr-modal-close:hover { color: var(--tpr-text); }
.tpr-modal-pos-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    color: white;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.tpr-modal-name {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--tpr-text);
    margin: 0 0 3px;
}
.tpr-modal-era {
    font-size: 0.78rem;
    color: var(--tpr-text-muted);
    margin-bottom: 16px;
}
.tpr-modal-loading {
    color: var(--tpr-text-muted);
    font-style: italic;
    padding: 16px 0;
    text-align: center;
    font-size: 0.85rem;
}
.tpr-modal-career-line {
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    background: var(--tpr-navy);
    color: #ffffff;
    padding: 9px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}
.tpr-modal-peak, .tpr-modal-awards {
    font-size: 0.82rem;
    margin-bottom: 10px;
    line-height: 1.5;
}
.tpr-modal-awards ul { margin: 4px 0 0 16px; padding: 0; }
.tpr-modal-awards li { margin-bottom: 2px; font-size: 0.82rem; }
.tpr-modal-legacy {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--tpr-text);
    border-top: 1px solid var(--tpr-grey-mid);
    padding-top: 12px;
    margin-top: 10px;
}
.tpr-modal-error { color: var(--tpr-red); font-style: italic; font-size: 0.82rem; }

/* ============================================================
   DESKTOP OVERRIDES  (≥ 600px)
============================================================ */
@media (max-width: 599px) {
    .tpr-lb-mode-toggle,
    .tpr-lb-table-wrap { padding-left: 5px; padding-right: 5px; }
}

@media (min-width: 600px) {
    .tpr-header { padding: 12px 0; }
    .tpr-logo   { font-size: 3rem; }
    .tpr-title  { font-size: 2rem; }
    .tpr-subtitle { font-size: 0.95rem; }

    .tpr-mode-selector,
    .tpr-game-area,
    .tpr-results { padding: 28px 0; }

    .tpr-mode-card { padding: 20px 24px; font-size: 0.9rem; }

    /* Status bar back to single row */
    .tpr-status-bar {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0;
        background: var(--tpr-navy);
    }
    .tpr-status-item {
        padding: 10px 16px;
        min-width: 100px;
        border-right: 1px solid rgba(255,255,255,0.12);
    }
    .tpr-status-item:last-child { border-right: none; }
    .tpr-status-label { font-size: 0.68rem; }
    .tpr-status-val   { font-size: 0.92rem; }

    .tpr-spin-panel { padding: 20px; }
    .tpr-spin-franchise { font-size: 1.5rem; }
    .tpr-spin-era { font-size: 1rem; }

    .tpr-btn-spin {
        width: auto;
        padding: 13px 40px;
        font-size: 1.1rem;
    }
    .tpr-spin-actions { text-align: center; }

    .tpr-player-name { font-size: 0.95rem; }
    .tpr-player-meta { font-size: 0.75rem; }

    .tpr-roster-board { padding: 20px; }
    .tpr-board-title  { font-size: 1rem; }

    .tpr-results-record { font-size: 3.5rem; }

    /* Modal as centred dialog on desktop */
    .tpr-modal-overlay { align-items: center; padding: 20px; }
    .tpr-modal {
        border-radius: 12px;
        max-width: 480px;
        padding: 28px;
        animation: tpr-dialog-in 0.2s ease-out;
    }
    .tpr-modal.tpr-closing { animation: none; }
    .tpr-modal::before { display: none; }
    .tpr-roster-modal { max-width: 540px; border-radius: 12px; }
    /* On desktop the pill close looks odd — restore to corner button */
    .tpr-modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        margin: 0;
        border-radius: 50%;
        padding: 0;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

@media (min-width: 860px) {
    .tpr-wrap { padding: 20px 0 40px; }
    .tpr-header { padding: 16px 0; }
}

/* ============================================================
   PLAYER TYPE BADGES  (v2.0)
============================================================ */
.tpr-type-badge {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 3px;
    color: #ffffff;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 1px;
}
.tpr-type-SNP { background: #e74c3c; }   /* Sniper       — red    */
.tpr-type-PLY { background: #2980b9; }   /* Playmaker    — blue   */
.tpr-type-TWF { background: #16a085; }   /* Two-Way Fwd  — teal   */
.tpr-type-PWF { background: #8e44ad; }   /* Power Fwd    — purple */
.tpr-type-GRN { background: #7f8c8d; }   /* Grinder      — grey   */
.tpr-type-OFD { background: #d35400; }   /* Offensive D  — orange */
.tpr-type-DFD { background: #27ae60; }   /* Defensive D  — green  */
.tpr-type-TWD { background: #1a5c8a; }   /* Two-Way D    — navy   */
.tpr-type-G   { background: #2c3e50; }   /* Goalie       — dark   */

/* ============================================================
   DYNASTY BANNER  (v2.0)
============================================================ */
.tpr-dynasty-banner {
    background: linear-gradient(135deg, #b8860b, #d4af37, #b8860b);
    color: #1a1a00;
    font-weight: 800;
    font-size: 0.85rem;
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(212,175,55,0.4);
}

/* ============================================================
   TABS  (v3.0)
============================================================ */
.tpr-tabs {
    display: flex;
    background: var(--tpr-navy);
    border-top: 1px solid rgba(255,255,255,0.1);
}
.tpr-tab {
    flex: 1;
    padding: 11px 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    touch-action: manipulation;
}
.tpr-tab.active {
    color: #ffffff;
    border-bottom-color: var(--tpr-gold);
}
.tpr-tab-panel {
    background: var(--tpr-bg);
    border: none;
    padding: 8px 12px;
}
@media (min-width: 600px) {
    .tpr-tab-panel { padding: 8px 32px; }
}
@media (min-width: 1000px) {
    .tpr-tab-panel { padding: 8px 100px; }
}

/* ============================================================
   TWITTER AUTH BAR  (v3.0)
============================================================ */
.tpr-auth-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 0 6px;
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-sizing: border-box;
}
.tpr-auth-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tpr-btn-twitter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity 0.15s;
}
.tpr-btn-twitter:hover { opacity: 0.82; }
.tpr-btn-twitter-out {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    touch-action: manipulation;
}
.tpr-auth-notice {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    font-style: italic;
}

/* ============================================================
   SUBMIT SCORE ROW  (v3.0)
============================================================ */
.tpr-submit-score-row {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
}
.tpr-submit-hint {
    font-size: 0.82rem;
    color: var(--tpr-text-muted);
    margin-bottom: 10px;
}
.tpr-btn-submit-score {
    background: var(--tpr-surface);
    color: var(--tpr-text);
    border: 2px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    padding: 9px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color 0.15s;
    white-space: nowrap;
}
.tpr-btn-submit-score:hover:not(:disabled) { border-color: var(--tpr-blue-light); }
.tpr-btn-submit-score:disabled { opacity: 0.4; cursor: not-allowed; }
.tpr-submit-feedback { margin-top: 8px; font-size: 0.82rem; font-weight: 600; }
.tpr-submit-ok    { color: #27ae60; }
.tpr-submit-error { color: var(--tpr-red); }

/* ============================================================
   LEADERBOARD  (v3.0)
============================================================ */
.tpr-lb-top-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.tpr-lb-top-tab {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    background: var(--tpr-surface);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--tpr-text-muted);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tpr-lb-top-tab.active {
    border-color: var(--tpr-blue);
    background: var(--tpr-blue);
    color: #fff;
}
.tpr-lb-top-tab:hover:not(.active) {
    border-color: var(--tpr-blue-light);
    color: var(--tpr-text);
}

.tpr-lb-mode-toggle {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
}
.tpr-lb-tabs-row {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.tpr-lb-tabs-row::-webkit-scrollbar { display: none; }
.tpr-lb-tabs-row .tpr-lb-tab { flex-shrink: 0; }
.tpr-lb-order-toggle {
    display: flex;
    gap: 8px;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--tpr-border);
    margin-bottom: 4px;
    justify-content: center;
}
.tpr-lb-order {
    background: none;
    border: none;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tpr-text-muted);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    border-bottom: 3px solid transparent;
    transition: all 0.15s;
}
.tpr-lb-order.active {
    color: var(--tpr-text);
    border-bottom-color: var(--tpr-gold);
}
.tpr-lb-order:hover:not(.active) { color: var(--tpr-text); }

.tpr-lb-tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 6px;
    background: var(--tpr-surface);
    border: 2px solid var(--tpr-border);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--tpr-text-muted);
    transition: border-color 0.15s, color 0.15s;
    touch-action: manipulation;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpr-lb-tab.active {
    border-color: var(--tpr-blue-light);
    color: var(--tpr-text);
}
.tpr-leaderboard-wrap { padding: 4px 0; width: 100%; overflow-x: hidden; box-sizing: border-box; }
.tpr-lb-mode-toggle,
.tpr-lb-table-wrap { padding-left: 24px; padding-right: 24px; }
.tpr-lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    table-layout: fixed; /* prevents table from overflowing on mobile */
}
.tpr-lb-table th {
    text-align: left;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tpr-text-muted);
    padding: 6px 4px;
    border-bottom: 2px solid var(--tpr-border);
    overflow: hidden;
}
.tpr-lb-table td { padding: 8px 4px; border-bottom: 1px solid var(--tpr-grey-light); vertical-align: middle; overflow: hidden; }
.tpr-lb-top3 td  { background: rgba(212,175,55,0.06); }

/* Column widths: rank | player | record | pts | eye */
.tpr-lb-table col.col-rank   { width: 32px; }
.tpr-lb-table col.col-player { width: auto; }  /* flex: takes remaining space */
.tpr-lb-table col.col-record { width: 70px; }
.tpr-lb-table col.col-pts    { width: 38px; }
.tpr-lb-table col.col-eye    { width: 24px; }

.tpr-lb-rank     { font-size: 1rem; width: 32px; text-align: center; }
.tpr-lb-player   { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tpr-lb-player-info { min-width: 0; flex: 1; }
.tpr-lb-avatar   { border-radius: 50%; flex-shrink: 0; width: 22px; height: 22px; }
.tpr-lb-name     { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tpr-lb-handle   { font-size: 0.68rem; color: var(--tpr-text-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpr-lb-record   { color: var(--tpr-text-muted); font-size: 0.72rem; white-space: nowrap; text-align: center; }
.tpr-lb-pts      { font-size: 0.95rem; font-weight: 700; text-align: center; white-space: nowrap; color: var(--tpr-text); }
.tpr-lb-table th:last-child { text-align: center; }
.tpr-lb-view-hint { display: none; } /* hide eye icon text on mobile */

@media (min-width: 600px) {
    .tpr-lb-table    { font-size: 0.88rem; table-layout: auto; }
    .tpr-lb-pts      { font-size: 1.08rem; }
    .tpr-lb-avatar   { width: 28px; height: 28px; }
    .tpr-lb-rank     { width: 36px; font-size: 1.1rem; }
    .tpr-lb-record   { font-size: 0.78rem; }
    .tpr-lb-view-hint { display: inline; }
    .tpr-tab         { font-size: 0.92rem; padding: 12px 16px; }
}

/* ============================================================
   MOBILE FULL-SCREEN DRAFT FLOW  (< 700px)
============================================================ */
@keyframes tpr-draft-flash {
    0%   { transform: scale(1);    opacity: 1; }
    50%  { transform: scale(0.96); opacity: 0.5; background: rgba(41,128,185,0.15); }
    100% { transform: scale(0.94); opacity: 0; }
}
.tpr-player-card.tpr-drafting {
    animation: tpr-draft-flash 0.18s ease-out forwards;
    pointer-events: none;
}

@media (max-width: 699px) {
    /* Simple mobile layout — roster sits below spin panel in normal flow */
    .tpr-roster-board {
        margin-top: 12px;
        padding-bottom: 24px;
    }
    .tpr-spin-panel { min-height: auto; }
    .tpr-player-pool { padding-bottom: 12px; }

    /* Scroll hint */
    .tpr-scroll-hint {
        text-align: center;
        padding: 8px 0 4px;
        display: none; /* shown via JS only on mobile */
    }
    .tpr-scroll-hint-link {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--tpr-blue-light);
        text-decoration: none;
        padding: 6px 16px;
        border: 1px solid var(--tpr-blue-light);
        border-radius: 20px;
        display: inline-block;
    }
}



/* Scroll hint is mobile-only — always hidden on desktop */
@media (min-width: 700px) {
    .tpr-scroll-hint { display: none !important; }
}


/* ============================================================
   SEASON SCHEDULE
============================================================ */
.tpr-schedule-accordion {
    margin-bottom: 8px;
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    overflow: hidden;
    text-align: left;
}

.tpr-schedule-grid { padding: 10px 0 4px; }

.tpr-schedule-month { margin-bottom: 10px; }
.tpr-schedule-month-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tpr-text-muted);
    margin-bottom: 4px;
}
.tpr-schedule-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.tpr-game-cell {
    width: 28px;
    height: 24px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: transform 0.1s;
}
.tpr-game-cell:hover { transform: scale(1.15); z-index: 1; }

/* Tooltip on desktop */
.tpr-game-cell[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.88);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 100;
}
/* Mobile tap tooltip */
.tpr-cell-tip {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.88);
    color: #fff;
    font-size: 0.75rem;
    padding: 8px 14px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 500;
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
}

.tpr-schedule-legend {
    font-size: 0.70rem;
    color: var(--tpr-text-muted);
    margin-bottom: 8px;
    font-style: italic;
    padding: 0 14px;
}

.tpr-schedule-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    padding: 8px 0 10px;
    border-top: 1px solid var(--tpr-border);
    margin-top: 6px;
    color: var(--tpr-text-muted);
}
.tpr-schedule-stats strong { color: var(--tpr-text); }

.tpr-full-schedule-btn {
    width: 100%;
    background: none;
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    padding: 7px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tpr-text-muted);
    cursor: pointer;
    margin-bottom: 8px;
}
.tpr-full-schedule-btn:hover { color: var(--tpr-text); }

.tpr-schedule-table { font-size: 0.75rem; }
.tpr-schedule-table td { padding: 4px 8px; }
.tpr-sched-era { color: var(--tpr-text-muted); font-size: 0.68rem; margin-left: 3px; }
.tpr-sched-ha { font-size: 0.85rem; }
.tpr-sched-w   td:last-child { color: #2a7a3b; }
.tpr-sched-otl td:last-child { color: #b07a10; }
.tpr-sched-l   td:last-child { color: #9b2335; }

/* Striped rows */
.tpr-sched-stripe { background: var(--tpr-bg-subtle, rgba(0,0,0,0.03)); }

.tpr-dark .tpr-sched-w   td:last-child { color: #5cb87a; }
.tpr-dark .tpr-sched-otl td:last-child { color: #d4a43c; }
.tpr-dark .tpr-sched-l   td:last-child { color: #e0554a; }
.tpr-dark .tpr-sched-stripe { background: rgba(255,255,255,0.04); }


/* ============================================================
   FREE PLAY MODE PICKER
============================================================ */
.tpr-freeplay-row {
    display: flex;
    gap: 12px;
    margin: 12px 0 8px;
    flex-wrap: wrap;
}
.tpr-freeplay-field {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tpr-freeplay-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tpr-text-muted);
}
.tpr-freeplay-select {
    padding: 8px 10px;
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    background: var(--tpr-surface);
    color: var(--tpr-text);
    font-size: 0.85rem;
    cursor: pointer;
}
.tpr-freeplay-select:focus {
    outline: none;
    border-color: var(--tpr-blue-light);
}
.tpr-freeplay-hint {
    font-size: 0.78rem;
    color: var(--tpr-text-muted);
    text-align: center;
    margin: 4px 0 0;
}
.tpr-freeplay-notice {
    font-size: 0.8rem;
    color: var(--tpr-text-muted);
    text-align: center;
    padding: 8px;
    margin: 8px 0;
    border: 1px dashed var(--tpr-border);
    border-radius: var(--tpr-radius);
}

/* ============================================================
   GM MODE RATING REVEAL ANIMATION
============================================================ */
@keyframes tpr-gm-rating-pop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    65%  { transform: scale(1.15) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.tpr-gm-rating-hidden {
    opacity: 0;
    pointer-events: none;
}
.tpr-gm-rating-reveal {
    animation: tpr-gm-rating-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Auto-reroll message */
.tpr-auto-reroll-msg {
    font-style: italic;
    color: var(--tpr-text-muted);
    font-size: 0.78rem;
}

/* ============================================================
   CELEBRATION ANIMATIONS
============================================================ */
@keyframes tpr-elite-pulse {
    0%   { color: var(--tpr-text); text-shadow: none; }
    25%  { color: var(--tpr-gold); text-shadow: 0 0 24px rgba(212,175,55,0.7), 0 0 48px rgba(212,175,55,0.4); }
    60%  { color: var(--tpr-gold); text-shadow: 0 0 12px rgba(212,175,55,0.5); }
    100% { color: var(--tpr-gold); text-shadow: none; }
}
.tpr-record-elite-pulse {
    animation: tpr-elite-pulse 1.2s ease-out forwards;
}
.tpr-dark .tpr-record-elite-pulse {
    animation: tpr-elite-pulse 1.2s ease-out forwards;
}

/* Staggered season analysis line reveal */
.tpr-pm-hidden {
    opacity: 0;
    transform: translateY(6px);
}
.tpr-pm-line {
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.tpr-pm-line:not(.tpr-pm-hidden) {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   DAILY CHALLENGE — SLIM STREAK STRIP
============================================================ */
.tpr-daily-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--tpr-navy);
    border-radius: var(--tpr-radius);
    padding: 8px 14px;
    margin-bottom: 12px;
    font-size: 0.78rem;
    flex-wrap: wrap;
}
.tpr-daily-strip-scores { color: rgba(255,255,255,0.65); flex: 1; min-width: 0; }
.tpr-daily-top           { color: rgba(255,255,255,0.85); }
.tpr-daily-top strong    { color: #fff; }
.tpr-daily-yours         { color: rgba(255,255,255,0.55); }
.tpr-daily-yours strong  { color: rgba(255,255,255,0.85); }
.tpr-daily-unplayed      { font-style: italic; }
.tpr-daily-streak {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tpr-gold);
    flex-shrink: 0;
}
.tpr-streak-icon  { font-size: 1rem; }
.tpr-streak-count { font-size: 1rem; font-weight: 900; }
.tpr-streak-label { color: rgba(255,255,255,0.55); font-weight: 400; }
.tpr-daily-streak.tpr-streak-at-risk .tpr-streak-label { color: #e8572a; font-weight: 600; }
.tpr-daily-streak.tpr-streak-at-risk .tpr-streak-icon  { animation: tpr-pulse 1.2s ease-in-out infinite; }
@keyframes tpr-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* Daily result review — shown on mode selector after playing */
#tpr-daily-review {
    margin-bottom: 14px;
}
.tpr-daily-review-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--tpr-surface);
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    padding: 10px 14px;
    font-size: 0.78rem;
}
.tpr-review-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tpr-text-muted);
    flex-basis: 100%;
}
.tpr-review-record { font-weight: 600; color: var(--tpr-text); }
.tpr-review-par-win  { color: var(--tpr-gold); font-weight: 700; }
.tpr-review-par-miss { color: var(--tpr-text-muted); }
.tpr-review-streak   { color: var(--tpr-gold); font-weight: 700; }

/* Remove unused leaderboard modal styles */
.tpr-daily-lb-modal,
.tpr-daily-lb-title { display: none; }

/* Daily result badge on results screen */
.tpr-daily-result-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(212,175,55,0.12);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tpr-gold);
}
.tpr-daily-result-icon { font-size: 1rem; }

/* Daily mode card — gold accent */
.tpr-mode-card-daily:hover { border-color: var(--tpr-gold); }
.tpr-mode-card-daily.active {
    border-color: var(--tpr-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.22);
    background: rgba(212,175,55,0.06);
}
.tpr-mode-card-played {
    opacity: 0.45;
    cursor: not-allowed !important;
    pointer-events: none;
}

.tpr-daily-card-desc {
    font-size: 0.68rem;
    color: var(--tpr-text-muted);
    line-height: 1.35;
    text-align: center;
    padding: 0 4px;
}
.tpr-daily-card-streak {
    font-size: 0.78rem;
    color: var(--tpr-gold);
    font-weight: 600;
}
.tpr-daily-card-streak.tpr-streak-at-risk {
    color: #e8572a;
}
.tpr-daily-retry-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tpr-blue-light);
    background: transparent;
    border: 1px solid var(--tpr-blue-light);
    border-radius: 4px;
    cursor: pointer;
    touch-action: manipulation;
}
.tpr-daily-retry-btn:hover { background: rgba(74,144,226,0.1); }
.tpr-daily-par-hint {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tpr-gold);
    text-align: center;
    margin-top: 4px;
    letter-spacing: 0.02em;
}
.tpr-daily-spins { color: var(--tpr-gold) !important; }

.tpr-daily-no-reroll {
    font-size: 0.75rem;
    color: var(--tpr-text-muted);
    font-style: italic;
    margin: 0 0 10px;
    padding: 8px 12px;
    background: var(--tpr-surface-2);
    border-radius: 6px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* Daily mode indicator on status bar */
.tpr-game-area.tpr-daily-active .tpr-btn-reroll { opacity: 0.35; pointer-events: none; }

/* ============================================================
   DAILY CHALLENGE — POST-GAME BLOCK
============================================================ */
.tpr-daily-postgame {
    margin: 16px 0;
    border: 1px solid var(--tpr-border);
    border-radius: var(--tpr-radius);
    overflow: hidden;
}
.tpr-daily-pg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--tpr-navy);
    gap: 12px;
    flex-wrap: wrap;
}
.tpr-daily-pg-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #fff;
}
.tpr-daily-pg-streak {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tpr-gold);
}
.tpr-daily-pg-lb { padding: 12px 14px; }
.tpr-daily-pg-lb-title {
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tpr-text-muted);
    margin-bottom: 8px;
}
.tpr-daily-mini-lb { font-size: 0.78rem; }
.tpr-daily-pg-streak {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tpr-gold);
}
.tpr-daily-pg-par {
    padding: 12px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    border-top: 1px solid var(--tpr-border);
}
.tpr-daily-par-win {
    color: var(--tpr-gold);
    background: rgba(212,175,55,0.08);
}
.tpr-daily-par-miss {
    color: var(--tpr-text-muted);
    font-weight: 500;
}
.tpr-daily-pg-tomorrow {
    padding: 10px 14px;
    font-size: 0.78rem;
    color: var(--tpr-text-muted);
    border-top: 1px solid var(--tpr-border);
}
.tpr-daily-par-label { color: rgba(255,255,255,0.65); }
.tpr-daily-par-beat strong { color: var(--tpr-gold); }

/* ============================================================
   DAILY CHALLENGE — FULL LEADERBOARD MODAL
============================================================ */
.tpr-daily-lb-modal { max-height: 88vh; overflow-y: auto; }
.tpr-daily-lb-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 16px;
    color: var(--tpr-text);
}

/* Dark mode overrides */
.tpr-dark .tpr-daily-banner   { background: var(--tpr-surface); }
.tpr-dark .tpr-daily-postgame { background: var(--tpr-surface); border-color: var(--tpr-border); }
.tpr-dark .tpr-daily-pg-lb    { background: var(--tpr-surface); }

/* ============================================================
   DARK MODE OVERRIDES  — elements that need specific dark treatment
============================================================ */

/* Spin panel, roster board, explainer, postmortem in dark */
.tpr-dark .tpr-spin-panel,
.tpr-dark .tpr-roster-board,
.tpr-dark .tpr-sim-explainer,
.tpr-dark .tpr-postmortem,
.tpr-dark .tpr-submit-score-row,
.tpr-dark .tpr-modal { background: var(--tpr-surface); border-color: var(--tpr-border); }
.tpr-dark .tpr-results-breakdown { background: transparent; border-color: transparent; }

.tpr-dark .tpr-player-card            { background: var(--tpr-surface-2); border-color: transparent; }
.tpr-dark .tpr-player-card:hover      { background: rgba(41,128,185,0.15); border-color: var(--tpr-blue-light); }
.tpr-dark .tpr-slot                   { background: var(--tpr-surface-2); }
.tpr-dark .tpr-slot.empty             { border-color: var(--tpr-border); }
.tpr-dark .tpr-final-player           { background: #1a2535; }
.tpr-dark .tpr-lb-table th            { background: var(--tpr-surface-2); color: var(--tpr-text-muted); }
.tpr-dark .tpr-lb-table td            { border-color: var(--tpr-border); }
.tpr-dark .tpr-lb-top3 td             { background: rgba(212,175,55,0.08); }
.tpr-dark .tpr-explainer-toggle       { background: var(--tpr-surface-2); color: var(--tpr-text); }
.tpr-dark .tpr-explainer-toggle:active{ background: var(--tpr-border); }
.tpr-dark .tpr-explainer-body         { background: var(--tpr-surface); }
.tpr-dark .tpr-sim-table th           { background: var(--tpr-surface-2); }
.tpr-dark .tpr-sim-table td           { border-color: var(--tpr-border); }
.tpr-dark .tpr-pm-strength,
.tpr-dark .tpr-pm-weakness,
.tpr-dark .tpr-pm-note     { background: transparent; }
.tpr-dark .tpr-pm-line { border-bottom-color: #2a3a4d; }
.tpr-dark .tpr-mode-card              { background: var(--tpr-surface); border-color: var(--tpr-border); }
.tpr-dark .tpr-lb-tab                 { background: var(--tpr-surface); border-color: var(--tpr-border); color: var(--tpr-text-muted); }
.tpr-dark .tpr-lb-tab.active          { border-color: var(--tpr-blue); color: var(--tpr-text); }
.tpr-dark .tpr-btn-reroll             { background: var(--tpr-surface); border-color: var(--tpr-border); color: var(--tpr-text); }
.tpr-dark .tpr-modal-career-line      { background: var(--tpr-navy); }
.tpr-dark .tpr-modal-overlay          { background: rgba(0,0,0,0.85); }
.tpr-dark .tpr-modal-close            { background: var(--tpr-surface-2); color: var(--tpr-text); }
.tpr-dark .tpr-weight-bar-wrap        { background: var(--tpr-surface-2); }
.tpr-dark .tpr-pool-pos-header        { border-color: var(--tpr-border); }
.tpr-dark input, .tpr-dark select     { background: var(--tpr-surface-2); color: var(--tpr-text); border-color: var(--tpr-border); }

/* ── Dark mode: colour overrides for hardcoded / navy values ── */
.tpr-dark .tpr-results-record          { color: var(--tpr-text); }
.tpr-dark .tpr-lb-pts                  { color: var(--tpr-text); }
.tpr-dark .tpr-player-rating           { color: var(--tpr-text); }
.tpr-dark .tpr-player-rating.rating-great  { color: var(--tpr-blue-light); }
.tpr-dark .tpr-player-rating.rating-solid  { color: #4ec97a; }
.tpr-dark .tpr-final-rating            { color: var(--tpr-text); }
.tpr-dark .tpr-final-rating.rating-great   { color: var(--tpr-blue-light); }
.tpr-dark .tpr-final-rating.rating-solid   { color: #4ec97a; }
.tpr-dark .tpr-mode-spins              { color: var(--tpr-blue-light) !important; }
.tpr-dark .tpr-pool-slots-left         { color: var(--tpr-blue-light); }
.tpr-dark .tpr-weight-pct             { color: var(--tpr-blue-light); }
.tpr-dark .tpr-weight-bar             { background: var(--tpr-blue-light); }
.tpr-dark .tpr-btn-submit-score        { background: var(--tpr-surface); color: var(--tpr-text); border-color: var(--tpr-border); }
.tpr-dark .tpr-pm-text { color: var(--tpr-text-muted); }
.tpr-dark .tpr-gs-val                  { color: var(--tpr-gold); }
.tpr-dark .tpr-gs-lbl                  { color: var(--tpr-text-muted); }
.tpr-dark .tpr-gs-bar-track            { background: rgba(255,255,255,0.08); }
.tpr-dark .tpr-results-pts             { color: var(--tpr-text-muted); }
.tpr-dark .tpr-mode-card               { color: var(--tpr-text); }
.tpr-dark .tpr-mode-label              { color: var(--tpr-text) !important; }
.tpr-dark .tpr-mode-card small         { color: var(--tpr-text-muted); }
.tpr-dark .tpr-mode-card strong        { color: var(--tpr-text); }
.tpr-dark .tpr-pool-pos-header         { color: var(--tpr-text-muted); border-color: var(--tpr-border); }
.tpr-dark .tpr-section-label            { color: var(--tpr-text); }
.tpr-dark .tpr-player-name             { color: var(--tpr-text); }
.tpr-dark .tpr-player-meta             { color: var(--tpr-text-muted); }
.tpr-dark .tpr-final-meta              { color: var(--tpr-text-muted); }
.tpr-dark .tpr-sim-table               { color: var(--tpr-text); }
.tpr-dark .tpr-sim-table td            { color: var(--tpr-text); border-color: var(--tpr-border); }
.tpr-dark .tpr-sim-total td            { color: var(--tpr-gold); }
.tpr-dark .tpr-results-breakdown h3,
#tpr-app .tpr-dark .tpr-results-breakdown h3,
.tpr-dark #tpr-results h3 { color: #d4e4f0 !important; }
.tpr-dark .tpr-click-hint              { color: var(--tpr-text-muted); }
.tpr-dark .tpr-reroll-count            { background: var(--tpr-border); color: var(--tpr-text); }
.tpr-dark .tpr-slot-arch               { color: var(--tpr-text-muted); }
.tpr-dark .tpr-final-ovr-label         { color: var(--tpr-text-muted); }
.tpr-dark .tpr-roster-header           { border-color: var(--tpr-border); }
.tpr-dark .tpr-roster-gm-name          { color: var(--tpr-text); }
.tpr-dark .tpr-roster-gm-handle        { color: var(--tpr-text-muted); }
.tpr-dark .tpr-roster-franchise        { color: var(--tpr-text-muted); }
.tpr-dark .tpr-roster-pos-label        { color: var(--tpr-text-muted); border-color: var(--tpr-border); }
.tpr-dark .tpr-roster-player-name      { color: var(--tpr-text); }
.tpr-dark .tpr-roster-player-meta      { color: var(--tpr-text-muted); }
.tpr-dark .tpr-roster-record           { color: var(--tpr-text-muted); }
.tpr-dark .tpr-roster-verdict          { color: var(--tpr-text-muted); }
.tpr-dark .tpr-arch-pill               { color: var(--tpr-text-muted); background: var(--tpr-surface-2); border-color: var(--tpr-border); }
.tpr-dark .tpr-lb-hint                 { color: var(--tpr-text-muted); }
.tpr-dark .tpr-postmortem-title        { color: var(--tpr-text); }
.tpr-dark .tpr-explainer-intro         { color: var(--tpr-text); }
.tpr-dark .tpr-explainer-notes p       { color: var(--tpr-text-muted); }
.tpr-dark .tpr-weight-label            { color: var(--tpr-text); }

/* ============================================================
   THEME TOGGLE BUTTON
============================================================ */
.tpr-theme-toggle {
    position: static;
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 5px 12px;
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.04em;
    touch-action: manipulation;
    transition: background 0.15s;
    white-space: nowrap;
}
.tpr-theme-toggle:hover { background: rgba(255,255,255,0.2); }
.tpr-theme-toggle .tpr-toggle-icon { font-size: 0.9rem; }

/* Header needs relative positioning for the toggle */

/* ── Result Stats Bar — 2-column grid ────────────────────────── */
.tpr-result-stats-bar { margin: 16px 0 8px; }

.tpr-gs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    max-width: 520px;
    margin: 0 auto;
}
.tpr-gs-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tpr-gs-val {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tpr-gold, #d4af37);
}
.tpr-gs-lbl {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tpr-text-muted);
}
.tpr-gs-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(128,128,128,0.18);
    border-radius: 3px;
    overflow: hidden;
}
.tpr-gs-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .55s ease;
}
.tpr-fill-attack  { background: linear-gradient(90deg, #e05a1a, #e83b1a); }
.tpr-fill-defence { background: linear-gradient(90deg, #1a7ae0, #1ac8e0); }
.tpr-fill-mid     { background: linear-gradient(90deg, #7b4fd4, #a855f7); }

/* ── Reroll buttons with count bubble ───────────────────────── */
.tpr-btn-reroll {
    position: relative;
    padding-right: 36px !important;
}
.tpr-reroll-count {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--tpr-navy, #1a2a3a);
    color: #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.tpr-btn-reroll.tpr-reroll-empty {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Interior content ───────────────────────────────────────── */
.tpr-results-inner { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.tpr-spin-panel, .tpr-roster-board { max-width: 900px; margin: 0 auto; }
.tpr-mode-selector { max-width: 700px; margin: 0 auto; }

@media (min-width: 1200px) {
    /* Remove centering/max-width constraints so panels fill grid columns */
    .tpr-game-area .tpr-spin-panel,
    .tpr-game-area .tpr-roster-board {
        max-width: none;
        margin: 0;
    }
    /* Pad only the game area, not the whole wrap */
    .tpr-game-area {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ── Slot machine spin animation ────────────────────────────── */
@keyframes tpr-slot-spin {
    0%   { opacity: 1; transform: translateY(0); }
    20%  { opacity: 0; transform: translateY(-8px); }
    40%  { opacity: 0; transform: translateY(8px); }
    70%  { opacity: 0.6; transform: translateY(-3px); }
    100% { opacity: 1; transform: translateY(0); }
}
.tpr-spin-anim {
    animation: tpr-slot-spin 0.55s ease-in-out;
}

/* ── GM Mode toggle on challenge screen ─────────────────────── */
.tpr-gm-mode-row {
    margin: 16px auto 12px;
    max-width: 420px;
    display: flex;
    justify-content: center;
}
.tpr-gm-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 16px;
    border: 1px solid var(--tpr-border);
    border-radius: 10px;
    background: var(--tpr-surface);
    transition: border-color 0.2s;
}
.tpr-gm-label:hover { border-color: var(--tpr-gold); }
.tpr-gm-checkbox { display: none; }
.tpr-gm-toggle-ui {
    flex-shrink: 0;
    width: 38px; height: 22px;
    background: var(--tpr-border);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
}
.tpr-gm-toggle-ui::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 3px; left: 3px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tpr-gm-checkbox:checked + .tpr-gm-toggle-ui { background: var(--tpr-gold); }
.tpr-gm-checkbox:checked + .tpr-gm-toggle-ui::after { left: 19px; }
.tpr-gm-text {
    font-size: 0.82rem;
    color: var(--tpr-text-muted);
    line-height: 1.3;
}
.tpr-gm-text strong { color: var(--tpr-text); }

/* GM Mode indicator replaced by status item */

/* ── Status bar — centered items ────────────────────────────── */
.tpr-status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

/* ── Remove position labels from final roster ───────────────── */
.tpr-final-section .tpr-section-label { display: none; }

/* ── Tighter forward spacing ────────────────────────────────── */
#tpr-slots-LW + .tpr-roster-section,
#tpr-slots-C  + .tpr-roster-section,
#tpr-slots-RW + .tpr-roster-section  { margin-top: -4px; }

/* ── Slot archetype label ───────────────────────────────────── */
.tpr-slot-arch {
    font-weight: 400;
    color: var(--tpr-text-muted);
    font-size: 0.8em;
    margin-left: 4px;
}

/* ── OVR label in championship roster ───────────────────────── */
.tpr-final-ovr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}
.tpr-final-ovr-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--tpr-text-muted);
    text-transform: uppercase;
}

/* ── Remove underline from name in championship roster ──────── */
.tpr-player-name-btn {
    text-decoration: none !important;
    cursor: default !important;
}

/* ── Leaderboard row hover / click hint ─────────────────────── */
.tpr-lb-row:hover td { background: rgba(255,255,255,0.04); }
.tpr-lb-view-hint { font-size: 0.75em; opacity: 0.45; margin-left: 2px; }
.tpr-lb-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--tpr-text-muted);
    margin-top: 8px;
    opacity: 0.6;
}

/* ── Leaderboard roster modal ───────────────────────────────── */
.tpr-roster-overlay { z-index: 10001; }
.tpr-roster-modal {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px 18px 36px;
    border-radius: 16px 16px 0 0;
}
.tpr-roster-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tpr-border, rgba(255,255,255,0.12));
    margin-bottom: 14px;
}
.tpr-roster-avatar { border-radius: 50%; flex-shrink: 0; }
.tpr-roster-gm-info { flex: 1; min-width: 0; }
.tpr-roster-gm-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpr-roster-gm-handle { font-size: 0.78rem; color: var(--tpr-text-muted); }
.tpr-roster-score-block { text-align: right; flex-shrink: 0; }
.tpr-roster-pts { font-size: 1.5rem; font-weight: 800; color: var(--tpr-gold, #f5c518); line-height: 1; }
.tpr-roster-record { font-size: 0.8rem; color: var(--tpr-text-muted); }
.tpr-roster-verdict { font-size: 0.75rem; font-style: italic; color: var(--tpr-text-muted); margin-top: 2px; }
.tpr-roster-franchise {
    font-size: 0.8rem;
    color: var(--tpr-text-muted);
    margin-bottom: 12px;
    font-style: italic;
}
.tpr-roster-section { margin-bottom: 12px; }
.tpr-roster-pos-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tpr-text-muted);
    border-bottom: 1px solid var(--tpr-border, rgba(255,255,255,0.08));
    padding-bottom: 3px;
    margin-bottom: 5px;
}
.tpr-roster-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.tpr-roster-player-name { flex: 1; font-weight: 600; font-size: 0.9rem; }
.tpr-roster-player-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--tpr-text-muted);
}
.tpr-roster-stat-line { font-variant-numeric: tabular-nums; }
.tpr-rating-md {
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 26px;
    text-align: center;
    flex-shrink: 0;
    color: var(--tpr-text);
}
.tpr-arch-pill {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--tpr-border);
    color: var(--tpr-text-muted);
    background: var(--tpr-surface-2);
    flex-shrink: 0;
}

/* ==========================================================================
   ONBOARDING OVERLAY
   ========================================================================== */

/* Backdrop — lighter than modal so it doesn't feel like a hard block */
.tpr-ob-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998; /* just below modals */
    background: rgba(0, 0, 0, 0);
    animation: tpr-ob-backdrop-in 0.3s ease-out forwards;
    pointer-events: auto;
}
@keyframes tpr-ob-backdrop-in {
    to { background: rgba(0, 0, 0, 0.45); }
}

/* ── Card (desktop) ── */
.tpr-ob-card {
    position: fixed;
    z-index: 99999;
    background: var(--tpr-surface);
    border: 1px solid var(--tpr-border);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22), 0 0 0 2px var(--tpr-gold);
    width: 320px;
    padding: 24px 22px 20px;
    /* Centered fallback until JS positions it.
       top:50%+translateY gets overridden by JS which also handles admin bar offset. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* If WP admin bar is present (#wpadminbar at 32px), JS overrides top inline */
    animation: tpr-ob-card-in 0.22s ease-out;
}
@keyframes tpr-ob-card-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
/* When JS applies positioned class, override the centering transform */
.tpr-ob-card.tpr-ob-positioned {
    transform: none;
    animation: tpr-ob-positioned-in 0.22s ease-out;
}
@keyframes tpr-ob-positioned-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Arrow pointer — points up toward the anchored element above */
.tpr-ob-card::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--tpr-gold);
}
/* Hide arrow when card is centered (no anchor) */
.tpr-ob-card.tpr-ob-no-arrow::before { display: none; }

/* ── Step icon ── */
.tpr-ob-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 10px;
}

/* ── Step heading ── */
.tpr-ob-heading {
    font-size: 1rem;
    font-weight: 800;
    color: var(--tpr-text);
    margin: 0 0 8px;
    line-height: 1.2;
}

/* ── Step body ── */
.tpr-ob-body {
    font-size: 0.85rem;
    color: var(--tpr-text-muted);
    line-height: 1.55;
    margin: 0 0 18px;
}

/* ── Progress dots ── */
.tpr-ob-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
}
.tpr-ob-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tpr-border);
    transition: background 0.2s, transform 0.2s;
}
.tpr-ob-dot.tpr-ob-dot-active {
    background: var(--tpr-gold);
    transform: scale(1.3);
}
.tpr-ob-dot.tpr-ob-dot-done {
    background: var(--tpr-blue-light);
}

/* ── Navigation row ── */
.tpr-ob-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tpr-ob-btn-next {
    flex: 1;
    background: var(--tpr-gold);
    color: #0d1b2a;
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: inherit;
}
.tpr-ob-btn-next:hover { opacity: 0.88; }

.tpr-ob-btn-skip {
    background: none;
    border: none;
    color: var(--tpr-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 6px 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
    white-space: nowrap;
    transition: color 0.15s;
}
.tpr-ob-btn-skip:hover { color: var(--tpr-text); }

/* ── Step content transition ── */
.tpr-ob-content {
    transition: opacity 0.1s ease;
}
.tpr-ob-content.tpr-ob-fading {
    opacity: 0;
}

/* ── Exit animation ── */
.tpr-ob-card.tpr-ob-exiting {
    animation: tpr-ob-card-out 0.2s ease-in forwards;
}
.tpr-ob-backdrop.tpr-ob-exiting {
    animation: tpr-ob-backdrop-out 0.2s ease-in forwards;
}
@keyframes tpr-ob-card-out {
    to { opacity: 0; transform: translateY(6px); }
}
@keyframes tpr-ob-backdrop-out {
    to { background: rgba(0,0,0,0); }
}

/* ── MOBILE: bottom sheet ── */
@media (max-width: 599px) {
    .tpr-ob-backdrop {
        /* Lighter backdrop on mobile — sheet provides its own visual separation */
        animation: tpr-ob-backdrop-in-mobile 0.3s ease-out forwards;
    }
    @keyframes tpr-ob-backdrop-in-mobile {
        to { background: rgba(0, 0, 0, 0.3); }
    }

    .tpr-ob-card {
        /* Reset desktop positioning — CSS takes over */
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100%;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
        /* Respect home indicator on iOS */
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        animation: tpr-ob-sheet-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    @keyframes tpr-ob-sheet-in {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .tpr-ob-card.tpr-ob-exiting {
        animation: tpr-ob-sheet-out 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }
    @keyframes tpr-ob-sheet-out {
        to { transform: translateY(100%); }
    }
    /* Pull handle on mobile */
    .tpr-ob-card::after {
        content: '';
        display: block;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--tpr-grey-mid);
        border-radius: 2px;
    }
    /* Hide arrow pointer on mobile */
    .tpr-ob-card::before { display: none; }
    /* Card positioned means nothing on mobile */
    .tpr-ob-card.tpr-ob-positioned {
        animation: tpr-ob-sheet-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .tpr-ob-backdrop,
    .tpr-ob-card,
    .tpr-ob-card.tpr-ob-positioned,
    .tpr-ob-content { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   FULL ROSTER v2 — MODE CARD
   ========================================================================== */

.tpr-mode-card-v2 {
    border-color: var(--tpr-blue-light);
    background: linear-gradient(135deg, var(--tpr-surface) 0%, rgba(26,92,138,0.06) 100%);
}
.tpr-mode-card-v2:hover { border-color: var(--tpr-blue); }
.tpr-mode-card-v2.active {
    border-color: var(--tpr-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}
.tpr-v2-badge {
    display: inline-block;
    background: var(--tpr-blue-light);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 3px;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   LEADERBOARD — SIM VERSION TOGGLE
   ========================================================================== */

.tpr-lb-simver-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}
.tpr-lb-simver-btn {
    background: var(--tpr-surface-2);
    border: 1px solid var(--tpr-border);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--tpr-text-muted);
    font-family: inherit;
    transition: all 0.15s;
}
.tpr-lb-simver-btn.active {
    background: var(--tpr-blue);
    border-color: var(--tpr-blue);
    color: #fff;
}
.tpr-lb-simver-btn:hover:not(.active) { border-color: var(--tpr-blue-light); color: var(--tpr-text); }
.tpr-simver-new {
    display: inline-block;
    background: var(--tpr-gold);
    color: #0d1b2a;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 3px;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   EDIT LINES SCREEN
   ========================================================================== */

#tpr-edit-lines {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 0 0 40px;
    background: var(--tpr-bg);
    min-height: 400px;
}
#tpr-edit-lines.tpr-edit-lines-visible { opacity: 1; }

.tpr-el-header {
    background: var(--tpr-header-bg);
    color: var(--tpr-header-text);
    padding: 20px 20px 16px;
    border-bottom: 3px solid var(--tpr-blue-light);
}
.tpr-el-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff;
}
.tpr-el-instructions {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.72);
    margin: 0;
    line-height: 1.5;
}
.tpr-el-warning {
    margin-top: 10px;
    background: rgba(212,175,55,0.15);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--tpr-gold);
    line-height: 1.5;
}

.tpr-el-body   { padding: 16px 12px 8px; }
.tpr-el-section { margin-bottom: 24px; }
.tpr-el-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--tpr-text-muted);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--tpr-border);
}

/* ── FORWARDS GRID ─────────────────────────────────────────────────────────
   4 columns: [Labels 80px] [Left Wing] [Centre] [Right Wing]
   All 4 columns share the same CSS grid so rows align automatically.
   ────────────────────────────────────────────────────────────────────────── */
.tpr-el-fwd-grid {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 1fr;
    gap: 0 6px;
    align-items: stretch;
}

/* Column headers (Lines / Left Wing / Centre / Right Wing) */
.tpr-el-pos-header {
    font-size: 0.70rem;
    font-weight: 700;
    color: var(--tpr-text-muted);
    text-align: center;
    padding: 4px 0 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tpr-el-line-labels-col .tpr-el-pos-header { text-align: left; }

/* Labels column — 5 rows: 1 header + 4 line labels */
.tpr-el-line-labels-col {
    display: flex;
    flex-direction: column;
}
.tpr-el-line-row-label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 4px;
    flex: 1;
    min-height: 48px;
    border-bottom: 1px solid var(--tpr-border);
    box-sizing: border-box;
}
.tpr-el-lnum {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tpr-text-muted);
    min-width: 20px;
}
.tpr-el-lrating {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--tpr-blue-light);
    min-width: 28px;
}
.tpr-el-lrating.tpr-el-rating-high { color: var(--tpr-gold); }

/* Chemistry pills */
.tpr-chem-pill { font-size: 0.75rem; cursor: help; line-height: 1; }

/* Position list columns */
.tpr-el-pos-list-wrap {
    display: flex;
    flex-direction: column;
}

/* Each position drag-list is a flex column — cards stack vertically */
.tpr-el-drag-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* ── DRAGGABLE CARDS ───────────────────────────────────────────────────── */
.tpr-el-card {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--tpr-surface);
    border: 1px solid var(--tpr-border);
    border-radius: 5px;
    padding: 7px 8px;
    cursor: grab;
    font-size: 0.78rem;
    min-height: 44px;
    box-sizing: border-box;
    transition: box-shadow 0.12s, opacity 0.12s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    flex: 1;
}
.tpr-el-card:hover     { box-shadow: var(--tpr-shadow); border-color: var(--tpr-blue-light); }
.tpr-el-card.tpr-el-dragging   { opacity: 0.35; }
.tpr-el-card.tpr-el-drag-over  { border-color: var(--tpr-gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.3); }

.tpr-el-drag-handle {
    color: var(--tpr-text-muted);
    font-size: 0.75rem;
    cursor: grab;
    flex-shrink: 0;
    letter-spacing: -1px;
}
.tpr-el-pos-badge {
    flex-shrink: 0;
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #fff;
    font-family: monospace;
}
.tpr-el-player-name {
    flex: 1;
    font-weight: 600;
    color: var(--tpr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.tpr-el-type {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--tpr-text-muted);
    background: var(--tpr-surface-2);
    border: 1px solid var(--tpr-border);
    border-radius: 3px;
    padding: 1px 4px;
    flex-shrink: 0;
}
.tpr-el-slot-label {
    font-size: 0.60rem;
    font-weight: 600;
    color: var(--tpr-text-muted);
    background: var(--tpr-surface-2);
    border: 1px solid var(--tpr-border);
    border-radius: 3px;
    padding: 1px 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.tpr-el-ovr {
    font-weight: 800;
    font-size: 0.88rem;
    flex-shrink: 0;
    min-width: 26px;
    text-align: right;
    color: var(--tpr-text-muted);
}
.rating-elite { color: var(--tpr-gold) !important; }
.rating-great  { color: var(--tpr-blue-light) !important; }
.rating-solid  { color: var(--tpr-text-muted) !important; }

/* Touch drag ghost */
.tpr-el-touch-ghost {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    opacity: 0.85;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border-radius: 5px;
}

/* ── DEFENCE PAIRS GRID ────────────────────────────────────────────────────
   Two equal columns: LD on left, RD on right, 3 cards per column.
   ────────────────────────────────────────────────────────────────────────── */
.tpr-el-d-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto; /* header + 3 card rows */
    gap: 4px 8px;
    max-width: 600px;
}
.tpr-el-d-header {
    font-size: 0.70rem;
    font-weight: 700;
    color: var(--tpr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0 4px 4px;
    border-bottom: 1px solid var(--tpr-border);
}
/* Each drag list sits in one grid cell — cards stack vertically inside */
.tpr-el-d-grid .tpr-el-drag-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── GOALIES ───────────────────────────────────────────────────────────── */
.tpr-el-section:last-of-type .tpr-el-drag-list { max-width: 320px; }

/* ── SIMULATE BUTTON ──────────────────────────────────────────────────── */
.tpr-el-footer {
    padding: 16px 12px 8px;
    display: flex;
    justify-content: center;
}
.tpr-el-simulate-btn {
    min-width: 220px;
    padding: 14px 32px;
    font-size: 1rem;
}

/* ── MOBILE ───────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
    .tpr-el-fwd-grid {
        grid-template-columns: 1fr;
    }
    .tpr-el-line-labels-col { display: none; }
    .tpr-el-pos-list-wrap   { margin-bottom: 14px; }
    .tpr-el-pos-header      { text-align: left; padding-left: 4px; }
    .tpr-el-card            { font-size: 0.82rem; padding: 8px 10px; }
    .tpr-el-d-grid          { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 860px) {
    .tpr-el-fwd-grid { grid-template-columns: 60px 1fr 1fr 1fr; }
    .tpr-el-lnum     { display: none; }
}

/* ── DARK MODE ────────────────────────────────────────────────────────── */
.tpr-dark .tpr-el-header { background: var(--tpr-navy); }
.tpr-dark .tpr-el-card   { background: var(--tpr-surface); }

/* ==========================================================================
   ONBOARDING OVERLAY
   ========================================================================== */

/* Backdrop — lighter than modal so it doesn't feel like a hard block */
.tpr-ob-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998; /* just below modals */
    background: rgba(0, 0, 0, 0);
    animation: tpr-ob-backdrop-in 0.3s ease-out forwards;
    pointer-events: auto;
}
@keyframes tpr-ob-backdrop-in {
    to { background: rgba(0, 0, 0, 0.45); }
}

/* ── Card (desktop) ── */
.tpr-ob-card {
    position: fixed;
    z-index: 99999;
    background: var(--tpr-surface);
    border: 1px solid var(--tpr-border);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22), 0 0 0 2px var(--tpr-gold);
    width: 320px;
    padding: 24px 22px 20px;
    /* Centered fallback until JS positions it.
       top:50%+translateY gets overridden by JS which also handles admin bar offset. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* If WP admin bar is present (#wpadminbar at 32px), JS overrides top inline */
    animation: tpr-ob-card-in 0.22s ease-out;
}
@keyframes tpr-ob-card-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
/* When JS applies positioned class, override the centering transform */
.tpr-ob-card.tpr-ob-positioned {
    transform: none;
    animation: tpr-ob-positioned-in 0.22s ease-out;
}
@keyframes tpr-ob-positioned-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Arrow pointer — points up toward the anchored element above */
.tpr-ob-card::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--tpr-gold);
}
/* Hide arrow when card is centered (no anchor) */
.tpr-ob-card.tpr-ob-no-arrow::before { display: none; }

/* ── Step icon ── */
.tpr-ob-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 10px;
}

/* ── Step heading ── */
.tpr-ob-heading {
    font-size: 1rem;
    font-weight: 800;
    color: var(--tpr-text);
    margin: 0 0 8px;
    line-height: 1.2;
}

/* ── Step body ── */
.tpr-ob-body {
    font-size: 0.85rem;
    color: var(--tpr-text-muted);
    line-height: 1.55;
    margin: 0 0 18px;
}

/* ── Progress dots ── */
.tpr-ob-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
}
.tpr-ob-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tpr-border);
    transition: background 0.2s, transform 0.2s;
}
.tpr-ob-dot.tpr-ob-dot-active {
    background: var(--tpr-gold);
    transform: scale(1.3);
}
.tpr-ob-dot.tpr-ob-dot-done {
    background: var(--tpr-blue-light);
}

/* ── Navigation row ── */
.tpr-ob-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tpr-ob-btn-next {
    flex: 1;
    background: var(--tpr-gold);
    color: #0d1b2a;
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: inherit;
}
.tpr-ob-btn-next:hover { opacity: 0.88; }

.tpr-ob-btn-skip {
    background: none;
    border: none;
    color: var(--tpr-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 6px 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
    white-space: nowrap;
    transition: color 0.15s;
}
.tpr-ob-btn-skip:hover { color: var(--tpr-text); }

/* ── Step content transition ── */
.tpr-ob-content {
    transition: opacity 0.1s ease;
}
.tpr-ob-content.tpr-ob-fading {
    opacity: 0;
}

/* ── Exit animation ── */
.tpr-ob-card.tpr-ob-exiting {
    animation: tpr-ob-card-out 0.2s ease-in forwards;
}
.tpr-ob-backdrop.tpr-ob-exiting {
    animation: tpr-ob-backdrop-out 0.2s ease-in forwards;
}
@keyframes tpr-ob-card-out {
    to { opacity: 0; transform: translateY(6px); }
}
@keyframes tpr-ob-backdrop-out {
    to { background: rgba(0,0,0,0); }
}

/* ── MOBILE: bottom sheet ── */
@media (max-width: 599px) {
    .tpr-ob-backdrop {
        /* Lighter backdrop on mobile — sheet provides its own visual separation */
        animation: tpr-ob-backdrop-in-mobile 0.3s ease-out forwards;
    }
    @keyframes tpr-ob-backdrop-in-mobile {
        to { background: rgba(0, 0, 0, 0.3); }
    }

    .tpr-ob-card {
        /* Reset desktop positioning — CSS takes over */
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100%;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
        /* Respect home indicator on iOS */
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        animation: tpr-ob-sheet-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    @keyframes tpr-ob-sheet-in {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .tpr-ob-card.tpr-ob-exiting {
        animation: tpr-ob-sheet-out 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }
    @keyframes tpr-ob-sheet-out {
        to { transform: translateY(100%); }
    }
    /* Pull handle on mobile */
    .tpr-ob-card::after {
        content: '';
        display: block;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--tpr-grey-mid);
        border-radius: 2px;
    }
    /* Hide arrow pointer on mobile */
    .tpr-ob-card::before { display: none; }
    /* Card positioned means nothing on mobile */
    .tpr-ob-card.tpr-ob-positioned {
        animation: tpr-ob-sheet-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .tpr-ob-backdrop,
    .tpr-ob-card,
    .tpr-ob-card.tpr-ob-positioned,
    .tpr-ob-content { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   FULL ROSTER v2 — MODE CARD
   ========================================================================== */

.tpr-mode-card-v2 {
    border-color: var(--tpr-blue-light);
    background: linear-gradient(135deg, var(--tpr-surface) 0%, rgba(26,92,138,0.06) 100%);
}
.tpr-mode-card-v2:hover { border-color: var(--tpr-blue); }
.tpr-mode-card-v2.active {
    border-color: var(--tpr-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}
.tpr-v2-badge {
    display: inline-block;
    background: var(--tpr-blue-light);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 3px;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   LEADERBOARD — SIM VERSION TOGGLE
   ========================================================================== */

.tpr-lb-simver-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}
.tpr-lb-simver-btn {
    background: var(--tpr-surface-2);
    border: 1px solid var(--tpr-border);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--tpr-text-muted);
    font-family: inherit;
    transition: all 0.15s;
}
.tpr-lb-simver-btn.active {
    background: var(--tpr-blue);
    border-color: var(--tpr-blue);
    color: #fff;
}
.tpr-lb-simver-btn:hover:not(.active) { border-color: var(--tpr-blue-light); color: var(--tpr-text); }
.tpr-simver-new {
    display: inline-block;
    background: var(--tpr-gold);
    color: #0d1b2a;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 3px;
    letter-spacing: 0.04em;
}