/* ==========================================================================
   THE VAULT — Marvel Trading Cards Dashboard
   Aesthetic: Luxury collector's archive / comic noir
   ========================================================================== */

/* --- Reset & Root --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Palette */
  --bg-deep:       #06060c;
  --bg-surface:    #0d0d16;
  --bg-card:       #111119;
  --bg-elevated:   #17171f;
  --bg-input:      #0f0f18;

  --border:        #1e1e2a;
  --border-hover:  #2d2d3f;
  --border-active: #3d3d55;

  --text-primary:  #e8e6f0;
  --text-secondary:#7a7890;
  --text-muted:    #4a4860;

  /* Rarity palette */
  --legendary:     #f0c030;
  --legendary-glow:#f0c03040;
  --epic:          #a855f7;
  --epic-glow:     #a855f740;
  --rare:          #3b82f6;
  --rare-glow:     #3b82f640;
  --common:        #6b7280;
  --common-glow:   #6b728040;

  /* Accents */
  --accent:        #c8a44e;
  --accent-dim:    #8a7235;
  --holographic:   linear-gradient(135deg, #ff6b9d, #c084fc, #60a5fa, #34d399, #fbbf24);

  /* Typography */
  --font-display:  'Dela Gothic One', cursive;
  --font-body:     'Instrument Sans', -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}


/* --- Background atmosphere --- */
body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

.bg-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.bg-glow--1 {
  width: 600px; height: 600px;
  top: -200px; right: -100px;
  background: radial-gradient(circle, #a855f710 0%, transparent 70%);
}
.bg-glow--2 {
  width: 500px; height: 500px;
  bottom: -150px; left: -100px;
  background: radial-gradient(circle, #f0c03008 0%, transparent 70%);
}


/* --- Top bar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-md) var(--space-xl);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.topbar__icon {
  font-size: 20px;
  color: var(--accent);
}
.topbar__title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--accent);
}
.topbar__sub {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  border-left: 1px solid var(--border);
  padding-left: var(--space-sm);
  margin-left: var(--space-xs);
}

.topbar__nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  flex: 1;
}

/* --- User area / login --- */
.topbar__user {
  flex-shrink: 0;
  margin-left: auto;
}

.login-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #5865F2;
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.login-btn:hover {
  background: #4752c4;
  transform: translateY(-1px);
}
.login-btn__icon {
  flex-shrink: 0;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 28px;
  cursor: default;
  position: relative;
}
.user-badge__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-surface);
  object-fit: cover;
}
.user-badge__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.user-badge__my-collection {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  margin-left: 4px;
  padding: 2px 8px;
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  transition: all 0.2s;
}
.user-badge__my-collection:hover {
  background: var(--accent-dim);
  color: var(--text-primary);
}
.user-badge__logout {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.2s;
}
.user-badge__logout:hover {
  color: var(--text-secondary);
}


/* --- Tab buttons --- */
.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.tab-btn--active {
  color: var(--accent);
  background: var(--bg-elevated);
  border-color: var(--border-hover);
}
.tab-btn__icon {
  font-size: 11px;
  opacity: 0.7;
}


/* --- Main content --- */
.main {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.panel {
  display: none;
  animation: panelIn 0.3s ease;
}
.panel--active { display: block; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- Panel header --- */
.panel__header {
  margin-bottom: var(--space-xl);
}
.panel__title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 1px;
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--text-primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.panel__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}


/* --- Search box --- */
.search-box {
  position: relative;
  flex: 1;
  max-width: 360px;
}
.search-box__input {
  width: 100%;
  padding: 10px 16px 10px 36px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.search-box__input::placeholder { color: var(--text-muted); }
.search-box__input:focus { border-color: var(--accent-dim); }
.search-box__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 16px;
  pointer-events: none;
}


/* --- Rarity filter buttons --- */
.rarity-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.rarity-btn {
  padding: 6px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rarity-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.rarity-btn--active { border-color: var(--accent-dim); color: var(--accent); background: var(--bg-elevated); }
.rarity-btn--legendary:hover, .rarity-btn--legendary.rarity-btn--active { color: var(--legendary); border-color: var(--legendary-glow); }
.rarity-btn--epic:hover, .rarity-btn--epic.rarity-btn--active { color: var(--epic); border-color: var(--epic-glow); }
.rarity-btn--rare:hover, .rarity-btn--rare.rarity-btn--active { color: var(--rare); border-color: var(--rare-glow); }
.rarity-btn--common:hover, .rarity-btn--common.rarity-btn--active { color: var(--common); border-color: var(--common-glow); }


/* --- Card grid --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.card-tile {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  transform-origin: center bottom;
}
.card-tile:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--border-active);
  box-shadow: 0 12px 40px -10px #00000060;
}

/* Rarity top edge glow */
.card-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
}
.card-tile[data-rarity="legendary"]::before { background: var(--legendary); box-shadow: 0 0 20px var(--legendary-glow); }
.card-tile[data-rarity="epic"]::before { background: var(--epic); box-shadow: 0 0 20px var(--epic-glow); }
.card-tile[data-rarity="rare"]::before { background: var(--rare); box-shadow: 0 0 20px var(--rare-glow); }
.card-tile[data-rarity="common"]::before { background: var(--common); }

.card-tile__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg-surface);
  overflow: hidden;
}
.card-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card-tile:hover .card-tile__img {
  transform: scale(1.06);
}

/* Holographic shimmer on hover */
.card-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.03) 45%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 55%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
  z-index: 1;
}
.card-tile:hover::after {
  transform: translateX(100%);
}

.card-tile__info {
  padding: 10px 12px;
}
.card-tile__name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.card-tile__rarity {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.card-tile__rarity--legendary { color: var(--legendary); }
.card-tile__rarity--epic { color: var(--epic); }
.card-tile__rarity--rare { color: var(--rare); }
.card-tile__rarity--common { color: var(--common); }

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


/* --- Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}
.pagination__btn {
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.pagination__btn:hover { border-color: var(--accent-dim); color: var(--text-primary); }
.pagination__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pagination__info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}


/* --- User select dropdown --- */
.user-select {
  padding: 10px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 220px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%237a7890' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.user-select:focus { border-color: var(--accent-dim); }
.user-select option { background: var(--bg-surface); color: var(--text-primary); }


/* --- Leaderboard nav & layout --- */
.lb-nav {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.lb-nav__btn {
  padding: 8px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lb-nav__btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.lb-nav__btn--active {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--bg-elevated);
}
.lb-nav__icon { font-size: 15px; }

.lb-section { display: none; }
.lb-section--active { display: block; }

.lb-boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
}

/* Individual board */
.lb-board {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}
.lb-board::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--holographic);
  opacity: 0.3;
}
.lb-board--special {
  grid-column: 1 / -1;
  margin-top: var(--space-md);
}
.lb-board__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.lb-board__icon { font-size: 18px; }
.lb-board__title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-primary);
}
.lb-board__count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.lb-board__empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Podium (top 3) */
.lb-podium {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.lb-podium__entry {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.lb-podium__entry:hover { background: var(--bg-elevated); }
.lb-podium__entry--1 {
  background: rgba(240, 192, 48, 0.06);
  border: 1px solid rgba(240, 192, 48, 0.15);
}
.lb-podium__entry--2 {
  background: rgba(192, 192, 192, 0.04);
  border: 1px solid rgba(192, 192, 192, 0.1);
}
.lb-podium__entry--3 {
  background: rgba(205, 127, 50, 0.04);
  border: 1px solid rgba(205, 127, 50, 0.1);
}
.lb-podium__medal { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.lb-podium__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-podium__value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}
.lb-podium__sub {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Remaining rows */
.lb-table-wrap {
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}
.lb-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.lb-row:hover { background: var(--bg-elevated); }
.lb-row__rank {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.lb-row__name {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-row__value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  flex-shrink: 0;
}
.lb-row__sub {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Nemesis pairs */
.lb-pairs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.lb-pair {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 10px 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
}
.lb-board__sub-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.lb-pair__rank {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  width: 20px;
  flex-shrink: 0;
}
.lb-pair__names {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.lb-pair__stat {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--epic);
  flex-shrink: 0;
}
.lb-pair__detail {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Trivia card stats rows */
.lb-card-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lb-card-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 10px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.lb-card-row:hover { background: var(--bg-elevated); }
.lb-card-row__rank {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}
.lb-card-row__img {
  width: 32px;
  height: 43px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.lb-card-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lb-card-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-card-row__meta {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lb-card-row__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.lb-card-row__rate {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.lb-card-row__detail {
  font-size: 10px;
  color: var(--text-muted);
}
.lb-card-row__cat {
  font-size: 9px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .lb-boards { grid-template-columns: 1fr; }
  .lb-pair { flex-wrap: wrap; gap: var(--space-sm); }
  .lb-card-row__cat { display: none; }
}

/* Leaderboard user detail modal */
.detail-view-collection {
  display: inline-block;
  font-size: 12px;
  color: var(--accent-dim);
  cursor: pointer;
  margin-bottom: var(--space-lg);
  transition: color 0.15s;
}
.detail-view-collection:hover { color: var(--accent); }

.detail-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.detail-section:last-child { border-bottom: none; margin-bottom: 0; }
.detail-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.detail-section__icon { font-size: 18px; }
.detail-section__title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-primary);
}

.detail-stats-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.detail-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.detail-stat__value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.detail-stat__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-top: 2px;
}

.detail-sub-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

/* Rarity breakdown bars */
.detail-rarity-breakdown { margin-top: var(--space-sm); }
.detail-rarity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 6px;
}
.detail-rarity__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 80px;
  flex-shrink: 0;
}
.detail-rarity__bar {
  flex: 1;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: hidden;
}
.detail-rarity__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.detail-rarity__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 90px;
  text-align: right;
  flex-shrink: 0;
}
.detail-rarity__pct {
  color: var(--text-muted);
}

/* Wheel segment breakdown */
.detail-segments { margin-top: var(--space-sm); }
.detail-segments__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.detail-segment {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}
.detail-segment strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* Trivia callout cards */
.detail-callouts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.detail-callout {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.detail-callout__icon { font-size: 20px; flex-shrink: 0; }
.detail-callout__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.detail-callout__sub {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}


/* ==========================================================================
   Collection view
   ========================================================================== */

.collection-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--holographic);
  opacity: 0.4;
}
.stat-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
.stat-card__value {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--text-primary);
  line-height: 1;
}
.stat-card__sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* Completion ring */
.completion-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.completion-ring__circle {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.completion-ring__circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.completion-ring__bg { stroke: var(--border); }
.completion-ring__fill {
  stroke: var(--accent);
  transition: stroke-dashoffset 1s ease;
}
.completion-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.completion-ring__pct {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--text-primary);
}
.completion-ring__text {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.completion-ring__breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Rarity progress row */
.rarity-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 260px;
}
.rarity-row__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 90px;
  flex-shrink: 0;
}
.rarity-row__label--legendary { color: var(--legendary); }
.rarity-row__label--epic { color: var(--epic); }
.rarity-row__label--rare { color: var(--rare); }
.rarity-row__label--common { color: var(--common); }

.rarity-row__bar {
  flex: 1;
  height: 8px;
  background: var(--bg-surface);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.rarity-row__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
}
.rarity-row__fill--legendary { background: var(--legendary); }
.rarity-row__fill--epic { background: var(--epic); }
.rarity-row__fill--rare { background: var(--rare); }
.rarity-row__fill--common { background: var(--common); }

.rarity-row__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  width: 70px;
  text-align: right;
  flex-shrink: 0;
}


/* Collection profile header */
.collection-profile {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}
.collection-profile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--holographic);
  opacity: 0.6;
  z-index: 3;
}

/* Hero background image */
.collection-profile__hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.collection-profile__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: blur(2px) brightness(0.3) saturate(0.7);
  transform: scale(1.05);
}
/* Gradient overlay for readability */
.collection-profile__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(6, 6, 12, 0.85) 0%,
    rgba(6, 6, 12, 0.6) 50%,
    rgba(6, 6, 12, 0.75) 100%
  );
}

.collection-profile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
}

/* When no hero, body still needs padding */
.collection-profile:not(.collection-profile--has-hero) {
  padding: var(--space-xl);
}
.collection-profile:not(.collection-profile--has-hero) .collection-profile__body {
  display: contents;
}

/* Bump text contrast when hero is present */
.collection-profile--has-hero .collection-profile__body {
  padding: var(--space-2xl) var(--space-xl);
}
.collection-profile--has-hero .collection-profile__bio {
  color: var(--text-primary);
  opacity: 0.85;
}
.collection-profile--has-hero .collection-profile__join {
  color: var(--text-secondary);
}

.collection-profile__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
}
.collection-profile__info {
  flex: 1;
  min-width: 0;
}
.collection-profile__name {
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--text-primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.collection-profile__bio {
  font-size: 18px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: var(--space-md);
  max-width: 500px;
}
.collection-profile__join {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* Favorites showcase */
.collection-profile__favs-section {
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.collection-profile__favs-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.collection-profile__favs {
  display: flex;
  gap: var(--space-md);
}
.collection-profile__fav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
}
.collection-profile__fav:hover {
  transform: translateY(-3px);
}
.collection-profile__fav-img {
  width: 80px;
  height: 106px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  transition: all 0.2s;
  box-shadow: 0 4px 12px #00000030;
}
.collection-profile__fav:hover .collection-profile__fav-img {
  border-color: var(--accent-dim);
  box-shadow: 0 8px 24px #00000050;
}
.collection-profile__fav-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  text-align: center;
}

@media (max-width: 600px) {
  .collection-profile__top { flex-direction: column; }
  .collection-profile__name { font-size: 22px; }
  .collection-profile__bio { font-size: 16px; }
  .collection-profile__favs { flex-wrap: wrap; }
}

/* --- Collector grid (user picker) --- */
.collector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.collector-tile {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.collector-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--holographic);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.collector-tile:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.collector-tile:hover::before {
  opacity: 0.5;
}
.collector-tile__ring {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.collector-tile__ring svg {
  width: 100%;
  height: 100%;
}
.collector-tile__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.collector-tile__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.collector-tile__name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collector-tile__meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* Trade button on collector tiles */
.collector-tile__trade {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
}
.collector-tile__trade:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: transparent;
}

/* Trade button on collection header */
.collection-trade-btn {
  margin-left: auto;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.collection-trade-btn:hover {
  background: var(--accent-dim);
  color: var(--bg-deep);
}

/* Back button */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: var(--space-md);
}
.back-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.back-btn__arrow {
  font-size: 16px;
  line-height: 1;
}

/* --- Collection sections (rarest cards, variant progress) --- */
.collection-section {
  margin-bottom: var(--space-xl);
}
.collection-section__title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.collection-section__title--grid {
  font-size: 18px;
}
.collection-section__icon {
  font-size: 18px;
}
.collection-section__count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: var(--space-xs);
}

/* Timeline */
.timeline-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 12px var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.timeline-toggle:hover { border-color: var(--border-hover); color: var(--text-primary); }
.timeline-toggle__arrow { margin-left: auto; font-size: 10px; }

.timeline {
  margin-top: var(--space-md);
  padding-left: var(--space-lg);
  border-left: 2px solid var(--border);
}
.timeline__collapse {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: var(--space-md);
}
.timeline__collapse:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.timeline__empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-lg);
}
.timeline__date {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin: var(--space-lg) 0 var(--space-sm) -24px;
  padding-left: 24px;
  position: relative;
}
.timeline__date::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--accent-dim);
}
.timeline__event {
  display: flex;
  gap: var(--space-sm);
  padding: 8px 0;
  position: relative;
}
.timeline__event::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
}
.timeline__event--notable::before {
  background: var(--legendary);
  box-shadow: 0 0 6px var(--legendary-glow);
}
.timeline__icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.timeline__body {
  flex: 1;
  min-width: 0;
}
.timeline__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}
.timeline__text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.timeline__text strong { color: var(--text-primary); }

/* Session blocks (multi-type batched events) */
.timeline__event--session {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
}
.session__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.session__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
.session__count {
  font-size: 11px;
  color: var(--text-muted);
}
.session__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.session__line {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.session__line strong { color: var(--text-primary); }
.timeline__win { color: #4ade80; font-weight: 600; }
.timeline__loss { color: #f87171; font-weight: 600; }

.timeline__cards {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.timeline__card {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px 2px 2px;
}
.timeline__card--legendary { border-color: var(--legendary-glow); color: var(--legendary); }
.timeline__card--epic { border-color: var(--epic-glow); color: var(--epic); }
.timeline__card img {
  width: 20px;
  height: 27px;
  object-fit: cover;
  border-radius: 2px;
}
.timeline__expand {
  display: block;
  margin-top: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.timeline__expand:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
}
.timeline__cards-hidden {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.timeline__trade {
  display: flex;
  gap: var(--space-md);
  margin-top: 4px;
}
.timeline__trade-side {
  font-size: 12px;
  color: var(--text-muted);
}

/* Collection filters */
.collection-filters {
  margin-bottom: var(--space-lg);
}
.collection-filters__controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.collection-filters__search {
  flex: 1;
  min-width: 180px;
  padding: 7px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.collection-filters__search:focus {
  outline: none;
  border-color: var(--accent-dim);
}
.collection-filters__rarity,
.collection-filters__type {
  display: flex;
  gap: 3px;
}
.collection-filters__btn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.collection-filters__btn:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
}
.collection-filters__btn--active {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--bg-elevated);
}
.collection-filters__sort {
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.collection-filters__sort:focus {
  outline: none;
  border-color: var(--accent-dim);
}
.collection-filters__btn--missing.collection-filters__btn--active { color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
.collection-filters__btn--legendary.collection-filters__btn--active { color: var(--legendary); border-color: var(--legendary-glow); }
.collection-filters__btn--epic.collection-filters__btn--active { color: var(--epic); border-color: var(--epic-glow); }
.collection-filters__btn--rare.collection-filters__btn--active { color: var(--rare); border-color: var(--rare-glow); }
.collection-filters__btn--common.collection-filters__btn--active { color: var(--common); border-color: var(--common-glow); }

@media (max-width: 600px) {
  .collection-filters__controls { flex-direction: column; align-items: stretch; }
  .collection-filters__search { min-width: auto; }
}

/* Luck meters */
.luck-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}
.luck-meter {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.luck-meter__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.luck-meter__icon { font-size: 16px; }
.luck-meter__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.luck-meter__rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.luck-meter__bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 4px;
}
.luck-meter__bar {
  flex: 1;
  height: 8px;
  background: var(--bg-surface);
  border-radius: 4px;
  overflow: hidden;
}
.luck-meter__fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--rare), var(--accent), var(--legendary));
  transition: width 0.8s ease;
}
.luck-meter__value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
}
.luck-meter__percentile {
  font-size: 11px;
  color: var(--text-muted);
}

/* Rarest cards — horizontal scroll strip */
.rarest-cards {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.rarest-card {
  flex: 0 0 140px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}
.rarest-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.rarest-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-surface);
}
.rarest-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.rarest-card:hover .rarest-card__img {
  transform: scale(1.06);
}
.rarest-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.rarest-card__badge--legendary { color: var(--legendary); border: 1px solid var(--legendary-glow); }
.rarest-card__badge--epic { color: var(--epic); border: 1px solid var(--epic-glow); }
.rarest-card__badge--rare { color: var(--rare); border: 1px solid var(--rare-glow); }
.rarest-card__badge--common { color: var(--common); border: 1px solid var(--common-glow); }
.rarest-card__info {
  padding: var(--space-sm) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rarest-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rarest-card__owners {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* Variant progress list */
.variant-progress-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.variant-progress-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.variant-progress-item:hover {
  border-color: var(--border-hover);
}
.variant-progress-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.variant-progress-item__img {
  width: 36px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-surface);
}
.variant-progress-item__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.variant-progress-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.variant-progress-item__rarity {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.variant-progress-item__rarity--legendary { color: var(--legendary); }
.variant-progress-item__rarity--epic { color: var(--epic); }
.variant-progress-item__rarity--rare { color: var(--rare); }
.variant-progress-item__rarity--common { color: var(--common); }
.variant-progress-item__count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.variant-progress-item__bar {
  height: 6px;
  background: var(--bg-surface);
  border-radius: 3px;
  overflow: hidden;
}
.variant-progress-item__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s ease;
}
.variant-progress-item__fill--legendary { background: var(--legendary); }
.variant-progress-item__fill--epic { background: var(--epic); }
.variant-progress-item__fill--rare { background: var(--rare); }
.variant-progress-item__fill--common { background: var(--common); }

.variant-progress-item__traders {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}
.variant-progress-item__traders-label {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.variant-progress-item__trader {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.variant-progress-item__trader:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.variant-progress-item__trader-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-surface);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Card count badge */
.card-tile__count {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Card trade/want list buttons */
.card-tile__list-btns {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}
.card-tile__list-btn {
  flex: 1;
  padding: 2px 0;
  font-size: 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.card-tile__list-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
}
.card-tile__list-btn--active {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(200, 164, 78, 0.1);
}

/* Card acquisition date */
.card-tile__date {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Holo badge */
.card-tile__holo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1;
}

/* Variant badge */
.card-tile__variant-badge {
  position: absolute;
  top: 32px;
  left: 8px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--legendary);
  line-height: 1.3;
}
/* If no holo badge, move variant badge to top */
.card-tile--variant:not(.card-tile--holo) .card-tile__variant-badge {
  top: 8px;
}

/* Lazy image placeholder */
.card-tile__img:not([src]) {
  background: var(--bg-surface);
}

/* Holo hover reveal on card tiles */
.card-tile__img--base,
.card-tile__img--holo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.card-tile__img--holo {
  opacity: 0;
}
.card-tile:hover .card-tile__img--holo {
  opacity: 1;
}
.card-tile:hover .card-tile__img--base {
  opacity: 0;
}
/* Holo hover reveal on favorites */
.collection-profile__fav--holo .collection-profile__fav-img--base,
.collection-profile__fav--holo .collection-profile__fav-img--holo {
  transition: opacity 0.3s ease;
}
.collection-profile__fav--holo .collection-profile__fav-img--holo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.collection-profile__fav--holo:hover .collection-profile__fav-img--holo {
  opacity: 1;
}
.collection-profile__fav--holo:hover .collection-profile__fav-img--base {
  opacity: 0;
}
.collection-profile__fav--holo .collection-profile__fav-img + .collection-profile__fav-img {
  border: none;
}

/* Holo tile treatment */
.card-tile--holo {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #ff6b9d, #c084fc, #60a5fa, #34d399, #fbbf24) border-box;
  border: 1px solid transparent;
}
.card-tile--holo:hover {
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.2);
}

/* Variant tile treatment */
.card-tile--variant:not(.card-tile--holo) {
  border-color: var(--legendary-glow);
}
.card-tile--variant:not(.card-tile--holo):hover {
  border-color: var(--legendary);
}



/* ==========================================================================
   Trade Board
   ========================================================================== */

.trade-listing {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  position: relative;
  overflow: hidden;
}
.trade-listing::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--holographic);
  opacity: 0.3;
}
.trade-listing__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.trade-listing__name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.2s;
}
.trade-listing__name:hover {
  color: var(--accent);
}
.trade-listing__count {
  font-size: 12px;
  color: var(--text-muted);
}
.trade-listing__offer-btn {
  margin-left: auto;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.trade-listing__offer-btn:hover {
  background: var(--accent-dim);
  color: var(--bg-deep);
}
.trade-listing__section {
  margin-bottom: var(--space-lg);
}
.trade-listing__section:last-child {
  margin-bottom: 0;
}
.trade-listing__label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

/* For Trade card grid */
.trade-listing__cards {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.trade-card {
  flex: 0 0 110px;
  cursor: pointer;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.2s ease;
  background: var(--bg-surface);
}
.trade-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.trade-card--unavailable {
  opacity: 0.4;
  pointer-events: none;
}
.trade-card--unavailable .trade-card__img {
  filter: grayscale(1);
}
.trade-card__unavail-tag {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 0;
  border-radius: 3px;
}
.trade-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.trade-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.trade-card:hover .trade-card__img {
  transform: scale(1.05);
}
.trade-card__rarity {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.trade-card__rarity--legendary { color: var(--legendary); }
.trade-card__rarity--epic { color: var(--epic); }
.trade-card__rarity--rare { color: var(--rare); }
.trade-card__rarity--common { color: var(--common); }
.trade-card__info {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.trade-card__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-card__pref {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: var(--bg-elevated);
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
}

/* Looking For — compact tag list */
.trade-listing__wants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.trade-want {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.trade-want:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.trade-want__img {
  width: 24px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
}


/* Other collectors (no active trades) */
.trade-other-collectors {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trade-compact {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.trade-compact__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.15s;
}
.trade-compact__name:hover { color: var(--accent); }
.trade-compact__meta {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}
.trade-compact__btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.trade-compact__btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* Trade offer button on cards */
.trade-card__offer-btn {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 3px 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: var(--bg-elevated);
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.trade-card__offer-btn:hover {
  background: var(--accent-dim);
  color: var(--bg-deep);
}

/* Trade offers section */
.trade-offers-section {
  margin-bottom: var(--space-xl);
}
.trade-offer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.trade-offer__cards {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.trade-offer__card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.trade-offer__card img {
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.trade-offer__card-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.trade-offer__card-rarity {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.trade-offer__card-rarity--legendary { color: var(--legendary); }
.trade-offer__card-rarity--epic { color: var(--epic); }
.trade-offer__card-rarity--rare { color: var(--rare); }
.trade-offer__card-rarity--common { color: var(--common); }
.trade-offer__badges {
  font-size: 11px;
}
.trade-offer__card-from {
  font-size: 11px;
  color: var(--text-muted);
}
.trade-offer__arrow {
  font-size: 20px;
  color: var(--accent);
}
.trade-offer__message {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-sm);
}
.trade-offer__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.trade-offer__btn {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-body);
}
.trade-offer__btn--accept {
  background: var(--accent-dim);
  color: var(--bg-deep);
  border-color: var(--accent);
}
.trade-offer__btn--accept:hover {
  background: var(--accent);
}
.trade-offer__btn--decline {
  background: none;
  color: var(--text-secondary);
}
.trade-offer__btn--decline:hover {
  border-color: #dc3c3c;
  color: #dc3c3c;
}

/* Trade offer modal */
.trade-modal__sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.trade-modal__sub strong {
  color: var(--text-primary);
}
.trade-modal__search {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}
.trade-modal__search:focus {
  outline: none;
  border-color: var(--accent-dim);
}
/* Grouped card grid in offer modal */
.trade-modal__grouped-grid {
  max-height: 350px;
  overflow-y: auto;
  margin-bottom: var(--space-md);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.trade-modal__rarity-group {
  margin-bottom: var(--space-md);
}
.trade-modal__rarity-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 0;
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.trade-modal__rarity-label--legendary { color: var(--legendary); }
.trade-modal__rarity-label--epic { color: var(--epic); }
.trade-modal__rarity-label--rare { color: var(--rare); }
.trade-modal__rarity-label--common { color: var(--common); }
.trade-modal__rarity-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: var(--space-xs);
}
.trade-modal__rarity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-sm);
}
.trade-modal__rarity-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  vertical-align: middle;
}
.trade-modal__rarity-tag--legendary { color: var(--legendary); }
.trade-modal__rarity-tag--epic { color: var(--epic); }
.trade-modal__rarity-tag--rare { color: var(--rare); }
.trade-modal__rarity-tag--common { color: var(--common); }

.trade-modal__card {
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.15s ease;
  text-align: center;
  position: relative;
}
.trade-modal__card:hover {
  border-color: var(--border-hover);
}
.trade-modal__card--selected {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-dim);
}
.trade-modal__card-border {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1;
}
.trade-modal__card-border--legendary { background: var(--legendary); }
.trade-modal__card-border--epic { background: var(--epic); }
.trade-modal__card-border--rare { background: var(--rare); }
.trade-modal__card-border--common { background: var(--common); }
.trade-modal__card-holo-indicator {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--holographic);
  z-index: 2;
}
.trade-modal__card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--bg-surface);
}
.trade-modal__card span {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 3px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Instance picker (after selecting a unique card) */
.trade-instance-picker {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}
.trade-instance {
  width: 110px;
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.2s ease;
  text-align: center;
}
.trade-instance:hover {
  border-color: var(--accent-dim);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.trade-instance img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.trade-instance__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 4px;
  background: var(--bg-elevated);
}

.trade-modal__search-hint {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--space-lg);
}
.trade-modal__message {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  resize: vertical;
  min-height: 40px;
  max-height: 100px;
  margin-bottom: var(--space-md);
}
.trade-modal__message:focus {
  outline: none;
  border-color: var(--accent-dim);
}
.trade-modal__submit {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  background: var(--accent-dim);
  color: var(--bg-deep);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.trade-modal__submit:hover:not(:disabled) {
  background: var(--accent);
}
.trade-modal__submit:disabled {
  opacity: 0.5;
  cursor: default;
}


/* ==========================================================================
   Profile Editor
   ========================================================================== */

.pe {
  max-width: 680px;
}

/* Live preview banner */
.pe-preview {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-xl);
  min-height: 120px;
}
.pe-preview::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--holographic);
  opacity: 0.6;
  z-index: 3;
}
.pe-preview__hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.pe-preview__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: blur(2px) brightness(0.25) saturate(0.6);
  transform: scale(1.05);
}
.pe-preview__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
}
.pe-preview__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent-dim);
  flex-shrink: 0;
  background: var(--bg-surface);
}
.pe-preview__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pe-preview__name {
  font-family: var(--font-display);
  font-size: 22px;
  background: linear-gradient(135deg, var(--text-primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}
.pe-preview__bio {
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
  transition: color 0.2s;
}
.pe-preview__bio-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* Sections */
.pe-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.pe-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.pe-section__title {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-primary);
}
.pe-section__limit {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.pe-section__hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

/* Bio field */
.pe-bio-field {
  display: flex;
  gap: var(--space-sm);
}
.pe-bio-input {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  resize: none;
  min-height: 44px;
  max-height: 80px;
  transition: border-color 0.2s;
}
.pe-bio-input:focus {
  outline: none;
  border-color: var(--accent-dim);
}
.pe-bio-save {
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.pe-bio-save--dirty {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: transparent;
}
.pe-bio-save:hover:not(:disabled) {
  background: var(--accent-dim);
  color: var(--bg-deep);
  border-color: var(--accent);
}

/* Favorites grid */
.pe-favs {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.pe-fav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  position: relative;
}
.pe-fav__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  margin-bottom: 6px;
}
.pe-fav__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pe-fav__display-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 14px;
  color: var(--accent);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.pe-fav__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: 4px;
}
.pe-fav__actions {
  display: flex;
  gap: 4px;
}
.pe-fav__btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.pe-fav__btn--display:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}
.pe-fav__btn--remove:hover {
  border-color: #dc3c3c;
  color: #dc3c3c;
  background: transparent;
}
.pe-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Add favorite button */
.pe-add-fav {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--text-secondary);
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.pe-add-fav:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  border-style: solid;
}

/* Edit Profile link in user badge */
/* Tab notification badge */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #dc3c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0 5px;
  margin-left: 4px;
}

/* Pending trades indicator in user badge */
.user-badge__pending-trades {
  font-size: 11px;
  color: #dc3c3c;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.user-badge__pending-trades:hover {
  opacity: 0.8;
}

.user-badge__edit-profile {
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.user-badge__edit-profile:hover {
  color: var(--accent);
}


/* ==========================================================================
   Pack Opening
   ========================================================================== */

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.pack-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}
.pack-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--pack-color);
  opacity: 0.6;
}
.pack-card--empty { opacity: 0.4; }
.pack-card__icon { font-size: 32px; flex-shrink: 0; }
.pack-card__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pack-card__name { font-family: var(--font-display); font-size: 15px; color: var(--text-primary); }
.pack-card__desc { font-size: 11px; color: var(--text-muted); }
.pack-card__count { font-family: var(--font-mono); font-size: 13px; color: var(--pack-color); }
.pack-card__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.pack-card__open {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  background: var(--pack-color);
  color: var(--bg-deep);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.pack-card__open:hover:not(:disabled) { filter: brightness(1.15); transform: scale(1.05); }
.pack-card__open:disabled { opacity: 0.5; cursor: default; }
.pack-card__open--secondary {
  background: none;
  border: 1px solid var(--pack-color);
  color: var(--pack-color);
  font-size: 11px;
  padding: 4px 14px;
}
.pack-card__open--secondary:hover:not(:disabled) { background: var(--pack-color); color: var(--bg-deep); filter: none; }

/* Pack reveal area */
.pack-reveal { margin-top: var(--space-xl); }
.pack-reveal__opening {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-2xl);
  color: var(--text-muted);
  font-size: 14px;
}
.pack-reveal__pack-anim {
  width: 60px;
  height: 80px;
  background: var(--bg-elevated);
  border: 2px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  animation: packPulse 0.8s ease infinite alternate;
}
@keyframes packPulse {
  from { transform: scale(1) rotate(-2deg); box-shadow: 0 4px 20px rgba(200,164,78,0.1); }
  to { transform: scale(1.08) rotate(2deg); box-shadow: 0 8px 30px rgba(200,164,78,0.3); }
}
.pack-reveal__error { color: #f87171; text-align: center; padding: var(--space-lg); }
.pack-reveal__label {
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.pack-reveal__show-all {
  display: block;
  margin: var(--space-lg) auto;
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.pack-reveal__show-all:hover { border-color: var(--accent-dim); color: var(--accent); }
.pack-reveal__cards--all { margin-top: var(--space-md); }
.reveal-card--small {
  width: 100px;
  height: 150px;
}

/* Card flip reveal */
.pack-reveal__cards {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  perspective: 1000px;
}
.reveal-card {
  width: 140px;
  height: 210px;
  cursor: pointer;
  animation: cardDeal 0.4s ease backwards;
  perspective: 1000px;
}
@keyframes cardDeal {
  from { opacity: 0; transform: translateY(40px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.reveal-card__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.reveal-card--flipped .reveal-card__inner {
  transform: rotateY(180deg);
}
.reveal-card__back,
.reveal-card__front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.reveal-card__back {
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reveal-card__back-design {
  width: 80%;
  height: 80%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--bg-surface) 8px, var(--bg-surface) 16px);
}
.reveal-card__back-icon { font-size: 28px; color: var(--accent-dim); }
.reveal-card__front {
  transform: rotateY(180deg);
  border: 2px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}
.reveal-card--legendary .reveal-card__front { border-color: var(--legendary); box-shadow: 0 0 20px var(--legendary-glow); }
.reveal-card--epic .reveal-card__front { border-color: var(--epic); box-shadow: 0 0 15px var(--epic-glow); }
.reveal-card--rare .reveal-card__front { border-color: var(--rare); }
.reveal-card--secret .reveal-card__front { border-color: #ff0000; box-shadow: 0 0 25px rgba(255, 0, 0, 0.4); }

.reveal-card__img {
  flex: 1;
  width: 100%;
  object-fit: cover;
  min-height: 0;
}
.reveal-card__info {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
}
.reveal-card__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reveal-card__rarity {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.reveal-card__rarity--legendary { color: var(--legendary); }
.reveal-card__rarity--epic { color: var(--epic); }
.reveal-card__rarity--rare { color: var(--rare); }
.reveal-card__rarity--common { color: var(--common); }

/* Badges on revealed cards */
.reveal-card__badge {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.reveal-card__badge--new {
  top: 6px; right: 6px;
  background: rgba(74, 222, 128, 0.85);
  color: #000;
}
.reveal-card__badge--holo {
  top: 6px; left: 6px;
  background: rgba(0, 0, 0, 0.7);
}
.reveal-card__badge--variant {
  top: 26px; left: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--legendary);
}
.reveal-card__badge--first {
  top: 6px; left: 6px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #000;
  font-weight: 800;
  animation: firstPulse 1s ease infinite alternate;
}
@keyframes firstPulse {
  from { box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); }
  to { box-shadow: 0 0 16px rgba(255, 215, 0, 0.9); }
}
.reveal-card__badge--first ~ .reveal-card__badge--new { top: 26px; }
.reveal-card__badge--first ~ .reveal-card__badge--holo { top: 26px; }
.reveal-card__badge--secret {
  top: 6px; left: 6px;
  background: rgba(255, 0, 0, 0.85);
  color: #fff;
}
.reveal-card__badge--secret ~ .reveal-card__badge--new { top: 26px; }
.reveal-card__badge--secret ~ .reveal-card__badge--holo { top: 26px; left: auto; right: 6px; }

/* Share button on revealed cards */
.reveal-card__share {
  position: absolute;
  bottom: 40px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.reveal-card--flipped:hover .reveal-card__share { opacity: 1; }
.reveal-card__share:hover { background: rgba(200, 164, 78, 0.8); color: #fff; }

/* Reveal actions */
.pack-reveal__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}
.pack-reveal__flip-all,
.pack-reveal__share,
.pack-reveal__open-more,
.pack-reveal__again {
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.pack-reveal__flip-all {
  background: var(--accent-dim);
  color: var(--bg-deep);
  border: none;
}
.pack-reveal__flip-all:hover { background: var(--accent); }
.pack-reveal__share {
  background: none;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
}
.pack-reveal__share:hover:not(:disabled) { background: var(--accent-dim); color: var(--bg-deep); }
.pack-reveal__open-more {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
}
.pack-reveal__open-more:hover { background: var(--accent-dim); color: var(--bg-deep); border-color: var(--accent); }
.pack-reveal__again {
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 12px;
}
.pack-reveal__again:hover { border-color: var(--border-hover); color: var(--text-secondary); }
@media (max-width: 480px) {
  .pack-reveal__actions { flex-direction: column; align-items: stretch; }
  .pack-reveal__flip-all,
  .pack-reveal__share,
  .pack-reveal__open-more,
  .pack-reveal__again { text-align: center; }
}

.pack-reveal__upgrade {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: 14px;
  color: var(--legendary);
  font-weight: 600;
}
.pack-reveal__upgrade--secret {
  color: #ff4444;
  font-size: 16px;
}
.pack-reveal__promotion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.pack-reveal__promotion-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 140, 0, 0.04));
  border: 1px solid var(--legendary-glow);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  animation: promoGlow 2s ease infinite alternate;
}
@keyframes promoGlow {
  from { box-shadow: 0 0 10px rgba(255, 215, 0, 0.1); }
  to { box-shadow: 0 0 25px rgba(255, 215, 0, 0.25); }
}
.pack-reveal__promotion-img {
  width: 80px;
  height: 107px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--legendary);
  flex-shrink: 0;
}
.pack-reveal__promotion-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pack-reveal__promotion-label {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--legendary);
}
.pack-reveal__promotion-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.pack-reveal__promotion-detail {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

/* Pack opening stats summary */
.pack-stats {
  margin-top: var(--space-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
}
.pack-stats::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--holographic);
  opacity: 0.4;
}
.pack-stats__header {
  margin-bottom: var(--space-md);
}
.pack-stats__title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
}
.pack-stats__grid {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.pack-stats__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.pack-stats__stat-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.pack-stats__stat-value--new { color: #4ade80; }
.pack-stats__stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Rarity breakdown bar */
.pack-stats__breakdown {
  margin-bottom: var(--space-lg);
}
.pack-stats__bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-surface);
  margin-bottom: 6px;
}
.pack-stats__bar-seg {
  transition: width 0.6s ease;
}
.pack-stats__bar-labels {
  font-size: 12px;
  color: var(--text-secondary);
}
.pack-stats__luck-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Highlights reel */
.pack-stats__highlights {
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
}
.pack-stats__sub-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.pack-stats__highlight-cards {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.pack-stats__highlight-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
}
.pack-stats__highlight-card--legendary { border-color: var(--legendary-glow); color: var(--legendary); }
.pack-stats__highlight-card--epic { border-color: var(--epic-glow); color: var(--epic); }
.pack-stats__highlight-card img {
  width: 24px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
}
.pack-stats__highlight-badges {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 600px) {
  .reveal-card { width: 110px; height: 165px; }
  .pack-reveal__cards { gap: var(--space-sm); }
  .pack-stats__grid { gap: var(--space-sm); }
}


/* ==========================================================================
   Holo Wheel
   ========================================================================== */

.wheel-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.wheel-info {
  margin-bottom: var(--space-xl);
}
.wheel-info__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}
.wheel-info__desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* Wheel stage */
.wheel-stage {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 0 auto var(--space-xl);
}
.wheel-pointer {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 30px;
  color: var(--accent);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  line-height: 1;
}
.wheel-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  border: 4px solid var(--border);
  box-shadow: 0 0 30px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.2);
  will-change: transform;
}
.wheel-labels {
  position: absolute;
  inset: 0;
}
.wheel-label {
  position: absolute;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}
.wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 3px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Spin button */
.wheel-actions {
  margin-bottom: var(--space-xl);
}
.wheel-spin-btn {
  padding: 14px 40px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-body);
  background: linear-gradient(135deg, #60a5fa, #c084fc, #34d399);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(96, 165, 250, 0.3);
}
.wheel-spin-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 6px 30px rgba(96, 165, 250, 0.5);
}
.wheel-spin-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.wheel-spin-btn--demo {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow: none;
}
.wheel-spin-btn--demo:hover:not(:disabled) {
  background: var(--bg-card);
  transform: scale(1.03);
  box-shadow: none;
}
.wheel-used {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}

/* Result */
.wheel-result {
  animation: fadeSlideUp 0.5s ease;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.wheel-result__inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
}
.wheel-result__inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--holographic);
}
.wheel-result__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
.wheel-result__prize {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--accent);
  margin-bottom: var(--space-lg);
}
.wheel-result__error {
  color: #f87171;
  padding: var(--space-lg);
}
.wheel-result__card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  justify-content: center;
}
.wheel-result__card img {
  width: 100px;
  height: 133px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent-dim);
}
.wheel-result__card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.wheel-result__card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.wheel-result__card-rarity {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wheel-result__card-rarity--legendary { color: var(--legendary); }
.wheel-result__card-rarity--epic { color: var(--epic); }
.wheel-result__card-rarity--rare { color: var(--rare); }
.wheel-result__card-rarity--common { color: var(--common); }
.wheel-result__card-badge {
  font-size: 12px;
  color: var(--text-secondary);
}
.wheel-result__inner--demo {
  opacity: 0.7;
}
.wheel-result__demo-note {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--space-sm);
}

/* Prize list */
.wheel-prizes {
  margin-top: var(--space-lg);
}
.wheel-prizes__summary {
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
}
.wheel-prizes__summary:hover { color: var(--text-secondary); }
.wheel-prizes__list {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wheel-prize-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px 8px;
  font-size: 12px;
}
.wheel-prize-row__color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.wheel-prize-row__name {
  flex: 1;
  color: var(--text-secondary);
}
.wheel-prize-row__pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .wheel-stage { width: 280px; height: 280px; }
  .wheel-result__card { flex-direction: column; }
}


/* ==========================================================================
   Flagged Images Review
   ========================================================================== */

.flagged-summary {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}
.flagged-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.flagged-item {
  display: flex;
  gap: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  align-items: center;
}
.flagged-item__images {
  display: flex;
  gap: var(--space-md);
  flex-shrink: 0;
}
.flagged-item__img-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.flagged-item__img-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.flagged-item__img {
  width: 80px;
  height: 107px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.flagged-item__img--flagged {
  border-color: #dc3c3c40;
}
.flagged-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flagged-item__card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.15s;
}
.flagged-item__card-name:hover { color: var(--accent); }
.flagged-item__rarity {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.flagged-item__rarity--legendary { color: var(--legendary); }
.flagged-item__rarity--epic { color: var(--epic); }
.flagged-item__rarity--rare { color: var(--rare); }
.flagged-item__rarity--common { color: var(--common); }
.flagged-item__image-path {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}
.flagged-item__date {
  font-size: 11px;
  color: var(--text-muted);
}
.flagged-item__flagged-by {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.flagged-item__reason {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}
.flagged-item__actions {
  flex-shrink: 0;
}
.flagged-item__btn--dismiss {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.flagged-item__btn--dismiss:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

@media (max-width: 600px) {
  .flagged-item { flex-direction: column; align-items: stretch; }
  .flagged-item__images { justify-content: center; }
}


/* ==========================================================================
   Stats dashboard
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.big-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.big-stat__value {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.big-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}

/* Rarity distribution bar */
.rarity-dist {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.rarity-dist__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.rarity-dist__bar {
  display: flex;
  height: 24px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}
.rarity-dist__segment {
  height: 100%;
  transition: width 0.8s ease;
  min-width: 2px;
  position: relative;
}
.rarity-dist__segment--legendary { background: var(--legendary); }
.rarity-dist__segment--epic { background: var(--epic); }
.rarity-dist__segment--rare { background: var(--rare); }
.rarity-dist__segment--common { background: var(--common); }

.rarity-dist__legend {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.rarity-dist__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.rarity-dist__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.rarity-dist__dot--legendary { background: var(--legendary); }
.rarity-dist__dot--epic { background: var(--epic); }
.rarity-dist__dot--rare { background: var(--rare); }
.rarity-dist__dot--common { background: var(--common); }

/* Card lists (rarest/most common) */
.card-list-section {
  margin-bottom: var(--space-xl);
}
.card-list-section__title {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm);
}
.card-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.card-list-item:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
}
.card-list-item__rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  width: 24px;
  text-align: center;
}
.card-list-item__img {
  width: 36px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg-surface);
}
.card-list-item__name {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
}
.card-list-item__stat {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}


/* ==========================================================================
   Profile
   ========================================================================== */

.profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 600px;
  position: relative;
  overflow: hidden;
}
.profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--holographic);
}
.profile-card__name {
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: var(--space-sm);
}
.profile-card__bio {
  font-size: 15px;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}
.profile-card__join {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.profile-favs__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.profile-favs__grid {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.profile-fav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 90px;
}
.profile-fav__img {
  width: 80px;
  height: 106px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.profile-fav__name {
  font-size: 11px;
  text-align: center;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}


/* ==========================================================================
   Modal
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000000cc;
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-xl);
  overflow-y: auto;
}
.modal-overlay--open { display: flex; }

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 700px;
  width: 100%;
  margin: auto 0;
  position: relative;
  animation: modalIn 0.25s ease;
  flex-shrink: 0;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 5;
  width: 32px; height: 32px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.modal__close:hover { color: var(--text-primary); border-color: var(--border-hover); }

.modal__hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-deep);
}
.modal__hero-img {
  width: 100%;
  max-height: 450px;
  object-fit: contain;
}
.modal__hero-gradient {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, var(--bg-surface), transparent);
}
.modal__hero-rarity {
  position: absolute;
  top: 16px; left: 16px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
/* Modal card navigation arrows */
.modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  padding: 0;
}
.modal__nav:hover { background: rgba(0, 0, 0, 0.85); }
.modal__nav--prev { left: 12px; }
.modal__nav--next { right: 12px; }

/* Flag button on hero image */
.modal__hero-flag {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.modal__hero-flag:hover {
  background: rgba(220, 60, 60, 0.8);
  color: #fff;
}
.modal__hero-flag--flagged,
.modal__hero-flag:disabled {
  background: rgba(60, 160, 60, 0.8);
  color: #fff;
  cursor: default;
}

.modal__hero-rarity--legendary { background: #f0c03030; color: var(--legendary); border: 1px solid var(--legendary-glow); }
.modal__hero-rarity--epic { background: #a855f730; color: var(--epic); border: 1px solid var(--epic-glow); }
.modal__hero-rarity--rare { background: #3b82f630; color: var(--rare); border: 1px solid var(--rare-glow); }
.modal__hero-rarity--common { background: #6b728030; color: var(--common); border: 1px solid var(--common-glow); }

.modal__body {
  padding: var(--space-xl);
}
.modal__name {
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: var(--space-md);
}
.modal__bio {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.modal__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.modal__stat {
  text-align: center;
  padding: var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.modal__stat-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.modal__stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Card variant/holo gallery */
.modal__gallery {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}
.modal__gallery-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.modal__gallery-strip {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.modal__gallery-item {
  flex: 0 0 72px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
}
.modal__gallery-item:hover {
  border-color: var(--border-active);
  transform: translateY(-2px);
}
.modal__gallery-item--active {
  border-color: var(--accent);
}
.modal__gallery-item--holo {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, #ff6b9d, #c084fc, #60a5fa, #34d399, #fbbf24) border-box;
  border: 2px solid transparent;
}
.modal__gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.modal__gallery-tag {
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  padding: 3px 0;
  background: var(--bg-elevated);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flag button on gallery items */
.modal__gallery-flag {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}
.modal__gallery-item:hover .modal__gallery-flag {
  opacity: 1;
}
.modal__gallery-flag:hover {
  background: rgba(220, 60, 60, 0.8);
  color: #fff;
}
.modal__gallery-flag--flagged,
.modal__gallery-flag:disabled {
  opacity: 1;
  background: rgba(60, 160, 60, 0.8);
  color: #fff;
  cursor: default;
}

/* Want/Trade buttons in card detail modal */
.modal__list-actions {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.modal__list-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.modal__list-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
}
.modal__list-btn--active {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(200, 164, 78, 0.1);
}

/* Trade section in card detail modal */
.modal__trade-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}
.modal__trade-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
.modal__trade-users {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.modal__trade-user {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.modal__trade-user:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.modal__trade-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-surface);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Share button in card modal */
.modal__share {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.modal__share-btn {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.modal__share-btn:hover:not(:disabled) {
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* Power bar in modal */
.power-bar {
  margin-bottom: var(--space-md);
}
.power-bar__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.power-bar__track {
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.power-bar__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rare), var(--epic), var(--legendary));
  transition: width 0.8s ease;
}


/* ==========================================================================
   Utility: empty state, loading
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-muted);
}
.empty-state__icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.3;
}
.empty-state__text {
  font-size: 14px;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}
.loading__spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   Responsive
   ========================================================================== */

/* Hamburger button — hidden on desktop */
.topbar__burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.topbar__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 1px;
  transition: all 0.2s;
}
.topbar--open .topbar__burger span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.topbar--open .topbar__burger span:nth-child(2) { opacity: 0; }
.topbar--open .topbar__burger span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

@media (max-width: 768px) {
  .topbar {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
  .topbar__brand { flex: 1; }
  .topbar__sub { display: none; }
  .topbar__burger { display: flex; }

  /* Nav hidden by default on mobile, shown when burger toggled */
  .topbar__nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    order: 10;
  }
  .topbar--open .topbar__nav { display: flex; }
  .topbar__nav .tab-btn { width: 100%; justify-content: flex-start; }

  /* User area compact */
  .topbar__user {
    order: 9;
    width: 100%;
    display: none;
  }
  .topbar--open .topbar__user { display: block; }
  .user-badge { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .login-btn { justify-content: center; width: 100%; }

  /* Close menu after clicking a tab */
  .topbar__nav .tab-btn { padding: 10px 16px; }

  .main { padding: var(--space-md); }
  .panel__title { font-size: 22px; }
  .panel__controls { flex-direction: column; align-items: stretch; }
  .search-box { max-width: none; }

  .card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-sm); }

  .completion-ring { flex-direction: column; }
  .rarity-row { min-width: auto; }

  .modal__stats { grid-template-columns: 1fr; }
  .modal__hero-img { max-height: 300px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }
  .rarity-filters { gap: 2px; }
  .rarity-btn { padding: 5px 10px; font-size: 11px; }
}