/* ================================================
   UntappedMTG Central — Upkeep "2b" design system
   Pure-black canvas · bright #FFD700 gold · white text ladder · Inter only
   Identity rings in Upkeep seat colors · light mode via <html data-theme="light">
   ================================================ */

/* Fonts load via layout.html's <head> <link> instead of @import here - @import blocks every
   rule below it in this file until its own fetch resolves, which can intermittently starve
   the whole stylesheet on page loads with many concurrent requests. */

/* ── TOKENS ───────────────────────────────────────
   From the Upkeep re-skin handoff's tokens.css. Existing variable names are kept so most
   rules pick up the new look; --gold is now the INK (text/icon) color and fills use
   --gold-fill, which matters in light mode where the two differ. */
:root {
  /* Canvas & surfaces */
  --bg:            #060606;
  --surface:       #0a0a09;
  --surface-2:     #000000;
  --surface-3:     #1a1a1a;   /* fields, stat boxes, segmented track */
  --surface-4:     #242424;
  --outline:       #424242;   /* neutral outline (inputs, stat boxes) */
  --field:         #1a1a1a;   /* input / icon-button fill */
  --surface-lit:   linear-gradient(129deg, #1b1a16 0%, #0a0a09 45%, #000 100%); /* panel fill lit from the ✦ tile */

  /* Page background: the glow comes from the ✦ brand tile (top-left, ~42px 30px) */
  --page-bg:
    radial-gradient(circle 1200px at 42px 30px, rgba(255,215,0,0.085), transparent 70%),
    radial-gradient(circle 700px at 42px 30px, rgba(255,240,200,0.03), transparent),
    #060606;

  /* Borders (gold opacity ladder) */
  --border:        rgba(255,215,0,0.28);
  --border-muted:  rgba(255,215,0,0.15);
  --border-strong: rgba(255,215,0,0.40);

  /* Text: pure white ladder */
  --text:          #ffffff;
  --text-2:        rgba(255,255,255,0.70);
  --text-muted:    rgba(255,255,255,0.54);
  --text-subtle:   rgba(255,255,255,0.38);

  /* Gold */
  --gold:          #ffd700;   /* ink: text and icons */
  --gold-fill:     #ffd700;   /* namebars, primary buttons, rank 1 */
  --gold-edge:     #ffd700;   /* active pill border, ✦ tile outline (darker in light mode) */
  --on-gold:       #000000;   /* text on gold fills */
  --gold-dim:      #a07800;
  --gold-glow:     rgba(255,215,0,0.12);   /* active pill / chip fill */
  --gold-glow-md:  rgba(255,215,0,0.20);
  --gold-band:     rgba(255,215,0,0.05);   /* panel header band */
  --row-hover:     rgba(255,215,0,0.05);
  --hairline:      rgba(255,255,255,0.06);  /* row dividers inside panels */
  --primary:       #ffd700;
  --primary-hover: #ffe34d;
  --primary-glow:  rgba(255,215,0,0.15);

  /* Semantic */
  --success:     #4caf50;  --success-bg: rgba(76,175,80,0.12);
  --danger:      #ff5722;  --danger-bg:  rgba(255,87,34,0.12);
  --warning:     #fbc02d;  --warning-bg: rgba(251,192,45,0.10);
  --poison:      #9c4dff;

  /* Seat / identity colors (Upkeep deck.dart) — rings, seat chips, bars. The --pip-* tokens
     below stay for real mana symbols. */
  --seat-w: #fbc02d;  --seat-u: #2196f3;  --seat-b: #9c27b0;
  --seat-r: #f44336;  --seat-g: #4caf50;  --seat-c: #9e9e9e;

  /* Medals */
  --medal-gold:   #ffd700;
  --medal-silver: #8d93a3;
  --medal-bronze: #a2703c;

  /* Elevation: light source = ✦ brand tile, top-left. Shadows fall down-right. */
  --elev:
    inset 0.9px 0.8px 0 rgba(255,236,150,0.20),
    inset -0.8px -0.6px 0 rgba(0,0,0,0.9),
    -7.8px -6.2px 30px -14px rgba(255,215,0,0.14),
    1.6px 1.2px 3px rgba(0,0,0,0.95),
    7px 5.6px 18px rgba(0,0,0,0.85),
    20.3px 16.2px 46px rgba(0,0,0,0.8);
  --elev-sm:  1.6px 1.2px 3px rgba(0,0,0,0.95), 6px 8px 18px rgba(0,0,0,0.8);
  --shadow-hard: 4px 4px 12px #000;
  --brand-glow:
    0 0 0 1px rgba(255,236,150,0.6),
    0 0 18px 4px rgba(255,215,0,0.45),
    0 0 70px 16px rgba(255,215,0,0.16);
  /* legacy names, re-pointed */
  --shadow-sm:   var(--elev-sm);
  --shadow-md:   var(--elev);
  --shadow-lg:   var(--elev);
  --shadow-gold: 0 0 0 transparent;

  /* Nav / mobile shell */
  --nav-bg:       #000000;
  --nav-border:   rgba(255,215,0,0.28);
  --glass-header: rgba(0,0,0,0.82);
  --glass-bar:    rgba(10,10,10,0.88);
  --scrim:        rgba(0,0,0,0.62);
  --avatar-grad-account:     var(--gold-fill);
  --avatar-grad-leaderboard: var(--surface-3);

  /* Art placeholders (striped stand-ins until Scryfall art loads) */
  --stripe-a: #141414;
  --stripe-b: #1c1c1c;
  --art-inner: #000000;   /* inner bg of ringed cards */
  --initials-stroke: #000000;

  /* MTG Color pips (real mana symbols) */
  --pip-W-bg: #F9FAF4; --pip-W-border: #c8b870; --pip-W-text: #6a5820;
  --pip-U-bg: #0E68AB; --pip-U-border: #4a8cc8; --pip-U-text: #b8d8f8;
  --pip-B-bg: #2a1e38; --pip-B-border: #8a6a90; --pip-B-text: #d0b8e0;
  --pip-R-bg: #D3202A; --pip-R-border: #f05050; --pip-R-text: #fff0ee;
  --pip-G-bg: #00733E; --pip-G-border: #40a060; --pip-G-text: #a0f0c0;
  --pip-C-bg: #cccccc; --pip-C-border: #999999; --pip-C-text: #333333;

  /* Type: Inter everywhere. Numbers add font-variant-numeric: tabular-nums. */
  --font-heading: 'Inter', -apple-system, system-ui, sans-serif;
  --font-ui:      'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'Inter', -apple-system, system-ui, sans-serif;
  --track-head:   1.2px;   /* uppercase heading/button tracking */
  --track-label:  0.8px;   /* chips, small labels */

  /* Radii */
  --radius-btn:   15px;   /* buttons, pills, segmented */
  --radius-lg:    12px;   /* cards, panels, ring outer */
  --radius:       10px;   /* list rows, inner ring */
  --radius-input:  8px;
  --ring-w:        3px;   /* identity ring thickness (2.5px on mobile/small) */
}

/* ── LIGHT MODE ─────────────────────────────────── */
[data-theme="light"] {
  --bg:            #f7f5ef;
  --surface:       #ffffff;
  --surface-2:     #ffffff;
  --surface-3:     #efebe0;
  --surface-4:     #e7e1d1;
  --outline:       #ddd5c0;
  --field:         #ffffff;
  --surface-lit:   #ffffff;
  --page-bg:       radial-gradient(circle 1100px at 42px 30px, rgba(255,215,0,0.16), transparent 65%), #f7f5ef;

  --border:        rgba(160,120,0,0.25);
  --border-muted:  rgba(0,0,0,0.07);
  --border-strong: rgba(160,120,0,0.45);

  --text:          #141414;
  --text-2:        rgba(0,0,0,0.70);
  --text-muted:    rgba(0,0,0,0.55);
  --text-subtle:   rgba(0,0,0,0.45);

  --gold:          #7a5c00;   /* ink: passes AA on white */
  --gold-fill:     #ffd700;   /* fills stay bright */
  --gold-edge:     #c9a200;
  --on-gold:       #000000;
  --gold-dim:      #a07800;
  --gold-glow:     rgba(255,215,0,0.35);
  --gold-glow-md:  rgba(255,215,0,0.45);
  --gold-band:     rgba(255,215,0,0.12);
  --row-hover:     rgba(255,215,0,0.08);
  --hairline:      rgba(0,0,0,0.06);
  --primary:       #ffd700;
  --primary-hover: #ffe34d;

  --success: #2e7d32;  --success-bg: rgba(46,125,50,0.08);
  --danger:  #d84315;  --danger-bg:  rgba(216,67,21,0.08);
  --warning: #a07800;  --warning-bg: rgba(160,120,0,0.10);

  --medal-silver: #c9ccd4;
  --medal-bronze: #d9a670;

  /* stronger, brown-tinted shadows + a 1px contact outline so white/gold edges read */
  --elev:
    0 0 0 1px rgba(60,40,0,0.20),
    1px 2px 3px rgba(60,40,0,0.30),
    5px 8px 16px rgba(60,40,0,0.26),
    14px 22px 40px rgba(60,40,0,0.20);
  --elev-sm: 0 0 0 1px rgba(60,40,0,0.15), 3px 4px 10px rgba(60,40,0,0.32);
  --shadow-hard: inset 1px 1px 0 rgba(255,255,255,0.7), 0 0 0 1px rgba(90,60,0,0.3), 3px 4px 10px rgba(90,60,0,0.3);
  --brand-glow: 0 0 0 1px #c9a200, 0 0 18px 4px rgba(255,215,0,0.45);

  --nav-bg:       rgba(255,255,255,0.70);
  --nav-border:   rgba(160,120,0,0.25);
  --glass-header: rgba(255,255,255,0.75);
  --glass-bar:    rgba(255,255,255,0.90);
  --scrim:        rgba(20,15,0,0.35);

  --stripe-a: #efebe0;
  --stripe-b: #f6f3ea;
  --art-inner: #ffffff;
  --initials-stroke: #141414;
}

/* Native form controls and scrollbars follow the theme */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* ── RESET ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--text); }

/* ── IDENTITY RING ──────────────────────────────────
   Decks: color identity · players: favorite colors · battle cards: the winner's deck.
   Markup: <div class="id-ring" style="--ring: {{ identity_ring(colors) }}"><div class="id-ring__inner">…</div></div>
   (macros/components.html::identity_ring, or identityRing() in layout.html for JS-built rows) */
.id-ring        { padding: var(--ring-w); border-radius: var(--radius-lg); background: var(--ring, var(--border)); box-shadow: var(--elev); }
.id-ring__inner { display: block; height: 100%; border-radius: calc(var(--radius-lg) - var(--ring-w)); background: var(--art-inner); overflow: hidden; }
.id-ring--round { display: inline-block; vertical-align: middle; }
.id-ring--round, .id-ring--round .id-ring__inner { border-radius: 50%; }

/* Small seat-colored dots (namebars, under names) */
.cdots { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.cdot  { width: var(--cdot, 10px); height: var(--cdot, 10px); border-radius: 50%; box-shadow: 0 0 0 1.5px #000; flex-shrink: 0; }

/* ── Signature text treatments ── */
.u-head    { font-weight: 800; letter-spacing: var(--track-head); text-transform: uppercase; color: var(--gold); }
.u-label   { font-size: 10px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.u-num     { font-weight: 800; font-variant-numeric: tabular-nums; }
.u-outline { color: #fff; -webkit-text-stroke: 3px var(--initials-stroke); paint-order: stroke fill; } /* initials / numerals over art */


/* ── NAV ─────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--nav-border);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-brand:hover { text-decoration: none; }

/* The ✦ brand tile is the scene's light source: page glow and --elev highlights radiate from it */
.nav-brand-icon {
  width: 36px;
  height: 36px;
  background: var(--gold-fill);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #000;
  flex-shrink: 0;
  box-shadow: var(--brand-glow);
}

.nav-brand-text {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--gold);
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

/* The one part of the bar that gives way: if it still doesn't fit, it scrolls sideways rather than
   widen the page. The padding, cancelled by the margin, keeps focus rings from being clipped. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
  margin: 0 -4px;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: color 0.16s, background 0.16s, border-color 0.16s;
  font-family: var(--font-ui);
}

.nav-link:hover {
  color: var(--text);
  background: var(--row-hover);
  text-decoration: none;
}

.nav-link.active {
  color: var(--gold);
  background: var(--gold-glow);
  border-color: var(--gold-edge);
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.theme-btn {
  width: 34px;
  height: 34px;
  background: var(--surface-3);
  border: 1px solid var(--outline);
  border-radius: var(--radius-input);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: color 0.16s, border-color 0.16s;
}

.theme-btn:hover {
  color: var(--gold);
  border-color: var(--border-strong);
}

.theme-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.nav-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-glow);
  border: 1.5px solid var(--gold-edge);
  border-radius: var(--radius-btn);
  padding: 3px 12px 3px 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.16s;
  font-family: var(--font-ui);
}

.nav-user-chip:hover { background: var(--gold-glow-md); }
.nav-user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Between the phone shell (≤768px) and here, the full bar doesn't fit: the ✦ tile stands in for
   the wordmark (it's the same home link) and the links, padding and account name tighten up. */
@media (max-width: 1100px) {
  .nav { padding: 0 16px; }
  .nav-brand-text { display: none; }
  .nav-link { padding: 7px 8px; }
  .nav-user-name { max-width: 90px; }
}

.nav-user-wrap { position: relative; }

.nav-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 170px;
  box-shadow: var(--elev);
  z-index: 200;
  overflow: hidden;
  display: none;
}
.nav-user-menu.open { display: block; }

.nav-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
}
.nav-user-menu-item:hover { background: var(--row-hover); color: var(--text); text-decoration: none; }
.nav-user-menu-item.danger { color: var(--danger); }
.nav-user-menu-item.danger:hover { background: var(--danger-bg); }

/* Ringed avatar (favorite colors): .nav-user-ring is the .id-ring, .nav-user-avatar its inner */
.nav-user-ring { width: 28px; height: 28px; flex-shrink: 0; --ring-w: 2px; box-shadow: none; }

.nav-user-avatar {
  width: 100%;
  height: 100%;
  background: var(--art-inner);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
  font-family: var(--font-ui);
}

.nav-user-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* .hamburger / .mobile-nav (the old 7-link dropdown) are gone below 768px —
   superseded by the .mhead / .qa / .drawer mobile shell (see MOBILE SHELL). */

/* ── MODAL ───────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 200;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--elev);
  position: relative;
}

.modal-title {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.modal-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--field);
  border: 1px solid var(--outline);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-input);
  line-height: 1;
  transition: color 0.16s, border-color 0.16s;
}

.modal-close:hover {
  border-color: var(--border-strong);
  color: var(--gold);
}

/* ── PAGE ────────────────────────────────────────── */
.page-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 32px 24px;
}

.page-container.narrow { max-width: 760px; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  gap: 12px;
  flex-wrap: wrap;
}

.page-title {
  font-family: var(--font-ui);
  font-size: 26px;
  color: var(--gold);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 6px;
}

/* ── SECTION HEADER ──────────────────────────────── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-ui);
  font-size: 20px;
  color: var(--gold);
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.section-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Centered gold label flanked by hairlines that fade in from the edges */
.section-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 18px;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
}

.section-divider::before {
  background: linear-gradient(90deg, transparent, var(--border));
}

.section-divider::after {
  background: linear-gradient(90deg, var(--border), transparent);
}

.section-divider-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.mb-section { margin-bottom: 32px; }

/* ── CARDS (shared panel) ───────────────────────── */
.card {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--elev);
}

/* Header band: shared by .card-header, .leaderboard-header and the page-local *-head bands */
.card-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--gold-band);
}

.card-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.card-meta { font-size: 11px; color: var(--text-muted); }

/* ── STAT TILES ──────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  text-align: center;
  position: relative;
  transition: transform 0.16s ease;
  overflow: hidden;
  box-shadow: var(--elev);
}

a.stat-card:hover { transform: translateY(-2px); }

.stat-card-value {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-card-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-family: var(--font-ui);
}

/* ── LEADERBOARDS ────────────────────────────────── */
.leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.leaderboard-card {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--elev);
}

.leaderboard-header {
  background: var(--gold-band);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.leaderboard-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.leaderboard-list { list-style: none; }

.leaderboard-item {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-muted);
  gap: 10px;
  transition: background 0.16s;
}

.leaderboard-item:last-child { border-bottom: none; }
.leaderboard-item:hover { background: var(--row-hover); }

/* Rank tile: medal fills for 1–3, neutral after that */
.rank-tile {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-input);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--surface-3);
  color: var(--text-muted);
}
.rank-tile.r1 { background: var(--medal-gold);   color: #000; box-shadow: var(--shadow-hard); }
.rank-tile.r2 { background: var(--medal-silver); color: #000; box-shadow: var(--shadow-hard); }
.rank-tile.r3 { background: var(--medal-bronze); color: #000; box-shadow: var(--shadow-hard); }

/* Ringed round avatar (favorite colors / deck colors) with initials on black */
.ring-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  --ring-w: 2.5px;
  box-shadow: none;
}
.ring-avatar .id-ring__inner {
  display: grid;
  place-items: center;
  background: var(--art-inner);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}
.ring-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.leaderboard-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: var(--font-ui);
}

.leaderboard-value {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
}

/* Leaderboard page rows: top-3 tinted in their medal color */
.lb-row-gold   { background: rgba(255,215,0,0.06) !important; }
.lb-row-silver { background: rgba(141,147,163,0.06) !important; }
.lb-row-bronze { background: rgba(162,112,60,0.06) !important; }
.lb-value {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
}
.lb-table { min-width: 0; }

/* Leaderboard page list (3a): Rank · Player · LGS · value */
.lb-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form-select.lb-cat-select { width: 280px; }
.lb-head,
.lb-row {
  display: grid;
  grid-template-columns: 64px 1fr 200px 110px;
  align-items: center;
  gap: 0;
  padding: 10px 16px;
}
.lb-head {
  background: var(--gold-band);
  border-bottom: 1px solid var(--border-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--gold);
}
.lb-row { border-bottom: 1px solid var(--hairline); transition: background 0.16s; }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--row-hover) !important; }
.lb-num { text-align: right; }
.lb-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-who .ring-avatar { box-shadow: var(--elev-sm); }
.lb-who-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name:hover { color: var(--gold); text-decoration: none; }
.lb-sub { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); min-width: 0; }
.lb-sub span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-store { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.lb-list .cdot { box-shadow: none; }

/* ── TABLE ───────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }

/* ── CHART SLIDER ────────────────────────────────── */
/* Horizontal slider for charts on narrow screens. The inner element gets a
   min-width (via --chart-min-w, usually sized per data point) so charts keep a
   readable scale and scroll sideways instead of squashing. Only applied at phone/
   tablet widths, so desktop charts always fit their card. */
.chart-scroll {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.chart-scroll::-webkit-scrollbar { height: 6px; }
.chart-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.chart-scroll::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 768px) {
  .chart-scroll-inner { min-width: var(--chart-min-w, 0px); }
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.data-table th {
  background: var(--gold-band);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-head);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-muted);
  white-space: nowrap;
}

.data-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-muted);
  font-size: 13px;
  vertical-align: middle;
  font-family: var(--font-ui);
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.16s; }
.data-table tbody tr:hover { background: var(--row-hover); }

.col-id     { color: var(--text-subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.col-strong { font-weight: 600; color: var(--text); }
.col-muted  { color: var(--text-muted); font-size: 12px; }
.col-actions { text-align: right; }

.winner-row { background: rgba(255,215,0,0.08) !important; }
.winner-row td { border-bottom-color: var(--border-muted) !important; }

.search-match { color: var(--gold) !important; font-weight: 700 !important; }

/* ── BADGES / STATUS CHIPS ───────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--font-ui);
  background: transparent;
  line-height: 1.4;
}

/* Status chips lead with a dot in their color */
.badge-success::before,
.badge-danger::before,
.badge-warning::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-primary,
.badge-gold    { color: var(--gold); border: 1px solid var(--border-strong); }
.badge-success { color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 50%, transparent); }
.badge-danger  { color: var(--danger);  border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent); }
.badge-warning { color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent); }
.badge-muted   { color: var(--text-muted); border: 1px solid var(--border); }

/* ── BUTTONS ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-btn);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: background 0.16s, border-color 0.16s, color 0.16s, filter 0.16s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--font-ui);
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--gold-fill);
  color: var(--on-gold);
  box-shadow: var(--shadow-hard);
}

.btn-primary:hover {
  filter: brightness(1.06);
  color: var(--on-gold);
}

.btn-secondary {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--border-strong);
  font-weight: 700;
}

.btn-secondary:hover,
.btn-secondary.active {
  background: var(--gold-glow);
  color: var(--gold);
  border-color: var(--gold-edge);
}

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid color-mix(in srgb, var(--danger) 50%, transparent);
}

.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-sm  { padding: 6px 12px; font-size: 11px; }
.btn-full { width: 100%; justify-content: center; }

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-input);
  background: var(--field);
  color: var(--text-muted);
  border: 1px solid var(--outline);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}

.btn-icon:hover { color: var(--gold); border-color: var(--border-strong); }
.btn-icon.delete:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.btn-icon.edit:hover   { background: var(--gold-glow); color: var(--gold); border-color: var(--gold-edge); }

/* Toggle */
.toggle-wrap { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
.toggle-wrap:hover { text-decoration: none; }
.toggle-label { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; font-family: var(--font-ui); }

.toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--field);
  border: 1px solid var(--outline);
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s, background 0.2s;
}

.toggle-wrap.on .toggle-track { background: var(--gold-glow); border-color: var(--gold-edge); }
.toggle-wrap.on .toggle-track::after { transform: translateX(16px); background: var(--gold-fill); }

/* Picker — checkbox-style multi-select list (e.g. Tools > Print Cards > Import from Archidekt) */
.picker { border: 1px solid var(--outline); border-radius: var(--radius); overflow: hidden; }
.picker-list { max-height: 180px; overflow-y: auto; background: var(--field); }
.picker-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border-muted); transition: background 0.16s; user-select: none;
}
.picker-option:last-child { border-bottom: none; }
.picker-option:hover { background: var(--row-hover); }
.picker-option.selected { background: var(--gold-glow); }

.picker-check {
  width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--outline);
  flex-shrink: 0; transition: background 0.16s, border-color 0.16s;
}
.picker-option.selected .picker-check {
  background: var(--gold-fill); border-color: var(--gold-edge);
}

.picker-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1.5px #000; }

.picker-name {
  font-size: 13px; color: var(--text-2); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-option.selected .picker-name { color: var(--text); font-weight: 600; }

.picker-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Submit button */
.submit-btn {
  width: 100%;
  padding: 13px;
  background: var(--gold-fill);
  color: var(--on-gold);
  border: none;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  transition: filter 0.16s;
  font-family: var(--font-ui);
  box-shadow: var(--shadow-hard);
}

.submit-btn:hover { filter: brightness(1.06); }

/* ── FORMS ───────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--font-ui);
}

.form-input, .form-select {
  padding: 9px 12px;
  background: var(--field);
  border: 2px solid var(--outline);
  border-radius: var(--radius-input);
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.16s;
  outline: none;
  width: 100%;
  font-family: var(--font-ui);
}

.form-input:focus, .form-select:focus {
  border-color: rgba(255,215,0,0.6);
}

.form-input::placeholder { color: var(--text-subtle); }

.form-select { cursor: pointer; }
.form-select option { background: var(--surface); color: var(--text); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid .full { grid-column: 1 / -1; }

/* ── PLANESWALKER PLAYER CARDS ───────────────────── */
.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 310px));
  gap: 24px;
  justify-content: center;
}

/* Outer frame: the identity ring (player's favorite colors) — see .id-ring */
.pw-card {
  position: relative;
  aspect-ratio: 5/7;
  transition: transform 0.16s ease;
}

.pw-card:hover { transform: translateY(-6px); }

.pw-card--inactive { filter: saturate(0.3); opacity: 0.72; }

/* Inner card body */
.pw-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Name bar — flat gold, favorite-color dots at right */
.pw-namebar {
  background: var(--gold-fill);
  padding: 6px 10px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pw-namebar::after,
.v3-foil-header::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
  pointer-events: none;
}

.pw-namebar .cdots { position: relative; z-index: 1; }

.pw-card-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--on-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  line-height: 1.3;
  min-width: 0;
}

/* Art window: a planeswalker frame's art box — ~90% of the card's width at Scryfall's
   planeswalker art_crop ratio (633×468). The text box below takes whatever height is left. */
.pw-art-link {
  flex: none;
  width: 90%;
  align-self: center;
  aspect-ratio: 633 / 468;
  margin-block: 4px;
  display: block;
  text-decoration: none;
}

.pw-art-link:hover {
  text-decoration: none;
}

/* Art box — fills the art window. Favorite-card art is contained, never cropped or
   stretched: a print whose crop is a different shape (retro frames) gets thin black bars.
   With no art it shows a radial glow of the ring color (set inline as --glow) behind
   outlined initials. */
.pw-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glow, var(--art-inner));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 0 1px var(--border);
  position: relative;
  overflow: hidden;
}
.pw-art--img { background-color: #000; }

.pw-initials {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}

/* Type line */
.pw-typeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background: var(--surface-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.pw-type-text {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw-set-icon {
  font-size: 11px;
  color: var(--gold);
  flex-shrink: 0;
}

/* Text/rules box — the abilities split it into even, full-width bands like a planeswalker's
   ability box, each one's text left-aligned and centered on its loyalty pip. */
.pw-textbox {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.pw-ability {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border-muted);
  cursor: pointer;
  transition: background 0.16s ease;
}

.pw-ability:last-child { border-bottom: none; }

.pw-ability:hover {
  background: rgba(255,215,0,0.08);
}

/* Loyalty pip badges */
.pw-loyalty-pip {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  border: 1.5px solid #fff;
  background: #000;
  color: #fff;
  line-height: 1;
  box-shadow: var(--elev-sm);
}

.pw-ability-text {
  font-size: 10px;
  color: var(--text-2);
  line-height: 1.3;
  flex: 1;
}
.pw-ab-short { display: none; }


/* Footer: last game date left, status chip right */
.pw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.pw-footer-game {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pw-footer-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.pw-footer-date {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  white-space: nowrap;
}


@media (max-width: 600px) {
  .pw-card, .deck-card-v3 { --ring-w: 2.5px; }
}

/* Player row (list view) */
.player-list { list-style: none; }

.player-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-muted);
  transition: background 0.1s;
}

.player-row:last-child { border-bottom: none; }
.player-row:hover { background: rgba(255,215,0,0.03); }

.player-row-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--art-inner);
  box-shadow: inset 0 0 0 2.5px var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.player-row-avatar-initials {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
}

.player-row-name {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.player-row-name:hover { color: var(--primary-hover); text-decoration: none; }
.player-row-sub { font-size: 12px; color: var(--text-muted); font-family: var(--font-ui); }
.player-row-info { flex: 1; min-width: 0; }
.player-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── GAME CARDS ──────────────────────────────────── */
.game-card {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
  box-shadow: var(--elev);
}

.game-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border-muted);
  background: rgba(255,215,0,0.03);
  gap: 10px;
  flex-wrap: wrap;
}

.game-card-id {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
}

.game-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── DECK GRID ───────────────────────────────────── */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 310px));
  gap: 24px;
  justify-content: center;
}

/* MTG Card Frame */
.deck-card {
  background: #000;
  border: 3px solid var(--surface-2);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: 7px;
  aspect-ratio: 5 / 7;
  box-shadow: 0 0 0 1px rgba(255,215,0,0.08), 0 4px 16px rgba(0,0,0,0.6);
}

.deck-card:hover {
  transform: translateY(-6px) rotate(0.3deg);
  box-shadow: 0 0 0 1px rgba(255,215,0,0.25), 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(255,215,0,0.08);
  text-decoration: none;
  color: var(--text);
}

.mtg-frame {
  background: var(--surface);
  border-radius: 9px 9px 0 0;
  border: 1.5px solid var(--border);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: hidden;
}

.mtg-name-bar {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  margin-bottom: 2px;
}

.mtg-name {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.mtg-art-wrap {
  width: 100%;
  aspect-ratio: 7 / 4;
  background: var(--surface-lit);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  margin-bottom: 3px;
}

.mtg-type-line {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  margin-bottom: 3px;
}

.mtg-type-text {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mtg-text-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 8px;
  flex: 1;
}

.mtg-flavor-text {
  font-family: var(--font-ui);
  font-size: 9.5px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mtg-bottom-bar {
  background: var(--gold);;
  border-radius: 0;
  margin: -2px -7px -7px;
  padding: 5px 12px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-muted);
}

.mtg-artist-name {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,215,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0.3;
  color: var(--gold);
}

.deck-card-placeholder svg  { width: 45%; max-width: 90px; }
.deck-card-placeholder span { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

.archidekt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--border-muted);
  background: rgba(255,215,0,0.06);
  cursor: pointer;
  transition: all 0.15s;
  padding: 2px;
  flex-shrink: 0;
}

.archidekt-btn:hover {
  border-color: var(--gold);
  background: var(--border-muted);
  box-shadow: 0 0 8px var(--gold-glow-md);
}

.archidekt-btn-disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

/* ── CREATURE DECK CARD ── identity ring (color identity), flat gold namebar.
   Used by the /decks grid and the player page's Vault (built in JS there). */
.deck-card-v3 {
  width: 100%;
  aspect-ratio: 5/7;
  container-type: inline-size;
  cursor: pointer;
  transition: transform 0.16s ease;
  display: block;
  text-decoration: none;
  color: var(--text);
}
.deck-card-v3:hover { transform: translateY(-6px); text-decoration: none; color: var(--text); }
.deck-card-v3 .id-ring__inner { display: flex; flex-direction: column; }

.v3-foil-header {
  background: var(--gold-fill);
  padding: 6px 10px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.v3-foil-header .cdots { position: relative; z-index: 1; }
.v3-deck-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--on-gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  line-height: 1.3;
  min-width: 0;
}

/* Art window: a creature frame's art box — ~85% of the card's width at Scryfall's art_crop
   ratio (626×457) — so commander art shows whole, never cropped or stretched. */
.v3-art {
  width: 85%;
  align-self: center;
  margin-block: 6px 0;
  aspect-ratio: 626 / 457;
  background: repeating-linear-gradient(135deg, var(--stripe-a), var(--stripe-a) 6px, var(--stripe-b) 6px, var(--stripe-b) 12px);
  box-shadow: 0 0 0 1px var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.v3-art-img { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.v3-art .cmdr-partner-overlay { background-size: contain; background-repeat: no-repeat; background-color: #000; }
.v3-art-credit {
  position: absolute; left: 8px; bottom: 5px; z-index: 3;
  font-size: 8px; color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 16px);
}

.v3-body {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.v3-type-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.v3-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--gold);
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.v3-set { font-size: 10px; color: var(--text-subtle); flex-shrink: 0; }
.v3-stat-row {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-top: auto;
}
.v3-stat-box {
  flex: 1;
  background: var(--surface-3);
  border: 1px solid var(--outline);
  border-radius: var(--radius-input);
  padding: 6px 2px;
  text-align: center;
}
.v3-stat-val {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}
.v3-stat-lbl {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}
/* Text box: as many whole lines of the deck's description as the card has room for, then an
   ellipsis. Sized to its lines rather than stretched — a stretched box would show the top of
   the first clamped line — with the stats pushed to the bottom. The line count steps up with
   the card's width (measured: 2 lines at 260px, 4 at the usual 310px). */
.v3-flavor {
  flex: 0 1 auto;
  min-height: 0;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@container (min-width: 276px) { .v3-flavor { -webkit-line-clamp: 3; } }
@container (min-width: 296px) { .v3-flavor { -webkit-line-clamp: 4; } }
.v3-flavor--empty { color: var(--text-subtle); font-style: italic; }

.v3-footer {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.v3-owner {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3-instance {
  font-size: 9px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.v3-inactive {
  font-size: 8px;
  padding: 1px 6px;
  background: #000;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── MTG COLOR VARIANTS ──────────────────────────── */
.deck-card.mtg-white .mtg-frame { border-color: rgba(249,250,244,0.4); }
.deck-card.mtg-white:hover { box-shadow: 0 0 0 1px rgba(249,250,244,0.35), 0 8px 32px rgba(0,0,0,0.7); }

.deck-card.mtg-blue .mtg-frame { border-color: rgba(14,104,171,0.55); }
.deck-card.mtg-blue:hover { box-shadow: 0 0 0 1px rgba(14,104,171,0.5), 0 8px 32px rgba(0,0,0,0.7); }

.deck-card.mtg-black .mtg-frame { border-color: rgba(21,11,0,0.7); }
.deck-card.mtg-black:hover { box-shadow: 0 0 0 1px rgba(21,11,0,0.7), 0 8px 32px rgba(0,0,0,0.7); }

.deck-card.mtg-red .mtg-frame { border-color: rgba(211,32,42,0.5); }
.deck-card.mtg-red:hover { box-shadow: 0 0 0 1px rgba(211,32,42,0.45), 0 8px 32px rgba(0,0,0,0.7); }

.deck-card.mtg-green .mtg-frame { border-color: rgba(0,115,62,0.5); }
.deck-card.mtg-green:hover { box-shadow: 0 0 0 1px rgba(0,115,62,0.45), 0 8px 32px rgba(0,0,0,0.7); }

/* ── DETAIL HERO ─────────────────────────────────── */
.detail-hero {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
  box-shadow: var(--elev);
}

.detail-hero-banner {
  height: 90px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.detail-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.04), transparent);
}

.detail-hero-body { padding: 0 24px 22px; }

.detail-hero-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--gold-fill);
  border: 3px solid var(--surface);
  margin-top: -34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  color: var(--on-gold);
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(255,215,0,0.3);
}

.detail-hero-name {
  font-family: var(--font-ui);
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 8px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.detail-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Deck detail hero */
.deck-hero {
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--surface-lit);
  border: 1px solid var(--border);
  box-shadow: var(--elev);
}

.deck-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.deck-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0)    25%,
    rgba(0,0,0,0.5) 50%,
    rgba(0,0,0,0.85) 70%,
    rgba(0,0,0,0.97) 86%,
    var(--surface-2)          100%
  );
}

.deck-hero-edit {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 8px;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  z-index: 4;
  transition: all 0.15s;
}

.deck-hero-edit:hover {
  background: var(--border-muted);
  border-color: var(--gold);
  text-decoration: none;
  color: var(--gold);
}

.deck-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 28px;
  z-index: 2;
}

.deck-hero-name {
  font-family: var(--font-ui);
  font-size: 26px;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

.deck-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── DETAIL STATS GRID ───────────────────────────── */
.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

/* Stat tile: big white number, small uppercase label. .accent = gold fill, black value. */
.detail-stat-box {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  text-align: center;
  position: relative;
  box-shadow: var(--elev);
}

.detail-stat-value {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}

.detail-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-family: var(--font-ui);
}

.detail-stat-box.accent { background: var(--gold-fill); border-color: var(--gold-edge); }
.detail-stat-box.accent .detail-stat-value { color: #000; }
.detail-stat-box.accent .detail-stat-label { color: rgba(0,0,0,0.7); }

/* ── TAB BAR / PILLS ─────────────────────────────── */
.tab-bar-wrap { position: relative; }

.tab-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar { display: none; }

/* Pill: rest = hairline outline, active = gold glow + gold edge */
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  transition: background 0.16s, border-color 0.16s, color 0.16s;
  flex-shrink: 0;
  font-family: var(--font-ui);
}

.tab-btn:hover { color: var(--gold); text-decoration: none; }
.tab-btn.active { color: var(--gold); background: var(--gold-glow); border: 1.5px solid var(--gold-edge); font-weight: 700; }

/* Segmented control (Players | Decks, status filters): one track, gold-glow active segment */
.tab-bar-wrap .tab-bar {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  background: var(--field);
  border: 1px solid var(--outline);
  border-radius: var(--radius-btn);
  padding: 4px;
}
.tab-bar-wrap .tab-btn {
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px 18px;
}
.tab-bar-wrap .tab-btn.active {
  background: var(--gold-glow);
  color: var(--gold);
  box-shadow: inset 0 0 0 1.5px var(--gold-edge);
}

/* ── PLAYER SLOT (game create) ───────────────────── */
.player-slot {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 14px;
  position: relative;
  box-shadow: var(--elev);
}

.player-slot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.player-slot-label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--gold);
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
}

/* ── TOAST ───────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  min-width: 240px;
  max-width: 360px;
  box-shadow: var(--elev);
  animation: slideIn 0.25s ease;
  pointer-events: all;
  font-family: var(--font-ui);
}

.toast.success { border-left: 3px solid var(--gold-fill); }
.toast.error   { border-left: 3px solid var(--danger); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── EMPTY STATE ─────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 52px 24px;
  color: var(--text-muted);
}

.empty-state-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.35; }

.empty-state-text {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
}

/* ── BACK LINK ───────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  opacity: 0.7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 20px;
  transition: opacity 0.16s;
  font-family: var(--font-ui);
}

.back-link:hover { opacity: 1; color: var(--gold); text-decoration: none; }

/* ── PLAYER AVATAR ───────────────────────────────── */
.player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.player-avatar.sm { width: 28px; height: 28px; font-size: 10px; }
.player-avatar.lg { width: 64px; height: 64px; font-size: 22px; }

/* ── SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── UTILITIES ───────────────────────────────────── */
.text-muted    { color: var(--text-muted); }
.text-sm       { font-size: 12px; }
.text-xs       { font-size: 10px; }
.font-bold     { font-weight: 700; }
.font-mono     { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.font-display  { font-family: var(--font-ui); }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.gap-2         { gap: 8px; }
.gap-3         { gap: 12px; }
.mt-2          { margin-top: 8px; }
.mt-4          { margin-top: 16px; }
.mb-4          { margin-bottom: 16px; }
.mb-6          { margin-bottom: 24px; }
.w-full        { width: 100%; }

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 768px) {
  /* The desktop top nav is fully replaced by .mhead/.qa/.drawer below 768px
     (see MOBILE SHELL) rather than collapsing into a dropdown. */
  .nav { display: none; }
  .page-container { padding: 68px 16px 118px; }
  .page-title { font-size: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .deck-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); gap: 14px; justify-content: center; }
  .leaderboard-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .detail-stats-grid { grid-template-columns: 1fr 1fr; }
  /* Fixed two-up like the decks .mgrid: auto-fill sizes its column count off the 200px max, so
     a ~360–412px phone only ever fit one card per row. minmax(0,1fr) keeps a long name from
     widening its column. */
  .player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Two-up cards are ~158px wide on a phone. Everything around the art window tightens so both
     abilities still stack under the type line, as on a real planeswalker: shorter ability labels,
     and the footer collapses to one line with the status chip reduced to its dot. */
  .pw-namebar { padding: 4px 8px; }
  .pw-card-name { font-size: 11px; }
  .pw-initials { font-size: 34px; }
  .pw-art-link { margin-block: 3px; }
  .pw-typeline { padding: 2px 8px; }
  .pw-type-text { font-size: 8.5px; }
  .pw-ability { gap: 5px; padding: 2px 8px; }
  .pw-ability-text { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pw-loyalty-pip { width: 16px; height: 16px; font-size: 7.5px; }
  .pw-ab-full { display: none; }
  .pw-ab-short { display: inline; }
  .pw-footer { padding: 4px 8px; gap: 6px; }
  .pw-footer-game { flex-direction: row; align-items: baseline; gap: 4px; }
  .pw-footer-date { font-size: 9.5px; }
  .pw-footer .badge { font-size: 0; gap: 0; padding: 0; border: none; }
}

@media (max-width: 480px) {
  .deck-grid { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* ── MOBILE SHELL ──────────────────────────────────
   Slim hide-on-scroll header, floating quick-action bar, two-panel left
   drawer (nav + filters) and bottom sheets — from the mobile-shell design
   handoff. Hidden by default; only shown below 768px (see media query at
   the bottom of this section), so nothing here affects desktop layout. ── */
.mhead, .qa, .scrim, .drawer, .sheet { display: none; }

@media (max-width: 768px) {

  /* — header — */
  .mhead {
    display: flex; position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 40;
    align-items: center; gap: 10px; padding: 0 12px;
    background: var(--glass-header); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transition: transform .26s ease;
  }
  .mhead.mhead-hidden { transform: translateY(-100%); }
  .mhead-title { flex: 1; min-width: 0; position: relative; height: 20px; }
  .mhead-title span {
    position: absolute; inset: 0; display: flex; align-items: center;
    font-family: var(--font-ui); font-size: 13px; font-weight: 800; letter-spacing: var(--track-head); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity .18s, transform .18s;
  }
  .mhead-title .mhead-brand { color: var(--gold); }
  /* The wordmark only just fits at 360px, and text-overflow doesn't apply to a flex span. */
  @media (max-width: 359px) { .mhead-title .mhead-brand { font-size: 3.25vw; } }
  .mhead-title .mhead-ctx { color: var(--text); opacity: 0; transform: translateY(6px); }
  .mhead.mhead-scrolled .mhead-brand { opacity: 0; transform: translateY(-6px); }
  .mhead.mhead-scrolled .mhead-ctx { opacity: 1; transform: none; }
  .mhead-btn {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    border: 1px solid var(--outline); border-radius: 10px; background: var(--field);
    color: var(--text); font-size: 16px; cursor: pointer; padding: 0;
  }
  /* ✦ brand tile — the mobile light source, right after the hamburger */
  .mhead-tile {
    width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center;
    background: var(--gold-fill); color: #000; font-size: 13px; line-height: 1; text-decoration: none;
    box-shadow: 0 0 0 1px rgba(255,236,150,0.6), 0 0 14px 3px rgba(255,215,0,0.45), 0 0 50px 12px rgba(255,215,0,0.16);
  }
  [data-theme="light"] .mhead-tile { box-shadow: var(--brand-glow); }
  /* Ringed account avatar (favorite colors): .mhead-ring is the .id-ring, .mhead-avatar its inner */
  .mhead-ring { width: 34px; height: 34px; flex: none; --ring-w: 2.5px; box-shadow: none; cursor: pointer; }
  .mhead-avatar {
    width: 100%; height: 100%; display: grid; place-items: center;
    background: var(--art-inner); font-size: 11px; font-weight: 800; color: var(--text);
    font-family: var(--font-ui); overflow: hidden;
  }
  .mhead-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mhead-btn-sm { width: 34px; height: 34px; font-size: 14px; }

  /* — floating quick-action bar — */
  .qa {
    display: flex; position: fixed; left: 10px; right: 10px; z-index: 45;
    bottom: calc(14px + env(safe-area-inset-bottom));
    align-items: flex-end; justify-content: space-around; gap: 4px; height: 64px; padding: 0 6px;
    border-radius: 20px; background: var(--glass-bar); backdrop-filter: blur(14px);
    border: 1px solid var(--border-strong);
    box-shadow: inset 0 1px 0 rgba(255,236,150,.18), 0 -2px 14px rgba(0,0,0,.4), 8px 10px 24px rgba(0,0,0,.8);
  }
  .qa:empty { display: none; }
  .qab {
    flex: 1; min-width: 0; height: 56px; margin-bottom: 4px; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; color: var(--text-muted); font-family: var(--font-ui);
    font-size: 9.5px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
    cursor: pointer; border-radius: 14px; padding: 0; text-decoration: none;
  }
  .qab svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .qab:active { background: var(--row-hover); }
  .qab.qab-on { color: var(--gold); }
  .qab.qab-mine-on { color: var(--gold); background: var(--gold-glow); box-shadow: inset 0 0 0 1.5px var(--gold-edge); }
  .qab.qab-primary {
    flex: 0 0 62px; height: 62px; margin-bottom: 12px; border-radius: 50%;
    background: var(--gold-fill); color: #000;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), 0 0 0 3px #000, 0 0 22px rgba(255,215,0,.45), 6px 8px 18px rgba(0,0,0,.8); font-size: 0;
  }
  .qab.qab-primary svg { width: 26px; height: 26px; stroke-width: 2.2; }
  .qab .qab-dot { position: absolute; top: 8px; left: 50%; margin-left: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

  /* — scrim + left drawer, two panels — */
  .scrim {
    display: block; position: fixed; inset: 0; z-index: 60; background: var(--scrim);
    backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .scrim.scrim-on { opacity: 1; pointer-events: auto; }
  .drawer {
    display: block; position: fixed; top: 0; bottom: 0; left: 0; width: min(312px, 86vw); z-index: 70;
    background: var(--surface); border-right: 1px solid var(--border-strong);
    box-shadow: 18px 0 40px rgba(0,0,0,.6);
    transform: translateX(-102%); transition: transform .28s cubic-bezier(.22,.9,.3,1);
    overflow: hidden;
  }
  .drawer.drawer-on { transform: translateX(0); }
  .drawer-track { display: flex; width: 200%; height: 100%; transition: transform .28s cubic-bezier(.22,.9,.3,1); }
  .drawer.drawer-p2 .drawer-track { transform: translateX(-50%); }
  .drawer-panel { width: 50%; height: 100%; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
  .drawer-panel::-webkit-scrollbar { display: none; }
  .dhero {
    height: 112px; flex: none; border-bottom: 1px solid var(--border); position: relative;
    display: flex; align-items: flex-end; padding: 10px 14px;
    background: repeating-linear-gradient(135deg, var(--stripe-a), var(--stripe-a) 7px, var(--stripe-b) 7px, var(--stripe-b) 14px);
  }
  .dhero .dhero-who { display: flex; align-items: center; gap: 10px; }
  .dhero .dhero-ring { width: 46px; height: 46px; --ring-w: 2.5px; }
  .dhero .dhero-av { font-size: 14px; }
  .dhero .dhero-nm { font-size: 14px; font-weight: 800; letter-spacing: var(--track-head); text-transform: uppercase; color: var(--gold); }
  .dhero .dhero-rl { font-size: 10px; color: var(--text-muted); }
  .dsec { padding: 8px 0; border-bottom: 1px solid var(--border-muted); }
  .dsec-t { font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-subtle); padding: 6px 16px; }
  .ditem {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 16px;
    background: none; border: none; color: var(--text); font-family: var(--font-ui);
    font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; text-decoration: none;
  }
  .ditem:hover, .ditem:active { background: var(--row-hover); text-decoration: none; color: var(--text); }
  .ditem.ditem-on { color: var(--gold); background: var(--gold-glow); box-shadow: inset 3px 0 0 var(--gold-fill); font-weight: 700; }
  .ditem svg { width: 19px; height: 19px; flex: none; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .dfoot { margin-top: auto; padding: 12px 16px 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
  .swrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
  .sw { width: 40px; height: 23px; flex: none; border-radius: 12px; background: var(--field); border: 1px solid var(--outline); position: relative; cursor: pointer; }
  .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--text-subtle); transition: transform .2s, background .2s; }
  .sw.sw-on { background: var(--gold-glow); border-color: var(--gold-edge); }
  .sw.sw-on::after { transform: translateX(17px); background: var(--gold-fill); }
  .linkcta { display: flex; flex-direction: column; gap: 8px; padding: 14px; margin: 0 0 4px; background: var(--field); border: 1px dashed var(--border-strong); border-radius: 12px; }
  .linkcta p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
  .linkcta a.linkcta-btn {
    min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-btn);
    border: none; background: var(--gold-fill); box-shadow: var(--shadow-hard);
    color: var(--on-gold); font-family: var(--font-ui); font-size: 12px; font-weight: 800;
    letter-spacing: var(--track-head); text-transform: uppercase; text-decoration: none;
  }

  /* — drawer panel 2: filter panel host — */
  .pbar { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); flex: none; }
  .pbar .pbar-t { font-size: 13px; font-weight: 800; letter-spacing: var(--track-head); text-transform: uppercase; color: var(--gold); flex: 1; }
  .pbar .pbar-clr { font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); background: none; border: none; cursor: pointer; }
  .drawer-filter-scroll { flex: 1; overflow-y: auto; }
  .drawer .filter-panel { position: static; border: none; background: none; border-radius: 0; box-shadow: none; }
  .fapply {
    margin: 12px 14px 16px; padding: 14px; border-radius: var(--radius-btn); border: none;
    background: var(--gold-fill); color: var(--on-gold); font-family: var(--font-ui); box-shadow: var(--shadow-hard);
    font-size: 13px; font-weight: 800; letter-spacing: var(--track-head); text-transform: uppercase; cursor: pointer; flex: none;
  }

  /* — bottom sheets (search / category / more) — */
  .sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--surface); border-top: 1px solid var(--border-strong);
    border-radius: 20px 20px 0 0; box-shadow: 0 -14px 40px rgba(0,0,0,.6);
    transform: translateY(104%); transition: transform .28s cubic-bezier(.22,.9,.3,1);
    padding: 10px 14px calc(22px + env(safe-area-inset-bottom));
    max-height: 80vh; overflow-y: auto;
  }
  .sheet.sheet-on { transform: translateY(0); }
  .grab { width: 44px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 2px auto 14px; }
  .searchfield { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border-radius: var(--radius-input); background: var(--field); border: 2px solid var(--outline); }
  .searchfield svg { flex: none; width: 18px; height: 18px; stroke: var(--gold); stroke-width: 1.8; fill: none; stroke-linecap: round; }
  .searchfield input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-family: var(--font-ui); font-size: 15px; }
  .searchfield input::placeholder { color: var(--text-subtle); }
  .shint { font-size: 10px; font-weight: 700; color: var(--text-subtle); margin: 10px 2px 4px; letter-spacing: var(--track-label); text-transform: uppercase; }
  .mlist { display: grid; gap: 2px; }
  .mitem {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px;
    background: none; border: none; color: var(--text); font-family: var(--font-ui);
    font-size: 14.5px; text-align: left; cursor: pointer; border-radius: 10px; text-decoration: none;
  }
  .mitem:hover, .mitem:active { background: var(--row-hover); text-decoration: none; color: var(--text); }
  .mitem svg { width: 19px; height: 19px; flex: none; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .mitem .mitem-sub { margin-left: auto; font-size: 11px; color: var(--text-muted); }
  .mitem.mitem-current { color: var(--gold); }

  /* — active-filter strip — */
  .fstrip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
  .fstrip::-webkit-scrollbar { display: none; }
  /* Active filters use the active-pill style; .ftag-rest is the outlined rest style */
  .ftag {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
    border-radius: var(--radius-btn); background: var(--gold-glow); border: 1.5px solid var(--gold-edge);
    color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    white-space: nowrap; cursor: pointer; font-family: var(--font-ui); text-decoration: none;
  }
  .ftag:hover { text-decoration: none; color: var(--gold); }
  .ftag.ftag-rest { background: transparent; border: 1px solid var(--border); color: var(--text-2); font-weight: 600; }
  .ftag button { background: none; border: none; color: inherit; font-size: 13px; cursor: pointer; padding: 0; line-height: 1; }

  /* — segmented control (Players/Decks, Stores All/Near Me/Mine) — restyles the
       existing .tab-bar/.tab-btn so the same markup works at both breakpoints — */
  .tab-bar-wrap .tab-bar { display: flex; width: 100%; border-radius: 12px; }
  .tab-bar-wrap .tab-btn { flex: 1; min-height: 36px; border-radius: 9px; }
  .lb-controls { display: block; }

  /* — mobile row/card list patterns (Leaderboard, Decks, Games, Stores) — */
  .lbrow {
    display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 9px 12px; margin-bottom: 8px;
    background: var(--surface-lit); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev);
  }
  .lbrow .rank-tile { width: 28px; height: 28px; font-size: 12px; }
  .lbrow.lbrow-gold { background: linear-gradient(rgba(255,215,0,0.06), rgba(255,215,0,0.06)), var(--surface-lit); }
  .lbrow.lbrow-silver { background: linear-gradient(rgba(141,147,163,0.06), rgba(141,147,163,0.06)), var(--surface-lit); }
  .lbrow.lbrow-bronze { background: linear-gradient(rgba(162,112,60,0.06), rgba(162,112,60,0.06)), var(--surface-lit); }
  .lbav.ring-avatar { width: 38px; height: 38px; }
  .lbav.ring-avatar .id-ring__inner { font-size: 11px; }
  .lbrow .lbrow-body { flex: 1; min-width: 0; }
  .lbrow .lbrow-t { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lbrow .lbrow-s { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lbval { flex: none; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold); }
  .lbrow.lbrow-me { border-color: var(--gold-edge); background: linear-gradient(var(--gold-glow), var(--gold-glow)), var(--surface-lit); }

  /* minmax(0,1fr), not 1fr 1fr: a long nowrap name would otherwise widen its column */
  .mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Laid out like a creature card at MTG proportions (63×88mm ≈ 5:7, same as .pw-card /
     .deck-card-v3): name and colors across the top, then the art window — ~85% of the card's
     width at Scryfall's art_crop ratio (626×457), so art is never cropped or stretched — the
     owner as the type line, and a text box that takes whatever height is left: as much of the
     description as fits, then the stats along its bottom edge. */
  .dcard-m { --ring-w: 2.5px; aspect-ratio: 5/7; container-type: inline-size; text-decoration: none; color: var(--text); display: block; min-width: 0; }
  .dcard-m:hover { text-decoration: none; color: var(--text); }
  .dcard-m .id-ring__inner { display: flex; flex-direction: column; background: var(--surface-lit); }
  .dcard-m .dcard-m-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px 4px; flex-shrink: 0; }
  .dcard-m .dcard-m-n { min-width: 0; font-size: 11.5px; font-weight: 800; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dcard-m .dcard-m-art { width: 85%; align-self: center; flex-shrink: 0; aspect-ratio: 626 / 457; background: repeating-linear-gradient(135deg, var(--stripe-a), var(--stripe-a) 6px, var(--stripe-b) 6px, var(--stripe-b) 12px); box-shadow: 0 0 0 1px var(--border); position: relative; overflow: hidden; }
  .dcard-m .dcard-m-art img { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
  .dcard-m .dcard-m-o { flex-shrink: 0; padding: 4px 8px 0; font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dcard-m .dcard-m-text { flex: 1; min-height: 0; margin: 4px 6px 6px; display: flex; flex-direction: column; background: var(--surface-3); border: 1px solid var(--outline); border-radius: var(--radius-input); overflow: hidden; }
  .dcard-m .dcard-m-desc { flex: 0 1 auto; min-height: 0; margin: 0; padding: 4px 6px 0; font-size: 9.5px; line-height: 1.35; color: var(--text-2); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  /* Whole lines only, ending in an ellipsis: how many fit grows with the card's width (measured
     at 2 on a 360px phone, 3 at 390–412px, 6 on tablets — a full 255-character description). */
  @container (min-width: 151px) { .dcard-m .dcard-m-desc { -webkit-line-clamp: 2; } }
  @container (min-width: 168px) { .dcard-m .dcard-m-desc { -webkit-line-clamp: 3; } }
  @container (min-width: 184px) { .dcard-m .dcard-m-desc { -webkit-line-clamp: 4; } }
  @container (min-width: 201px) { .dcard-m .dcard-m-desc { -webkit-line-clamp: 5; } }
  @container (min-width: 217px) { .dcard-m .dcard-m-desc { -webkit-line-clamp: 6; } }
  .dcard-m .dcard-m-desc--empty { color: var(--text-muted); font-style: italic; }
  .dcard-m .dcard-m-stats { flex-shrink: 0; margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px 0; border-top: 1px solid var(--border); }
  .dcard-m .dcard-m-stat { min-width: 0; display: flex; flex-direction: column; align-items: center; }
  .dcard-m .dcard-m-stat + .dcard-m-stat { border-left: 1px solid var(--border); }
  .dcard-m .dcard-m-stat b { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
  .dcard-m .dcard-m-stat span { margin-top: 1px; font-size: 7px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); }
  .dcard-m .dcard-m-stat--wr b { color: var(--success); }

  .rowcard-m { display: flex; align-items: center; gap: 12px; background: var(--surface-lit); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev); padding: 12px; margin-bottom: 8px; min-height: 64px; text-decoration: none; color: var(--text); }
  .rowcard-m:hover { text-decoration: none; color: var(--text); }
  .rowcard-m .rowcard-m-art { width: 44px; height: 44px; flex: none; border-radius: 8px; background: repeating-linear-gradient(135deg, var(--stripe-a), var(--stripe-a) 5px, var(--stripe-b) 5px, var(--stripe-b) 10px); border: 1px solid var(--border); overflow: hidden; }
  /* Game rows: the winner's art in a ring of the winning deck's colors */
  .rowcard-m .rowcard-m-ring { width: 46px; height: 46px; flex: none; --ring-w: 2.5px; border-radius: 10px; box-shadow: none; }
  .rowcard-m .rowcard-m-ring .rowcard-m-art { width: 100%; height: 100%; border: none; border-radius: 7.5px; }
  .rowcard-m .rowcard-m-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rowcard-m .rowcard-m-body { flex: 1; min-width: 0; }
  .rowcard-m .rowcard-m-t { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rowcard-m .rowcard-m-s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .storerow-m { display: flex; align-items: center; gap: 12px; background: var(--surface-lit); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--elev); padding: 12px; margin-bottom: 8px; min-height: 64px; }
  .storerow-m .storerow-m-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--field); border: 1px solid var(--outline); display: grid; place-items: center; font-size: 17px; }
  .storerow-m .storerow-m-body { flex: 1; min-width: 0; }
  .storerow-m .storerow-m-t { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .storerow-m .storerow-m-t a { color: inherit; }
  .storerow-m .storerow-m-s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
  .storerow-m .storerow-m-dist { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold); }
  .storerow-m .storerow-m-go { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--outline); background: var(--field); color: var(--gold); display: grid; place-items: center; font-size: 13px; text-decoration: none; }

  /* Desktop/mobile list toggling: each converted page renders both a desktop
     view (kept exactly as-is) and a compact mobile view from the same data;
     CSS below decides which one is in the document flow. */
  .mobile-only { display: block; }
  .mobile-only.mobile-only-grid { display: grid; }
  /* The desktop table/grid these mobile views replace (opted in per-container,
     not a blanket .table-wrapper rule — other pages' tables are unrelated).
     !important because the containers it hides set their own display later in this
     file (.battle-grid, .deck-grid, …) and would otherwise win at equal specificity. */
  .desktop-only-list { display: none !important; }
}

@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}

/* ── BATTLE CARD GRID ── */
.battle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, max-content));
  gap: 32px;
  justify-content: center;
}

/* ── FLIP SCENE ── the scene is the identity ring (winning deck's colors), see .id-ring */
.flip-scene {
  width: 480px;
  height: 340px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 16px;
  transition: transform 0.16s ease;
}

.flip-scene:hover { transform: translateY(-6px); }

/* Crossfade flip — reliable across all browsers, no 3D stacking issues */
.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
}

.flip-face {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  overflow: hidden;
  transition: opacity 0.45s ease, transform 0.45s ease;
  will-change: opacity, transform;
}

.flip-face--front {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.flip-face--back {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.flip-card.flipped .flip-face--front {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.flip-card.flipped .flip-face--back {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ── CARD SHELL (front + back shared) ── */
.bc-shell {
  width: 100%;
  height: 100%;
  background: var(--art-inner);
  border-radius: 13px;
  /* Left 28px is the side strip: store · date */
  padding: 8px 8px 8px 28px;
  position: relative;
  display: flex;
  flex-direction: row;
  color: var(--text);
}

/* ── LEFT SIDE STRIP ── */
.bc-side {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}

.bc-side-store,
.bc-side-date {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-transform: uppercase;
}

.bc-side-store {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 55%;
}

.bc-side-date {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  color: var(--gold);
}

.bc-side-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}

/* ── FRONT FRAME ── */
.bc-frame {
  flex: 1;
  border-radius: 20px 10px 10px 20px;
  border: 1.5px solid var(--gold-edge);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--art-inner);
}

/* Flip icon: black disc, gold rim, white star — top-left over the namebar */
.bc-flip-icon {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #000;
  border: 1.5px solid var(--gold-fill);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 3;
}

/* ── NAME BAR ── */
.bc-namebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 14px 5px 36px;
  flex-shrink: 0;
  background: var(--gold-fill);
  position: relative;
  z-index: 2;
}

.bc-deck-name {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--on-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── ART ZONE ── full-bleed behind everything, fading to black at the bottom */
.bc-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 60px;
  background: repeating-linear-gradient(135deg, var(--stripe-a), var(--stripe-a) 7px, var(--stripe-b) 7px, var(--stripe-b) 14px);
}

/* Transparent spacer that pushes typeline + textbox to the bottom */
.bc-art-spacer {
  flex: 1;
  pointer-events: none;
}

.bc-art-initials {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 2px;
  position: relative;
  z-index: 0;
  pointer-events: none;
}

.bc-art-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center top;
  animation: bcArtPan 24s ease-in-out infinite alternate;
}

@keyframes bcArtPan {
  from { transform: scale(1.05) translateX(0%);  }
  to   { transform: scale(1.05) translateX(-2%); }
}

.bc-art-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 30%, #000 90%);
}

/* Art credit — top-right under the namebar, clear of the text box */
.bc-art-credit {
  position: absolute;
  right: 10px;
  top: 30px;
  z-index: 3;
  font-size: 8px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px);
}

/* ── TYPE LINE ── flat gold tab */
.bc-typeline {
  margin: 0 18px;
  padding: 3px 10px;
  background: var(--gold-fill);
  border-radius: 6px 6px 0 0;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--on-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── TEXT BOX ── replaces the parchment */
.bc-textbox {
  margin: 0 18px;
  /* Right padding reserves space for the defense hexagon */
  padding: 6px 30px 8px 10px;
  background: rgba(0,0,0,0.82);
  border: 1px solid var(--border);
  border-top: none;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.bc-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0;
  min-width: 0;
}

/* Seat chip: that player's deck ring, turn number in outlined white */
.bc-seat {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--ring, var(--border));
  box-shadow: 0 0 0 1.5px #000;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  line-height: 1;
}

.bc-seat--sm {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 8.5px;
}

.bc-player-name {
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-player-row--winner .bc-player-name {
  font-weight: 800;
  color: var(--gold-fill);
}

.bc-player-deck {
  font-size: 10px;
  color: rgba(255,255,255,0.54);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-win-tag {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--on-gold);
  background: var(--gold-fill);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ── DEFENSE HEXAGON ── player count, bottom-right like a real Battle card */
.bc-defense {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 36px;
  height: 40px;
  display: grid;
  place-items: center;
  z-index: 5;
}

/* Outer ring — same hexagon, scaled slightly larger, behind the fill */
.bc-defense::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 20%, 100% 75%, 50% 100%, 0% 75%, 0% 20%);
  background: #000;
  transform: scale(1.14);
}

.bc-defense-bg {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 20%, 100% 75%, 50% 100%, 0% 75%, 0% 20%);
  background: var(--gold-fill);
}

.bc-defense-num {
  font-size: 17px;
  font-weight: 800;
  position: relative;
  line-height: 1;
}

/* ── BACK FACE ── */
.bc-back-frame {
  flex: 1;
  border-radius: 10px;
  border: 1.5px solid var(--gold-edge);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-lit);
}

.bc-back-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  flex-shrink: 0;
  background: var(--gold-band);
  border-bottom: 1px solid var(--border-muted);
}

.bc-back-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--gold);
}

.bc-back-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--border-strong);
  padding: 2px 8px;
  border-radius: 12px;
}

.bc-back-body {
  flex: 1;
  padding: 6px 12px;
  overflow: hidden;
  --bc-cols: 28px 1.1fr 1.4fr 44px;
}

.bc-back-body--poison { --bc-cols: 28px 1.1fr 1.4fr 40px 24px; }

/* Results rows */
.bc-back-row {
  display: grid;
  grid-template-columns: var(--bc-cols);
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}

.bc-back-row:last-child { border-bottom: none; }

.bc-back-row--head {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--border-muted);
}

.bc-winner-tr { background: rgba(255,215,0,0.08); }

.td-player {
  font-size: 11px;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-player a, .td-deck { color: inherit; text-decoration: none; }
.td-player a:hover, .td-deck:hover { text-decoration: underline; color: inherit; }

.td-player--winner {
  font-weight: 800;
  color: var(--gold);
}

.td-deck-cell { min-width: 0; }

.td-deck {
  display: block;
  font-size: 10px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-elim {
  display: block;
  font-size: 8.5px;
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.td-life { font-size: 15px; font-weight: 800; }

.td-life-dead { color: var(--danger); }
.td-life-low  { color: var(--warning); }
.td-life-ok   { color: var(--success); }
.td-poison    { color: var(--poison); font-weight: 800; font-size: 12px; }
.td-muted     { color: var(--text-subtle); }

.bc-back-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.bc-back-link {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--on-gold);
  background: var(--gold-fill);
  padding: 5px 12px;
  border-radius: var(--radius-btn);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5), var(--shadow-hard);
  text-decoration: none;
}

.bc-back-link:hover { color: var(--on-gold); text-decoration: none; filter: brightness(1.06); }

.bc-back-flip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .battle-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, max-content));
    gap: 20px;
  }
  .flip-scene { width: 360px; height: 255px; }
}

@media (max-width: 560px) {
  .battle-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .flip-scene { width: 300px; height: 213px; --ring-w: 2.5px; }
}

/* ── PAGINATION ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

/* Pills: rest = hairline outline, current page = gold glow + gold edge */
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.pagination-btn:hover {
  color: var(--gold);
  background: var(--row-hover);
  text-decoration: none;
}

.pagination-btn--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.pagination-btn.active { background: var(--gold-glow); border: 1.5px solid var(--gold-edge); color: var(--gold); font-weight: 700; }

@media (max-width: 768px) {
  /* .pagination is a plain nowrap flex row — fine on desktop's wide columns, but on a phone a
     Prev/1…N/Next row easily exceeds the viewport and causes horizontal page overflow instead
     of just wrapping to a second line. */
  .pagination { flex-wrap: wrap; gap: 8px; row-gap: 8px; }
}
.pagination-ellipsis { color: var(--text-muted); padding: 0 4px; font-size: 13px; }

.pagination-info {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-muted);
  min-width: 100px;
  text-align: center;
}

/* ── FILTER SIDEBAR ── shared by any list page (games, decks, players)
   that offers a sticky sidebar of filter checkboxes/selects next to its results. ── */
.filter-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }

.filter-panel {
  background: var(--surface-lit);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: sticky;
  top: 80px;
  box-shadow: var(--elev);
}
.filter-group { margin-bottom: 20px; }
.filter-group:last-of-type { margin-bottom: 12px; }
.filter-group-title {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: var(--track-head); margin-bottom: 10px;
}
.filter-option {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text);
  padding: 4px 0; cursor: pointer; user-select: none;
}
.filter-option:hover { color: var(--gold); }
.filter-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 4px;
  border: 2px solid var(--outline);
  background: var(--field);
  cursor: pointer;
  margin: 0;
  transition: background 0.16s, border-color 0.16s;
}
.filter-option input[type="checkbox"]:checked {
  background: var(--gold-fill);
  border-color: var(--gold-edge);
}
.filter-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }

.filter-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.filter-toolbar .form-group { margin-bottom: 0; }
.filter-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-results-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 768px) {
  .filter-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  /* A grid item's default min-width:auto lets its content's intrinsic size (e.g. a
     white-space:nowrap deck/game title) force this 1fr track wider than the viewport
     instead of shrinking and ellipsizing — min-width:0 is the standard grid fix. */
  .filter-layout > main { min-width: 0; }
}

/* ── Filter-panel chip restyle — unconditional (not just ≤768px): the drawer
   reparents this same .filter-panel node into itself on mobile, so its content
   is shared between the desktop sidebar and the mobile drawer (see MOBILE SHELL /
   mountFilterPanel() in layout.html) and must look right at every width. Opt-in
   via .chip-group; single-select "radio chips" drive an existing hidden <select>
   (see wireRadioChips() in layout.html). Same pill styles as .tab-btn. ── */
.chip-group, .radio-chip-group { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-group .filter-option,
.radio-chip {
  position: relative; min-height: 32px; padding: 0 12px; margin: 0; display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-btn); background: transparent; border: 1px solid var(--border);
  color: var(--text-2); font-size: 11px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  font-family: var(--font-ui); cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.chip-group .filter-option:hover, .radio-chip:hover { color: var(--gold); }
.chip-group .filter-option:has(input:checked),
.radio-chip.radio-chip-on { background: var(--gold-glow); border: 1.5px solid var(--gold-edge); color: var(--gold); font-weight: 700; }
.chip-group .filter-option input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Navigating chips (e.g. Leaderboard's filter drawer) are <a>s, not <button>s */
a.radio-chip { text-decoration: none; }
a.radio-chip:hover { text-decoration: none; }
.mana-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mchip { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; display: grid; place-items: center; cursor: pointer; opacity: .4; transition: opacity .16s; }
.mchip svg { width: 32px; height: 32px; display: block; }
.mchip input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mchip:has(input:checked) { opacity: 1; border-color: var(--gold-edge); background: var(--gold-glow); }
.mchip.mchip-colorless span { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-4); border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--text-muted); }

/* ── Chip multi-select autocomplete ── shared "type to search, pick from a dropdown,
   selections become removable chips" widget (Player/Deck pickers on games.html/decks.html
   filter sidebars), driven by layout.html's makeChipAutocomplete() JS helper. ── */
.ac-wrapper { position: relative; }
.ac-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface-lit);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  box-shadow: var(--elev);
  z-index: 200;
}
.ac-dropdown.open { display: block; }
.ac-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  border-bottom: 1px solid var(--border-muted);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active {
  background: var(--gold-glow);
  color: var(--gold);
}
.ac-item-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.filter-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.filter-chip-row:empty { display: none; margin-bottom: 0; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-glow);
  border: 1.5px solid var(--gold-edge);
  border-radius: var(--radius-btn);
  padding: 3px 6px 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  font-family: var(--font-ui);
  max-width: 100%;
}
.filter-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border-muted);
  color: var(--gold);
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: background 0.16s, color 0.16s;
}
.filter-chip-remove:hover { background: var(--gold-fill); color: var(--on-gold); }

/* ── Partner-commander badge + hover/click art overlay ──────────────────
   Dropped into any *already-positioned* commander-art container (.cx-art,
   .v3-art, .gd-winner-art, .bc-art, .deck-art, ...) alongside the primary
   art. Hovering (desktop) or tapping (touch, via the 'cmdr-partner-pinned'
   class toggled in layout.html's delegated click handler) reveals the
   second commander's art on top of the first. See layout.html for the
   shared event-delegation JS. */
.cmdr-partner-badge {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #000; border: 1.5px solid var(--gold-fill);
  color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
  transition: transform .12s ease;
}
.cmdr-partner-badge:hover, .cmdr-partner-badge:focus-visible { transform: scale(1.08); }
.cmdr-partner-overlay {
  position: absolute; inset: 0; z-index: 4;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.cmdr-partner-overlay.revealed { opacity: 1; }

/* ── LIGHT MODE OVERRIDES ───────────────────────────
   What the [data-theme="light"] tokens can't express on their own (mockups 6a–6c, 7b).
   Rule of thumb: bright gold is a fill only; gold text is --gold (#7A5C00 in light). ── */
[data-theme="light"] .pw-namebar,
[data-theme="light"] .v3-foil-header,
[data-theme="light"] .bc-namebar,
[data-theme="light"] .cx-namebar { border-bottom: 1px solid rgba(90,60,0,0.35); }
[data-theme="light"] .pw-typeline,
[data-theme="light"] .cx-typeline { background: #f3efe4; }
[data-theme="light"] .v3-stat-box { background: #f6f3ea; border-color: var(--outline); }
[data-theme="light"] .pw-loyalty-pip { background: #141414; border-color: #141414; box-shadow: 2px 3px 6px rgba(60,40,0,0.25); }
[data-theme="light"] .v3-inactive { background: #fff; }

/* Top-3 rows: stronger medal tints on paper */
[data-theme="light"] .lb-row-gold   { background: rgba(255,215,0,0.16) !important; }
[data-theme="light"] .lb-row-silver { background: rgba(141,147,163,0.10) !important; }
[data-theme="light"] .lb-row-bronze { background: rgba(162,112,60,0.10) !important; }
[data-theme="light"] .rank-tile.r2,
[data-theme="light"] .rank-tile.r3 { color: #1a1a1a; }
[data-theme="light"] .winner-row,
[data-theme="light"] tr.winner-row td { background: rgba(255,215,0,0.18) !important; }

/* Battle card (7b): white shell, no art fade, white text box */
[data-theme="light"] .bc-side-dot { background: var(--gold-edge); }
[data-theme="light"] .bc-flip-icon { background: #fff; border-color: var(--gold-edge); color: var(--gold); box-shadow: 2px 3px 6px rgba(60,40,0,0.25); }
[data-theme="light"] .bc-art-fade { display: none; }
[data-theme="light"] .bc-typeline { border: 1px solid rgba(90,60,0,0.35); border-bottom: none; }
[data-theme="light"] .bc-textbox { background: rgba(255,255,255,0.94); border-color: rgba(160,120,0,0.35); box-shadow: 3px 5px 12px rgba(60,40,0,0.18); }
[data-theme="light"] .bc-seat { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,0.3); }
[data-theme="light"] .bc-player-name { color: var(--text); }
[data-theme="light"] .bc-player-row--winner .bc-player-name { color: var(--gold); }
[data-theme="light"] .bc-player-deck { color: var(--text-muted); }
[data-theme="light"] .bc-win-tag { border: 1px solid var(--gold-edge); }
[data-theme="light"] .bc-defense::before { background: #7a5c00; }
[data-theme="light"] .bc-winner-tr { background: rgba(255,215,0,0.18); }
[data-theme="light"] .bc-back-link { box-shadow: var(--shadow-hard); }

/* Mobile shell on paper: brown-tinted shadows instead of black */
[data-theme="light"] .qa {
  box-shadow: inset 1px 1px 0 #fff, 0 0 0 1px rgba(60,40,0,0.12), 2px 3px 5px rgba(60,40,0,0.18), 6px 10px 24px rgba(60,40,0,0.26);
}
[data-theme="light"] .qab.qab-primary {
  box-shadow: inset 1px 1.5px 0 rgba(255,255,255,0.7), 0 0 0 3px #fff, 0 0 0 4px rgba(160,120,0,0.35), 4px 7px 16px rgba(90,60,0,0.3);
}
[data-theme="light"] .drawer,
[data-theme="light"] .sheet { box-shadow: 8px 0 30px rgba(60,40,0,0.25); }

/* Detail pages */
[data-theme="light"] .gd-winner-art-fade { background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,0.5) 100%); }
[data-theme="light"] .cx-bar { border-color: #fff; }