/* rip/leaderboard.css — the styles the leaderboard UI emits.
 *
 * Split out on 2026-08-10 with rip/leaderboard-ui.js, when the boards moved off
 * the pack page onto /rip/leaderboard (Aaron: "move leaderboards and top players
 * to a new leaderboards page"). The JS builds all of this markup from a fetch,
 * so a host page cannot style it: the classes have to arrive with the engine.
 *
 * ⚠ THESE RULES ALSO STILL EXIST INSIDE packs.htm's INLINE <style>, AND THAT
 * COPY IS NOW DEAD. They were not deleted from there in the same pass because
 * they are not contiguous: .rip-pill sits with the button set at ~line 205, the
 * tab set at ~260 shares its focus-ring line with .rip-btn/.btn-open/.sim-hdr-btn,
 * and .sim-section-head sits between two rules that other sections still use.
 * Picking them apart is a separate, verifiable edit against a 9,000-line file —
 * so it is a follow-up, not a rider on this move. Nothing on packs.htm renders
 * any of these classes any more (verified by grep after the markup came out:
 * the only surviving user of anything here is #tier-scroll, which is the pack
 * page's OWN tier selector and keeps its own .tier-scroll rule).
 *
 * Loaded AFTER rip-ui.css on every host — every colour below is one of its
 * --rip-* tokens and resolves to nothing without it.
 */

/* ── Pills and tabs ──────────────────────────────────────────────────────── */
/* ⚠ EVERY CONTROL IN THIS SECTION IS 40px TALL MINIMUM. They measured 30, 34
   and 30 — a third of them under a thumb's width — and they are the ONLY way
   to change what either board on /rip/leaderboard is showing. `min-height` is
   the mechanism rather than more vertical padding for one reason: it changes
   nothing horizontal. These are three-across strips inside a 390px (and 360px)
   panel, so anything that touched the padding or the type would put "Top
   Collectors" on a second line and wrap the row. A <button> centres its own
   content vertically, so the label sits where it did — the box grew under it.
   Verified at 360/390/1280: no wrap, no sideways scroll. */
.rip-pill{font-family:var(--rip-body);font-weight:700;font-size:12px;border-radius:999px;padding:7px 14px;min-height:40px;cursor:pointer;background:var(--rip-panel-2);border:1px solid var(--rip-line-2);color:var(--rip-fg-2);transition:background .15s,border-color .15s,color .15s,transform .1s;display:inline-flex;align-items:center;gap:6px;}
.rip-pill:hover{border-color:var(--rip-act-line);color:var(--rip-act);}
.rip-pill:active{transform:translateY(1px);}

/* Tier board's DAY / MONTH / ALL TIME. These three carry their whole look as
   an inline style attribute in leaderboard.php, so they have no class to hang
   this on — but that attribute sets padding and never height, so a plain
   stylesheet `min-height` is not competing with it and wins normally. Do not
   "tidy" this by adding a class: the IDs are what leaderboard-ui.js toggles. */
#lb-tab-day,#lb-tab-month,#lb-tab-alltime{min-height:40px;}

/* Top Players window toggle + See-all modal tabs */
.pb-tab{font-family:var(--rip-data);font-size:10px;font-weight:700;letter-spacing:0.08em;padding:8px 12px;min-height:40px;border-radius:8px;border:1px solid var(--rip-line-2);background:transparent;color:var(--rip-fg-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.pb-tab.pb-tab--on{background:var(--rip-act-soft);color:var(--rip-act);border-color:var(--rip-act-line);}
.pm-tab{flex:1;font-family:var(--rip-body);font-weight:700;font-size:12px;padding:9px 8px;min-height:40px;border-radius:9px;border:1px solid var(--rip-line);background:var(--rip-panel);color:var(--rip-fg-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.pm-tab.pm-tab--on{background:var(--rip-act-soft);color:var(--rip-act);border-color:var(--rip-act-line);}
/* ⚠ "Top Collectors" WRAPS TO TWO LINES ON A NARROW PHONE, AND A WRAPPED TAB
   READS AS A BROKEN ONE. Measured: 93px per tab at 360px, which is 7px short
   of what that label needs, so the strip went to 48px tall and the middle tab
   said "Top / Collectors" — the state in Aaron's screenshot. At 390px it fits
   (103px) and nothing looked wrong here, which is why it survived.
   The three must stay on ONE ROW — this is the board selector, and reading it
   is how you know which board you are on. So the label never wraps and the box
   gets tighter instead: below 380px the padding and type step down just enough
   for the longest of the three. min-height stays 40px, so the tap target is
   untouched. */
.pm-tab{white-space:nowrap}
@media (max-width:379px){
  .pm-tab{font-size:11.5px;padding:9px 4px;letter-spacing:-.01em}
}
/* The See-all modal's Day/Month/All time. Not on screen when the page loads,
   so the audit never reports it — raised with its siblings because it is the
   same control, and a floor that only covers what a tool happened to see is
   how the next one drifts back to 34px. */
.pm-wtab{flex:1;font-family:var(--rip-body);font-weight:700;font-size:12px;padding:7px 8px;min-height:40px;border-radius:999px;border:1px solid var(--rip-line);background:transparent;color:var(--rip-fg-3);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.pm-wtab.pm-wtab--on{background:var(--rip-panel-3);color:var(--rip-fg);border-color:var(--rip-line-2);}
.rip-pill:focus-visible,.pb-tab:focus-visible,.pm-tab:focus-visible,.pm-wtab:focus-visible{outline:2px solid var(--rip-act);outline-offset:2px;}

/* ── Skeleton shimmer for loading lists (simSkel) ────────────────────────── */
@keyframes rip-shimmer{0%{background-position:-220px 0}100%{background-position:220px 0}}
.rip-skel{height:34px;border-radius:8px;margin-bottom:6px;background:linear-gradient(90deg,rgba(255,255,255,0.035) 25%,rgba(255,255,255,0.11) 50%,rgba(255,255,255,0.035) 75%);background-size:220px 100%;animation:rip-shimmer 1.15s infinite linear;}

/* .sim-section-head / .sim-section-rule deleted 2026-08-10. The leaderboard
   page opened with them until it was brought onto the shared .rip-page-head;
   the only other renderer is packs.htm, which carries its own inline copies
   and does not load this sheet (grep-verified both ways). */

/* ── Leaderboard row hover + click-detail modal ──────────────────────────── */
.lb-row-clickable{transition:filter 0.15s,box-shadow 0.15s,border-color 0.15s;}
.lb-row-clickable:hover{filter:brightness(1.12);box-shadow:0 0 22px rgba(255,255,255,0.12);}
.lb-row-clickable:focus-visible{outline:2px solid #fbbf24;outline-offset:2px;}
@keyframes lb-detail-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
#lb-detail-modal.is-open{display:flex;}
#lb-detail-modal.is-open .lb-detail-card{animation:lb-detail-in 0.18s ease-out both;}

/* ── Tier record card — themed via inline CSS vars set by simRenderLeaderboard
      on every tier switch (--rec-bg / --rec-border / --rec-glow / --rec-text) ── */
.tier-record-card{
    display:flex;align-items:center;gap:14px;
    background:linear-gradient(135deg,var(--rec-bg,rgba(15,23,42,0.85)) 0%,rgba(10,15,30,0.85) 100%);
    border:1.5px solid var(--rec-border,rgba(255,255,255,0.12));
    border-radius:14px;padding:14px 16px;
    box-shadow:0 0 40px var(--rec-glow,rgba(0,0,0,0.4)),0 6px 18px rgba(0,0,0,0.35);
    transition:opacity 0.25s ease,transform 0.25s ease;
    min-width:0;overflow:hidden;
}
.tier-record-card.is-fading{opacity:0;transform:translateY(4px)}
/* Mobile rescue — keep the pulled-by name readable on narrow viewports.
   At <=480px shrink the art thumb + right column so the middle text column
   has room. At <=380px stack the right column under the middle column so
   the whole row width is available for the card name + pulled-by line. */
@media(max-width:480px){
    .tier-record-card{gap:10px;padding:11px 12px}
    .tier-record-card .lb-thumb-wrap{padding:4px}
    .tier-record-card .lb-thumb-img,
    .tier-record-card .lb-thumb-ph{width:48px!important;height:66px!important}
    .tier-record-card .lb-tier-label{font-size:10px;letter-spacing:0.04em}
    .tier-record-card .lb-card-name{font-size:14px}
    .tier-record-card .lb-set-line{font-size:12px}
    .tier-record-card .lb-rank{font-size:13px}
    .tier-record-card .lb-value{font-size:16px}
    .tier-record-card .lb-value-note{font-size:11px;max-width:90px}
}
@media(max-width:380px){
    .tier-record-card{flex-wrap:wrap;align-items:flex-start;gap:8px}
    .tier-record-card .lb-mid{flex-basis:calc(100% - 60px)}
    .tier-record-card .lb-right{flex-basis:100%;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;text-align:left!important;padding-top:6px;border-top:1px solid rgba(255,255,255,0.06);width:100%}
    .tier-record-card .lb-value-note{max-width:none;text-align:right}
}

/* Leaderboard body: stacked horizontal rows on mobile/tablet (default). */
.lb-grid{display:flex;flex-direction:column;gap:10px;padding:4px 12px 6px;}
/* ── Desktop: top entries on ONE row ──────────────────────────────────────
   Each entry flips to a vertical CARD — art on top, name, who pulled it,
   value — laid out 5 across. >5 entries simply wrap to a second row. */
@media(min-width:1024px){
    .lb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:14px 16px 12px;}
    .lb-grid .tier-record-card{position:relative;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:10px;padding:18px 12px 14px;overflow:visible;}
    .lb-grid .tier-record-card .lb-thumb-wrap{margin:0 auto;}
    .lb-grid .tier-record-card .lb-thumb-img,
    .lb-grid .tier-record-card .lb-thumb-ph{width:108px!important;height:150px!important;}
    /* middle column: card name first, then who pulled it, then set line */
    .lb-grid .tier-record-card .lb-mid{display:flex;flex-direction:column;align-items:center;width:100%;flex:none;}
    .lb-grid .tier-record-card .lb-card-name{order:1;font-size:15px;-webkit-line-clamp:2;}
    .lb-grid .tier-record-card .lb-pulled-by{order:2;margin:7px 0 0;text-align:center;}
    .lb-grid .tier-record-card .lb-set-line{order:3;white-space:normal;margin-top:4px;}
    .lb-grid .tier-record-card .lb-tier-label{display:none;}
    /* value footer, centred */
    .lb-grid .tier-record-card .lb-right{flex-direction:column;align-items:center;width:100%;gap:2px;margin-top:auto;padding-top:8px;}
    .lb-grid .tier-record-card .lb-value{font-size:20px;}
    .lb-grid .tier-record-card .lb-value-note{max-width:none;}
    /* rank → badge pinned to the card's top-left corner */
    .lb-grid .tier-record-card .lb-rank{position:absolute;top:-9px;left:-9px;z-index:3;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:11px;background:rgba(10,10,14,0.94);border:1.5px solid var(--rec-border,#e11d48);border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,0.55);}
}

/* ── The page's tier chip row: GONE, replaced by the shared bar ───────────
   .lbp-tiers / .lbp-tier were a wrapped row of eight name-only pills. The
   comment that lived here argued they should NOT be packs.htm's selector,
   because "here the tier is only a filter on a list". Aaron overruled it on
   2026-08-10: "wherever a page contains the option to pick a pack, it must use
   the beautiful new slider we created on the open pack page." #lb-tier-chips
   is a .tier-bar now — rip/tier-bar.css owns every rule it needs, and the five
   rules that used to sit here are deleted rather than left dead (grep-verified:
   .lbp-tier appeared in this file and leaderboard.php and nowhere else).
   Its margin came with it: .tier-bar has none, and the section below it
   supplies its own spacing via the wrapper's inline styles. */