.cl-wrap { max-width:960px; margin:0 auto; padding:1rem 0 4rem; }
/* empty (no-club-found) state uses the same wrap padding/overflow as ranked_leaderboard */
.cl-wrap:has(.cl-empty-hero) { padding:0 1rem 4rem; overflow-x:hidden; }

.cl-searchbar {
    display:flex; gap:0.5rem; margin-bottom:2rem;
}
.cl-searchbar input {
    flex:1; min-width:0; background:var(--card);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px; padding:0.7rem 1rem; color:var(--text);
    font-size:0.95rem; outline:none;
}
.cl-searchbar input:focus { border-color:var(--primary); }
.cl-searchbar button {
    background:var(--primary); color:var(--bg); border:none;
    border-radius:8px; padding:0.7rem 1.4rem; font-weight:700;
    font-size:0.9rem; cursor:pointer;
}

/* ── hero (mirrors .pl-header from player_lookup.html) ── */
.cl-hero {
    display:flex; gap:1.25rem; align-items:center;
    background:var(--card); border:1px solid rgba(255,255,255,0.08);
    border-radius:12px; padding:1.25rem 1.4rem; margin-bottom:0.65rem;
}
.cl-badge {
    width:72px; height:72px; flex-shrink:0; object-fit:contain;
}
.cl-hero-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:0.5rem; }
.cl-name {
    font-size:1.15rem; font-weight:700; letter-spacing:-0.3px; line-height:1.2;
    color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cl-sub {
    display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap;
    margin-top:0.4rem; font-size:0.75rem; color:var(--text-dim);
}
.cl-sub code {
    background:rgba(255,255,255,0.07); border-radius:4px;
    padding:0.1rem 0.45rem; font-size:0.72rem;
}
.cl-chip {
    display:inline-flex; align-items:center; gap:0.32rem;
    background:rgba(255,255,255,0.06);
    border-radius:5px; padding:0.18rem 0.5rem;
    font-size:0.66rem; font-weight:700; letter-spacing:0.3px;
    text-transform:uppercase; color:var(--text-dim);
}

/* trophy badge on hero */
.cl-hero-tr {
    display:flex; flex-direction:column; align-items:center; gap:0.15rem;
    padding-left:1.1rem; border-left:1px solid rgba(255,255,255,0.08);
    flex-shrink:0;
}
.cl-hero-tr-row { display:flex; align-items:center; gap:0.35rem; }
.cl-hero-tr-row img { width:20px; height:20px; object-fit:contain; }
.cl-hero-tr-val {
    font-size:1.1rem; font-weight:700; color:#f5c518; line-height:1;
}
.cl-hero-tr-lbl {
    font-size:0.6rem; font-weight:700; color:var(--text-dim);
    letter-spacing:0.5px; text-transform:uppercase;
}

/* ── stats grid ── */
.cl-stats {
    display:grid; grid-template-columns:repeat(4,1fr); gap:0.6rem;
    margin-bottom:0.65rem;
}
.cl-stat {
    background:var(--card);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px; padding:1rem;
    display:flex; align-items:center; gap:0.6rem;
}
.cl-stat img { width:26px; height:26px; object-fit:contain; flex-shrink:0; opacity:.9; }
.cl-stat-lbl { font-size:0.58rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.6px; }
.cl-stat-val { font-size:1.05rem; font-weight:800; color:var(--text); line-height:1.1; }

/* ── description ── */
.cl-desc {
    background:var(--card);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px; padding:1rem; margin-bottom:0.65rem;
    font-size:0.85rem; color:var(--text-dim); line-height:1.45;
    word-wrap:break-word;
}
.cl-desc-lbl {
    font-size:0.58rem; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:0.6px; margin-bottom:0.3rem;
}
.cl-desc-body { color:var(--text); }

/* ── members ── */
.cl-section-title {
    font-size:0.65rem; text-transform:uppercase; letter-spacing:0.7px;
    color:var(--text-dim); margin:0.9rem 0 0.55rem 0.1rem;
}
.cl-members {
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0.55rem;
}
.cl-member {
    display:grid;
    grid-template-columns: 24px 40px minmax(0,1fr) auto auto;
    align-items:center; gap:0.7rem;
    padding:0.75rem 0.9rem;
    background:var(--card);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    cursor:pointer;
    transition: transform .12s, background .12s, border-color .12s;
    color:inherit; text-decoration:none;
}
.cl-member:hover {
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.14);
    transform:translateY(-1px);
}
.cl-member-rank {
    font-size:0.72rem; font-weight:800; color:var(--text-dim);
    text-align:right;
}
.cl-member-avatar {
    width:36px; height:36px; border-radius:8px; object-fit:cover;
    background:rgba(255,255,255,0.05); flex-shrink:0;
}
.cl-member-info { min-width:0; }
.cl-member-name {
    font-size:0.92rem; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cl-member-tag { font-size:0.65rem; color:var(--text-dim); margin-top:0.05rem; }
.cl-role-badge {
    display:block; margin-top:0.18rem;
    font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.55px;
    color:var(--text-dim);
    white-space:nowrap;
}
.cl-member-trophies {
    display:flex; align-items:center; gap:0.3rem;
    font-size:0.8rem; font-weight:800; color:var(--text);
    justify-content:flex-end;
}
.cl-member-trophies img { width:14px; height:14px; object-fit:contain; }

.cl-error {
    background:var(--card);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px; padding:1rem; text-align:center; color:#9ca3af;
}

/* empty state hero — copied from rl-hero in ranked_leaderboard.html */
.cl-empty-hero {
    display:flex; align-items:center; gap:1.1rem;
    padding:0.5rem 0 1.4rem;
    border-bottom:1px solid rgba(255,255,255,0.07);
    margin-bottom:1.5rem;
}
.cl-empty-hero-img {
    width:58px; height:58px; object-fit:contain; flex-shrink:0;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}
.cl-empty-hero h1 {
    font-size:1.75rem; font-weight:800; letter-spacing:-0.5px;
    color:var(--text); line-height:1.1; margin:0;
}
.cl-empty-hero-sub {
    font-size:0.78rem; color:var(--text-dim); margin-top:0.28rem;
}
.cl-belt {
    position:relative; overflow:hidden; width:100%;
    padding:1rem 0; margin-top:0.4rem;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cl-belt-track {
    display:flex; width:max-content; gap:1.25rem;
    animation:cl-belt-scroll 34s linear infinite;
}
.cl-belt img {
    width:70px; height:70px; object-fit:contain; flex-shrink:0;
    opacity:0.72; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}
@keyframes cl-belt-scroll {
    from { transform:translateX(0); }
    to { transform:translateX(calc(-50% - 0.625rem)); }
}
@media (prefers-reduced-motion:reduce) {
    .cl-belt-track { animation-play-state:paused; }
}

/* ── mobile ── */
@media (max-width:600px) {
    .cl-wrap { padding:0.75rem 0 3rem; }
    .cl-wrap:has(.cl-empty-hero) { padding:0 0.75rem 3rem; }
    .cl-searchbar input { font-size:16px; }
    .cl-hero {
        display:grid; grid-template-columns:64px minmax(0,1fr);
        gap:0.8rem 0.9rem; padding:1rem; align-items:center;
    }
    .cl-badge { width:64px; height:64px; }
    .cl-hero-tr {
        grid-column:1 / -1; border-left:none; border-top:1px solid rgba(255,255,255,0.08);
        padding:0.75rem 0 0; align-items:center; width:100%;
        flex-direction:row; justify-content:space-between;
    }
    .cl-name { font-size:1.2rem; white-space:normal; }
    .cl-stats { grid-template-columns:1fr 1fr; }
    .cl-stat { padding:0.7rem; }
    /* mobile: 2 members per row.
       Card layout: avatar (col 1, spans 3 rows) | name / trophies / role (col 2) */
    .cl-members { grid-template-columns: 1fr 1fr; gap:0.45rem; }
    .cl-member {
        grid-template-columns: 36px minmax(0,1fr);
        grid-template-rows: auto auto auto;
        align-items:center;
        gap:0.05rem 0.55rem;
        padding:0.55rem 0.65rem;
    }
    .cl-member-rank { display:none; }
    .cl-member-avatar {
        width:36px; height:36px;
        grid-column:1; grid-row:1 / span 3;
        align-self:center;
    }
    .cl-member-info {
        grid-column:2; grid-row:1; min-width:0;
    }
    .cl-member-name {
        font-size:0.8rem; line-height:1.15;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .cl-member-tag { display:none; }
    .cl-member-trophies {
        grid-column:2; grid-row:2;
        display:flex; align-items:center; gap:0.25rem;
        font-size:0.7rem; font-weight:800; color:#f5c518;
        line-height:1.15; min-width:auto; justify-content:flex-start;
    }
    .cl-member-trophies img { width:12px; height:12px; }
    .cl-role-badge {
        display:inline-block;
        grid-column:2; grid-row:3;
        margin:0; padding:0;
        font-size:0.52rem; letter-spacing:0.4px; font-weight:700;
        background:none;
        white-space:nowrap;
    }
    .cl-empty-hero { padding:0.5rem 0 0.9rem; gap:0.75rem; }
    .cl-empty-hero-img { width:42px; height:42px; }
    .cl-empty-hero h1 { font-size:1.45rem; }
    .cl-empty-hero-sub { font-size:0.74rem; }
    .cl-belt img { width:56px; height:56px; }
}