/* ==== billing.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Billing screen (invoices + credit notes)
   Loaded AFTER css/app.css. Scoped to `.billing-page`
   (class added on the page container in js/billing.js).
   NOTE: the invoice table itself is styled by the runtime
   <style id="billing-styles"> injected from js/billing.js
   (it lands after this file in document order, so the
   canonical table rules live there). This patch covers the
   page shell, empty state and error state only.
   ═══════════════════════════════════════════════ */

.billing-page {
    max-width: 600px;
}

.billing-page .page-title {
    margin-bottom: 6px;
}

/* Hairline under the title, mirrors the table frame language */
.billing-page .page-title::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 12px;
    background: var(--ball);
    border-radius: 99px;
}

/* ── Empty state ── */
.billing-page .billing-empty {
    padding: 56px 16px;
    border: 1px dashed var(--control-border);
    border-radius: 24px;
    margin-top: 16px;
    color: var(--text3);
}
.billing-page .billing-empty p {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin: 0;
}

/* ── Error state ── */
.billing-page .billing-error {
    padding: 40px 16px;
    color: var(--fault);
}
.billing-page .billing-error p {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    margin: 0;
}

/* ==== compare.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Compare screen (H2H in-app)
   Loaded AFTER css/app.css. Scoped to `.compare-page`
   plus compare-only classes added by js/compare.js
   (cmp-titleblock, compare-hero--panel, score center).
   Reference: /stadium/comparer/ (bzb-h2h-panel mega
   panel, surface pills, mono meta).
   ═══════════════════════════════════════════════ */

/* ── Title block: eyebrow + two-tone H1 + mono meta ── */
.compare-page .cmp-titleblock {
    margin: 14px 0 24px;
}
.cmp-title-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text3);
}
.cmp-h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 7.5vw, 60px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text);
    margin: 12px 0 0;
}
.cmp-h1 em {
    font-style: italic;
    color: var(--clay);
    font-size: 0.62em;
}
.cmp-h1-2 {
    color: var(--text3);
}
.cmp-title-meta {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}

/* ── H2H mega panel: 2px ink frame, portraits + scoreboard center ── */
.compare-page .compare-hero--panel {
    margin-top: 0;
    padding: 0;
    gap: 0;
    grid-template-columns: 1fr minmax(150px, 220px) 1fr;
    align-items: stretch;
    border: 2px solid var(--text);
    border-radius: 0;
    background: var(--input-bg);
    overflow: hidden;
}
.compare-page .compare-hero--panel .compare-hero-side {
    padding: 22px 14px;
    gap: 12px;
    justify-content: center;
}
.compare-page .compare-hero--panel .compare-hero-side--a {
    border-right: 1px solid var(--text);
}
.compare-page .compare-hero--panel .compare-hero-side--b {
    border-left: 1px solid var(--text);
}
.compare-page .compare-hero--panel .compare-hero-photo {
    width: 112px;
    height: 112px;
    border: 1px solid var(--control-border);
    box-shadow: none;
}
.compare-hero-side-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.compare-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text3);
    font-variant-numeric: tabular-nums;
}
.compare-page .compare-hero--panel .compare-hero-name {
    font-size: clamp(16px, 2.6vw, 22px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.compare-page .compare-hero-vs-block {
    background: var(--bg2);
    padding: 22px 12px;
    justify-content: center;
    gap: 10px;
}
.compare-hero-vs-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text3);
}
.compare-hero-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.compare-hero-score-n {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}
.compare-hero-score-n.is-winner { color: var(--grass); }
.compare-hero-score-sep {
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--text3);
}
.compare-page .compare-hero--panel .compare-hero-vs {
    font-size: clamp(28px, 5vw, 40px);
    letter-spacing: 0;
}
.compare-page .compare-hero-vs-surface {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text3);
}
@media (max-width: 720px) {
    .compare-page .compare-hero--panel { grid-template-columns: 1fr; }
    .compare-page .compare-hero--panel .compare-hero-side {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 16px 18px;
    }
    .compare-page .compare-hero--panel .compare-hero-side--a {
        border-right: 0;
        border-bottom: 1px solid var(--text);
    }
    .compare-page .compare-hero--panel .compare-hero-side--b { border-left: 0; }
    .compare-page .compare-hero--panel .compare-hero-photo {
        width: 72px;
        height: 72px;
    }
    .compare-hero-side-text { align-items: flex-start; }
    .compare-page .compare-hero-vs-block {
        order: 3;
        border-top: 1px solid var(--text);
        padding: 16px 12px;
    }
}

/* ── Section titles: bracketed mono eyebrows ── */
.compare-page .player-section-title::before,
.compare-page .h2h-title::before { content: '[ '; color: var(--text3); }
.compare-page .player-section-title::after,
.compare-page .h2h-title::after { content: ' ]'; color: var(--text3); }

/* ── H2H banner (meta + surface breakdown, score removed) ── */
.compare-page .h2h-banner {
    border: 1px solid var(--control-border);
    border-radius: 16px;
    background: var(--input-bg);
}
.compare-page .h2h-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text2);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.compare-page .h2h-surf-panel {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.compare-page .h2h-surf-row--dominant {
    background: var(--control-bg);
    box-shadow: inset 0 0 0 1px var(--control-border);
}

/* ── Diverging H2H bars: control-bg track + solid surface fills ── */
.compare-page .h2h-surf-track {
    background: var(--control-bg);
    box-shadow: none;
    height: 14px;
    border-radius: 7px;
}
.compare-page .h2h-surf-a-fill { background: var(--clay); }
.compare-page .h2h-surf-b-fill { background: var(--hard); }
.compare-page .h2h-cmp-track {
    background: var(--control-bg);
    box-shadow: none;
}
.compare-page .h2h-cmp-bar-a { background: var(--clay); }
.compare-page .h2h-cmp-bar-b { background: var(--hard); }

/* ── H2H scope panel: important data panel → 2px ink frame ── */
.compare-page .h2h-scope-panel {
    border: 2px solid var(--text);
    border-radius: 0;
    background: var(--input-bg);
}
.compare-page .h2h-scope-panel--teaser {
    border: 1px solid var(--control-border);
}

/* ── KPI capsules (label top-left, mono value bottom-right) ── */
.compare-page .h2h-kpi {
    background: var(--input-bg);
    border: 1px solid var(--control-border);
    border-radius: 16px;
    padding: 14px 16px;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    box-shadow: none;
}
.compare-page .h2h-kpi:hover {
    background: var(--input-bg);
    transform: none;
}
.compare-page .h2h-kpi-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text3);
}
.compare-page .h2h-kpi-val {
    margin-top: auto;
    align-self: flex-end;
    padding-top: 10px;
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.compare-page .h2h-kpi-sub {
    align-self: flex-end;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text3);
}
.compare-page .h2h-kpi--pair .h2h-kpi-pair-row {
    font-variant-numeric: tabular-nums;
}

/* ── Stats sections: cream cards + mono section titles ── */
.compare-page .cmp-section {
    background: var(--input-bg);
    border: 1px solid var(--control-border);
    border-radius: 16px;
    padding: 18px;
}
.compare-page .cmp-section-title {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}
.compare-page .cmp-section-title::before { content: '[ '; color: var(--text3); }
.compare-page .cmp-section-title::after { content: ' ]'; color: var(--text3); }
.compare-page .cmp-cell {
    background: var(--control-bg);
    border-radius: 10px;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}
.compare-page .cmp-cell--winner {
    background: var(--text);
    color: var(--bg);
}
.compare-page .cmp-label {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── V/D letters: semantic win/loss chips (cream text on grass/fault) ── */
.compare-page .vd-letter--win {
    background: var(--success);
    border: 0;
    color: #fbf5e2;
}
.compare-page .vd-letter--loss {
    background: var(--fault);
    border: 0;
    color: #fbf5e2;
}

/* ── Filter bar: outline mono pills, active = ink filled ── */
.compare-page .compare-filter-bar {
    border: 1px solid var(--control-border);
    background: var(--input-bg);
    border-radius: 16px;
}
.compare-page .filter-row-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text3);
}
.compare-page .filter-pill {
    background: transparent;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text2);
    padding: 8px 14px;
    box-shadow: none;
}
.compare-page .filter-pill:hover:not(.filter-pill--disabled) {
    border-color: var(--text);
    color: var(--text);
    background: transparent;
}
.compare-page .filter-pill--active,
.compare-page .filter-pill--active:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
.compare-page .filter-pill--disabled { opacity: 0.38; }
.compare-page .filter-select {
    font-family: var(--font-mono);
    font-size: 12px;
    background-color: var(--input-bg);
    border: 1px solid var(--control-border);
    color: var(--text);
}
.compare-page .filter-select:focus {
    border-color: var(--text);
    box-shadow: none;
    outline: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .compare-page .filter-pill,
    .compare-page .h2h-surf-a-fill,
    .compare-page .h2h-surf-b-fill,
    .compare-page .h2h-cmp-bar-a,
    .compare-page .h2h-cmp-bar-b,
    .compare-page .h2h-surf-row,
    .compare-page .vd-letter {
        transition: none;
    }
    .compare-page .h2h-surf-row:hover,
    .compare-page .vd-letter:hover { transform: none; }
}

/* ==== dashboard.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Dashboard screen (loaded after app.css)
   Capsule KPIs, 2px ink chart frames, Signal panel rows.
   ═══════════════════════════════════════════════ */

/* ── Mono eyebrow (Stadium label) ── */
.dash-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
}
.dash-eyebrow--cream {
    color: rgba(251, 245, 226, 0.78);
}

/* ── Bankroll hero (dark capsule, defocused stadium scoreboard photo).
      Intentionally dark in BOTH themes (night-session pattern from the
      landing); cream/lime text on it is theme-safe.
      Fallback when the photo is missing (onerror removes the img):
      subtle court-lines grid on the dark capsule. ── */
.dash-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background:
        repeating-linear-gradient(90deg, rgba(251, 245, 226, 0.045) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(0deg, rgba(251, 245, 226, 0.035) 0 1px, transparent 1px 44px),
        #11140e;
    min-height: 192px;
    display: flex;
}
.dash-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}
.dash-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 18px 20px 16px;
    background: linear-gradient(168deg, rgba(10, 12, 8, 0.78) 0%, rgba(10, 12, 8, 0.22) 52%, rgba(10, 12, 8, 0.74) 100%);
}
.dash-hero-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-hero-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.dash-hero-delta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(251, 245, 226, 0.66);
}
.dash-hero-delta.is-up { color: rgba(207, 235, 43, 0.78); }
.dash-hero-delta.is-down { color: rgba(235, 160, 132, 0.85); }
.dash-hero-value {
    margin-left: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: clamp(2.1rem, 8vw, 2.9rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fbf5e2;
    text-align: right;
}
/* Lime as text on dark = allowed (never as background under light text) */
.dash-hero-value.is-up { color: var(--ball); }
.dash-hero-value.is-down { color: #eba084; }
/* Hint icon legibility on the dark photo */
.dash-hero .ui-hint-icon {
    border-color: rgba(251, 245, 226, 0.38);
    background: rgba(10, 12, 8, 0.35);
    color: rgba(251, 245, 226, 0.85);
}

/* ── Capsule KPI cards (label top-left 12px, mono value bottom-right) ── */
.dash-kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    border-radius: 24px;
    padding: 16px 18px 14px;
    min-height: 112px;
}
.dash-kpi::before { display: none; }
.dash-kpi-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.dash-kpi-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-kpi-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}
.dash-kpi-value {
    display: block;
    margin-left: auto;
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: clamp(1.65rem, 5.2vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
}
.dash-kpi-value--sm {
    font-size: clamp(1.2rem, 4vw, 1.55rem);
}
.dash-kpi-value--xl {
    font-size: clamp(2.05rem, 5.5vw, 2.7rem);
}

/* ── KPI bento: P&L + ROI dominant, win rate + volume compact stack ── */
.dash-kpi-bento {
    display: grid;
    gap: 12px;
    grid-template-columns: 1.35fr 1fr 0.95fr;
    grid-template-areas: "pnl roi side";
    align-items: stretch;
}
.dash-kpi--pnl { grid-area: pnl; }
.dash-kpi--roi { grid-area: roi; }
.dash-kpi-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.dash-kpi-side .dash-kpi {
    flex: 1 1 0;
    min-height: 0;
}
.dash-kpi--hero {
    min-height: 176px;
    gap: 10px;
}
.dash-kpi--mini {
    min-height: 82px;
    padding: 14px 16px 12px;
    gap: 10px;
}

/* Subtle hover lift (capsules only, pointer devices).
   Uses the standalone `translate` property: .card-anim's fadeInUp runs with
   fill-mode forwards, so its keyframe `transform` would override a
   transform-based lift; `translate` composes independently.
   Also overrides app.css .kpi-card:hover lime glow: lime glow is reserved
   for dark contexts, never on the cream background (DA rule). */
.dash-kpi { transition: translate 0.22s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
@media (hover: hover) {
    .dash-kpi:hover {
        translate: 0 -2px;
        border-color: rgba(var(--ink-rgb), 0.38);
        box-shadow: 0 12px 26px rgba(10, 12, 8, 0.10);
    }
}
@media (prefers-reduced-motion: reduce) {
    .dash-kpi { transition: none; }
    .dash-kpi:hover { translate: none; }
}

/* Discreet trend triangle (head, right edge) */
.dash-kpi-trend {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    opacity: 0.85;
}
.dash-kpi-trend.is-up { color: var(--success); }
.dash-kpi-trend.is-down { color: var(--fault); transform: rotate(180deg); }

/* P&L capsule sparkline (real cumulative series) */
.dash-kpi-sparkwrap {
    flex: 1 1 auto;
    min-height: 30px;
    max-height: 48px;
    color: var(--success);
}
.dash-kpi-sparkwrap.is-down { color: var(--fault); }
.dash-kpi-spark {
    display: block;
    width: 100%;
    height: 100%;
}
.dash-kpi-spark-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.dash-kpi-spark-area {
    fill: currentColor;
    opacity: 0.08;
    stroke: none;
}
.dash-kpi-spark-dot {
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.dash-kpi-spark-zero {
    stroke: rgba(var(--ink-rgb), 0.18);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
}

/* Win-rate micro meter (lime fill on ink hairline track) */
.dash-kpi-meter {
    position: relative;
    height: 3px;
    flex: 0 0 auto; /* flex column item: never collapse to 0 */
    margin-top: auto;
    border-radius: var(--radius-pill);
    background: rgba(var(--ink-rgb), 0.16);
    overflow: hidden;
}
.dash-kpi-meter span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--ball);
}

/* ── Explicit streak pill (B2): outline + faint tint, mono uppercase ── */
.dash-streak-pill {
    gap: 7px;
    padding: 5px 12px;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid;
    white-space: nowrap;
}
.dash-streak-pill.streak-win {
    background: rgba(var(--success-rgb), 0.07);
    border-color: rgba(var(--success-rgb), 0.45);
    color: var(--success);
}
.dash-streak-pill.streak-loss {
    background: rgba(var(--fault-rgb), 0.07);
    border-color: rgba(var(--fault-rgb), 0.45);
    color: var(--fault);
}
.dash-streak-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: currentColor;
    flex: 0 0 auto;
}
/* In the stacked mobile toolbar, keep the pill hugging its content */
@media (max-width: 640px) {
    .dash-streak-pill { align-self: flex-start; }
}

/* Surface capsules */
.dash-surface-kpi { min-height: 100px; padding: 14px 16px 12px; }
.dash-surface-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text3);
    white-space: nowrap;
}

/* Best/worst tournament capsules */
.dash-tournament-kpi { gap: 10px; }
.dash-tournament-name {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 14px;
    line-height: 1.22;
    color: var(--text);
}

/* Confidence card */
.dash-conf-card {
    border-radius: 24px;
    padding: 18px;
}
.dash-conf-card::before { display: none; }

/* ── Chart frames (2px solid ink, eyebrow mono header) ── */
.dash-chart-frame {
    border: 2px solid var(--text);
    background: var(--input-bg);
}
.dash-chart-frame--thin {
    border-width: 1px;
    border-color: var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.dash-chart-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--text);
    background: var(--bg2);
}
.dash-chart-frame--thin .dash-chart-head {
    border-bottom-color: var(--line);
}
.dash-chart-period {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-on-ball);
    background: var(--ball);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.dash-chart-body {
    position: relative;
    height: 220px;
    padding: 14px 12px 10px;
}
.dash-chart-body--tall { height: 260px; }

/* ── Signal panel (Stadium landing pattern) ── */
.dash-signal-panel {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--text);
    background: var(--input-bg);
}
.dash-signal-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--text);
    background: var(--bg2);
}
.dash-signal-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--ball);
    color: var(--text-on-ball);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.dash-signal-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--grass);
    animation: dash-blink 1.6s ease-in-out infinite;
}
@keyframes dash-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-signal-live-dot { animation: none; }
}

.dash-signal-item {
    position: relative;
    z-index: 1;
    padding: 0 16px;
}
.dash-signal-item--divided {
    border-bottom: 1px solid var(--line);
}
.dash-signal-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 64px auto auto;
    gap: 10px;
    align-items: center;
    padding: 14px 0;
}
.dash-signal-dot {
    width: 9px;
    height: 9px;
    border-radius: 99px;
    flex: 0 0 auto;
    justify-self: center;
}
.dot-hard { background: var(--hard); }
.dot-clay { background: var(--clay); }
.dot-grass { background: var(--grass); }
.dot-indoor { background: var(--ace); }

.dash-signal-player {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
}
.dash-signal-player strong {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 14.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-signal-player small {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-signal-player:hover strong { color: var(--grass); }

.dash-signal-spark {
    display: block;
    opacity: 0.9;
}
/* Theme-aware spark strokes (var() does not resolve in SVG attributes) */
.dash-signal-spark-line { stroke: rgba(var(--ink-rgb), 0.32); }
.dash-signal-spark-dot { fill: var(--grass); }
.dash-signal-spark--empty {
    display: block;
    width: 64px;
    height: 20px;
}
.dash-signal-odds {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 15px;
    color: var(--hard);
    text-align: right;
}
.dash-signal-edge {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 16px;
    color: var(--grass);
    text-align: right;
    min-width: 58px;
}
.dash-signal-edge--na { color: var(--text3); }

.dash-signal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 0 14px;
}
.dash-signal-input {
    flex: 1 1 90px;
    min-width: 0;
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--font-mono);
    border-radius: var(--radius-pill);
}
.dash-signal-follow {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 0.6rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.dash-signal-analysis {
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text2);
    text-decoration: none;
    white-space: nowrap;
}
.dash-signal-analysis:hover { color: var(--grass); }

.dash-signal-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-top: 1px solid var(--text);
    background: var(--bg2);
}
.dash-signal-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-signal-cta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.dash-signal-cta:hover { color: var(--grass); }

.dash-signal-empty {
    position: relative;
    z-index: 1;
    padding: 28px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text3);
}

/* Decorative giant outline number (picks count) */
.dash-ghost-num {
    position: absolute;
    top: 50px;
    right: 10px;
    z-index: 0;
    font-family: var(--font-display);
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--ink-rgb), 0.12);
    pointer-events: none;
    user-select: none;
}

/* Hint popovers open upward by default; inside overflow-hidden Stadium
   containers (hero, thin frames, signal panel) open them downward instead */
.dash-hero-head .ui-hint-popover,
.dash-chart-frame--thin .dash-chart-head .ui-hint-popover,
.dash-signal-head .ui-hint-popover {
    bottom: auto;
    top: calc(100% + 10px);
}
.dash-hero-head .ui-hint-popover::after,
.dash-chart-frame--thin .dash-chart-head .ui-hint-popover::after,
.dash-signal-head .ui-hint-popover::after {
    display: none;
}

/* ── Mobile (PWA is mobile-first) ── */
@media (max-width: 700px) {
    /* Bento folds: P&L full width on top, ROI + compact stack below */
    .dash-kpi-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "pnl pnl"
            "roi side";
    }
    .dash-kpi--hero { min-height: 150px; }
    .dash-kpi--pnl { min-height: 158px; }
}
@media (max-width: 480px) {
    .dash-chart-body { height: 180px; padding: 10px 8px 8px; }
    .dash-chart-body--tall { height: 215px; }
    .dash-hero { min-height: 170px; }
    .dash-kpi-value--xl { font-size: clamp(1.8rem, 8.4vw, 2.2rem); }
    .dash-kpi--mini { min-height: 70px; padding: 12px 14px 10px; }
    /* Narrow 3-col surface capsules: meta on its own line, value below right */
    .dash-surface-kpi { padding: 12px 12px 10px; }
    .dash-surface-kpi .dash-kpi-foot { flex-wrap: wrap; }
    .dash-surface-kpi .dash-surface-meta { flex: 1 0 100%; }
    .dash-surface-kpi .dash-kpi-value--sm { font-size: 1.1rem; }
}
@media (max-width: 419px) {
    .dash-signal-spark,
    .dash-signal-spark--empty { display: none; }
    .dash-signal-row { grid-template-columns: 12px minmax(0, 1fr) auto auto; }
    .dash-signal-edge { min-width: 0; }
    .dash-ghost-num { font-size: 76px; }
}

/* ==== harmony.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Harmony (#14, cross-screen accord)
   MUST be the LAST stylesheet loaded (after every
   per-screen patch): it arbitrates between them.
   Scope: vertical rhythm, one card grammar
   (capsule radius 24 / ink frame 2px), title sizes,
   page-head grammar (mono eyebrow above the title).
   Tokens only, light + dark.
   ═══════════════════════════════════════════════ */

/* ── 1. Page-head grammar ─────────────────────────
   Hub screens (tournaments / players / insights) put the
   mono eyebrow ABOVE the title; app screens (dashboard,
   picks, portfolio) had it below. Align: kicker first. */
.premium-page-head > div:first-child,
.picks-page-head > div:first-child {
    display: flex;
    flex-direction: column;
}
.premium-page-kicker,
.picks-page-kicker {
    order: -1;
    margin: 0 0 8px;
}

/* One eyebrow voice on every screen: mono 11px, muted */
.premium-page-kicker,
.picks-page-kicker,
.profile-eyebrow,
.players-head-eyebrow,
.tour-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
}

/* ── 2. Vertical rhythm: page heads breathe the same ── */
.premium-page-head,
.picks-page-head,
.profile-head,
.tcal-head {
    margin-bottom: 24px;
}
.players-page .players-head {
    margin: 6px 0 24px;
}
.picks-tabs {
    margin-bottom: 24px;
}
.subscribe-page .sub-hero {
    margin-bottom: 24px;
}

/* ── 3. Display titles: one size on the hub screens ──
   (was 54.4 / 56 / 57.6px: three near-identical sizes) */
.players-head-title,
.tournament-page-head .page-title.tcal-title,
.page-title.ip-title {
    font-size: clamp(2.15rem, 7.5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.97;
}

/* ── 4. One card grammar ──────────────────────────
   Capsule cards: radius 24 / 1px hairline.
   Ink frames: 2px solid var(--text), same radius 24
   (portfolio + profile frames already are; align the
   squared dashboard / insights frames with them). */
.dash-chart-frame,
.dash-signal-panel,
.ip-frame,
.insights-pro-already.ip-already {
    border-radius: 24px;
}
/* Tinted head bars follow the curve (frame has no
   overflow:hidden so hint popovers stay visible) */
.dash-chart-frame > .dash-chart-head {
    border-radius: 22px 22px 0 0;
}

/* Stragglers at radius 12-16px join the capsule grammar */
.dash-chart-frame--thin {
    border-radius: 24px;
}
.profile-card {
    border-radius: 24px;
}
.picks-empty {
    border-radius: 24px;
}

/* Tournament cards are SQUARE (tournaments.css wins the cascade — Stadium
   frame style, confirmed by user feedback): the chalk-line sweep must hug
   the same square shape. Dead border-radius removed to avoid cascade traps. */
.tcal-sweep-rect {
    rx: 0;
}

/* ==== insights.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Insights Pro screen (loaded after app.css)
   Two-tone display title, ink frames with mono eyebrows,
   numbered feature rows, locked teaser (padlock + light blur),
   capsule plan cards. No lime glow on cream.
   ═══════════════════════════════════════════════ */

/* ── Hero: bracketed eyebrow + two-tone display title ── */
.insights-pro-hero { padding: 28px 0 22px; }
.ip-eyebrow {
    margin-top: 0;
    color: var(--clay);
    font-size: 11px;
    letter-spacing: 0.14em;
}
.ip-eyebrow::before { content: '[ '; opacity: 0.55; }
.ip-eyebrow::after { content: ' ]'; opacity: 0.55; }
.ip-title {
    margin: 14px 0 0;
    font-size: clamp(2.4rem, 9vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.97;
}
.ip-title-2 { color: var(--text3); }
.insights-pro-hero .insights-pro-sub { margin-top: 16px; }

/* ── Ink frame + eyebrow head bar (Stadium data panel) ── */
.ip-frame {
    border: 2px solid var(--text);
    background: var(--input-bg);
    max-width: 640px;
    margin: 0 auto 18px;
    overflow: hidden;
}
.ip-frame-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--text);
    background: var(--bg2);
}
.ip-frame-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
}
.ip-frame-count {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 2px 10px;
    border-radius: 99px;
    background: var(--ball);
    color: var(--text-on-ball);
}

/* ── Features: numbered mono rows with hairline dividers ── */
.insights-pro-features-list.ip-features {
    max-width: none;
    margin: 0;
    padding: 4px 16px 10px;
    gap: 0;
}
.insights-pro-feature.ip-feature {
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
    color: var(--text2);
}
.ip-feature:last-child { border-bottom: 0; }
.ip-feature-num {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--clay);
}
.ip-feature-text { line-height: 1.45; }

/* ── Locked teaser: padlock pill + blurred skeleton + overlay CTA ── */
.ip-locked-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--text);
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    background: transparent;
    white-space: nowrap;
}
.ip-teaser-body {
    position: relative;
    min-height: 188px;
    padding: 14px 16px 16px;
}
.ip-skel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    filter: blur(3px);
    opacity: 0.75;
    pointer-events: none;
    user-select: none;
}
.ip-skel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    background: var(--bg2);
}
.ip-skel-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    background: rgba(26, 29, 24, 0.16);
}
.ip-skel-bar {
    display: block;
    height: 10px;
    border-radius: 6px;
    background: rgba(26, 29, 24, 0.10);
}
.ip-skel-bar--lg { flex: 1 1 auto; }
.ip-skel-bar--num { flex: 0 0 46px; }
.ip-teaser-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(180deg, rgba(244, 236, 217, 0.40) 0%, rgba(244, 236, 217, 0.88) 62%);
}
.ip-teaser-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    max-width: 340px;
}
.ip-teaser-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--text);
    border-radius: 50%;
    color: var(--text);
    background: var(--input-bg);
}
.ip-teaser-lock .ip-lock-ic { width: 14px; height: 14px; }
.ip-teaser-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text2);
}
/* ink-on-ball pill CTA, no glow on cream */
.ip-teaser-cta { min-width: 170px; }
.ip-teaser-cta:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transform: none;
}

/* ── Plans: capsule cards, ink selection (no lime ring glow) ── */
.ip-plans {
    max-width: 640px;
    margin: 26px auto 0;
    scroll-margin-top: calc(72px + var(--safe-top));
}
.ip-plans-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 12px;
}
.ip-plans .insights-pro-cards { max-width: none; }
.insights-pro-card {
    display: flex;
    flex-direction: column;
    min-height: 128px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    padding: 18px;
    overflow: hidden;
}
.insights-pro-card:hover {
    transform: translateY(-1px);
    border-color: var(--text);
}
.insights-pro-card--selected,
.insights-pro-card--selected:hover {
    border: 2px solid var(--text);
    box-shadow: none;
    background: var(--bg2);
}
.insights-pro-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text3);
}
.insights-pro-card-price {
    margin-top: auto;
    justify-content: flex-end;
}
.insights-pro-card-amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: -0.02em;
}
.insights-pro-card-per {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text3);
}
/* Recommended badge: ink-on-ball pill inside the capsule */
.insights-pro-card--recommended .insights-pro-card-badge {
    position: static;
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 3px 11px;
    border-radius: 99px;
    background: var(--ball);
    color: var(--text-on-ball);
    font-size: 10px;
    letter-spacing: 0.12em;
}
/* "Selected" mono tag, visible only on the active card */
.ip-card-selected {
    display: none;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 9.6px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grass);
}
.insights-pro-card--selected .ip-card-selected { display: block; }

/* CTA row: pill already ink-on-ball via .btn-primary */
.insights-pro-cta-row { margin-top: 22px; }

/* Already VIP / Pro panel as ink frame */
.insights-pro-already.ip-already {
    border: 2px solid var(--text);
    border-radius: 0;
    background: var(--input-bg);
    max-width: 480px;
    padding: 30px 24px;
}
.insights-pro-already-icon {
    font-size: 1.6rem;
    color: var(--grass);
}

/* ── Mobile ── */
@media (max-width: 540px) {
    .insights-pro-hero { padding: 20px 0 16px; }
    .ip-frame { margin-bottom: 14px; }
    .ip-teaser-body { min-height: 200px; }
    .insights-pro-card { min-height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
    .insights-pro-card,
    .insights-pro-card:hover { transition: none; transform: none; }
}

/* ==== misc.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Misc: forms, auth screens, onboarding
   (loaded after app.css)
   Ink-framed auth card on crème, mono labels, quiet focus
   ring, giant outline step numbers, progress dots.
   ═══════════════════════════════════════════════ */

/* ── Forms: mono uppercase 11px labels, radius 10 inputs ── */
.form-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text2);
}
.form-select {
    border-radius: var(--radius-input);
}

/* Quiet focus ring (replaces the loud lime outline on fields) */
.form-input:focus-visible,
.form-select:focus-visible {
    outline: none;
    border-color: rgba(var(--ink-rgb), 0.5);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-input:focus,
.form-select:focus {
    border-color: rgba(var(--ink-rgb), 0.5);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ═══════════════════════════════════════════════
   AUTH (login / register / verify / forgot / reset)
   ═══════════════════════════════════════════════ */

.auth-screen {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 220px);
    min-height: calc(100dvh - 220px);
    padding: 18px 16px 56px;
}

/* Ink-framed card on crème */
.auth-screen .auth-card {
    width: 100%;
    max-width: 432px;
    margin: 0 auto;
    padding: 32px 30px 28px;
    background: var(--input-bg);
    border: 2px solid var(--text);
    border-radius: 24px;
    box-shadow: 8px 8px 0 rgba(var(--shadow-rgb), 0.07);
}

/* Mono eyebrow with ball dot */
.auth-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
}
.auth-eyebrow-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ball);
    box-shadow: inset 0 0 0 1px var(--ball-border);
}

/* Two-tone left-aligned title */
.auth-screen .auth-title {
    text-align: left;
    margin: 0 0 6px;
    font-size: clamp(1.7rem, 5vw, 2.05rem);
    font-weight: 680;
    line-height: 1.04;
    letter-spacing: -0.01em;
}
.auth-title-accent {
    color: var(--text3);
}
.auth-screen .auth-subtitle {
    text-align: left;
    margin-bottom: 24px;
    font-size: 11px;
    letter-spacing: 0.09em;
}
.auth-screen .text-center .auth-title,
.auth-screen .auth-card.text-center .auth-title {
    text-align: center;
}
.auth-screen .auth-card.text-center .auth-eyebrow {
    justify-content: center;
}

/* Register proof strip: hairline columns, mono ink values */
.auth-screen .auth-proof {
    gap: 0;
    padding: 13px 0;
    margin: 0 0 22px;
}
.auth-screen .auth-proof-item {
    padding: 0 14px;
    border-left: 1px solid var(--line);
}
.auth-screen .auth-proof-item:first-child {
    padding-left: 0;
    border-left: 0;
}
.auth-screen .auth-proof-item strong {
    font-size: 11px;
    color: var(--text);
    letter-spacing: 0.05em;
}
.auth-screen .auth-proof-item span {
    font-size: 11px;
    color: var(--text3);
}
@media (max-width: 420px) {
    .auth-screen .auth-proof-item {
        padding: 8px 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .auth-screen .auth-proof-item:first-child {
        padding-top: 0;
        border-top: 0;
    }
}

/* Forgot link row, switch line */
.auth-forgot-row {
    text-align: right;
    margin: -4px 0 16px;
}
.auth-link {
    color: var(--text2);
    font-size: 12.5px;
    text-decoration: underline;
    text-decoration-color: var(--ball-border);
    text-underline-offset: 3px;
}
.auth-link:hover {
    color: var(--text);
    text-decoration-color: var(--text);
}
.auth-switch {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--text3);
}

/* Google button as quiet pill */
.google-custom-btn {
    min-height: var(--control-h);
    padding: 0 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--control-border);
    background: var(--input-bg);
    color: var(--text);
    font-weight: 600;
}
.google-custom-btn:hover {
    background: var(--control-bg);
    border-color: rgba(var(--ink-rgb), 0.4);
    color: var(--text);
}

.auth-divider span {
    font-size: 10px;
}

/* hCaptcha widget centred in the card */
#captcha-widget {
    display: flex;
    justify-content: center;
}

@media (max-width: 480px) {
    .auth-screen {
        padding: 6px 14px 40px;
        min-height: calc(100vh - 180px);
        min-height: calc(100dvh - 180px);
    }
    .auth-screen .auth-card {
        margin: 0 auto;
        padding: 26px 18px 24px;
        border-radius: 20px;
        box-shadow: 6px 6px 0 rgba(var(--shadow-rgb), 0.07);
    }
}

/* ═══════════════════════════════════════════════
   ONBOARDING (welcome overlay, nudge, coachmarks)
   ═══════════════════════════════════════════════ */

/* Welcome card: ink frame, theme-driven (tokens only, light + dark) */
.ob-welcome-backdrop {
    background: rgba(var(--shadow-rgb), 0.45);
}
.ob-welcome-card {
    background: var(--input-bg);
    border: 2px solid var(--text);
    border-radius: 24px;
    padding: 26px 26px 20px;
    box-shadow: 10px 10px 0 rgba(var(--shadow-rgb), 0.10);
}
.ob-welcome-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.ob-welcome-logo {
    margin-bottom: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--ball-border);
}

/* Mono eyebrow above the title (Stadium grammar) */
.ob-welcome-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
}
.ob-welcome-eyebrow-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ball);
    box-shadow: inset 0 0 0 1px var(--ball-border);
}
.ob-welcome-title {
    color: var(--text);
}
.ob-welcome-subtitle {
    color: var(--text2);
}

/* Progress dots (decorative, mirror the 3 steps) */
.ob-welcome-dots {
    display: flex;
    gap: 6px;
}
.ob-welcome-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--ink-rgb), 0.4);
    background: transparent;
}
.ob-welcome-dot--active {
    background: var(--ball);
    border-color: var(--ball-border);
}

/* Steps: capsule cards with mono 01/02/03 chips */
.ob-steps {
    gap: 10px;
    margin-bottom: 22px;
    border-top: 0;
}
.ob-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 18px 12px 12px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--control-bg);
}
.ob-step-num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--control-border);
    border-radius: 50%;
    background: var(--input-bg);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text2);
    user-select: none;
}
.ob-step-label {
    font-size: 0.95rem;
    color: var(--text);
}
.ob-step-desc {
    color: var(--text2);
}

/* CTA pill: ink on ball, both themes */
.ob-welcome-cta {
    min-height: 46px;
    border: 1px solid var(--ball-border);
    border-radius: var(--radius-pill);
    background: var(--ball);
    color: var(--text-on-ball);
    font-size: 0.62rem;
    letter-spacing: 0.8px;
}
.ob-welcome-cta:hover {
    box-shadow: 0 2px 10px rgba(var(--shadow-rgb), 0.12);
}
.ob-welcome-skip {
    color: var(--text2);
}

/* Bankroll nudge icon inherits grass tint */
.ob-nudge-icon {
    color: var(--grass);
}

/* Coachmark tooltip: small ink frame + ink/ball dots */
.ob-tooltip {
    border: 2px solid var(--text);
    border-radius: 16px;
    box-shadow: 6px 6px 0 rgba(var(--shadow-rgb), 0.08);
}
.ob-tooltip-btn {
    border: 1px solid var(--ball-border);
    border-radius: var(--radius-pill);
}
.ob-tooltip-dot {
    width: 6px;
    height: 6px;
    box-sizing: border-box;
    background: transparent;
    border: 1.5px solid rgba(var(--ink-rgb), 0.4);
}
.ob-tooltip-dot--active {
    background: var(--ball);
    border-color: var(--ball-border);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .ob-welcome-backdrop,
    .ob-welcome-card,
    .ob-step,
    .ob-nudge,
    .auth-screen,
    .fade-in {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════
   Onboarding welcome → non-blocking corner nudge (retour user #18)
   Modern toast pattern: slides in bottom-right, a 12s time bar depletes
   (paused on hover), then the card minimizes to a pill instead of
   squatting the middle of the screen. Loaded after the block above:
   these override the centered-modal rules.
   ════════════════════════════════════════════ */
.ob-welcome-backdrop {
    position: fixed;
    inset: auto 24px 24px auto;
    width: auto;
    height: auto;
    display: block;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
    z-index: 1200;
}

.ob-welcome-card {
    pointer-events: auto;
    width: 372px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow: auto;
    position: relative;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 24px 60px -24px rgba(var(--shadow-rgb, 26, 29, 24), 0.45);
    animation: ob-nudge-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ob-welcome-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    background: var(--control-bg);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.ob-welcome-close:hover {
    color: var(--text);
    background: var(--control-bg-hover);
}

.ob-welcome-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--ball);
    transform: scaleX(1);
    transform-origin: 0 50%;
}
.ob-welcome-card.is-live .ob-welcome-progress {
    animation: ob-deplete 12s linear forwards;
}
.ob-welcome-card.is-live:hover .ob-welcome-progress {
    animation-play-state: paused;
}

/* Minimized pill (after the bar runs out, or never if reduced-motion) */
.ob-welcome-pill {
    pointer-events: auto;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg2);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 30px -16px rgba(var(--shadow-rgb, 26, 29, 24), 0.4);
}
.ob-welcome-pill .ob-welcome-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--ball);
    flex-shrink: 0;
}

.ob-welcome-backdrop.ob-minimized .ob-welcome-card {
    display: none;
}
.ob-welcome-backdrop.ob-minimized .ob-welcome-pill {
    display: inline-flex;
}

@keyframes ob-nudge-in {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes ob-deplete {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 640px) {
    .ob-welcome-backdrop {
        inset: auto 12px 12px 12px;
    }
    .ob-welcome-card {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ob-welcome-card {
        animation: none;
    }
    .ob-welcome-card.is-live .ob-welcome-progress {
        animation: none;
    }
}

/* ════════════════════════════════════════════
   Interactive guided tour (retour user #19) : spotlight on real
   elements + step card + completion toast. Tokens only, both themes.
   ════════════════════════════════════════════ */
.ob-tour-spot {
    position: fixed;
    z-index: 1300;
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(var(--shadow-rgb, 26, 29, 24), 0.52);
    border: 2px solid var(--ball);
    pointer-events: none;
    transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1), top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ob-tour-card {
    position: fixed;
    z-index: 1301;
    width: min(340px, calc(100vw - 32px));
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 22px 18px;
    box-shadow: 0 28px 70px -28px rgba(var(--shadow-rgb, 26, 29, 24), 0.55);
    transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1), left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Eyebrow : pastille lime + progression, registre Stadium */
.ob-tour-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text2);
}
.ob-tour-eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 99px;
    background: var(--ball);
    flex-shrink: 0;
}

.ob-tour-title {
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
}

.ob-tour-desc {
    margin-top: 7px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--text2);
}

.ob-tour-foot {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Dots : actif allongé en lime (progression moderne) */
.ob-tour-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ob-tour-dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--control-border);
    transition: width 0.2s ease, background 0.2s ease;
}
.ob-tour-dot--on {
    width: 18px;
    background: var(--ball);
}

.ob-tour-btns {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* « Passer » : pill ghost équilibré (plus de texte nu) */
.ob-tour-skip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text2);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ob-tour-skip:hover { border-color: var(--text); color: var(--text); }

/* « Suivant » : ball pill raffiné (grammaire CTA Stadium) */
.ob-tour-next {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 18px;
    border: 0;
    border-radius: 99px;
    background: var(--ball);
    color: var(--text-on-ball);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ob-tour-next:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px var(--ball); }
.ob-tour-skip:focus-visible, .ob-tour-next:focus-visible { outline: 2px solid var(--ball); outline-offset: 2px; }

/* Action step : accent lime + halo doux vers le vrai clic */
.ob-tour-card--action {
    border-color: var(--ball);
    box-shadow: 0 28px 70px -28px rgba(var(--shadow-rgb, 26, 29, 24), 0.55), 0 0 0 1px var(--ball);
}
.ob-tour-card--action .ob-tour-eyebrow { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
    .ob-tour-dot, .ob-tour-next { transition: none; }
    .ob-tour-next:hover { transform: none; }
}

/* Completion toast (bottom center, depleting bar, auto-dismiss 5s) */
.ob-tour-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 1302;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--bg2);
    border: 1px solid var(--line);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    box-shadow: 0 16px 40px -18px rgba(var(--shadow-rgb, 26, 29, 24), 0.5);
    overflow: hidden;
    animation: ob-nudge-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ob-tour-toast-dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--ball);
    flex-shrink: 0;
}
.ob-tour-toast-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--ball);
    transform-origin: 0 50%;
    animation: ob-deplete 5s linear forwards;
}

/* Welcome nudge: tour CTA primary, dashboard CTA becomes ghost */
.ob-welcome-cta--ghost {
    background: none;
    border: 1px solid var(--control-border);
    color: var(--text2);
}
.ob-welcome-cta--ghost:hover {
    color: var(--text);
    border-color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
    .ob-tour-spot,
    .ob-tour-card {
        transition: none;
    }
    .ob-tour-toast {
        animation: none;
    }
    .ob-tour-toast-bar {
        animation: none;
        display: none;
    }
}

/* ════════════════════════════════════════════
   Contextual tour offer (bottom-right pill, first visit of a screen).
   Reuses the .ob-welcome-pill grammar; 15s depleting bar (pattern #18),
   pause on hover, ✕ to dismiss. Tokens only, both themes.
   ════════════════════════════════════════════ */
.ob-offer {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1190;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: ob-nudge-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ob-offer .ob-offer-pill {
    display: inline-flex;
    position: relative;
    overflow: hidden;
}
.ob-offer-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--ball);
    transform-origin: 0 50%;
}
.ob-offer.is-live .ob-offer-bar {
    animation: ob-deplete 15s linear forwards;
}
.ob-offer.is-live:hover .ob-offer-bar {
    animation-play-state: paused;
}
.ob-offer.is-leaving {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ob-offer-x {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: var(--bg2);
    color: var(--text3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 12px 30px -16px rgba(var(--shadow-rgb, 26, 29, 24), 0.4);
}
.ob-offer-x:hover {
    color: var(--text);
    background: var(--control-bg-hover);
}

@media (max-width: 640px) {
    .ob-offer {
        right: 12px;
        bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ob-offer {
        animation: none;
    }
    .ob-offer.is-live .ob-offer-bar {
        animation: none;
        display: none;
    }
    .ob-offer.is-leaving {
        transition: none;
    }
}

/* Topbar « ? » tour entry: inherits the .theme-toggle 32px pill frame */
.tour-help {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* ==== picks.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Picks screen
   Loaded AFTER css/app.css. Scope kept to the picks
   screen: `.picks-tabs/.picks-tab` (picks-only classes)
   and `#picksTabContent …` (tab content container).
   ═══════════════════════════════════════════════ */

/* ── Main tabs: pills 99px, active = ink filled ── */
.picks-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0 0 2px;
    border: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.picks-tabs::-webkit-scrollbar { display: none; }
.picks-tab {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid var(--control-border);
    border-radius: 99px;
    background: transparent;
    color: var(--text2);
    white-space: nowrap;
}
.picks-tab::after { display: none; }
.picks-tab:hover {
    border-color: var(--text3);
    color: var(--text);
    background: transparent;
}
.picks-tab.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}

/* ── Tier tabs (Public / VIP): same pill grammar ── */
#picksTabContent .tier-tabs {
    gap: 8px;
    margin: 0 auto 20px;
    padding: 0;
    border: 0;
}
#picksTabContent .tier-tab {
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--control-border);
    border-radius: 99px;
    color: var(--text2);
}
#picksTabContent .tier-tab::after { display: none; }
#picksTabContent .tier-tab:hover {
    border-color: var(--text3);
    color: var(--text);
}
#picksTabContent .tier-tab.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
.tier-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.tier-dot-public { background: var(--grass); }
.tier-dot-vip { background: var(--clay); }
/* On ink fill, surface-dark dots vanish: switch to the lime ball
   (lime on dark = allowed context). */
#picksTabContent .tier-tab.active .tier-dot { background: var(--ball); }

/* ── Filter pills (surface / result) + pagination arrows ── */
.picks-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.picks-filter-row-last {
    margin-bottom: 16px;
}
#picksTabContent .period-btn {
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid var(--control-border);
    border-radius: 99px;
    background: transparent;
    color: var(--text2);
}
#picksTabContent .period-btn::after { display: none; }
#picksTabContent .period-btn:hover {
    border-color: var(--text3);
    color: var(--text);
    background: transparent;
}
#picksTabContent .period-btn.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
#picksTabContent .period-btn:disabled {
    opacity: 1;
    border-color: var(--line);
    color: var(--text3);
    cursor: not-allowed;
}

/* Keyboard focus on all picks pills */
.picks-tab:focus-visible,
#picksTabContent .tier-tab:focus-visible,
#picksTabContent .period-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Tournament dropdown joins the pill grammar */
#picksTabContent .filter-select {
    border-radius: 99px;
    padding-left: 16px;
}

/* ── Pick cards: hairline panels, no glow ── */
#picksTabContent .pick-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}
#picksTabContent .pick-card::before { display: none; } /* drop left accent bar, surface = dot */
#picksTabContent .pick-card:hover {
    border-color: var(--control-border);
    box-shadow: 0 6px 20px rgba(var(--ink-rgb), 0.08);
}

/* ── Surface dot per match (context line chip → dot + label) ── */
#picksTabContent .pick-card-context .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: inherit;
    letter-spacing: inherit;
    vertical-align: baseline;
}
#picksTabContent .pick-card-context .badge::before {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
/* indoor inherits --text2: nudge the dot to the lime ball, ink-ringed for AA-safe edges */
#picksTabContent .pick-card-context .badge.surface-indoor::before {
    background: var(--ball);
    box-shadow: 0 0 0 1px var(--ball-border);
}

/* ── Result badges: outline pills ── */
#picksTabContent .badge-win,
#picksTabContent .badge-loss,
#picksTabContent .badge-void,
#picksTabContent .badge-pending {
    min-height: 24px;
    padding: 0 11px;
    border-radius: 99px;
    border: 1px solid currentColor;
    background: transparent;
    font-weight: 700;
    letter-spacing: 0.8px;
}
#picksTabContent .badge-win  { color: var(--success); }
#picksTabContent .badge-loss { color: var(--fault); }
#picksTabContent .badge-void { color: var(--text3); }
#picksTabContent .badge-pending {
    color: var(--text2);
    border-color: var(--control-border);
}
#picksTabContent .badge-pending::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ball);
    box-shadow: 0 0 0 1px var(--ball-border);
    animation: picksPendingPulse 2.2s ease-in-out infinite;
}
@keyframes picksPendingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ── Odds / edge metrics: mono tabular, odds lifted ── */
#picksTabContent .pick-card-metric {
    font-variant-numeric: tabular-nums;
}
#picksTabContent .pick-card-metric[data-odds] {
    font-size: 0.72rem;
    color: var(--text);
    background: var(--input-bg);
    border-color: var(--control-border);
}
#picksTabContent .pick-card-metric[data-edge] {
    color: var(--text);
}

/* ── Running P&L: Stadium capsule (label top-left, mono value bottom-right) ── */
#picksTabContent .picks-pnl-capsule {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 116px;
    padding: 16px 20px 14px;
    border-radius: 24px;
    text-align: left;
}
#picksTabContent .picks-pnl-capsule .kpi-label {
    margin: 0;
    font-size: 12px;
    letter-spacing: var(--tracking-label);
}
#picksTabContent .picks-pnl-capsule .kpi-value {
    align-self: flex-end;
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ── Empty state: a sketched blank ticket (no pick = no ticket yet) ── */
.picks-empty {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg2);
    padding: 38px 20px 36px;
    text-align: center;
}
.picks-empty p {
    margin: 0;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.picks-empty-ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(190px, 100%);
    margin: 0 auto 16px;
    padding: 13px 14px 0;
    border: 1px dashed rgba(var(--ink-rgb), 0.35);
    border-radius: 12px;
    background: var(--input-bg);
    overflow: hidden;
    text-align: left;
}
.picks-empty-ticket-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.picks-empty-ticket-rows span {
    height: 8px;
    border-radius: 4px;
    background: rgba(var(--ink-rgb), 0.1);
}
.picks-empty-ticket-rows span:first-child { width: 72%; }
.picks-empty-ticket-rows span:last-child { width: 45%; }
.picks-empty-ticket-perf {
    position: relative;
    margin: 3px -14px 0;
    border-top: 1px dashed rgba(var(--ink-rgb), 0.3);
}
.picks-empty-ticket-perf::before,
.picks-empty-ticket-perf::after {
    content: '';
    position: absolute;
    top: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg2);
    border: 1px dashed rgba(var(--ink-rgb), 0.35);
}
.picks-empty-ticket-perf::before { left: -6px; }
.picks-empty-ticket-perf::after { right: -6px; }
.picks-empty-ticket-stub {
    display: flex;
    gap: 8px;
    margin: 0 -14px;
    padding: 10px 14px 11px;
    background: var(--control-bg);
}
.picks-empty-ticket-stub span {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: rgba(var(--ink-rgb), 0.1);
}

/* ── Pagination ── */
.picks-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 22px 0 16px;
}
#picksTabContent .picks-pagination .period-btn {
    min-width: 38px;
    justify-content: center;
    padding: 0;
}
.picks-page-indicator {
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

/* ── Motion guard ── */
@media (prefers-reduced-motion: reduce) {
    #picksTabContent .badge-pending::before { animation: none; }
}

/* ── Mobile (PWA mobile-first, 390px ref) ── */
@media (max-width: 480px) {
    .picks-tab {
        min-height: 34px;
        padding: 7px 13px;
    }
    #picksTabContent .picks-pnl-capsule {
        min-height: 104px;
    }
    #picksTabContent .picks-pnl-capsule .kpi-value {
        font-size: 30px;
    }
}

/* ==== players.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Players screens (list + profile)
   Loaded AFTER css/app.css. Scoped to `.players-page`
   (list) and `.players-profile` (profile) containers,
   plus the players-only classes added by js/players.js
   (player-dir-*, scout-*, players-head-*).
   Reference: /stadium/joueuses/ (bzb-dir-* directory).
   ═══════════════════════════════════════════════ */

/* ── Two-tone heading + mono eyebrow ── */
.players-page .players-head {
    margin: 6px 0 22px;
}
.players-head-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text3);
}
.players-head-title {
    font-family: var(--font-display);
    font-size: clamp(34px, 8vw, 56px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text);
    margin: 12px 0 0;
}
.players-head-title-2 {
    color: var(--text3);
}

/* ── Toolbar: search inside 2px-ink top rule (Stadium dir toolbar) ── */
.players-page .players-toolbar {
    margin: 0 0 12px;
    padding: 16px 0;
    border-top: 2px solid var(--text);
    border-bottom: 1px solid var(--line);
}
.players-page .players-search-input {
    max-width: 520px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.05em;
    background: var(--input-bg);
    border: 1px solid var(--control-border);
    border-radius: 0;
}
.players-page .players-search-input:focus {
    border-color: var(--text);
    box-shadow: none;
    outline: none;
}
.players-page .players-meta {
    font-family: var(--font-mono);
    font-size: 10.4px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text3);
    font-variant-numeric: tabular-nums;
    margin: 0 0 18px;
}

/* ── Directory grid + cards (round headshot + mono rank) ── */
.players-page .players-grid--dir {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.player-dir-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 16px;
    background: var(--input-bg);
    border: 1px solid var(--control-border);
    border-radius: 0;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.player-dir-card:hover {
    border-color: var(--text);
    transform: translateY(-1px);
}
.player-dir-card:hover .player-dir-arrow {
    opacity: 1;
    transform: none;
}
.player-dir-photo {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg3);
    border: 1px solid var(--control-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.player-dir-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
.player-dir-initials {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text2);
}
.player-dir-id {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.player-dir-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.player-dir-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}
.player-dir-arrow {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--clay);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (max-width: 639px) {
    .players-page .players-grid--dir { grid-template-columns: 1fr; }
    .player-dir-arrow { opacity: 1; transform: none; }
}

/* ── Profile hero: round portrait + display name + grass rank ── */
.players-profile .player-profile-hero {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 26px;
}
.players-profile .player-profile-photo--round {
    width: 200px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--control-border);
    background-color: var(--bg3);
}
.player-profile-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text3);
}
.players-profile .player-profile-name {
    font-size: clamp(34px, 7vw, 56px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin: 10px 0 14px;
}
.player-profile-rankblock {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.player-profile-rank-num {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 700;
    color: var(--grass);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.player-profile-rank-sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
}
@media (max-width: 640px) {
    .players-profile .player-profile-hero { grid-template-columns: 1fr; }
    .players-profile .player-profile-photo--round { width: 148px; }
}

/* ── Section titles: bracketed mono eyebrows ── */
.players-profile .player-section-title::before { content: '[ '; color: var(--text3); }
.players-profile .player-section-title::after { content: ' ]'; color: var(--text3); }

/* ── Career strip → capsule cards (label top-left, value bottom-right) ── */
.players-profile .career-strip {
    padding: 0;
    border: 0;
    background: transparent;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.players-profile .career-pill {
    border: 1px solid var(--control-border);
    border-left: 1px solid var(--control-border);
    border-radius: 18px;
    background: var(--input-bg);
    padding: 14px 16px;
    min-height: 96px;
    gap: 0;
}
.players-profile .career-pill-label {
    order: 0;
    margin-top: 0;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text3);
}
.players-profile .career-pill-value {
    order: 1;
    margin-top: auto;
    align-self: flex-end;
    padding-top: 14px;
    font-size: 21px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.players-profile .career-pill-sub {
    order: 2;
    align-self: flex-end;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text3);
}

/* ── Compare CTA: outline ink pill ── */
.players-profile .compare-cta-btn {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.players-profile .compare-cta-btn:hover {
    background: var(--text);
    color: var(--bg);
    box-shadow: none;
}

/* ── Scouting "Profil de jeu" cards (Stadium repaint of the old dark card) ── */
.scout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 680px) {
    .scout-grid { grid-template-columns: 1fr 1fr; }
}
.scout-card {
    background: var(--input-bg);
    border: 1px solid var(--control-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.scout-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 16px;
}
.scout-bar { margin-bottom: 10px; }
.scout-bar--big { margin-bottom: 16px; }
.scout-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    margin-bottom: 5px;
}
.scout-bar--big .scout-bar-head { font-size: 13.5px; }
.scout-bar-label { color: var(--text2); }
.scout-bar-pct {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--grass);
    font-variant-numeric: tabular-nums;
}
.scout-bar-pct--muted { color: var(--text3); }
.scout-bar-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--control-bg);
    overflow: hidden;
}
.scout-bar--big .scout-bar-track { height: 8px; }
.scout-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
}
.scout-bar-fill--ink { background: var(--text); }
.scout-bar-fill--hard { background: var(--hard); }
.scout-bar-fill--clay { background: var(--clay); }
.scout-bar-fill--grass { background: var(--grass); }
.scout-best {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text3);
}
.scout-best-val { font-weight: 700; }
.scout-best-val--hard { color: var(--hard); }
.scout-best-val--clay { color: var(--clay); }
.scout-best-val--grass { color: var(--grass); }
.scout-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.scout-kpi-val {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.scout-kpi-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
    margin-top: 4px;
}
.scout-meta {
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 6px;
}
.scout-meta strong { color: var(--text); font-weight: 700; }
.scout-foot-line {
    font-size: 12px;
    color: var(--text3);
    margin-bottom: 8px;
}

/* ── Stat bars harmonized: control-bg track + surface-color fills ── */
.players-profile .player-stat-bar {
    background: var(--control-bg);
    box-shadow: none;
}
.players-profile .player-stat-bar-fill { background: var(--clay); }
.players-profile .insight-card--service .player-stat-bar-fill { background: var(--hard); }
.players-profile .insight-card--return .player-stat-bar-fill { background: var(--grass); }
.players-profile .dist-bar-wrap {
    background: var(--control-bg);
    box-shadow: none;
}
.players-profile .dist-bar { background: var(--clay); }

/* ── Recent form dots: win/loss semantic colors (no lime fills) ── */
.players-profile .form-dot--win {
    background: var(--success);
    box-shadow: none;
}
.players-profile .form-dot--loss { background: var(--fault); }
.players-profile .form-dot--latest {
    box-shadow: 0 0 0 2px var(--bg2), 0 0 0 3px var(--text);
}
.players-profile .vd-letter--win {
    background: var(--success);
    border: 0;
    color: #fbf5e2;
}
.players-profile .vd-letter--loss {
    background: var(--fault);
    border: 0;
    color: #fbf5e2;
}

/* ── Ranking trend: clay accent (matches the SVG repaint) ── */
.players-profile .legend-dot--peak { background: var(--clay); }

/* ── Filter bar: outline mono pills, active = ink filled ── */
.players-profile .players-filter-bar {
    border: 1px solid var(--control-border);
    background: var(--input-bg);
    border-radius: 16px;
}
.players-profile .filter-row-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text3);
}
.players-profile .filter-pill {
    background: transparent;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text2);
    padding: 8px 14px;
    box-shadow: none;
}
.players-profile .filter-pill:hover:not(.filter-pill--disabled) {
    border-color: var(--text);
    color: var(--text);
    background: transparent;
}
.players-profile .filter-pill--active,
.players-profile .filter-pill--active:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
.players-profile .filter-pill--disabled { opacity: 0.38; }
.players-profile .filter-select {
    font-family: var(--font-mono);
    font-size: 12px;
    background-color: var(--input-bg);
    border: 1px solid var(--control-border);
    color: var(--text);
}
.players-profile .filter-select:focus {
    border-color: var(--text);
    box-shadow: none;
    outline: none;
}

/* ── Overview toggle: 2px ink frame button ── */
.players-profile .overview-toggle-btn {
    background: transparent;
    border: 2px solid var(--text);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    box-shadow: none;
}
.players-profile .overview-toggle-btn:hover {
    background: var(--control-bg);
    color: var(--text);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .player-dir-card,
    .player-dir-arrow,
    .players-profile .filter-pill,
    .players-profile .player-stat-bar-fill,
    .players-profile .dist-bar,
    .scout-bar-fill {
        transition: none;
    }
    .player-dir-card:hover { transform: none; }
}

/* ==== portfolio.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Portfolio screen (loaded after app.css)
   A bet = a ticket on one precise match: perforated ticket
   cards (pending), day-grouped settled timeline, capsule
   stats, ink-framed bankroll hero, sketched-ticket empty
   state, CSV export pill. Tokens only (light AND dark).
   ═══════════════════════════════════════════════ */

/* ── Mono eyebrow (Stadium label) ── */
.pf-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Bankroll hero: 2px ink frame capsule ── */
.pf-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    min-height: 132px;
    padding: 16px 20px 15px;
    border: 2px solid var(--text);
    border-radius: 24px;
    background: var(--input-bg);
}
.pf-hero-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.pf-hero-streak {
    margin-left: auto;
}
.pf-hero-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    flex-wrap: wrap;
}
.pf-hero-delta {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
}
.pf-hero-delta.is-up { color: var(--success); }
.pf-hero-delta.is-down { color: var(--fault); }
.pf-hero-value {
    margin-left: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: clamp(2.1rem, 8vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
    text-align: right;
}
.pf-hero-value.is-up { color: var(--success); }
.pf-hero-value.is-down { color: var(--fault); }

/* ── Stats: capsule grid (2 cols mobile, 4 desktop) ── */
.pf-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 720px) {
    .pf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pf-kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    min-height: 108px;
    padding: 15px 16px 13px;
    border-radius: 24px;
}
.pf-kpi::before { display: none; }
.pf-kpi-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.pf-kpi-head .pf-eyebrow { font-size: 11px; }
.pf-kpi-foot {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: auto;
}
.pf-kpi-value {
    display: block;
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: clamp(1.45rem, 4.8vw, 1.9rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* ── Settings capsule (collapsible) ── */
.pf-settings {
    border-radius: 24px;
    padding: 16px 18px;
}
.pf-settings::before { display: none; }
.pf-settings-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    min-width: 0;
}
.pf-settings-summary::-webkit-details-marker { display: none; }
.pf-settings-value {
    margin-left: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--text);
}
.pf-settings-chev {
    flex: 0 0 auto;
    color: var(--text3);
    transition: transform 0.18s ease;
}
.pf-settings[open] .pf-settings-chev { transform: rotate(180deg); }
.pf-settings-body {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* ── P&L chart: 2px ink data frame ── */
.pf-chart-frame {
    border: 2px solid var(--text);
    border-radius: var(--radius-lg);
    background: var(--input-bg);
    overflow: hidden;
}
.pf-chart-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--text);
    background: var(--bg2);
}
.pf-chart-unit {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-on-ball);
    background: var(--ball);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.pf-chart-body {
    position: relative;
    height: 220px;
    padding: 14px 12px 10px;
}

/* ── Export: pill outline (ink), fills on hover ── */
.pf-export-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}
.pf-export-btn:hover {
    background: var(--text);
    color: var(--bg);
}
.pf-export-btn:disabled {
    opacity: 0.45;
    cursor: wait;
}
.pf-export-btn svg { flex: 0 0 auto; }

/* ═══════════════════════════════════════════════
   TICKETS — a bet is a ticket on one precise match
   ═══════════════════════════════════════════════ */

.pf-tickets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
}
@media (min-width: 860px) {
    .pf-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pf-ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 13px 16px 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--input-bg);
    overflow: hidden; /* clips the punched notches on the perforation */
}

/* Top strip: ticket ref + date (mono) / tag + status pills */
.pf-tk-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.pf-tk-ref {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text2);
    white-space: nowrap;
}
.pf-tk-date {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text3);
    white-space: nowrap;
}
.pf-tk-top-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Tier tag pill: outline, surface-coded (vip=clay, public=grass) */
.pf-tk-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pf-tk-tag-vip { color: var(--clay); }
.pf-tk-tag-public { color: var(--grass); }
.pf-tk-tag-free { color: var(--text3); }

/* Status pill: outline, result-coded */
.pf-tk-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pf-tk-status-win { color: var(--success); }
.pf-tk-status-loss { color: var(--fault); }
.pf-tk-status-void { color: var(--text3); }
.pf-tk-status-pending {
    color: var(--text2);
    border-color: var(--control-border);
}
.pf-tk-status-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ball);
    box-shadow: 0 0 0 1px var(--ball-border);
    animation: pfPendingPulse 2.2s ease-in-out infinite;
}
@keyframes pfPendingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Match block: the two players of THIS match, mirrored around VS */
.pf-tk-match {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0 3px;
    min-width: 0;
}
.pf-tk-match-flat { padding: 12px 0 4px; }
.pf-tk-player {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pf-tk-player:last-child {
    flex-direction: row-reverse;
    text-align: right;
}
.pf-tk-player:last-child .pf-tk-player-copy { align-items: flex-end; }
.pf-tk-avatar {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg2);
    overflow: hidden;
}
.pf-tk-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pf-tk-avatar.is-fallback::after {
    content: attr(data-initials);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text3);
}
.pf-tk-player.is-pick .pf-tk-avatar {
    border-color: var(--ball-border);
    box-shadow: 0 0 0 2px var(--ball);
}
.pf-tk-player-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.pf-tk-player-name {
    max-width: 100%;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.2;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-tk-player-sub {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
    white-space: nowrap;
}
/* Lime chip on the picked side: ink text on ball (AA-safe) */
.pf-tk-player.is-pick .pf-tk-player-sub {
    padding: 1px 7px;
    border: 1px solid var(--ball-border);
    border-radius: var(--radius-pill);
    background: var(--ball);
    color: var(--text-on-ball);
}
.pf-tk-vs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text3);
}

/* Context line: surface dot OF THIS MATCH + tournament */
.pf-tk-context {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0 12px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
    min-width: 0;
}
.pf-tk-context > span:not(.pf-surface-dot):not(.pf-tk-context-sep) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-tk-context-sep { flex: 0 0 auto; }
.pf-surface-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.pf-dot-hard { background: var(--hard); }
.pf-dot-clay { background: var(--clay); }
.pf-dot-grass { background: var(--grass); }
.pf-dot-indoor { background: var(--ace); }

/* Perforation: dashed hairline + punched side notches */
.pf-tk-perf {
    position: relative;
    margin: 0 -16px;
    border-top: 1px dashed rgba(var(--ink-rgb), 0.3);
}
.pf-tk-perf::before,
.pf-tk-perf::after {
    content: '';
    position: absolute;
    top: -8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
}
.pf-tk-perf::before { left: -8px; }
.pf-tk-perf::after { right: -8px; }

/* Stub: selection + numbers, mono tabular */
.pf-tk-stub {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 18px;
    flex-wrap: wrap;
    margin: 0 -16px;
    padding: 12px 16px 14px;
    background: var(--control-bg);
}
.pf-stub-sel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.pf-stub-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
    white-space: nowrap;
}
.pf-stub-sel-name {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 680;
    line-height: 1.15;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-stub-nums {
    display: flex;
    gap: 16px;
    margin-left: auto;
}
.pf-stub-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.pf-stub-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
}
.pf-pnl-pos { color: var(--success); }
.pf-pnl-neg { color: var(--fault); }

/* Actions row continues the stub zone (pending tickets) */
.pf-tk-actions {
    margin: 0 -16px;
    padding: 0 16px 13px;
    background: var(--control-bg);
    text-align: right;
}
.pf-unfollow-btn {
    padding: 6px 14px;
    font-size: 0.6rem;
}

/* ═══════════════════════════════════════════════
   HISTORY — day-grouped timeline of settled tickets
   ═══════════════════════════════════════════════ */

.pf-timeline {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 14px;
}
.pf-day {
    position: relative;
    padding-left: 20px;
}
/* vertical rail linking day markers */
.pf-day::before {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 16px;
    bottom: -18px;
    width: 1px;
    background: var(--line);
}
.pf-day:last-child::before { display: none; }
.pf-day-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;
}
.pf-day-marker {
    position: absolute;
    left: 0;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ball);
    box-shadow: 0 0 0 1px var(--ball-border);
}
.pf-day-date {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
}
.pf-day-count {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text3);
    white-space: nowrap;
}
.pf-day-pnl {
    margin-left: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
    white-space: nowrap;
}
.pf-day-rows {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--input-bg);
    overflow: hidden;
}

/* Settled ticket row: W/L/V seal + match + numbers */
.pf-trow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    min-width: 0;
}
.pf-trow + .pf-trow { border-top: 1px solid var(--line); }
.pf-trow-result {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}
.pf-trow-result-win { color: var(--success); }
.pf-trow-result-loss { color: var(--fault); }
.pf-trow-result-void { color: var(--text3); }
.pf-trow-main {
    flex: 1;
    min-width: 0;
}
.pf-trow-match {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-trow-opp {
    color: var(--text3);
    font-weight: 500;
}
.pf-trow-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text3);
    min-width: 0;
}
.pf-trow-sub > span:not(.pf-surface-dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-trow-odds {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--text2);
}
.pf-trow-nums {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.pf-trow-stake {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 600;
    color: var(--text3);
}
.pf-trow-pnl {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
}

/* ═══════════════════════════════════════════════
   EMPTY STATE — a sketched blank ticket (your next bet),
   meaningful and theme-aware, replaces the clay-court photo
   ═══════════════════════════════════════════════ */

.pf-empty {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--input-bg);
    padding: 30px 20px 28px;
    text-align: center;
}
.pf-empty-ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(250px, 100%);
    margin: 0 auto 18px;
    padding: 13px 16px 0;
    border: 1px dashed rgba(var(--ink-rgb), 0.35);
    border-radius: 14px;
    background: var(--bg2);
    overflow: hidden;
}
.pf-empty-ticket-ref {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
    text-align: left;
}
.pf-empty-ticket-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pf-empty-ticket-rows span {
    height: 9px;
    border-radius: 5px;
    background: rgba(var(--ink-rgb), 0.1);
}
.pf-empty-ticket-rows span:first-child { width: 72%; }
.pf-empty-ticket-rows span:last-child { width: 46%; }
.pf-empty-ticket-perf {
    position: relative;
    margin: 3px -16px 0;
    border-top: 1px dashed rgba(var(--ink-rgb), 0.3);
}
.pf-empty-ticket-perf::before,
.pf-empty-ticket-perf::after {
    content: '';
    position: absolute;
    top: -7px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--input-bg);
    border: 1px dashed rgba(var(--ink-rgb), 0.35);
}
.pf-empty-ticket-perf::before { left: -7px; }
.pf-empty-ticket-perf::after { right: -7px; }
.pf-empty-ticket-stub {
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 11px 16px 9px;
    background: var(--control-bg);
}
.pf-empty-ticket-stub span {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(var(--ink-rgb), 0.1);
}
.pf-empty-ticket-label {
    margin: 0 -16px;
    padding: 0 16px 12px;
    background: var(--control-bg);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text3);
}
.pf-empty-body {
    max-width: 380px;
    margin: 0 auto;
}
.pf-empty-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 680;
    line-height: 1.15;
    color: var(--text);
}
.pf-empty-hint {
    margin: 8px auto 0;
    max-width: 360px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text2);
}
.pf-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    min-height: 38px;
    padding: 0 20px;
    border: 1px solid var(--text);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.pf-empty-cta:hover {
    background: var(--text);
    color: var(--bg);
}

/* ── Motion guard ── */
@media (prefers-reduced-motion: reduce) {
    .pf-settings-chev { transition: none; }
    .pf-tk-status-dot { animation: none; }
}

/* ── Mobile (PWA mobile-first, 390px ref) ── */
@media (max-width: 480px) {
    .pf-hero { min-height: 118px; padding: 14px 16px 13px; }
    .pf-kpi { min-height: 96px; padding: 13px 14px 11px; }
    .pf-chart-body { height: 180px; padding: 10px 8px 8px; }
    .pf-export-btn span { display: none; }
    .pf-export-btn { padding: 0 11px; }
    .pf-tk-avatar { width: 38px; height: 38px; }
    .pf-tk-player-name { font-size: 12.5px; }
    .pf-tk-vs { width: 22px; height: 22px; font-size: 8px; }
    .pf-stub-nums { gap: 13px; }
    .pf-stub-value { font-size: 13.5px; }
    .pf-trow { padding: 10px 11px; gap: 10px; }
    .pf-day { padding-left: 17px; }
}

/* ==== profile.css ==== */
/* ════════════════════════════════════════════
   Profile · Stadium bento rework (retour user #22)
   Two-column grid, capsule cards, explicit danger zone.
   Tokens only — light + dark.
   ════════════════════════════════════════════ */

.profile-page .page-title {
    margin-bottom: 0;
}

.profile-head {
    margin-bottom: 28px;
}

.profile-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text3);
}

.profile-title-muted {
    color: var(--text3);
    font-weight: 500;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: start;
    max-width: 980px;
}

.profile-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* ── Plan capsule : ink frame, big mono value ── */
.profile-plan {
    border: 2px solid var(--text);
    border-radius: 20px;
    background: var(--input-bg);
    padding: 18px 20px;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.profile-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-plan-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
}

.profile-plan-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--control-border);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text2);
}

.profile-plan-pill--on {
    background: var(--ball);
    border-color: var(--ball);
    color: var(--text-on-ball);
}

.profile-plan-dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--text-on-ball);
    animation: profile-blink 1.8s ease-in-out infinite;
}

@keyframes profile-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.profile-plan-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.profile-plan-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text3);
}

.profile-plan-value {
    font-family: var(--font-mono);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text);
}

/* ── Row link (billing) ── */
.profile-row-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg2);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.profile-row-link:hover {
    border-color: var(--text);
    transform: translateY(-1px);
}

/* ── Section cards ── */
.profile-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg2);
    padding: 18px 20px;
}

.profile-card-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 14px;
}

/* Language pills */
.profile-lang-row {
    display: flex;
    gap: 8px;
}

.profile-lang-pill {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--control-border);
    background: transparent;
    color: var(--text2);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.15s ease;
}
.profile-lang-pill:hover { border-color: var(--text); color: var(--text); }
.profile-lang-pill.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}

/* Toggle rows */
.profile-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    cursor: pointer;
}
.profile-toggle-row:first-of-type { border-top: none; }

.profile-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.profile-toggle-desc {
    font-size: 12px;
    color: var(--text3);
}

.profile-toggle-row--push { cursor: default; }

/* ── Action pills ── */
.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-pill-ghost,
.profile-pill-on,
.profile-pill-danger {
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
}

.profile-pill-ghost {
    border: 1px solid var(--control-border);
    background: transparent;
    color: var(--text2);
}
.profile-pill-ghost:hover { border-color: var(--text); color: var(--text); }

.profile-pill-on {
    border: 1px solid var(--ball);
    background: var(--ball);
    color: var(--text-on-ball);
}

.profile-pill-danger {
    border: 1px solid var(--fault);
    background: transparent;
    color: var(--fault);
}
.profile-pill-danger:hover { background: var(--fault); color: var(--input-bg); }
.profile-pill-danger:disabled { opacity: 0.55; cursor: wait; }

/* Danger zone */
.profile-danger .profile-card-label { color: var(--text3); }

.profile-delete-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-delete-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--fault);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.profile-delete-note {
    font-size: 11.5px;
    color: var(--text3);
}

.profile-upgrade { border-radius: 999px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-plan-dot { animation: none; }
    .profile-row-link, .profile-row-link:hover { transform: none; transition: none; }
}

/* ==== subscribe.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Subscribe screen
   Loaded AFTER css/app.css. Scoped to `.subscribe-page`
   (class added on the page container in js/subscribe.js).
   ═══════════════════════════════════════════════ */

/* Focused single column on desktop, full width on mobile */
.subscribe-page {
    max-width: 600px;
}

/* ── Hero: dark capsule with night-session photo ──
   Dark context: lime text/accents allowed here (never on cream). */
.sub-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #0a0c08;
    min-height: 224px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 28px;
}
.sub-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}
.sub-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 84px 22px 20px;
    background: linear-gradient(180deg, rgba(10, 12, 8, 0) 0%, rgba(10, 12, 8, 0.55) 48%, rgba(10, 12, 8, 0.88) 100%);
}
.sub-hero-eyebrow {
    color: var(--ball);
    margin-bottom: 10px;
}
.sub-hero-title {
    color: #fbf5e2;
    margin: 0 0 8px;
}
.sub-hero-vip {
    color: var(--ball);
    text-shadow: 0 0 18px rgba(207, 235, 43, 0.35);
}
.sub-hero-tag {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: rgba(251, 245, 226, 0.78);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.sub-hero-proof {
    justify-content: flex-start;
    gap: 14px;
    row-gap: 6px;
    color: rgba(251, 245, 226, 0.66);
}

/* ── Currency toggle: pill group, active = ink filled ── */
.subscribe-page .currency-toggle {
    border: 1px solid var(--control-border);
    border-radius: 99px;
    padding: 3px;
    gap: 2px;
    background: transparent;
}
.subscribe-page .currency-btn {
    border-radius: 99px;
    padding: 0 16px;
    min-height: 30px;
}
.subscribe-page .currency-btn::after {
    display: none;
}
.subscribe-page .currency-btn.active {
    background: var(--text);
    color: var(--bg);
}

/* ── Plan cards: capsules radius 24, 2px ink frame on recommended ── */
.subscribe-page .plan-card {
    background: var(--input-bg);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 18px 22px 16px;
    box-shadow: none;
}
.subscribe-page .plan-card:hover {
    border-color: var(--control-border);
    box-shadow: 0 4px 18px rgba(26, 29, 24, 0.08);
}
/* Recommended plan: permanent 2px ink frame + "Recommandé" pill */
.subscribe-page .plan-card.recommended {
    transform: none;
    border-color: var(--text);
    box-shadow: inset 0 0 0 1px var(--text);
    z-index: 1;
}
.subscribe-page .plan-card.recommended:hover {
    box-shadow: inset 0 0 0 1px var(--text), 0 4px 18px rgba(26, 29, 24, 0.10);
}
.subscribe-page .plan-card.recommended::before {
    top: -10px;
    left: 20px;
    right: auto;
    background: var(--text);
    color: var(--bg);
    padding: 3px 12px;
    border-radius: 99px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 1.2px;
}
/* Selected plan: ink frame + lime tick (ink glyph on ball, AA-safe) */
.subscribe-page .plan-card.selected {
    border-color: var(--text);
    box-shadow: inset 0 0 0 1px var(--text), 0 6px 22px rgba(26, 29, 24, 0.10);
    background: var(--input-bg);
}
.subscribe-page .plan-tick {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ball);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
}
.subscribe-page .plan-card.selected .plan-tick {
    display: inline-flex;
}

.subscribe-page .plan-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.subscribe-page .plan-name {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}
.subscribe-page .plan-save {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 700;
    color: var(--grass);
    background: var(--grass-subtle);
    border: 1px solid var(--grass-border);
    border-radius: 99px;
    padding: 3px 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Capsule pattern: big mono price bottom-right, mono period bottom-left */
.subscribe-page .plan-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 16px;
}
.subscribe-page .plan-period {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text3);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.subscribe-page .plan-price {
    font-family: var(--font-mono);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.subscribe-page .plan-price-cur {
    font-size: 1.15rem;
    color: var(--text2);
    margin-left: 2px;
    letter-spacing: 0;
}

/* ── Payment method buttons: ink frame when selected ── */
.subscribe-page .payment-btn {
    border-radius: 16px;
    background: var(--input-bg);
    border: 1px solid var(--line);
    min-height: 56px;
}
.subscribe-page .payment-btn:hover {
    border-color: var(--control-border);
}
.subscribe-page .payment-btn.selected {
    border-color: var(--text);
    box-shadow: inset 0 0 0 1px var(--text);
    color: var(--text);
}

/* ── CGV consent row ── */
.subscribe-page .cgv-row {
    gap: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    align-items: flex-start;
}
.subscribe-page .cgv-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--grass);
}
.subscribe-page .cgv-label {
    font-size: 0.72rem;
    color: var(--text2);
    line-height: 1.5;
}

/* ── CTA: ink-on-ball pill ── */
.subscribe-page .cta-pay {
    min-height: 54px;
    padding: 16px 24px;
    margin-bottom: 24px;
    border-radius: 99px;
    background: var(--ball);
    border: 1px solid var(--text);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 2px 0 rgba(26, 29, 24, 0.85);
}
.subscribe-page .cta-pay:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 0 rgba(26, 29, 24, 0.85), 0 6px 16px rgba(26, 29, 24, 0.14);
}
.subscribe-page .cta-pay:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(26, 29, 24, 0.85);
}
.subscribe-page .cta-pay:disabled {
    box-shadow: none;
}

/* ── Features: hairline rows, grass checks ── */
.subscribe-page .feature-item {
    border-top: 1px solid var(--line);
    padding: 12px 2px;
    gap: 12px;
    font-size: 13px;
    color: var(--text2);
}
.subscribe-page .feature-item:last-child {
    border-bottom: 1px solid var(--line);
}
.subscribe-page .feature-check {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1.5px solid var(--grass-border);
    color: var(--grass);
    font-weight: 700;
}

/* ── Trial badge already themed in app.css; tighten width on mobile ── */
@media (max-width: 480px) {
    .sub-hero {
        min-height: 196px;
    }
    .sub-hero-inner {
        padding: 64px 18px 16px;
    }
    .subscribe-page .plan-price {
        font-size: 1.85rem;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .subscribe-page .plan-card,
    .subscribe-page .payment-btn,
    .subscribe-page .currency-btn,
    .subscribe-page .cta-pay {
        transition: none;
    }
    .subscribe-page .cta-pay:hover,
    .subscribe-page .cta-pay:active {
        transform: none;
    }
}

/* ==== theme-toggle.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Theme toggle (topbar) + dark-mode nav fixes
   Loaded AFTER css/app.css. Markup lives in renderNavbar()
   (js/app.js); clicks are handled by the delegated listener
   in index.html. Same aria-pressed mechanic as the site
   /stadium/ ThemeToggle component.
   ═══════════════════════════════════════════════ */

.theme-toggle {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover {
    background: var(--control-bg-hover);
    color: var(--text);
}
.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Icon swap driven by aria-pressed (kept in sync by the inline script) */
.theme-toggle .ico { display: none; }
.theme-toggle[aria-pressed="false"] .ico-moon { display: block; }
.theme-toggle[aria-pressed="true"] .ico-sun { display: block; }

@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}

/* Compact topbar at phone widths: the 32px toggle was pushing the last
   nav link (MY BETS) out of the fixed-height bar at 390px */
@media (max-width: 640px) {
    .theme-toggle { width: 28px; height: 28px; }
    .theme-toggle svg { width: 16px; height: 16px; }
    .top-nav { padding-left: 12px; padding-right: 12px; }
    .nav-right { gap: 6px; }
}

/* ── Logo chip (mirrors the site nav fix, retour user #23): the PNG has an
      integrated dark background that smudges on cream AND melts into dark.
      Ink chip in light (theme-immutable, the PNG frame merges into it),
      lifted surface + hairline in dark. ── */
.nav-logo {
    width: 32px;
    height: 32px;
    padding: 3px;
    box-sizing: border-box;
    background: #1a1d18;
    border-radius: 8px;
}
html[data-theme="dark"] .nav-logo {
    background: var(--bg3);
    border: 1px solid var(--line);
}

/* ==== tournaments.css ==== */
/* ═══════════════════════════════════════════════
   Stadium patch — Tournaments screen (loaded after app.css)
   Calendar aligned on /stadium/tournoi/: month groups, surface
   dot + mono dates cards, ink frames + eyebrows on detail,
   VIP locks (padlock + light blur + ink-on-ball pill CTA).
   ═══════════════════════════════════════════════ */

/* ── Mono eyebrow (Stadium label, clay accent, optional brackets) ── */
.tour-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
}
.tour-eyebrow--brackets {
    color: var(--clay);
}
.tour-eyebrow--brackets::before { content: '[ '; opacity: 0.55; }
.tour-eyebrow--brackets::after { content: ' ]'; opacity: 0.55; }

/* ── Page header: two-tone display title + lede ── */
.tcal-head {
    align-items: flex-end;
    margin-bottom: 26px;
}
.tcal-head-main { min-width: 0; }
/* Beat app.css `.tournament-page-head .page-title` (sport-display uppercase) */
.tournament-page-head .page-title.tcal-title {
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 7vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.97;
    text-transform: none;
}
.tcal-title-2 { color: var(--text3); }
.tcal-lede {
    margin-top: 14px;
    max-width: 560px;
}

/* Count capsule (label top-left, mono value bottom-right) */
.tournament-count-card.tcal-count-capsule {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 118px;
    min-height: 96px;
    padding: 14px 16px 12px;
    border-radius: 24px;
    background: var(--input-bg);
    border: 1px solid var(--line);
    text-align: left;
}
.tcal-count-capsule small {
    order: 1;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    color: var(--text3);
}
.tcal-count-capsule span {
    order: 2;
    align-self: flex-end;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* ── Toolbar: 2px ink top rule, surface legend + live badge ── */
.tcal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 6px 0 16px;
    padding: 14px 0;
    border-top: 2px solid var(--text);
    border-bottom: 1px solid var(--line);
}
.tcal-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.tcal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10.4px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text2);
}

/* Surface dot: 10px square, surface color (Stadium signature) */
.tcal-dot {
    flex: 0 0 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--text3);
}
.tcal-dot--hard { background: var(--hard); }
.tcal-dot--clay { background: var(--clay); }
.tcal-dot--grass { background: var(--grass); }

/* Live pill: ink-on-ball, immutable */
.tcal-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--ball);
    color: var(--text-on-ball);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tcal-live--badge { padding: 7px 16px; }
.tcal-live-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--grass);
    animation: tcal-blink 1.6s ease-in-out infinite;
}
@keyframes tcal-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ── Month groups ── */
.tournament-grid.tcal-grid {
    display: block;
}
.tcal-month { margin-top: 30px; }
.tcal-month:first-child { margin-top: 0; }
.tcal-month-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 12px;
}
.tcal-month-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
}
.tcal-month-count {
    font-family: var(--font-mono);
    font-size: 10.4px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tcal-month-line {
    flex: 1;
    height: 1px;
    background: var(--line);
    align-self: center;
}
.tcal-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 10px;
}

/* ── Card: dot + name + mono dates, no image, sharp frame ── */
.tournament-card.tcal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 16px 13px;
    background: var(--input-bg);
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: visible;
    transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.22s cubic-bezier(0.34, 1.3, 0.5, 1), opacity 0.25s ease;
}
/* Surface identity vars: the sweep, ring and shadow all read these */
.tcal-card--hard { --tcal-surface: var(--hard); --tcal-surface-rgb: var(--hard-rgb); }
.tcal-card--clay { --tcal-surface: var(--clay); --tcal-surface-rgb: var(--clay-rgb); }
.tcal-card--grass { --tcal-surface: var(--grass); --tcal-surface-rgb: var(--grass-rgb); }

/* ── Signature hover: chalk line sweep ──
   An SVG rect (pathLength=100) traces the card frame clockwise from the
   top-left corner, like a court line being chalked, in the surface color.
   Combined with a discreet lift + theme-plumbed shadow. */
.tcal-sweep {
    position: absolute;
    inset: -1px;            /* sit exactly on the 1px border */
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
.tcal-sweep-rect {
    x: 1px;
    y: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    fill: none;
    stroke: var(--tcal-surface, var(--text));
    stroke-width: 2;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;  /* hidden: nothing drawn yet */
    transition: stroke-dashoffset 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.tournament-card.tcal-card:hover,
.tournament-card.tcal-card:focus-within {
    border-color: var(--line);
    transform: translateY(-3px);
    box-shadow:
        0 18px 32px -22px rgba(var(--shadow-rgb), 0.5),
        0 6px 20px -12px rgba(var(--tcal-surface-rgb, var(--shadow-rgb)), 0.35);
}
.tournament-card.tcal-card:hover .tcal-sweep-rect,
.tournament-card.tcal-card:focus-within .tcal-sweep-rect {
    stroke-dashoffset: 0;    /* line fully chalked around the frame */
}
/* Echo: the surface dot pulses one ring in the same color */
.tournament-card.tcal-card:hover .tcal-row > .tcal-dot,
.tournament-card.tcal-card:focus-within .tcal-row > .tcal-dot {
    animation: tcal-dot-ring 0.9s ease-out 1;
}
@keyframes tcal-dot-ring {
    0% { box-shadow: 0 0 0 0 rgba(var(--tcal-surface-rgb, var(--shadow-rgb)), 0.45); }
    100% { box-shadow: 0 0 0 9px rgba(var(--tcal-surface-rgb, var(--shadow-rgb)), 0); }
}
/* Micro: arrow of the open pill nudges along the sweep direction */
.tcal-open-arrow { display: inline-block; transition: transform 0.25s ease 0.15s; }
.tournament-card.tcal-card:hover .tcal-open-arrow,
.tournament-card.tcal-card:focus-within .tcal-open-arrow { transform: translateX(3px); }

.tcal-card.status-past { opacity: 0.62; }
.tcal-card.status-past:hover,
.tcal-card.status-past:focus-within { opacity: 1; }

.tcal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.tcal-id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tcal-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tcal-dates {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    /* stadium-overrides.css (older aggregate) truncates with nowrap+ellipsis:
       let dates + place wrap instead of cutting the city off */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    transition: color 0.25s ease;
}
/* Dates pick up the surface color while the line chalks itself */
.tournament-card.tcal-card:hover .tcal-dates,
.tournament-card.tcal-card:focus-within .tcal-dates {
    color: var(--tcal-surface, var(--text2));
}
.tcal-cat {
    flex: 0 0 auto;
    padding: 5px 12px;
    border: 1px solid var(--control-border);
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text2);
    white-space: nowrap;
}
.tcal-caption {
    min-height: 0;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tcal-card .tournament-card-tags { margin-top: 0; }

/* Signal chips: mono counters, padlock when VIP-locked */
.tcal-sigrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: auto;    /* pin stat row + actions to the bottom: rows align across the grid */
    padding-top: 11px;
    border-top: 1px solid var(--line);
}
.tcal-sig {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid var(--control-border);
    border-radius: 99px;
    background: var(--control-bg);
    font-family: var(--font-mono);
    font-size: 9.6px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text3);
    font-variant-numeric: tabular-nums;
}
.tcal-sig strong {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
}
.tcal-sig.has-active {
    border-color: var(--text);
    color: var(--text2);
}
.tcal-sig.has-active strong { color: var(--text); }
.tcal-sig--locked { color: var(--text3); }
.tcal-sig--locked .tour-lock-ic { opacity: 0.8; }
.tcal-sig--stat {
    border-color: transparent;
    background: transparent;
    padding-left: 2px;
    padding-right: 2px;
}
.tcal-sig--stat.kpi-positive { color: var(--success); }
.tcal-sig--stat.kpi-negative { color: var(--error); }

/* Actions: outline ink pill (invert on hover) + mono link */
.tcal-actions {
    margin-top: 2px;
    align-items: center;
}
.tcal-open {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--text);
    border-radius: 99px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.tcal-open:hover {
    background: var(--text);
    color: var(--input-bg);
}
.tcal-open-arrow { font-family: var(--font-mono); }

/* Empty state */
.tcal-empty {
    padding: 36px 18px;
    border: 1px dashed var(--control-border);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text3);
}

/* ── Detail hero: ink frame body, dot + mono dates ── */
.tournament-detail-body {
    border: 2px solid var(--text);
    border-radius: 0;
    background: var(--input-bg);
}
.tournament-detail-image {
    border-radius: 0;
    border-color: var(--line);
}
.tour-detail-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
/* Beat app.css `.tournament-detail-body .page-title` (sport-display uppercase) */
.tournament-detail-body .page-title.tour-detail-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.98;
    text-transform: none;
}
.tour-detail-dates {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}

/* ── Sections as ink frames with eyebrow head bars ── */
.tournament-section.tour-frame {
    border: 2px solid var(--text);
    border-radius: 0;
    background: var(--input-bg);
    margin-bottom: 22px;
    overflow: hidden;
}
.tour-frame .tournament-section-head.tour-frame-head {
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--text);
    border-radius: 0;
    background: var(--bg2);
}
.tour-frame-head-copy { min-width: 0; }
.tour-frame-head-copy .tour-eyebrow { display: block; color: var(--text); }
.tour-frame-head-copy p {
    margin: 4px 0 0;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: none;
}
/* Section count: ink-on-ball pill */
.tour-frame .tournament-section-count {
    min-width: 30px;
    min-height: 24px;
    padding: 0 11px;
    border: 0;
    border-radius: 99px;
    background: var(--ball);
    color: var(--text-on-ball);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tour-frame-body {
    padding: 14px 16px 16px;
}
.tour-frame-body > .pick-card { margin-bottom: 10px; }
.tour-frame-body > .pick-card:last-child { margin-bottom: 0; }
.tour-frame-body .tournament-profile-section {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ── Summary KPI capsules (label top-left, mono value bottom-right) ── */
.tournament-detail-kpis .kpi-card.tour-kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 104px;
    padding: 14px 16px 12px;
    border-radius: 24px;
    background: var(--bg2);
}
.tour-kpi::before { display: none; }
.tour-kpi:hover {
    border-color: var(--line);
    box-shadow: none;
}
.tour-kpi-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text3);
    line-height: 1.35;
}
.tour-kpi-value {
    margin-top: auto;
    align-self: flex-end;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.45rem, 4.5vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text);
}
.tour-kpi-value.kpi-positive { color: var(--success); }
.tour-kpi-value.kpi-negative { color: var(--error); }
.tour-kpi-value .tour-lock-ic {
    width: 18px;
    height: 18px;
    color: var(--text3);
}

/* ── VIP locked panel: light blur skeleton + padlock + pill CTA ── */
.tour-locked {
    position: relative;
    min-height: 196px;
}
.tour-locked--compact { min-height: 150px; }
.tour-locked-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    filter: blur(3px);
    opacity: 0.75;
    pointer-events: none;
    user-select: none;
}
.tour-locked-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    border: 1px solid var(--line);
    background: var(--bg2);
}
.tour-locked-bar {
    display: block;
    height: 11px;
    border-radius: 6px;
    background: rgba(var(--ink-rgb), 0.10);
}
.tour-locked-bar--dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 0;
    background: rgba(var(--ink-rgb), 0.16);
}
.tour-locked-bar--lg { flex: 1 1 auto; }
.tour-locked-bar--sm { flex: 0 0 52px; }
.tour-locked-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(180deg, var(--lock-veil-0) 0%, var(--lock-veil-1) 62%);
}
.tour-locked-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    max-width: 340px;
}
.tour-locked-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--text);
    border-radius: 50%;
    color: var(--text);
    background: var(--input-bg);
}
.tour-locked-lock .tour-lock-ic { width: 14px; height: 14px; }
.tour-locked-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}
.tour-locked-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text2);
}
/* CTA stays the global ink-on-ball pill; just kill any cream glow */
.tour-locked-cta { min-width: 170px; }
.tour-locked-cta:hover {
    box-shadow: inset 0 1px 0 var(--sheen-edge);
    transform: none;
}

/* ── Mobile (PWA mobile-first) ── */
@media (max-width: 640px) {
    .tcal-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .tournament-count-card.tcal-count-capsule {
        flex-direction: row;
        align-items: center;
        min-height: 0;
        width: 100%;
        padding: 10px 16px;
    }
    .tcal-count-capsule span { align-self: center; font-size: 1.45rem; }
    .tcal-month-grid { grid-template-columns: 1fr; }
    .tcal-row { flex-wrap: wrap; }
    .tcal-id { flex-basis: calc(100% - 22px); }
    .tcal-cat { margin-left: 22px; }
    .tour-frame-body { padding: 12px 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .tcal-live-pulse { animation: none; }
    .tournament-card.tcal-card,
    .tcal-open,
    .tcal-sweep-rect,
    .tcal-open-arrow,
    .tcal-dates { transition: none; }
    /* Static fallback: the full surface frame appears instantly, no motion */
    .tournament-card.tcal-card:hover,
    .tournament-card.tcal-card:focus-within { transform: none; }
    .tournament-card.tcal-card:hover .tcal-row > .tcal-dot,
    .tournament-card.tcal-card:focus-within .tcal-row > .tcal-dot { animation: none; }
    .tournament-card.tcal-card:hover .tcal-open-arrow,
    .tournament-card.tcal-card:focus-within .tcal-open-arrow { transform: none; }
}