/* ═══════════════════════════════════════════════════════════
   ThrowSense League – UI Stylesheet
   Reuses :root vars from style.css (--bg, --accent, --text, etc.)
   ═══════════════════════════════════════════════════════════ */

/* ── Top Navigation ── */
.lg-nav {
    background: rgba(8,12,26,0.85);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border);
    padding: .65rem 0;
    min-height: 5rem;       /* deterministic height so subnav offset is stable */
}
/* NOTE: no fixed `height` — the mobile collapsed menu needs to grow.
   We keep the desktop visual size with min-height above; the subnav's
   absolute `top` and the `.lg-page-with-subnav` padding still align
   because both are computed from the same 5rem reference. */
.lg-nav.fixed-top { min-height: 5rem; }
.lg-nav .navbar-brand {
    color: var(--text);
    font-weight: 800;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.lg-nav .navbar-brand img { height: 28px; }
.lg-nav .nav-link {
    color: var(--text-dim);
    font-weight: 600;
    font-size: .9rem;
    padding: .4rem .9rem !important;
    border-radius: var(--radius-xs);
    transition: var(--transition);
}
.lg-nav .nav-link:hover,
.lg-nav .nav-link.active {
    color: var(--text);
    background: rgba(99,102,241,.15);
}

/* ── Admin sub-nav (second row, stacked under the fixed main navbar) ── */
.lg-subnav {
    position: fixed;
    top: 5rem;             /* matches .lg-nav.fixed-top height */
    left: 0;
    right: 0;
    z-index: 1029;         /* Bootstrap fixed-top sits at 1030 */
    padding: .15rem 0;
    background: rgba(8,12,26,0.92);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(14px);
    min-height: 2.25rem;
}
.lg-subnav .nav-link {
    font-size: .82rem;
    padding: .25rem .75rem !important;
}

/* ── Page Container ── */
.lg-page {
    padding-top: 5.5rem;
    padding-bottom: 4rem;
    min-height: 100vh;
}
.lg-page-with-subnav {
    padding-top: 8rem;     /* 5rem main nav + ~2.25rem subnav + breathing room */
}
.lg-page h1, .lg-page h2, .lg-page h3 { color: var(--text); }
.lg-page h1 { font-weight: 800; letter-spacing: -.01em; }

/* ── Hybrid (Variante C) — Navigation (Archivo display + spark accent) ── */
.lg-nav .navbar-brand { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.lg-nav .lg-primary .nav-link { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .8rem; }
.lg-nav .lg-primary .nav-link.active { position: relative; }
.lg-nav .lg-primary .nav-link.active::after { content:""; position:absolute; left:.9rem; right:.9rem; bottom:-.12rem; height:2px; background: var(--spark); border-radius:2px; }
.lg-account-btn { display:flex; align-items:center; gap:.5rem; }
.lg-account-av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:.72rem; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); overflow:hidden; flex:none; }
.lg-account-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ── Hybrid (Variante C) — Eyebrow + Seiten-Header ── */
.lg-eyebrow { font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-3); display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.lg-eyebrow::before { content:""; width:9px; height:9px; background: var(--spark); border-radius:2px; transform: rotate(45deg); flex:none; }
.lg-phead-title { font-family: var(--font-display); font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; line-height: var(--lh-tight); }

/* ── Hybrid (Variante C) — Avatare (Phase 2) ── */
.lg-avatar { display:inline-grid; place-items:center; border-radius:50%; overflow:hidden; flex:none;
    font-family:var(--font-display); font-weight:800; color:#fff; vertical-align:middle; line-height:1;
    background:linear-gradient(135deg, hsl(var(--av-h,220) 55% 55%), hsl(calc(var(--av-h,220) + 40) 60% 42%)); }
.lg-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.lg-avatar-xs { width:22px; height:22px; font-size:.6rem; }
.lg-avatar-sm { width:30px; height:30px; font-size:.72rem; }
.lg-avatar-md { width:40px; height:40px; font-size:.9rem; }
.lg-avatar-lg { width:64px; height:64px; font-size:1.35rem; border-radius:14px; }

/* ── Hybrid (Variante C) — Loading-Skeletons ── */
@keyframes lgShimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.lg-skel { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.04) 63%);
    background-size: 840px 100%; animation: lgShimmer 1.3s ease-in-out infinite; border-radius: var(--radius-xs); }
.lg-skel-row { height: 1rem; margin: .5rem 0; }
.lg-skel-line { height: .72rem; margin: .35rem 0; opacity: .7; }
.lg-skel-av { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.lg-skel-list { padding: .3rem 0; }
.lg-skel-item { display: flex; align-items: center; gap: .8rem; padding: .6rem .1rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.lg-skel-item:last-child { border-bottom: none; }
.lg-skel-grow { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .lg-skel { animation: none; } }

/* ── Hybrid (Variante C) — Tier/Rank-Badges + Focus-Ring (a11y) ── */
.lg-tier { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-display);
    font-weight:800; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
    padding:.2rem .55rem; border-radius:6px; border:1px solid var(--glass-border);
    color:var(--text); background:var(--glass); vertical-align:middle; }
.lg-tier-elite   { background:linear-gradient(120deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff; box-shadow:0 0 12px rgba(99,102,241,.3); }
.lg-tier-gold    { background:rgba(251,191,36,.16); border-color:rgba(251,191,36,.42); color:var(--gold); }
.lg-tier-starter { background:rgba(255,255,255,.05); border-color:var(--glass-border); color:var(--text-dim); }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.lg-page .lg-subtitle { color: var(--text-dim); font-size: 1rem; }

/* ── Cards ── */
.lg-card {
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(12px);
    transition: var(--transition);
}
.lg-card:hover { border-color: rgba(99,102,241,.3); }
.lg-card h3 { font-size: 1.1rem; margin-bottom: 1rem; }

/* ── League Card (browse) ── */
.lg-league-card {
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: var(--transition);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.lg-league-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}
.lg-league-card .lg-badge-row {
    display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem;
}
.lg-league-card h4 { color: var(--text); font-size: 1.1rem; margin: 0 0 .25rem; }
.lg-league-card .lg-desc { color: var(--text-dim); font-size: .85rem; flex: 1; }

/* ── Pills/Badges ── */
.lg-pill {
    display: inline-block;
    padding: .2rem .6rem;
    background: rgba(99,102,241,.18);
    color: var(--accent-3);
    border: 1px solid rgba(99,102,241,.35);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
}
.lg-pill-success { background: rgba(34,197,94,.18); color: #4ade80; border-color: rgba(34,197,94,.4); }
.lg-pill-warn    { background: rgba(251,191,36,.18); color: var(--gold); border-color: rgba(251,191,36,.4); }
.lg-pill-danger  { background: rgba(239,68,68,.18); color: #fca5a5; border-color: rgba(239,68,68,.4); }
.lg-pill-info    { background: rgba(59,130,246,.18); color: #60a5fa; border-color: rgba(59,130,246,.4); }
.lg-pill-mute    { background: rgba(255,255,255,.05); color: var(--text-dim); border-color: var(--glass-border); }

/* ── Tables ── */
.lg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-panel);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--glass-border);
}
.lg-table th {
    background: rgba(99,102,241,.10);
    color: var(--text-dim);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}
.lg-table td {
    padding: .8rem 1rem;
    color: var(--text);
    font-size: .92rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.lg-table tr:last-child td { border-bottom: none; }
.lg-table tr:hover td { background: rgba(99,102,241,.06); }
.lg-table .lg-rank {
    font-weight: 700; color: var(--accent-3); width: 2.5rem;
}
.lg-table .lg-rank-1 { color: var(--gold); }
.lg-table .lg-rank-2 { color: #d1d5db; }
.lg-table .lg-rank-3 { color: #fb923c; }

/* ── Buttons ── */
.btn-lg-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    padding: .55rem 1.4rem;
    transition: var(--transition);
}
.btn-lg-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); color: #fff; }
.btn-lg-ghost {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-weight: 600;
    padding: .5rem 1.2rem;
    transition: var(--transition);
}
.btn-lg-ghost:hover { color: var(--text); border-color: var(--accent); }

/* ── Forms ── */
.lg-form-label {
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .35rem;
}
.lg-form-control,
.lg-page .form-control,
.lg-page .form-select {
    background: rgba(8,12,26,.6) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-xs) !important;
}
.lg-page .form-control:focus,
.lg-page .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.2) !important;
}

/* ── Forms — Phase 3.3 polish (placeholder / hover / disabled / caret / validation) ── */
.lg-page .form-control::placeholder,
.lg-form-control::placeholder,
.lg-page .form-select::placeholder { color: var(--text-dim); opacity: .75; }

.lg-page .form-control:hover:not(:focus):not(:disabled):not([readonly]),
.lg-page .form-select:hover:not(:focus):not(:disabled) {
    border-color: rgba(99,102,241,.55) !important;
}

.lg-page .form-control:disabled,
.lg-page .form-control[readonly],
.lg-page .form-select:disabled {
    opacity: .55 !important;
    cursor: not-allowed;
}

/* Visible caret on dark selects */
.lg-page .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c8db5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .85rem center !important;
    background-size: 14px 12px !important;
    padding-right: 2.4rem !important;
}

/* Labels & help text */
.lg-page .form-label { color: var(--text-dim); font-weight: 600; font-size: .82rem; letter-spacing: .01em; margin-bottom: .35rem; }
.lg-page .form-text { color: var(--text-dim); font-size: .78rem; }

/* Validation states (theme-consistent) */
.lg-page .form-control.is-invalid,
.lg-page .form-select.is-invalid {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important;
}
.lg-page .form-control.is-valid,
.lg-page .form-select.is-valid {
    border-color: var(--spark) !important;
    box-shadow: 0 0 0 3px rgba(201,242,77,.18) !important;
}
.lg-page .invalid-feedback { color: #fca5a5; font-size: .78rem; }
.lg-page .valid-feedback { color: var(--spark); font-size: .78rem; }

/* Checks & switches → brand accent */
.lg-page .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.lg-page .form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}

/* Input-group addon */
.lg-page .input-group-text {
    background: rgba(8,12,26,.6);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
}

/* ── Fixture rows ── */
.lg-fixture {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    margin-bottom: .6rem;
    transition: var(--transition);
}
.lg-fixture:hover { border-color: var(--accent); transform: translateX(2px); }
.lg-fixture .lg-fx-team { flex: 1; min-width: 0; font-weight: 600; color: var(--text); }
.lg-fixture .lg-fx-team.away { text-align: right; }
/* Match rows (any row with a score): keep the home/away columns equal so
   the score stays dead-centred, and truncate long team names instead of
   letting them shove the score/columns out of alignment. Works for the
   3-, 4- and 5-column fixture variants (team / dashboard / detail). */
.lg-fixture:has(.lg-fx-score) .lg-fx-team {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lg-fixture .lg-fx-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-3);
    min-width: 4rem;
    text-align: center;
}
.lg-fixture .lg-fx-meta { color: var(--text-dim); font-size: .78rem; }

/* ── Team logos (standings, fixtures, cup, team cards) ── */
.team-logo {
    display: inline-block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(255,255,255,.06);
    vertical-align: middle;
    margin-right: .45rem;
    flex-shrink: 0;
}
.team-logo-sm { width: 18px; height: 18px; margin-right: .35rem; }
.team-logo-lg { width: 32px; height: 32px; margin-right: .55rem; border-radius: 6px; }
.lg-fixture .lg-fx-team.away .team-logo { margin-right: 0; margin-left: .45rem; }
.team-logo-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-dim);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border);
}

/* ── Alerts ── */
.lg-alert {
    padding: .9rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--bg-panel);
    color: var(--text);
    margin-bottom: 1rem;
}
.lg-alert-success { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.10); }
.lg-alert-error   { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.10); }

/* ── Empty states ── */
.lg-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-dim);
}
.lg-empty .lg-empty-icon { font-size: 2.5rem; margin-bottom: .8rem; opacity: .5; }

/* ── Modal overrides ── */
.lg-page .modal-content {
    background: #0f1737;
    border: 1px solid var(--glass-border);
    color: var(--text);
}
.lg-page .modal-header { border-bottom: 1px solid var(--glass-border); }
.lg-page .modal-footer { border-top: 1px solid var(--glass-border); }

/* ── Tabs ── */
.lg-tabs {
    display: flex;
    gap: .4rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
}
.lg-tab {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: .65rem 1.1rem;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}
.lg-tab:hover { color: var(--text); }
.lg-tab.active {
    color: var(--accent-3);
    border-bottom-color: var(--accent);
}

/* ── Fixtures toolbar ── */
.lg-fx-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: .6rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: .75rem;
}
.lg-fx-subtabs, .lg-fx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}
.lg-subtab {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
    padding: .4rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}
.lg-subtab:hover { color: var(--text); border-color: var(--accent); }
.lg-subtab.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.lg-select {
    background: var(--bg-2, #1f2937);
    color: var(--text);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: .4rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}
.lg-select:focus { border-color: var(--accent); }

/* ── Matchday groups ── */
.lg-matchday {
    margin-bottom: 1.25rem;
}
.lg-matchday-hdr {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    margin-bottom: .5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent);
    border-radius: .5rem;
    font-size: .9rem;
}
.lg-matchday-hdr strong { color: var(--text); }
.lg-matchday-hdr .lg-fx-meta { flex: 1; color: var(--text-dim); font-size: .8rem; }
.lg-pill-warn { background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.3); }

/* ── Matchday navigator ── */
.lg-md-nav {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.lg-md-nav .lg-select { min-width: 12rem; text-align: center; }
.lg-md-nav .lg-subtab[disabled] { opacity: .35; cursor: not-allowed; }

/* ── Responsive ──
   The mobile shell (< 992px) replaces the desktop navbar entirely with
   a slim top bar + bottom tab bar + offcanvas drawer. The desktop
   .lg-nav and .lg-subnav are hidden at this breakpoint so we don't
   fight Bootstrap's collapse pattern (which never fits 7+ utility
   chips on a phone screen anyway). All mobile-shell styles live below
   the @media (max-width: 991.98px) rule. */
@media (max-width: 991.98px) {
    .lg-nav.fixed-top,
    .lg-subnav { display: none !important; }
    /* Print/Fullscreen action chips are desktop-only — useless on
       phones and they collide with the page title. */
    #tsPageActions { display: none !important; }
}

@media (max-width: 768px) {
    .lg-card { padding: 1rem; }
    .lg-fixture { flex-direction: column; align-items: stretch; gap: .4rem; text-align: center; }
    .lg-fixture .lg-fx-team.away { text-align: center; }
}

/* ────────────────────────────────────────────────────────────
   Mobile shell (top bar + bottom tab bar + drawer)
   Visible only below 992px. Above that the desktop navbar
   continues to render unchanged.
   ──────────────────────────────────────────────────────────── */

/* Top bar: ~3.5rem tall, pinned to the top, brand left + actions right. */
.ts-mtopbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    height: 3.5rem;
    padding: 0 .75rem;
    background: rgba(8,12,26,0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1030;
}
.ts-mtb-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .01em;
    min-width: 0;       /* let inner text ellipsis */
    overflow: hidden;
}
.ts-mtb-brand img { height: 26px; flex: 0 0 26px; }
.ts-mtb-name { font-size: 1rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-mtb-tag {
    font-size: .65rem; font-weight: 700; letter-spacing: .05em;
    padding: 2px 6px; border-radius: 999px;
    background: rgba(99,102,241,.18); color: var(--accent-3);
    flex: 0 0 auto;
}
.ts-mtb-actions { display: flex; align-items: center; gap: .4rem; }
.ts-mtb-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: rgba(99,102,241,.15);
    color: var(--text);
    font-weight: 700; font-size: .85rem;
    text-decoration: none;
    border: 1px solid rgba(99,102,241,.25);
}
.ts-mtb-pill-num { font-variant-numeric: tabular-nums; }
.ts-mtb-iconbtn {
    position: relative;
    width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,.04);
    color: var(--text);
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.ts-mtb-iconbtn:hover { background: rgba(99,102,241,.18); }
.ts-mtb-burger { display: inline-flex; flex-direction: column; gap: 4px; }
.ts-mtb-burger > span {
    display: block; width: 18px; height: 2px;
    background: currentColor; border-radius: 2px;
}
.ts-mtb-notifdot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(8,12,26,0.92);
}

/* Bottom tab bar: 5 thumb-reachable buttons, pinned bottom.
   Honours the iOS home-indicator safe area. */
.ts-mbottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(8,12,26,0.95);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--glass-border);
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px rgba(0,0,0,.4);
}
.ts-mbn-tab {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    height: 3.6rem;
    padding: 4px 2px;
    background: transparent; border: 0;
    color: var(--text-dim);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ts-mbn-tab.is-active { color: var(--accent-3); }
.ts-mbn-tab.is-active::before {
    content: ""; position: absolute; top: 0; left: 25%; right: 25%;
    height: 3px; border-radius: 0 0 3px 3px;
    background: var(--accent-3);
}
.ts-mbn-ic { font-size: 1.25rem; line-height: 1; }
.ts-mbn-lbl {
    font-size: .68rem; line-height: 1;
    letter-spacing: .02em;
}
.ts-mbn-tab--center .ts-mbn-ic {
    /* Subtle highlight on the centre Live tab so users notice it. */
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(239,68,68,.18);
    border: 1px solid rgba(239,68,68,.4);
}
.ts-mbn-tab--center.is-active .ts-mbn-ic { background: rgba(239,68,68,.32); }
.ts-mbn-live .lg-live-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #ef4444; display: inline-block;
    box-shadow: 0 0 0 4px rgba(239,68,68,.18);
}
.ts-mbn-badge {
    position: absolute;
    top: 4px; right: calc(50% - 1.4rem);
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #ef4444; color: #fff;
    font-size: .65rem; font-weight: 800;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid rgba(8,12,26,0.95);
}

/* Drawer overrides (uses Bootstrap's .offcanvas as the base). */
.ts-mdrawer {
    width: min(86vw, 340px) !important;
    background: linear-gradient(180deg, rgba(15,23,55,.98) 0%, rgba(8,12,26,.98) 100%) !important;
    border-left: 1px solid var(--glass-border);
    color: var(--text);
}
.ts-mdr-head {
    padding: 1rem 1rem .75rem;
    border-bottom: 1px solid var(--glass-border);
}
.ts-mdr-userrow {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: .75rem;
}
.ts-mdr-avatar {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-3));
    color: #fff; font-weight: 800; font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.ts-mdr-uname { flex: 1; min-width: 0; }
.ts-mdr-uname-main { font-weight: 700; font-size: 1rem; line-height: 1.15; }
.ts-mdr-uname-sub { color: var(--text-dim); font-size: .8rem; margin-top: 2px; }
.ts-mdr-close {
    width: 2.25rem; height: 2.25rem;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,.04);
    color: var(--text);
    border-radius: 10px;
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
}
.ts-mdr-walletcard {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem .8rem;
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.28);
    border-radius: 12px;
    text-decoration: none; color: var(--text);
}
.ts-mdr-walletico { font-size: 1.5rem; }
.ts-mdr-walletbal { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ts-mdr-walletnum { font-weight: 800; font-size: 1.1rem; line-height: 1.1; }
.ts-mdr-walletlbl { color: var(--text-dim); font-size: .75rem; }
.ts-mdr-walletarrow { color: var(--text-dim); font-size: 1.4rem; }

.ts-mdr-body {
    padding: .5rem 0 1.25rem;
    overflow-y: auto;
}
.ts-mdr-sec { padding: .25rem 0; }
.ts-mdr-sec + .ts-mdr-sec {
    margin-top: .25rem;
    border-top: 1px solid var(--glass-border);
    padding-top: .5rem;
}
.ts-mdr-sec-title {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--text-dim);
    padding: .5rem 1rem .25rem;
    margin: 0;
}
.ts-mdr-link {
    display: flex; align-items: center; gap: .8rem;
    width: 100%;
    padding: .7rem 1rem;
    color: var(--text);
    background: transparent;
    border: 0;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    text-align: left;
    transition: var(--transition);
    cursor: pointer;
}
.ts-mdr-link:hover { background: rgba(99,102,241,.12); }
.ts-mdr-link.is-active {
    background: rgba(99,102,241,.18);
    color: var(--text);
    box-shadow: inset 3px 0 0 var(--accent-3);
}
.ts-mdr-link--logout { color: #ef4444; }
.ts-mdr-link--logout:hover { background: rgba(239,68,68,.12); }
.ts-mdr-ic {
    width: 1.5rem; flex: 0 0 1.5rem; text-align: center;
    font-size: 1.1rem;
}
.ts-mdr-ic .lg-live-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #ef4444; display: inline-block;
    box-shadow: 0 0 0 4px rgba(239,68,68,.18);
}
.ts-mdr-count {
    margin-left: auto;
    min-width: 22px; padding: 0 6px; height: 20px;
    background: #ef4444; color: #fff;
    font-size: .7rem; font-weight: 800;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Language row inside the drawer: chips, not a long list. */
.ts-mdr-langrow {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem;
    padding: .65rem 1rem;
}
.ts-mdr-langlbl { color: var(--text); font-weight: 600; font-size: .9rem; }
.ts-mdr-langopts { display: flex; flex-wrap: wrap; gap: .35rem; }
.ts-mdr-langopt {
    padding: .25rem .55rem;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--glass-border);
    font-size: .75rem; font-weight: 700; letter-spacing: .04em;
    color: var(--text-dim);
    text-decoration: none;
    cursor: pointer;
}
.ts-mdr-langopt.is-active {
    background: rgba(99,102,241,.22);
    border-color: rgba(99,102,241,.45);
    color: var(--text);
}

.ts-mdr-clublist {
    padding: 0 .5rem;
    display: flex; flex-direction: column; gap: 2px;
}
.ts-mdr-loading { padding: .65rem 1rem; color: var(--text-dim); font-size: .85rem; }

/* Page padding adjustments for the new mobile shell.
   Top: 3.5rem topbar + 0.5rem breathing room.
   Bottom: 3.6rem tab bar + safe-area inset. */
@media (max-width: 991.98px) {
    .lg-page { padding-top: 4rem !important; padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important; }
    .lg-page-with-subnav { padding-top: 4rem !important; }
}


/* ------------------- Ranking / Bracket ------------------- */
.rk-bracket { display: flex; gap: 1.5rem; overflow-x: auto; padding: 1rem 0; }
.rk-round { display: flex; flex-direction: column; min-width: 240px; }
.rk-round-title { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-3); margin-bottom: .75rem; text-align: center; }
.rk-matches { display: flex; flex-direction: column; gap: 1rem; flex: 1; justify-content: space-around; }
.rk-match { background: rgba(15,23,42,.6); border: 1px solid var(--lg-border); border-radius: .6rem; padding: .5rem .6rem; font-size: .85rem; }
.rk-match-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; font-size: .75rem; color: var(--text-dim); }
.rk-row { display: flex; justify-content: space-between; align-items: center; padding: .25rem .35rem; border-radius: .35rem; margin-bottom: .15rem; }
.rk-row.rk-winner { background: rgba(34,197,94,.12); color: #4ade80; font-weight: 600; }
.rk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-seed { display: inline-block; background: rgba(99,102,241,.15); color: var(--accent-3); font-size: .7rem; padding: 0 .35rem; border-radius: .25rem; margin-right: .25rem; }
.rk-score { font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.rk-score-sub { font-size: .7rem; color: var(--text-dim); margin-left: .25rem; }
.rk-submit { margin-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.rk-inp-row { display: flex; gap: .35rem; }
.rk-photo { margin-top: .4rem; }
.rk-photo img { max-width: 100%; max-height: 100px; border-radius: .3rem; border: 1px solid var(--lg-border); }


/* ════════════════════════════════════════════════════════════════════
   Mobile sweep — global friendliness for the whole league app.
   Applies below 992px, on top of the mobile shell already defined
   above (top bar / bottom tabs / drawer). Intentionally CSS-only so
   we don't have to touch every template.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* ── Typography & spacing breathing room ─────────────────── */
    .lg-page h1, .lg-page .h1 { font-size: 1.4rem; line-height: 1.2; }
    .lg-page h2, .lg-page .h2 { font-size: 1.2rem; line-height: 1.25; }
    .lg-page h3, .lg-page .h3 { font-size: 1.05rem; line-height: 1.3; }
    .lg-page h4, .lg-page .h4 { font-size: .95rem; }
    .lg-card { padding: .85rem; border-radius: 14px; }
    .lg-card + .lg-card { margin-top: .85rem; }

    /* ── Header action bars: always wrap, full-width primary CTA ── */
    .lg-page > .d-flex.gap-2,
    .lg-page > header .d-flex.gap-2,
    .lg-card > .d-flex.gap-2,
    .lg-card-header .d-flex.gap-2,
    .lg-card-actions {
        flex-wrap: wrap !important;
        gap: .5rem !important;
    }
    /* When an action row has only 1-2 buttons, let the primary one
       fill the line on tiny screens. .ts-mb-cta opt-in works too. */
    .lg-card-actions .btn,
    .ts-mb-cta {
        flex: 1 1 auto;
        min-height: 2.5rem;
    }

    /* ── Tables: keep horizontal scroll, smaller font, touch-sized ── */
    .table-responsive { -webkit-overflow-scrolling: touch; border-radius: 10px; }
    table.table { font-size: .82rem; }
    table.table th, table.table td {
        padding: .5rem .55rem;
        vertical-align: middle;
        white-space: nowrap;     /* avoid ugly wraps inside narrow cells */
    }
    /* Auto-wrap any <table> not already inside .table-responsive */
    .lg-card > table:not(.table-responsive table) { display: block; overflow-x: auto; }

    /* Opt-in: turn a wide table into a stacked card list.
       Add class `ts-cards-on-mobile` on the <table> and `data-label`
       on each <td>. The header row hides; each <tr> becomes a card. */
    table.ts-cards-on-mobile { display: block; }
    table.ts-cards-on-mobile thead { display: none; }
    table.ts-cards-on-mobile tbody,
    table.ts-cards-on-mobile tr,
    table.ts-cards-on-mobile td { display: block; width: 100%; }
    table.ts-cards-on-mobile tr {
        background: rgba(15,23,42,.45);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: .55rem .7rem;
        margin-bottom: .6rem;
    }
    table.ts-cards-on-mobile td {
        display: flex; justify-content: space-between; align-items: center;
        gap: .75rem;
        padding: .3rem 0;
        white-space: normal;
        border: 0 !important;
    }
    table.ts-cards-on-mobile td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        color: var(--text-dim);
        font-size: .7rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .06em;
    }
    /* Action cells (no data-label) span full width and align right */
    table.ts-cards-on-mobile td:not([data-label]) {
        justify-content: flex-end;
        padding-top: .5rem;
        border-top: 1px solid var(--glass-border) !important;
        margin-top: .25rem;
    }
    table.ts-cards-on-mobile td:not([data-label]):empty { display: none; }

    /* ── Modals: turn into a bottom sheet on phones ─────────────── */
    .modal.fade .modal-dialog {
        transform: translateY(20px);
    }
    .modal.show .modal-dialog {
        transform: none;
    }
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: stretch;
    }
    .modal-dialog.modal-dialog-centered {
        align-items: flex-end;
    }
    .modal-content {
        width: 100%;
        border-radius: 18px 18px 0 0 !important;
        max-height: 92vh;
        overflow: hidden;
        display: flex; flex-direction: column;
    }
    .modal-content::before {
        /* iOS-style grabber handle */
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: rgba(255,255,255,.18);
        border-radius: 999px;
        margin: .5rem auto .25rem;
        flex: 0 0 auto;
    }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-footer {
        position: sticky; bottom: 0;
        background: var(--bg-panel, rgba(8,12,26,.96));
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    }
    .modal-footer .btn { flex: 1 1 auto; min-height: 2.6rem; }

    /* Force form columns inside modals to stack — many modals use
       col-md-2/3 which only collapses below 768px, leaving phones
       in landscape (≈800px) with cramped 4-up rows. */
    .modal [class*="col-md-"],
    .modal [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .modal .form-control, .modal .form-select { min-height: 2.5rem; }

    /* ── lg-tabs: horizontal scroll, never wrap into 2 rows ─────── */
    .lg-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-left: -.5rem; margin-right: -.5rem;
        padding: 0 .5rem .25rem;
    }
    .lg-tabs::-webkit-scrollbar { display: none; }
    .lg-tabs > * { flex: 0 0 auto; white-space: nowrap; }

    /* ── Bootstrap nav pills/tabs that overflow (admin: 10 tabs) ── */
    .nav.nav-pills, .nav.nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nav.nav-pills::-webkit-scrollbar,
    .nav.nav-tabs::-webkit-scrollbar { display: none; }
    .nav-pills .nav-link, .nav-tabs .nav-link { white-space: nowrap; }

    /* ── btn-group horizontal scroll when crowded (admin intervals) ── */
    .btn-group, .btn-group-sm {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .btn-group::-webkit-scrollbar { display: none; }

    /* ── Forms outside modals: stack col-md-* once it dips below md ── */
    /* Bootstrap already stacks col-md-* below 768px. The 768-991 range
       (tablets / phones in landscape) is where 4-up admin rows feel
       cramped — handled by a tablet-only rule further down. */

    /* Long input groups (e.g. amount + email + button on Cashout) */
    .input-group { flex-wrap: wrap; }
    .input-group > .form-control,
    .input-group > .form-select { min-width: 60%; }

    /* ── Sticky bottom bars must clear our bottom tab bar ───────── */
    .position-sticky.bottom-0,
    .lg-sticky-bottom,
    .ts-sticky-bottom {
        bottom: calc(3.7rem + env(safe-area-inset-bottom)) !important;
    }

    /* ── Cards/rows of pills: ensure they always wrap ───────────── */
    .lg-card .d-flex:not(.lg-tabs):not(.btn-group):not(.nav) {
        flex-wrap: wrap;
    }

    /* ── Buttons inside narrow cards: full width when alone ─────── */
    .lg-card > .btn, .lg-card > form > .btn { width: 100%; min-height: 2.5rem; }

    /* ── Dropdown menus: don't run off the edge of the viewport ── */
    .dropdown-menu { max-width: calc(100vw - 1rem); overflow-x: auto; }
}

/* Tablets / phones in landscape (768–991px): 4-up admin rows feel
   cramped — pull col-md-2/3 to at most 2-up. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .row > [class*="col-md-2"],
    .row > [class*="col-md-3"] { flex: 0 0 50%; max-width: 50%; }
}

/* Extra-small phones (<576px): tighten further. */
@media (max-width: 575.98px) {
    .lg-page { padding-left: .65rem !important; padding-right: .65rem !important; }
    .lg-card { padding: .7rem; }
    table.table { font-size: .78rem; }
    table.table th, table.table td { padding: .4rem .45rem; }
    .ts-mtb-tag { display: none; }     /* free up brand space on tiny screens */

    /* Two-column metric grids: collapse to single column */
    .row.g-2 > .col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* --- Ranking: player-focus mode --- */
.rk-name-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(148,163,184,.45); cursor: pointer; }
.rk-name-link:hover { color: var(--accent-3); border-bottom-color: var(--accent-3); }
.rk-participant-chip { cursor: pointer; user-select: none; }
.rk-participant-chip:hover { background: rgba(99,102,241,.15); border-color: var(--accent-3); }
.rk-focus-hint { margin-bottom: .75rem; display: inline-block; }
.rk-focus-panel { margin-bottom: 1rem; border: 1px solid var(--accent-3); background: rgba(99,102,241,.06); }
.rk-focus-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.rk-focus-title { font-size: 1.1rem; font-weight: 600; margin-bottom: .35rem; }
.rk-focus-stats { display: flex; flex-wrap: wrap; gap: .4rem; }
.rk-focus-section { margin-top: .75rem; }
.rk-focus-section-title { font-size: .95rem; margin: 0 0 .4rem; color: var(--text-dim); }
.rk-focus-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .5rem; }
/* Dim matches in the main bracket that don't involve the focused player */
.rk-focus-mode .rk-match { opacity: .35; transition: opacity .15s ease; }
.rk-focus-mode .rk-match.rk-match--focus { opacity: 1; outline: 1px solid var(--accent-3); }
.rk-focus-mode .rk-focus-panel .rk-match { opacity: 1; }


/* --- Ranking: breadcrumb + tags --- */
.lg-breadcrumb { color: var(--text-dim); font-size: .9rem; }
.lg-breadcrumb a { color: var(--text-dim); text-decoration: none; }
.lg-breadcrumb a:hover { color: #c7d2fe; }
.lg-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.lg-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); border-radius: 999px; font-size: .85rem; }

/* --- Ranking: multi-format bracket styles --- */
.rk-stage-title { margin: 1.25rem 0 .5rem; font-size: 1.05rem; color: var(--text-dim); }
.rk-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.rk-group { background: rgba(255,255,255,.03); border: 1px solid var(--glass-border); border-radius: 12px; padding: .75rem; }
.rk-group-table { font-size: .85rem; margin-bottom: .5rem; }
.rk-swiss-round { margin-bottom: 1rem; }
.rk-swiss-round .rk-matches { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; }

/* ═══════════════════════════════════════════════════════════════
   Phase 4 — Desktop & zoom polish (audit follow-up).
   Targets 992–1400px + browser zoom 125–200%, where the mobile shell
   (<992px) does not apply. CSS-only; no template markup changes.
   ═══════════════════════════════════════════════════════════════ */

/* A1 · Page header: title block ↔ action buttons.
   The shared `.d-flex … justify-content-between align-items-end` header
   bottom-aligned a 2-line title (eyebrow + h1) against 1-line buttons and
   spread them too far under zoom. Center-align + give wrapped rows room. */
.lg-page .d-flex:has(.lg-phead-title) {
    align-items: center !important;
    row-gap: .6rem;
}
@media (max-width: 991.98px) {
    .lg-page .d-flex:has(.lg-phead-title) { align-items: flex-start !important; }
}

/* A2 · Admin form columns: 3-/4-up form fields squeeze at 992–1200px.
   Pull them to 2-up so label+input keep a usable width. Scoped to <form>
   so content grids (feature cards, stat tiles) stay untouched. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .lg-page form .row > [class*="col-md-3"],
    .lg-page form .row > [class*="col-md-4"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* A3 · Modals: clamp modal-lg/-xl so they never overflow laptop widths + zoom. */
@media (max-width: 1200px) {
    .modal-dialog:not(.modal-fullscreen):not(.modal-sm) { max-width: 92vw; }
}

/* B3 · Ranking scope button group: keep each label on one line so the
   .btn-group height stays even (no internal text wrapping). */
#lbScope .btn { white-space: nowrap; }

/* B6 · Tournament prize-pool metrics: tidy wrap grid + keep medal chunks intact. */
#prizePoolBody > .d-flex > div { min-width: 110px; }
#prizePoolBody .ms-2 { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   Spark language — Hybrid lime signature (Variante C).
   Lime (--spark) is an ACCENT used sparingly: one CTA, highlighted names/
   numbers, leaderboard #1, fixture accent bars, live pill, faint glow.
   ═══════════════════════════════════════════════════════════════ */

/* Subtle lime glow, top-right — the Hybrid ambient signature. */
.lg-page {
    background-image: radial-gradient(ellipse 45% 40% at 92% 4%, rgba(201,242,77,.05), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Spark CTA button (use for ONE primary action per page). */
.btn-lg-spark {
    background: var(--spark);
    color: var(--spark-ink);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    padding: .55rem 1.4rem;
    transition: var(--transition);
}
.btn-lg-spark:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,242,77,.3); color: var(--spark-ink); }

/* Text highlight: indigo→lime clipped gradient (for a headline word/name). */
.lg-hl {
    background: linear-gradient(120deg, var(--accent-3), var(--spark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Highlighted key number in lime. */
.lg-num-hl { color: var(--spark); font-variant-numeric: tabular-nums; }

/* Lime "view all" / section link. */
.lg-link {
    color: var(--spark);
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
}
.lg-link:hover { color: var(--spark); filter: brightness(1.1); text-decoration: underline; }

/* Lime pill/badge variant. */
.lg-pill-spark {
    background: rgba(201,242,77,.12);
    color: var(--spark);
    border-color: rgba(201,242,77,.35);
}

/* Fixture accent bar: indigo→lime signature down the left edge. */
.lg-fixture { position: relative; }
.lg-fixture::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), var(--spark));
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    opacity: .55;
    transition: opacity .2s ease;
}
.lg-fixture:hover::before { opacity: 1; }

/* Leaderboard / standings: highlight the #1 row's rank in lime (universal). */
.lg-board tbody tr:first-child td:first-child { color: var(--spark); font-weight: 800; }
/* Global leaderboard only: ELO column in neon-cyan. */
#globalBoard tbody td:last-child { color: var(--neon-cyan); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════
   News Wall — global + per-club announcements (eyecatcher).
   ════════════════════════════════════════════════════════════════════ */

/* Filter pills */
.news-filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.news-filter-btn {
    font-family: var(--font-display); font-weight: 700; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .04em;
    padding: .4rem .9rem; border-radius: 999px; cursor: pointer;
    color: var(--text-dim); background: var(--glass);
    border: 1px solid var(--glass-border); transition: var(--transition);
}
.news-filter-btn:hover { color: var(--text); border-color: var(--accent); }
.news-filter-btn.active {
    color: var(--spark-ink); background: var(--spark); border-color: transparent;
}

/* Card */
.news-card { padding: 0; overflow: hidden; margin-bottom: 1.1rem; }
.news-card::before { display: none; }   /* no fixture-style left bar here */
.news-cover { position: relative; aspect-ratio: 16 / 6; overflow: hidden; background: rgba(255,255,255,.03); }
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-body-wrap { padding: 1.1rem 1.3rem 1rem; }
.news-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.news-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-display); font-weight: 800; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .06em;
    padding: .2rem .55rem; border-radius: 6px; text-decoration: none;
}
.news-chip-global { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.news-chip-club { background: rgba(167,139,250,.14); color: var(--accent-3); border: 1px solid rgba(167,139,250,.3); }
.news-chip-logo { width: 1rem; height: 1rem; border-radius: 50%; object-fit: cover; }
.news-cat { display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:800; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; padding:.18rem .5rem; border-radius:5px; border:1px solid transparent; }
.news-cat-announcement { background:rgba(99,102,241,.14); color:var(--accent-3); border-color:rgba(99,102,241,.3); }
.news-cat-results { background:rgba(34,197,94,.14); color:#4ade80; border-color:rgba(34,197,94,.3); }
.news-cat-event { background:rgba(201,242,77,.14); color:var(--spark); border-color:rgba(201,242,77,.3); }
.news-cat-update { background:rgba(59,130,246,.14); color:#60a5fa; border-color:rgba(59,130,246,.3); }
.news-cat-fun { background:rgba(244,114,182,.14); color:#f472b6; border-color:rgba(244,114,182,.3); }
.news-cat-community { background:rgba(251,191,36,.14); color:var(--gold); border-color:rgba(251,191,36,.3); }
.lg-onboard { padding:.7rem 1rem; border:1px solid var(--glass-border); border-left:3px solid var(--spark); border-radius:10px; background:rgba(201,242,77,.06); font-size:.9rem; }
.lg-onboard-div { color:var(--spark); font-weight:700; }

/* Rich player profile (Phase 5) — public view */
.pf-hl-val { font-size:1.75rem; font-weight:800; letter-spacing:-.02em; }
.pf-info .pf-bio { white-space:pre-wrap; line-height:1.5; }
.pf-chips { display:flex; flex-wrap:wrap; gap:.4rem; }

/* Inline SVG icon set (Phase 1.2 — emoji→SVG nav). Inherits colour + size. */
.ts-ic { width:1em; height:1em; vertical-align:-.125em; flex:0 0 auto; display:inline-block; }
/* Nav icons sit slightly larger than body text for balance. */
.lg-nav .ts-ic, .lg-account-btn .ts-ic, .dropdown-item .ts-ic { width:1.05em; height:1.05em; }
.dropdown-item .ts-ic, .dropdown-header .ts-ic { margin-right:.15em; opacity:.85; }
/* Mobile drawer + bottom-nav icon wrappers already size their glyph; make the
   SVG fill the wrapper's font-size cleanly. */
.ts-mdr-ic .ts-ic { width:1.15em; height:1.15em; }
.ts-mbn-ic .ts-ic { width:1.35em; height:1.35em; }
.ts-mtb-pill .ts-ic, .ts-mdr-walletico .ts-ic { width:1.1em; height:1.1em; }
.news-pin { font-size: .9rem; }
.news-date { color: var(--text-dim); font-size: .72rem; margin-left: auto; }
.news-admin { display: inline-flex; gap: .25rem; }
.news-admin button { background: none; border: none; cursor: pointer; opacity: .6; font-size: .85rem; }
.news-admin button:hover { opacity: 1; }
.news-title {
    font-family: var(--font-display); font-weight: 900; font-size: 1.5rem;
    line-height: 1.15; margin: .1rem 0 .5rem; text-transform: none;
    background: linear-gradient(120deg, var(--text), var(--accent-3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.news-byline { margin-bottom: .7rem; }
.news-author { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-dim); font-size: .8rem; font-weight: 600; }
.news-content { color: var(--text); line-height: 1.65; font-size: .95rem; word-break: break-word; }
.news-content img { max-width: 100%; height: auto; border-radius: 10px; margin: .6rem 0; }
.news-content a { color: var(--accent-3); }
.news-content h1, .news-content h2, .news-content h3 { font-family: var(--font-display); margin: .8rem 0 .4rem; }
.news-content blockquote { border-left: 3px solid var(--spark); padding-left: .9rem; margin: .7rem 0; color: var(--text-dim); }
.news-content ul, .news-content ol { padding-left: 1.4rem; }

/* Actions */
.news-actions { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.news-reacts { display: flex; flex-wrap: wrap; gap: .3rem; }
.news-react {
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px;
    padding: .12rem .5rem; font-size: .9rem; cursor: pointer; display: inline-flex;
    align-items: center; gap: .25rem; transition: var(--transition);
}
.news-react:hover { border-color: var(--accent); }
.news-react.is-on { border-color: var(--spark); background: rgba(201,242,77,.12); }
.news-react-n { font-size: .7rem; font-weight: 700; color: var(--text-dim); }
.news-comment-toggle {
    margin-left: auto; background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: 999px; padding: .12rem .6rem; font-size: .8rem; color: var(--text-dim); cursor: pointer;
}
.news-comment-toggle:hover { color: var(--text); border-color: var(--accent); }

/* Comments */
.news-comments { margin-top: .8rem; border-top: 1px solid var(--glass-border); padding-top: .8rem; }
.news-c-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .6rem; }
.news-c { display: flex; gap: .5rem; }
.news-c-body { flex: 1; min-width: 0; }
.news-c-head { display: flex; align-items: center; gap: .5rem; font-size: .78rem; }
.news-c-date { color: var(--text-dim); font-size: .7rem; }
.news-c-del { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; }
.news-c-text { font-size: .88rem; color: var(--text); word-break: break-word; }
.news-c-form { display: flex; gap: .4rem; }

/* ── WYSIWYG editor ── */
.news-editor .ne-cover-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ne-cover-prev img { height: 46px; border-radius: 8px; border: 1px solid var(--glass-border); }
.ne-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .15rem;
    padding: .35rem; border: 1px solid var(--glass-border); border-bottom: none;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: rgba(8,12,26,.6);
    position: relative;
}
.ne-toolbar button {
    min-width: 2rem; height: 2rem; border: 1px solid transparent; border-radius: 6px;
    background: none; color: var(--text-dim); cursor: pointer; font-size: .9rem;
}
.ne-toolbar button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.ne-sep { width: 1px; height: 1.3rem; background: var(--glass-border); margin: 0 .2rem; }
.ne-editable {
    min-height: 180px; max-height: 460px; overflow-y: auto;
    border-radius: 0 0 var(--radius-xs) var(--radius-xs); line-height: 1.6;
}
.ne-editable:empty::before { content: attr(data-ph); color: var(--text-dim); }
.ne-editable img { max-width: 100%; border-radius: 8px; }
.ne-emoji-pop {
    position: absolute; top: 2.4rem; right: .5rem; z-index: 20;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: .1rem;
    padding: .4rem; background: var(--bg-panel); backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border); border-radius: 10px; box-shadow: var(--shadow-card);
}
.ne-emoji-pop button { background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: .15rem; }
.ne-emoji-pop button:hover { background: rgba(255,255,255,.08); border-radius: 6px; }
.ne-actions { display: flex; align-items: center; gap: .6rem; }
.ne-status { color: var(--text-dim); font-size: .8rem; }

/* ── Dashboard teaser ── */
.news-teaser-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.news-t-item {
    display: flex; gap: .6rem; align-items: center; text-decoration: none; color: inherit;
    padding: .5rem; border: 1px solid var(--glass-border); border-radius: 12px;
    background: rgba(255,255,255,.02); transition: var(--transition);
}
.news-t-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.news-t-thumb { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.05); }
.news-t-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-t-txt { min-width: 0; }
.news-t-chip { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-3); }
.news-t-title { font-weight: 700; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 768px) {
    .news-title { font-size: 1.25rem; }
    .news-cover { aspect-ratio: 16 / 9; }
    .news-body-wrap { padding: .9rem 1rem; }
}

/* ─── Newsroom (Phase 6.1): league-wall category badges + filter pills ─── */
.wall-cat-badge{display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.4;padding:.08rem .45rem;border-radius:1rem;border:1px solid var(--glass-border,#33415577);color:var(--text-muted,#94a3b8);}
.wall-cat-news{color:#c7d2fe;border-color:#6366f199;background:rgba(99,102,241,.12);}
.wall-cat-community{color:#99f6e4;border-color:#14b8a699;background:rgba(20,184,166,.12);}
.wall-cat-deadline{color:#fcd34d;border-color:#f59e0b99;background:rgba(245,158,11,.12);}
.wall-cat-update{color:#ddd6fe;border-color:#8b5cf699;background:rgba(139,92,246,.12);}
.wall-cat-fun{color:var(--spark,#c9f24d);border-color:#c9f24d99;background:rgba(201,242,77,.1);}
.wall-filter-bar{display:flex;flex-wrap:wrap;gap:.35rem;}
.wall-filter{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:.15rem .55rem;border-radius:1rem;border:1px solid var(--glass-border,#33415577);background:transparent;color:var(--text-muted,#94a3b8);cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.wall-filter:hover{border-color:var(--accent-3,#6366f1);color:var(--text,#e2e8f0);}
.wall-filter.active{background:rgba(99,102,241,.18);border-color:var(--accent-3,#6366f1);color:#c7d2fe;}

/* ─── Weekly Challenges (G6): engagement loop cards + progress bar ─── */
.ch-item{border:1px solid var(--glass-border,#33415577);border-radius:.6rem;padding:.6rem .7rem;margin-bottom:.6rem;}
.ch-item.ch-done{border-color:var(--spark,#c9f24d);background:rgba(201,242,77,.06);}
.ch-bar{height:.45rem;border-radius:1rem;background:rgba(148,163,184,.18);overflow:hidden;margin-top:.4rem;}
.ch-bar > span{display:block;height:100%;border-radius:1rem;background:linear-gradient(90deg,var(--accent-3,#6366f1),var(--spark,#c9f24d));transition:width .3s;}

/* ═══ mega_internal FX — tasteful in-app eyecatchers (dev/beta) ═══════ */
/* Floating control cluster: FX-level chip + live accent dots (bottom-left).
   Hidden on mobile (thumb bottom-nav owns that corner). */
.mega-ctrls{
    position:fixed; left:1rem; bottom:1rem; z-index:1150;
    display:flex; align-items:center; gap:.55rem;
    padding:.35rem .5rem; border-radius:1.4rem;
    background:rgba(10,14,26,.72); border:1px solid var(--glass-border,#33415577);
    backdrop-filter:blur(10px); box-shadow:0 8px 26px rgba(0,0,0,.4);
}
.mega-fxlevel{
    font-family:var(--font-display,inherit); font-size:.72rem; font-weight:800;
    letter-spacing:.04em; text-transform:uppercase;
    padding:.25rem .6rem; border-radius:1rem; cursor:pointer;
    color:var(--text,#e2e8f0); background:rgba(148,163,184,.12);
    border:1px solid var(--glass-border,#33415577); transition:background .15s,border-color .15s,color .15s;
}
.mega-fxlevel:hover{ border-color:var(--accent,#6366f1); color:#fff; }
.mega-fxlevel[data-level="off"]{ opacity:.7; }
.mega-fxlevel[data-level="full"]{ border-color:var(--accent,#6366f1); color:#c7d2fe; }
.mega-ctrls-accents{ display:flex; align-items:center; gap:.3rem; }
.mega-ctrls .mega-accent-dot{
    width:15px; height:15px; border-radius:50%; padding:0; cursor:pointer;
    border:2px solid transparent; transition:transform .12s,border-color .12s; flex:none;
}
.mega-ctrls .mega-accent-dot:hover{ transform:scale(1.18); }
.mega-ctrls .mega-accent-dot.active{ border-color:#fff; transform:scale(1.12); }
@media (max-width:992px){ .mega-ctrls{ display:none; } }

/* Inline stat ring (conic donut) rendered before a value by [data-mega-gauge] */
.mega-ring{
    --pct:0;
    display:inline-block; width:1.45em; height:1.45em; border-radius:50%;
    vertical-align:-.32em; margin-right:.4rem; flex:none;
    background:conic-gradient(var(--accent,#6366f1) calc(var(--pct) * 1%), rgba(148,163,184,.18) 0);
    -webkit-mask:radial-gradient(circle, transparent 54%, #000 56%);
            mask:radial-gradient(circle, transparent 54%, #000 56%);
}

/* Magnetic tilt cards (opt-in via [data-mega-tilt]) */
.mega-tilt{ position:relative; transition:transform .18s ease; transform-style:preserve-3d; will-change:transform; }
.mega-tilt .mega-glare{
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    opacity:0; transition:opacity .2s ease; mix-blend-mode:screen;
}

/* Celebratory confetti (self-contained, no deps) */
.mega-confetti{ position:fixed; inset:0; pointer-events:none; z-index:2000; }
.mega-confetti-pc{
    position:absolute; width:9px; height:14px; border-radius:2px;
    opacity:1; transition:transform 1.2s cubic-bezier(.2,.7,.3,1), opacity 1.2s ease;
}

/* FX-level "off" strips the heavier CSS-only flourishes immediately */
html[data-mega-level="off"] .mega-glowborder::after{ display:none !important; }
html[data-mega-level="off"] .mega-glowborder{ box-shadow:none; }

@media (prefers-reduced-motion: reduce){
    .mega-tilt{ transition:none; }
    .mega-confetti-pc{ transition:none; }
}

/* ═══ Competition highlights: FREE (no Bullseyes) + AVG-gated ══════ */
/* An eye-catching ring (works over both bordered cards and the inline-styled
   quick-event cards, since it rides on box-shadow) plus matching badges. */
.comp-free{ box-shadow: inset 0 0 0 2px rgba(34,197,94,.6), 0 0 16px rgba(34,197,94,.20); }
.comp-avg{ box-shadow: inset 0 0 0 2px rgba(99,102,241,.6), 0 0 16px rgba(99,102,241,.22); }
.comp-free.comp-avg{ box-shadow: inset 0 0 0 2px rgba(34,197,94,.6), 0 0 18px rgba(99,102,241,.24); }
.comp-badge-free{
    background:rgba(34,197,94,.16) !important; color:#86efac !important;
    border:1px solid rgba(34,197,94,.45); font-weight:700;
}
.comp-badge-avg{
    background:rgba(99,102,241,.16) !important; color:#c7d2fe !important;
    border:1px solid rgba(99,102,241,.45); font-weight:700;
}