/* ============================================================
   MY COLLECTION — "Illumineer's Vault" theme
   A deliberately distinct treatment from the rest of the site:
   deep ink-violet + aged gold, museum-plaque display cases,
   evoking Lorcana's own inkwell/glimmer mechanics rather than
   the Pokemon navy/gold branding used elsewhere.
   ============================================================ */

.vault-body{
  --vault-ink:      #150b28;
  --vault-panel:    #221739;
  --vault-panel-2:  #2b1c48;
  --vault-gold:     #cda85f;
  --vault-gold-br:  #e8c77e;
  --vault-glimmer:  #a97ce8;
  --vault-parch:    #f2e8d5;
  --vault-faint:    rgba(242,232,213,0.52);
  --vault-line:     rgba(205,168,95,0.28);
  --vault-display:  'Cinzel', serif;
  background:var(--vault-ink);
}

.vault-hero{
  background:
    radial-gradient(ellipse at 50% -10%, rgba(169,124,232,0.20), transparent 60%),
    var(--vault-ink);
  padding:90px 0 60px;
  border-bottom:1px solid var(--vault-line);
  text-align:center;
}
.vault-hero-inner{ max-width:720px; margin:0 auto; }
.vault-eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--vault-gold);
  border:1px solid var(--vault-line);
  border-radius:999px;
  padding:6px 16px;
  margin-bottom:22px;
}
.vault-title{
  font-family:var(--vault-display);
  font-weight:600;
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  color:var(--vault-parch);
  letter-spacing:0.01em;
  margin:0 0 18px;
  position:relative;
  display:block;
}
.vault-title::after{
  content:'';
  display:block;
  width:120px;
  height:2px;
  margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--vault-gold), transparent);
  background-size:200% 100%;
  animation:vault-shimmer 3.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .vault-title::after{ animation:none; } }
@keyframes vault-shimmer{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
.vault-sub{
  color:var(--vault-faint);
  font-size:1.02rem;
  line-height:1.6;
  max-width:52ch;
  margin:0 auto 40px;
}

.vault-stats{
  display:flex;
  justify-content:center;
  gap:52px;
  flex-wrap:wrap;
}
.vault-stats-rows{
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.vault-stats-row{
  display:flex;
  justify-content:center;
  gap:52px;
  flex-wrap:wrap;
}

.vault-stat{ display:flex; flex-direction:column; align-items:center; }
.vault-stat-num{
  font-family:var(--vault-display);
  font-weight:700;
  font-size:2.4rem;
  color:var(--vault-gold-br);
  line-height:1;
}
.vault-stat-label{
  font-family:var(--mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--vault-faint);
  margin-top:8px;
}
.vault-stat-progress-label{
  font-family:var(--mono);
  font-size:0.66rem;
  color:var(--vault-faint);
  margin-top:6px;
}
.vault-stat-progress-bar{
  width:72px;
  height:4px;
  border-radius:2px;
  background:var(--vault-line);
  margin-top:5px;
  overflow:hidden;
}
.vault-stat-progress-fill{
  height:100%;
  border-radius:2px;
  background:linear-gradient(90deg, var(--vault-glimmer), var(--vault-gold-br));
  transition:width .4s ease;
}

.vault-body-section{ padding:60px 0 100px; }

.vault-empty{
  text-align:center;
  padding:80px 20px;
  color:var(--vault-faint);
}
.vault-empty h3{
  font-family:var(--vault-display);
  color:var(--vault-parch);
  font-size:1.5rem;
  margin-bottom:12px;
}

.vault-set{ margin-bottom:64px; }
.vault-set-empty{ margin-bottom:64px; }
.vault-set-empty .vault-series-banner{ margin-bottom:0; }

.vault-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
}
@media (max-width:1000px){ .vault-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vault-grid{ grid-template-columns:1fr; } }

.vault-plaque{
  position:relative;
  background:linear-gradient(180deg, var(--vault-panel-2), var(--vault-panel));
  border:1px solid var(--vault-line);
  border-radius:6px;
  padding:14px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.collection-body .vault-plaque{
  padding-bottom:40px;
}
.collection-body .vault-plaque-grade{
  position:absolute;
  bottom:14px;
  right:16px;
  font-family:var(--mono);
  font-size:0.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--vault-ink);
  background:var(--vault-gold-br);
  padding:3px 7px;
  border-radius:4px;
  line-height:1.2;
  white-space:nowrap;
}
.vault-plaque:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 40px -24px rgba(0,0,0,0.65);
}
.vault-plaque::before, .vault-plaque::after,
.vault-plaque .corner-br, .vault-plaque .corner-bl{
  content:'';
  position:absolute;
  width:16px; height:16px;
  border-color:var(--vault-gold);
  border-style:solid;
  opacity:0.85;
}
.vault-plaque::before{ top:6px; left:6px; border-width:2px 0 0 2px; }
.vault-plaque::after{ top:6px; right:6px; border-width:2px 2px 0 0; }
.vault-plaque .corner-bl{ bottom:6px; left:6px; border-width:0 0 2px 2px; }
.vault-plaque .corner-br{ bottom:6px; right:6px; border-width:0 2px 2px 0; }

.vault-plaque-art{
  width:100%;
  aspect-ratio:5/7;
  border-radius:4px;
  overflow:hidden;
  margin-bottom:12px;
  background:var(--vault-ink);
}
.vault-plaque-art img{ width:100%; height:100%; object-fit:cover; }

.vault-plaque-rarity{
  font-family:var(--mono);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--vault-glimmer);
  display:block;
  margin-bottom:4px;
}
.vault-plaque h3{
  font-family:var(--body);
  font-weight:600;
  font-size:0.94rem;
  color:var(--vault-parch);
  margin:0 0 4px;
  line-height:1.3;
}
.vault-plaque .vault-plaque-set{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--vault-faint);
  display:block;
  text-decoration:underline;
  text-decoration-color:var(--vault-line);
  text-underline-offset:2px;
  margin-bottom:4px;
  cursor:default;
}

/* ============================================================
   SHARED "DISTINCT SECTION" BANNER
   Generic version of the Slab Vault series-banner treatment —
   gradient panel, corner brackets, gradient title text, a stats
   readout, and an underline rule. Built entirely from each
   page's own --vault-* theme tokens, so it automatically renders
   in violet/gold on Lorcana, teal/cyan on Sealed, amber on Slab,
   with zero page-specific color rules needed here.
   ============================================================ */
.vault-series-banner{
  position:relative;
  margin:56px 0 28px;
  padding:22px 28px;
  border-radius:16px;
  background:
    radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--vault-glimmer) 16%, transparent), transparent 55%),
    linear-gradient(135deg, var(--vault-panel-2), var(--vault-panel));
  border:1px solid var(--vault-line);
  box-shadow:0 18px 36px -26px rgba(0,0,0,0.65), inset 0 1px 0 color-mix(in srgb, var(--vault-glimmer) 8%, transparent);
}
.vault-grid + .vault-series-banner,
.vault-series-banner:first-child{
  margin-top:0;
}
.vault-series-corner{
  position:absolute;
  width:22px;
  height:22px;
  border-color:var(--vault-gold-br);
  border-style:solid;
  opacity:0.85;
}
.vault-series-corner-tl{
  top:8px; left:8px;
  border-width:2px 0 0 2px;
  border-top-left-radius:6px;
}
.vault-series-corner-br{
  bottom:8px; right:8px;
  border-width:0 2px 2px 0;
  border-bottom-right-radius:6px;
}
.vault-series-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 20px;
}
.vault-series-title-row img{
  width:40px;
  height:40px;
  object-fit:contain;
  border-radius:8px;
  border:1px solid var(--vault-line);
  background:var(--vault-panel);
  margin-right:14px;
  vertical-align:middle;
}
.vault-series-title-group{
  display:flex;
  align-items:center;
}
.vault-series-title{
  font-family:var(--vault-display);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:0.02em;
  margin:0;
  background:linear-gradient(90deg, var(--vault-glimmer), var(--vault-gold-br) 60%, var(--vault-gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.vault-series-stats{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--vault-faint);
  white-space:nowrap;
  flex-wrap:wrap;
}
.vault-series-stats strong{
  color:var(--vault-gold-br);
  font-weight:700;
}
.vault-series-stats-divider{
  color:var(--vault-line);
}
.vault-series-rule{
  margin-top:14px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--vault-gold-br), transparent 85%);
}
.vault-series-desc{
  margin:14px 0 0;
  color:var(--vault-faint);
  font-size:0.92rem;
  line-height:1.5;
}

/* The Iconics showcase — a headliner treatment, one notch more
   special than the regular per-set banners it sits above. */
.vault-iconic-showcase-banner{
  border-color:var(--vault-gold-br);
  box-shadow:0 22px 44px -22px rgba(0,0,0,0.7), inset 0 1px 0 color-mix(in srgb, var(--vault-glimmer) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--vault-gold-br) 30%, transparent);
}
.vault-iconic-showcase-banner .vault-series-title{
  font-size:1.7rem;
}
.vault-iconic-showcase-banner .vault-series-rule{
  height:3px;
  background:linear-gradient(90deg, var(--vault-glimmer), var(--vault-gold-br) 50%, var(--vault-gold));
}

/* Section-wide spotlight glow — the whole Iconics area sits in a soft
   gold radial wash, not just the banner, so it reads as lifted off the
   page rather than just another bordered box. */
.vault-iconic-showcase-section{
  position:relative;
  padding:8px 8px 28px;
  border-radius:20px;
  background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--vault-glimmer) 13%, transparent), transparent 65%);
}

/* Iconic cards get a permanent gold-foil frame (every other card on the
   site only gets a border on hover) plus a small ribbon tag, since these
   are literally the rarest tier that exists — worth a "vitrine" look
   year-round, not just a hover state. */
.vault-iconic-plaque{
  border-color:var(--vault-gold-br) !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--vault-gold-br) 45%, transparent), 0 14px 30px -18px rgba(0,0,0,0.65);
}
.vault-iconic-plaque:hover{
  box-shadow:0 0 0 1px var(--vault-gold-br), 0 22px 40px -20px rgba(0,0,0,0.75);
}
.vault-iconic-ribbon{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  font-family:var(--mono);
  font-size:0.6rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--vault-ink);
  background:linear-gradient(90deg, var(--vault-glimmer), var(--vault-gold-br));
  padding:3px 9px;
  border-radius:999px;
  box-shadow:0 3px 8px -2px rgba(0,0,0,0.5);
}