/* Market Call - Styles */
/* Brand: White bg, Raleway Light 300, Navy #000064 */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ── Native-app feel (iOS/Capacitor) ── */
html, body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior-y: contain;
}
/* Keep text selectable in inputs and long-form content only */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}
/* Hide scrollbars globally but keep momentum scrolling */
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Theme Variables (aligned with Brand Valuation Tool) ── */
:root, [data-theme="light"] {
    --navy: #000064;
    --green: #22c55e;
    --red: #ef4444;
    --orange: #f59e0b;
    --gold: #eab308;
    --bg: #ffffff;
    --bg-alt: #fafbfd;
    --surface: #ffffff;
    --border: #ccd;
    --border-light: #eef;
    --text: #1a1a2e;
    --text-muted: #555;
    --text-faint: #888;
    --text-subtle: #555;
    --overlay: rgba(0, 0, 100, 0.08);
    --highlight-row: #f0f0ff;
    --accent-light: #f0f0ff;
    --accent-mid: #e0e0ff;
    --bg-card: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #555;
    --card-shadow: 0 1px 4px rgba(0,0,0,0.04);
    --radius: 15px;
    --radius-sm: 10px;
    --radius-btn: 2px;
}

[data-theme="dark"] {
    --navy: #6666dd;
    --green: #4ade80;
    --red: #f87171;
    --orange: #fbbf24;
    --gold: #facc15;
    --bg: #0a0a1a;
    --bg-alt: #10102a;
    --surface: #161638;
    --border: #2a2a4a;
    --border-light: #222248;
    --text: #e0e0e8;
    --text-muted: #aab;
    --text-faint: #889;
    --text-subtle: #aab;
    --overlay: rgba(0, 0, 20, 0.6);
    --highlight-row: #1e1e4e;
    --accent-light: #1a1a3a;
    --accent-mid: #252550;
    --bg-card: #161638;
    --text-primary: #e0e0e8;
    --text-secondary: #aab;
    --card-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --radius: 15px;
    --radius-sm: 10px;
    --radius-btn: 2px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Raleway', sans-serif;
    font-weight: 300;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    /* Honour iOS bottom home-indicator safe area */
    padding-bottom: env(safe-area-inset-bottom, 0);
    -webkit-font-smoothing: antialiased;
    /* overflow-x:clip (not hidden!) prevents horizontal wobble without
       promoting body to a scroll container — clip doesn't trigger the
       spec rule that forces overflow-y from visible→auto. */
    overflow-x: clip;
    transition: background .15s, color .15s;
}

/* ── Header ── */
.header {
    background: #fff;
    color: var(--navy);
    position: sticky;
    top: 0;
    z-index: 200;
    transition: background .15s, border-color .15s;
    padding-top: env(safe-area-inset-top, 0);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    object-fit: cover;
}

.brand-logo-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.brand-logo {
    height: 40px;
    width: 40px;
}

.logo {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--navy);
}

.logo-accent {
    color: var(--navy);
    font-weight: 800;
}

.logo-sub {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: block;
    margin-top: 1px;
}

[data-theme="dark"] .header {
    background: var(--bg);
    border-bottom-color: var(--border);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative; /* anchor for hamburger dropdown */
}

/* ── Native app vs web visibility ── */
/* Some elements still need to be native- or web-only — e.g. the
   'Push Notifications' hamburger item only makes sense on native,
   and native devices have their own OS-level controls the web
   doesn't get. The hamburger menu itself is now unified across
   both surfaces so most items apply everywhere. */
.native-only { display: none !important; }
body.native-app .web-only { display: none !important; }
body.native-app .native-only { display: flex !important; }

/* ── LearnWorlds SSO button disabled in v1.0 ──
   LW SSO does not render reliably on iPad (LW's Vue framework clobbers
   our custom /app-signin page content on iPad-class devices, even via
   Site custom code). Rather than ship a broken button on iPad and a
   working one on iPhone — creating account fragmentation — hide the
   button on every surface. All LW SSO code paths (signInWithLearnWorlds,
   the /auth/lw-sign-sso + /auth/lw-sso backend endpoints, the iframe
   embed script on /marketcall LW page) remain fully functional. The
   iframe embed still auto-authenticates LW subscribers on the web game
   — this rule only hides the explicit "Sign in with TheInvestmentAnalyst"
   call-to-action button.

   To re-enable once LW SSO is fixed: delete this rule (or swap
   display:none → display:flex). No code changes required. */
#hamburger-lw-signin,
.welcome-btn-lw,
/* The 'or' divider that separated the LW SSO button from Apple/Google/
   Email buttons — without the LW button above it, the divider floats
   at the top of the auth stack with nothing to divide. Hide it too. */
.welcome-auth-divider {
    display: none !important;
}

/* ── Hamburger dropdown menu (web + native) ──
   Structured with section labels (Game / Preferences / Sign in /
   Support / Account) and consistent leading SVG icons on every row.
   Row anatomy:
      [16×16 icon]   Label ......................   [state pill?]
   The trailing state pill only appears on toggle items
   (dark mode, sound, email updates, face ID, push notifications). */
.hamburger-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    min-width: 248px;
    padding: 6px;
    z-index: 1000;
    flex-direction: column;
    gap: 1px;
    max-height: calc(100vh - env(safe-area-inset-top) - 80px);
    overflow-y: auto;
}

/* Section labels — small uppercase tracking, muted, tight under the
   divider above. First section has no top spacing; subsequent ones
   get a small divider-like top margin via padding. */
.hamburger-section {
    padding: 12px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    pointer-events: none;
}
.hamburger-section:first-child {
    padding-top: 4px;
}
/* Section labels sit below a subtle divider (except the first one).
   Uses a pseudo-border so the label height includes the divider. */
.hamburger-section + .hamburger-item,
.hamburger-item + .hamburger-section {
    /* no change — section spacing handled by the section's own padding */
}
.hamburger-section:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

.hamburger-item {
    background: transparent;
    border: none;
    color: var(--text);
    text-align: left;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 8px;
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
}
.hamburger-item:hover,
.hamburger-item:active {
    background: var(--border-light);
}

/* Leading 16×16 icon, stroke matches current text colour so it
   picks up the danger-red tint automatically on .hamburger-item-danger */
.hamburger-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
}
.hamburger-item:hover .hamburger-icon,
.hamburger-item:active .hamburger-icon {
    color: var(--text);
}

/* Label grows to fill; sublabel (e.g. '+50 pts each' on invite) sits
   inline beside it at smaller size, muted */
.hamburger-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hamburger-sublabel {
    font-size: 11px;
    font-weight: 600;
    color: var(--navy, #000064);
    background: rgba(0, 0, 100, 0.08);
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    letter-spacing: 0.2px;
}

/* Trailing toggle state pill — On / Off / Day 3 / etc. */
.hamburger-state {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--border-light);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Legacy .hamburger-divider kept in case any remaining markup uses
   it; new design uses .hamburger-section borders instead. */
.hamburger-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}

/* Danger items (Log out, Delete account) — pick up on the icon too */
.hamburger-item-danger {
    color: #d14949;
}
.hamburger-item-danger .hamburger-icon {
    color: #d14949;
}
.hamburger-item-danger:hover,
.hamburger-item-danger:active {
    background: rgba(209, 73, 73, 0.1);
}
.hamburger-item-danger:hover .hamburger-icon,
.hamburger-item-danger:active .hamburger-icon {
    color: #b91c1c;
}

[data-theme="dark"] .hamburger-item-danger {
    color: #ff7a7a;
}
[data-theme="dark"] .hamburger-item-danger .hamburger-icon {
    color: #ff7a7a;
}

.btn-icon {
    background: var(--surface);
    border: 1px solid var(--border);
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--navy);
    transition: background .15s;
}

.btn-icon:hover {
    background: var(--border-light);
}

#auth-area {
    color: var(--text-muted);
}

/* ── Layout ── */
.layout {
    display: flex;
    align-items: flex-start;
}

.game-area {
    flex: 1;
    padding: 12px 24px; /* M14: reduced top padding */
    min-width: 0;
    min-height: calc(100vh - 46px);
    max-width: calc(100vw - 300px);
}

.side-panel {
    width: 300px;
    flex-shrink: 0;
    border-left: 1px solid var(--navy);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-alt);
    overflow-y: auto;
    height: calc(100vh - 46px);
    position: sticky;
    top: 46px;
    transition: background .15s;
}

/* ── Info Tip Tooltips ── */
.info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    color: #fff;
    background: #3b82f6;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 1;
    transition: background .15s;
    flex-shrink: 0;
    text-transform: none; /* prevent uppercase inheritance from section-label */
}

.info-tip:hover,
.info-tip:focus {
    background: var(--navy);
    outline: none;
}

.info-tip-text {
    display: none;
    position: fixed;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--navy);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 300;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.6;
    width: 260px;
    max-width: 90vw;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 9999;
    pointer-events: none;
    text-align: left;
}

/* Shown via JS positioning — no CSS hover needed */

.info-tip-inline {
    font-size: 12px;
    margin-left: 2px;
}

/* ── Side Panel Tabs ── */
.side-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.side-tab {
    flex: 1;
    padding: 5px 12px;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
}

.side-tab:hover {
    color: var(--navy);
    border-color: var(--navy);
}

.side-tab.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.side-tab-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.side-tab-content.hidden {
    display: none;
}

/* ── Panel Cards ── */
.panel-card {
    background: var(--surface);
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    transition: background .15s, border .15s;
}

.panel-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge {
    font-size: 10px;
    font-weight: 600;
    background: var(--navy);
    color: var(--bg);
    padding: 1px 6px;
    border-radius: 8px;
}

/* ── User Card ── */
.user-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 14px;
}

.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.user-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 10px;
}

/* Account email line under the display name. Subtle grey so it
   doesn't overpower the name or title badge, but visible enough
   that a user spotting a cross-provider mismatch can see it. */
.user-email {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 3px;
    margin-bottom: 6px;
    word-break: break-all;
    line-height: 1.2;
    letter-spacing: 0.1px;
}

.user-stats-row {
    display: flex;
    gap: 14px;
    width: 100%;
    justify-content: center;
}

/* Compact streak pill in the user card — always visible. Shows
   '🔥 5-day streak · On fire' so users see their streak tier without
   toggling to the Progress tab. */
.streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    margin: 6px auto 10px;
    background: linear-gradient(135deg, rgba(249,115,22,0.08) 0%, rgba(239,68,68,0.08) 100%);
    border: 1px solid rgba(249,115,22,0.3);
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    color: #c2410c;
    line-height: 1;
}
.streak-pill-icon { font-size: 12px; }
.streak-pill-text { white-space: nowrap; }

.user-stat { text-align: center; }

.user-stat-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    display: block;
}

.user-stat-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ── Streak Card ── */
.streak-flames {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-bottom: 8px;
}

.streak-flame {
    font-size: 16px;
    opacity: 0.15;
    transition: all 0.3s ease;
    filter: grayscale(100%);
}

.streak-flame.active {
    opacity: 1;
    filter: grayscale(0%);
    animation: flicker 1.5s ease-in-out infinite alternate;
}

@keyframes flicker {
    0% { transform: scale(1); }
    100% { transform: scale(1.12) translateY(-1px); }
}

.streak-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.streak-number {
    font-size: 28px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}

.streak-label {
    font-size: 12px;
    color: var(--text-faint);
}

.streak-bar-container { margin-top: 8px; }

.streak-milestone-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.streak-milestone {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--text-faint);
}

.streak-milestone.reached {
    color: var(--orange);
    font-weight: 700;
}

.streak-bar {
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.streak-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.streak-bar-fill.tier-0 { background: var(--text-faint); }
.streak-bar-fill.tier-1 { background: var(--orange); }
.streak-bar-fill.tier-2 { background: #f97316; }
.streak-bar-fill.tier-3 { background: var(--red); }

.streak-multiplier {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 500;
}

.streak-multiplier.active { color: var(--orange); }
.streak-multiplier.inactive { color: var(--text-faint); }

.streak-best {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-light);
    font-size: 10px;
    color: var(--text-faint);
    display: flex;
    justify-content: space-between;
}

.streak-best-value { font-weight: 600; color: var(--text-muted); }

.streak-freeze-row {
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-faint);
    display: flex;
    justify-content: space-between;
}

.freeze-dots { display: inline-flex; gap: 3px; }

.freeze-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    display: inline-block;
}

.freeze-dot.empty {
    background: var(--border);
}

/* ── Biometric Lock Screen ── */
.biometric-lock {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--navy, #000064);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.biometric-lock.hidden { display: none; }
.biometric-lock-inner {
    text-align: center;
    padding: 40px 24px;
}
.biometric-logo {
    font-family: 'Raleway', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 4px;
    margin-bottom: 12px;
    opacity: 0.9;
}
.biometric-title {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}
.biometric-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 40px;
}
.biometric-btn {
    background: #ffffff;
    color: var(--navy, #000064);
    border: none;
    border-radius: 12px;
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, opacity 0.15s;
}
.biometric-btn:active {
    transform: scale(0.96);
    opacity: 0.9;
}
.biometric-icon { font-size: 20px; }
.biometric-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-top: 20px;
    min-height: 18px;
}
.biometric-hint.error {
    color: #ff6b6b;
}

/* ── Achievements ── */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.achievement-item {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: relative;
    cursor: pointer;
    transition: all .15s;
}

.achievement-item:hover {
    border-color: var(--navy);
    background: var(--accent-light);
}

/* Navy/white tooltips for achievement items — matches .lb-icon-tip pattern
   but overrides nowrap since achievement descriptions are longer */
.achievement-item.lb-icon-tip::after {
    white-space: normal;
    width: max-content;
    max-width: 200px;
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
    padding: 6px 10px;
    z-index: 10;
}

.achievement-item.locked {
    opacity: 0.25;
    filter: grayscale(100%);
}

.achievement-item.unlocked {
    background: var(--bg-alt);
}

/* v2.3.6 — Section headers ("Earned" / "To unlock") span the whole grid
   row so the earned and not-yet-earned badges read as distinct groups. */
.achievement-section-label {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--navy);
    margin: 10px 0 2px;
}
.achievement-section-label:first-child { margin-top: 0; }
.achievement-section-label.muted { color: var(--text-muted); }

/* ×N occurrence count for repeatable achievements */
.achievement-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Tap-to-pop feedback (item 9: "animate when the award is clicked") */
@keyframes achPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    70%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}
.ach-pop { animation: achPop 0.42s var(--ease-standard, ease); }
@media (prefers-reduced-motion: reduce) { .ach-pop { animation: none; } }

.achievement-popup-meta {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    margin-top: 6px;
}
.achievement-popup-meta.muted { color: var(--text-muted); font-weight: 500; }

.achievement-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface);
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    padding: 20px 24px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    white-space: normal;
    width: 260px;
    max-width: 90vw;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    color: var(--text);
    text-align: center;
}

.achievement-popup-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.achievement-popup-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
}

.achievement-popup-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.achievement-popup-status {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: var(--radius-btn);
}

.achievement-popup-status.unlocked {
    background: rgba(34, 197, 94, 0.12);
    color: var(--green);
}

.achievement-popup-status.locked {
    background: var(--overlay);
    color: var(--text-faint);
}

.achievement-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.achievement-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--surface);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    gap: 14px;
    align-items: center;
    z-index: 300;
    animation: slideIn 0.4s ease, slideOut 0.4s ease 4s forwards;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    min-width: 280px;
    max-width: 360px;
}

.achievement-toast.hidden { display: none; }

.achievement-toast-icon {
    font-size: 36px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.achievement-toast-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.achievement-toast-text strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.5px;
}

.achievement-toast-text span {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.4;
}

.achievement-toast-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1px;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translateX(40px); }
}

/* ── Onboarding Tour (Brand Valuation style) ── */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: auto;
    /* Allow vertical finger-scrolling to pass through the overlay to the
       underlying page. Without this, iOS WKWebView blocks all touch scrolls
       during the tour because pointer-events:auto intercepts them. pan-y
       lets the browser route vertical swipes to the nearest scrollable
       ancestor (window) while still blocking horizontal pans and taps. */
    touch-action: pan-y;
}
.tour-highlight {
    position: fixed;
    border: 2px solid #5b8df9;
    border-radius: 8px;
    box-shadow: 0 0 0 4px rgba(91, 141, 249, 0.25);
    z-index: 901;
    pointer-events: none;
    transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-tooltip {
    position: fixed;
    z-index: 902;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    padding: 18px 20px 14px;
    width: 340px;
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
    transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Kill the position transition while the user is actively scrolling so
   the tooltip + highlight track the page instantly instead of visibly
   lagging behind. The .tour-scrolling class is toggled by the rAF-throttled
   scroll handler in _repositionTourForViewportChange. */
#tour-overlay-container.tour-scrolling .tour-tooltip,
#tour-overlay-container.tour-scrolling .tour-highlight {
    transition: none !important;
}
.tour-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.tour-step-badge {
    font-size: 11px;
    font-weight: 600;
    color: #5b8df9;
    background: rgba(91, 141, 249, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
}
.tour-skip {
    font-size: 11px;
    color: var(--text-muted, #999);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-family: 'Raleway', sans-serif;
}
.tour-skip:hover { color: var(--navy); text-decoration: underline; }
.tour-tooltip-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy, #000064);
    margin: 0 0 6px;
}
.tour-tooltip-content {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted, #666);
    margin: 0 0 14px;
}
.tour-tooltip-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.tour-btn {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s;
}
.tour-btn-prev {
    background: transparent;
    border: 1px solid var(--border, #ddd);
    color: var(--text-muted, #666);
}
.tour-btn-prev:hover { background: var(--surface-alt, #f5f5f5); }
.tour-btn-next {
    background: var(--navy, #000064);
    border: 1px solid var(--navy, #000064);
    color: #fff;
}
.tour-btn-next:hover { opacity: 0.9; }
.tour-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}
.tour-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border, #ddd);
    cursor: pointer;
    transition: all 0.2s;
}
.tour-dot.active { background: #5b8df9; transform: scale(1.3); }
.tour-dot.done { background: var(--navy, #000064); }
.tour-restart-btn {
    font-family: inherit;
    font-size: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 8px;
    letter-spacing: .3px;
    transition: background 0.15s;
}
.tour-restart-btn:hover { background: var(--border-light); color: var(--text); }

/* ── Screens ── */
.screen { animation: fadeIn 0.3s ease; }
.hidden { display: none !important; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Panel close animations ── */
/* Overlay backdrop fade-out */
.panel-closing {
    animation: panelFadeOut 0.25s ease forwards;
    pointer-events: none;
}
@keyframes panelFadeOut {
    to { opacity: 0; }
}
/* Inner panel slide-down (centered modals) */
.panel-closing > *:first-child,
.panel-closing .scoring-popup,
.panel-closing .auth-modal {
    animation: panelSlideDown 0.25s ease forwards;
}
@keyframes panelSlideDown {
    to { opacity: 0; transform: translateY(30px); }
}
/* Bottom-sheet slide-down (insights panel) */
.panel-closing .insights-panel {
    animation: panelSheetDown 0.25s ease forwards;
}
@keyframes panelSheetDown {
    to { transform: translateY(100%); }
}

/* ── Card ── */
.card {
    padding: 16px 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
}

/* ── Typography ── */
.label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.sublabel {
    font-size: 14px;
    color: var(--text-faint);
    margin-top: 4px;
}

.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--navy);
    margin: 24px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Step number circles */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    flex-shrink: 0;
    line-height: 1;
}

.step-number-btn {
    background: rgba(255,255,255,0.25);
    color: #fff;
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.optional {
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    color: var(--text-faint);
}

/* ── Game Header ── */
.game-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.game-number {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--text-faint);
}

.game-date {
    font-size: 13px;
    color: var(--text-faint);
}

/* ── Ticker Display ── */
.ticker-display {
    text-align: center;
    margin-bottom: 20px;
}

.ticker-symbol {
    display: block;
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text);
    line-height: 1.1;
}

.ticker-name {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
}

.ticker-description {
    font-size: 12px;
    font-style: italic;
    color: var(--text-faint);
    line-height: 1.4;
    margin: 6px auto 10px;
    max-width: 440px;
    text-align: center;
    padding: 0 12px;
}
.ticker-description:empty { display: none; }

/* ── 52-Week Range ── */
.fifty-two-week {
    margin: 12px 0;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.ftw-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-align: center;
}

.ftw-bar-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ftw-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.ftw-low { color: var(--red); }
.ftw-high { color: var(--green); }

.ftw-bar-wrapper {
    flex: 1;
    position: relative;
}

.ftw-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    position: relative;
}

.ftw-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
    border-radius: 3px;
}

.ftw-marker {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 14px;
    background: var(--navy);
    border-radius: 2px;
    transform: translateX(-50%);
}

.ftw-marker-label {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    background: rgba(255,255,255,0.85);
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.2;
}

.ftw-marker-price {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    background: rgba(255,255,255,0.9);
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.2;
}

/* ── Intraday Range ── */
.intraday-bar {
    background: var(--border);
}
.intraday-fill {
    background: linear-gradient(90deg, var(--red), var(--blue, #3b82f6), var(--green));
}

/* ── Range Panels (awaiting screen) ── */
.range-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
}

.range-panel .ftw-label {
    margin-bottom: 4px;
}

.range-panel-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
}

.range-panel .ftw-bar-wrapper {
    margin: 22px 0 6px;
}

.range-panel-labels {
    display: flex;
    justify-content: space-between;
}

/* ── Sparkline ── */
.sparkline {
    display: block;
    width: 120px;
    height: 30px;
    margin: 8px auto 0;
}

.sparkline-line {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline-up { stroke: var(--green); }
.sparkline-down { stroke: var(--red); }
.sparkline-flat { stroke: var(--text-faint); }

/* ── Price Info ── */
.price-info {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    margin-bottom: 16px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.price-label { font-size: 14px; color: var(--text-muted); }
.price-value { font-size: 16px; font-weight: 500; }
.price-up { color: var(--green); }
.price-down { color: var(--red); }

/* ── Direction Buttons ── */
.direction-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-direction {
    padding: 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-direction .arrow { font-size: 14px; }
.btn-up { color: var(--green); }
.btn-up:hover, .btn-up.selected { border-color: var(--green); background: rgba(34,197,94,0.08); }
.btn-down { color: var(--red); }
.btn-down:hover, .btn-down.selected { border-color: var(--red); background: rgba(239,68,68,0.08); }

/* ── Confidence Meter ── */
.confidence-meter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.btn-conf {
    min-height: 56px;
    padding: 12px 6px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.btn-conf .conf-val {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.btn-conf .conf-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text);
}

/* Win / loss asymmetry on each confidence button — makes the
   non-linear payoff visible without clicking anything. Green for
   win, red for loss, light grey separator. */
.btn-conf .conf-payoff {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}
.btn-conf .conf-win  { color: var(--green, #16a34a); }
.btn-conf .conf-loss { color: var(--red,   #dc2626); }
.btn-conf .conf-sep  { color: var(--text-faint); margin: 0 2px; font-weight: 400; }

.btn-conf.selected {
    border-color: var(--navy);
    background: rgba(0,0,100,0.05);
}

[data-theme="dark"] .btn-conf.selected {
    background: rgba(136,136,255,0.1);
}

/* H8: Price label/marker dark mode backgrounds */
[data-theme="dark"] .ftw-marker-label {
    background: var(--surface);
    color: var(--text);
}
[data-theme="dark"] .ftw-marker-price {
    background: var(--surface);
    color: var(--text);
}

/* H9: Title badge dark mode - ensure readable contrast */
[data-theme="dark"] .title-badge,
[data-theme="dark"] .lb-title-badge {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
[data-theme="dark"] .badge {
    background: rgba(255,255,255,0.15);
    color: var(--text);
}

.btn-conf[data-conf="15"].selected {
    border-color: var(--orange);
    background: rgba(245,158,11,0.08);
}

/* ── Range Brackets ── */
.range-dir-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;
}

.range-dir-tag.up {
    background: rgba(34, 197, 94, 0.12);
    color: var(--green);
}

.range-dir-tag.down {
    background: rgba(239, 68, 68, 0.12);
    color: var(--red);
}

.range-brackets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.btn-range {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    gap: 4px;
    min-height: 44px; /* H11: iOS minimum tap target */
}

.btn-range:hover, .btn-range.selected {
    border-color: var(--navy);
    background: var(--accent-light);
}

.btn-range.selected {
    border-width: 2px;
}

.range-pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.btn-range:hover .range-pct, .btn-range.selected .range-pct {
    color: var(--navy);
}

.range-dollar {
    display: block;
    font-size: 9px;
    font-weight: 400;
    color: var(--text-faint);
    line-height: 1.3;
}

.range-bonus {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--green);
    margin-top: 1px;
}

/* ── Buttons ── */
.btn {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 44px; /* H11: iOS minimum tap target */
}

.btn-primary { background: var(--navy); color: var(--bg); }
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { background: var(--text-faint); cursor: not-allowed; opacity: 0.5; }
.btn-secondary { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-secondary:hover { background: var(--accent-light); }
.btn-full { width: 100%; }

/* ── Payout Potential ── */
.payout-potential {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--accent-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: background .15s, border .15s;
}

.payout-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.payout-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.payout-breakdown {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.payout-total {
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.payout-total .pts-label {
    font-size: 13px;
    font-weight: 500;
    margin-left: 2px;
}

.payout-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payout-line {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.payout-line .val {
    font-weight: 600;
    color: var(--text);
}

.payout-subtotal {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    border-top: 1px dashed var(--border);
    margin-top: 3px;
    padding-top: 3px;
}

.payout-bonus {
    color: var(--green);
    font-weight: 600;
}

.payout-earnings {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
    background: rgba(234, 179, 8, 0.15);
    padding: 2px 6px;
    border-radius: var(--radius-btn);
    margin-left: 4px;
}

.payout-multiplier {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
    background: rgba(234, 179, 8, 0.12);
    padding: 2px 6px;
    border-radius: var(--radius-btn);
    margin-left: 4px;
}

.payout-outcomes {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.payout-win, .payout-lose {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payout-win { flex: 1; }
.payout-lose { flex: 0 0 auto; text-align: right; }

.payout-win-label, .payout-lose-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-faint);
}

.payout-green { color: var(--green); }
.payout-red { color: var(--red); }

.payout-timing {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-btn);
    margin-left: 4px;
}

.timing-great { color: var(--green); background: rgba(34, 197, 94, 0.12); }
.timing-good { color: #16a34a; background: rgba(22, 163, 74, 0.1); }
.timing-ok { color: var(--orange); background: rgba(245, 158, 11, 0.1); }
.timing-warn { color: var(--orange); background: rgba(245, 158, 11, 0.1); }
.timing-late { color: var(--red); background: rgba(239, 68, 68, 0.1); }

.btn-submit {
    margin-top: 16px;
    margin-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    min-height: 56px;
    padding: 16px;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}

/* ── Market Clock ── */
.market-clock {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-alt);
    text-align: center;
    transition: background .15s, border .15s;
}

.market-clock-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--text);
    margin-bottom: 6px;
}

.market-timer-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.market-timer-dot.open {
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.market-timer-dot.closed {
    background: var(--text-faint);
}

.market-clock-countdown {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.clock-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.clock-time {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 3px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.market-clock-zones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.tz-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.tz-time {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.tz-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--text-faint);
    text-transform: uppercase;
}

/* ── Welcome Message ── */
.welcome-message {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.welcome-greeting {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--navy);
    letter-spacing: .3px;
}

.welcome-sub {
    font-size: 12px;
    font-weight: 400;
    color: #000064;
}

/* ── Sidebar Clock ── */
.sidebar-clock {
    text-align: center;
    padding: 10px 12px;
}

.sidebar-clock-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--text);
    margin-bottom: 4px;
}

.sidebar-clock-countdown {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.sidebar-clock .clock-time {
    font-size: 18px;
    letter-spacing: 2px;
}

/* ── Scoring Explainer ── */
.scoring-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn .15s ease;
}

.scoring-popup-overlay.hidden {
    display: none;
}

.scoring-popup {
    background: var(--bg);
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: slideUp .2s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.scoring-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border);
}

.scoring-popup-header h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
}

.scoring-popup-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color .15s;
}

.scoring-popup-close:hover {
    color: var(--text);
}

.scoring-popup-scroll {
    overflow-y: auto;
    padding: 18px 22px 22px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text);
}

.scoring-section {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.scoring-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.scoring-heading {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--navy);
    margin-bottom: 5px;
}

.scoring-section p {
    margin: 0 0 8px;
}

.scoring-table {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--bg-alt);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0;
}

.scoring-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 3px 0;
}

.scoring-row-header {
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .4px;
    color: var(--text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
    margin-bottom: 2px;
}

.scoring-row span {
    flex: 1;
    text-align: center;
}

.scoring-row span:first-child {
    text-align: left;
}

.val-green { color: var(--green); font-weight: 600; }
.val-red { color: var(--red); font-weight: 600; }

.scoring-note {
    font-size: 11px;
    font-style: italic;
    color: var(--text-faint);
    margin: 6px 0 0 !important;
}

.scoring-formulas {
    background: var(--bg-alt);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 4px;
}

.scoring-formula {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 400;
    padding: 3px 0;
    color: var(--text);
}

.formula-label {
    font-weight: 700;
    display: inline-block;
    width: 42px;
}

.scoring-sub-heading {
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    margin: 8px 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.scoring-row-subtotal {
    display: flex;
    justify-content: space-between;
    padding: 8px 0 4px;
    margin-top: 4px;
    border-top: 1px dashed var(--border);
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

.scoring-row-total {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    margin-top: 4px;
    border-top: 2px solid var(--navy);
    font-weight: 700;
    font-size: 14px;
    color: var(--navy);
}

.scoring-example {
    background: var(--accent-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}

.scoring-example strong {
    color: var(--navy);
}

/* ── Next Game Timer (Results screen) ── */
.next-game-timer {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--accent-light);
    text-align: center;
    transition: background .15s, border .15s;
}

.next-game-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 4px;
}

.next-game-timer .countdown {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 4px;
    color: var(--text);
    padding: 8px 0;
}

.next-game-opens {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.btn-link {
    background: none;
    border: none;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--navy);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── P&L Tracker ── */
/* ── Awaiting: side-by-side panels ── */
.awaiting-panels {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

.awaiting-panel {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(50% - 6px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    text-align: center;
}

#pnl-tracker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color .15s;
}

.pnl-value {
    font-size: 24px;
    font-weight: 600;
    transition: color .15s;
}

.pnl-positive { color: var(--green); border-color: var(--green); }
.pnl-negative { color: var(--red); border-color: var(--red); }

/* ── Locked Prediction ── */

.prediction-badge {
    display: inline-block;
    padding: 8px 32px;
    border-radius: var(--radius-sm);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-top: 8px;
}

.prediction-badge.up { color: var(--green); border: 2px solid var(--green); }
.prediction-badge.down { color: var(--red); border: 2px solid var(--red); }

.prediction-range, .prediction-conf {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Community Split ── */
.community-split { margin: 20px 0; text-align: center; }

.community-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
}
/* v1.0.10 — live pulse delta on user's side of community split */
.community-pulse {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    animation: md-pulse-flash 600ms ease-out;
}
.community-pulse.pulse-up   { background: rgba(22,163,74,0.18); color: #16a34a; }
.community-pulse.pulse-down { background: rgba(229,62,76,0.18); color: var(--tia-red, #e53e4c); }
@keyframes md-pulse-flash {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* v2.1.5 — Smoke feedback: spacing between UP and DOWN was tight.
 * Bar now 12px tall (was 8) with a small gap between segments so the
 * boundary reads, and the labels have extra breathing room above. */
.split-bar {
    display: flex;
    height: 12px;
    gap: 2px;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 10px;
}

.split-up { background: var(--green); transition: width 0.5s ease; border-radius: 4px 0 0 4px; }
.split-down { background: var(--red); transition: width 0.5s ease; border-radius: 0 4px 4px 0; }

.split-labels { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; margin-top: 6px; }
.split-labels .up-label { color: var(--green); }
.split-labels .down-label { color: var(--red); }

/* ── Countdown ── */
.countdown {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 4px;
    text-align: center;
    color: var(--text);
    padding: 8px 0;
}

.countdown-section {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* ── Result Reveal (staged) ── */
.reveal-stage {
    text-align: center;
    animation: revealPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.result-direction {
    font-size: 44px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 16px 0;
}

.result-direction.up { color: var(--green); }
.result-direction.down { color: var(--red); }
.result-direction.flat { color: var(--text-faint); }

.result-change {
    font-size: 28px;
    font-weight: 300;
    padding: 8px 0 16px;
}

@keyframes revealPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

/* Result glow effect */
.result-card {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin: 16px 0;
    transition: all 0.5s ease;
}

.result-card.glow-green {
    border-color: var(--green);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.result-card.glow-red {
    border-color: var(--red);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.result-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 15px;
}

.result-icon { font-size: 16px; }

.result-points {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    animation: countUp 0.6s ease;
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-earnings-tag {
    text-align: center;
    margin-top: 6px;
}

.earnings-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    background: rgba(234, 179, 8, 0.12);
    padding: 3px 10px;
    border-radius: var(--radius-btn);
    letter-spacing: 0.3px;
}

.earnings-tag-muted {
    color: var(--text-muted);
    background: var(--bg-card);
}

.result-near-flat {
    text-align: center;
    margin-top: 6px;
}

.near-flat-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 3px 10px;
    border-radius: var(--radius-btn);
}

.range-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-btn);
    margin-left: 4px;
    vertical-align: middle;
}

.range-exact {
    color: var(--green);
    background: rgba(34, 197, 94, 0.12);
}

.range-close {
    color: var(--gold);
    background: rgba(234, 179, 8, 0.12);
}

.range-near {
    color: var(--orange);
    background: rgba(245, 158, 11, 0.1);
}

.range-miss {
    color: var(--text-muted);
    background: var(--bg-card);
}

.result-streak {
    text-align: center;
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-muted);
}

/* ── History ── */
.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.history-ticker {
    font-weight: 500;
    min-width: 50px;
}

.history-change { font-weight: 500; }
.history-result-icon { font-size: 14px; }
.history-pts {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 40px;
    text-align: right;
}

.history-missed {
    font-size: 11px;
    color: var(--text-faint);
}

/* ── Tease ── */
.tease {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-faint);
    font-style: italic;
}

.ticker-preview {
    text-align: center;
    margin-top: 16px;
    padding: 16px;
    font-size: 14px;
    color: var(--text-faint);
}

.loading-text {
    text-align: center;
    padding: 60px 0;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--text-faint);
}

/* ── Tabs ── */
.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.tab {
    flex: 1;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-faint);
    cursor: pointer;
    transition: color .15s;
}

.tab.active {
    color: var(--navy);
    border-bottom-color: var(--navy);
}

/* ── Leaderboard ── */
.leaderboard-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#leaderboard-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    min-height: 0;
}

/* Allow tooltips to escape table row clipping */
.lb-table { position: relative; }
.lb-table td { overflow: visible; }

.lb-table { width: 100%; font-size: 11px; border-collapse: collapse; }

.lb-table th {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .3px;
    color: #fff;
    background: var(--navy);
    text-align: left;
    padding: 7px 6px;
}

.lb-table th:first-child { border-radius: var(--radius-btn) 0 0 var(--radius-btn); }
.lb-table th:last-child { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; }

.lb-table td {
    padding: 6px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    font-weight: 300;
}

.lb-table tr.me { background: var(--highlight-row); }
/* User's own row when appended below top-5 — slightly stronger callout */
.lb-table tr.self-row {
    background: rgba(59,130,246,0.08);
    font-weight: 600;
    border-top: 1px solid var(--border);
}
.lb-table tr.self-row td { padding-top: 8px; padding-bottom: 8px; }
.lb-table tr.lb-ellipsis { background: transparent; }

.lb-rank { font-weight: 500; width: 22px; }
.lb-name {
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px; /* M10: prevent badge text wrapping on long names */
}
.lb-points { font-weight: 500; text-align: right; }
.lb-streak { text-align: right; color: var(--text-muted); }

.lb-streak-dots { display: inline-flex; gap: 2px; vertical-align: middle; }
.lb-streak-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.lb-streak-zero { opacity: 0.3; } /* M12: de-emphasize zero streaks */

.rank-change {
    font-size: 9px;
    font-weight: 600;
    margin-left: 3px;
}

.rank-up { color: var(--green); }
.rank-down { color: var(--red); }
.rank-same { color: var(--text-faint); }

.lb-user-rank {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.error-msg {
    text-align: center;
    padding: 24px 10px;
    color: var(--text-muted);
    font-size: 12px;
}

/* ── Toast ── */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: var(--bg);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    z-index: 99999;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2s forwards;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    max-width: calc(100% - 32px);
    text-align: center;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ── Market Ticker Tape ── */
.ticker-tape {
    overflow: hidden;
    position: relative;
    margin: 8px -14px; /* bleed to card edges */
    padding: 6px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-alt);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.ticker-tape-track {
    display: flex;
    gap: 24px;
    animation: tickerScroll 35s linear infinite;
    width: max-content;
}

.ticker-tape:hover .ticker-tape-track {
    animation-play-state: paused;
}

.ticker-tape-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 11px;
    font-family: 'Raleway', sans-serif;
}

.ticker-tape-symbol {
    font-weight: 700;
    color: var(--navy);
    font-size: 10px;
    letter-spacing: 0.3px;
}

.ticker-tape-name {
    color: var(--text-muted);
    font-size: 10px;
}

.ticker-tape-price {
    font-weight: 600;
    color: var(--text);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.ticker-tape-change {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

.ticker-tape-change.up {
    color: var(--green);
    background: rgba(34, 197, 94, 0.1);
}

.ticker-tape-change.down {
    color: var(--red);
    background: rgba(239, 68, 68, 0.1);
}

.ticker-tape-change.flat {
    color: var(--text-muted);
    background: var(--border-light);
}

.ticker-tape-divider {
    width: 1px;
    height: 14px;
    background: var(--border);
    flex-shrink: 0;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Mobile ── */
.mobile-lb-toggle {
    display: none;
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: var(--navy);
    color: var(--bg);
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 14px 20px;
    min-height: 44px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    z-index: 150;
    box-shadow: 0 2px 12px rgba(0,0,100,0.2);
    -webkit-tap-highlight-color: transparent;
}

/* ── Mobile Leaderboard Panel Header ── */
.mobile-panel-header {
    display: none; /* shown in ≤760px media query */
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    color: var(--text);
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0));
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mobile-panel-title {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--navy);
}

.mobile-panel-close {
    display: none; /* shown inside the header in mobile */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--border-light);
    color: var(--text-muted);
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}

.mobile-panel-close:active {
    background: var(--border);
}

/* Leave enough room at the bottom of the scroll area so the last item
   in the leaderboard / progress tab isn't hidden under the fixed close
   button. Only applied when the panel is in its mobile fixed-overlay
   state (inside the ≤760px media query). */
body.side-panel-open-lock {
    overflow: hidden;
}

/* ── Tablet (≤ 760px) ── */
@media (max-width: 760px) {
    /* CRITICAL: override align-items:flex-start from the desktop rule.
       When flex-direction flips to column, the cross-axis becomes
       horizontal and flex-start stops children from filling width —
       that's the "content squashed into left half of the screen" bug
       seen on iOS Capacitor builds. Stretch makes .game-area fill the
       container horizontally as expected. */
    .layout {
        flex-direction: column;
        align-items: stretch;
    }
    .game-area {
        width: 100%;
        max-width: 100%;
        padding: 16px 20px;
        min-height: auto;
    }

    .side-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
        position: fixed;
        inset: 0;
        z-index: 200;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none;
        height: 100%;
        transform: translateX(100%);
        transition: transform .15s ease;
        background: var(--bg);
    }

    .side-panel.open { transform: translateX(0); }
    .mobile-lb-toggle { display: block; }
    /* Show the sticky header bar with title + close button */
    .mobile-panel-header { display: flex; }
    .mobile-panel-close { display: flex; align-items: center; justify-content: center; }
    /* Bottom padding so last card clears the home indicator */
    .side-panel {
        padding-top: 0; /* header provides top spacing */
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
    }

    /* Larger touch targets */
    .btn-conf {
        padding: 14px 8px;
        font-size: 12px;
    }

    .btn-range {
        padding: 12px 6px;
    }

    .info-tip {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    /* Bump small labels */
    .label { font-size: 13px; }
    .section-label { font-size: 12px; }
    .sub-label { font-size: 13px; }

    /* Touch feedback */
    .btn-direction:active { transform: scale(0.97); }
    .btn-conf:active { transform: scale(0.97); }
    .btn-range:active { transform: scale(0.97); }
    .btn-submit:active { transform: scale(0.98); }

    /* Scoring/Prizes popup full-width */
    .scoring-popup-overlay { padding: 12px; }
    .scoring-popup { max-width: 100%; }
    .scoring-popup-header { padding: 14px 16px 12px; }
    .scoring-popup-scroll { padding: 12px 16px 16px; }

    /* Recap popup */
    .recap-popup { width: 92vw; padding: 18px; }

    /* Header compact */
    .header-inner { padding: 8px 12px; gap: 6px; }
    .logo { font-size: 14px; }
    .logo-sub { font-size: 9px; }
    .brand-logo { height: 32px; width: 32px; }
    .tour-restart-btn { padding: 6px 10px; font-size: 10px; }
    .btn-icon { width: 32px; height: 32px; font-size: 16px; }

    /* Awaiting panels stack */
    .awaiting-panels { flex-direction: column; }
    .awaiting-panel { max-width: 100% !important; }
}

/* ── Tablet landscape (520–760px) ── */
@media (min-width: 481px) and (max-width: 760px) {
    .game-area { max-width: 520px; margin: 0 auto; }

    /* Keep panels side-by-side on tablets */
    .awaiting-panels { flex-direction: row; }
    .awaiting-panel { max-width: calc(50% - 6px) !important; }

    /* Range brackets: 3 columns to prevent text squeeze */
    .range-brackets {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

/* ── Small phones (≤ 480px) ── */
@media (max-width: 480px) {
    .game-area { padding: 12px 14px; }
    .card { padding: 18px 0; }

    /* Range brackets: 3 + 2 layout */
    .range-brackets {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    /* Direction buttons larger */
    .btn-direction { padding: 18px 12px; }
    .btn-direction .label { font-size: 13px; }
    .btn-direction .arrow { font-size: 16px; }

    /* Confidence buttons full width stacked */
    .confidence-meter {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
    .btn-conf {
        padding: 14px 6px;
        font-size: 11px;
    }

    /* Header squeeze */
    .header-inner { padding: 6px 10px; }
    .header-right { gap: 4px; }
    .logo { font-size: 13px; }
    .brand-logo { height: 28px; width: 28px; }
    .tour-restart-btn { padding: 5px 8px; font-size: 9px; }

    /* Tooltip narrower */
    .info-tip-text { width: 220px; font-size: 12px; }

    /* Scoring popup */
    .scoring-popup-overlay { padding: 8px; }
    .scoring-section { padding: 10px 0; }
    .scoring-heading { font-size: 13px; }
    .scoring-section p { font-size: 12px; }
    .scoring-row { font-size: 12px; padding: 6px 0; }
}

/* ── Extra-small phones (≤ 360px) ── */
@media (max-width: 360px) {
    .game-area { padding: 10px 10px; }

    .direction-buttons { gap: 8px; }
    .btn-direction { padding: 16px 8px; }

    .range-brackets {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .btn-range { padding: 10px 4px; }
    .range-pct { font-size: 11px; }
    .range-pts { font-size: 9px; }

    .header-left .logo { font-size: 12px; }
    .logo-sub { display: none; }
    .brand-logo { height: 24px; width: 24px; }

    .tour-restart-btn { padding: 4px 6px; font-size: 9px; }
    .btn-icon { width: 28px; height: 28px; font-size: 13px; }
}

/* ── Landscape phones ── */
@media (max-height: 500px) and (orientation: landscape) {
    .header-inner { padding: 4px 12px; }
    .brand-logo { height: 24px; width: 24px; }
    .game-area { padding: 8px 16px; min-height: auto; }
    .card { padding: 12px 0; }
    .btn-direction { padding: 12px; }
    .scoring-popup-overlay { padding: 6px; }
    .scoring-popup { max-height: 92vh; }
}

/* ── Weekly Recap Popup ── */
/* v2.2.2 — Recap centered via flexbox on the backdrop, not a
   transform on the popup. The swipe-to-dismiss helper sets
   transform: translateY(...) on the card; with the old
   translate(-50%,-50%) centering, the swipe transform overrode
   the centering and the card jumped to the top-left corner of
   the viewport mid-drag, which is why swipe-out "could not" work. */
.recap-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.recap-popup {
    position: relative;
    background: var(--surface);
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    padding: 24px;
    width: 360px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    animation: revealPop 0.3s ease;
}

.recap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.recap-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--navy);
}

.recap-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-faint);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color .15s;
}

.recap-close:hover { color: var(--text); }

.recap-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;
    padding: 12px 0;
    background: var(--accent-light);
    border-radius: var(--radius-sm);
}

.recap-stat { text-align: center; }

.recap-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

.recap-stat-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.recap-games {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
}

.recap-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-light);
    font-size: 12px;
}

.recap-row:last-child { border-bottom: none; }

.recap-icon { font-size: 14px; font-weight: 700; width: 18px; text-align: center; }
.recap-ticker { font-weight: 600; min-width: 42px; color: var(--text); }
.recap-change { font-weight: 500; min-width: 50px; }
.recap-pts { font-weight: 500; color: var(--text-muted); min-width: 48px; text-align: right; }
.recap-date { font-size: 10px; color: var(--text-faint); margin-left: auto; }

.recap-best {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: var(--radius-sm);
}

.recap-best-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.recap-best-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
}

/* v2.2.3 — Worst-call callout uses the negative palette so it
 * reads as feedback, not failure. */
.recap-best.worst {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}
.recap-best.worst .recap-best-value {
    color: var(--red, #ef4444);
}

/* v2.2.3 — Tagline sits between the header and the stat grid;
 * one-liner narrative keyed to the week's performance. */
.recap-tagline {
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 14px;
    padding: 0 2px;
    font-style: italic;
}

/* v2.2.3 — Narrative breakdown rows (direction bias + confidence
 * pattern). Compact key/value rows between the stat grid and the
 * per-day recap list. */
.recap-narrative {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 100, 0.03);
    border: 1px solid rgba(0, 0, 100, 0.08);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.recap-narrative-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-body, 'Raleway', sans-serif);
    font-size: 12px;
}
.recap-narrative-label {
    color: var(--text-faint, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 10px;
}
.recap-narrative-value {
    font-weight: 600;
    color: var(--text, #1f2937);
    text-align: right;
}

/* ══════════════════════════════════════════════
   ENHANCEMENT FEATURES
   ══════════════════════════════════════════════ */

/* ── Feature 19: Skeleton Loading Screens ── */
.skeleton-container {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton {
    background: linear-gradient(90deg, var(--border-light) 25%, var(--bg-alt) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius);
}

.skeleton-tall {
    height: 200px;
}

.skeleton-short {
    height: 60px;
}
.skeleton-line {
    height: 14px;
    border-radius: 7px;
    width: 70%;
}
.skeleton-line.short { width: 40%; }
.skeleton-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
}
.skeleton-row {
    display: flex; gap: 12px; align-items: center;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Feature 9: Ticker Logo ── */
.ticker-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
    background: var(--bg-alt);
    border: 1px solid var(--border-light);
}

/* ── Feature 7: Risk Meter ── */
.risk-meter {
    margin-top: 8px;
    margin-bottom: 4px;
}

.risk-meter-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    overflow: visible;
}

.risk-meter-gradient {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--green, #22c55e), var(--gold, #f59e0b), var(--red, #ef4444));
}

.risk-meter-marker {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2.5px solid var(--navy, #1e3a8a);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: left .3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.risk-meter-label {
    display: block;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-faint);
    margin-top: 3px;
}

/* ── Feature 10: Reveal Dots ── */
.reveal-dots {
    text-align: center;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 8px;
    color: var(--text-faint);
    padding: 12px 0;
    animation: pulseDots 1s ease-in-out infinite;
}

@keyframes pulseDots {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ── Feature 2: Confetti & Streak Animations ── */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-particle {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confettiFall 2s ease-in forwards;
}

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.streak-broken-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 700;
    color: var(--red);
    text-align: center;
    animation: shatterAnim 2.5s ease forwards;
    z-index: 10000;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

@keyframes shatterAnim {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

.flame-burst {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10000;
    pointer-events: none;
    animation: flameBurstAnim 3s ease forwards;
}

.flame-burst-icon {
    font-size: 64px;
    animation: flameGrow 0.6s ease-out;
}

.flame-burst-label {
    font-size: 22px;
    font-weight: 700;
    color: var(--orange);
    text-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
}

@keyframes flameGrow {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes flameBurstAnim {
    0% { opacity: 0; }
    15% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Feature 4: Streak Freeze UX ── */
.streak-freeze-shield {
    font-size: 18px;
    margin: 0 4px;
    vertical-align: middle;
}

.freeze-saved-text {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #38bdf8;
    padding: 6px 12px;
    background: rgba(56, 189, 248, 0.1);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    animation: freezeShatter 0.6s ease;
}

@keyframes freezeShatter {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Feature 12: Accuracy Grade Badge ── */
.accuracy-grade {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 1.4;
}

/* ── Feature 14: Title Badge ── */
.title-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* ── Feature 8: Performance Chart ── */
.perf-chart-card {
    /* margin-bottom removed — .side-tab-content flex gap:12px
       already provides the inter-card spacing. The extra 12px here
       was stacking on top, making the Performance → Confidence
       Analysis gap visibly larger than the other accordion gaps. */
}

.perf-chart-card svg {
    display: block;
    width: 100%;
    height: 100px;
}


/* ── Feature 15: Fun Fact Toast ── */
.fun-fact-toast {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 380px;
    width: 90%;
    text-align: center;
    z-index: 300;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    animation: toastIn 0.3s ease;
}

.fun-fact-toast.hidden { display: none; }

/* ── Feature 17: Keyboard Hint ── */
.keyboard-hint {
    text-align: center;
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 8px;
    letter-spacing: 0.3px;
}

/* ── Feature 20: Sound Toggle ── */
#sound-toggle span {
    font-size: 14px;
}

/* ══════════════════════════════════════════════
   ADDICTIVENESS FEATURES (1-18)
   ══════════════════════════════════════════════ */

/* ── Feature 1: Mystery Multiplier Banner ── */
.mystery-multiplier-banner {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
    padding: 14px 16px;
    margin: 12px 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(234,179,8,0.08), rgba(234,179,8,0.15));
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    animation: mysteryPulse 2s ease-in-out infinite;
}

.mystery-multiplier-banner::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--radius);
    background: linear-gradient(45deg, var(--gold), #f97316, var(--gold), #fbbf24);
    background-size: 300% 300%;
    z-index: -1;
    animation: goldBorder 3s ease infinite;
}

@keyframes mysteryPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

@keyframes goldBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Feature 2: Loot Box ── */
.loot-box-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loot-box {
    background: var(--surface);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    min-width: 260px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.3);
}

.loot-box-chest {
    font-size: 72px;
    margin-bottom: 16px;
}

.loot-box-chest.loot-shake {
    animation: lootShake 0.3s ease-in-out infinite;
}

@keyframes lootShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

.loot-box-reward {
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 16px;
    padding: 12px;
}

.loot-box-reward.loot-reveal {
    animation: lootReveal 0.6s ease;
}

@keyframes lootReveal {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Feature 3: Daily Bonus Wheel ── */
.btn-wheel {
    width: 100%;
    padding: 10px 16px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 8px;
    transition: opacity .15s;
}

.btn-wheel:hover { opacity: 0.9; }

.wheel-result-badge {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
    padding: 6px 12px;
    background: rgba(234,179,8,0.1);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.wheel-popup {
    background: var(--surface);
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    min-width: 300px;
    max-width: 360px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.3);
    position: relative;
}

.wheel-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.wheel-close:hover { color: var(--text); }

.wheel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 16px;
}

.wheel-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 16px;
}

#wheel-canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--navy), 0 0 0 8px rgba(0,0,100,0.2), 0 8px 24px rgba(0,0,0,0.2);
}

.wheel-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    background: var(--navy);
    border: 3px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.wheel-result-badge.wheel-win {
    color: var(--green);
    font-weight: 700;
}
.wheel-result-badge.wheel-lose {
    color: var(--text-faint);
    font-weight: 500;
}

.wheel-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    color: #CC0000;
    z-index: 3;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

/* ── Feature 4: Comeback Banner ── */
.comeback-banner {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding: 10px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #f97316, var(--red));
    animation: comebackPulse 2s ease-in-out infinite;
}

@keyframes comebackPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.4); }
    50% { box-shadow: 0 0 12px 4px rgba(249,115,22,0.2); }
}

/* ── Referral Hub ── */
.referral-hub-modal { max-width: 460px; }
.referral-tabs {
    display: flex; gap: 4px; margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.referral-tab {
    flex: 1; padding: 10px; border: none; background: transparent;
    color: var(--text-muted); font-weight: 600; font-size: 13px;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.referral-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.referral-tab:hover { color: var(--text); }

/* v2.1.1 — Friend-add subsection inside the referral hub. Sits below
 * the new-user invite block. Designed to read as a distinct "add an
 * existing player" affordance without competing with the primary
 * referral CTA above it. */
.referral-friend-add {
    border-top: 1px solid #e5e7eb;
    margin-top: 18px;
    padding-top: 4px;
}
.referral-friend-add-sub {
    font-size: 12px;
    color: #6b7280;
    margin: -4px 0 8px;
}
.referral-friend-qr-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    margin-top: 6px;
}
#referral-friend-qr-container svg {
    width: 160px;
    height: 160px;
    max-width: 100%;
}

.referral-code-box {
    background: linear-gradient(135deg, #000064, #3b82f6);
    color: #fff; border-radius: 12px; padding: 20px;
    text-align: center; margin-bottom: 16px;
}
.referral-code-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
    opacity: 0.8; margin-bottom: 6px;
}
.referral-code-value {
    font-size: 28px; font-weight: 700; letter-spacing: 3px;
    margin-bottom: 10px; font-family: 'SF Mono', Menlo, monospace;
}
.referral-code-desc { font-size: 13px; opacity: 0.9; }

.referral-qr-box {
    text-align: center; padding: 16px; background: var(--surface);
    border-radius: 12px; margin-bottom: 16px;
}
.referral-qr-box svg { max-width: 180px; height: auto; }
.referral-qr-hint { font-size: 11px; color: var(--text-faint); margin-top: 6px; }

.referral-share-buttons { display: flex; flex-direction: column; gap: 8px; }

/* Download-badge row — App Store + Google Play, tap to go to the
   native app listing when those are live. Until they're published,
   the handler falls through to a 'coming soon' toast. */
.referral-download-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 8px;
}
.referral-step-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: var(--navy, #000064);
    margin: 0 0 8px;
    text-align: center;
}
.referral-store-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.referral-store-badges a {
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0.92;
}
.referral-store-badges a:hover { transform: scale(1.03); opacity: 1; }
.referral-store-badges a:active { transform: scale(0.98); }
.referral-store-badges svg {
    /* Both badges use the same 135×40 viewBox, so fixed pixel
       dimensions here guarantee identical rendered size. */
    width: 140px;
    height: 42px;
    display: block;
}
/* Equalise the anchor wrappers too so any hover/focus ring is the
   same size across both badges. */
.referral-store-badges a {
    width: 140px;
    height: 42px;
    box-sizing: border-box;
}

/* Secondary links below the primary Share button — quieter than
   the former tabs, still reachable. */
.referral-secondary-links {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 12px 0 0;
}
.referral-secondary-links a {
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
}
.referral-secondary-links a:hover { text-decoration: underline; }
.referral-secondary-links .referral-sep {
    margin: 0 8px;
    color: var(--text-faint);
}

.referral-email-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.referral-email-input { margin-bottom: 8px; }
.referral-success {
    color: var(--green); font-size: 13px; font-weight: 600;
    padding: 8px 12px; background: rgba(34,197,94,0.1);
    border-radius: 6px; margin: 8px 0;
}

.referral-stats-row {
    display: flex; gap: 12px; margin-bottom: 16px;
}
.referral-stat {
    flex: 1; background: var(--surface); border-radius: 10px;
    padding: 14px; text-align: center;
}
.referral-stat-value { font-size: 24px; font-weight: 700; color: var(--navy); }
.referral-stat-label {
    font-size: 11px; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 1px; margin-top: 4px;
}

.referral-friend-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px; border-bottom: 1px solid var(--border);
}
.referral-friend-row:last-child { border-bottom: none; }
.referral-friend-name { font-weight: 600; font-size: 14px; }
.referral-friend-meta { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.referral-friend-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 2px 6px; border-radius: 4px; margin-left: 4px;
}
.referral-friend-badge.earned { background: rgba(34,197,94,0.15); color: var(--green); }
.referral-friend-badge.pending { background: rgba(245,158,11,0.15); color: #d97706; }

.referral-empty, .referral-loading {
    text-align: center; padding: 32px 16px; color: var(--text-muted);
}

.referral-callout {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff; padding: 10px 12px; border-radius: 8px;
    font-size: 13px; margin: 12px 0 8px;
}

/* Referral section within auth modal */
#auth-referral-section { margin-top: 8px; }

/* ── Bonus strip — compact chip-based replacement for full-width banners ──
   Wraps the individual bonus indicators (Earnings, Fed Day, Early Bird,
   Golden Hour, Comeback, Returning Player) into a single flex row of
   chips so they don't stack vertically and take over the screen. Each
   chip gets its own color from the existing banner class it carries. */
.bonus-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
    align-items: center;
}
.bonus-strip:empty { display: none; }
/* Hide the strip wrapper if all its chips are display:none (using :has()
   where supported; graceful fallback: it just shows an empty row) */
.bonus-strip-secondary {
    margin-top: 4px;
}
.bonus-chip {
    /* Baseline chip style — individual banner classes override the
       background/color to show their specific bonus color.

       IMPORTANT: display is intentionally NOT marked !important here.
       The chip is hidden by inline style="display:none" in the HTML
       (default state) and by JS setting element.style.display = 'none'
       when the bonus is inactive. An !important on display would
       override those inline styles and make every chip permanently
       visible — which is exactly the bug that made the Comeback pill
       show regardless of eligibility.
    */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    white-space: nowrap;
    line-height: 1.2 !important;
    text-align: center !important;
    border: 1px solid transparent !important;
    min-height: unset !important;
    max-width: unset !important;
    /* Kill any old animations or pseudo-elements that were tied to the
       full-width banner visuals */
    animation: none !important;
}
.bonus-chip::before,
.bonus-chip::after { display: none !important; content: none !important; }
.bonus-chip.early-bird-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-color: rgba(146,64,14,0.2) !important;
}
.bonus-chip.earnings-banner {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-color: rgba(30,64,175,0.2) !important;
}
.bonus-chip.fed-day-banner {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    color: #991b1b;
    border-color: rgba(153,27,27,0.2) !important;
}
.bonus-chip.fed-day-banner .fed-day-sub,
.bonus-chip.fed-day-banner .fed-day-title { display: none !important; }
.bonus-chip.golden-hour-banner {
    background: linear-gradient(135deg, rgba(234,179,8,0.12) 0%, rgba(234,179,8,0.22) 100%);
    color: #a16207;
    border-color: rgba(234,179,8,0.4) !important;
}
.bonus-chip.comeback-banner {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    color: #9a3412;
    border-color: rgba(154,52,18,0.2) !important;
}
.bonus-chip.returning-banner {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #5b21b6;
    border-color: rgba(91,33,182,0.2) !important;
}

/* ── Prizes callout (predict screen) — subtle, tappable ── */
/* Unified prizes panel: callout on top, qualification progress below,
   one outer border. On-brand navy frame with soft surface fill so the
   panel reads consistently with the app's navy/white identity rather
   than the previous gold wash. Tiered progress styling
   (.qual-steady / crunch / final / missed) still drives the inner
   bar colour — keeps the urgency ramp meaningful against the calm
   outer frame. */
.prizes-panel {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    margin: 8px 0 12px;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.prizes-callout-top {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text);
    background: #000064;
    color: #fff;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.prizes-callout-top:hover {
    background: #0a0a7a;
}
.prizes-callout-top strong {
    color: #fff;
    font-weight: 700;
}
.prizes-callout-arrow {
    margin-left: auto;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    opacity: 0.85;
}

/* Back-compat: keep .prizes-callout working for any remaining call
   sites (tour targets, hamburger, etc.) as an alias for the new
   panel styling. */
.prizes-callout {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-secondary);
    background: linear-gradient(135deg, rgba(201,162,39,0.08) 0%, rgba(234,179,8,0.04) 100%);
    border: 1px solid rgba(201,162,39,0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.prizes-callout:hover {
    background: linear-gradient(135deg, rgba(201,162,39,0.14) 0%, rgba(234,179,8,0.08) 100%);
    border-color: rgba(201,162,39,0.5);
}
.prizes-callout strong { color: #c9a227; }

/* ── Qualification Progress Strip ──
   Sits under the prizes callout on the predict screen. Shows games
   played vs needed, a progress bar, and trading days remaining.
   Tiers (qual-steady / crunch / final / missed) drive colour + copy:
     steady — gold, calm — "plenty of runway"
     crunch — amber, attention-grabbing — "5 days left"
     final  — red, pulsing — "last 2 days"
     missed — neutral, forward-looking — "start strong next month"
   Hidden once the player is eligible (minGames reached). */
.qual-progress {
    font-size: 12px;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 12px;
    border: 1px solid;
    transition: background 0.2s, border-color 0.2s;
}
/* When the progress strip sits inside the unified .prizes-panel, drop
   the outer border + radius + margin so it reads as one seamless
   panel. A top divider replaces the full border to separate the two
   zones. The urgency tier (steady/crunch/final/missed) still drives
   the bar colour and headline tint. */
.prizes-panel .qual-progress {
    border: none;
    border-top: 1px solid var(--border, #e5e7eb);
    border-radius: 0;
    margin: 0;
    background: transparent !important;
    animation: none !important;
    box-shadow: none !important;
}
.prizes-panel .qual-progress.qual-final {
    animation: qualFinalPulse 2.2s ease-in-out infinite !important;
}
.qual-progress-headline {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text);
}
.qual-progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0 6px;
}
.qual-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.qual-progress-sub {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Steady: plenty of runway, gold accent (matches prizes callout) */
.qual-progress.qual-steady {
    background: linear-gradient(135deg, rgba(201,162,39,0.06) 0%, rgba(234,179,8,0.03) 100%);
    border-color: rgba(201,162,39,0.25);
}
.qual-progress.qual-steady .qual-progress-fill {
    background: linear-gradient(90deg, #c9a227, #eab308);
}

/* Crunch: last 5 trading days, amber urgency */
.qual-progress.qual-crunch {
    background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(245,158,11,0.04) 100%);
    border-color: rgba(245,158,11,0.4);
}
.qual-progress.qual-crunch .qual-progress-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.qual-progress.qual-crunch .qual-progress-headline {
    color: #b45309;
}

/* Final: last 2 trading days, red pulsing */
.qual-progress.qual-final {
    background: linear-gradient(135deg, rgba(220,38,38,0.1) 0%, rgba(220,38,38,0.04) 100%);
    border-color: rgba(220,38,38,0.45);
    animation: qualFinalPulse 2.2s ease-in-out infinite;
}
.qual-progress.qual-final .qual-progress-fill {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}
.qual-progress.qual-final .qual-progress-headline {
    color: #b91c1c;
}
@keyframes qualFinalPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); }
}

/* Missed: unreachable this month, neutral + forward-looking */
.qual-progress.qual-missed {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    opacity: 0.85;
}
.qual-progress.qual-missed .qual-progress-fill {
    background: rgba(0, 0, 0, 0.2);
}
.qual-progress.qual-missed .qual-progress-headline {
    color: var(--text-muted);
}

/* Dark mode adjustments — keep the urgency hierarchy visible */
[data-theme="dark"] .qual-progress.qual-steady .qual-progress-headline { color: #fde68a; }
[data-theme="dark"] .qual-progress.qual-crunch .qual-progress-headline { color: #fcd34d; }
[data-theme="dark"] .qual-progress.qual-final .qual-progress-headline  { color: #fca5a5; }

/* ── Double-or-Nothing Pending Banner (predict/awaiting screens) ── */
.don-pending-banner {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding: 10px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #a855f7, #ec4899);
    animation: comebackPulse 2s ease-in-out infinite;
}

/* ── Returning Player Banner ── */
.returning-banner {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    padding: 10px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    animation: comebackPulse 2s ease-in-out infinite;
}

/* ── Feature 5: Monthly Progress Card ── */
.monthly-progress-card {
    /* margin-bottom removed — .side-tab-content flex gap handles it.
       See note on .perf-chart-card above. */
}

.tier-current {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-align: center;
}

.tier-current strong {
    color: var(--text);
    font-weight: 600;
}

.tier-bar-container {
    position: relative;
    margin-bottom: 8px;
}

.tier-bar {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.tier-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #cd7f32, #c0c0c0, var(--gold), #a78bfa, #38bdf8);
    transition: width 0.6s ease;
}

.tier-markers {
    position: relative;
    height: 28px;
    margin-top: 4px;
}

.tier-marker {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tier-marker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--border);
}

.tier-marker.reached .tier-marker-dot {
    border-color: transparent;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.tier-marker-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-faint);
    white-space: nowrap;
}

.tier-marker.reached .tier-marker-label {
    color: var(--text);
}

.tier-urgency {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--orange);
    margin-top: 4px;
}

.tier-urgency.tier-max {
    color: #38bdf8;
}

/* ── Feature 6: Decay Warning ── */
.decay-warning {
    font-size: 11px;
    font-weight: 500;
    color: var(--orange);
    text-align: center;
    padding: 8px 10px;
    margin-top: 10px;
    background: rgba(245,158,11,0.08);
    border-radius: var(--radius-sm);
    animation: decayPulse 3s ease-in-out infinite;
}

@keyframes decayPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── Feature 7: Rival Card ── */
.rival-card {
    background: linear-gradient(135deg, rgba(239,68,68,0.04), rgba(0,0,100,0.04));
    border: 1px solid var(--border);
}

.rival-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    margin-bottom: 4px;
}

.rival-gap {
    font-size: 12px;
    font-weight: 500;
    color: var(--navy);
    text-align: center;
    margin-bottom: 6px;
}

.rival-prediction {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* ── Feature 8: Contrarian Badge ── */
.contrarian-badge {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #a855f7;
    padding: 10px 16px;
    margin: 12px 0;
    background: rgba(168,85,247,0.08);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: var(--radius-sm);
    letter-spacing: 0.3px;
}

/* ── Feature 9: Hall of Fame Card ── */
.hall-of-fame-card {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    padding: 14px 16px;
    margin: 12px 0;
    background: linear-gradient(135deg, rgba(234,179,8,0.06), rgba(234,179,8,0.12));
    border: 1px solid rgba(234,179,8,0.3);
    border-radius: var(--radius);
}

.hof-names {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ── Feature 10: Golden Hour Banner ── */
.golden-hour-banner {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    padding: 10px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: rgba(234,179,8,0.08);
    border: 2px solid transparent;
    position: relative;
    animation: goldenPulse 2s ease-in-out infinite;
}

.golden-hour-banner::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-sm);
    background: linear-gradient(45deg, var(--gold), #fbbf24, var(--gold));
    background-size: 200% 200%;
    z-index: -1;
    animation: goldBorder 2s ease infinite;
}

@keyframes goldenPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,0.3); }
    50% { box-shadow: 0 0 12px 2px rgba(234,179,8,0.15); }
}

/* ── Feature 11: FOMO Card ── */
.fomo-card {
    text-align: center;
    padding: 20px 16px;
    margin-top: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--accent-light);
}

.fomo-text {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
}

.fomo-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ghost-btn {
    padding: 14px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: transparent;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: not-allowed;
    opacity: 0.35;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ghost-up { color: var(--green); }
.ghost-down { color: var(--red); }

/* ── Feature 12: Live Prediction Counter ── */
.live-counter {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

/* ── Feature 13: Leaderboard Title Badge ── */
.lb-title-badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    padding: 1px 4px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.3px;
    flex-shrink: 0; /* M10: prevent badge from shrinking */
    white-space: nowrap;
}

/* ── Feature 14: Avatar Border Colors ── */
.avatar-border-gray {
    border: 2px solid var(--border);
}

.avatar-border-blue {
    border: 2px solid #3b82f6;
}

.avatar-border-purple {
    border: 2px solid #8b5cf6;
}

.avatar-border-gold {
    border: 2px solid #eab308;
}

.avatar-shimmer {
    animation: avatarShimmer 2s ease-in-out infinite;
}

@keyframes avatarShimmer {
    0% { box-shadow: 0 0 4px rgba(234,179,8,0.3); }
    50% { box-shadow: 0 0 16px rgba(234,179,8,0.6), 0 0 24px rgba(56,189,248,0.3); }
    100% { box-shadow: 0 0 4px rgba(234,179,8,0.3); }
}

/* ── Leaderboard icon tooltip (shared) ── */
.lb-icon-tip {
    font-size: 10px;
    vertical-align: middle;
    margin-left: 2px;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lb-icon-tip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 9999;
}

.lb-icon-tip:hover::after,
.lb-icon-tip.show-tooltip::after {
    opacity: 1;
}

/* ── Feature 16: Streak Calendar ── */
.calendar-card {
    /* margin-top removed — .side-tab-content flex gap handles it. */
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.cal-header {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-faint);
    text-transform: uppercase;
    padding: 2px 0;
}

.cal-day {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    padding: 4px 2px;
    border-radius: 4px;
    transition: background .15s;
}

.cal-day.cal-empty {
    visibility: hidden;
}

.cal-day.cal-correct {
    background: rgba(34,197,94,0.15);
    color: var(--green);
    font-weight: 600;
}

.cal-day.cal-wrong {
    background: rgba(239,68,68,0.12);
    color: var(--red);
    font-weight: 600;
}

.cal-day.cal-missed {
    background: var(--border-light);
    color: var(--text-faint);
}

.cal-day.cal-future {
    color: var(--border);
}

.cal-day.cal-today {
    border: 1px solid var(--navy);
    font-weight: 600;
}

/* ── Feature 17: Pre-Market Context ── */
.premarket-context {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    font-style: italic;
    padding: 0 16px;
}

/* ── Feature 18: End-of-Day Tease ── */
.eod-tease {
    text-align: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.eod-tease p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.calendar-link {
    font-size: 12px;
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 500;
    transition: opacity .15s;
}

.calendar-link:hover {
    opacity: 0.7;
}

/* ══════════════════════════════════════════════
   NEW GAME FEATURES
   ══════════════════════════════════════════════ */

/* ── Early Bird Pre-Market Banner ── */
.early-bird-banner {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #f59e0b;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(245,158,11,0.12));
    border: 1px solid rgba(245,158,11,0.2);
}

/* ── Feature 3: Sector Theme Banner ── */
.sector-theme-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 100, 0.08);
    color: var(--tia-navy, #000064);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sector-theme-banner img {
    height: 20px;
    width: 20px;
    border-radius: 4px;
    background: var(--bg);
}

/* ── Feature 4: Double-or-Nothing Card ── */
.don-card {
    text-align: center;
    padding: 20px 16px;
    margin: 16px 0;
    border-radius: var(--radius);
    background: var(--surface);
    border: 3px solid transparent;
    position: relative;
    animation: donPulse 2s ease-in-out infinite;
}

.don-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--radius);
    background: linear-gradient(45deg, var(--red), var(--green), var(--red), var(--green));
    background-size: 300% 300%;
    z-index: -1;
    animation: donBorder 3s ease infinite;
}

@keyframes donPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
    50% { box-shadow: 0 0 20px 4px rgba(34,197,94,0.2); }
}

@keyframes donBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.don-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.don-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.don-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.don-accept {
    background: var(--green);
    color: #fff;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
}

.don-accept:hover { opacity: 0.9; }

.don-decline {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.don-decline:hover { border-color: var(--navy); }

.don-accepted {
    font-size: 14px;
    font-weight: 600;
    color: var(--green);
    border: 2px solid var(--green);
}

.don-accepted::before { display: none; }

.don-won {
    font-size: 14px;
    font-weight: 600;
    color: var(--green);
    border: 2px solid var(--green);
    background: rgba(34, 197, 94, 0.08);
    animation: donWinPulse 2s ease-in-out 2;
}
.don-won .don-title { color: var(--green); }
.don-won::before { display: none; }

@keyframes donWinPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    50% { box-shadow: 0 0 20px 4px rgba(34, 197, 94, 0.3); }
}

.don-lost {
    font-size: 14px;
    font-weight: 600;
    color: var(--red);
    border: 2px solid var(--red);
    background: rgba(239, 68, 68, 0.08);
}
.don-lost .don-title { color: var(--red); }
.don-lost::before { display: none; }

/* ── Feature 6: Win Rate by Day of Week ── */
.dow-stats-card .dow-row,
.sector-stats-card .dow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.dow-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 50px;
}

.dow-bar-container {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.dow-bar, .sector-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.dow-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    min-width: 32px;
    text-align: right;
}

/* ── Feature 8: Prediction History Timeline ── */
.history-timeline-card {
    /* margin-top removed — .side-tab-content already provides the
       12px flex gap between cards. The extra 12px here was stacking
       on top, producing a visibly larger gap before Prediction
       History than between any other pair of sidebar cards. */
}

.timeline-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.timeline-filter {
    flex: 1;
    padding: 4px 8px;
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
}

.timeline-filter:hover { border-color: var(--navy); color: var(--navy); }
.timeline-filter.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.timeline-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.timeline-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 11px;
}

.timeline-row:last-child { border-bottom: none; }

.tl-date {
    font-size: 10px;
    color: var(--text-faint);
    min-width: 42px;
}

.tl-ticker {
    font-weight: 600;
    color: var(--text);
    min-width: 40px;
}

.tl-call { min-width: 16px; text-align: center; }
.tl-result { min-width: 16px; text-align: center; font-weight: 600; }

.tl-pts {
    margin-left: auto;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 30px;
    text-align: right;
}

/* ── Feature 9: Personal Best Tracker ── */
.personal-bests-card {
    /* margin-top removed — .side-tab-content flex gap handles it. */
}

.pb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.pb-item {
    text-align: center;
    padding: 8px 4px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-alt);
    transition: background .15s;
}

.pb-item:hover { background: var(--accent-light); }

.pb-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.pb-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 2px;
}

.pb-detail {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ── Feature 10: Earnings Season Banner ── */
.earnings-banner {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: var(--navy);
    letter-spacing: 0.5px;
}

/* ── Feature 11: Fed Day Banner ── */
.fed-day-banner {
    text-align: center;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #991b1b, #000064);
    color: #fff;
}

.fed-day-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.fed-day-sub {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
}

/* ── Feature 12: Monthly Championship Banner ── */
.championship-banner {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    padding: 14px 16px;
    margin: 12px 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(234,179,8,0.08), rgba(234,179,8,0.15));
    border: 2px solid var(--gold);
}

/* Prizes accordion */
.prizes-accordion {
    padding: 0 !important;
    overflow: hidden;
}

.prizes-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--navy);
    text-transform: uppercase;
}

.prizes-accordion-arrow {
    font-size: 12px;
    transition: transform .2s;
}

.prizes-accordion.open .prizes-accordion-arrow {
    transform: rotate(180deg);
}

.prizes-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    padding: 0 14px;
}

.prizes-accordion.open .prizes-accordion-body {
    max-height: 500px;
    padding: 0 14px 12px;
}

/* Generic sidebar accordion (Personal Bests, Achievements) */
.sidebar-accordion {
    padding: 0 !important;
    overflow: hidden;
}

.sidebar-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* Match regular .panel-card padding (14px) so the visual gap
       between any two cards in the side panel — regular, open
       accordion, closed accordion — is identical. Previously the
       toggle used 10px vertical padding which made accordion-to-
       accordion gaps read ~8px tighter than regular-to-regular. */
    padding: 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--navy);
    text-transform: uppercase;
}

.sidebar-accordion-arrow {
    font-size: 12px;
    transition: transform .2s;
}

.sidebar-accordion.open .sidebar-accordion-arrow {
    transform: rotate(180deg);
}

.sidebar-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    padding: 0 14px;
}

.sidebar-accordion.open .sidebar-accordion-body {
    max-height: 600px;
    /* Match .panel-card bottom padding (14px) so an open accordion
       ends with the same breathing space as a regular panel-card —
       keeps the inter-card gap visually identical. */
    padding: 0 14px 14px;
}

.prizes-section {
    margin-bottom: 6px;
}

.prizes-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.prizes-grid {
    display: flex;
    gap: 6px;
}

.prizes-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 8px;
    text-align: center;
}

.prizes-slot.gold { background: rgba(234,179,8,0.12); }
.prizes-slot.silver { background: rgba(160,160,160,0.12); }
.prizes-slot.bronze { background: rgba(205,127,50,0.12); }

.prizes-rank {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}

.prizes-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-top: 1px;
}

.prizes-slot.gold .prizes-value { color: #b8860b; }
.prizes-slot.silver .prizes-value { color: #6b6b6b; }
.prizes-slot.bronze .prizes-value { color: #a0522d; }

.prizes-brands {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.prizes-brand {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.prizes-fine-print {
    font-size: 9.5px;
    color: var(--text-faint);
    text-align: center;
    margin-top: 6px;
    line-height: 1.4;
}

.prizes-user-status {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(234,179,8,0.2);
    text-align: center;
}

.prizes-user-status:empty {
    display: none;
}

.prizes-status {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

.prizes-status.in-prizes { color: var(--green); font-weight: 600; }
.prizes-status.not-eligible { color: var(--text-muted); }
.prizes-status.almost-there { color: var(--orange); font-weight: 600; }
.prizes-status.within-reach { color: var(--green); font-weight: 600; }
.prizes-status.chasing { color: #b8860b; }

.prize-standing-prize {
    font-size: 10px;
    font-weight: 600;
    color: var(--green);
    margin-left: auto;
    margin-right: 6px;
}

/* ── Monthly Championship Prize Banner ── */
.prize-banner-card {
    padding: 0;
    overflow: hidden;
    margin-top: 8px;
}

.prize-banner {
    padding: 14px 16px;
    text-align: center;
}

.prize-banner-title {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--gold);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.prize-tiers {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.prize-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    border-radius: 10px;
    min-width: 60px;
}

.prize-tier.gold { background: rgba(234,179,8,0.12); }
.prize-tier.silver { background: rgba(160,160,160,0.12); }
.prize-tier.bronze { background: rgba(205,127,50,0.12); }

.prize-medal {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.prize-amount {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin-top: 2px;
}

.prize-tier.gold .prize-amount { color: #b8860b; }
.prize-tier.silver .prize-amount { color: #6b6b6b; }
.prize-tier.bronze .prize-amount { color: #a0522d; }

.prize-standings {
    margin: 8px 0;
    font-size: 11px;
}

.prize-standing-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-weight: 300;
}

.prize-standing-row.not-eligible {
    opacity: 0.5;
}

.prize-standing-pts {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-weight: 500;
}

.prize-ineligible {
    font-size: 9px;
    color: var(--red);
    margin-left: 4px;
    font-weight: 500;
}

.prize-user-status {
    font-size: 12px;
    font-weight: 500;
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.prize-user-status.in-prizes { color: var(--green); }
.prize-user-status.not-eligible { color: var(--text-faint); }
.prize-user-status.chasing { color: var(--gold); }

.prize-meta {
    font-size: 10px;
    color: var(--text-faint);
    margin-top: 6px;
}

/* Live Standings */
.live-standings-ticker {
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}

.live-up { color: var(--green); }
.live-down { color: var(--red); }

.live-standings-table {
    text-align: left;
}

.live-standings-header {
    display: flex;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-faint);
    padding: 0 0 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.live-standings-row {
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 400;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.live-standings-row.ls-me {
    background: rgba(0, 0, 100, 0.05);
    border-radius: 6px;
    padding: 5px 4px;
    font-weight: 600;
}
/* User's row appended below top-5 when outside — slightly stronger callout */
.live-standings-row.ls-self-row {
    background: rgba(59, 130, 246, 0.08);
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.live-standings-row.ls-ellipsis { font-weight: normal; }

.ls-rank {
    width: 24px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
}

.ls-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--navy);
}

.ls-dir {
    font-size: 9px;
    margin-left: 3px;
}

.ls-dir-up { color: #000064; }
.ls-dir-down { color: var(--red); }

.ls-proj {
    width: 70px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--navy);
    font-weight: 500;
    font-size: 12px;
}

.ls-impact {
    width: 48px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 11px;
}

.ls-tags {
    display: block;
    font-size: 9px;
    font-weight: 400;
    color: var(--text-faint);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Past Champions */
.past-winners-card {
    /* margin-top removed — .side-tab-content flex gap handles it. */
}

.past-winners-month {
    font-size: 11px;
    font-weight: 600;
    color: var(--navy);
    padding: 8px 0 3px;
    border-bottom: 1px solid var(--border);
}

.past-winner-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 300;
    padding: 3px 0;
}

.past-winner-prize {
    margin-left: auto;
    font-weight: 600;
    color: var(--green);
}

/* ── Prize Winner Popup ── */
.prize-winner-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn .2s ease;
}

.prize-winner-popup {
    background: var(--bg);
    border-radius: 20px;
    padding: 32px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
    animation: slideUp .3s ease;
    border: 2px solid var(--gold);
}

.prize-winner-trophy {
    font-size: 56px;
    margin-bottom: 8px;
    animation: trophyBounce .6s ease;
}

@keyframes trophyBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.prize-winner-title {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
}

.prize-winner-detail {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.prize-winner-amount {
    font-size: 36px;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 4px;
}

.prize-winner-amount span {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

.prize-winner-deadline {
    font-size: 12px;
    color: var(--text-faint);
    margin-bottom: 16px;
    min-height: 18px;
}

.prize-claim-btn {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--gold), #d4a006);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

.prize-claim-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(234, 179, 8, .4);
}

.prize-claim-btn:disabled {
    opacity: .7;
    cursor: default;
}

.prize-winner-note {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 12px;
    font-weight: 300;
    line-height: 1.5;
}

/* ── Feature 14: Win Back Notifications ── */
.winback-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.winback-popup {
    background: var(--surface);
    border: 2px solid var(--navy);
    border-radius: var(--radius);
    padding: 24px;
    width: 360px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    animation: revealPop 0.3s ease;
}

.winback-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.winback-games {
    margin-bottom: 12px;
}

.winback-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text);
}

.winback-row:last-child { border-bottom: none; }

.winback-ticker {
    font-weight: 600;
    min-width: 50px;
}

.winback-missed-pts {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--red);
    padding: 10px 0;
    margin-bottom: 12px;
}

/* v2.4.2 — Win-back league movement + section labels */
.winback-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-faint);
    margin: 4px 0 8px;
}

.winback-leagues {
    margin-bottom: 14px;
}

.winback-league-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: var(--surface-alt, rgba(0,0,100,0.04));
    border: 1px solid var(--border-light);
}

.winback-league-row:last-child { margin-bottom: 0; }

.winback-league-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.winback-league-move {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.winback-rank-up { color: var(--green, #16a34a); }
.winback-rank-down { color: var(--red, #dc2626); }

.winback-league-delta {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.8;
}

/* v2.4.3 — In-app update gate (soft nudge + hard required) */
.md-update-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 100000; /* above all other overlays/sheets */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.md-update-overlay.is-open { opacity: 1; }
.md-update-card {
    background: var(--surface, #fff);
    border-radius: 18px;
    padding: 28px 24px;
    width: 340px;
    max-width: 92vw;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.2s ease;
}
.md-update-overlay.is-open .md-update-card { transform: none; }
.md-update-icon { font-size: 40px; margin-bottom: 12px; line-height: 1; }
.md-update-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy, #000064);
    margin: 0 0 8px;
}
.md-update-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text, #333);
    margin: 0 0 20px;
}
.md-update-cta {
    display: block;
    width: 100%;
    background: var(--navy, #000064);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.md-update-cta:active { transform: translateY(1px); }
.md-update-later {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--text-faint, #888);
    border: none;
    margin-top: 10px;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ── Feature 16: Daily Login Reward Track ── */
.login-reward-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-reward-popup {
    background: var(--surface);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 24px;
    width: 400px;
    max-width: 92vw;
    box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    animation: revealPop 0.3s ease;
    text-align: center;
}

.login-reward-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.reward-track {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    justify-content: center;
}

.reward-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-alt);
    min-width: 44px;
    transition: all .15s;
}

.reward-day.claimed {
    border-color: var(--green);
    background: rgba(34,197,94,0.08);
    opacity: 0.6;
}

.reward-day.current {
    border-color: var(--gold);
    background: rgba(234,179,8,0.1);
    animation: rewardPulse 1.5s ease-in-out infinite;
}

@keyframes rewardPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,0.3); transform: scale(1); }
    50% { box-shadow: 0 0 12px 2px rgba(234,179,8,0.2); transform: scale(1.05); }
}

.reward-day-num {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: 0.3px;
}

.reward-day-pts {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.reward-bonus {
    font-size: 8px;
    font-weight: 600;
    color: var(--gold);
    margin-top: 2px;
}

/* ── Feature 17: Ghost of Past Self ── */
.ghost-card {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: var(--accent-light);
    border: 1px dashed var(--border);
    border-left: 3px solid var(--border);
    font-style: italic;
    opacity: 0.85;
    transition: opacity .15s;
    line-height: 1.5;
}

.ghost-card.ghost-won  { border-left-color: #22c55e; }
.ghost-card.ghost-lost { border-left-color: #ef4444; }
.ghost-card.ghost-flat { border-left-color: #eab308; }

.ghost-card:hover { opacity: 1; }

.ghost-card strong {
    font-weight: 600;
    color: var(--text);
    font-style: normal;
}

/* ── Disclaimer Footer ── */
.game-disclaimer {
    max-width: 800px;
    margin: 40px auto 20px;
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.disclaimer-text {
    font-size: 10px;
    line-height: 1.6;
    color: var(--text-muted);
    opacity: 0.7;
}

.disclaimer-text strong {
    color: var(--text);
    opacity: 1;
}

.disclaimer-copyright {
    font-size: 10px;
    color: var(--text-faint);
    margin-top: 8px;
}

/* ── Iframe mode: allow flexible height ── */
body.in-iframe {
    overflow-y: auto !important;
    height: auto !important;
}

/* ── Tier Progress Bar (Sidebar) ── */
.tier-progress-bar-wrap {
    margin-top: 10px;
    padding: 0 4px;
}
.tier-progress-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 5px;
}
.tier-progress-arrow {
    color: var(--text-faint);
    font-size: 10px;
}
.tier-progress-track {
    height: 8px;
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.tier-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease-out;
}
.tier-progress-fill.tier-progress-pulse {
    animation: tierPulse 2s ease-in-out infinite;
}
.tier-progress-msg {
    font-size: 10px;
    text-align: center;
    margin-top: 4px;
    color: var(--text-muted);
}
.tier-progress-msg.tier-msg-warm {
    color: var(--text-secondary);
    font-weight: 500;
}
.tier-progress-msg.tier-msg-hot {
    color: #eab308;
    font-weight: 600;
    animation: tierTextGlow 2s ease-in-out infinite;
}
@keyframes tierPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
    50% { opacity: 0.85; box-shadow: 0 0 8px 2px rgba(234, 179, 8, 0.4); }
}
@keyframes tierTextGlow {
    0%, 100% { text-shadow: none; }
    50% { text-shadow: 0 0 6px rgba(234, 179, 8, 0.5); }
}

/* ── Tier Nudge (Post-Score on Results) ── */
.tier-nudge {
    text-align: center;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-top: 10px;
    line-height: 1.4;
}
.tier-nudge-icon {
    margin-right: 4px;
}
.tier-nudge-warm {
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.25);
    color: var(--text-primary);
}
.tier-nudge-hot {
    background: rgba(234, 179, 8, 0.1);
    border: 2px solid rgba(234, 179, 8, 0.5);
    color: var(--text-primary);
    font-weight: 500;
    animation: tierNudgePulse 2.5s ease-in-out 3;
}
@keyframes tierNudgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
    50% { box-shadow: 0 0 16px 3px rgba(234, 179, 8, 0.25); }
}

/* ── Learning Card (Post-Result Coaching) ── */
.learning-card {
    margin-top: 14px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.learning-card-loss {
    border-left: 4px solid #3b82f6;
}
.learning-card-win {
    border-left: 4px solid #22c55e;
}
.learning-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.learning-header-icon {
    font-size: 18px;
}
.learning-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.learning-section {
    margin-bottom: 12px;
}
.learning-section:last-child {
    margin-bottom: 0;
}
.learning-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.learning-section-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}
.learning-section-recovery {
    background: rgba(34, 197, 94, 0.06);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid rgba(34, 197, 94, 0.15);
}
.learning-section-recovery .learning-section-text {
    color: var(--text-secondary);
}
.learning-section-streak {
    background: rgba(249, 115, 22, 0.06);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid rgba(249, 115, 22, 0.15);
}
.learning-section-streak .learning-section-text {
    color: var(--text-secondary);
}
.learning-insight-item {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.12);
}
.learning-insight-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}
.learning-insight-tip {
    font-size: 11px;
    line-height: 1.4;
    color: #3b82f6;
    margin: 0;
    font-weight: 500;
}

/* ── Guest Login Modal ── */
.guest-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.guest-login-popup {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    width: 340px;
    max-width: 90vw;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    text-align: center;
    position: relative;
}
/* ── Support report modal entry/exit animations ──
   The support report modal gets a distinct pop-in / pop-out so the
   'Report' click feels deliberate rather than the instantaneous
   modal jump used elsewhere. Scoped to support-report-overlay so
   the other guest-login modals keep their existing behaviour. */
#support-report-overlay {
    animation: supportOverlayIn 0.22s ease forwards;
}
#support-report-overlay .support-report-popup {
    animation: supportPopupIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center top;
}
#support-report-overlay.closing {
    animation: supportOverlayOut 0.18s ease forwards;
}
#support-report-overlay.closing .support-report-popup {
    animation: supportPopupOut 0.18s ease forwards;
}
@keyframes supportOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes supportOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes supportPopupIn {
    0%   { opacity: 0; transform: scale(0.88) translateY(-10px); }
    60%  { opacity: 1; transform: scale(1.02) translateY(0); }
    100% { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes supportPopupOut {
    0%   { opacity: 1; transform: scale(1)    translateY(0); }
    100% { opacity: 0; transform: scale(0.94) translateY(-6px); }
}

/* Close X — top-right corner of any .guest-login-popup (reset,
   forgot-password, guest-login). Sits outside the scroll flow so it
   stays pinned while the popup contents can adjust. */
.guest-login-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.guest-login-close:hover {
    color: var(--text);
    background: rgba(0, 0, 0, 0.05);
}
.guest-login-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
}
.guest-login-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-align: left;
    margin-bottom: 6px;
}
.guest-login-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
    margin-bottom: 16px;
}
.guest-login-input:focus {
    border-color: var(--navy);
}
.guest-login-actions {
    display: flex;
    gap: 8px;
}
.guest-login-actions .btn {
    flex: 1;
}

/* ── Save Streak Modal ── */
.save-streak-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    padding-top: calc(16px + env(safe-area-inset-top, 0));
    animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.save-streak-popup {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 22px 20px;
    width: 380px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.save-streak-emoji {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 8px;
}
.save-streak-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.save-streak-sub {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 20px;
    padding: 0 4px;
}
.save-streak-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
    margin: 12px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.save-streak-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px; /* 16px to prevent iOS zoom on focus */
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.save-streak-input:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(0, 30, 80, 0.12);
}
.save-streak-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 8px;
    padding: 12px;
    background: var(--bg);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    user-select: none;
}
.save-streak-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--navy);
    cursor: pointer;
}
.save-streak-checkbox span {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
}
.save-streak-checkbox strong {
    color: var(--navy);
    font-weight: 700;
}
.save-streak-error {
    font-size: 13px;
    color: var(--red);
    background: rgba(220, 38, 38, 0.08);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 10px;
    text-align: left;
}
.save-streak-submit {
    width: 100%;
    margin-top: 18px;
    min-height: 52px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
}
.save-streak-skip {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.save-streak-skip:hover {
    color: var(--text);
}

/* ─────────────────────────────────────────────────────
   Personalization: welcome, stats row, adaptive nudge
   ───────────────────────────────────────────────────── */
.welcome-message {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    margin: 0 0 12px;
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(34,197,94,0.04));
    border-left: 3px solid var(--navy, #1e3a8a);
    border-radius: 6px;
}
.welcome-greeting {
    font-size: 14px;
    font-weight: 600;
    color: #000064;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.welcome-message .welcome-sub {
    font-size: 11px;
    color: #000064;
    font-weight: 500;
}
.welcome-message .welcome-prize {
    display: block;
    font-size: 10px;
    color: #000064;
    font-weight: 600;
    margin-top: 4px;
    opacity: 0.75;
}
/* Pending Double-or-Nothing line in the greeting panel — brand navy
   background with white text so the stakes stand out crisply and the
   element reads as a first-class brand callout rather than an amber
   warning. Replaces the old standalone don-pending-banner. */
.welcome-message .welcome-don {
    display: block;
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    background: #000064;
    padding: 8px 10px;
    margin-top: 6px;
    border-radius: 4px;
    line-height: 1.4;
}
.welcome-message .welcome-don strong {
    color: #fff;
    font-weight: 700;
}
.welcome-tier {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    padding: 2px 7px;
    border-radius: 10px;
}

.personal-stats-row {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
}
.personal-stats-row .ps-cell {
    flex: 1;
    background: var(--card-bg, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 8px 4px;
    text-align: center;
}
.personal-stats-row .ps-num {
    font-size: 16px;
    font-weight: 700;
    color: var(--text, #111827);
    line-height: 1.1;
}
.personal-stats-row .ps-lbl {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-faint, #6b7280);
    margin-top: 2px;
}

.adaptive-nudge {
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #111827);
    background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(234,179,8,0.04));
    border-left: 3px solid #eab308;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 0 12px;
}
/* When rendered inside the user card (side panel), use tighter spacing
   and center-align so it reads naturally above the tier progress bar. */
.user-card .adaptive-nudge {
    margin: 10px 0 0;
    text-align: center;
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────
   Leaderboard callouts + community beat line
   ───────────────────────────────────────────────────── */
.lb-callouts {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lb-callout {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border, #e5e7eb);
}
.lb-callout-up {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.3);
    color: #166534;
}
.lb-callout-target {
    background: rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.3);
    color: #1e3a8a;
}

.result-community-beat {
    font-size: 13px;
    font-weight: 600;
    color: #166534;
    background: rgba(34,197,94,0.1);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 10px 0 0;
    text-align: center;
}

/* Logo watermark behind ticker card — removed.
   Kept position:relative so any descendants with position:absolute
   (e.g. the existing sparkline / info-tip) still anchor correctly. */
.ticker-display {
    position: relative;
}

/* ─────────────────────────────────────────────────────
   Result screen logo celebration burst
   ───────────────────────────────────────────────────── */
.result-logo-burst {
    position: relative;
    width: 100%;
    height: 0;
    pointer-events: none;
    overflow: visible;
}
.result-logo-burst::before {
    content: 'TICKERONE';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%) scale(0.6);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--navy, #1e3a8a);
    opacity: 0;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(30,58,138,0.35);
}
.result-logo-burst.burst-animate::before {
    animation: mdBurst 1.8s ease-out forwards;
}
@keyframes mdBurst {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    60%  { opacity: 1; transform: translate(-50%, -80%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -140%) scale(0.95); }
}

/* ── Winners page link ── */
.winners-page-link {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--navy);
    text-decoration: none;
    padding: 8px 0 2px;
    opacity: 0.7;
}
.winners-page-link:hover { opacity: 1; text-decoration: underline; }

/* ── Empty State Art (#20) ── */
.empty-state {
    text-align: center;
    padding: 24px 16px;
}
.empty-state-icon {
    font-size: 48px;
    margin-bottom: 8px;
    opacity: 0.7;
    animation: emptyBob 3s ease-in-out infinite;
}
.empty-state-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}
@keyframes emptyBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ── Share-a-Call Bar (#18) ── */
.share-call-bar {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    animation: fadeSlideUp 0.4s ease-out;
}
.btn-share {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--navy);
    color: #fff;
    border: none; border-radius: 20px;
    padding: 10px 20px;
    font-size: 13px; font-weight: 600;
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}
.btn-share:active { transform: scale(0.96); }
.share-icon { font-size: 16px; }
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Confidence Breakdown Chart ── */
.conf-breakdown { display: flex; flex-direction: column; gap: 10px; }
.conf-row { display: flex; flex-direction: column; gap: 3px; }
.conf-header { display: flex; justify-content: space-between; align-items: center; }
.conf-label { font-size: 12px; font-weight: 600; color: var(--text); }
.conf-games { font-size: 10px; color: var(--text-faint); }
.conf-bar-container {
    width: 100%; height: 10px; background: var(--overlay);
    border-radius: 5px; overflow: hidden;
}
.conf-bar {
    height: 100%; border-radius: 5px;
    transition: width 0.6s ease-out;
    min-width: 2px;
}
.conf-stats {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--text-muted);
}
.conf-winrate { font-weight: 600; }
.conf-avg { color: var(--text-faint); }
.conf-insight {
    margin-top: 6px; padding: 8px 10px;
    background: var(--accent-light); border-radius: 6px;
    font-size: 11px; color: var(--text-muted); text-align: center;
}

/* ── Invite a Friend Card ── */
.invite-friend-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #000064 0%, #1a1a8e 100%);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0,0,100,0.15);
}
.invite-friend-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.invite-friend-headline {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
}
.invite-friend-detail {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    line-height: 1.3;
}
.invite-friend-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px !important;
    font-weight: 600;
    padding: 8px 14px !important;
    background: #fff !important;
    color: var(--navy) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
/* v2.2.3 — iOS sticky-hover fix. The previous unguarded :hover made
 * the first tap on iOS apply hover state without firing click, so the
 * user had to tap twice to open the referral hub from the Today's
 * Call card. Wrapped in the same media query as the rest of the v2.1.3
 * sticky-hover fixes. */
@media (hover: hover) and (pointer: fine) {
    .invite-friend-btn:hover { opacity: 0.85; }
}
.invite-friend-btn:active { opacity: 0.85; }
.invite-friend-btn svg { flex-shrink: 0; stroke: var(--navy); }
/* v2.2.3 — Whole-card click target. Smoke feedback: users tapped the
 * headline expecting to navigate. Card is now button-like; the inner
 * button stays as the visual CTA. */
.invite-friend-card {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255,255,255,0.08);
}
.invite-friend-card:active {
    transform: scale(0.99);
    transition: transform 120ms ease;
}

/* ── Share Modal ── */
.share-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; padding: 16px;
}
.share-modal {
    background: var(--bg, #fff);
    border-radius: 12px;
    max-width: 420px; width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}
.share-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px 12px;
    font-size: 16px; font-weight: 700; color: var(--navy);
}
.share-modal-close {
    background: none; border: none; font-size: 22px;
    color: var(--text-muted); cursor: pointer; padding: 0 4px;
    line-height: 1;
}
.share-modal-close:hover { color: var(--text); }
.share-modal-desc {
    padding: 0 20px 14px;
    font-size: 13px; color: var(--text-muted); line-height: 1.4;
}
.share-modal-link-row {
    display: flex; gap: 8px;
    padding: 0 20px 20px;
}
.share-modal-input {
    flex: 1; padding: 10px 12px;
    font-size: 12px; font-family: monospace;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-alt, #f9fafb); color: var(--text);
    outline: none; min-width: 0;
}
.share-modal-input:focus { border-color: var(--navy); }
.share-modal-copy-btn {
    padding: 10px 18px !important;
    font-size: 13px !important; font-weight: 600;
    background: var(--navy) !important; color: #fff !important;
    border: none !important; border-radius: 6px !important;
    cursor: pointer; white-space: nowrap;
    transition: background .15s;
}
.share-modal-copy-btn:hover { opacity: 0.85; }

/* ── Friends Add Section ── */
.friends-add-section {
    display: flex; flex-direction: column; gap: 10px;
    align-items: stretch; padding: 8px 8px 4px;
}
.friends-search-wrap {
    position: relative;
}
.friends-search-wrap .save-streak-input {
    width: 100%; margin: 0; font-size: 13px; padding: 10px 12px;
    box-sizing: border-box;
}
.friends-share-btn {
    font-size: 12px !important; padding: 6px 14px !important;
    background: none !important; border: 1px solid var(--border) !important;
    color: var(--text-muted) !important; font-weight: 500;
    border-radius: var(--radius) !important;
}
.friends-share-btn:hover {
    background: var(--accent-light) !important; color: var(--navy) !important;
}
.friend-search-results {
    background: var(--bg, #fff); border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 180px; overflow-y: auto;
    margin-top: -1px;
}
.friend-search-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.friend-search-row:last-child { border-bottom: none; }
.friend-search-name { font-weight: 600; color: var(--text); }
.friend-search-add {
    font-size: 11px !important; padding: 4px 10px !important;
    border-radius: 4px;
}
.friend-search-added {
    font-size: 10px; color: var(--text-faint); font-style: italic;
}
.friend-search-empty {
    padding: 10px; font-size: 11px; color: var(--text-faint); text-align: center;
}
.friend-search-pending {
    font-size: 10px; color: var(--orange, #f59e0b); font-style: italic;
}

/* ── Friend Requests Section ── */
.friend-requests-section {
    margin-bottom: 12px; border: 1px solid var(--accent-light, #e0e7ff);
    border-radius: var(--radius); overflow: hidden;
    background: var(--bg, #fff);
}
.friend-requests-header {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--accent, #4f46e5);
    padding: 8px 12px; background: var(--accent-light, #e0e7ff);
}
.friend-request-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.friend-request-row:last-child { border-bottom: none; }
.friend-request-name { font-weight: 600; color: var(--text); }
.friend-request-actions { display: flex; gap: 6px; }
.friend-accept-btn {
    font-size: 11px !important; padding: 4px 12px !important;
    border-radius: 4px; background: var(--green, #10b981) !important;
    color: #fff !important; border: none; cursor: pointer;
}
.friend-accept-btn:hover { opacity: 0.85; }
.friend-decline-btn {
    font-size: 11px !important; padding: 4px 10px !important;
    border-radius: 4px; background: transparent !important;
    color: var(--text-faint) !important; border: 1px solid var(--border) !important;
    cursor: pointer;
}
.friend-decline-btn:hover { background: var(--border) !important; }

/* ══════════════════════════════════════════════
   TRASH TALK (Tier 1: curated taunts & reactions)
   ══════════════════════════════════════════════ */
.trash-talk-section {
    margin-top: 16px; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    background: var(--bg, #fff);
}
.trash-talk-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; background: var(--bg-alt, #f8f9fa);
    border-bottom: 1px solid var(--border);
}
.trash-talk-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text);
}
.trash-talk-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--red, #ef4444);
    color: #fff; font-size: 10px; font-weight: 700;
}
.trash-talk-inbox { padding: 0; }
.tt-msg {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid var(--border);
    font-size: 12px; color: var(--text);
    transition: background 0.2s;
}
.tt-msg:last-child { border-bottom: none; }
.tt-unread { background: rgba(79, 70, 229, 0.06); }
.tt-emoji { font-size: 18px; flex-shrink: 0; }
.tt-body { line-height: 1.3; }
.tt-body strong { color: var(--accent, #4f46e5); }

.tt-send-label {
    padding: 8px 12px 4px; font-size: 11px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.04em; border-top: 1px solid var(--border);
}
.tt-friends-list { padding: 0 8px 8px; }
.tt-friend-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 4px; border-bottom: 1px solid var(--border);
}
.tt-friend-row:last-child { border-bottom: none; }
.tt-friend-name {
    font-size: 12px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100px;
}
.tt-friend-call { font-size: 10px; }
.tt-maxed {
    font-size: 10px; color: var(--text-faint); font-style: italic;
}
.tt-msg-picker {
    display: flex; gap: 2px; flex-wrap: wrap;
}
.tt-pick {
    width: 32px; height: 32px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--bg, #fff);
    font-size: 16px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: transform 0.1s, background 0.15s;
}
.tt-pick:hover { transform: scale(1.15); background: var(--accent-light, #e0e7ff); }
.tt-pick:active { transform: scale(0.95); }
.tt-pick:disabled { opacity: 0.4; cursor: default; transform: none; }
.tt-pick.lb-icon-tip::after {
    white-space: normal; width: max-content; max-width: 160px;
    text-align: center; font-size: 10px;
}

/* ── Taunt Popup (in-game notification) ── */
.taunt-popup {
    position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
    z-index: 10000;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; min-width: 260px; max-width: 360px;
    background: var(--surface, #fff);
    border: 2px solid var(--accent, #4f46e5);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.25), 0 2px 8px rgba(0,0,0,0.1);
    transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
    opacity: 0;
}
.taunt-popup-visible {
    top: 20px; opacity: 1;
}
@supports (top: env(safe-area-inset-top)) {
    .taunt-popup-visible {
        top: calc(env(safe-area-inset-top, 0px) + 12px);
    }
}
.taunt-popup-exit {
    top: -100px; opacity: 0;
    transition: top 0.35s ease-in, opacity 0.25s;
}
.taunt-popup-emoji {
    font-size: 36px; flex-shrink: 0;
    animation: tauntBounce 0.5s ease 0.3s both;
}
@keyframes tauntBounce {
    0% { transform: scale(0.3) rotate(-10deg); }
    50% { transform: scale(1.3) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}
.taunt-popup-body { flex: 1; min-width: 0; }
.taunt-popup-sender {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--accent, #4f46e5);
    margin-bottom: 2px;
}
.taunt-popup-text {
    font-size: 15px; font-weight: 600; color: var(--text);
    line-height: 1.3;
}

/* ══════════════════════════════════════════════
   POST-PREDICTION ENGAGEMENT FEATURES
   ══════════════════════════════════════════════ */

/* ── Live Status Bar ── */
.live-status-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; margin: 8px 0;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    transition: background 0.3s, color 0.3s;
}
.live-status-bar.status-winning {
    background: rgba(34, 197, 94, 0.12); color: var(--green);
}
.live-status-bar.status-losing {
    background: rgba(239, 68, 68, 0.1); color: var(--red);
}
.live-status-bar.status-flat {
    background: rgba(100, 116, 139, 0.1); color: var(--text-muted);
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor;
    animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.live-status-text { flex: 1; }

/* ── Enhanced Sentiment Dashboard ── */
.sentiment-dashboard {
    margin: 8px 0; padding: 0;
}
.sentiment-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; font-size: 12px; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.sentiment-row:last-child { border-bottom: none; }
#sentiment-weighted {
    display: block; text-align: center; border-bottom: none;
    margin: 12px 0 4px;
}
.sentiment-label { font-weight: 500; color: var(--text-secondary); min-width: 90px; }
.sentiment-bar-wrap {
    flex: 1; height: 6px; background: var(--border); border-radius: 3px;
    margin: 0 10px; overflow: hidden;
}
.sentiment-bar-fill {
    height: 100%; border-radius: 3px; transition: width 0.5s ease;
}
.sentiment-bar-fill.fill-up { background: var(--green); }
.sentiment-bar-fill.fill-down { background: var(--red); }
.sentiment-value { font-weight: 600; min-width: 42px; text-align: right; }
.sentiment-value.val-up { color: var(--green); }
.sentiment-value.val-down { color: var(--red); }

/* ── Leaderboard Movement ── */
.leaderboard-movement {
    margin: 12px 0; padding: 12px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border);
}
.engagement-header {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px;
}
.rank-change-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.rank-big { font-size: 28px; font-weight: 800; color: var(--navy); }
.rank-delta {
    font-size: 13px; font-weight: 600; padding: 2px 8px;
    border-radius: 12px;
}
.rank-delta.delta-up { color: var(--green); background: rgba(34, 197, 94, 0.12); }
.rank-delta.delta-down { color: var(--red); background: rgba(239, 68, 68, 0.1); }
.rank-delta.delta-same { color: var(--text-muted); background: var(--border); }
.rank-of { font-size: 12px; color: var(--text-muted); }

.top-movers { margin-top: 8px; }
.top-movers-title {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px;
}
.mover-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 0; font-size: 12px;
}
.mover-row.mover-you { font-weight: 700; color: var(--navy); }
.mover-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover-rank { min-width: 28px; text-align: center; font-weight: 600; }
.mover-change { min-width: 36px; text-align: right; font-size: 11px; font-weight: 600; }
.mover-change.change-up { color: var(--green); }
.mover-change.change-down { color: var(--red); }

/* ── Market Commentary Feed ── */
.commentary-feed {
    margin: 12px 0; padding: 12px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border);
}
.commentary-list {
    max-height: 260px; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.commentary-list::-webkit-scrollbar { width: 4px; display: block; }
.commentary-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.commentary-list::-webkit-scrollbar-track { background: transparent; }
.commentary-entry {
    padding: 6px 0; border-bottom: 1px solid var(--border);
    animation: commentarySlideIn 0.3s ease-out;
}
.commentary-entry:last-child { border-bottom: none; }
@keyframes commentarySlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.commentary-time {
    font-size: 10px; color: var(--text-faint); font-weight: 500;
}
.commentary-text {
    font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin-top: 2px;
}
.commentary-empty {
    font-size: 12px; color: var(--text-faint); text-align: center; padding: 16px 0;
}

/* ── Insights Button ── */
.btn-insights {
    width: 100%; padding: 10px; margin: 8px 0;
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: 8px; color: var(--navy); font-weight: 600;
    font-size: 13px; cursor: pointer; transition: all 0.2s;
}
/* v2.1.3 — iOS sticky-hover fix. Scoping hover styles to devices
 * that actually have a hover-capable pointer means the first tap on
 * touch devices fires `click` immediately instead of being absorbed
 * by a "show hover, defer click" handshake (the symptom: button
 * appears to need two taps to open its popup). */
@media (hover: hover) and (pointer: fine) {
    .btn-insights:hover {
        background: var(--navy); color: #fff; border-style: solid;
    }
}

/* ── Insights Overlay ── */
.insights-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 5000;
    display: flex; align-items: flex-end; justify-content: center;
}
.insights-overlay.hidden { display: none; }
.insights-panel {
    background: var(--bg, #fff); border-radius: 16px 16px 0 0;
    width: 100%; max-width: 480px;
    min-height: 40vh; max-height: 85vh;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: insightsSlideUp 0.3s ease-out;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
}
/* Always show the insights header + close button (all screen sizes) */
.insights-panel .insights-header {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 5;
    background: var(--bg, #fff);
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
}
.insights-panel .insights-header-title {
    font-family: 'Raleway', sans-serif;
    font-size: 16px; font-weight: 700;
    letter-spacing: 0.5px; color: var(--navy);
}
.insights-panel .insights-close-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--border-light, #eee); color: var(--text-muted);
    border: none; font-size: 18px; line-height: 1;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.insights-panel .insights-close-btn:hover { background: var(--border); }
@keyframes insightsSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.insights-content { padding: 0 16px 24px; }
.insights-loading {
    text-align: center; padding: 40px 0;
    color: var(--text-muted); font-size: 14px;
}

/* Insight headlines */
.insight-headlines {
    margin-bottom: 16px;
}
.insight-headline {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px; margin-bottom: 6px;
    background: rgba(0, 0, 100, 0.04); border-radius: 8px;
    font-size: 13px; color: var(--text-primary); line-height: 1.4;
}
.insight-headline::before {
    content: '💡'; flex-shrink: 0;
}

/* Day-of-week heatmap */
.insights-section {
    margin-bottom: 16px;
}
.insights-section-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px;
}
.heatmap-row {
    display: flex; gap: 4px;
}
.heatmap-cell {
    flex: 1; text-align: center; padding: 10px 4px;
    border-radius: 8px; font-weight: 700;
}
.heatmap-day {
    font-size: 10px; font-weight: 600; color: inherit; opacity: 0.8;
    display: block; margin-bottom: 2px;
}
.heatmap-rate {
    font-size: 16px; display: block;
}
.heatmap-games {
    font-size: 9px; opacity: 0.7; display: block; margin-top: 1px;
}
.heatmap-cell.heat-hot { background: rgba(34, 197, 94, 0.2); color: var(--green); }
.heatmap-cell.heat-warm { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.heatmap-cell.heat-neutral { background: var(--border); color: var(--text-muted); }
.heatmap-cell.heat-cool { background: rgba(245, 158, 11, 0.1); color: var(--orange); }
.heatmap-cell.heat-cold { background: rgba(239, 68, 68, 0.1); color: var(--red); }
.heatmap-cell.heat-none { background: var(--surface); color: var(--text-faint); }

/* Sector bars */
.sector-bar-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
}
.sector-name { font-size: 12px; min-width: 80px; color: var(--text-secondary); font-weight: 500; }
.sector-bar-track {
    flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden;
}
.sector-bar-fill {
    height: 100%; border-radius: 4px; transition: width 0.5s ease;
}
.sector-bar-fill.bar-good { background: var(--green); }
.sector-bar-fill.bar-ok { background: var(--orange); }
.sector-bar-fill.bar-bad { background: var(--red); }
.sector-stats {
    font-size: 11px; min-width: 70px; text-align: right; color: var(--text-muted);
}

/* Confidence cards */
.confidence-cards {
    display: flex; gap: 8px;
}
.conf-card {
    flex: 1; padding: 10px; border-radius: 8px; text-align: center;
    background: var(--surface); border: 1px solid var(--border);
}
.conf-card-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; margin-bottom: 4px;
}
.conf-card-rate {
    font-size: 22px; font-weight: 800;
}
.conf-card-meta {
    font-size: 10px; color: var(--text-muted); margin-top: 2px;
}

/* ── Welcome Screen ── */
.welcome-screen {
    position: fixed; inset: 0; z-index: 9998;
    background: linear-gradient(160deg, #000064 0%, #1a1a8e 50%, #000064 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.welcome-inner {
    text-align: center; max-width: 340px; width: 100%;
}
.welcome-logo {
    width: 80px; height: 80px; border-radius: 18px; margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.welcome-title {
    font-size: 28px; font-weight: 800; color: #fff; letter-spacing: 0.5px; margin-bottom: 8px;
}
.welcome-sub {
    font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.5; margin-bottom: 32px;
}
.welcome-auth-buttons {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px;
}
.welcome-btn {
    width: 100%; padding: 14px 20px; border-radius: 10px; font-size: 15px;
    font-weight: 600; border: none; cursor: pointer; display: flex;
    align-items: center; justify-content: center; gap: 4px;
    transition: transform 0.1s, opacity 0.15s;
}
.welcome-btn:active { transform: scale(0.97); }
.welcome-btn-apple {
    background: #fff; color: #000;
}
.welcome-btn-google {
    background: #fff; color: #333;
}
.welcome-btn-email {
    background: rgba(255,255,255,0.15); color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}
.welcome-btn-lw {
    background: linear-gradient(135deg, #000064, #3b82f6);
    color: #fff; font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,100,0.35);
}
.welcome-btn-lw:hover { opacity: 0.92; }
.welcome-auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 12px 0 4px; color: rgba(255,255,255,0.45);
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
}
.welcome-auth-divider::before,
.welcome-auth-divider::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(255,255,255,0.15);
}
.welcome-skip {
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 14px; cursor: pointer; padding: 8px 16px;
    text-decoration: underline; text-underline-offset: 3px;
}
.welcome-skip:hover { color: rgba(255,255,255,0.8); }
/* ── Legal Doc Modal (Terms / Privacy) ──
   In-app animated modal for viewing hosted legal pages. Replaces
   the external browser redirect so the user stays in context.
   Content is fetched from /terms.html or /privacy.html and its
   inner .container is injected into the modal body. */
.legal-doc-overlay {
    animation: legalOverlayIn 0.22s ease forwards;
}
.legal-doc-overlay.closing {
    animation: legalOverlayOut 0.18s ease forwards;
}
.legal-doc-modal {
    background: var(--surface, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: legalModalIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.legal-doc-overlay.closing .legal-doc-modal {
    animation: legalModalOut 0.18s ease forwards;
}
.legal-doc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #fff);
    flex-shrink: 0;
}
.legal-doc-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy, #000064);
    font-family: 'Raleway', sans-serif;
}
.legal-doc-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.legal-doc-close:hover {
    color: var(--text);
    background: rgba(0, 0, 0, 0.05);
}
.legal-doc-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.7;
}
/* Style the injected legal content to match the modal aesthetic
   rather than the standalone page's hero header */
.legal-doc-body h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy, #000064);
    margin-top: 20px;
    margin-bottom: 8px;
}
.legal-doc-body h2:first-child {
    margin-top: 0;
}
.legal-doc-body h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy, #000064);
    margin-top: 14px;
    margin-bottom: 6px;
}
.legal-doc-body p,
.legal-doc-body ul {
    margin-bottom: 12px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
}
.legal-doc-body ul {
    padding-left: 20px;
}
.legal-doc-body li {
    margin-bottom: 4px;
}
.legal-doc-body a {
    color: var(--navy, #000064);
    font-weight: 600;
}
.legal-doc-body .effective-date {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.legal-doc-body .highlight-box {
    background: rgba(0, 0, 100, 0.04);
    border-left: 3px solid var(--navy, #000064);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin: 14px 0;
    font-size: 12px;
}
.legal-doc-body .highlight-box p {
    margin-bottom: 0;
    font-size: 12px;
}
/* Loading spinner shown while the fetch is in flight */
.legal-doc-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.legal-doc-loading p {
    font-size: 12px;
    margin: 12px 0 0;
}
.legal-doc-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border, #e5e7eb);
    border-top-color: var(--navy, #000064);
    border-radius: 50%;
    animation: legalSpinnerRotate 0.8s linear infinite;
    margin: 0 auto;
}
@keyframes legalOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes legalOverlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes legalModalIn {
    0%   { opacity: 0; transform: scale(0.9) translateY(-20px); }
    60%  { opacity: 1; transform: scale(1.02) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes legalModalOut {
    0%   { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(0.94) translateY(-10px); }
}
@keyframes legalSpinnerRotate {
    to { transform: rotate(360deg); }
}
/* Dark-mode text contrast on the injected content */
[data-theme="dark"] .legal-doc-body .highlight-box {
    background: rgba(255, 255, 255, 0.05);
}

/* ── First-Call Celebration ──
   Fires exactly once per install when the user locks in their
   first-ever prediction. Visual goal: feel bigger than the regular
   save-streak prompt, smaller than a wildcard reveal. Spring-in
   animation with a confetti burst; navy branding throughout. */
.first-call-overlay {
    animation: firstCallOverlayIn 0.3s ease forwards;
}
.first-call-popup {
    text-align: center;
    max-width: 380px;
    padding: 28px 24px 20px;
    animation: firstCallPopupIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center;
}
.first-call-emoji {
    font-size: 56px;
    margin-bottom: 8px;
    display: inline-block;
    animation: firstCallEmojiPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.first-call-title {
    font-size: 22px !important;
    color: var(--navy) !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}
.first-call-body {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    margin: 6px 0;
}
.first-call-body.first-call-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 16px;
}
.first-call-tip {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    padding: 10px 12px;
    background: rgba(0, 0, 100, 0.04);
    border-left: 3px solid var(--navy);
    border-radius: 0 6px 6px 0;
    margin: 8px 0 16px;
}
.first-call-tip-emoji {
    font-size: 22px;
    line-height: 1;
    padding-top: 1px;
}
.first-call-tip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 3px;
}
.first-call-tip-body {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}
.first-call-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 6px !important;
}
.first-call-actions .btn {
    flex: 1;
    font-size: 13px !important;
    padding: 10px 14px !important;
}
@keyframes firstCallOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes firstCallPopupIn {
    0%   { opacity: 0; transform: scale(0.7) translateY(20px); }
    60%  { opacity: 1; transform: scale(1.04) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes firstCallEmojiPop {
    0%   { transform: scale(0) rotate(-30deg); }
    60%  { transform: scale(1.3) rotate(15deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Legal disclosure on the welcome screen — required by App Store
   guideline 5.1.1. Keep it low-key but legible against the navy
   background. */
.welcome-legal {
    /* margin: top right|auto bottom left|auto — the auto horizontal
       margins centre the block inside its parent (text-align:center
       on the parent handles inline text only, not narrow block-level
       children with max-width). */
    margin: 20px auto 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    text-align: center;
    max-width: 300px;
}
.welcome-legal a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    font-weight: 600;
}
.welcome-legal a:hover {
    color: #fff;
}

/* ── Auth Modals (Login / Register) ── */
.auth-modal-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.5); display: flex;
    align-items: center; justify-content: center;
    padding: 16px; backdrop-filter: blur(4px);
}
.auth-modal-overlay.hidden { display: none; }
.auth-modal {
    background: var(--bg); border-radius: 14px; width: 100%;
    max-width: 380px; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    animation: authSlideUp 0.25s ease-out;
}
@keyframes authSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.auth-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.auth-modal-header h3 {
    font-size: 18px; font-weight: 700; color: var(--navy);
}
.auth-modal-close {
    background: none; border: none; font-size: 24px; color: var(--text-muted);
    cursor: pointer; padding: 0 4px; line-height: 1;
}
.auth-modal-body {
    padding: 20px;
}
.auth-label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 4px; margin-top: 12px;
}
.auth-label:first-child { margin-top: 0; }
.auth-input {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 15px; background: var(--bg);
    color: var(--text-primary); box-sizing: border-box;
    transition: border-color 0.15s;
}
.auth-input:focus {
    outline: none; border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(0,0,100,0.08);
}
.auth-password-wrapper {
    position: relative; width: 100%;
}
.auth-password-wrapper .auth-input {
    padding-right: 44px;
}
.auth-password-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--text-secondary); display: flex; align-items: center;
    justify-content: center; border-radius: 4px;
}
.auth-password-toggle:hover {
    color: var(--text-primary);
}
.auth-error {
    background: #fef2f2; color: #dc2626; font-size: 13px;
    padding: 8px 12px; border-radius: 6px; margin-top: 12px;
}
.auth-checkbox {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 14px; font-size: 12px; color: var(--text-secondary);
    cursor: pointer; line-height: 1.4;
}
.auth-checkbox input[type="checkbox"] { margin-top: 2px; }
.auth-modal-footer {
    text-align: center; margin-top: 16px; font-size: 13px;
}
.auth-link {
    background: none; border: none; color: var(--navy); cursor: pointer;
    font-size: 13px; text-decoration: underline; text-underline-offset: 2px;
    padding: 0;
}
.auth-divider { color: var(--text-muted); margin: 0 6px; }
.auth-social-divider {
    text-align: center; margin: 16px 0; position: relative;
    color: var(--text-muted); font-size: 12px;
}
.auth-social-divider::before,
.auth-social-divider::after {
    content: ''; position: absolute; top: 50%; width: 40%;
    height: 1px; background: var(--border);
}
.auth-social-divider::before { left: 0; }
.auth-social-divider::after { right: 0; }
.auth-social-btn {
    width: 100%; margin-bottom: 8px; padding: 10px 16px;
    font-size: 13px;
}
.auth-social-btn:last-child { margin-bottom: 0; }

/* Save streak auth buttons */
.save-streak-auth-buttons {
    display: flex; flex-direction: column; gap: 10px;
    margin: 16px 0;
}
.save-streak-auth-buttons .welcome-btn {
    padding: 12px 16px; font-size: 14px;
}

/* ── Wildcards ── */
.wildcard-deck {
    margin: 12px 0 8px;
    position: relative;
}
.wildcard-cards {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 4px 8px; -webkit-overflow-scrolling: touch;
}
/* Fade-out gradient on the right edge as a scroll affordance — shows
   users there's more content off-screen. Pointer-events:none so it
   doesn't block taps on the cards beneath. */
.wildcard-deck::after {
    content: '';
    position: absolute;
    top: 36px; right: 0; bottom: 8px;
    width: 32px;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--bg, #fff) 100%);
    pointer-events: none;
    border-radius: 0 12px 12px 0;
}
.wildcard-card {
    flex: 0 0 auto; width: 140px; scroll-snap-align: start;
    border: 2px solid var(--border); border-radius: 12px;
    padding: 12px 10px; text-align: center; cursor: pointer;
    background: linear-gradient(135deg, #fff 0%, #f8f6ff 100%);
    transition: all 0.25s ease; position: relative;
    box-shadow: 0 2px 8px rgba(0,0,100,0.08);
}
.wildcard-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,100,0.15); }
.wildcard-card.available {
    border-color: #c9a227; animation: wc-pulse 2s ease-in-out infinite;
}
.wildcard-card.activated {
    border-color: #16a34a; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    box-shadow: 0 0 12px rgba(22,163,74,0.3);
}
.wildcard-card.activated::after {
    content: 'ACTIVE ✓'; position: absolute; top: -8px; right: -4px;
    background: #16a34a; color: #fff; font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 8px; letter-spacing: 0.5px;
}
.wildcard-card.used {
    opacity: 0.4; pointer-events: none; border-color: #ddd;
    background: #f5f5f5;
}
.wildcard-card.used::after {
    content: 'USED'; position: absolute; top: -8px; right: -4px;
    background: #999; color: #fff; font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 8px;
}
@keyframes wc-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(201,162,39,0.15); }
    50% { box-shadow: 0 2px 16px rgba(201,162,39,0.4); }
}
.wildcard-card-icon { font-size: 28px; margin-bottom: 4px; }
.wildcard-card-title { font-size: 12px; font-weight: 700; color: var(--navy, #000064); margin-bottom: 2px; }
.wildcard-card-detail { font-size: 10px; color: var(--text-secondary); line-height: 1.3; }
.wildcard-card-expiry { font-size: 9px; color: #c9a227; font-weight: 600; margin-top: 6px; }
.wildcard-card-armed-badge {
    font-size: 9px; font-weight: 700; color: #16a34a;
    background: rgba(22,163,74,0.1); border-radius: 4px;
    padding: 3px 6px; margin-top: 6px; letter-spacing: 0.3px;
}

/* ── Second Chance panel (awaiting screen) ── */
.second-chance-panel {
    background: linear-gradient(135deg, #faf7ff 0%, #f1e9ff 100%);
    border: 1px solid #d4b6ff;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0;
    box-shadow: 0 2px 10px rgba(147,51,234,0.08);
}
.second-chance-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.second-chance-icon { font-size: 20px; }
.second-chance-title {
    font-size: 14px; font-weight: 700; color: #6b21a8; flex: 1;
}
.second-chance-pill {
    font-size: 10px; font-weight: 700; padding: 3px 8px;
    border-radius: 10px; letter-spacing: 0.5px; text-transform: uppercase;
}
.second-chance-pill.available { background: #dcfce7; color: #166534; }
.second-chance-pill.used { background: #e5e7eb; color: #6b7280; }
.second-chance-desc {
    font-size: 12px; color: var(--text-secondary);
    line-height: 1.4; margin: 0 0 12px 0;
}

/* ── Wildcard View popup — close button + reward text ── */
.wildcard-view-close {
    position: absolute; top: 8px; right: 12px; z-index: 10;
    background: rgba(0,0,0,0.05); border: none; color: var(--text-secondary);
    font-size: 24px; width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.wildcard-view-close:hover { background: rgba(0,0,0,0.1); color: var(--text); }
.wildcard-view-reward {
    font-size: 12px; color: var(--text-secondary); line-height: 1.5;
    margin: 12px 0; padding: 10px 14px; background: rgba(0,0,100,0.04);
    border-left: 3px solid var(--navy, #000064); border-radius: 6px;
    text-align: left;
}
.wildcard-empty {
    font-size: 11px; color: var(--text-secondary); font-style: italic;
    padding: 8px 0;
}
.wildcard-active-badge {
    margin-top: 8px; padding: 4px 10px; border-radius: 6px;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    color: #fff; font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
/* v2.2.1 — Locked-wildcard tile on the awaiting screen. Now includes a
 * brief description below the name; restructured from a single inline
 * pill into a small card. */
.wildcard-locked-badge {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
}
.wildcard-locked-badge-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.wildcard-locked-badge-icon { font-size: 18px; line-height: 1; }
.wildcard-locked-badge-desc {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.35;
}

/* Wildcard Reveal Popup */
/* Absolutely-positioned centering. Bulletproof against transformed
   ancestors (which would otherwise break position:fixed) by (a)
   portal-mounting the overlay to document.body at open time in JS,
   and (b) using top:50%/left:50% + translate(-50%,-50%) on the popup
   rather than flexbox, so centering doesn't depend on container sizing.
*/
/* v2.2.2 — Center the popup via flex on the overlay, not via
 * transform on the popup. The md-scale-in keyframe in redesign.css
 * animates `transform: scale(0.96 → 1)` on the popup; with the old
 * transform-centering it overrode the translate(-50%,-50%) during
 * the animation, flashing the card in the corner of the viewport
 * before settling. Flex centering is animation-safe. */
.wildcard-reveal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.wildcard-reveal-popup {
    position: relative;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.wildcard-reveal-popup {
    width: 260px; perspective: 1000px;
}
.wildcard-card-back, .wildcard-card-front {
    width: 260px; min-height: 360px; border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.wildcard-card-back {
    background: linear-gradient(135deg, #000064 0%, #1a1a8e 50%, #000064 100%);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease;
    border: 3px solid #c9a227;
}
.wildcard-card-back:hover { transform: scale(1.03); }
.wildcard-card-back:active { transform: scale(0.97); }
.wildcard-card-back-inner { text-align: center; color: #fff; }
.wildcard-card-back-pattern {
    font-size: 72px; margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    animation: wc-float 3s ease-in-out infinite;
}
@keyframes wc-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(3deg); }
}
.wildcard-card-back-text {
    font-size: 14px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: #c9a227;
    animation: wc-pulse-text 1.5s ease-in-out infinite;
}
@keyframes wc-pulse-text {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.wildcard-card-front {
    background: linear-gradient(135deg, #fff 0%, #f8f6ff 100%);
    border: 3px solid #c9a227; padding: 32px 24px;
    animation: wc-flip-in 0.6s ease-out;
    /* Anchor the rotation to the card's own centre so the flip looks
       balanced regardless of viewport size. */
    transform-origin: center center;
    backface-visibility: hidden;
}
@keyframes wc-flip-in {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0deg); opacity: 1; }
}

/* Exit flip — mirrors wc-flip-in going the other way. Triggered by
   JS adding .wc-closing to the overlay; animationend resolves the
   close callback. Inhibit the generic panelFadeOut so the backdrop
   doesn't vanish before the card finishes flipping. */
.wildcard-reveal-overlay.wc-closing {
    animation: wc-backdrop-fade 0.5s ease-in forwards;
    pointer-events: none;
}
.wildcard-reveal-overlay.wc-closing .wildcard-card-front {
    animation: wc-flip-out 0.5s ease-in forwards;
}
@keyframes wc-flip-out {
    0%   { transform: rotateY(0deg);  opacity: 1; }
    100% { transform: rotateY(-90deg); opacity: 0; }
}
@keyframes wc-backdrop-fade {
    0%   { opacity: 1; }
    60%  { opacity: 1; }       /* hold backdrop while card flips */
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wildcard-card-front,
    .wildcard-reveal-overlay.wc-closing .wildcard-card-front,
    .wildcard-reveal-overlay.wc-closing {
        animation: none;
    }
}
.wildcard-card-front-inner { text-align: center; }
.wildcard-card-front-inner .wildcard-card-icon { font-size: 56px; margin-bottom: 12px; }
.wildcard-card-front-inner .wildcard-card-name {
    font-size: 22px; font-weight: 800; color: var(--navy, #000064);
    margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;
}
.wildcard-card-front-inner .wildcard-card-desc {
    font-size: 13px; color: var(--text-secondary); line-height: 1.5;
    margin-bottom: 16px;
}
.wildcard-card-front-inner .wildcard-card-expires {
    font-size: 11px; color: #c9a227; font-weight: 600; margin-bottom: 20px;
}

/* Stacked deck effect */
.wildcard-cards .wildcard-card:nth-child(n+2) {
    margin-left: -4px;
}
.wildcard-cards:has(.wildcard-card:nth-child(2)) .wildcard-card {
    box-shadow: 0 2px 8px rgba(0,0,100,0.08), 2px 4px 0 -1px #f0f0f0, 4px 6px 0 -2px #e8e8e8;
}

/* ── UX #9: Results-screen cleanup ── */
.primary-post-actions {
    margin: 12px 0 16px;
}
.primary-post-actions .share-call-btn {
    font-size: 15px;
    font-weight: 700;
    padding: 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.results-more-details {
    margin: 16px 0 12px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: rgba(0,0,0,0.02);
    overflow: hidden;
}
.results-more-summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.results-more-summary::-webkit-details-marker { display: none; }
.results-more-summary::after {
    content: '\25BE';
    font-size: 12px;
    color: #888;
    transition: transform 0.2s ease;
}
.results-more-details[open] .results-more-summary::after {
    transform: rotate(180deg);
}
.results-more-body {
    padding: 4px 14px 12px;
}
/* Tuck achievements into a tighter block inside results */
#reveal-stage-4 #new-achievements:empty { display: none; }

/* ── UX #10: Awaiting screen tabs ── */
.awaiting-tabs {
    display: flex;
    gap: 4px;
    margin: 8px 0 14px;
    padding: 4px;
    background: rgba(0,0,0,0.04);
    border-radius: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.awaiting-tabs::-webkit-scrollbar { display: none; }
.awaiting-tab {
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.awaiting-tab:hover { color: #222; }
.awaiting-tab.active {
    background: #fff;
    color: #c9a227;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.awaiting-tab-content { min-height: 40px; }
.awaiting-social-empty { padding: 4px 0; }

/* Bonus-chip tooltips: match the leaderboard .lb-icon-tip style exactly —
   navy background, white text — regardless of what colour the underlying
   chip is. Override the default nowrap so multi-word explanations wrap
   onto multiple lines, and widen the popover for comfortable reading.
   No arrow, no "?" cursor — keeping it identical to leaderboard tips. */
.bonus-chip.lb-icon-tip {
    font-size: inherit; /* keep the chip's own 11px, don't inherit tip's 10px */
    margin-left: 0;
    cursor: pointer;
}
.bonus-chip.lb-icon-tip::after {
    /* The generic .bonus-chip::after rule above kills pseudo-elements
       with `display:none !important; content:none !important;` to
       disable the old animated corners. That blanket wipe also takes
       out the tooltip. Re-enable display + content with !important so
       the tooltip actually renders. */
    content: attr(data-tooltip) !important;
    display: block !important;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    /* Force navy/white even though the chip itself is amber/red/green. */
    background: var(--navy, #1e3a8a) !important;
    color: #fff !important;
    white-space: normal;
    max-width: 240px;
    width: max-content;
    line-height: 1.35;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 9999;
}
.bonus-chip.lb-icon-tip:hover::after,
.bonus-chip.lb-icon-tip.show-tooltip::after {
    opacity: 1;
}
/* Edge-anchoring so tooltips on the leftmost / rightmost chips don't
   get clipped by the card or viewport. First chip in a strip anchors
   its tooltip to its own left edge (extends rightward); last chip
   anchors to its right edge (extends leftward). Middle chips keep
   the centered default. */
.bonus-chip.lb-icon-tip:first-child::after {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}
.bonus-chip.lb-icon-tip:last-child::after {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}
/* On narrow screens (mobile, LW iframe on phone width), the centered
   default can still clip off the viewport left edge if the chip sits
   near the left side of the card. Force ALL bonus-chip tooltips to
   anchor against the chip's left edge + extend rightward, and clamp
   the width so the tooltip never exceeds the viewport width. The
   first-child/last-child rules above still win their specificity on
   wider screens where the layout has more room. */
@media (max-width: 600px) {
    .bonus-chip.lb-icon-tip::after {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        max-width: calc(100vw - 32px) !important;
    }
}
/* Make sure the parent strips and their card ancestors don't clip the
   tooltip via overflow:hidden. */
.bonus-strip,
.bonus-strip-secondary { overflow: visible !important; }
/* Explicitly cancel any ::before rule that might pin an arrow to the
   chip — earlier build shipped one, remove it so the tooltip looks
   identical to a leaderboard tip. */
.bonus-chip.lb-icon-tip::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

/* ── Predict-flow stepper ──
   Fixed to the top of the viewport so it floats above content
   regardless of scroll position. Earlier version used
   position:sticky which breaks inside iframe embeds (the stepper
   pins to the iframe's content, not the visible viewport).
   Five pills connected by thin lines. Each pill reflects one of
   three states: done / current / locked. Optional steps (3, 4)
   render with a dashed border + 'opt' tag so players don't feel
   required to engage with them. */
.predict-stepper {
    /* In-flow (not fixed/sticky). Inside the LW iframe the parent page
       owns the scroll, so neither sticky nor fixed can pin to the
       visible viewport — they scroll off with the iframe. Keep the
       stepper inline at the top of the predict section; section-state
       dimming handles guidance as the player moves down. */
    display: flex;
    align-items: center;
    /* Center on wide screens; on narrow screens (where content
       overflows) flex-start lets the user scroll naturally instead of
       having the leading pills clipped behind the centered overflow. */
    justify-content: center;
    gap: 0;
    padding: 10px 16px;
    margin: 0 -12px 12px;
    background: var(--surface, #fff);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.predict-stepper::-webkit-scrollbar { display: none; }
/* When content is wider than the container, switch to start-alignment
   so the user can scroll left-to-right to reveal pills. Width-based
   media query is the simplest way to tell the difference between
   "fits comfortably" and "needs scroll" since the 5 pills + labels
   total ~420px including connectors. */
@media (max-width: 480px) {
    .predict-stepper {
        justify-content: flex-start;
    }
    /* Hide text labels and 'opt' tags on narrow screens — pills shrink
       to numbered circles only. Section-state dimming below the
       stepper continues to communicate which step is active. */
    .predict-stepper .ps-label {
        display: none;
    }
    .predict-stepper .ps-opt-tag {
        display: none;
    }
    .predict-stepper .ps-pill {
        padding: 4px 4px;
    }
    .predict-stepper .ps-connector {
        flex: 0 0 10px;
    }
}

/* Spacer no longer needed — stepper is in-flow. Keep the class as a
   no-op so existing markup doesn't break. */
.predict-stepper-spacer {
    display: none;
}

.predict-stepper .ps-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.predict-stepper .ps-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}
.predict-stepper .ps-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.predict-stepper .ps-connector {
    flex: 0 0 14px;
    height: 1px;
    background: rgba(0,0,0,0.15);
    margin: 0 2px;
}

/* Visual states */
.predict-stepper .ps-pill.ps-done .ps-num {
    background: #16a34a;
    color: #fff;
    font-size: 0; /* hide the number digit so the ::before tick shows alone */
}
.predict-stepper .ps-pill.ps-done .ps-num::before {
    content: '\2713'; /* check mark */
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}
.predict-stepper .ps-pill.ps-done .ps-label {
    color: var(--text-muted);
}

.predict-stepper .ps-pill.ps-current .ps-num {
    background: var(--navy, #000064);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 100, 0.12);
}
.predict-stepper .ps-pill.ps-current .ps-label {
    color: var(--navy, #000064);
    font-weight: 700;
}

.predict-stepper .ps-pill.ps-locked .ps-num {
    background: transparent;
    color: var(--text-faint);
    border: 1.5px solid rgba(0, 0, 0, 0.15);
}
.predict-stepper .ps-pill.ps-locked .ps-label {
    color: var(--text-faint);
}

/* Optional steps (Wildcard) render with a dashed border
   and a tiny 'opt' tag next to their label. Makes the optionality
   obvious at a glance without cluttering the UI. */
.predict-stepper .ps-pill.ps-optional .ps-num {
    border-style: dashed;
    border-width: 1.5px;
}
/* For current-state optional pills, keep the solid fill (it's active
   right now) but still show the 'opt' tag. */
.predict-stepper .ps-pill.ps-optional.ps-current .ps-num {
    border-style: solid;
}
.predict-stepper .ps-pill .ps-opt-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-faint);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-radius: 3px;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.2;
}

/* Dashed connector line between optional and its neighbour, so the
   visual flow acknowledges 'you can skip this section'. */
.predict-stepper .ps-connector-dashed {
    background: none;
    border-top: 1px dashed rgba(0, 0, 0, 0.25);
    height: 0;
}

/* ── Predict-step section states ──
   Each step section (Direction, Confidence, Range, Wildcard, Lock-In)
   wraps in .predict-step with data-predict-step="N". The runtime
   toggles done / current / locked on each based on state.predictStep. */
.predict-step {
    transition: opacity 0.25s ease;
    scroll-margin-top: 70px; /* leave room for sticky stepper on scrollIntoView */
}
.predict-step.predict-step-locked {
    opacity: 0.45;
}
.predict-step.predict-step-done {
    opacity: 0.85;
}
.predict-step.predict-step-current {
    opacity: 1;
}
/* The Potential Payout panel is informational — always keep it at
   full opacity so players can see the running payout calculation
   while still on earlier steps. Sits inside step 5's wrapper but
   escapes the locked/done dimming. */
.predict-step .payout-potential {
    opacity: 1 !important;
}

/* ── Tour mode: disable stepper + step dimming ──
   When the onboarding tour is active (body.tour-active), the
   predict-flow stepper would overlap tour highlights at the top of
   the viewport, and step-opacity dimming would make targeted
   elements look faded under the tour's spotlight. Turn both off
   while the tour runs; they come back when completeTour fires. */
body.tour-active .predict-stepper,
body.tour-active .predict-stepper-spacer {
    display: none;
}
body.tour-active .predict-step,
body.tour-active .predict-step-done,
body.tour-active .predict-step-locked,
body.tour-active .predict-step-current {
    opacity: 1 !important;
}

/* ── Toolbar button tooltips ──
   Web-only toolbar buttons (Scoring?, Tour?, sound, theme, Log out)
   use a custom navy-blue / white tooltip instead of the default
   browser title= bubble. Matches the .lb-icon-tip pattern used
   elsewhere for brand consistency. Trigger: hover; position: below
   the button (tooltips above the toolbar would clip the iframe). */
.toolbar-tip {
    position: relative;
}
.toolbar-tip::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy, #000064);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 9999;
}
.toolbar-tip:hover::after,
.toolbar-tip:focus-visible::after {
    opacity: 1;
}
/* Small arrow pointing up to the button */
.toolbar-tip::before {
    content: '';
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--navy, #000064);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 9999;
}
.toolbar-tip:hover::before,
.toolbar-tip:focus-visible::before {
    opacity: 1;
}

/* Daily sign-in streak pill */
/* ── Daily sign-in streak pill ──
   Tiny status line under the prizes callout on the predict screen.
   Shows current day in the 7-day cycle, today's status (claimed /
   available / paused for weekend), and the lifetime total. Keeps
   users confident the bonus is actually accruing. */
.login-streak-pill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.08), rgba(0, 0, 100, 0.04));
    border: 1px solid rgba(201, 162, 39, 0.25);
    border-radius: 8px;
    font-size: 12px;
}
.login-streak-pill .lsp-day {
    font-weight: 700;
    color: var(--navy, #000064);
}
.login-streak-pill .lsp-earned {
    font-weight: 600;
    color: #16a34a; /* green — available or just-earned */
}
.login-streak-pill .lsp-earned.lsp-paused {
    color: var(--text-muted);
    font-weight: 500;
    font-style: italic;
}
.login-streak-pill .lsp-earned.lsp-available {
    color: #c9a227; /* gold — click to claim */
}
.login-streak-pill .lsp-total {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Price flash on movement ──
   Applied to .price-value and .ticker-tape-item when the price moves
   between polls. Green pulse for an uptick, red for a downtick. The
   animation auto-fades in ~0.8s and the JS removes the class shortly
   after so the next movement triggers a fresh pulse. */
@keyframes price-flash-up {
    0%   { background-color: rgba(34, 197, 94, 0.55); }
    40%  { background-color: rgba(34, 197, 94, 0.35); }
    100% { background-color: transparent; }
}
@keyframes price-flash-down {
    0%   { background-color: rgba(239, 68, 68, 0.55); }
    40%  { background-color: rgba(239, 68, 68, 0.35); }
    100% { background-color: transparent; }
}
.price-value.flash-up,
.ticker-tape-item.flash-up {
    animation: price-flash-up 0.8s ease-out;
    border-radius: 4px;
}
.price-value.flash-down,
.ticker-tape-item.flash-down {
    animation: price-flash-down 0.8s ease-out;
    border-radius: 4px;
}
/* Ticker tape items need a little padding around the flash so the
   highlight doesn't clip to the text baseline. */
.ticker-tape-item {
    transition: background-color 0.2s ease;
    padding: 2px 4px;
}
/* Respect users who have reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .price-value.flash-up, .price-value.flash-down,
    .ticker-tape-item.flash-up, .ticker-tape-item.flash-down {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026 — Layered design system from Market-Duel-SwiftUI-Handoff.md
   ──────────────────────────────────────────────────────────────────────────
   This block is additive and sits at the bottom of the file so it overrides
   the older brand variables and component rules above. It introduces the
   full token set from the SwiftUI handoff (colours, type scale, spacing,
   radii, motion) plus rule overrides for the components users see most:
   the predict flow, result screen, leaderboard, and shared chrome.
   The older rules above are kept intact so JS contracts that style class
   names dynamically continue to function.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── 1.1 Colour palette — exact hex from the spec ── */
    --md-tia-navy:          #000064;
    --md-tia-red:           #FF0000;
    --md-tia-white:         #FFFFFF;
    --md-tia-light-blue:    #E6F2F7;

    --md-navy-950:          #00003A;
    --md-navy-800:          #1A1A78;
    --md-navy-200:          #D9D9EC;
    --md-navy-100:          #ECECF5;
    --md-navy-50:           #F5F5FA;

    --md-red-700:           #B30000;
    --md-red-100:           #FFE6E6;

    --md-grey-900:          #1C1C2E;
    --md-grey-500:          #6B6B82;
    --md-grey-400:          #8E8EA3;
    --md-grey-300:          #C4C4D1;
    --md-grey-200:          #E2E2EA;
    --md-grey-100:          #F1F1F5;

    /* Brand red and loss red are different — don't conflate */
    --md-positive:          #0F8A5F;
    --md-positive-soft:     #E3F5EC;
    --md-negative:          #C5172E;
    --md-negative-soft:     #FBEAED;

    --md-on-dark-positive:  #5FE3A4;
    --md-on-dark-negative:  #FF7A8A;

    /* ── 1.3 Spacing (4-pt grid) ── */
    --md-s0: 0;
    --md-s1: 4px;
    --md-s2: 8px;
    --md-s3: 12px;
    --md-s4: 16px;
    --md-s5: 20px;
    --md-s6: 24px;
    --md-s8: 32px;
    --md-s10: 40px;
    --md-s12: 48px;

    /* ── 1.4 Radii ── */
    --md-r-xs: 4px;
    --md-r-sm: 6px;
    --md-r-md: 10px;
    --md-r-lg: 16px;
    --md-r-xl: 24px;
    --md-r-pill: 999px;

    /* ── 1.5 Shadows — navy-tinted, subtle ── */
    --md-shadow-xs: 0 1px 1px rgba(0, 0, 100, 0.06);
    --md-shadow-sm: 0 2px 4px rgba(0, 0, 100, 0.06);
    --md-shadow-md: 0 8px 20px rgba(0, 0, 100, 0.08);

    /* ── 1.6 Motion ── */
    --md-dur-fast: 0.12s;
    --md-dur-base: 0.20s;
    --md-dur-slow: 0.32s;
    --md-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-ease-entrance: cubic-bezier(0,   0, 0, 1);
    --md-ease-exit:     cubic-bezier(0.3, 0, 1, 1);

    /* ── Font family stacks ──
       Poppins for display + headings + buttons + eyebrows.
       Raleway for body. IBM Plex Mono for numeric data
       (prices, percentages, points, timestamps). */
    --md-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --md-font-body:    'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
    --md-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── 1.2 Type scale utility classes ──
   Use as helpers: <span class="md-display-lg">…</span>
   Sizes/weights/tracking match the spec table. */
.md-display-lg { font-family: var(--md-font-display); font-weight: 700; font-size: 36px; line-height: 1.08; letter-spacing: -0.02em; }
.md-display-md { font-family: var(--md-font-display); font-weight: 700; font-size: 32px; line-height: 1.10; letter-spacing: -0.02em; }
.md-display-sm { font-family: var(--md-font-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.md-title-lg   { font-family: var(--md-font-display); font-weight: 600; font-size: 18px; line-height: 1.20; letter-spacing: -0.01em; }
.md-title-md   { font-family: var(--md-font-display); font-weight: 600; font-size: 16px; line-height: 1.20; }
.md-body-lg    { font-family: var(--md-font-body);    font-weight: 400; font-size: 15px; line-height: 1.45; }
.md-body-md    { font-family: var(--md-font-body);    font-weight: 300; font-size: 14px; line-height: 1.45; }
.md-body-sm    { font-family: var(--md-font-body);    font-weight: 400; font-size: 13px; line-height: 1.40; }
.md-caption    { font-family: var(--md-font-body);    font-weight: 400; font-size: 12px; line-height: 1.40; letter-spacing: 0.02em; }
.md-eyebrow    { font-family: var(--md-font-display); font-weight: 600; font-size: 11px; line-height: 1.20; letter-spacing: 0.18em; text-transform: uppercase; }
.md-eyebrow-sm { font-family: var(--md-font-display); font-weight: 600; font-size: 10px; line-height: 1.20; letter-spacing: 0.14em; text-transform: uppercase; }
.md-numeric-lg { font-family: var(--md-font-mono);    font-weight: 600; font-size: 32px; line-height: 1.10; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.md-numeric-md { font-family: var(--md-font-mono);    font-weight: 500; font-size: 16px; line-height: 1.20; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.md-numeric-sm { font-family: var(--md-font-mono);    font-weight: 500; font-size: 12px; line-height: 1.30; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* ── Body baseline shift to Raleway (was already Raleway, now confirmed) ── */
body, .game-area {
    font-family: var(--md-font-body);
    color: var(--md-grey-900);
    background: var(--md-tia-white);
}

/* Headings default to Poppins */
h1, h2, h3, h4, h5, h6,
.section-label, .panel-title, .mobile-panel-title {
    font-family: var(--md-font-display);
    color: var(--md-tia-navy);
    letter-spacing: -0.01em;
}

/* ── 2.6 Direction segmented buttons (Up / Down) ──
   Keep the existing .btn-direction class for JS compatibility, restyle to
   match the redesign's segmented control look: white default, positive-soft
   tint when up is selected, negative-soft tint when down is selected. */
.btn-direction {
    font-family: var(--md-font-display);
    font-weight: 600;
    font-size: 16px;
    border-radius: var(--md-r-md);
    border: 1px solid var(--md-grey-300);
    background: var(--md-tia-white);
    color: var(--md-grey-900);
    transition: background var(--md-dur-fast) var(--md-ease-standard),
                border-color var(--md-dur-fast) var(--md-ease-standard),
                color var(--md-dur-fast) var(--md-ease-standard),
                transform var(--md-dur-fast) var(--md-ease-standard);
}
.btn-direction:active { transform: scale(0.98); }

.btn-direction.btn-up.selected,
.btn-direction.btn-up.active {
    background: var(--md-positive-soft);
    border-color: var(--md-positive);
    color: var(--md-positive);
}
.btn-direction.btn-down.selected,
.btn-direction.btn-down.active {
    background: var(--md-negative-soft);
    border-color: var(--md-negative);
    color: var(--md-negative);
}

/* ── 2.6 Confidence segmented buttons ──
   Same component, navy-tinted active state. */
.btn-conf {
    font-family: var(--md-font-display);
    font-weight: 600;
    border-radius: var(--md-r-md);
    border: 1px solid var(--md-grey-300);
    background: var(--md-tia-white);
    color: var(--md-grey-900);
    transition: background var(--md-dur-fast) var(--md-ease-standard),
                border-color var(--md-dur-fast) var(--md-ease-standard),
                color var(--md-dur-fast) var(--md-ease-standard),
                transform var(--md-dur-fast) var(--md-ease-standard);
}
.btn-conf:active { transform: scale(0.98); }

.btn-conf.selected,
.btn-conf.active {
    background: var(--md-navy-50);
    border-color: var(--md-tia-navy);
    color: var(--md-tia-navy);
}

/* ── 2.7 Range chips (pill style, dim siblings on selection) ── */
.btn-range,
.btn-bracket {
    font-family: var(--md-font-body);
    font-weight: 500;
    font-size: 13px;
    border-radius: var(--md-r-pill);
    border: 1px solid var(--md-grey-300);
    background: var(--md-tia-white);
    color: var(--md-grey-900);
    transition: background var(--md-dur-fast) var(--md-ease-standard),
                color var(--md-dur-fast) var(--md-ease-standard),
                opacity var(--md-dur-fast) var(--md-ease-standard);
}
.btn-range.selected,
.btn-range.active,
.btn-bracket.selected,
.btn-bracket.active {
    background: var(--md-tia-navy);
    border-color: var(--md-tia-navy);
    color: var(--md-tia-white);
}
/* When any sibling chip is selected, dim the others */
.btn-range-row:has(.selected) .btn-range:not(.selected),
.btn-bracket-row:has(.selected) .btn-bracket:not(.selected) {
    opacity: 0.45;
}

/* ── 2.5 Ticket card (the predict card holding the rows) ── */
.predict-card,
.predict-stepper {
    background: var(--md-tia-white);
    border: 1px solid var(--md-grey-200);
    border-radius: var(--md-r-lg);
    box-shadow: var(--md-shadow-xs);
}

/* ── 2.8 Payout summary strip ── */
.payout-summary,
.predict-payout-summary,
.payout-strip {
    background: var(--md-navy-50);
    border-top: 1px solid var(--md-grey-200);
    padding: var(--md-s3) var(--md-s4);
    border-radius: 0 0 var(--md-r-lg) var(--md-r-lg);
}

/* ── Section labels (eyebrow-style row labels) ──
   Existing class .section-label gets redesign treatment. */
.section-label {
    font-family: var(--md-font-display);
    font-weight: 600;
    font-size: 11px;
    color: var(--md-grey-500);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ── 2.4 / Submit button — primary CTA ──
   Keep existing .btn-primary class, restyle to navy pill with refined
   typography. We don't add the swipe-to-lock interaction in this pass —
   that's a JS-side change for a follow-up. */
.btn-primary,
.btn-submit {
    font-family: var(--md-font-display);
    font-weight: 700;
    font-size: 16px;
    background: var(--md-tia-navy);
    color: var(--md-tia-white);
    border: none;
    border-radius: var(--md-r-pill);
    padding: 14px 24px;
    letter-spacing: 0.02em;
    transition: background var(--md-dur-fast) var(--md-ease-standard),
                transform var(--md-dur-fast) var(--md-ease-standard);
}
.btn-primary:active,
.btn-submit:active {
    background: var(--md-navy-950);
    transform: scale(0.99);
}
.btn-primary:disabled,
.btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Cards (universal) ──
   The redesign uses a consistent card vocabulary: white bg, hairline
   border, lg radius, subtle shadow on hover only. */
.panel-card,
.leaderboard-card,
.user-card,
.rival-card,
.sidebar-clock,
.past-winners-card,
.prize-banner-card,
.streak-card,
.predict-card {
    background: var(--md-tia-white);
    border: 1px solid var(--md-grey-200);
    border-radius: var(--md-r-lg);
    box-shadow: var(--md-shadow-xs);
}

/* ── Leaderboard rows — tighter type, mono scores ── */
.leaderboard-row {
    border-bottom: 1px solid var(--md-grey-200);
    padding: var(--md-s3) 0;
    font-family: var(--md-font-body);
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row .rank,
.leaderboard-row .leaderboard-rank {
    font-family: var(--md-font-display);
    font-weight: 700;
    color: var(--md-grey-500);
    width: 40px;
}
.leaderboard-row .rank-1 .leaderboard-rank,
.leaderboard-row.rank-1 .leaderboard-rank,
.leaderboard-row .rank-2 .leaderboard-rank,
.leaderboard-row.rank-2 .leaderboard-rank,
.leaderboard-row .rank-3 .leaderboard-rank,
.leaderboard-row.rank-3 .leaderboard-rank {
    color: var(--md-tia-red);
}
.leaderboard-row .points,
.leaderboard-row .leaderboard-points {
    font-family: var(--md-font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--md-tia-navy);
}
.leaderboard-row.is-current-user,
.leaderboard-row.you-row {
    background: var(--md-navy-50);
    margin-left: calc(-1 * var(--md-s4));
    margin-right: calc(-1 * var(--md-s4));
    padding-left: var(--md-s4);
    padding-right: var(--md-s4);
}
.leaderboard-row.is-current-user .leaderboard-name,
.leaderboard-row.you-row .leaderboard-name {
    color: var(--md-tia-navy);
    font-weight: 700;
}

/* ── Streak pill ── */
.streak-pill {
    background: var(--md-navy-50);
    border-radius: var(--md-r-pill);
    padding: 6px 14px;
    font-family: var(--md-font-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--md-tia-navy);
    letter-spacing: 0.04em;
}

/* ── Result hero (win) ── */
.result-hero,
.result-card.win {
    background: var(--md-positive-soft);
    border-radius: var(--md-r-lg);
    padding: var(--md-s6) var(--md-s5);
}
.result-hero .verdict,
.result-card.win .verdict {
    font-family: var(--md-font-display);
    font-weight: 700;
    font-size: 36px;
    color: var(--md-tia-navy);
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.result-hero .verdict-accent,
.result-card.win .verdict-accent {
    color: var(--md-tia-red);
}
.result-hero .points,
.result-card.win .points {
    font-family: var(--md-font-mono);
    font-weight: 600;
    font-size: 48px;
    color: var(--md-tia-red);
    font-variant-numeric: tabular-nums;
}

/* ── Result hero (loss) — different tone, no red accent on verdict ── */
.result-card.loss,
.result-card.miss {
    background: var(--md-negative-soft);
    border-radius: var(--md-r-lg);
    padding: var(--md-s6) var(--md-s5);
}
.result-card.loss .verdict,
.result-card.miss .verdict {
    color: var(--md-tia-navy);
}
.result-card.loss .points,
.result-card.miss .points {
    color: var(--md-negative);
}

/* ── Header / brand wordmark on web ──
   The existing app has a header containing the title; restyle to match
   the spec's "MARKET" navy + "DUEL" red wordmark. Class names left
   unchanged so existing layout is preserved. */
.brand-title,
.app-title,
.header-brand {
    font-family: var(--md-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--md-tia-navy);
}
.brand-title .brand-accent,
.app-title .brand-accent,
.header-brand .brand-accent {
    color: var(--md-tia-red);
}

/* ── Numeric data treatment — apply mono font where it matters ── */
.price,
.price-value,
.live-price,
.previous-close,
.range-bracket-pct,
.points-value,
.total-points,
.leaderboard-points,
.percent-change,
.community-percent,
.timestamp,
.game-number {
    font-family: var(--md-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* ── Reduce motion: respect user preference ── */
@media (prefers-reduced-motion: reduce) {
    .btn-direction,
    .btn-conf,
    .btn-range,
    .btn-bracket,
    .btn-primary,
    .btn-submit {
        transition: none;
    }
}

/* ── Item 5: Leaderboard segmented control ──
   Tabs are a horizontal pill group (navy-50 outer track, white pressed
   active state with subtle shadow), per spec §3.6. */
.md-segmented {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: var(--md-navy-50);
    border-radius: var(--md-r-pill);
    border: none;
}
.md-segmented .md-segmented-item,
.md-segmented .tab.md-segmented-item {
    background: transparent;
    border: none;
    color: var(--md-grey-500);
    font-family: var(--md-font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: var(--md-r-pill);
    cursor: pointer;
    transition: background var(--md-dur-fast) var(--md-ease-standard),
                color var(--md-dur-fast) var(--md-ease-standard);
}
.md-segmented .md-segmented-item.active,
.md-segmented .tab.md-segmented-item.active {
    background: var(--md-tia-white);
    color: var(--md-tia-navy);
    box-shadow: var(--md-shadow-xs);
}

/* ── Item 3: Result reveal sequencing ──
   Per spec §4.3 — pre-reveal hold, hero enter, points count-up,
   breakdown stagger (each line: 0.06s delay × index, 0.20s duration).
   Triggered by JS adding .md-result-revealed to #result-card. */
#result-card .result-points,
#result-card .result-breakdown,
#result-card .result-direction-line,
#result-card .result-conf-line,
#result-card .result-bonus-line,
#result-card .result-multiplier-line,
#result-card .result-total-line,
#result-card .result-cta {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.20s var(--md-ease-entrance),
                transform 0.20s var(--md-ease-entrance);
}
#result-card.md-result-revealed .result-points              { opacity: 1; transform: none; transition-delay: 0.00s; }
#result-card.md-result-revealed .result-direction-line      { opacity: 1; transform: none; transition-delay: 0.06s; }
#result-card.md-result-revealed .result-conf-line           { opacity: 1; transform: none; transition-delay: 0.12s; }
#result-card.md-result-revealed .result-bonus-line          { opacity: 1; transform: none; transition-delay: 0.18s; }
#result-card.md-result-revealed .result-multiplier-line     { opacity: 1; transform: none; transition-delay: 0.24s; }
#result-card.md-result-revealed .result-total-line          { opacity: 1; transform: none; transition-delay: 0.30s; }
#result-card.md-result-revealed .result-breakdown           { opacity: 1; transform: none; transition-delay: 0.06s; }
#result-card.md-result-revealed .result-cta                 { opacity: 1; transform: none; transition-delay: 0.40s; }
/* Skip animations on re-views (already-seen results) */
#result-card.md-result-no-anim,
#result-card.md-result-no-anim * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
    #result-card.md-result-revealed * {
        transition: opacity 0.10s linear !important;
        transform: none !important;
    }
}

/* ── Item 4: Stats — refine user-stats-row into card-style grid ──
   The existing .user-stats-row holds 3 stats; restyle each .user-stat
   as a card per spec §3.7 stat-card aesthetic. Keeps the 3-up layout
   on desktop, drops to 2-up on phone (becoming a 2-row grid that
   matches the spec's 2×2 visual rhythm when paired with tier progress). */
.user-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--md-s2);
    margin-top: var(--md-s4);
}
@media (max-width: 480px) {
    .user-stats-row { grid-template-columns: repeat(2, 1fr); }
}
.user-stats-row .user-stat {
    background: var(--md-tia-white);
    border: 1px solid var(--md-grey-200);
    border-radius: var(--md-r-md);
    padding: var(--md-s3) var(--md-s3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.user-stats-row .user-stat-label {
    font-family: var(--md-font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--md-grey-500);
    order: 1;
}
.user-stats-row .user-stat-value {
    font-family: var(--md-font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--md-tia-navy);
    font-variant-numeric: tabular-nums;
    order: 2;
}

/* Tier progress bar — slimmer track, navy fill, mono captions per §3.7 */
.tier-progress-bar-wrap {
    margin-top: var(--md-s4);
    padding: var(--md-s3) 0;
}
.tier-progress-track {
    height: 8px;
    background: var(--md-navy-50);
    border-radius: var(--md-r-pill);
    overflow: hidden;
    margin: var(--md-s2) 0;
}
.tier-progress-fill {
    height: 100%;
    background: var(--md-tia-navy);
    border-radius: var(--md-r-pill);
    transition: width var(--md-dur-slow) var(--md-ease-standard);
}
.tier-progress-label {
    font-family: var(--md-font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--md-tia-navy);
}
.tier-progress-msg {
    font-family: var(--md-font-mono);
    font-size: 11px;
    color: var(--md-grey-500);
    letter-spacing: 0.04em;
}

/* ── Item 2: Single-card Ticket layout ──
   Hide the predict-stepper bar at the top and the spacer below it.
   Steps remain individually visible (always were) — the stepper bar
   was just navigation. Tighten spacing between predict-step blocks
   so they feel like one card. */
.predict-stepper,
.predict-stepper-spacer {
    display: none !important;
}
.game-area .card .predict-step {
    padding-top: var(--md-s4);
    padding-bottom: var(--md-s4);
    border-bottom: 1px solid var(--md-grey-100);
}
.game-area .card .predict-step:last-of-type { border-bottom: none; }
/* Hide the inline step-number badges in section labels — the single-
   card layout doesn't need them (no stepper, no numbering). The
   badges inside the submit button itself stay visible. */
.section-label .step-number {
    display: none;
}

/* ── Item 1: Swipe-to-lock CTA ──
   Pill track 60px tall, white bg, grey-300 border. Handle 48px circle
   absolute-positioned, navy bg with white arrow, 6px inset. Fill grows
   with the handle's translateX. JS handler drives drag + commit. */
.md-swipe-lock {
    position: relative;
    width: 100%;
    height: 60px;
    background: var(--md-tia-white);
    border: 1px solid var(--md-grey-300);
    border-radius: var(--md-r-pill);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    margin-top: var(--md-s4);
    transition: opacity var(--md-dur-base) var(--md-ease-standard);
}
.md-swipe-lock.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.md-swipe-lock-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 54px; /* handle (48) + 6 inset */
    background: var(--md-tia-navy);
    transition: width var(--md-dur-base) var(--md-ease-standard),
                background var(--md-dur-base) var(--md-ease-standard);
    pointer-events: none;
}
.md-swipe-lock.is-armed .md-swipe-lock-fill {
    background: var(--md-tia-red);
}
.md-swipe-lock-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--md-font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--md-tia-navy);
    pointer-events: none;
    transition: opacity var(--md-dur-fast) var(--md-ease-standard);
    z-index: 1;
}
.md-swipe-lock.is-dragging .md-swipe-lock-hint { opacity: 0.6; }
.md-swipe-lock-handle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--md-tia-navy);
    color: var(--md-tia-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--md-font-display);
    font-weight: 700;
    font-size: 18px;
    cursor: grab;
    touch-action: none;
    z-index: 2;
    transition: background var(--md-dur-base) var(--md-ease-standard),
                transform var(--md-dur-fast) var(--md-ease-standard),
                left var(--md-dur-base) var(--md-ease-standard);
}
.md-swipe-lock.is-dragging .md-swipe-lock-handle {
    transition: background var(--md-dur-base) var(--md-ease-standard);
    cursor: grabbing;
}
.md-swipe-lock.is-armed .md-swipe-lock-handle {
    background: var(--md-tia-red);
}
.md-swipe-lock-handle:active { transform: scale(1.04); }

/* v2.5.8 — When swipe-to-lock is enabled, the legacy submit button is the
   accessible fallback: visually removed but kept in the AT tree + tab order
   (NOT display:none), so keyboard / screen-reader users get an explicit
   "Lock In My Call" control alongside the swipe handle's Enter/Space path.
   The `body.md-swipe-active #btn-submit` selector (0,1,1,1) intentionally
   out-specifies redesign.css's `#app .btn-submit { display:none !important }`
   (0,1,1,0), which would otherwise hide it from AT entirely. */
body.md-swipe-active #btn-submit {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* When a keyboard user focuses it, bring it back so it's operable + visible. */
body.md-swipe-active #btn-submit:focus,
body.md-swipe-active #btn-submit:focus-visible {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 8px 0 0 !important;
    clip: auto !important;
    overflow: visible !important;
}

@media (prefers-reduced-motion: reduce) {
    .md-swipe-lock,
    .md-swipe-lock-fill,
    .md-swipe-lock-handle,
    .md-swipe-lock-hint {
        transition: none !important;
    }
}

/* ── Empty states (universal pattern) ──
   Applied as <div class="md-empty"><div class="md-empty-icon">…</div>…</div>
   Used for: no friends yet, no predictions history, no claimable prizes,
   no insights yet, etc. */
.md-empty {
    text-align: center;
    padding: var(--md-s8) var(--md-s5);
    color: var(--md-grey-500);
}
.md-empty-icon {
    font-size: 36px;
    margin-bottom: var(--md-s3);
    opacity: 0.7;
}
.md-empty-title {
    font-family: var(--md-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--md-tia-navy);
    margin-bottom: var(--md-s1);
}
.md-empty-text {
    font-family: var(--md-font-body);
    font-size: 13px;
    color: var(--md-grey-500);
    margin-bottom: var(--md-s4);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.md-empty-cta {
    display: inline-block;
    background: var(--md-tia-navy);
    color: var(--md-tia-white);
    padding: 10px 20px;
    border-radius: var(--md-r-pill);
    font-family: var(--md-font-display);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.md-empty-cta:active { background: var(--md-navy-950); }

/* ── Loading skeletons ──
   Replace plain "Loading…" text with shimmering placeholder bars. */
.md-skeleton {
    background: linear-gradient(90deg,
        var(--md-grey-100) 0%,
        var(--md-grey-200) 50%,
        var(--md-grey-100) 100%);
    background-size: 200% 100%;
    border-radius: var(--md-r-sm);
    animation: md-skeleton-shimmer 1.4s infinite linear;
}
@keyframes md-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.md-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--md-s3);
    padding: var(--md-s3) 0;
    border-bottom: 1px solid var(--md-grey-100);
}
.md-skeleton-row:last-child { border-bottom: none; }
.md-skeleton-rank   { width: 24px; height: 16px; }
.md-skeleton-name   { flex: 1; height: 14px; }
.md-skeleton-points { width: 60px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
    .md-skeleton { animation: none; }
}

/* ── Offline indicator banner ──
   Slides down from top of viewport when navigator.onLine is false.
   Auto-dismisses when connection returns. */
.md-offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 16px;
    text-align: center;
    background: var(--md-grey-900);
    color: var(--md-tia-white);
    font-family: var(--md-font-body);
    font-size: 13px;
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform var(--md-dur-base) var(--md-ease-standard);
    box-shadow: var(--md-shadow-md);
    /* Avoid covering the device notch on iOS */
    padding-top: calc(8px + env(safe-area-inset-top, 0));
}
.md-offline-banner.is-offline {
    transform: translateY(0);
}

/* ── Streak pill pulse animation ──
   Triggered by JS adding .md-streak-pulse when the user's streak
   increments after a winning result. Self-removes after the
   animation completes. */
.streak-pill.md-streak-pulse {
    animation: md-streak-pulse 0.9s var(--md-ease-standard);
}
@keyframes md-streak-pulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); }
    35%  { transform: scale(1.12); box-shadow: 0 0 0 12px rgba(255, 0, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .streak-pill.md-streak-pulse { animation: none; }
}

/* ── "What's New" modal ──
   First-launch-after-redesign one-shot announcement. Plain modal
   pattern; matches the existing site aesthetic. */
.md-whatsnew-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 100, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-dur-base) var(--md-ease-standard);
}
.md-whatsnew-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.md-whatsnew {
    background: var(--md-tia-white);
    border-radius: var(--md-r-xl);
    width: calc(100% - 32px);
    max-width: 380px;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--md-s6);
    box-shadow: var(--md-shadow-md);
    transform: translateY(12px);
    transition: transform var(--md-dur-base) var(--md-ease-entrance);
}
.md-whatsnew-overlay.is-open .md-whatsnew {
    transform: none;
}
.md-whatsnew-eyebrow {
    font-family: var(--md-font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--md-tia-red);
    margin-bottom: var(--md-s2);
}
.md-whatsnew-title {
    font-family: var(--md-font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--md-tia-navy);
    line-height: 1.15;
    margin-bottom: var(--md-s4);
}
.md-whatsnew-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--md-s5);
}
.md-whatsnew-list li {
    display: flex;
    gap: var(--md-s3);
    padding: var(--md-s3) 0;
    border-bottom: 1px solid var(--md-grey-100);
    font-family: var(--md-font-body);
    font-size: 14px;
    color: var(--md-grey-900);
}
.md-whatsnew-list li:last-child { border-bottom: none; }
.md-whatsnew-list .md-wn-icon {
    flex: 0 0 24px;
    font-size: 18px;
}
.md-whatsnew-list .md-wn-text strong {
    font-weight: 600;
    color: var(--md-tia-navy);
    display: block;
    margin-bottom: 2px;
}
.md-whatsnew-cta {
    display: block;
    width: 100%;
    background: var(--md-tia-navy);
    color: var(--md-tia-white);
    padding: 12px;
    border-radius: var(--md-r-pill);
    font-family: var(--md-font-display);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    border: none;
    cursor: pointer;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.md-whatsnew-cta:active { background: var(--md-navy-950); }

/* ── End Redesign 2026 ────────────────────────────────────────────────── */