/* Leaderboard detail views — shared by /app and /m.
   Styles the hero detail page (window.TDTT.lbHeroPage, lb-hero-page.js) and
   the Decks tab + deck archetype page (window.TDTT.lbDecksView, lb-decks.js),
   plus the button and loading/empty/error state primitives they render.
   Moved out of /app/leaderboard.css so both surfaces load one copy. Opaque
   surfaces only, design tokens only. Load it BEFORE the surface's own
   leaderboard.css. */

.lb-btn {
  font-family:var(--head); font-weight: 700; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 16px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); cursor:pointer;
}
@media (hover: hover) {
  .lb-btn:hover { border-color:var(--sec-accent, var(--cyan)); color:var(--sec-accent, var(--cyan)); }
}
.lb-btn:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.lb-btn[disabled] { opacity:.5; cursor:default; }

/* ── Loading / empty / error states ── */
.lb-status { text-align:center; padding:48px 20px; }
.lb-loading { font-family:var(--head); font-weight: 700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.lb-empty-title, .lb-error-title { font-family:var(--head); font-weight: 700; font-size:.85rem; color:var(--text-dim); margin:0; }
.lb-empty-sub, .lb-error-detail { font-size:.72rem; color:var(--muted); margin:6px 0 0; }
.lb-status .lb-btn { margin-top:14px; }
/* ── Hero leaderboard detail page (Task 10, window.TDTT.lbHeroPage) ────────
   Same "opaque surfaces only" rule as the rest of this file — every panel
   here sits on the page canvas, never a transparent/alpha mix that would let
   the fixed hex lattice show through. `.tdtt-panel`/`.tdtt-stat`/`.seg-slab`/
   `.tdtt-record`/`.tdtt-rank-badge` are the shared primitives (chrome.css/
   controls.css); everything below is this page's own layout only. */
.lbhero-page { display:flex; flex-direction:column; gap:14px; margin-top:6px; }

.lbhero-crumb { display:flex; align-items:center; gap:6px; font-size:.7rem; color:var(--text-dim); }
.lbhero-crumb-link { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
@media (hover: hover) {
  .lbhero-crumb-link:hover { color:var(--cyan); }
}
.lbhero-crumb-sep { color:var(--muted); }
.lbhero-crumb-current { color:var(--text); font-weight:600; }

.lbhero-header { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.lbhero-header-media {
  flex:0 0 auto; width:96px; height:96px; border-radius:12px; overflow:hidden;
  background:var(--bg); border:1px solid var(--border);
}
.lbhero-header-media img, .lbhero-portrait-img { width:100%; height:100%; object-fit:cover; object-position:top; }
.lbhero-header-body { flex:1 1 220px; min-width:0; }
.lbhero-header-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.lbhero-eyebrow { font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.lbhero-name { font-family:var(--head); font-size:1.3rem; font-weight:700; color:var(--text); margin:0; }
.lbhero-set { font-size:.76rem; color:var(--text-dim); margin:2px 0 0; }
.lbhero-difficulty { font-size:.68rem; color:var(--text-dim); margin:4px 0 0; }

.lbhero-tiles { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
@media (min-width: 640px) {
  .lbhero-tiles { grid-template-columns:repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .lbhero-tiles { grid-template-columns:repeat(6, 1fr); }
}
.lbhero-tile {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; text-align:center;
}
.lbhero-tile .v { display:block; }
.lbhero-tile .l { display:block; margin-top:2px; }
.lbhero-tile .u { display:none; }
.lbhero-tile-sub { display:block; font-size:.56rem; color:var(--muted); margin-top:4px; }

.lbhero-layout { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.lbhero-main { flex:1 1 480px; min-width:0; display:flex; flex-direction:column; gap:14px; }
.lbhero-aside { flex:0 0 280px; width:280px; }

.lbhero-panel .tdtt-panel__head { justify-content:space-between; }
.lbhero-panel .tdtt-panel__head .seg-slab { margin-left:auto; }

.lbhero-center { text-align:center; padding:8px 0; }

.lbhero-trend-row { display:flex; align-items:center; gap:16px; }
.lbhero-trend-svg { flex:1 1 auto; min-width:0; height:96px; }
.lbhero-trend-latest { flex:0 0 auto; font-family:var(--head); font-size:1.5rem; font-weight:700; color:var(--text); }

.lbhero-matchup-list { display:flex; flex-direction:column; gap:4px; }
.lbhero-matchup-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
.lbhero-matchup-port {
  flex:0 0 auto; width:34px; height:34px; border-radius:8px; object-fit:cover; object-position:top;
  background:var(--bg); border:1px solid var(--border);
}
.lbhero-matchup-name { flex:1 1 auto; min-width:0; font-size:.76rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lbhero-matchup-wr { flex:0 0 auto; font-size:.78rem; font-weight:700; }
.lbhero-matchup-wr.good { color:var(--green); }
.lbhero-matchup-wr.even { color:var(--gold); }
.lbhero-matchup-wr.bad  { color:var(--red); }

.lbhero-game-list { display:flex; flex-direction:column; gap:2px; }
.lbhero-game-row {
  display:flex; align-items:center; gap:10px; width:100%; padding:6px 4px; border-radius:9px;
  background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
@media (hover: hover) {
  .lbhero-game-row:hover { background:var(--surface-2); }
}
/* A deleted opponent renders as a div (no profile to open): not clickable. */
div.lbhero-game-row { cursor:default; }
@media (hover: hover) {
  div.lbhero-game-row:hover { background:none; }
}
.lbhero-game-chip {
  flex:0 0 auto; font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 6px; border-radius:6px; background:var(--surface-2); color:var(--text-dim);
}
.lbhero-game-chip.win  { background:color-mix(in srgb, var(--green) 16%, var(--surface-2)); color:var(--green); }
.lbhero-game-chip.loss { background:color-mix(in srgb, var(--red) 16%, var(--surface-2)); color:var(--red); }
.lbhero-game-port {
  flex:0 0 auto; width:28px; height:28px; border-radius:7px; object-fit:cover; object-position:top;
  background:var(--bg); border:1px solid var(--border);
}
.lbhero-game-vs { flex:1 1 auto; min-width:0; font-size:.74rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lbhero-game-when { flex:0 0 auto; font-size:.6rem; color:var(--muted); }
.lbhero-game-score { flex:0 0 auto; width:56px; text-align:right; font-size:.72rem; font-weight:600; color:var(--text); }

.lbhero-info-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.74rem; padding:6px 0; }
.lbhero-info-label { color:var(--text-dim); }
.lbhero-info-val { color:var(--text); font-weight:600; }
.lbhero-codex-btn { display:block; width:100%; text-align:center; margin-top:8px; }

@media (max-width: 900px) {
  .lbhero-aside { flex:1 1 100%; width:auto; }
}
/* ── Decks tab + deck archetype page (Task 9, TCG Decks B3, window.TDTT.
   lbDecksView) ── Same "opaque surfaces only" rule as the rest of this file.
   Reuses `.tdtt-cardtile`/`.tdtt-panel`/`.tdtt-stat`/`.seg-slab`/`.chip`/
   `.tdtt-record`/`.tdtt-idchip` (chrome.css/controls.css) and the Players-tab
   rail layout (`.lb-tcg-layout`/`.lb-tcg-main`/`.lb-tcg-aside`, above) — the
   Decks landing grid shares the SAME two-column shape and the SAME rail data
   the Players tab shows. Everything below is this feature's own layout only. */

.lb-deck-center { text-align:center; padding:8px 0; }

/* ── Landing grid ── */
.lb-deck-controls { align-items:center; justify-content:space-between; }
.lb-deck-sortwrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lb-deck-sort-label { font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.lb-deck-controls-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lb-deck-totals { font-size:.68rem; color:var(--text-dim); margin:8px 0; }

.lb-deck-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; }
.lb-deck-card { display:flex; flex-direction:column; gap:8px; padding:10px 12px; text-align:left; }
.lb-deck-card-chips { display:flex; align-items:center; gap:4px; flex-wrap:wrap; min-height:18px; }
.lb-deck-card-name {
  margin:0; font-size:.78rem; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lb-deck-card-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lb-deck-card-share { font-size:.68rem; color:var(--text-dim); }
.lb-deck-arrow.up   { color:var(--green); margin-left:2px; }
.lb-deck-arrow.down { color:var(--red); margin-left:2px; }
.lb-deck-card-wr { font-size:.82rem; font-weight:700; }
.lb-deck-card-wr.good { color:var(--green); }
.lb-deck-card-wr.even { color:var(--gold); }
.lb-deck-card-wr.bad  { color:var(--red); }
.lb-deck-card-meta { display:flex; align-items:center; justify-content:space-between; font-size:.6rem; color:var(--muted); }

.lb-deck-totals-sub { font-size:.68rem; color:var(--text-dim); margin:6px 0 0; }
.lb-deck-quickmatch-hint { font-size:.68rem; color:var(--cyan); margin:10px 0 0; }

/* ── Archetype detail page ── */
.lb-deck-page { display:flex; flex-direction:column; gap:14px; margin-top:6px; }

.lb-deck-crumb { display:flex; align-items:center; gap:6px; font-size:.7rem; color:var(--text-dim); margin-bottom:6px; }
.lb-deck-crumb-link { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
@media (hover: hover) {
  .lb-deck-crumb-link:hover { color:var(--cyan); }
}
.lb-deck-crumb-sep { color:var(--muted); }
.lb-deck-crumb-current { color:var(--text); font-weight:600; }

.lb-deck-header { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.lb-deck-header-body { flex:1 1 220px; min-width:0; }
.lb-deck-header-chips { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:4px; }
.lb-deck-name { font-family:var(--head); font-size:1.3rem; font-weight:700; color:var(--text); margin:0; }
.lb-deck-back-btn { flex:0 0 auto; }

.lb-deck-tiles { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
@media (min-width: 640px) {
  .lb-deck-tiles { grid-template-columns:repeat(4, 1fr); }
}
.lb-deck-tile {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; text-align:center;
}
.lb-deck-tile .u { display:none; }

.lb-deck-panel .tdtt-panel__head { justify-content:space-between; }

.lb-deck-trend-row { display:flex; align-items:center; gap:16px; }
.lb-deck-trend-svg { flex:1 1 auto; min-width:0; height:96px; }
.lb-deck-trend-latest { flex:0 0 auto; font-family:var(--head); font-size:1.5rem; font-weight:700; color:var(--text); }

.lb-deck-pilot-list, .lb-deck-format-list, .lb-deck-matchup-list, .lb-deck-game-list {
  display:flex; flex-direction:column; gap:4px;
}
.lb-deck-pilot-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
.lb-deck-pilot-name {
  flex:1 1 auto; min-width:0; background:none; border:0; padding:0; font:inherit; text-align:left;
  color:var(--text); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (hover: hover) {
  .lb-deck-pilot-name:hover { text-decoration:underline; }
}
/* A deleted pilot renders as a span (no profile to open): not clickable. */
span.lb-deck-pilot-name { cursor:default; }
@media (hover: hover) {
  span.lb-deck-pilot-name:hover { text-decoration:none; }
}
.lb-deck-pilot-wr { flex:0 0 auto; font-size:.78rem; font-weight:700; }
.lb-deck-pilot-wr.good { color:var(--green); }
.lb-deck-pilot-wr.even { color:var(--gold); }
.lb-deck-pilot-wr.bad  { color:var(--red); }

.lb-deck-format-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:.76rem; }
.lb-deck-format-name { flex:1 1 auto; min-width:0; color:var(--text); }
.lb-deck-format-wr { flex:0 0 auto; font-size:.76rem; font-weight:700; }
.lb-deck-format-wr.good { color:var(--green); }
.lb-deck-format-wr.even { color:var(--gold); }
.lb-deck-format-wr.bad  { color:var(--red); }

.lb-deck-matchup-row {
  display:flex; align-items:center; gap:10px; width:100%; padding:6px 4px; border-radius:9px;
  background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
@media (hover: hover) {
  .lb-deck-matchup-row:hover { background:var(--surface-2); }
}
.lb-deck-matchup-chips { flex:0 0 auto; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.lb-deck-matchup-name { flex:1 1 auto; min-width:0; font-size:.76rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-deck-matchup-wr { flex:0 0 auto; font-size:.78rem; font-weight:700; }
.lb-deck-matchup-wr.good { color:var(--green); }
.lb-deck-matchup-wr.even { color:var(--gold); }
.lb-deck-matchup-wr.bad  { color:var(--red); }

.lb-deck-game-row { display:flex; align-items:center; gap:10px; padding:6px 4px; }
.lb-deck-game-chip {
  flex:0 0 auto; font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 6px; border-radius:6px; background:var(--surface-2); color:var(--text-dim);
}
.lb-deck-game-chip.win  { background:color-mix(in srgb, var(--green) 16%, var(--surface-2)); color:var(--green); }
.lb-deck-game-chip.loss { background:color-mix(in srgb, var(--red) 16%, var(--surface-2)); color:var(--red); }
.lb-deck-game-vs { flex:1 1 auto; min-width:0; font-size:.74rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-deck-game-opp-link { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
@media (hover: hover) {
  .lb-deck-game-opp-link:hover { text-decoration:underline; }
}
.lb-deck-game-when { flex:0 0 auto; font-size:.6rem; color:var(--muted); }

/* Profile-panel primitives (moved from app/leaderboard.css): used by the shared
   profile renderers (profile-overview / profile-panels / profile-achievements)
   on /app and /m. */
/* A static informational badge, deliberately NOT the .chip primitive — .chip
   carries interactive/filter semantics (hover, selected-state brackets) that
   don't apply to a read-only region tag. */
.lb-profile-region { font-size:.62rem; padding:2px 8px; border-radius:999px;
                     background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); }
.lb-profile-stat { background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
                   padding:8px 4px; text-align:center; }
.lb-profile-stat .v { display:block; font-family:var(--head); font-weight:700; font-size:.85rem; color:var(--text); }
.lb-profile-stat .l { display:block; font-size:.5rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.lb-profile-section-label { font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px; }