/* ── Reset & Variables ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:       #000000;
    --surface:  #1a1a2e;
    --card:     #16213e;
    --border:   #2a2a4a;
    --accent:   #00d4aa;
    --green:    #2ecc71;
    --red:      #e74c3c;
    --yellow:   #f1c40f;
    --blue:     #3498db;
    --text:     #e0e0e0;
    --muted:    #777;
    --radius:   12px;
    --radius-sm: 6px;
}

/* The snap container holds the two deck screens and smooth-scrolls between
   them. No native scroll-snap: the gated deck (landing.js) drives the hero →
   HIWS transition, and past HIWS the deck releases to normal scroll (CTA).
   (A scroll-snap-stop: always here would pin the user at HIWS and block the
   release back up to the hero.) */
.landing-body .snap-container {
    position: relative;
}
.landing-body .snap-scene {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* Scene 1 is a column. The hero flex-fills the space between the ticker and the
   stats bar (no gap at the top), with its content sitting in the lower area of
   the hex field. */
.landing-body #scene-hero {
    display: flex;
    flex-direction: column;
    background: #000;
}
.landing-body #scene-hero .hero--hex {
    flex: 1;
    min-height: 0;
    align-items: flex-end;   /* push the hero content into the lower area */
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: 0.8; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand a { font-size: 17px; font-weight: 700; color: var(--accent); }

.tournament-badge {
    background: var(--accent);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--text); font-size: 13px; }
.nav-links a:hover { color: var(--accent); }
.wallet-balance { color: var(--green); font-weight: 700; font-size: 13px; }
.btn-logout { color: var(--muted) !important; }
.btn-register { color: var(--accent) !important; font-weight: 600; }

/* ── Container ───────────────────────────────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 28px 20px 60px; }

/* ── Site Footer (Privacy/Terms links) ──────────────────────────────────── */
.site-footer {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px 32px;
    text-align: center;
    font-size: 12px;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.site-footer-sep { color: var(--border); margin: 0 8px; }

/* ── Flash Messages ──────────────────────────────────────────────────────── */
.flash-messages {
    position: fixed;
    inset: 0;
    z-index: 120;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;   /* page stays clickable except the box */
}
.flash {
    position: relative;
    min-width: 320px;
    max-width: 480px;
    padding: 36px 40px 14px;
    text-align: center;
    font-size: 14px;
    background: #1a1a1a;                 /* charcoal overlay card */
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    pointer-events: auto;
}
.flash-msg { display: block; }
.flash-close {
    position: absolute;
    top: 8px; right: 12px;
    background: none;
    border: none;
    color: #A0A0AB;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.flash-close:hover { color: #FDBD01; }
.flash-success { border: 2px solid var(--green); }
.flash-error   { border: 2px solid var(--red); }
.flash-warning { border: 2px solid var(--yellow); }
.flash-info    { border: 2px solid var(--blue); }

/* ── Transaction Overlay (Transaction Complete / Insufficient Funds) ─────── */
.tx-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(18,18,18,0.6);
    display: flex; align-items: center; justify-content: center;
}
.tx-box {
    position: relative;
    width: 550px; height: 130px;
    background: #1a1a1a;                       /* charcoal */
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.tx-success {
    border: 3px solid var(--green);
    box-shadow: 0 0 20px 3px rgba(46,204,113,0.55), 0 10px 40px rgba(0,0,0,0.5);   /* glowing green outline */
}
.tx-error {
    border: 3px solid var(--red);
    box-shadow: 0 0 20px 3px rgba(231,76,60,0.55), 0 10px 40px rgba(0,0,0,0.5);     /* glowing red outline */
}
.tx-close {
    position: absolute; top: 4px; right: 10px;
    background: none; border: none;
    color: #A0A0AB; font-size: 20px; line-height: 1; cursor: pointer;
}
.tx-close:hover { color: #FDBD01; }
.tx-title { color: #FDBD01; font-size: 24px; font-weight: 800; }
.tx-msg   { color: #FDBD01; font-size: 15px; }
.tx-btn {
    display: inline-block; margin-left: 6px;
    background: #FDBD01; color: #000 !important;   /* gold button, black text (forced) */
    font-weight: 700; font-size: 15px; padding: 3px 14px; border-radius: 6px;
    text-decoration: none;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.15s, transform 0.1s;
    line-height: 1;
}
.btn:hover:not(:disabled) { opacity: 0.87; transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-full { width: 100%; text-align: center; padding: 11px; }
.btn-primary { background: var(--accent); color: #000; }
.btn-buy     { background: var(--green); color: #000; margin-top: 14px; }
.btn-sell    { background: var(--red); color: #fff; margin-top: 14px; }
.btn-view    { background: var(--card); color: var(--accent); border: 1px solid var(--border); }
.btn-sm      { padding: 5px 11px; font-size: 11px; }

/* ── Auth Pages ──────────────────────────────────────────────────────────── */
.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 58px);
    padding: 40px 20px;
}
.auth-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 32px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}
.auth-logo { font-size: 40px; margin-bottom: 12px; }
.auth-form h2 { font-size: 22px; margin-bottom: 6px; }
.auth-subtitle { color: var(--muted); margin-bottom: 24px; font-size: 13px; }
.auth-switch { margin-top: 20px; color: var(--muted); font-size: 13px; }

.form-group { margin-bottom: 16px; text-align: left; }
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-group input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    transition: border-color 0.2s;
}
.form-group input:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── Market Page ─────────────────────────────────────────────────────────── */
.market-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.market-header h1 { font-size: 22px; }
.market-subtitle   { color: var(--muted); font-size: 13px; margin-top: 4px; }
.market-stats { display: flex; gap: 16px; }
.market-stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    text-align: center;
}
.stat-num { display: block; font-size: 18px; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; }

.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-label { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.tab {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
.tab.active, .tab:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,212,170,0.08);
}
.search-input {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    width: 220px;
    transition: border-color 0.2s;
}
.search-input:focus { outline: none; border-color: var(--accent); }

/* ── Player Cards ────────────────────────────────────────────────────────── */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}
.player-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    position: relative;
    transition: border-color 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
}
.player-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.player-card[data-state="MATCH_LIVE"] { border-color: rgba(231,76,60,0.5); }
.player-card[data-state="CIRCUIT_BREAKER"] { border-color: rgba(241,196,15,0.5); }

.state-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.badge-live    { background: var(--red); color: #fff; }
.badge-halted  { background: var(--yellow); color: #000; }
.badge-pending { background: var(--accent); color: #000; }

.pos-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}
.pos-fwd { background: rgba(231,76,60,0.2); color: #ff6b6b; }
.pos-mid { background: rgba(241,196,15,0.2); color: var(--yellow); }
.pos-def { background: rgba(46,204,113,0.2); color: var(--green); }
.pos-gk  { background: rgba(0,212,170,0.15); color: var(--accent); }

.player-card-body { flex: 1; }
.player-name   { font-size: 14px; font-weight: 700; margin-bottom: 2px; line-height: 1.3; }
.player-club { font-size: 11px; color: var(--muted); margin-bottom: 10px; }

.price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.card-price { font-size: 20px; font-weight: 700; color: var(--accent); }

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

.price-delta { font-size: 12px; font-weight: 600; }

.demand-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.demand-pill {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.pill-strong-buy  { background: rgba(46,204,113,0.2); color: var(--green); }
.pill-mild-buy    { background: rgba(46,204,113,0.1); color: var(--green); }
.pill-neutral     { background: rgba(119,119,119,0.1); color: var(--muted); }
.pill-mild-sell   { background: rgba(231,76,60,0.1); color: var(--red); }
.pill-strong-sell { background: rgba(231,76,60,0.2); color: var(--red); }
.momentum-badge { font-size: 10px; color: var(--yellow); font-weight: 700; }
.owned-badge { font-size: 11px; color: var(--accent); margin-bottom: 10px; }

/* ── Player Detail Page ──────────────────────────────────────────────────── */
.tension-banner {
    background: rgba(231,76,60,0.1);
    border: 1px solid rgba(231,76,60,0.4);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 20px;
    flex-wrap: wrap;
}
.detail-title { display: flex; align-items: flex-start; gap: 14px; }
.detail-title h1 { font-size: 26px; }
.detail-club { color: var(--muted); font-size: 13px; margin-top: 4px; }
.detail-pos { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 6px; margin-top: 4px; }

.detail-price-block { text-align: right; }
.detail-big-price { font-size: 38px; font-weight: 700; color: var(--accent); line-height: 1; }
.detail-change { font-size: 15px; font-weight: 600; margin: 4px 0; }
.detail-breakdown { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.detail-breakdown .sep { margin: 0 4px; }

.state-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--border);
    color: var(--muted);
}
.state-pill.state-match-live     { background: rgba(231,76,60,0.2); color: var(--red); }
.state-pill.state-circuit-breaker{ background: rgba(241,196,15,0.2); color: var(--yellow); }
.state-pill.state-normal         { background: rgba(46,204,113,0.1); color: var(--green); }
.state-pill.state-pending-update { background: rgba(0,212,170,0.1); color: var(--accent); }

/* ── Chart ───────────────────────────────────────────────────────────────── */
.chart-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
}
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.chart-title  { font-size: 13px; font-weight: 600; }
.chart-count  { font-size: 11px; color: var(--muted); }
.chart-empty  { text-align: center; padding: 48px; color: var(--muted); font-size: 13px; }
#priceChart   { display: block; width: 100%; }

/* ── Trade Section ───────────────────────────────────────────────────────── */
.trade-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.trade-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.trade-card h3 { font-size: 15px; margin-bottom: 10px; }
.balance-line  { font-size: 12px; color: var(--muted); margin-bottom: 6px; }

.trade-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
}
.preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    color: var(--muted);
}
.preview-row span:last-child { color: var(--text); font-weight: 600; }
.preview-total {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 8px;
    color: var(--text) !important;
    font-weight: 700;
    font-size: 13px !important;
}
.preview-total span { color: var(--text) !important; font-size: 13px; }
.muted-row { opacity: 0.6; }
.amplified-warning { color: var(--yellow); font-size: 11px; margin-top: 6px; }
.trade-error { color: var(--red); font-size: 12px; margin: 8px 0; }

.no-holding { text-align: center; padding: 32px 16px; color: var(--muted); }
.trading-paused {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    margin-bottom: 20px;
}
.paused-icon { font-size: 40px; margin-bottom: 12px; }
.trading-paused h3 { font-size: 18px; margin-bottom: 8px; }
.trading-paused p  { color: var(--muted); margin-bottom: 6px; }

/* ── Info Grid (knockout + stats) ────────────────────────────────────────── */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.info-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.info-card h3    { font-size: 14px; margin-bottom: 8px; }
.info-desc       { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.info-footer     { color: var(--muted); font-size: 11px; margin-top: 10px; }

.risk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.risk-table th { color: var(--muted); font-size: 10px; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid var(--border); text-align: left; }
.risk-table td { padding: 7px 0; border-bottom: 1px solid rgba(42,42,74,0.5); }

.stats-grid-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.stat-box { text-align: center; background: var(--bg); border-radius: 8px; padding: 10px 4px; }
.stat-big { display: block; font-size: 22px; font-weight: 700; color: var(--accent); }
.stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.season-score { font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; }

/* ── Portfolio Page ──────────────────────────────────────────────────────── */
.summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.summary-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}
.summary-label { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.summary-val   { display: block; font-size: 20px; font-weight: 700; color: var(--accent); }

.section-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.section-header h2 { font-size: 17px; }
.section-count { font-size: 12px; color: var(--muted); }

.table-wrapper { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table th {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(42,42,74,0.4);
    white-space: nowrap;
}
.data-table tr:hover td { background: rgba(255,255,255,0.02); }

.player-link { color: var(--text); font-weight: 600; }
.player-link:hover { color: var(--accent); }
.mini-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}
.pct-small { font-size: 11px; color: var(--muted); }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; color: var(--text); margin-bottom: 8px; }
.empty-state p  { margin-bottom: 20px; }

/* ── Empty-state card: contains the "No holdings/shorts yet" message ──────── */
.empty-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: var(--radius);
    padding: 44px 24px;
    text-align: center;
    color: var(--muted);
}
.empty-card h3 { font-size: 18px; color: var(--text); margin-bottom: 8px; }
.empty-card p  { margin-bottom: 20px; color: var(--muted); }

/* ── Section divider: 20px gap with a gold dotted (circle-dot) line ───────── */
.section-divider {
    border: none;
    height: 3px;
    margin: 20px 0;
    background-image: radial-gradient(circle, #FDBD01 1.5px, transparent 1.6px);
    background-size: 8px 3px;
    background-repeat: repeat-x;
}

.dividend-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.div-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.div-head  { display: flex; align-items: center; gap: 8px; }
.div-icon  { font-size: 22px; }
.div-label { font-size: 12px; font-weight: 600; }
.div-val   { font-size: 19px; font-weight: 700; }  /* ~+5% from 18px, same font */
.div-desc  { font-size: 10px; color: var(--muted); }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.muted { color: var(--muted) !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .container { padding: 16px 12px 40px; }
    .navbar { padding: 0 16px; }
    .nav-brand a { font-size: 15px; }
    .trade-grid { grid-template-columns: 1fr; }
    .info-grid  { grid-template-columns: 1fr; }
    .detail-header { flex-direction: column; }
    .detail-price-block { text-align: left; }
    .players-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
    .stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .summary-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .players-grid { grid-template-columns: 1fr 1fr; }
    .filter-bar { flex-direction: column; align-items: flex-start; }
    .search-input { width: 100%; }
    .summary-bar { grid-template-columns: 1fr 1fr; }
}
/* ── Landing Page ────────────────────────────────────────────────────────── */
.landing-body { background: var(--bg); overflow-x: hidden; }

/* Hero */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 20px 60px;
    gap: 40px;
    min-height: calc(100vh - 58px);
}

.hero-content { flex: 1; max-width: 560px; }

.hero-badge {
    display: inline-block;
    background: rgba(0,212,170,0.1);
    border: 1px solid rgba(0,212,170,0.3);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.hero-title {
    font-size: 62px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-accent {
    color: var(--accent);
    font-family: 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
    font-weight: 900;
    font-stretch: condensed;
    letter-spacing: -0.5px;
}

.hero-subtitle {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 460px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: 10px; }
.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.hero-note { font-size: 12px; color: var(--muted); }

/* ── Hex Honeycomb Hero — drawn on one <canvas> instead of one DOM element per
   tile. Grid layout, per-tile shading, cursor lift/glow, ambient pulses and
   the boot entrance are all computed and painted in initHexCanvas() (landing.js). */
.landing-body .hero--hex {
    position: relative;
    max-width: none; width: 100%;
    justify-content: center; text-align: center;
    align-items: flex-start;   /* content still near the top — just not crammed */
    overflow: hidden;
    padding: 125px 20px 157px;  /* restored ~60% of the top space */
    min-height: 70vh;
    background: #000;
}

.landing-body .hex-canvas {
    position: absolute; inset: 0;
    display: block;
    width: 100%; height: 100%;
}

/* ── Light-wash overlay — single continuous light source under the cursor ── */
.landing-body .hex-lightwash {
    position: absolute;
    inset: 0;
    z-index: 1;                    /* above .hex-canvas, below .hero-content */
    pointer-events: none;
    mix-blend-mode: overlay;
    background: radial-gradient(
        640px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255,243,209,0.9) 0%,
        rgba(253,189,1,0.35) 40%,
        transparent 72%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}
.landing-body .hero--hex:hover .hex-lightwash,
.landing-body .how-it-works--monitor:hover .hex-lightwash,
.landing-body .hex-lightwash.is-active {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .landing-body .hex-lightwash { display: none; }
}

/* ── Text: shadow-only legibility, no backdrop panel ───────────────────── */
.landing-body .hero-content { position: relative; z-index: 2; }
.landing-body .hero-content-panel { max-width: 720px; }
.landing-body .hero-title,
.landing-body .hero-tagline,
.landing-body .hero-accent,
.landing-body .hero-subtitle,
.landing-body .hero-badge,
.landing-body .hero-note {
    /* Pale-gold highlight halo — same sheen tone (255,252,235) as the hex
       specular streak, brighter than every hex face stop (#dcbd72..#7a5a18),
       so the text reads as catching light rather than sitting in shadow.
       Another +40% pass (alpha caps at 1 on the tightest layer, so that
       one's increase shows mostly as extra blur). */
    text-shadow:
        0 0 11px rgba(255,252,235,1),
        0 0 28px rgba(255,252,235,0.84),
        0 0 55px rgba(255,252,235,0.49);
}
.landing-body .hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.32), transparent 72%);
    pointer-events: none;
}

/* Boot entrance, ambient pulses and the reduced-motion static-frame fallback
   are all handled inside initHexCanvas() (landing.js) — nothing to gate here,
   a canvas has no per-element transitions/animations to turn off. */
@media (max-width: 860px) {
    .landing-body .hex-canvas { display: none; }
    .landing-body .hero--hex { background: #000; }
}

/* Hero Visual — fanned mock-card deck (legacy, kept for reference) */
.hero-visual {
    flex: 1;
    position: relative;
    height: 580px;
    max-width: 600px;
}

.mock-card {
    position: absolute;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    width: 180px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: float 6s ease-in-out infinite;
}

/* Deliberate fan: each card rotated + stacked with a z-index offset so the
   overlap reads as a splayed deck, not accidental clipping. Eight cards are
   spread around the perimeter with clear gaps between neighbours so they look
   repelled rather than bunched. */
.mc-1 { top: 410px; left: 0px;   --mc-rot: -24deg; z-index: 1; animation-delay: 0s; }
.mc-2 { top: 0px;   left: 215px; --mc-rot: -3deg;  z-index: 8; animation-delay: 1.5s; }
.mc-3 { top: 425px; left: 205px; --mc-rot: 4deg;   z-index: 2; animation-delay: 3s; }
.mc-4 { top: 410px; left: 415px; --mc-rot: 22deg;  z-index: 3; animation-delay: 4.5s; }
.mc-5 { top: 185px; left: -5px;  --mc-rot: -14deg; z-index: 4; animation-delay: 2.2s; }
.mc-6 { top: 5px;   left: 415px; --mc-rot: 20deg;  z-index: 5; animation-delay: 3.7s; }
.mc-7 { top: 200px; left: 225px; --mc-rot: 8deg;   z-index: 6; animation-delay: 1s; }
.mc-8 { top: 0px;   left: 5px;   --mc-rot: -22deg; z-index: 7; animation-delay: 2.8s; }
.mc-9 { top: 210px; left: 415px; --mc-rot: -14deg; z-index: 6; animation-delay: 2.4s; }

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(var(--mc-rot)); }
    50%       { transform: translateY(-12px) rotate(var(--mc-rot)); }
}

.mc-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
/* Jersey-colored accents per club (replaces generic FWD/MID colour). */
.mc-arsenal   { background: #ef0107; color: #fff; }
.mc-liverpool { background: #c8102e; color: #fff; }
.mc-city      { background: #6cabdd; color: #10213a; }
.mc-chelsea   { background: #034694; color: #fff; }
.mc-manutd    { background: #da291c; color: #fff; }
.mc-spurs     { background: #132257; color: #fff; }
.mc-villa     { background: #670e36; color: #fff; }
/* ETF is a distinct instrument, not a player — gold tag. */
.mc-etf { background: #FDBD01; color: #121212; }

.mc-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.mc-club { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.mc-price  { font-size: 20px; font-weight: 700; color: var(--accent); }
.mc-change { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.mc-spark  { width: 100%; height: 40px; display: block; }

/* Live-state card — previews the live-price hook. */
.mc-live { border-color: rgba(231,76,60,0.55); }
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(231,76,60,0.15);
    border: 1px solid rgba(231,76,60,0.5);
    color: #ff6b6b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    animation: pulse 1.2s infinite;
}
.live-dot-sm {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    animation: pulse 1.2s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(231,76,60,0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(231,76,60,0); }
    100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}

/* Stats Bar */
.stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 24px 20px;
    flex-wrap: wrap;
}

.stats-bar-item { text-align: center; padding: 0 48px; }
.stats-bar-num  { display: block; font-size: 28px; font-weight: 800; color: var(--accent); }
.stats-bar-num.live-num {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.stats-bar-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stats-bar-divider { width: 1px; height: 40px; background: var(--border); }

/* How It Works */
.how-it-works {
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 20px;
    text-align: center;
}

.how-it-works h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 48px;
}

.hiw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.hiw-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: left;
    transition: border-color 0.2s, transform 0.2s;
}

.hiw-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

/* Outline SVG icon tile — one weight, one stroke, accent per concept. */
.hiw-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.hiw-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.6;
}
.hiw-icon.teal { background: rgba(0,212,170,0.1);   color: var(--accent); }
.hiw-icon.red  { background: rgba(231,76,60,0.12);  color: #ff6b6b; }
.hiw-icon.gold { background: rgba(241,196,15,0.12); color: var(--yellow); }
.hiw-icon.blue { background: rgba(52,152,219,0.12); color: var(--blue); }

.hiw-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.hiw-card p  { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* CTA Section */
.landing-cta {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    padding: 80px 20px;
}

.landing-cta h2 { font-size: 32px; font-weight: 800; margin-bottom: 12px; }
.landing-cta p  { color: var(--muted); margin-bottom: 28px; font-size: 15px; }

/* Footer */
.landing-footer {
    text-align: center;
    padding: 24px;
    color: var(--muted);
    font-size: 12px;
}

/* Responsive */
@media (max-width: 900px) {
    .hero { flex-direction: column; padding: 48px 20px 40px; min-height: auto; }
    .hero-title { font-size: 38px; }
    .hero-visual { width: 100%; height: 560px; }
    .stats-bar-item { padding: 0 24px; }
    .hiw-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .hero-title { font-size: 30px; }
    .hero-visual { display: none; }
    .stats-bar { gap: 16px; }
    .stats-bar-divider { display: none; }
    .hiw-grid { grid-template-columns: 1fr; }
}

/* ── Landing Design System (scoped — landing page only) ──────────────────── */
/* JetBrains Mono, white/cool-gray text, #121212 background, #FDBD01 chrome. */
.landing-body {
    --ld-bg:   #121212;   /* page background */
    --ld-card: #1a1a1a;   /* elevated surface */
    --ld-line: #2a2a2a;   /* borders */
    --ld-ink:  #FFFFFF;   /* primary text: values, tickers, headers */
    --ld-sub:  #A0A0AB;   /* secondary text: labels, timestamps, subtitles */
    --ld-gold: #FDBD01;   /* buttons, bars, tabs */

    /* Revamp tokens — charcoal-black stage + neon gold */
    --lp-bg:        #000000;
    --lp-gold:      #FDBD01;
    --lp-gold-dim:  #7a5c02;
    --lp-charcoal:  #121212;
    --lp-up-tint:   rgba(9,18,13,0.92);
    --lp-down-tint: rgba(18,10,10,0.92);
    --lp-green:     #39ff8a;
    --lp-red:       #ff3b3b;

    /* Body copy stays readable — system sans, NOT Orbitron. */
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    background: var(--lp-bg);
    color: var(--ld-ink);
}

/* Display face — headline, tab labels, big index/price numbers. Used with
   restraint: headline + a handful of short UI labels, never paragraph copy. */
.landing-body .hero-title,
.landing-body .hero-subtitle,
.landing-body .chrome-tab {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
}

/* Utility/data face — anything tabular: ticker prices/deltas, stat-bar
   numbers, sparkline labels. */
.landing-body .ticker-item,
.landing-body .stats-bar-num {
    font-family: 'JetBrains Mono', monospace;
}

/* Navbar — gold bar */
.landing-body .navbar {
    background: var(--ld-gold);
    border-bottom: 1px solid var(--ld-gold);
}
.landing-body .nav-brand a { color: #121212; }
.landing-body .tournament-badge { background: #121212; color: var(--ld-gold); }
.landing-body .nav-links a { color: #121212; }
.landing-body .nav-links a:hover { color: #121212; opacity: 0.7; }
/* Get Started sits on the gold bar — invert it so it stays visible. */
.landing-body .navbar .btn-primary { background: #121212; color: var(--ld-gold); }

/* Buttons — gold/charcoal mirror pair (non-navbar) */
.landing-body .btn-primary {
    background: var(--lp-gold); color: var(--lp-charcoal);
    border: 2px solid var(--lp-gold);
}
.landing-body .btn-primary:hover { background: transparent; color: var(--lp-gold); }
.landing-body .btn-ghost {
    background: var(--lp-charcoal); color: var(--lp-gold);
    border: 2px solid var(--lp-gold);
}
.landing-body .btn-ghost:hover { background: var(--lp-gold); color: var(--lp-charcoal); }

/* Hero */
.landing-body .hero-badge {
    background: rgba(253,189,1,0.12);
    border: 1px solid rgba(253,189,1,0.4);
    color: var(--ld-gold);
}
.landing-body .hero-title {
    color: var(--lp-charcoal);
    margin-top: -28px;   /* lift the title higher under the tagline */
}
.landing-body .hero-off {
    color: #39ff8a;
    text-shadow: 0 0 10px rgba(57,255,138,0.9), 0 0 24px rgba(57,255,138,0.5);
}
.landing-body .hero-fund {
    color: #ff3b3b;
    text-shadow: 0 0 10px rgba(255,59,59,0.9), 0 0 24px rgba(255,59,59,0.5);
}
.landing-body .hero-tagline {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-size: 62px;
    font-weight: 700;
    color: var(--lp-charcoal);
    margin-top: 0;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    line-height: 1.1;
}
.landing-body .hero-accent { font-family: inherit; font-stretch: normal; color: var(--lp-charcoal); }

/* OFFSIDE FUND brand — custom SVG logo with graph-line letterforms and subtle neon glow. */
.landing-body .hero-brand-svg {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.landing-body .hero-brand-logo {
    height: 80px;
    width: auto;
    display: block;
}
.landing-body .hero-subtitle {
    color: var(--lp-charcoal);
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;   /* center the subtitle block (it has a max-width) */
    /* text-shadow comes from the shared rule above (.hero-title, .hero-subtitle, ...) */
}
.landing-body .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: translateY(1px);
}
.landing-body .hero-actions-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.landing-body .hero-actions .btn-how {
    background: var(--lp-gold);
    color: #000000;
    border: 2px solid var(--lp-gold);
}
.landing-body .hero-actions .btn-how:hover {
    background: #000000;
    color: var(--lp-gold);
    border-color: #000000;
}
/* Both buttons: gold with black font → flip to black with gold font on hover */
.landing-body .hero-actions .btn-primary,
.landing-body .hero-actions .btn-ghost {
    background: var(--lp-gold); color: #000000; border: 2px solid var(--lp-gold);
}
.landing-body .hero-actions .btn-primary:hover,
.landing-body .hero-actions .btn-ghost:hover {
    background: #000000; color: var(--lp-gold); border-color: #000000;
}

/* Fanned mock cards */
.landing-body .mock-card { background: var(--ld-card); border: 1px solid var(--ld-line); }
.landing-body .mc-name  { color: var(--ld-ink); }
.landing-body .mc-price { color: var(--ld-ink); }
.landing-body .mc-club  { color: var(--ld-sub); }

/* Stats bar — clubs rolling behind a solid gold shield that carries the stats */
.landing-body .stats-bar {
    background: var(--ld-gold);   /* same yellow as the shape, behind the badges */
    position: relative;
    height: 84px;                 /* reduced to fit everything snugly */
    padding: 0;
    overflow: hidden;
}

/* SOLID YELLOW SHAPE — the opaque gold panel behind the stats that blocks the clubs */
.landing-body .stats-shield {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: 60%;
    max-width: 820px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ld-gold);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.landing-body .stats-bar-center {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.landing-body .stats-bar-num    { color: #121212; }
.landing-body .stats-bar-label  { color: #121212; }
.landing-body .stats-bar-divider { background: #121212; opacity: 0.35; }

/* Club crest tape — horizontal looping marquee, vertically centred, ~75% of bar height.
   It rolls behind the gold shield, so crests only show in the left margin — never over the
   stats. Confined to the left half so the right margin is free for .stats-disclaimer. */
.landing-body .clubs-tape {
    position: absolute;
    left: 0; right: 50%;
    top: 50%;
    transform: translateY(-50%);
    height: 75%;
    overflow: hidden;
    display: flex;
    align-items: center;
    z-index: 0;
}
.landing-body .clubs-tape .tape-track {
    display: flex;
    align-items: center;
    width: max-content;
    flex: 0 0 auto;   /* prevent flexbox from shrinking the loop to the container */
    will-change: transform;   /* smoother, avoids sub-pixel seams */
    /* Position is driven by rAF in landing.js, not a CSS animation — see the
       comment on initClubTape() for why. */
}
.landing-body .clubs-tape .tape-group {
    display: flex;
    align-items: center;
}
.landing-body .clubs-tape .club-badge {
    width: 46px;
    height: 46px;
    margin-right: 20px;   /* uniform spacing incl. last badge → invisible loop seam */
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(253,189,1,0.5);
    flex-shrink: 0;
}

/* Trademark disclaimer — sits in the right margin the tape used to occupy,
   same "rolls behind the gold shield" trick: full-height box, shield is
   z-index above it, so only the part right of the shield is ever visible.
   The <p> is sized to use that whole margin (edge to edge, left up against
   the shield, right against the bar's own edge) so the font can run as
   large as the 84px bar height allows before it needs to wrap past it. */
.landing-body .stats-disclaimer {
    position: absolute;
    left: 50%; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 0;
}
.landing-body .stats-disclaimer p {
    margin: 0;
    max-width: 345px;
    padding: 0 8px 0 6px;
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: -0.2px;
    line-height: 1.26;
    color: #000;
    text-align: center;
}

/* How It Works */
.landing-body .how-it-works h2 { color: var(--ld-ink); }
.landing-body .hiw-card { background: var(--ld-card); border: 1px solid var(--ld-line); }
.landing-body .hiw-card h3 { color: var(--ld-ink); }
.landing-body .hiw-card p  { color: var(--ld-sub); }
/* Unify icon tiles to the single gold accent. */
.landing-body .hiw-icon { background: rgba(253,189,1,0.12); color: var(--ld-gold); }

/* ── Scene 2 (how-it-works) as a snap scene ───────────────────────────────
   The reused hex floor is position: absolute; inset: 0 — it needs the same
   positioning context here that .hero--hex gives it in scene 1, so the section
   goes full-bleed, clips overflow, and sits on black behind the copy. */
.landing-body .how-it-works--monitor {
    position: relative;
    overflow: hidden;
    background: #000;
    max-width: none;
    width: 100%;
    padding: 40px 20px 0;      /* full-bleed; tight top (ticker already above) */
    display: flex;             /* mirror the hero: ticker → content → bar → gate */
    flex-direction: column;
}
/* Monitor sits above the hex background, like .hero-content does. */
.landing-body .how-it-works--monitor .monitor {
    position: relative;
    z-index: 2;
}
/* Stage: flex-fills the HIW section between the ticker and the action bar,
   centering the heading + monitor (mirrors the hero's flex middle). */
.landing-body .hiw-stage {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/* Scene 2 action bar: sits at the bottom of the HIW flex column (mirrors the
   hero's stats bar). */
.landing-body .hiws-action-bar { margin-top: auto; }
/* Scene 2 action bar: a single CTA replaces the four stat blocks in the shield. */
.landing-body .hiws-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
/* On the gold bar a gold .btn-primary disappears — invert the CTA to the dark
   side (charcoal bg, gold text) so it reads against the gold, like .btn-ghost. */
.landing-body .hiws-action-bar .btn-primary {
    background: var(--lp-charcoal);
    color: var(--lp-gold);
    border: 2px solid var(--lp-charcoal);
}
.landing-body .hiws-action-bar .btn-primary:hover {
    background: var(--lp-gold);
    color: var(--lp-charcoal);
    border-color: var(--lp-gold);
}

/* ── Browser-monitor How It Works ───────────────────────────────────────── */
.landing-body .how-it-works--monitor .monitor {
    max-width: 1160px;   /* the even bigger monitor */
    margin: 0 auto;
}
/* Outer monitor frame — wraps the browser in a larger display bezel */
.landing-body .monitor-outer {
    background: #050505;
    border: 1px solid var(--lp-gold);          /* neon gold outline */
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.7),
        0 0 26px rgba(253,189,1,0.35),
        inset 0 0 0 1px rgba(253,189,1,0.12);
}
.landing-body .monitor-bezel {
    background: #0a0a0a;
    border: 1px solid rgba(253,189,1,0.6);     /* softer gold inner frame */
    border-radius: 14px;
    padding: 0 0 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(253,189,1,0.06);
}
.landing-body .browser-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #1e1e1e;
}
.landing-body .chrome-dots span {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    background: #333;
}
.landing-body .chrome-dots span:nth-child(1) { background: #ff5f56; }
.landing-body .chrome-dots span:nth-child(2) { background: #ffbd2e; }
.landing-body .chrome-dots span:nth-child(3) { background: #27c93f; }
.landing-body .chrome-urlbar {
    flex: 1;
    background: #151515;
    border-radius: 6px;
    padding: 5px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #777;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.landing-body .chrome-urlbar span { color: var(--lp-gold); }
.landing-body .chrome-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 16px 0;
    border-bottom: 1px solid #1e1e1e;
}
.landing-body .chrome-tab {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: transparent;
    border: none;
    color: #666;
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
}
.landing-body .chrome-tab:hover { color: var(--lp-gold); }
.landing-body .chrome-tab.active {
    background: #151515;
    color: var(--lp-gold);
    box-shadow: inset 0 -2px 0 var(--lp-gold);
}
.landing-body .browser-viewport { padding: 8px 8px 0; }
.landing-body .hiw-screen { display: none; padding: 32px; text-align: center; }
.landing-body .hiw-screen.active { display: block; }
.landing-body .hiw-screen h3 { font-size: 24px; font-weight: 800; color: var(--ld-ink); margin-bottom: 12px; }
.landing-body .hiw-screen p  { font-size: 15px; color: var(--ld-sub); line-height: 1.7; max-width: 520px; margin: 0 auto; }
.landing-body .hiw-screen .hiw-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--lp-gold);
    background: rgba(253,189,1,0.12);
    border: 1px solid rgba(253,189,1,0.35);
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 14px;
}
.landing-body .hiw-sparkline {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}
/* Alternating up/down segments on the sparkline — green risers, red fallers. */
.landing-body .hiw-seg { stroke-width: 2.5; fill: none; stroke-linecap: round; }
.landing-body .hiw-seg.up   { stroke: #39ff8a; filter: drop-shadow(0 0 4px rgba(57,255,138,0.8)); }
.landing-body .hiw-seg.down { stroke: #ff3b3b; filter: drop-shadow(0 0 4px rgba(255,59,59,0.8)); }
/* Gold connector ticks lift each feature icon off the line. */
.landing-body .hiw-ticks line { stroke: var(--lp-gold); stroke-width: 1.5; opacity: 0.75; }
.landing-body .hiw-point { cursor: pointer; }
/* Consistent outline icon set — single weight, single color */
.landing-body .hiw-point .hiw-icon {
    color: var(--lp-gold);
    transition: transform 0.15s ease;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}
.landing-body .hiw-point:hover .hiw-icon { transform: scale(1.25); }
.landing-body .hiw-hint { font-size: 12px; color: var(--ld-sub); }

/* ── How It Works reveal ──────────────────────────────────────────────────
   Clicking the hero's "How It Works" button: the hex grid pushes back ~5% and
   frosts over, a dark dim covers the page, and a gold wireframe rectangle
   expands from the button into the solid browser graphic. */
.landing-body .hero-frost {
    position: fixed; inset: 0;
    z-index: 900;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.landing-body.hiw-open .hero-frost { opacity: 1; }

/* Grid push-back — the hex floor recedes to ~95% and frosts over. The tilt is
   baked into the canvas's own drawn pixels now (no DOM 3D transform to layer
   a rotateX onto), so this is just a scale + dim of the whole bitmap. */
.landing-body .hex-canvas {
    transition: transform 0.5s cubic-bezier(.22,.61,.36,1), filter 0.5s ease;
}
.landing-body.hiw-open .hex-canvas {
    transform: scale(0.95);
    filter: saturate(0.45) blur(4px);
}

/* The expanding wireframe → solid browser. Geometry is set by landing.js. */
.landing-body .hiw-reveal {
    position: fixed;
    z-index: 1000;
    border: 2px solid rgba(253, 189, 1, 0.9);
    border-radius: 12px;
    background: transparent;      /* wireframe until .is-solid */
    box-shadow: 0 0 40px rgba(253, 189, 1, 0.4), 0 30px 90px rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition:
        left 0.5s cubic-bezier(.22,.61,.36,1),
        top 0.5s cubic-bezier(.22,.61,.36,1),
        width 0.5s cubic-bezier(.22,.61,.36,1),
        height 0.5s cubic-bezier(.22,.61,.36,1),
        opacity 0.3s ease;
}
.landing-body .hiw-reveal.is-open { opacity: 1; pointer-events: auto; }
.landing-body .hiw-reveal.is-solid {
    background: transparent;
    border-color: transparent;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
}
.landing-body .hiw-reveal .hiw-reveal-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 24px;
    overflow: auto;
    opacity: 0;
    transition: opacity 0.35s ease 0.05s;
}
.landing-body .hiw-reveal.is-solid .hiw-reveal-body { opacity: 1; }
.landing-body .hiw-reveal .monitor { width: 100%; max-width: 1160px; }
.landing-body .hiw-reveal-close {
    /* Sits inline in .browser-chrome, right after the urlbar — its own flex
       item now (not page-fixed), so .chrome-urlbar's flex:1 automatically
       shrinks and clears room for it instead of the button floating over
       the corner of the whole reveal panel. */
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(253, 189, 1, 0.5);
    background: rgba(0, 0, 0, 0.5);
    color: var(--lp-gold);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s ease;
}
.landing-body .hiw-reveal.is-solid .hiw-reveal-close { opacity: 1; }
.landing-body .hiw-reveal-close:hover { background: rgba(253, 189, 1, 0.2); }

/* Button depress + neon glow on click. Higher specificity than .btn:hover so
   the press reads even while the cursor sits on the button. */
.landing-body button.hiw-trigger { font-family: inherit; }
.landing-body .hiw-trigger.is-armed {
    transform: translateY(2px) scale(0.97);
    box-shadow: 0 0 26px rgba(253, 189, 1, 0.95), 0 0 70px rgba(253, 189, 1, 0.55);
}
@media (prefers-reduced-motion: reduce) {
    .landing-body .hiw-reveal,
    .landing-body .hex-canvas,
    .landing-body .hiw-trigger { transition: none; }
}

/* CTA */
.landing-body .landing-cta { background: var(--ld-card); border-color: var(--ld-line); }
.landing-body .landing-cta h2 { color: var(--ld-ink); }
.landing-body .landing-cta p  { color: var(--ld-sub); }
.landing-body .landing-cta .btn-primary { background: var(--ld-gold); color: #121212; }

/* Footer */
.landing-body .landing-footer { color: var(--ld-sub); }

/* Trend-tinted card surfaces (landing only) — green for risers, red for fallers */
.landing-body .mock-card:has(.delta-up)   { background: rgba(9,18,13,0.92);   border-color: rgba(46,204,113,0.25); }
.landing-body .mock-card:has(.delta-down) { background: rgba(18,10,10,0.92);  border-color: rgba(231,76,60,0.25); }

/* Neon tint on the % change */
.landing-body .mock-card .mc-change.delta-up {
    color: #4dffa3;
    text-shadow: 0 0 8px rgba(77,255,163,0.6), 0 0 16px rgba(46,204,113,0.4);
}
.landing-body .mock-card .mc-change.delta-down {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255,107,107,0.6), 0 0 16px rgba(231,76,60,0.4);
}

/* Neon tint on the sparklines (match the inline stroke colours) */
.landing-body .mock-card .mc-spark polyline[stroke="#2ecc71"] {
    stroke: #4dffa3;
    filter: drop-shadow(0 0 3px rgba(77,255,163,0.8)) drop-shadow(0 0 6px rgba(46,204,113,0.5));
}
.landing-body .mock-card .mc-spark polyline[stroke="#e74c3c"] {
    stroke: #ff6b6b;
    filter: drop-shadow(0 0 3px rgba(255,107,107,0.8)) drop-shadow(0 0 6px rgba(231,76,60,0.5));
}

/* ── Auth Banners ────────────────────────────────────────────────────────── */
.auth-banner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 500;
}

.auth-banner a { font-weight: 700; text-decoration: underline; }
.auth-banner-error {
    background: rgba(231,76,60,0.15);
    border: 1px solid rgba(231,76,60,0.4);
    color: #ff6b6b;
}
.auth-banner-error a { color: #ff6b6b; }
.auth-banner-success {
    background: rgba(46,204,113,0.15);
    border: 1px solid rgba(46,204,113,0.4);
    color: var(--green);
}
.auth-banner-warning {
    background: rgba(241,196,15,0.15);
    border: 1px solid rgba(241,196,15,0.4);
    color: var(--yellow);
}

/* ── Page Transition ─────────────────────────────────────────────────────── */
.animate-in {
    animation: fadeSlideIn 0.4s ease forwards;
}

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

/* ── Nav Buttons ─────────────────────────────────────────────────────────── */
.nav-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
    background: transparent;
}
.nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,212,170,0.08);
    opacity: 1;
}
.nav-logout {
    font-size: 13px;
    color: var(--muted);
    transition: color 0.15s;
}
.nav-logout:hover { color: var(--red); opacity: 1; }
/* ── Featured Grid ───────────────────────────────────────────────────────── */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}

.featured-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.25s ease, box-shadow 0.3s ease, filter 0.25s ease, border-color 0.2s;
}

.feat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,212,170,0.06);
    border-radius: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(0,212,170,0.15);
}
.feat-icon  { font-size: 24px; }
.feat-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent);
}

.feat-body {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px;
    flex: 1;
}

.feat-left { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.feat-top-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.feat-top-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 25px;   /* drop the name/price/delta block down as a group */
    transform: translateY(-10px);  /* nudge the name only back up — price/delta stay */
}
.feat-top-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
}
.feat-top-change { font-size: 12px; font-weight: 600; }

.feat-right {
    position: relative;
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
}

.feat-spark {
    position: absolute;
    top: 12px;
    left: -6px;
    width: 134.4%;
    height: 176px;
    display: block;
    pointer-events: none;
}

.feat-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.feat-tf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    position: relative;
    z-index: 2;
}

.feat-tf {
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

.feat-tf.active {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.feat-trade-btn {
    display: block;
    text-align: center;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
.feat-trade-btn:hover {
    background: rgba(0,212,170,0.08);
    border-color: var(--accent);
    opacity: 1;
}

.feat-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    padding: 6px;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
}
.feat-expand-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.expand-arrow { font-size: 12px; }

.feat-expanded { margin-top: 4px; }
.feat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    border-top: 1px solid var(--border);
    transition: background 0.15s;
    border-radius: 4px;
}
.feat-row:hover { background: rgba(255,255,255,0.03); opacity: 1; }
.feat-row-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.feat-row-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.feat-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.feat-row-price  { font-size: 13px; font-weight: 700; color: var(--accent); }
.feat-row-change { font-size: 11px; font-weight: 600; }

/* ── Nation Code Badge ───────────────────────────────────────────────────── */
.club-code {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: var(--muted);
    letter-spacing: 0.5px;
}

/* ── Table Section ───────────────────────────────────────────────────────── */
.table-section { margin-top: 8px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: 60px;
    padding-right: 60px; }
.table-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
}
.table-section-header h2 { font-size: 18px; font-weight: 700; }

/* ── Nation Filter ───────────────────────────────────────────────────────── */
.club-filter-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.club-tabs {
    display: flex;
    gap: 6px;
    width: max-content;
}
.club-tab {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.15s;
}
.club-tab.active, .club-tab:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,212,170,0.08);
}

/* ── Player Table ────────────────────────────────────────────────────────── */
.table-player-name { font-weight: 600; font-size: 13px; }
.club-full { font-size: 11px; color: var(--muted); margin-left: 4px; }
.price-cell  { font-weight: 700; color: var(--accent); }
.owned-count { font-size: 12px; color: var(--accent); font-weight: 700; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .featured-grid { grid-template-columns: 1fr; }
    .club-full { display: none; }
}
/* ── Mini Card Grid ──────────────────────────────────────────────────────── */
/* Centered flex-wrap grid so a partial last row (filtered/searched down to a
   count that isn't a multiple of the column count) centers itself instead of
   leaving empty grid columns stranded on the side. flex-basis mirrors the old
   repeat(4,1fr) grid exactly (4 per row with a 12px gap), so full rows render
   pixel-identical to the previous layout. */
.mini-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.mini-grid > .mini-card {
    flex: 0 1 calc((100% - 36px) / 4);
}

.mini-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Allow the card to shrink to its 25% basis — without this, a long nowrap
       name forces the card wider than the basis and breaks the 4-per-row grid. */
    min-width: 0;
    /* No preserve-3d / will-change here: the Market grid has hundreds of mini
       cards, and promoting every one into its own 3D compositing layer (via
       preserve-3d + will-change) grinds the compositor and makes them glitch.
       The tilt/lift live on the card itself, so no child 3D context is needed. */
    transition: transform 0.25s ease, box-shadow 0.3s ease, filter 0.25s ease, border-color 0.15s;
}
.mini-card[data-state="MATCH_LIVE"] { border-color: rgba(231,76,60,0.4); }

/* ── 3D raise — reduced, size-normalised lift (same look on ETF & Market) ──
   The grids get a perspective camera. JS (market.js) tracks the cursor over
   each grid and sets --card-lift / --card-glow / --card-rx / --card-ry by
   proximity. Distance is normalised by each card's half-diagonal, so lift,
   glow and tilt strength are identical whatever the card's size — both pages
   and featured/mini cards read the same. Because the lift is driven by cursor
   position on the grid — not per-card :hover — the card never moves out from
   under the cursor (no jitter), and the transform never captures pointer
   events, so every button inside stays clickable. */
/* No perspective on the grids. A perspective camera scales the near edge of any
   3D-transformed child up (1400/(1400 - z)) — that's what made cards "expand"
   on the dense Market grid even from the tilt. Without it, rotateX/rotateY give
   a clean flat tilt and translateY the rise, with zero size change on any page. */
.featured-grid, .mini-grid { perspective: none; }

.featured-card,
.mini-card {
    /* Top-edge highlight + gentle base shade — reads as a raised tile even at rest */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 38%),
        linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.22)),
        var(--card);
    /* Tilt toward the cursor (--card-rx/--card-ry) on top of the upward raise.
       Note: NO translateZ here — under the grid's perspective it would scale the
       card up (an "expansion") and on the dense Market grid that read as the
       lift being amplified. The rise is pure translateY, tilt gives the 3D. */
    transform:
        rotateX(var(--card-rx, 0deg))
        rotateY(var(--card-ry, 0deg))
        translateY(calc(var(--card-lift, 0) * -0.5px));
    transform-origin: center center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),           /* top edge light */
        inset 0 -18px 28px rgba(0,0,0,0.28),            /* inner base shade for depth */
        0 calc(14px + var(--card-lift, 0) * 0.4px) calc(30px + var(--card-lift, 0) * 0.9px) rgba(0,0,0,0.5), /* resting drop shadow, grows with lift */
        0 0 14px rgba(255,243,209, calc(0.7 * var(--card-glow, 0))),
        0 0 40px rgba(253,189,1, calc(0.5 * var(--card-glow, 0))),
        0 0 90px rgba(253,189,1, calc(0.35 * var(--card-glow, 0)));
    filter: drop-shadow(0 0 14px rgba(253,189,1, calc(0.85 * var(--card-glow, 0))));
}
.featured-card:hover,
.mini-card:hover { z-index: 5; }

/* Mini cards are dense (Market has hundreds), so a bright per-card gold glow
   overlaps into a wall of light that reads as "way more lift" than the same
   glow on a sparse grid. Keep the geometric lift/tilt but mute the halo here so
   Market and ETF mini cards read the same. Featured cards keep the full glow. */
.mini-card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -18px 28px rgba(0,0,0,0.28),
        0 calc(10px + var(--card-lift, 0) * 0.3px) calc(22px + var(--card-lift, 0) * 0.6px) rgba(0,0,0,0.45),
        0 0 8px rgba(255,243,209, calc(0.4 * var(--card-glow, 0))),
        0 0 18px rgba(253,189,1, calc(0.25 * var(--card-glow, 0)));
    filter: drop-shadow(0 0 6px rgba(253,189,1, calc(0.4 * var(--card-glow, 0))));
}

/* ETF and Market share the same centered flex-wrap .mini-grid, so both render
   identical 4-col cards — but a partial last row (non-multiple of the column
   count, or after filtering/searching) stays centered on both pages. */

.mini-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mini-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mini-top-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 10px floor between the name (left) and the sparkline (right). */
    gap: 10px;
    flex: 1;
}

.mini-left { flex: 1; min-width: 0; }

.mini-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    transform: translateY(-10px);   /* lift the name only — nothing else moves */
}

.mini-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.mini-price  { font-size: 18px; font-weight: 700; color: var(--accent); }
.mini-change { font-size: 13px; font-weight: 600; }

/* Delta + sparkline glow: base colour stays as-is, then pulses a glow in that
   same colour (currentColor) on/off, repeating. */
@keyframes miniDeltaGlow {
    0%, 100% { text-shadow: 0 0 0 rgba(0,0,0,0); }
    50%      { text-shadow: 0 0 6px currentColor, 0 0 14px currentColor; }
}
.mini-change { animation: miniDeltaGlow 2.6s ease-in-out infinite; }

@keyframes miniSparkGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
    50%      { filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor); }
}
.mini-spark { animation: miniSparkGlow 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .mini-change, .mini-spark, .feat-top-change, .kpi-spark { animation: none; }
}

.mini-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mini-spark {
    width: 114px;
    height: 89px;  /* +7px card height on Market & ETF (shared mini cards) */
    flex-shrink: 0;
    display: block;
    position: relative;
    left: -20px;   /* shift sparkline 20px left, leaving the tf-row buttons in place */
}
/* ETF page only — nudge the mini sparkline right of the shared Market position. */
.mini-card[data-etf-id] .mini-spark {
    left: 0px;
}

.mini-tf-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.mini-tf {
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 9px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

.mini-tf.active {
    color: var(--accent);
    border-color: var(--accent);
}

.mini-trade-btn {
    display: block;
    text-align: center;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    transition: all 0.15s;
    margin-top: 2px;
}
.mini-trade-btn:hover {
    background: rgba(0,212,170,0.08);
    border-color: var(--accent);
    opacity: 1;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
    .mini-grid > .mini-card { flex: 0 1 calc((100% - 12px) / 2); }
}

@media (max-width: 480px) {
    .mini-grid > .mini-card { flex: 0 1 100%; }
}
/* ── Stock Market Statistics ─────────────────────────────────────────────── */
.stock-stats-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.stock-stats-section h3 { font-size: 14px; margin-bottom: 16px; }

.stock-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stock-stat-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s;
}
.stock-stat-card:hover { border-color: var(--accent); }

.stock-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stock-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

@media (max-width: 768px) {
    .stock-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.featured-card {
    position: relative;
    min-height: 300px; /* needed for the overlay to anchor to */
}

.feat-expanded {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    overflow-y: auto;
    z-index: 10;
    flex-direction: column;
}

.feat-expanded.open {
    display: flex;
}

.feat-expanded-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent);
    position: sticky;
    top: 0;
    background: var(--card);
}

.feat-close-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

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

.feat-expanded .feat-row {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

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

/* ── Macro chart tabs ────────────────────────────────────────────────────── */
.chart-tabs {
    display: flex;
    gap: 4px;
}
.chart-tab {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
}
.chart-tab.active,
.chart-tab:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,212,170,0.08);
}

/* ── Club Badges ─────────────────────────────────────────────────────────── */
.club-badge {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}
/* Mini-card club badge sits top-left and is a bit bigger than the shared size. */
.mini-badges .club-badge {
    width: 22px;
    height: 22px;
}

.detail-club {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
}
.club-badge-detail {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ── ETF kind badges (item 10) — mirrors .pos-badge's shape/sizing ──────── */
.kind-badge.kind-team    { background: rgba(0,212,170,0.15); color: var(--accent); }
.kind-badge.kind-country { background: rgba(124,140,248,0.18); color: #7c8cf8; }

/* ── ETF basket list (etf_detail.html) ───────────────────────────────────── */
.basket-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
}
.basket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s;
}
.basket-row:hover { border-color: var(--accent); }
.basket-row-left { display: flex; align-items: center; gap: 8px; }
.basket-row-name { font-size: 13px; font-weight: 600; }
.basket-row-price { font-size: 13px; font-weight: 700; color: var(--accent); }

/* Holdings + Open Shorts card grid — Portfolio Redesign plan decision E
   (unified Player/ETF grid, plain card, no kind-badge) and decision C
   (Open Shorts reuses the same .holding-card component). */
.holdings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.holding-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s, transform 0.15s;
}
.holding-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.holding-card-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.holding-card-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
}
.holding-card-position { font-size: 12px; color: var(--muted); }
.holding-card-pl { font-size: 13px; font-weight: 600; }
.holding-card .btn { align-self: flex-start; margin-top: 6px; }

/* ══ Landing Redesign — trading terminal ════════════════════════════════════
   Keeps the existing palette: #121212 bg · #1a1a1a surface · #2a2a2a line ·
   #FFFFFF ink · #A0A0AB sub · #FDBD01 gold · #4dffa3 up · #ff6b6b down. */
.landing-body .hero { position: relative; }
/* Faint trading-grid + gold glow wash behind the hero (noise-free, ambience only). */
.landing-body .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 52% at 80% 28%, rgba(253,189,1,0.10), transparent 70%),
        radial-gradient(48% 44% at 18% 72%, rgba(253,189,1,0.06), transparent 70%),
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
}
.landing-body .hero-content,
.landing-body .hero-visual { position: relative; z-index: 1; }

/* ── Live ticker tape (signature) ─────────────────────────────────────────── */
.landing-body .ticker {
    display: flex;
    align-items: stretch;
    margin-top: 1px;   /* a hair of space above the tape */
    height: 42px;
    background: radial-gradient(ellipse 90% 130% at 50% -20%, rgba(253,189,1,0.35), rgba(253,189,1,0.12) 55%, rgba(253,189,1,0.03) 80%), var(--ld-card);
    border-bottom: 1px solid rgba(253,189,1,0.28);
    position: relative;
    z-index: 60;
    overflow: hidden;
}
.landing-body .ticker-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: var(--ld-gold);
    color: #121212;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    border-right: 1px solid rgba(18,18,18,0.18);
}
.landing-body .ticker-label .live-dot { background: #121212; box-shadow: none; animation: pulse-dark 1.2s infinite; }
@keyframes pulse-dark {
    0%   { box-shadow: 0 0 0 0 rgba(18,18,18,0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(18,18,18,0); }
    100% { box-shadow: 0 0 0 0 rgba(18,18,18,0); }
}
.landing-body .ticker-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: ticker-scroll 45s linear infinite;
}
.landing-body .ticker:hover .ticker-track { animation-play-state: paused; }
.landing-body .ticker-group { display: flex; align-items: center; }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.landing-body .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--ld-sub);
    white-space: nowrap;
    position: relative;
    border-radius: 999px;
    margin-right: 8px;
    font-family: 'JetBrains Mono', monospace;
}
.landing-body .ticker-item::after { display: none; }
/* Trend-tinted pill background */
.landing-body .ticker-item.trend-up   { background: var(--lp-up-tint);   border: 1px solid rgba(46,204,113,0.4); }
.landing-body .ticker-item.trend-down { background: var(--lp-down-tint); border: 1px solid rgba(231,76,60,0.4); }

.landing-body .ticker-crest {
    width: 18px; height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--lp-gold-dim);
}
.landing-body .ticker-crest--fallback {
    display: inline-block;
    background: radial-gradient(circle at 35% 30%, #ffe08a, var(--lp-gold) 60%, var(--lp-gold-dim));
    box-shadow: 0 0 0 1px rgba(253,189,1,0.5);
}
.landing-body .ticker-name { color: var(--lp-gold); font-weight: 700; letter-spacing: 0.3px; }
.landing-body .ticker-item i { font-style: normal; color: var(--ld-ink); font-weight: 600; }
.landing-body .ticker-item em.up   { color: var(--lp-green); font-style: normal; font-weight: 700; text-shadow: 0 0 8px rgba(57,255,138,0.5); }
.landing-body .ticker-item em.down { color: var(--lp-red);  font-style: normal; font-weight: 700; text-shadow: 0 0 8px rgba(255,59,59,0.5); }

/* ── Market index (hero thesis) ───────────────────────────────────────────── */
.landing-body .market-index { margin-bottom: 30px; }
.landing-body .mi-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ld-sub);
    margin-bottom: 10px;
}
.landing-body .mi-eyebrow .live-dot { width: 7px; height: 7px; }
.landing-body .mi-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.landing-body .mi-value {
    font-size: 42px;
    font-weight: 800;
    color: var(--ld-ink);
    line-height: 1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 34px rgba(253,189,1,0.35);
}
.landing-body .mi-change { font-size: 13px; font-weight: 700; }
.landing-body .mi-change.up   { color: #4dffa3; }
.landing-body .mi-change.down { color: #ff6b6b; }

/* ── Hero chart panel behind the player deck ──────────────────────────────── */
.landing-body .hero-chart-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border: 1px solid var(--ld-line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(253,189,1,0.05), rgba(18,18,18,0));
}
.landing-body .hc-candle { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.landing-body .hc-line {
    stroke-dasharray: 640;
    stroke-dashoffset: 640;
    animation: hc-draw 2.2s ease forwards;
    filter: drop-shadow(0 0 6px rgba(253,189,1,0.5));
}
@keyframes hc-draw { to { stroke-dashoffset: 0; } }

/* ── How It Works — terminal cards with market-tag eyebrows ───────────────── */
.landing-body .hiw-card { position: relative; overflow: hidden; }
.landing-body .hiw-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ld-gold);
    border: 1px solid rgba(253,189,1,0.45);
    padding: 3px 9px;
    border-radius: 3px;
    margin-bottom: 16px;
}
.landing-body .hiw-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ld-gold), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.landing-body .hiw-card:hover::after { transform: scaleX(1); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.landing-body .landing-footer { padding: 0 0 20px; }
.landing-body .ticker-footer {
    border-top: 1px solid var(--ld-line);
    border-bottom: none;
    height: 38px;
}
.landing-body .ticker-footer .ticker-label {
    background: transparent;
    color: var(--ld-gold);
    border-right: 1px solid var(--ld-line);
    letter-spacing: 1.6px;
}
.landing-body .ticker-footer .ticker-label .live-dot { background: var(--ld-gold); animation: pulse-gold 1.2s infinite; }
@keyframes pulse-gold {
    0%   { box-shadow: 0 0 0 0 rgba(253,189,1,0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(253,189,1,0); }
    100% { box-shadow: 0 0 0 0 rgba(253,189,1,0); }
}
.landing-body .ticker-footer .ticker-item { font-size: 11px; }
.landing-body .landing-footer-copy {
    padding: 18px 20px 0;
    color: var(--ld-sub);
    font-size: 11px;
    letter-spacing: 0.3px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .landing-body .mi-value { font-size: 32px; }
    .landing-body .ticker-label { padding: 0 12px; font-size: 10px; }
    .landing-body .ticker-item { padding: 0 16px; font-size: 11px; }
}
@media (max-width: 480px) {
    .landing-body .mi-value { font-size: 28px; }
    .landing-body .ticker-label { letter-spacing: 0.5px; }
    .landing-body .ticker-footer .ticker-item { display: none; }
}
/* On small screens the honeycomb texture is too busy — drop it, keep the copy. */
@media (max-width: 720px) {
    .landing-body .hex-canvas,
    .landing-body .hero-scrim { display: none; }
    .landing-body .hero--hex { padding: 60px 20px 90px; }
}

/* Respect reduced-motion: freeze the tape + chart draw, hide the glow wash. */
@media (prefers-reduced-motion: reduce) {
    .landing-body .ticker-track { animation: none; }
    .landing-body .hc-line { animation: none; stroke-dashoffset: 0; }
    .landing-body .hero::before { background: none; }
}

.landing-body .hero-logo {
    display: block;
    height: 100px;
    width: auto;
    margin: -50px auto 20px;   /* centered, sits above the subtitle */
}

/* ── Navbar logo — replaces the old emoji mark ───────────────────────────── */
.nav-brand a {
    display: flex;
    align-items: center;
    gap: 9px;
}
.nav-logo {
    height: 26px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* ── Auth pages — Offside Fund brand (login / register) ────────────────────
   OFFSIDE FUND title with green/red neon glow matching the landing page. */
.auth-wrapper {
    background:
        radial-gradient(58% 52% at 80% 28%, rgba(253,189,1,0.08), transparent 70%),
        radial-gradient(48% 44% at 18% 72%, rgba(253,189,1,0.05), transparent 70%),
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
        var(--bg);
    background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
}
.auth-form {
    background: #121212;
    border: 1px solid #2a2a2a;
    box-shadow: 0 0 0 1px rgba(253,189,1,0.06), 0 24px 70px rgba(0,0,0,0.6);
}
.auth-title {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-size: 62px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -1px;
}
.auth-stock {
    color: #39ff8a;
    text-shadow: 0 0 10px rgba(57,255,138,0.9), 0 0 24px rgba(57,255,138,0.5);
}
.auth-xi {
    color: #ff3b3b;
    text-shadow: 0 0 10px rgba(255,59,59,0.9), 0 0 24px rgba(255,59,59,0.5);
}
.auth-subtitle { color: #A0A0AB; }

.auth-form .form-group label {
    font-family: 'JetBrains Mono', monospace;
    color: #A0A0AB;
    letter-spacing: 0.8px;
}
.auth-form .form-group input {
    background: #0a0a0a;
    border-color: #2f2f2f;
    color: #FFFFFF;
}
.auth-form .form-group input::placeholder { color: #5a5a63; }
.auth-form .form-group input:focus { border-color: #FDBD01; }

.auth-form .btn-primary {
    background: #FDBD01;
    color: #121212;
    border: 2px solid #FDBD01;
}
.auth-form .btn-primary:hover:not(:disabled) {
    background: transparent;
    color: #FDBD01;
}

.auth-form a { color: #FDBD01; }
.auth-form a:hover { opacity: 0.85; }
.auth-form .auth-switch { color: #A0A0AB; }

/* ── Auth pages (login / register) — gold NAV bar, reduced height, black buttons ──
   The shared base.html navbar is restyled for auth pages only (scoped via .auth-body). */
.auth-body .navbar {
    background: #FDBD01;              /* gold bar */
    border-bottom: 1px solid #FDBD01;
    height: 52px;                     /* reduced from 68px */
    padding: 0 24px;
}
.auth-body .navbar .nav-brand a { color: #121212; }
.auth-body .navbar .nav-logo { height: 22px; }
.auth-body .navbar .nav-brand-name {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.auth-body .navbar .tournament-badge { background: #121212; color: #FDBD01; }
.auth-body .navbar .nav-links a { color: #121212; }
.auth-body .navbar .nav-links a:hover { color: #121212; opacity: 0.7; }
.auth-body .navbar .nav-links a.btn-ghost,
.auth-body .navbar .nav-links a.btn-primary {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;   /* the gold brand font */
    letter-spacing: 0.5px;
    background: #121212;              /* black button */
    color: #FDBD01;                   /* gold text */
    border: 2px solid #121212;
}
.auth-body .navbar .nav-links a.btn-ghost:hover,
.auth-body .navbar .nav-links a.btn-primary:hover { background: #000; color: #FDBD01; }

/* Error banner — keep semantic red, restyle to the charcoal/gold frame. */
.auth-banner-error {
    background: rgba(255,59,59,0.1);
    border: 1px solid rgba(255,59,59,0.4);
    color: #ff6b6b;
}
.auth-banner-success {
    background: rgba(57,255,138,0.1);
    border: 1px solid rgba(57,255,138,0.35);
    color: #4dffa3;
}

/* ══ Auth redesign — dual-card mechanical flap-board (login / register) ════
   Single page: title, then a two-column grid with the log-in card (left) and
   the sign-up card (right). Pitch-black page; cards sit on #05070a panels.
   Field labels are animated flap rows (see js/auth.js). Scoped to .auth-page
   so the older .auth-wrapper/.auth-form styles (still used by admin.html)
   are left untouched. */
.auth-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 44px 20px 72px;
    color: #FDBD01;   /* gold */
    font-family: 'JetBrains Mono', 'Segoe UI', monospace;
}

/* Title — mirrors the landing-page brand lockup: Orbitron face, green OFFSIDE /
   red FUND with matching neon glows, enlarged for prominence. */
.auth-headline {
    margin: 0 0 34px;
    text-align: center;
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-size: 62px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
}
.auth-head-off {
    color: #39ff8a;
    text-shadow: 0 0 10px rgba(57,255,138,0.9), 0 0 24px rgba(57,255,138,0.5);
}
.auth-head-fund {
    color: #ff3b3b;
    text-shadow: 0 0 10px rgba(255,59,59,0.9), 0 0 24px rgba(255,59,59,0.5);
}

/* Two-column card grid (equal width); stacks on mobile. */
.auth-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.auth-card {
    background: #1a1a1a;   /* charcoal black */
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 26px 24px 30px;
    box-shadow: 0 0 32px rgba(253,189,1,0.30), 0 0 90px rgba(253,189,1,0.15);   /* gold hue/shadow */
}

/* Single-card pages (log-in and sign-up each get their own URL) — center the
   lone card at a narrower width instead of the two-column grid. */
.auth-page--single { max-width: 560px; }
.auth-single .auth-card { width: 100%; }

/* ── Flap row ──────────────────────────────────────────────────────────────
   The whole row is framed as a board with a thin gold outline, so it reads as
   one mechanical display rather than loose cells. */
.flap-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 33px;
    padding: 4px 6px;
    width: fit-content;
    margin-bottom: 10px;
    border: 1px solid rgba(253,189,1,0.55);   /* gold */
    border-radius: 6px;
}
.flap-cell {
    position: relative;
    width: 26px;
    height: 33px;
    background: #1a1a1a;   /* charcoal black */
    border: 1px solid #2a2a2a;
    border-radius: 5px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FDBD01;        /* gold */
    font-family: 'JetBrains Mono', monospace;
    font-size: 19px;
    line-height: 1;
    box-sizing: border-box;
}
/* Fake mechanical split — a dark hairline through the vertical centre. */
.flap-cell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #000000;   /* black */
    pointer-events: none;
}
.flap-cell--space {
    background: transparent;
    border-color: transparent;
}
.flap-cell--space::after { display: none; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.auth-input {
    display: block;
    width: 100%;
    margin-bottom: 22px;
    padding: 12px 14px;
    background: #000000;   /* black */
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #FDBD01;        /* gold text */
    font-family: 'JetBrains Mono', 'Segoe UI', monospace;
    font-size: 13px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-input::placeholder { color: #7a5d00; }  /* dimmed gold */
.auth-input:focus {
    outline: none;
    border-color: #FDBD01;
    box-shadow: 0 0 0 1px rgba(253,189,1,0.25);
}
.auth-input:last-of-type { margin-bottom: 20px; }

/* ── Auth action buttons — gold fill + black font by default; on hover flip to
   gold font on charcoal with a gold border. Shared by create-account, Google,
   and the switch-to-login button. ────────────────────────────────────────── */
.auth-cta {
    display: block;
    width: 100%;
    padding: 13px 16px;
    margin-bottom: 26px;
    background: #FDBD01;        /* gold */
    color: #000000;             /* black font */
    border: 1px solid #FDBD01;
    border-radius: 8px;
    font-family: 'JetBrains Mono', 'Segoe UI', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}
.auth-cta:hover:not(:disabled),
.auth-cta:hover {
    background: #1a1a1a;        /* charcoal */
    color: #FDBD01;             /* gold font */
    border-color: #FDBD01;
    transform: translateY(-1px);
}
.auth-cta:active:not(:disabled) { transform: translateY(0); }
.auth-cta:disabled { opacity: 0.35; cursor: not-allowed; }

.auth-legal-line {
    margin-top: -18px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}
.auth-legal-line a { color: var(--muted); text-decoration: underline; }
.auth-legal-line a:hover { color: #FDBD01; }

/* Switch-to-login button inside the small right card (register). */
.auth-cta--switch {
    margin-bottom: 0;
    padding: 12px 16px;
    font-size: 12px;
}

/* ── reCAPTCHA widget — dark theme matches the charcoal auth card ─────────── */
.g-recaptcha { margin: 14px 0; }

/* ── Resend-verification link (shown only when ?verify=1) ─────────────────── */
.auth-resend { text-align: center; margin-bottom: 20px; }
.auth-link-button {
    display: inline-block;
    padding: 0;
    background: none;
    border: none;
    color: #FDBD01;
    font-family: 'JetBrains Mono', 'Segoe UI', monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.auth-link-button:hover { opacity: 0.8; }

/* ── Google OAuth button — charcoal, thin gold border + gold text ────────── */
.auth-google-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 16px;
    color: #8a8a9a;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.auth-google-sep::before,
.auth-google-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #3a3a3a;
}
.auth-google {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 26px;
    background: #FDBD01;        /* gold */
    color: #000000;             /* black font */
    border: 1px solid #FDBD01;
    border-radius: 8px;
    font-family: 'JetBrains Mono', 'Segoe UI', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}
.auth-google:hover {
    background: #1a1a1a;        /* charcoal */
    color: #FDBD01;             /* gold font */
    border-color: #FDBD01;
    transform: translateY(-1px);
}

/* ── Register 3-card layout modifiers ───────────────────────────────────────
   Form card (top-left) is compact; Google card (top-right) centres its
   button vertically; the bottom switch-to-login card is small + centred. */
.auth-card--form { padding: 20px 18px 22px; }
/* Right column: Google card (top) + switch-to-login card (bottom), stacked at
   natural height and vertically centred — starts below the form's top and ends
   above its bottom instead of stretching the full column. */
.auth-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
/* Both right cards share one height: the Google card's natural height, bumped
   +10%. The switch (login) card is set to the same height so they match. */
.auth-card--google,
.auth-card--switch {
    height: 106px;
}
.auth-card--google {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
/* Shorten the Google button within the narrower right card. */
.auth-card--google .auth-google {
    padding: 10px 12px;
    font-size: 12px;
    margin-bottom: 0;
}
/* Switch card — charcoal black, matching the charcoal+gold palette. */
.auth-card--switch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 18px;
    text-align: center;
    background: #1a1a1a;
    border-color: #2a2a2a;
}

/* ── Static links — gold, consistent with the flap/CTA system ────────────── */
.auth-link {
    display: block;
    text-align: center;
    color: #FDBD01;   /* gold */
    font-size: 12px;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.auth-link:hover { opacity: 0.8; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .auth-cols { grid-template-columns: 1fr; }
    .auth-headline { font-size: 44px; letter-spacing: -1px; }
}
/* ══ Black + Gold theme (Market / ETF / Portfolio) ══════════════════════════
   Scoped to the three trading pages via body class `gold-body`, mirroring the
   landing palette: charcoal-black surfaces on a black page, #FDBD01 gold chrome,
   white ink, grey subtext. Fonts forced to Orbitron. Sizes are left untouched. */
.ico {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

.gold-body {
    background: #000000;
    color: #ffffff;
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
}
.gold-body, .gold-body button, .gold-body input, .gold-body select, .gold-body a,
.gold-body .search-input, .gold-body .tab, .gold-body .club-tab, .gold-body .chart-tab,
.gold-body .btn, .gold-body .nav-btn {
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
}
.gold-body a { color: #FDBD01; }

/* ── Gold navbar (mirrors the landing gold bar) ──────────────────────────── */
.gold-body .navbar {
    background: #FDBD01;
    border-bottom: 1px solid #FDBD01;
}
.gold-body .navbar .nav-brand a,
.gold-body .navbar .nav-brand-name { color: #121212; font-family: 'Orbitron', sans-serif; }
.gold-body .navbar .tournament-badge { background: #121212; color: #FDBD01; }
.gold-body .navbar .nav-links a { color: #121212; }
.gold-body .navbar .nav-links a:hover { color: #121212; opacity: 0.7; }
.gold-body .navbar .wallet-balance { color: #121212; }
.gold-body .navbar .nav-logout { color: #121212; }
.gold-body .navbar .nav-logout:hover { color: #000; opacity: 1; }
.gold-body .navbar .nav-links a.nav-btn,
.gold-body .navbar .nav-links a.btn-ghost,
.gold-body .navbar .nav-links a.btn-primary {
    background: #121212;
    color: #FDBD01;
    border: 1px solid #121212;
}
.gold-body .navbar .nav-links a.nav-btn:hover,
.gold-body .navbar .nav-links a.btn-ghost:hover,
.gold-body .navbar .nav-links a.btn-primary:hover { background: #000; border-color: #000; opacity: 1; }

/* ── Headings & market header ────────────────────────────────────────────── */
.gold-body h1, .gold-body h2, .gold-body h3 { color: #ffffff; }
.gold-body .market-header h1 .ico,
.gold-body h1 .ico { color: #FDBD01; }
.gold-body .market-subtitle { color: #A0A0AB; }
.gold-body .market-stat { background: #1a1a1a; border: 1px solid #2a2a2a; }
.gold-body .stat-num { color: #FDBD01; }
.gold-body .stat-label { color: #A0A0AB; }

/* ── Featured cards ──────────────────────────────────────────────────────── */
.gold-body .featured-card { background: #1a1a1a; border: 1px solid #2a2a2a; }
.gold-body .featured-card:hover { border-color: #FDBD01; }
.gold-body .feat-header {
    background: rgba(253,189,1,0.06);
    border: 1px solid rgba(253,189,1,0.2);
}
.gold-body .feat-icon { color: #FDBD01; }
.gold-body .feat-label { color: #FDBD01; }

/* ── Featured-title flip table ──────────────────────────────────────────────
   Keeps the gold header bar, but the title text becomes a mini mechanical
   flap display — same dark-cell / gold-letter scheme as the login page's
   .flap-row, scaled down to sit inside the bar. Cells are built by auth.js. */
.gold-body .feat-header .flap-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 0;
    padding: 0;
    margin: 0;
    width: fit-content;
    border: none;
    background: transparent;
}
.gold-body .feat-header .flap-cell {
    width: auto;
    height: 30px;
    min-width: 17px;
    padding: 0 4px;
    border-color: rgba(201,162,39,0.55);
    border-radius: 5px;
    font-size: 15px;
    font-weight: 700;
}
.gold-body .feat-header .flap-cell--space {
    background: transparent;
    border-color: transparent;
    min-width: 10px;
}
.gold-body .feat-header .flap-cell--space::after { display: none; }

/* Featured-card delta + KPI sparkline reuse the same pulsing glow as the
   mini cards (colour comes from currentColor / the rendered trend line). */
.gold-body .feat-top-change { animation: miniDeltaGlow 2.6s ease-in-out infinite; }
.gold-body .kpi-spark       { animation: miniSparkGlow 2.6s ease-in-out infinite; }

.gold-body .feat-top-name { color: #ffffff; }
.gold-body .feat-top-price { color: #FDBD01; }
.gold-body .feat-tf { border-color: #2a2a2a; color: #A0A0AB; }
.gold-body .feat-tf:hover { color: #FDBD01; opacity: 1; }
.gold-body .feat-tf.active { color: #FDBD01; border-color: #FDBD01; }
.gold-body .feat-trade-btn { border-color: #2a2a2a; color: #FDBD01; }
.gold-body .feat-trade-btn:hover { background: rgba(253,189,1,0.08); border-color: #FDBD01; opacity: 1; }
.gold-body .feat-expand-btn { border-color: #2a2a2a; color: #A0A0AB; }
.gold-body .feat-expand-btn:hover { border-color: #FDBD01; color: #FDBD01; opacity: 1; }
.gold-body .feat-expanded { background: #1a1a1a; border-color: #FDBD01; }
.gold-body .feat-expanded-header { background: #1a1a1a; color: #FDBD01; border-bottom: 1px solid #2a2a2a; }
.gold-body .feat-close-btn { color: #A0A0AB; }
.gold-body .feat-close-btn:hover { color: #FDBD01; }
.gold-body .feat-row:hover { background: rgba(255,255,255,0.03); opacity: 1; }
.gold-body .feat-row-name { color: #ffffff; }
.gold-body .feat-row-price { color: #FDBD01; }

/* ── Filters & search ────────────────────────────────────────────────────── */
.gold-body .filter-label { color: #A0A0AB; }
.gold-body .tab,
.gold-body .club-tab,
.gold-body .chart-tab {
    background: #121212;
    border: 1px solid #2a2a2a;
    color: #A0A0AB;
}
.gold-body .tab:hover, .gold-body .tab.active,
.gold-body .club-tab:hover, .gold-body .club-tab.active,
.gold-body .chart-tab:hover, .gold-body .chart-tab.active {
    border-color: #FDBD01;
    color: #FDBD01;
    background: rgba(253,189,1,0.08);
}
.gold-body .search-input { background: #121212; border: 1px solid #2a2a2a; color: #ffffff; }
.gold-body .search-input::placeholder { color: #5a5a63; }
.gold-body .search-input:focus { border-color: #FDBD01; }

/* ── Mini cards ──────────────────────────────────────────────────────────── */
.gold-body .mini-card { background: #1a1a1a; border: 1px solid #2a2a2a; }
.gold-body .mini-card:hover { border-color: #FDBD01; }
.gold-body .mini-card[data-state="MATCH_LIVE"] { border-color: rgba(255,59,59,0.5); }
.gold-body .mini-card[data-state="CIRCUIT_BREAKER"] { border-color: rgba(253,189,1,0.5); }
.gold-body .mini-name { color: #ffffff; }
.gold-body .mini-price { color: #FDBD01; }
.gold-body .mini-tf { border-color: #2a2a2a; color: #A0A0AB; }
.gold-body .mini-tf:hover { color: #FDBD01; opacity: 1; }
.gold-body .mini-tf.active { color: #FDBD01; border-color: #FDBD01; }
.gold-body .mini-trade-btn { border-color: #2a2a2a; color: #FDBD01; }
.gold-body .mini-trade-btn:hover { background: rgba(253,189,1,0.08); border-color: #FDBD01; opacity: 1; }

/* ── Badges (unified to gold) ────────────────────────────────────────────── */
.gold-body .pos-badge,
.gold-body .pos-fwd, .gold-body .pos-mid, .gold-body .pos-def, .gold-body .pos-gk,
.gold-body .kind-badge.kind-team, .gold-body .kind-badge.kind-country {
    background: rgba(253,189,1,0.1);
    color: #FDBD01;
}
.gold-body .club-code { background: rgba(255,255,255,0.06); color: #A0A0AB; }
.gold-body .badge-live { background: rgba(255,59,59,0.15); color: #ff5c5c; }
.gold-body .badge-halted, .gold-body .badge-pending { background: rgba(253,189,1,0.15); color: #FDBD01; }
.gold-body .mini-badge { color: inherit; }

/* ── Deltas (landing green/red) ──────────────────────────────────────────── */
.gold-body .delta-up { color: #39ff8a; }
.gold-body .delta-down { color: #ff3b3b; }
.gold-body .pct-small { color: #A0A0AB; }

/* ── Table section ───────────────────────────────────────────────────────── */
.gold-body .table-section-header h2 { color: #ffffff; }
.gold-body .section-count { color: #A0A0AB; }
.gold-body .data-table th { color: #A0A0AB; border-bottom: 1px solid #2a2a2a; }
.gold-body .data-table td { border-bottom: 1px solid rgba(42,42,42,0.5); }
.gold-body .data-table tr:hover td { background: rgba(255,255,255,0.03); }
.gold-body .player-link { color: #ffffff; }
.gold-body .player-link:hover { color: #FDBD01; }

/* ── Portfolio ───────────────────────────────────────────────────────────── */
.gold-body .summary-card { background: #1a1a1a; border: 1px solid #2a2a2a; }
.gold-body .summary-label { color: #A0A0AB; }
.gold-body .summary-val { color: #FDBD01; }
.gold-body .chart-card { background: #1a1a1a; border: 1px solid #2a2a2a; }
.gold-body .chart-title { color: #ffffff; }
.gold-body .chart-empty { color: #A0A0AB; }
.gold-body .holding-card { background: #1a1a1a; border: 1px solid #2a2a2a; }
.gold-body .holding-card:hover { border-color: #FDBD01; }
.gold-body .holding-card-name { color: #ffffff; }
.gold-body .holding-card-price { color: #FDBD01; }
.gold-body .holding-card-position { color: #A0A0AB; }
.gold-body .div-card { background: #1a1a1a; border: 1px solid #2a2a2a; }
.gold-body .div-icon { color: #FDBD01; }
.gold-body .div-label { color: #ffffff; }
.gold-body .div-val { color: #FDBD01; }
.gold-body .div-desc { color: #A0A0AB; }
.gold-body .empty-state { color: #A0A0AB; }
.gold-body .empty-icon { color: #FDBD01; }
.gold-body .empty-state h3 { color: #ffffff; }
.gold-body .empty-state p { color: #A0A0AB; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.gold-body .btn-primary { background: #FDBD01; color: #121212; border: 2px solid #FDBD01; }
.gold-body .btn-primary:hover:not(:disabled) { background: transparent; color: #FDBD01; }
.gold-body .btn-view { background: #121212; color: #FDBD01; border: 1px solid #FDBD01; }
.gold-body .btn-view:hover { background: rgba(253,189,1,0.1); opacity: 1; }
.gold-body .btn-buy { background: #FDBD01; color: #121212; border: 2px solid #FDBD01; }
.gold-body .btn-buy:hover:not(:disabled) { background: transparent; color: #FDBD01; border-color: #FDBD01; }
.gold-body .btn-sell { background: #121212; color: #FDBD01; border: 1px solid #FDBD01; }
.gold-body .btn-sell:hover { background: rgba(253,189,1,0.1); opacity: 1; }

/* ── Player / ETF detail pages — bring the remaining components into the
      gold theme (black cards, gold accents), matching Market / Portfolio. ── */
.gold-body .trade-card,
.gold-body .info-card,
.gold-body .trading-paused {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
}
.gold-body .trade-preview,
.gold-body .stat-box {
    background: #121212;
    border: 1px solid #2a2a2a;
}
.gold-body .trade-card:hover,
.gold-body .info-card:hover,
.gold-body .stock-stat-card:hover { border-color: #FDBD01; }
.gold-body .detail-big-price,
.gold-body .stat-big,
.gold-body .detail-pos { color: #FDBD01; }
.gold-body .state-pill { background: #2a2a2a; color: #A0A0AB; }
.gold-body .detail-club,
.gold-body .detail-breakdown,
.gold-body .balance-line,
.gold-body .season-score,
.gold-body .stock-stat-label { color: #A0A0AB; }
.gold-body .season-score { border-top-color: #2a2a2a; }

/* ── Player / ETF detail — heading sizes +15% ─────────────────────────────── */
.gold-body .chart-title          { font-size: 15px; }
.gold-body .trade-card h3        { font-size: 17px; }
.gold-body .info-card h3         { font-size: 16px; }
.gold-body .stock-stats-section h3 { font-size: 16px; }

/* ── Market Statistics bar: charcoal bar, black cards, gold numbers, and
      +20px breathing room from whatever sits above it. ─────────────────── */
.gold-body .stock-stats-section { margin-top: 20px; }
.gold-body .stock-stats-section { background: #1a1a1a; border: 1px solid #2a2a2a; }
.gold-body .stock-stats-section .stock-stat-card { background: #000000; border: 1px solid #2a2a2a; }
.gold-body .stock-stat-value { color: #FDBD01; }