/* ═══════════════════════════════════════════════════════
   KAIKAI FOIL LADDER — COMPETITIVE LEADERBOARD
   Dark mode · Tier-coded · Animated · Mobile-first
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── Tier palette ────────────────────────────── */
:root {
    --ldr-bg:          #111318;
    --ldr-surface:     #1a1d24;
    --ldr-surface-2:   #22262e;
    --ldr-border:      rgba(255,255,255,.06);
    --ldr-text:        #c8d4e0;
    --ldr-text-dim:    #5a6a7e;
    --ldr-text-bright: #eaf0f6;

    /* Champion — molten gold */
    --tier-champ:       #f5b731;
    --tier-champ-glow:  rgba(245,183,49,.25);
    --tier-champ-bg:    rgba(245,183,49,.06);
    --tier-champ-border:rgba(245,183,49,.18);

    /* Diamond — electric cyan */
    --tier-diamond:       #00d4ff;
    --tier-diamond-glow:  rgba(0,212,255,.2);
    --tier-diamond-bg:    rgba(0,212,255,.04);
    --tier-diamond-border:rgba(0,212,255,.12);

    /* Platinum — amethyst */
    --tier-plat:       #a78bfa;
    --tier-plat-glow:  rgba(167,139,250,.18);
    --tier-plat-bg:    rgba(167,139,250,.04);
    --tier-plat-border:rgba(167,139,250,.10);

    /* Standard */
    --tier-std-bg:     transparent;
    --tier-std-border: var(--ldr-border);

    /* Signals */
    --sig-up:    #22d67a;
    --sig-down:  #ff4757;
    --sig-hot:   #22d67a;
    --sig-warm:  #f5b731;
    --sig-cold:  #5a6a7e;

    /* CTA */
    --cta-bg:    linear-gradient(135deg, #22c55e, #16a34a);
    --cta-glow:  rgba(34,197,94,.3);

    /* Fonts */
    --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --f-body:    'Outfit', 'Segoe UI', sans-serif;

    --ldr-radius: 8px;
}

/* ── Sticky HUD (your rank bar) ──────────────── */
.ldr-sticky-hud {
    position: fixed;
    top: 64px; /* below nav */
    left: 0; right: 0;
    z-index: 90;
    background: rgba(8,12,20,.92);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--ldr-border);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    pointer-events: none;
}

.ldr-sticky-hud.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.ldr-hud-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ldr-hud-rank {
    display: flex;
    align-items: baseline;
    font-family: var(--f-display);
}

.ldr-hud-hash {
    font-size: .9rem;
    font-weight: 600;
    color: var(--tier-champ);
    opacity: .6;
}

.ldr-hud-num {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--tier-champ);
    line-height: 1;
    letter-spacing: -.02em;
}

.ldr-hud-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ldr-hud-name {
    font-family: var(--f-body);
    font-weight: 600;
    font-size: .85rem;
    color: var(--ldr-text-bright);
}

.ldr-hud-record {
    font-family: var(--f-display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.ldr-w { color: var(--sig-up); }
.ldr-l { color: var(--sig-down); }

.ldr-hud-actions { margin-left: auto; }

.ldr-hud-btn {
    font-family: var(--f-display);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 7px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: all .2s ease;
}

.ldr-hud-btn-find {
    background: rgba(255,255,255,.08);
    color: var(--ldr-text);
    border: 1px solid rgba(255,255,255,.12);
}

.ldr-hud-btn-find:hover { background: rgba(255,255,255,.14); color: #fff; }

.ldr-hud-btn-log {
    background: var(--cta-bg);
    color: #fff;
    border: none;
}

.ldr-hud-btn-log:hover { filter: brightness(1.15); color: #fff; }

/* ── Hero banner ─────────────────────────────── */
.ldr-hero {
    position: relative;
    background: var(--ldr-bg);
    padding: 56px 20px 40px;
    overflow: hidden;
    text-align: center;
}

.ldr-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,212,255,.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 100%, rgba(245,183,49,.05) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(255,77,77,.04) 0%, transparent 60%);
    pointer-events: none;
}

/* Animated diagonal scan line */
.ldr-hero-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(0,212,255,.04) 50%, transparent 60%);
    animation: heroScan 6s ease-in-out infinite;
    will-change: transform;
}

@keyframes heroScan {
    0%, 100% { transform: translateX(-200%); }
    50%      { transform: translateX(300%); }
}

.ldr-hero-content { position: relative; z-index: 1; }

.ldr-hero-badge {
    display: inline-block;
    font-family: var(--f-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tier-diamond);
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.15);
    padding: 4px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.ldr-hero-title {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 2.8rem;
    letter-spacing: .02em;
    line-height: 1.05;
    margin-bottom: 6px;
    color: var(--ldr-text-bright);
}

.ldr-hero-sub {
    display: block;
    font-family: var(--f-body);
    font-size: .82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--ldr-text-dim);
    margin-bottom: 14px;
}

.ldr-hero-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ldr-border) 20%, rgba(34,197,94,.18) 50%, var(--ldr-border) 80%, transparent);
}

.ldr-hero-meta {
    font-family: var(--f-body);
    font-size: .8rem;
    color: var(--ldr-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ldr-hero-sep { opacity: .3; }

/* ── My Ladders quick-switch ─────────────────── */
.ldr-my-wrap {
    background: var(--ldr-surface);
    border-bottom: 1px solid var(--ldr-border);
}

.ldr-my-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ldr-my-label {
    font-family: var(--f-display);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ldr-text-dim);
    white-space: nowrap;
    flex-shrink: 0;
}

.ldr-my-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ldr-my-tab {
    padding: 5px 14px;
    font-size: .74rem;
    border-color: rgba(0,212,255,.15);
    background: rgba(0,212,255,.04);
}

.ldr-my-tab:hover {
    border-color: rgba(0,212,255,.3);
    background: rgba(0,212,255,.08);
    color: var(--tier-diamond);
}

.ldr-my-tab.ldr-tab--active {
    background: var(--tier-diamond);
    border-color: var(--tier-diamond);
    color: var(--ldr-bg);
}

.ldr-my-tab.ldr-tab--active:hover {
    background: #00c0ea;
    border-color: #00c0ea;
    color: var(--ldr-bg);
}

.ldr-my-tab.ldr-tab--active .ldr-tab-count {
    background: rgba(0,0,0,.2);
    color: var(--ldr-bg);
}

@media (max-width: 600px) {
    .ldr-my-inner { padding: 6px 12px; gap: 8px; }
    .ldr-my-tab { padding: 4px 10px; font-size: .7rem; }
    .ldr-my-tab .ldr-tab-label { display: none; }
    .ldr-my-tab .ldr-tab-short { display: inline; }
}

/* ── Division pills ──────────────────────────── */
.ldr-tabs-wrap {
    background: var(--ldr-bg);
    border-bottom: 1px solid var(--ldr-border);
    position: sticky;
    top: 64px;
    z-index: 80;
}

.ldr-tabs {
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.ldr-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-family: var(--f-display);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ldr-text-dim);
    text-decoration: none;
    border-radius: 20px;
    border: 1px solid var(--ldr-border);
    background: transparent;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.ldr-tab:hover {
    color: var(--ldr-text);
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
}

.ldr-tab--active {
    background: var(--sig-up);
    border-color: var(--sig-up);
    color: #fff;
}

.ldr-tab--active:hover {
    background: #1ec96e;
    border-color: #1ec96e;
    color: #fff;
}

.ldr-tab--active .ldr-tab-count {
    background: rgba(255,255,255,.2);
    color: #fff;
}

.ldr-tab-short {
    display: none;
}

.ldr-tab-count {
    font-size: .62rem;
    font-weight: 800;
    background: rgba(255,255,255,.06);
    color: var(--ldr-text-dim);
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
    transition: background .2s ease, color .2s ease;
}

/* ── Main container ──────────────────────────── */
.ldr-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px 60px 20px;
    background: var(--ldr-bg);
    min-height: 50vh;
    position: relative;
}

/* ── Column headers ──────────────────────────── */
.ldr-colheads {
    display: grid;
    grid-template-columns: 72px 1fr 120px 64px 90px 120px;
    align-items: center;
    padding: 16px 16px 10px;
    font-family: var(--f-display);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ldr-text-dim);
    border-bottom: 1px solid var(--ldr-border);
}

/* ── Match connector SVG ─────────────────────── */
.ldr-list {
    position: relative;
    padding-bottom: 20px;
}

.ldr-match-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.ldr-row--in-match {
    background: rgba(255,255,255,.02);
}

.ldr-row--in-match::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--sig-up);
    opacity: .6;
}

.ldr-row {
    display: grid;
    grid-template-columns: 72px 1fr 120px 64px 90px 120px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ldr-border);
    transition: all .25s cubic-bezier(.22,1,.36,1);
    position: relative;
    animation: rowSlideIn .5s cubic-bezier(.22,1,.36,1) both;
    animation-delay: var(--anim-delay);
}

@keyframes rowSlideIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ldr-row:hover {
    background: var(--ldr-surface);
    border-color: transparent;
}

/* Tier left accent strip */
.ldr-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transition: opacity .25s ease;
}

.ldr-row:hover::before { opacity: 1; }

/* Champion tier */
.ldr-row--champion {
    background: var(--tier-champ-bg);
    border-color: var(--tier-champ-border);
}
.ldr-row--champion::before { background: var(--tier-champ); opacity: 1; }
.ldr-row--champion:hover { background: rgba(245,183,49,.1); }

/* Diamond tier */
.ldr-row--diamond { background: var(--tier-diamond-bg); border-color: var(--tier-diamond-border); }
.ldr-row--diamond::before { background: var(--tier-diamond); }
.ldr-row--diamond:hover { background: rgba(0,212,255,.07); }

/* Platinum tier */
.ldr-row--platinum { background: var(--tier-plat-bg); border-color: var(--tier-plat-border); }
.ldr-row--platinum::before { background: var(--tier-plat); }
.ldr-row--platinum:hover { background: rgba(167,139,250,.07); }

/* Standard */
.ldr-row--standard::before { background: var(--ldr-text-dim); }

/* Current user highlight */
.ldr-row--me {
    background: rgba(0,212,255,.06) !important;
    border: 1px solid rgba(0,212,255,.18) !important;
    border-radius: var(--ldr-radius);
    margin: 4px 0;
}

.ldr-row--me::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--ldr-radius);
    background: linear-gradient(135deg, rgba(0,212,255,.1), transparent, rgba(245,183,49,.06));
    pointer-events: none;
    z-index: -1;
}

/* ── Cells ───────────────────────────────────── */
.ldr-cell { display: flex; align-items: center; }

/* Rank badge */
.ldr-cell-rank { justify-content: center; }

.ldr-rank-badge {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 1.15rem;
    position: relative;
    transition: transform .2s ease;
}

.ldr-row:hover .ldr-rank-badge { transform: scale(1.08); }

.ldr-rank-badge--champion {
    background: linear-gradient(145deg, rgba(245,183,49,.2), rgba(245,183,49,.08));
    color: var(--tier-champ);
    border: 1px solid var(--tier-champ-border);
    box-shadow: 0 0 20px var(--tier-champ-glow);
}

.ldr-rank-badge--diamond {
    background: linear-gradient(145deg, rgba(0,212,255,.15), rgba(0,212,255,.05));
    color: var(--tier-diamond);
    border: 1px solid var(--tier-diamond-border);
}

.ldr-rank-badge--platinum {
    background: rgba(167,139,250,.08);
    color: var(--tier-plat);
    border: 1px solid var(--tier-plat-border);
}

.ldr-rank-badge--standard {
    background: var(--ldr-surface-2);
    color: var(--ldr-text-dim);
    border: 1px solid var(--ldr-border);
}

.ldr-rank-num { position: relative; z-index: 1; }

.ldr-crown {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    color: var(--tier-champ);
    filter: drop-shadow(0 0 4px var(--tier-champ-glow));
    animation: crownFloat 3s ease-in-out infinite;
}

@keyframes crownFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-2px); }
}

/* Rider info */
.ldr-cell-rider {
    gap: 12px;
    min-width: 0;
}

.ldr-rider-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: .7rem;
    letter-spacing: .02em;
    flex-shrink: 0;
    color: var(--ldr-text-dim);
    border: 1px solid var(--ldr-border);
    background: var(--ldr-surface-2);
    overflow: hidden;
}

.ldr-rider-avatar--champion { color: var(--tier-champ); border-color: var(--tier-champ-border); background: var(--tier-champ-bg); }
.ldr-rider-avatar--diamond  { color: var(--tier-diamond); border-color: var(--tier-diamond-border); background: var(--tier-diamond-bg); }
.ldr-rider-avatar--platinum { color: var(--tier-plat); border-color: var(--tier-plat-border); background: var(--tier-plat-bg); }
.ldr-rider-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

.ldr-rider-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ldr-rider-name {
    font-family: var(--f-body);
    font-weight: 600;
    font-size: .9rem;
    color: var(--ldr-text-bright);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease;
}

.ldr-rider-name:hover { color: var(--tier-diamond); }

.ldr-you-tag {
    display: inline-block;
    font-family: var(--f-display);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--tier-diamond);
    color: var(--ldr-bg);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

.ldr-rider-div {
    font-size: .7rem;
    color: var(--ldr-text-dim);
}

/* Record */
.ldr-cell-record {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ldr-record-bar {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 3px;
}

.ldr-record-w { color: var(--sig-up); }
.ldr-record-dash { color: var(--ldr-text-dim); font-size: .7rem; }
.ldr-record-l { color: var(--sig-down); }

.ldr-winrate {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.ldr-winrate-track {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,.06);
    border-radius: 2px;
    overflow: hidden;
}

.ldr-winrate-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sig-up), var(--tier-diamond));
    border-radius: 2px;
    transition: width .6s cubic-bezier(.22,1,.36,1);
}

.ldr-winrate-pct {
    font-family: var(--f-display);
    font-size: .6rem;
    font-weight: 700;
    color: var(--ldr-text-dim);
    min-width: 28px;
}

/* Rank movement */
.ldr-cell-move { justify-content: center; }

.ldr-move {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: .8rem;
}

.ldr-move svg { width: 12px; height: 12px; }

.ldr-move--up { color: var(--sig-up); }
.ldr-move--down { color: var(--sig-down); }
.ldr-move--flat { color: var(--ldr-text-dim); font-size: .7rem; }

/* Pulse animation for rank-up */
.ldr-move--up {
    animation: pulseUp 2s ease-in-out infinite;
}

@keyframes pulseUp {
    0%, 100% { opacity: 1; }
    50%      { opacity: .6; }
}

/* Active status */
.ldr-cell-active {
    gap: 6px;
}

.ldr-active-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ldr-active-dot--hot  { background: var(--sig-hot); box-shadow: 0 0 6px var(--sig-hot); }
.ldr-active-dot--warm { background: var(--sig-warm); }
.ldr-active-dot--cold { background: var(--sig-cold); opacity: .5; }

.ldr-active-text {
    font-family: var(--f-body);
    font-size: .75rem;
    color: var(--ldr-text-dim);
}

/* ── Challenge CTA ───────────────────────────── */
.ldr-cell-action { justify-content: flex-end; }

.ldr-challenge-form { display: contents; }

.ldr-challenge-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background: var(--cta-bg);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--f-display);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 2px 12px var(--cta-glow);
    white-space: nowrap;
}

.ldr-challenge-cta svg {
    width: 14px;
    height: 14px;
}

.ldr-challenge-cta:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 4px 20px var(--cta-glow);
    filter: brightness(1.1);
}

.ldr-challenge-cta:active {
    transform: translateY(0) scale(.98);
}

/* Pulse effect on hover */
.ldr-row:hover .ldr-challenge-cta {
    animation: ctaPulse 1.5s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 2px 12px var(--cta-glow); }
    50%      { box-shadow: 0 2px 24px rgba(34,197,94,.45); }
}

.ldr-me-indicator {
    color: var(--tier-diamond);
    font-size: .7rem;
    opacity: .5;
}
.ldr-in-match {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    color: #22d67a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: .7;
}
.ldr-in-match--pending {
    color: #f5b731;
}

/* ── Empty state ─────────────────────────────── */
.ldr-empty {
    text-align: center;
    padding: 80px 20px;
}

.ldr-empty-icon {
    font-size: 3rem;
    opacity: .2;
    margin-bottom: 12px;
}

.ldr-empty h3 {
    font-family: var(--f-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ldr-text);
    margin-bottom: 6px;
}

.ldr-empty p {
    font-family: var(--f-body);
    font-size: .9rem;
    color: var(--ldr-text-dim);
}

.ldr-empty a { color: var(--tier-diamond); }

/* ── Tier legend ─────────────────────────────── */
.ldr-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px 0;
    margin-top: 16px;
    border-top: 1px solid var(--ldr-border);
}

.ldr-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-body);
    font-size: .72rem;
    color: var(--ldr-text-dim);
}

.ldr-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.ldr-legend-dot--champion { background: var(--tier-champ); box-shadow: 0 0 8px var(--tier-champ-glow); }
.ldr-legend-dot--diamond  { background: var(--tier-diamond); }
.ldr-legend-dot--platinum { background: var(--tier-plat); }
.ldr-legend-dot--standard { background: var(--ldr-text-dim); opacity: .4; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    .ldr-match-svg { }

    .ldr-colheads {
        grid-template-columns: 56px 1fr 80px 48px 72px;
    }

    .ldr-col-action { display: none; }

    .ldr-row {
        grid-template-columns: 56px 1fr 80px 48px 72px;
        padding: 10px 12px;
    }

    /* Move challenge CTA into rider cell on tap */
    .ldr-cell-action { display: none; }

    .ldr-rank-badge { width: 38px; height: 38px; font-size: 1rem; border-radius: 8px; }
    .ldr-rider-avatar { width: 32px; height: 32px; font-size: .6rem; }
    .ldr-rider-name { font-size: .82rem; }
    .ldr-record-bar { font-size: .8rem; }

    .ldr-hero-title { font-size: 2.2rem; }
    .ldr-hero-sub { font-size: .75rem; letter-spacing: .14em; }
}

@media (max-width: 600px) {
    .ldr-colheads {
        grid-template-columns: 48px 1fr 64px 44px;
    }

    .ldr-col-active { display: none; }
    .ldr-col-action { display: none; }

    .ldr-row {
        grid-template-columns: 48px 1fr 64px 44px;
        padding: 10px 8px;
        gap: 0;
    }

    .ldr-cell-active { display: none; }

    .ldr-rank-badge { width: 34px; height: 34px; font-size: .9rem; border-radius: 7px; }
    .ldr-crown { width: 14px; height: 14px; top: -8px; }

    .ldr-rider-avatar { display: none; }
    .ldr-rider-name { font-size: .8rem; }
    .ldr-rider-div { font-size: .6rem; }

    .ldr-record-bar { font-size: .75rem; }
    .ldr-winrate { display: none; }
    .ldr-move { font-size: .7rem; }
    .ldr-move svg { width: 10px; height: 10px; }

    .ldr-hero { padding: 36px 16px 28px; }
    .ldr-hero-title { font-size: 1.6rem; }
    .ldr-hero-sub { font-size: .7rem; letter-spacing: .12em; }

    .ldr-tabs { padding: 8px 12px; gap: 6px; }
    .ldr-tab { padding: 6px 12px; font-size: .72rem; }
    .ldr-tab-label { display: none; }
    .ldr-tab-short { display: inline; }
    .ldr-tab-count { font-size: .58rem; padding: 1px 5px; min-width: 16px; }

    .ldr-legend { flex-wrap: wrap; gap: 12px; }
    .ldr-legend-item { font-size: .65rem; }

    .ldr-hud-inner { padding: 8px 12px; }
    .ldr-hud-num { font-size: 1.4rem; }

    /* Show challenge on row tap via expanded state */
    .ldr-row.expanded {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
        padding-bottom: 14px;
    }

    .ldr-row.expanded .ldr-cell-record,
    .ldr-row.expanded .ldr-cell-move { grid-row: 2; }

    .ldr-row.expanded .ldr-mobile-actions {
        display: flex;
        grid-column: 1 / -1;
    }
}

/* ── Mobile expanded row actions ─────────────── */
.ldr-mobile-actions {
    display: none;
    padding-top: 8px;
    gap: 8px;
}

.ldr-mobile-actions .ldr-challenge-cta {
    flex: 1;
    justify-content: center;
    padding: 10px;
    font-size: .8rem;
}

/* ═══════════════════════════════════════════════════════
   ANIMATION SUGGESTIONS (CSS custom properties)
   Add .ldr-row--rank-up or .ldr-row--rank-down
   dynamically when positions change to trigger:
   ═══════════════════════════════════════════════════════ */

.ldr-row--rank-up {
    animation: rankUp .8s cubic-bezier(.22,1,.36,1);
}

@keyframes rankUp {
    0%   { background: rgba(34,214,122,.15); transform: translateX(4px); }
    100% { background: transparent; transform: translateX(0); }
}

.ldr-row--rank-down {
    animation: rankDown .8s cubic-bezier(.22,1,.36,1);
}

@keyframes rankDown {
    0%   { background: rgba(255,71,87,.12); transform: translateX(-4px); }
    100% { background: transparent; transform: translateX(0); }
}

/* Shimmer effect on champion row */
.ldr-row--champion:first-child::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(245,183,49,.06) 50%, transparent 60%);
    animation: champShimmer 4s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
}

@keyframes champShimmer {
    0%, 100% { transform: translateX(-100%); }
    50%      { transform: translateX(200%); }
}