/* ════════════════════════════════════════════════════════════════════
 * XCS MEET US — Visual cleanup for logged-in user's own card
 * ────────────────────────────────────────────────────────────────────
 * Tujuan: card user-sendiri tampilan-nya sama bersih dengan card user lain
 *   - Hilangkan animated gold ring yang rotating (bikin tampak blur)
 *   - Hilangkan radial glow di dalam card (bikin overlap text)
 *   - Hilangkan mood pulse animation (subtle scale yang bikin re-render)
 *   - Pertahankan border kuning solid sebagai visual cue subtle
 * Plus FIX chevron 🔍 overlap dengan text rarity "COSMIC"/"MYTHICAL"
 *   - Chevron jadi absolute positioned di pojok kanan-atas brewek card
 * ════════════════════════════════════════════════════════════════════ */

/* ── 1. Hilangkan animated rotating gold ring di luar card ───────────── */
.xcs-tcard.is-me::after {
  /* Full replacement — was animated rotating gradient blur */
  content: none !important;
  animation: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* ── 2. Hilangkan internal radial glow div ────────────────────────────── */
.xcs-tcard-me-glow {
  display: none !important;
}

/* ── 3. Hilangkan mood pulse animation ────────────────────────────────── */
.xcs-tcard-mood:not(.is-empty) {
  animation: none !important;
}

/* ── 4. Pertahankan border kuning subtle untuk identifikasi own-card ──
   Sudah ada di styles.css (line 3509-3511); cukup lock specificity-nya
   biar dark mode atau hover state tidak override. */
.xcs-tcard.is-me {
  border-color: var(--xcs-yellow, var(--xcs-yellow));
  /* Single solid shadow — no fancy glow */
  box-shadow: 0 0 0 1px var(--xcs-yellow, var(--xcs-yellow)), var(--xcs-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}
.xcs-tcard.is-me:hover {
  box-shadow: 0 0 0 1px var(--xcs-yellow, var(--xcs-yellow)), var(--xcs-shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
}

/* ════════════════════════════════════════════════════════════════════
 * Featured Brewek card slot — fix chevron 🔍 overlap with rarity text
 * Original: chevron sebagai flex item inline dengan .xcs-tcard-fcslot-meta
 *           → kalau rarity panjang ("COSMIC", "MYTHICAL"), nge-overlap
 * Fix:      chevron jadi absolute di pojok kanan-atas brewek card
 * ════════════════════════════════════════════════════════════════════ */

/* Card slot harus jadi positioning context */
.xcs-tcard-fcslot.is-filled {
  position: relative;
}

/* Meta block (name + rarity) ambil semua sisa space ──────────────────── */
.xcs-tcard-fcslot-meta {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding-right: 24px;   /* reserve space so absolute chevron tidak overlap text */
}

/* Chevron 🔍 absolute di pojok kanan atas ────────────────────────────── */
.xcs-tcard-fcslot-chevron {
  position: absolute !important;
  top: 8px;
  right: 10px;
  font-size: 13px !important;
  opacity: 0.55;
  pointer-events: none;
  /* Background pill subtle supaya kontras di image brewek card */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 3;
}
[data-theme="dark"] .xcs-tcard-fcslot-chevron {
  background: rgba(0, 0, 0, 0.55);
}
.xcs-tcard-fcslot.is-clickable:hover .xcs-tcard-fcslot-chevron {
  opacity: 1;
}

/* Rarity text dapat full width sekarang (tanpa interference chevron) */
.xcs-tcard-fcslot-rarity {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════
 * EDIT PROFILE MODAL — Performance & Visual Cleanup
 * ════════════════════════════════════════════════════════════════════ */

/* Backdrop: solid dark overlay, no expensive blur animation */
.xcs-modal-backdrop {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: xcsModalFade 140ms ease !important;
}
[data-theme="dark"] .xcs-modal-backdrop {
  background: rgba(0, 0, 0, 0.78) !important;
}

/* Modal pop animation: simpler fade-only (no spring scale) */
.xcs-modal {
  animation: xcsModalFade 160ms ease !important;
}

/* Make sure all surfaces inside modal are SOLID — avoid transparent layers */
.xcs-modal.xcs-profile-modal { background: #FFFFFF; }
[data-theme="dark"] .xcs-modal.xcs-profile-modal { background: #1A1D26; }
.xcs-modal.xcs-fcpicker-modal { background: #FFFFFF; }
[data-theme="dark"] .xcs-modal.xcs-fcpicker-modal { background: #1A1D26; }

.xcs-fcedit-current {
  background: #FFF8E1 !important;
}
[data-theme="dark"] .xcs-fcedit-current {
  background: rgba(196, 196, 196, 0.08) !important;
}

/* FCPicker row base: cheaper transitions, no transform on hover */
.xcs-fcpicker-row {
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: 0 76px;
}
.xcs-fcpicker-row:hover {
  transform: none !important;
}
.xcs-fcpicker-row-art {
  background: var(--card-accent, #94A3B8) !important;
}
.xcs-fcpicker-row-art img {
  position: relative;
  z-index: 1;
}
.xcs-fcpicker-row-emoji {
  filter: none !important;
}

/* ════════════════════════════════════════════════════════════════════
 * FIX: Rarity glow/shadow keluar dari container fcpicker list
 * Class .xcs-brewak-rarity-cosmic & rarity tinggi punya box-shadow 60px
 * + 3px outline ring + animated glow yang nge-overflow keluar container.
 * Plus animasi 4 detik infinite di tiap row = bikin device berat saat
 * scroll list.
 * ════════════════════════════════════════════════════════════════════ */

.xcs-fcpicker-body {
  padding: 20px 16px !important;
}

.xcs-fcpicker-list {
  /* Clip overflow from rarity glows */
  overflow: hidden;
  padding: 4px 2px;
  margin: 0 -2px;
}

/* Disable rarity glow animations + heavy box-shadows inside fcpicker rows */
.xcs-fcpicker-list .xcs-fcpicker-row[class*="xcs-brewak-rarity-"] {
  animation: none !important;
  background: var(--xcs-bg-1, #FFFFFF) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="dark"] .xcs-fcpicker-list .xcs-fcpicker-row[class*="xcs-brewak-rarity-"] {
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Keep border-left rarity color as the visual indicator */
.xcs-fcpicker-list .xcs-fcpicker-row.xcs-brewak-rarity-cosmic {
  border-left: 4px solid #FB7185 !important;
}
.xcs-fcpicker-list .xcs-fcpicker-row.xcs-brewak-rarity-divine {
  border-left: 4px solid var(--xcs-yellow-soft) !important;
}
.xcs-fcpicker-list .xcs-fcpicker-row.xcs-brewak-rarity-ascended {
  border-left: 4px solid #22D3EE !important;
}
.xcs-fcpicker-list .xcs-fcpicker-row.xcs-brewak-rarity-mythical {
  border-left: 4px solid #EC4899 !important;
}
.xcs-fcpicker-list .xcs-fcpicker-row.xcs-brewak-rarity-legendary {
  border-left: 4px solid var(--xcs-yellow) !important;
}
.xcs-fcpicker-list .xcs-fcpicker-row.xcs-brewak-rarity-epic {
  border-left: 4px solid var(--xcs-violet) !important;
}
.xcs-fcpicker-list .xcs-fcpicker-row.xcs-brewak-rarity-rare {
  border-left: 4px solid var(--xcs-blue) !important;
}
.xcs-fcpicker-list .xcs-fcpicker-row.xcs-brewak-rarity-common {
  border-left: 4px solid #94A3B8 !important;
}

/* Current selection: solid yellow ring instead of cosmic shimmer */
.xcs-fcpicker-list .xcs-fcpicker-row.is-current {
  background: rgba(196, 196, 196, 0.10) !important;
  outline: 2px solid var(--xcs-yellow, var(--xcs-yellow));
  outline-offset: -2px;
}
[data-theme="dark"] .xcs-fcpicker-list .xcs-fcpicker-row.is-current {
  background: rgba(196, 196, 196, 0.12) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Card name readability — works on dark AND light artwork
 * ════════════════════════════════════════════════════════════════════ */

/* Featured card slot di trading card (Meet Us) */
.xcs-tcard-fcslot-name {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 1),
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(0, 0, 0, 0.85),
    0 2px 8px rgba(0, 0, 0, 0.6) !important;
}
.xcs-tcard-fcslot-rarity {
  text-shadow:
    0 0 2px rgba(0, 0, 0, 1),
    0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* Dark gradient overlay strengthening — preserves artwork colors,
   dark only at the very bottom for text backstop */
.xcs-tcard-fcslot.is-filled::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(0,0,0,0.40) 70%, rgba(0,0,0,0.82) 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 0 0 inherit inherit;
}
.xcs-tcard-fcslot-meta {
  position: relative;
  z-index: 2;
}
.xcs-tcard-fcslot-chevron {
  z-index: 3 !important;
}

/* GameCard name (di brewak card zoom + brewak grid) */
.xcs-brewak-card-name {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  /* HEAVY text-shadow — compensate for lighter overlay; text tetap terbaca
     karena multi-layer dark outline mengikuti tepi huruf */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 1),
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(0, 0, 0, 0.85),
    0 2px 12px rgba(0, 0, 0, 0.7) !important;
}
.xcs-brewak-card-description,
.xcs-brewak-card-desc,
.xcs-brewak-card-flavor {
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 1),
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(0, 0, 0, 0.8) !important;
}
.xcs-brewak-card-rarity-tag {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}
.xcs-brewak-card-footer {
  text-shadow:
    0 0 2px rgba(0, 0, 0, 1),
    0 1px 2px rgba(0, 0, 0, 0.95) !important;
}

/* OVERLAY — keep artwork colors VIBRANT. Dark gradient only at very bottom
   for text readability of name/desc/footer. Preserves artwork from 0-55%
   completely (no darkening at all), then gentle gradient to dark just at
   the text area. */
.xcs-brewak-card-overlay {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 55%,
    rgba(0, 0, 0, 0.30) 75%,
    rgba(0, 0, 0, 0.78) 100%
  ) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * AUTO-SOLD DUPLICATES NOTICE (after pack open)
 * ════════════════════════════════════════════════════════════════════ */
.xcs-brewak-autosold-notice {
  margin: 16px auto;
  max-width: 540px;
  width: 100%;
  padding: 16px 18px;
  background: linear-gradient(135deg, #FFF8E1 0%, #FAEBC6 100%);
  border: 1.5px solid #B8941F;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(184, 148, 31, 0.18);
}
[data-theme="dark"] .xcs-brewak-autosold-notice {
  background: linear-gradient(135deg, rgba(184, 148, 31, 0.12) 0%, rgba(184, 148, 31, 0.06) 100%);
  border-color: rgba(232, 197, 71, 0.5);
}

.xcs-brewak-autosold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(184, 148, 31, 0.3);
}
.xcs-brewak-autosold-icon {
  font-size: 24px;
}
.xcs-brewak-autosold-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #7A5F12;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .xcs-brewak-autosold-title { color: #E8C547; }
.xcs-brewak-autosold-total {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 800;
  color: #B8941F;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}
[data-theme="dark"] .xcs-brewak-autosold-total {
  background: rgba(0, 0, 0, 0.3);
  color: var(--xcs-yellow-soft);
}

.xcs-brewak-autosold-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.xcs-brewak-autosold-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  border-left: 3px solid var(--card-accent, #B8941F);
  font-size: 13px;
}
[data-theme="dark"] .xcs-brewak-autosold-item {
  background: rgba(0, 0, 0, 0.25);
}
.xcs-brewak-autosold-item.xcs-brewak-rarity-cosmic    { --card-accent: #FB7185; }
.xcs-brewak-autosold-item.xcs-brewak-rarity-divine    { --card-accent: #ECECEC; }
.xcs-brewak-autosold-item.xcs-brewak-rarity-ascended  { --card-accent: #22D3EE; }
.xcs-brewak-autosold-item.xcs-brewak-rarity-mythical  { --card-accent: #EC4899; }
.xcs-brewak-autosold-item.xcs-brewak-rarity-legendary { --card-accent: #C4C4C4; }
.xcs-brewak-autosold-item.xcs-brewak-rarity-epic      { --card-accent: #6E6E6E; }
.xcs-brewak-autosold-item.xcs-brewak-rarity-rare      { --card-accent: #1A1A1A; }
.xcs-brewak-autosold-item.xcs-brewak-rarity-common    { --card-accent: #94A3B8; }

.xcs-brewak-autosold-emoji { font-size: 20px; }
.xcs-brewak-autosold-name {
  font-weight: 700;
  color: #2A2418;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="dark"] .xcs-brewak-autosold-name { color: #F0E7CC; }
.xcs-brewak-autosold-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #6B5D42;
  white-space: nowrap;
}
[data-theme="dark"] .xcs-brewak-autosold-meta { color: #B8A878; }
.xcs-brewak-autosold-coin {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: #B8941F;
  white-space: nowrap;
}
[data-theme="dark"] .xcs-brewak-autosold-coin { color: #E8C547; }

.xcs-brewak-autosold-hint {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-style: italic;
  color: #6B5D42;
  line-height: 1.4;
}
[data-theme="dark"] .xcs-brewak-autosold-hint { color: #B8A878; }

/* ════════════════════════════════════════════════════════════════════
 * SELL DUPLICATES BUTTON (in inventory grid)
 * ════════════════════════════════════════════════════════════════════ */
.xcs-brewak-sell-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, var(--xcs-yellow) 0%, #B8941F 100%);
  color: #2A2418;
  border: 1px solid #7A5F12;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(184, 148, 31, 0.3);
  transition: background 0.15s ease;
}
.xcs-brewak-sell-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #FDE047 0%, #CA8A04 100%);
}
.xcs-brewak-sell-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.xcs-brewak-sell-btn small {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
  margin-left: 2px;
}
[data-theme="dark"] .xcs-brewak-sell-btn {
  color: #1A1814;
  /* Keep gold gradient — works on dark bg too */
}

/* ════════════════════════════════════════════════════════════════════
 * SIDEBAR — Meet Us item: MYTHICAL-style attention effect
 * Mirror the visual treatment of is-primary (Buat Permintaan) and
 * is-daily (Buat Permintaan Daily) but with mythical pink+purple
 * gradient + subtle pulsing glow to attract clicks.
 * ════════════════════════════════════════════════════════════════════ */
.xcs-nav-item.is-meetus {
  position: relative;
  overflow: hidden;
  /* Mythical gradient: pink → purple → magenta */
  background: linear-gradient(135deg, #EC4899 0%, var(--xcs-violet) 50%, #EC4899 100%) !important;
  background-size: 200% 200%;
  color: #FFFFFF !important;
  border: 1px solid rgba(236, 72, 153, 0.55) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 2px 8px -2px rgba(236, 72, 153, 0.5),
    0 0 0 0 rgba(236, 72, 153, 0.4);
  /* Subtle background gradient shift + pulsing glow */
  animation:
    xcs-meetus-gradient 6s ease-in-out infinite,
    xcs-meetus-pulse 2.4s ease-in-out infinite;
}

/* Animated gradient shift — gentle hue movement */
@keyframes xcs-meetus-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Pulsing outer glow ring — like mythical card aura */
@keyframes xcs-meetus-pulse {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 2px 8px -2px rgba(236, 72, 153, 0.5),
      0 0 0 0 rgba(236, 72, 153, 0.0);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 4px 14px -2px rgba(236, 72, 153, 0.7),
      0 0 0 6px rgba(236, 72, 153, 0.15);
  }
}

/* Shimmer sweep on hover (matches is-primary pattern) */
.xcs-nav-item.is-meetus::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.xcs-nav-item.is-meetus:hover::after {
  left: 100%;
}

.xcs-nav-item.is-meetus:hover {
  background: linear-gradient(135deg, #F472B6 0%, #C084FC 50%, #F472B6 100%) !important;
  background-size: 200% 200%;
  transform: translateY(-1px);
  border-color: rgba(244, 114, 182, 0.8) !important;
}

/* Active state — heavier glow + stays on top */
.xcs-nav-item.is-meetus.is-active {
  background: linear-gradient(135deg, #BE185D 0%, #7E22CE 50%, #BE185D 100%) !important;
  background-size: 200% 200%;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  /* Stop pulsing when active so it doesn't look glitchy on the selected page */
  animation: xcs-meetus-gradient 6s ease-in-out infinite;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 12px -2px rgba(190, 24, 93, 0.55);
}

/* Make sure icon + text stay above the shimmer overlay */
.xcs-nav-item.is-meetus > * {
  position: relative;
  z-index: 2;
}

/* Mythical sparkle decorations on left/right of item (small twinkles) */
.xcs-nav-item.is-meetus::before {
  content: '✨';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
  animation: xcs-meetus-sparkle 2s ease-in-out infinite;
}
@keyframes xcs-meetus-sparkle {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1.0; transform: translateY(-50%) scale(1.15); }
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .xcs-nav-item.is-meetus,
  .xcs-nav-item.is-meetus::before {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * PRESENCE DOT — small indicator on bottom-right of Meet Us avatar
 * Tier colors:
 *   .xcs-presence-online   — green, pulsing  (active <90s)
 *   .xcs-presence-recent   — green, solid    (<15 min)
 *   .xcs-presence-idle     — amber           (<1 hr)
 *   .xcs-presence-away     — gray            (<24 hr)
 *   .xcs-presence-offline  — dark gray, low opacity, or hidden entirely
 * ════════════════════════════════════════════════════════════════════ */

.xcs-davatar-presence {
  position: absolute;
  bottom: 4%;
  right: 4%;
  /* Scales with avatar size — about 20% of the avatar */
  width: 22%;
  height: 22%;
  min-width: 10px;
  min-height: 10px;
  max-width: 18px;
  max-height: 18px;
  border-radius: 50%;
  border: 2px solid var(--xcs-bg-1, #FFFFFF);
  background: #94A3B8;  /* default = gray (offline) */
  z-index: 5;
  pointer-events: auto;  /* allow title tooltip on hover */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .xcs-davatar-presence {
  border-color: #1A1D26;
}

.xcs-davatar-presence-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

/* ── ONLINE: green, animated outer pulse ring ─────────────────────── */
.xcs-presence-online {
  background: #22C55E;
}
.xcs-presence-online .xcs-davatar-presence-pulse {
  background: #22C55E;
  opacity: 0.6;
  animation: xcs-presence-pulse 1.8s ease-out infinite;
}
@keyframes xcs-presence-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0;    }
}

/* ── RECENT: solid green, no pulse ────────────────────────────────── */
.xcs-presence-recent {
  background: #22C55E;
}

/* ── IDLE: amber ──────────────────────────────────────────────────── */
.xcs-presence-idle {
  background: #F59E0B;
}

/* ── AWAY: lighter gray ───────────────────────────────────────────── */
.xcs-presence-away {
  background: #9CA3AF;
}

/* ── OFFLINE: darker gray, more muted ─────────────────────────────── */
.xcs-presence-offline {
  background: #6B7280;
  opacity: 0.55;
}
[data-theme="dark"] .xcs-presence-offline {
  background: #4B5563;
}

/* Reduced motion — disable pulse */
@media (prefers-reduced-motion: reduce) {
  .xcs-davatar-presence-pulse {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * BROADCAST IMAGE — image attached to broadcast announcements
 * Renders below title, above body. Click to open full size in new tab.
 * ════════════════════════════════════════════════════════════════════ */

.xcs-broadcast-item-image {
  margin: 8px 0 12px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  /* Container has a max-height so very tall images don't dominate the popup */
  max-height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
}
[data-theme="dark"] .xcs-broadcast-item-image {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.xcs-broadcast-item-image img {
  max-width: 100%;
  max-height: 360px;
  width: auto;
  height: auto;
  display: block;
  cursor: zoom-in;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.xcs-broadcast-item-image img:hover {
  opacity: 0.92;
}

/* In admin live-preview, slightly smaller cap */
.xcs-bcastform-preview .xcs-broadcast-item-image {
  max-height: 240px;
}
.xcs-bcastform-preview .xcs-broadcast-item-image img {
  max-height: 240px;
  cursor: default;
}

/* Admin list — small image badge styling (use existing tag base, just color) */
.xcs-bcastadmin-tag.is-image {
  background: rgba(0, 0, 0, 0.12);
  color: var(--xcs-blue);
  border-color: rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .xcs-bcastadmin-tag.is-image {
  background: rgba(255, 255, 255, 0.15);
  color: var(--xcs-blue-fg);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ════════════════════════════════════════════════════════════════════
 * IMAGE PLACEHOLDERS — solid color while loading
 * Strategy: container has a solid background color (--card-accent
 * for cards, user.color for avatars). Image is rendered on top with
 * opacity 0; once loaded (`naturalWidth > 0`), CSS `:not([data-loading])`
 * fades to opacity 1.
 *
 * Layout-stable: no shift when image arrives because container is
 * sized independently. Looks instant on fast networks, smooth fade
 * on slow ones.
 * ════════════════════════════════════════════════════════════════════ */

/* Card art container — already has background from --card-accent via
   gradient. Just transition the image opacity smoothly. */
.xcs-brewak-card-bg {
  /* Fallback background while image loads — uses rarity color */
  background: linear-gradient(135deg,
    var(--card-accent, #94A3B8) 0%,
    rgba(15, 23, 42, 0.6) 100%);
}
.xcs-brewak-card-image {
  /* Slight fade-in once browser decodes — prevents pop-in */
  animation: xcs-img-fade-in 0.35s ease-out;
}
@keyframes xcs-img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Avatar (Meet Us trading card) — solid color background underneath */
.xcs-davatar-inner {
  /* `background` already set inline via user.color — kept as fallback */
  position: relative;
}
.xcs-davatar-photo {
  animation: xcs-img-fade-in 0.35s ease-out;
}

/* Pack visual art */
.xcs-brewak-pack-visual-img {
  animation: xcs-img-fade-in 0.35s ease-out;
}

/* Auction card image */
.xcs-auction-card-img,
.xcs-auction-listing-emoji + img,
img.xcs-auction-card-image {
  animation: xcs-img-fade-in 0.35s ease-out;
}

/* FCPicker row thumbnails (in featured-card edit modal) */
.xcs-fcpicker-row-art img {
  animation: xcs-img-fade-in 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .xcs-brewak-card-image,
  .xcs-davatar-photo,
  .xcs-brewak-pack-visual-img,
  .xcs-fcpicker-row-art img,
  img.xcs-auction-card-image {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xcs-modal-backdrop,
  .xcs-modal {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * RARITY INFO — Stars + drop chance display
 * Dipakai di GameCard zoom modal, fcpicker rows, brewak encyclopedia.
 * Auto-render via <RarityInfo rarity={...} compact={true|false}/> dari brewak.jsx
 * ════════════════════════════════════════════════════════════════════ */

.xcs-rarity-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.xcs-rarity-info-stars {
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  /* Emoji stars render full-color by default; no need to recolor */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  /* Prevent breaking mid-stars across lines */
  white-space: nowrap;
}

.xcs-rarity-info-chance {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--rarity-color, #94A3B8);
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--rarity-color, #94A3B8);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}
[data-theme="dark"] .xcs-rarity-info-chance {
  background: rgba(255, 255, 255, 0.06);
}

/* Compact variant (small contexts like fcpicker rows) */
.xcs-rarity-info.is-compact {
  gap: 6px;
  margin-top: 4px;
}
.xcs-rarity-info.is-compact .xcs-rarity-info-stars {
  font-size: 11px;
  letter-spacing: 0.5px;
}
.xcs-rarity-info.is-compact .xcs-rarity-info-chance {
  font-size: 9px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
}

/* In-card placement: stars block below rarity tag at top */
.xcs-brewak-card-rarity-info {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.xcs-brewak-card-rarity-info .xcs-rarity-info-chance {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════════════
 * Featured Card max-width cap — keep cards inside modal grid
 * Image 1 showed cards extending beyond modal edge due to glow shadow
 * (already fixed with overflow:hidden above). This adds an additional
 * width cap so cards never look stretched in narrow modals.
 * ════════════════════════════════════════════════════════════════════ */
.xcs-fcpicker-row {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.xcs-fcpicker-row-info {
  min-width: 0;   /* allow text truncation */
  flex: 1;
}
.xcs-fcpicker-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════════
 * COIN AUDIT — Hidden auto-sell info bar
 * Shown above the transactions table when filter='all' AND there are
 * card_autosell rows being excluded from view. Tells admin how many
 * are hidden + provides one-click filter shortcut.
 * ════════════════════════════════════════════════════════════════════ */

.xcs-coinaudit-hidden-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #EFF6FF 0%, var(--xcs-blue-soft) 100%);
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  font-size: 13.5px;
  color: #1E3A8A;
  flex-wrap: wrap;
}
[data-theme="dark"] .xcs-coinaudit-hidden-bar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--xcs-blue-soft);
}

.xcs-coinaudit-hidden-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.xcs-coinaudit-hidden-text {
  flex: 1;
  min-width: 200px;
  line-height: 1.45;
}
.xcs-coinaudit-hidden-text strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--xcs-blue);
}
[data-theme="dark"] .xcs-coinaudit-hidden-text strong {
  color: var(--xcs-blue-fg);
}

.xcs-coinaudit-hidden-cta {
  appearance: none;
  background: var(--xcs-blue);
  color: #FFFFFF;
  border: 1px solid var(--xcs-blue);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.xcs-coinaudit-hidden-cta:hover {
  background: var(--xcs-blue);
}
[data-theme="dark"] .xcs-coinaudit-hidden-cta {
  background: var(--xcs-blue);
  border-color: var(--xcs-blue-fg);
}
[data-theme="dark"] .xcs-coinaudit-hidden-cta:hover {
  background: var(--xcs-blue);
}

/* ════════════════════════════════════════════════════════════════════
 * EVENT BANNER — Multi-event carousel at top of Meet Us page
 * Auto-rotate 5s (paused on hover), manual prev/next arrows + dots.
 * Tap "Detail Event →" to open EventDetailModal.
 * ════════════════════════════════════════════════════════════════════ */

.xcs-event-banner {
  position: relative;
  width: 100%;
  margin: 0 0 24px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15);
}
[data-theme="dark"] .xcs-event-banner {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.xcs-event-banner-imgwrap {
  position: relative;
  width: 100%;
  /* 5:3 aspect ratio — fits typical event poster proportions without
     cropping top/bottom text. Trade-off: banner is taller (~60% of width)
     so users need to scroll a bit more to reach the user grid. */
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: #0F172A;
}

.xcs-event-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: xcs-event-banner-fade 0.4s ease-out;
}
@keyframes xcs-event-banner-fade {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

/* Title + CTA overlay at bottom of image */
.xcs-event-banner-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px 28px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.88) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.xcs-event-banner-title {
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.65);
  flex: 1;
  min-width: 200px;
  line-height: 1.25;
}

.xcs-event-banner-cta {
  appearance: none;
  background: rgba(255, 255, 255, 0.95);
  color: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
.xcs-event-banner-cta:hover {
  background: #FFFFFF;
  transform: translateY(-1px);
}
.xcs-event-banner-cta:active {
  transform: translateY(0);
}

/* Carousel arrows (only shown when 2+ events) */
.xcs-event-banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  z-index: 2;
  padding: 0;
}
.xcs-event-banner-arrow:hover {
  background: rgba(0, 0, 0, 0.78);
}
.xcs-event-banner-arrow.is-prev { left: 12px; }
.xcs-event-banner-arrow.is-next { right: 12px; }

/* Dots indicator strip below image */
.xcs-event-banner-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .xcs-event-banner-dots {
  background: rgba(255, 255, 255, 0.04);
}
.xcs-event-banner-dot {
  appearance: none;
  width: 28px;
  height: 5px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.45);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, width 0.2s ease;
}
.xcs-event-banner-dot:hover {
  background: rgba(148, 163, 184, 0.7);
}
.xcs-event-banner-dot.is-active {
  background: #EC4899;
  width: 44px;
}

/* Responsive: smaller font + tighter padding on mobile */
@media (max-width: 640px) {
  .xcs-event-banner-overlay {
    padding: 16px 16px 14px;
  }
  .xcs-event-banner-title {
    font-size: 17px;
  }
  .xcs-event-banner-cta {
    padding: 7px 14px;
    font-size: 12.5px;
  }
  .xcs-event-banner-arrow {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .xcs-event-banner-img {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * EVENT DETAIL MODAL — popup saat klik "Detail Event"
 * ════════════════════════════════════════════════════════════════════ */

.xcs-event-modal {
  max-width: 640px;
  width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}
[data-theme="dark"] .xcs-event-modal {
  background: #1A1D26;
}

.xcs-event-modal-headtitle {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  flex: 1;
}

.xcs-event-modal-body {
  overflow-y: auto;
  padding: 20px;
}

.xcs-event-modal-imgwrap {
  margin: 0 0 16px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
}
[data-theme="dark"] .xcs-event-modal-imgwrap {
  background: rgba(255, 255, 255, 0.05);
}
.xcs-event-modal-imgwrap img {
  max-width: 100%;
  max-height: 380px;
  width: auto;
  height: auto;
  display: block;
}

.xcs-event-modal-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--xcs-ink-1, #0F172A);
}
.xcs-event-modal-text p {
  margin: 0 0 0.6em;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.xcs-event-modal-text p:last-child {
  margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════
 * EVENT ADMIN FORM — composer modal
 * ════════════════════════════════════════════════════════════════════ */
.xcs-event-form-modal {
  max-width: 640px;
  width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.xcs-event-form-preview {
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  /* Match the banner display ratio (5:3) so preview is WYSIWYG */
  aspect-ratio: 5 / 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
[data-theme="dark"] .xcs-event-form-preview {
  background: rgba(255, 255, 255, 0.05);
}
.xcs-event-form-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════════════════════════════════
 * COSMIC — Enhanced "gila" effects on top of existing styles.css base
 *
 * Stacking strategy: styles.css already defines `.xcs-brewak-rarity-cosmic`
 * with rainbow gradient + glow pulse. This file ADDS:
 *   1. Faster gradient cycle (was 8s → now 5s) for more energy
 *   2. ::before pseudo with sparkle particles overlay
 *   3. ::after pseudo with conic-gradient border swirl
 *   4. Hue rotation filter pulse on the whole card
 *
 * IMPORTANT: position relative + overflow hidden are needed for pseudos.
 * Cosmic cards already have these via the base card styles in styles.css.
 * ════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────
 * COSMIC ENHANCEMENT — universal browser support (no mask, no conic).
 *
 * Approach:
 *   - Animated multi-layer box-shadow → "rainbow halo" effect outside card
 *   - Sparkle dots via ::before with mix-blend-mode (won't darken artwork)
 *   - Explicit z-index hierarchy so card image stays visible
 *   - Faster gradient + hue rotation pulse
 * ──────────────────────────────────────────────────────────────────── */

.xcs-brewak-rarity-cosmic {
  animation:
    xcs-brewak-cosmic-bg 5s linear infinite,
    xcs-cosmic-rainbow-ring 4s linear infinite,
    xcs-cosmic-hue-pulse 7s linear infinite !important;
}
@keyframes xcs-cosmic-hue-pulse {
  0%, 100% { filter: hue-rotate(0deg) saturate(1.1); }
  50%      { filter: hue-rotate(30deg) saturate(1.35); }
}

/* Rainbow halo ring via animated box-shadow — replaces the broken conic+mask.
 * Each keyframe shifts WHICH color is on which side, creating a rotating
 * rainbow effect using only box-shadow (universal support). The 4 cardinal
 * shadows give a 360° impression without needing actual rotation. */
@keyframes xcs-cosmic-rainbow-ring {
  0% {
    box-shadow:
      -6px 0  0 -2px rgba(251, 113, 133, 0.85),
       6px 0  0 -2px rgba(168, 85, 247, 0.85),
       0 -6px 0 -2px rgba(0, 0, 0, 0.85),
       0  6px 0 -2px rgba(34, 211, 238, 0.85),
      0 10px 30px rgba(251, 113, 133, 0.45),
      0 0 60px rgba(168, 85, 247, 0.55);
  }
  25% {
    box-shadow:
      -6px 0  0 -2px rgba(168, 85, 247, 0.85),
       6px 0  0 -2px rgba(0, 0, 0, 0.85),
       0 -6px 0 -2px rgba(34, 211, 238, 0.85),
       0  6px 0 -2px rgba(251, 113, 133, 0.85),
      0 10px 30px rgba(168, 85, 247, 0.45),
      0 0 60px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      -6px 0  0 -2px rgba(0, 0, 0, 0.85),
       6px 0  0 -2px rgba(34, 211, 238, 0.85),
       0 -6px 0 -2px rgba(251, 113, 133, 0.85),
       0  6px 0 -2px rgba(168, 85, 247, 0.85),
      0 10px 30px rgba(0, 0, 0, 0.45),
      0 0 60px rgba(34, 211, 238, 0.55);
  }
  75% {
    box-shadow:
      -6px 0  0 -2px rgba(34, 211, 238, 0.85),
       6px 0  0 -2px rgba(251, 113, 133, 0.85),
       0 -6px 0 -2px rgba(168, 85, 247, 0.85),
       0  6px 0 -2px rgba(0, 0, 0, 0.85),
      0 10px 30px rgba(34, 211, 238, 0.45),
      0 0 60px rgba(251, 113, 133, 0.55);
  }
  100% {
    box-shadow:
      -6px 0  0 -2px rgba(251, 113, 133, 0.85),
       6px 0  0 -2px rgba(168, 85, 247, 0.85),
       0 -6px 0 -2px rgba(0, 0, 0, 0.85),
       0  6px 0 -2px rgba(34, 211, 238, 0.85),
      0 10px 30px rgba(251, 113, 133, 0.45),
      0 0 60px rgba(168, 85, 247, 0.55);
  }
}

/* Sparkle particle overlay — radial-gradient dots that twinkle.
 * `mix-blend-mode: screen` means the dots ADD light onto the artwork
 * without ever darkening or hiding it. Safe over any image. */
.xcs-brewak-rarity-cosmic::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    radial-gradient(circle at 12% 18%,  rgba(255, 255, 255, 0.9)  0.5px, transparent 1.5px),
    radial-gradient(circle at 78% 32%,  rgba(255, 230, 200, 0.85) 0.5px, transparent 1.4px),
    radial-gradient(circle at 42% 78%,  rgba(220, 240, 255, 0.9)  0.5px, transparent 1.6px),
    radial-gradient(circle at 88% 88%,  rgba(255, 255, 220, 0.85) 0.5px, transparent 1.4px),
    radial-gradient(circle at 22% 62%,  rgba(255, 200, 220, 0.85) 0.5px, transparent 1.3px),
    radial-gradient(circle at 65% 12%,  rgba(255, 255, 255, 0.9)  0.5px, transparent 1.5px),
    radial-gradient(circle at 33% 38%,  rgba(180, 220, 255, 0.85) 0.5px, transparent 1.3px),
    radial-gradient(circle at 92% 52%,  rgba(255, 240, 200, 0.85) 0.5px, transparent 1.5px);
  background-size: 100% 100%;
  animation: xcs-cosmic-sparkle-twinkle 3.5s ease-in-out infinite;
  border-radius: inherit;
  mix-blend-mode: screen;
}
@keyframes xcs-cosmic-sparkle-twinkle {
  0%, 100% { opacity: 0.45; transform: scale(1);    }
  25%      { opacity: 0.95; transform: scale(1.04); }
  50%      { opacity: 0.6;  transform: scale(0.98); }
  75%      { opacity: 0.9;  transform: scale(1.02); }
}

/* Z-index hierarchy — explicit layering for cosmic cards:
 *   card background image (.xcs-brewak-card-bg)  → z 1
 *   sparkle layer (::before)                      → z 3
 *   badges + name (other direct children)         → z 4 (above sparkles)
 * NOTE: targets `.xcs-brewak-card-bg` directly, so works regardless of
 * older renderers that may not respect `> *` properly. */
.xcs-brewak-rarity-cosmic .xcs-brewak-card-bg {
  z-index: 1;
}
.xcs-brewak-rarity-cosmic .xcs-brewak-card-power-badge,
.xcs-brewak-rarity-cosmic .xcs-brewak-card-rarity-pill,
.xcs-brewak-rarity-cosmic .xcs-brewak-card-name,
.xcs-brewak-rarity-cosmic .xcs-brewak-card-desc,
.xcs-brewak-rarity-cosmic .xcs-brewak-card-stars,
.xcs-brewak-rarity-cosmic .xcs-brewak-card-pull,
.xcs-brewak-rarity-cosmic .xcs-brewak-card-rarity-line {
  position: relative;
  z-index: 4;
}

/* ════════════════════════════════════════════════════════════════════
 * ETERNAL — Apex tier, even more insane than cosmic
 *
 * Visual elements:
 *   - Holographic rainbow border (conic, faster than cosmic)
 *   - Diagonal shimmer sweep crossing the card
 *   - White-hot core glow
 *   - Floating sparkle dust (more dots than cosmic)
 *   - Aurora-like inner gradient that breathes
 *   - "ETERNAL" text effect on rarity badge with chromatic aberration
 * ════════════════════════════════════════════════════════════════════ */

.xcs-brewak-rarity-eternal {
  --card-accent: #FFFFFF;
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.25),
      rgba(196, 181, 253, 0.20),
      rgba(252, 211, 77, 0.20),
      rgba(244, 114, 182, 0.20),
      rgba(125, 211, 252, 0.20),
      rgba(255, 255, 255, 0.25));
  background-size: 600% 600%;
  /* NOTE: actual animation set is overridden below by a rule with !important
     that uses xcs-eternal-rainbow-ring (universal-compat box-shadow approach)
     instead of the old xcs-eternal-glow. Both are kept here as fallback in
     case the override fails to load. */
  animation:
    xcs-eternal-aurora 6s ease-in-out infinite,
    xcs-eternal-hue    9s linear infinite;
  overflow: hidden;
}

@keyframes xcs-eternal-aurora {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes xcs-eternal-glow {
  0%, 100% {
    box-shadow:
      0 14px 40px rgba(255, 255, 255, 0.45),
      0 0 0 3px rgba(255, 255, 255, 0.85),
      0 0 80px rgba(196, 181, 253, 0.65),
      0 0 120px rgba(252, 211, 77, 0.45),
      inset 0 0 30px rgba(255, 255, 255, 0.25);
  }
  33% {
    box-shadow:
      0 14px 40px rgba(244, 114, 182, 0.45),
      0 0 0 3px rgba(244, 114, 182, 0.85),
      0 0 80px rgba(252, 211, 77, 0.65),
      0 0 120px rgba(125, 211, 252, 0.45),
      inset 0 0 30px rgba(255, 240, 250, 0.30);
  }
  66% {
    box-shadow:
      0 14px 40px rgba(125, 211, 252, 0.45),
      0 0 0 3px rgba(125, 211, 252, 0.85),
      0 0 80px rgba(196, 181, 253, 0.65),
      0 0 120px rgba(244, 114, 182, 0.45),
      inset 0 0 30px rgba(240, 250, 255, 0.30);
  }
}

@keyframes xcs-eternal-hue {
  0%, 100% { filter: hue-rotate(0deg)   saturate(1.2) brightness(1.05); }
  50%      { filter: hue-rotate(360deg) saturate(1.35) brightness(1.12); }
}

/* Holographic rainbow halo ring — universal, no mask. Multi-layer animated
 * box-shadow with rotating color sides simulates a spinning rainbow border.
 * Faster + brighter than cosmic to feel even more apex. */
@keyframes xcs-eternal-rainbow-ring {
  0% {
    box-shadow:
      -8px 0  0 -2px rgba(255, 255, 255, 1),
       8px 0  0 -2px rgba(255, 215, 0, 1),
       0 -8px 0 -2px rgba(255, 107, 157, 1),
       0  8px 0 -2px rgba(196, 75, 255, 1),
      0 14px 40px rgba(255, 255, 255, 0.55),
      0 0 80px rgba(196, 181, 253, 0.7),
      0 0 120px rgba(252, 211, 77, 0.5),
      inset 0 0 30px rgba(255, 255, 255, 0.3);
  }
  25% {
    box-shadow:
      -8px 0  0 -2px rgba(255, 215, 0, 1),
       8px 0  0 -2px rgba(255, 107, 157, 1),
       0 -8px 0 -2px rgba(196, 75, 255, 1),
       0  8px 0 -2px rgba(91, 192, 255, 1),
      0 14px 40px rgba(244, 114, 182, 0.55),
      0 0 80px rgba(252, 211, 77, 0.7),
      0 0 120px rgba(125, 211, 252, 0.5),
      inset 0 0 30px rgba(255, 240, 250, 0.3);
  }
  50% {
    box-shadow:
      -8px 0  0 -2px rgba(255, 107, 157, 1),
       8px 0  0 -2px rgba(196, 75, 255, 1),
       0 -8px 0 -2px rgba(91, 192, 255, 1),
       0  8px 0 -2px rgba(0, 255, 200, 1),
      0 14px 40px rgba(125, 211, 252, 0.55),
      0 0 80px rgba(196, 181, 253, 0.7),
      0 0 120px rgba(244, 114, 182, 0.5),
      inset 0 0 30px rgba(240, 250, 255, 0.3);
  }
  75% {
    box-shadow:
      -8px 0  0 -2px rgba(196, 75, 255, 1),
       8px 0  0 -2px rgba(91, 192, 255, 1),
       0 -8px 0 -2px rgba(0, 255, 200, 1),
       0  8px 0 -2px rgba(255, 255, 255, 1),
      0 14px 40px rgba(196, 181, 253, 0.55),
      0 0 80px rgba(125, 211, 252, 0.7),
      0 0 120px rgba(255, 255, 255, 0.5),
      inset 0 0 30px rgba(250, 240, 255, 0.3);
  }
  100% {
    box-shadow:
      -8px 0  0 -2px rgba(255, 255, 255, 1),
       8px 0  0 -2px rgba(255, 215, 0, 1),
       0 -8px 0 -2px rgba(255, 107, 157, 1),
       0  8px 0 -2px rgba(196, 75, 255, 1),
      0 14px 40px rgba(255, 255, 255, 0.55),
      0 0 80px rgba(196, 181, 253, 0.7),
      0 0 120px rgba(252, 211, 77, 0.5),
      inset 0 0 30px rgba(255, 255, 255, 0.3);
  }
}

/* Override eternal animation list to use the new ring instead of xcs-eternal-glow */
.xcs-brewak-rarity-eternal {
  animation:
    xcs-eternal-aurora 6s ease-in-out infinite,
    xcs-eternal-rainbow-ring 4s linear infinite,
    xcs-eternal-hue    9s linear infinite !important;
}

/* Sparkle dust — denser than cosmic, uses ::before (single pseudo since
 * we no longer need ::after for the border trick). mix-blend-mode: screen
 * means sparkles only ADD light, never hide artwork. */
.xcs-brewak-rarity-eternal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    radial-gradient(circle at 8% 12%,   rgba(255, 255, 255, 1) 1px, transparent 2.5px),
    radial-gradient(circle at 18% 28%,  rgba(255, 230, 200, 0.95) 0.8px, transparent 2px),
    radial-gradient(circle at 32% 8%,   rgba(220, 240, 255, 0.95) 0.6px, transparent 1.8px),
    radial-gradient(circle at 48% 22%,  rgba(255, 200, 220, 0.95) 1px, transparent 2.4px),
    radial-gradient(circle at 62% 14%,  rgba(255, 255, 200, 0.95) 0.7px, transparent 2px),
    radial-gradient(circle at 75% 32%,  rgba(255, 255, 255, 1) 0.9px, transparent 2.3px),
    radial-gradient(circle at 88% 18%,  rgba(255, 240, 220, 0.95) 0.6px, transparent 1.8px),
    radial-gradient(circle at 14% 48%,  rgba(255, 200, 240, 0.95) 0.8px, transparent 2.2px),
    radial-gradient(circle at 28% 58%,  rgba(255, 255, 255, 0.95) 0.6px, transparent 1.8px),
    radial-gradient(circle at 42% 72%,  rgba(180, 220, 255, 0.95) 1px, transparent 2.4px),
    radial-gradient(circle at 56% 62%,  rgba(255, 230, 180, 0.95) 0.7px, transparent 2px),
    radial-gradient(circle at 70% 78%,  rgba(255, 220, 240, 0.95) 0.9px, transparent 2.3px),
    radial-gradient(circle at 82% 68%,  rgba(220, 255, 240, 0.95) 0.6px, transparent 1.8px),
    radial-gradient(circle at 92% 82%,  rgba(255, 255, 255, 1) 1.1px, transparent 2.6px),
    radial-gradient(circle at 25% 88%,  rgba(255, 200, 220, 0.95) 0.8px, transparent 2.2px),
    radial-gradient(circle at 65% 92%,  rgba(220, 240, 255, 0.95) 0.7px, transparent 2px);
  background-size: 100% 100%;
  animation: xcs-eternal-dust 4s ease-in-out infinite;
  border-radius: inherit;
  mix-blend-mode: screen;
}
@keyframes xcs-eternal-dust {
  0%, 100% { opacity: 0.55; transform: scale(1)    rotate(0deg); }
  25%      { opacity: 1;    transform: scale(1.06) rotate(0.5deg); }
  50%      { opacity: 0.7;  transform: scale(0.98) rotate(-0.5deg); }
  75%      { opacity: 0.95; transform: scale(1.03) rotate(0.3deg); }
}

/* Z-index hierarchy for eternal — same approach as cosmic */
.xcs-brewak-rarity-eternal .xcs-brewak-card-bg {
  z-index: 1;
}
.xcs-brewak-rarity-eternal .xcs-brewak-card-power-badge,
.xcs-brewak-rarity-eternal .xcs-brewak-card-rarity-pill,
.xcs-brewak-rarity-eternal .xcs-brewak-card-name,
.xcs-brewak-rarity-eternal .xcs-brewak-card-desc,
.xcs-brewak-rarity-eternal .xcs-brewak-card-stars,
.xcs-brewak-rarity-eternal .xcs-brewak-card-pull,
.xcs-brewak-rarity-eternal .xcs-brewak-card-rarity-line {
  position: relative;
  z-index: 4;
}

/* Eternal name text — animated gradient with chromatic shift */
.xcs-brewak-rarity-eternal .xcs-tcard-fcslot-name,
.xcs-brewak-rarity-eternal .xcs-game-card-name {
  background: linear-gradient(
    90deg,
    #FFFFFF, #FFD700, #FF6B9D, #C44BFF, #5BC0FF, #FFFFFF
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: xcs-eternal-name-shimmer 4s linear infinite;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.85);
  font-weight: 900 !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}
@keyframes xcs-eternal-name-shimmer {
  to { background-position: 200% 50%; }
}

/* Eternal rarity badge — special platinum/holo treatment */
.xcs-brewak-rarity-eternal .xcs-tcard-fcslot-rarity,
.xcs-brewak-rarity-eternal .xcs-game-card-rarity {
  background: linear-gradient(
    135deg,
    #FFFFFF 0%, #E0E7FF 25%, #FFD700 50%, #FFA8C5 75%, #FFFFFF 100%
  );
  background-size: 200% 200%;
  color: #1F2937 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
  animation: xcs-eternal-badge-shine 3s linear infinite;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(255, 215, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
@keyframes xcs-eternal-badge-shine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Apex pulsing border ring outside the card (visible at extreme rarity) */
.xcs-brewak-rarity-eternal {
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: 4px;
}

/* Reduced motion — pause heavy animations, keep static beautiful state */
@media (prefers-reduced-motion: reduce) {
  .xcs-brewak-rarity-cosmic,
  .xcs-brewak-rarity-cosmic::before,
  .xcs-brewak-rarity-cosmic::after,
  .xcs-brewak-rarity-eternal,
  .xcs-brewak-rarity-eternal::before,
  .xcs-brewak-rarity-eternal::after {
    animation: none !important;
  }
  .xcs-brewak-rarity-eternal .xcs-tcard-fcslot-name,
  .xcs-brewak-rarity-eternal .xcs-game-card-name,
  .xcs-brewak-rarity-eternal .xcs-tcard-fcslot-rarity,
  .xcs-brewak-rarity-eternal .xcs-game-card-rarity {
    animation: none !important;
  }
}

/* Power score live preview hint in card admin form */
.xcs-cardadmin-power-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--xcs-ink-3, #64748B);
  background: rgba(99, 102, 241, 0.08);
  border-radius: 6px;
  padding: 5px 10px;
  display: inline-block;
}
.xcs-cardadmin-power-hint strong {
  font-weight: 700;
  color: var(--xcs-ink-1, #0F172A);
}
[data-theme="dark"] .xcs-cardadmin-power-hint {
  background: rgba(99, 102, 241, 0.15);
}
[data-theme="dark"] .xcs-cardadmin-power-hint strong {
  color: #F1F5F9;
}

/* ════════════════════════════════════════════════════════════════════
 * MODAL OVERLAY BASE — Defensive fix for missing base CSS
 *
 * The class `.xcs-modal-overlay` is used across multiple modals
 * (auction create, card admin pack form, card admin card form, meetus
 * gift modal, etc.) but had NO base styling in light mode — only a
 * dark-theme override at styles.css:17632. Without `position: fixed`,
 * modals render inline-in-flow and become invisible / unclickable.
 *
 * This adds the base so every `.xcs-modal-overlay` works universally.
 * If an existing rule (e.g. .xcs-auction-modal-overlay in
 * auction-theme.css) already covers it, that rule wins via specificity
 * or !important, no conflict.
 * ════════════════════════════════════════════════════════════════════ */

.xcs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: xcsModalFade 140ms ease;
}
[data-theme="dark"] .xcs-modal-overlay {
  background: rgba(0, 0, 0, 0.78);
}

/* Reuse the existing fade animation if defined elsewhere, otherwise
   declare it here as fallback */
@keyframes xcsModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
 * AURA SYSTEM — Wheel page + Inventory + Encyclopedia + card effects
 * ════════════════════════════════════════════════════════════════════ */

/* ─── Page wrapper ─── */
.xcs-aura-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 12px;
}
.xcs-aura-content {
  margin-top: 16px;
}

/* ════════════════════════════════════════════════════════════════════
 * WHEEL TAB
 * ════════════════════════════════════════════════════════════════════ */
.xcs-aura-wheel-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}
.xcs-aura-wheel-balance {
  font-size: 15px;
  color: var(--xcs-ink-2, #475569);
  background: rgba(99, 102, 241, 0.08);
  padding: 8px 16px;
  border-radius: 20px;
}
.xcs-aura-wheel-balance strong {
  color: var(--xcs-ink-1, #0F172A);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
[data-theme="dark"] .xcs-aura-wheel-balance {
  background: rgba(99, 102, 241, 0.15);
}
[data-theme="dark"] .xcs-aura-wheel-balance strong {
  color: #F1F5F9;
}

.xcs-aura-wheel-stage {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1 / 1;
}

.xcs-aura-wheel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Pointer at top */
.xcs-aura-wheel-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  color: #DC2626;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 10;
  pointer-events: none;
}

/* The wheel itself */
.xcs-aura-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid var(--xcs-yellow);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 0 20px rgba(255, 255, 255, 0.3);
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.2, 1.04);
}
.xcs-aura-wheel.is-spinning {
  /* During spin, animation handled by inline transform */
}

/* Segment label (emoji + name) */
.xcs-aura-wheel-seg-label {
  position: absolute;
  width: 80px;
  text-align: center;
  color: #FFFFFF;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  font-weight: 700;
}
.xcs-aura-wheel-seg-emoji {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
}
.xcs-aura-wheel-seg-name {
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

/* Center cap */
.xcs-aura-wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16%;
  height: 16%;
  background: radial-gradient(circle, #FFFFFF, #F1F5F9);
  border: 4px solid var(--xcs-yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.xcs-aura-wheel-actions {
  width: 100%;
  max-width: 480px;
}
.xcs-aura-spin-btn {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 24px;
}

/* ════════════════════════════════════════════════════════════════════
 * RESULT MODAL — after spin
 * ════════════════════════════════════════════════════════════════════ */
.xcs-aura-result-modal {
  max-width: 460px;
  width: 95vw;
  padding: 24px;
  text-align: center;
}
.xcs-aura-result-card {
  border-radius: 16px;
  padding: 32px 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--aura-color) 20%, #1A1D26 80%),
    color-mix(in srgb, var(--aura-color) 30%, #0F172A 70%));
  color: #FFFFFF;
  box-shadow:
    0 0 0 3px var(--aura-color),
    0 10px 30px color-mix(in srgb, var(--aura-color) 45%, transparent);
}
.xcs-aura-result-tier {
  display: inline-block;
  background: var(--aura-color);
  color: #0F172A;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.xcs-aura-result-emoji {
  font-size: 64px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.xcs-aura-result-name {
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.xcs-aura-result-desc {
  font-size: 13px;
  opacity: 0.85;
  margin: 0;
  line-height: 1.5;
}
.xcs-aura-result-autosell {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #047857;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 13px;
}
[data-theme="dark"] .xcs-aura-result-autosell {
  background: rgba(34, 197, 94, 0.15);
  color: #6EE7B7;
}
.xcs-aura-result-balance {
  font-size: 13px;
  color: var(--xcs-ink-2, #475569);
  margin-bottom: 16px;
}
.xcs-aura-result-balance strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--xcs-ink-1, #0F172A);
}
[data-theme="dark"] .xcs-aura-result-balance strong {
  color: #F1F5F9;
}

/* ════════════════════════════════════════════════════════════════════
 * INVENTORY TAB
 * ════════════════════════════════════════════════════════════════════ */
.xcs-aura-inventory {
  padding: 12px;
}
.xcs-aura-inventory-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 12px 18px;
  background: rgba(99, 102, 241, 0.08);
  border-radius: 12px;
  align-items: center;
  flex-wrap: wrap;
}
[data-theme="dark"] .xcs-aura-inventory-summary {
  background: rgba(99, 102, 241, 0.15);
}

.xcs-aura-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.xcs-aura-inv-card {
  border-radius: 14px;
  padding: 18px 14px;
  background: #FFFFFF;
  border: 2px solid var(--aura-color);
  position: relative;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .xcs-aura-inv-card {
  background: #1A1D26;
}
.xcs-aura-inv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--aura-color) 30%, transparent);
}
.xcs-aura-inv-card.is-equipped {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--aura-color) 12%, #FFFFFF 88%),
    color-mix(in srgb, var(--aura-color) 6%, #FFFFFF 94%));
  box-shadow: 0 0 0 3px var(--aura-color), 0 8px 20px color-mix(in srgb, var(--aura-color) 30%, transparent);
}
[data-theme="dark"] .xcs-aura-inv-card.is-equipped {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--aura-color) 20%, #1A1D26 80%),
    color-mix(in srgb, var(--aura-color) 10%, #1A1D26 90%));
}

.xcs-aura-inv-card-tier {
  display: inline-block;
  background: var(--aura-color);
  color: #0F172A;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.xcs-aura-inv-card-emoji {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--aura-color) 45%, transparent));
}
.xcs-aura-inv-card-name {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--xcs-ink-1, #0F172A);
}
[data-theme="dark"] .xcs-aura-inv-card-name { color: #F1F5F9; }

.xcs-aura-inv-card-desc {
  font-size: 11.5px;
  color: var(--xcs-ink-3, #64748B);
  margin: 0 0 8px;
  line-height: 1.4;
  min-height: 32px;
}
.xcs-aura-inv-card-copies {
  font-size: 11px;
  color: var(--xcs-ink-3, #64748B);
  margin-bottom: 10px;
  font-weight: 600;
}
.xcs-aura-inv-card-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.xcs-aura-inv-card-equipped-tag {
  background: var(--aura-color);
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
 * ENCYCLOPEDIA TAB
 * ════════════════════════════════════════════════════════════════════ */
.xcs-aura-encyclopedia {
  padding: 12px;
}
.xcs-aura-encyclo-progress {
  text-align: center;
  margin: 14px 0;
  font-size: 13px;
  color: var(--xcs-ink-2, #475569);
}
.xcs-aura-encyclo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.xcs-aura-encyclo-card {
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  border: 2px solid var(--aura-color);
  background: #FFFFFF;
  position: relative;
}
[data-theme="dark"] .xcs-aura-encyclo-card { background: #1A1D26; }
.xcs-aura-encyclo-card.is-locked {
  opacity: 0.55;
  background: rgba(148, 163, 184, 0.08);
  border-color: #94A3B8;
  filter: grayscale(0.6);
}
.xcs-aura-encyclo-card-tier {
  display: inline-block;
  background: var(--aura-color);
  color: #0F172A;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.xcs-aura-encyclo-card-emoji {
  font-size: 36px;
  margin-bottom: 6px;
}
.xcs-aura-encyclo-card-name {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
}
.xcs-aura-encyclo-card-desc {
  font-size: 10.5px;
  opacity: 0.75;
  margin: 0 0 6px;
  line-height: 1.4;
}
.xcs-aura-encyclo-card-status {
  font-size: 10px;
  color: var(--xcs-ink-3, #64748B);
  font-weight: 600;
}

/* Tier filter colors */
.xcs-aura-filter-epic     { --filter-color: #6E6E6E; }
.xcs-aura-filter-mythical { --filter-color: #EC4899; }
.xcs-aura-filter-eternal  { --filter-color: #FFD700; }

/* ════════════════════════════════════════════════════════════════════
 * AURA EFFECTS APPLIED TO MEET US CARD (when user has equipped aura)
 *
 * Three unique tiers — designed to feel DIFFERENT from brewek cards.
 * Aura wraps the OUTSIDE of the Meet Us card via box-shadow rings &
 * pseudo overlay, leaving the card content untouched.
 * ════════════════════════════════════════════════════════════════════ */

/* ─── EPIC AURA: subtle purple glow ───────────────────────────────── */
.xcs-tcard.xcs-aura-epic,
.xcs-aura-preview.xcs-aura-epic {
  position: relative;
  box-shadow:
    0 0 0 2px rgba(168, 85, 247, 0.7),
    0 0 30px rgba(168, 85, 247, 0.35),
    0 8px 25px rgba(168, 85, 247, 0.2);
  animation: xcs-aura-epic-pulse 3s ease-in-out infinite;
}
@keyframes xcs-aura-epic-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(168, 85, 247, 0.7),
      0 0 30px rgba(168, 85, 247, 0.35),
      0 8px 25px rgba(168, 85, 247, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(168, 85, 247, 0.9),
      0 0 50px rgba(168, 85, 247, 0.55),
      0 8px 25px rgba(168, 85, 247, 0.35);
  }
}

/* ─── MYTHICAL AURA: pink flashy with shifting glow ──────────────── */
.xcs-tcard.xcs-aura-mythical,
.xcs-aura-preview.xcs-aura-mythical {
  position: relative;
  animation: xcs-aura-myth-glow 2.5s ease-in-out infinite;
}
@keyframes xcs-aura-myth-glow {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(236, 72, 153, 0.85),
      0 0 40px rgba(236, 72, 153, 0.5),
      0 0 80px rgba(168, 85, 247, 0.35),
      0 12px 30px rgba(236, 72, 153, 0.3);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(236, 72, 153, 1),
      0 0 60px rgba(236, 72, 153, 0.75),
      0 0 100px rgba(168, 85, 247, 0.55),
      0 12px 30px rgba(236, 72, 153, 0.5);
  }
}
.xcs-tcard.xcs-aura-mythical::before,
.xcs-aura-preview.xcs-aura-mythical::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(236, 72, 153, 0.3) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
  animation: xcs-aura-myth-shimmer 4s ease-in-out infinite;
}
@keyframes xcs-aura-myth-shimmer {
  0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.05) rotate(2deg); }
}

/* ─── ETERNAL AURA: insane rainbow halo with sparkle dust ────────── */
.xcs-tcard.xcs-aura-eternal,
.xcs-aura-preview.xcs-aura-eternal {
  position: relative;
  animation: xcs-aura-eternal-halo 4s linear infinite;
}
@keyframes xcs-aura-eternal-halo {
  0% {
    box-shadow:
      -10px 0  0 -3px rgba(255, 255, 255, 0.95),
       10px 0  0 -3px rgba(255, 215, 0, 0.95),
       0 -10px 0 -3px rgba(255, 107, 157, 0.95),
       0  10px 0 -3px rgba(196, 75, 255, 0.95),
      0 16px 50px rgba(255, 215, 0, 0.6),
      0 0 100px rgba(196, 181, 253, 0.6),
      inset 0 0 30px rgba(255, 255, 255, 0.3);
  }
  25% {
    box-shadow:
      -10px 0  0 -3px rgba(255, 215, 0, 0.95),
       10px 0  0 -3px rgba(255, 107, 157, 0.95),
       0 -10px 0 -3px rgba(196, 75, 255, 0.95),
       0  10px 0 -3px rgba(91, 192, 255, 0.95),
      0 16px 50px rgba(255, 107, 157, 0.6),
      0 0 100px rgba(252, 211, 77, 0.6),
      inset 0 0 30px rgba(255, 240, 250, 0.3);
  }
  50% {
    box-shadow:
      -10px 0  0 -3px rgba(255, 107, 157, 0.95),
       10px 0  0 -3px rgba(196, 75, 255, 0.95),
       0 -10px 0 -3px rgba(91, 192, 255, 0.95),
       0  10px 0 -3px rgba(0, 255, 200, 0.95),
      0 16px 50px rgba(91, 192, 255, 0.6),
      0 0 100px rgba(244, 114, 182, 0.6),
      inset 0 0 30px rgba(240, 250, 255, 0.3);
  }
  75% {
    box-shadow:
      -10px 0  0 -3px rgba(196, 75, 255, 0.95),
       10px 0  0 -3px rgba(91, 192, 255, 0.95),
       0 -10px 0 -3px rgba(0, 255, 200, 0.95),
       0  10px 0 -3px rgba(255, 255, 255, 0.95),
      0 16px 50px rgba(196, 75, 255, 0.6),
      0 0 100px rgba(91, 192, 255, 0.6),
      inset 0 0 30px rgba(250, 240, 255, 0.3);
  }
  100% {
    box-shadow:
      -10px 0  0 -3px rgba(255, 255, 255, 0.95),
       10px 0  0 -3px rgba(255, 215, 0, 0.95),
       0 -10px 0 -3px rgba(255, 107, 157, 0.95),
       0  10px 0 -3px rgba(196, 75, 255, 0.95),
      0 16px 50px rgba(255, 215, 0, 0.6),
      0 0 100px rgba(196, 181, 253, 0.6),
      inset 0 0 30px rgba(255, 255, 255, 0.3);
  }
}

/* Sparkle dust overlay for eternal */
.xcs-tcard.xcs-aura-eternal::after,
.xcs-aura-preview.xcs-aura-eternal::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 1) 1px, transparent 2.5px),
    radial-gradient(circle at 78% 18%, rgba(255, 230, 200, 0.95) 0.7px, transparent 2px),
    radial-gradient(circle at 32% 78%, rgba(220, 240, 255, 0.95) 0.9px, transparent 2.3px),
    radial-gradient(circle at 65% 62%, rgba(255, 200, 220, 0.95) 0.8px, transparent 2.1px),
    radial-gradient(circle at 88% 88%, rgba(255, 240, 200, 0.95) 0.7px, transparent 2px),
    radial-gradient(circle at 22% 92%, rgba(255, 255, 255, 1) 0.8px, transparent 2.2px),
    radial-gradient(circle at 92% 42%, rgba(180, 220, 255, 0.95) 0.7px, transparent 2px),
    radial-gradient(circle at 8% 52%, rgba(255, 220, 240, 0.95) 0.9px, transparent 2.3px);
  animation: xcs-aura-eternal-dust 4s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes xcs-aura-eternal-dust {
  0%, 100% { opacity: 0.55; transform: scale(1)    rotate(0deg); }
  25%      { opacity: 1;    transform: scale(1.06) rotate(0.5deg); }
  50%      { opacity: 0.7;  transform: scale(0.98) rotate(-0.5deg); }
  75%      { opacity: 0.95; transform: scale(1.03) rotate(0.3deg); }
}

/* Reduced motion — all aura animations off */
@media (prefers-reduced-motion: reduce) {
  .xcs-tcard.xcs-aura-epic,
.xcs-aura-preview.xcs-aura-epic,
  .xcs-tcard.xcs-aura-mythical,
.xcs-aura-preview.xcs-aura-mythical,
  .xcs-tcard.xcs-aura-mythical::before,
.xcs-aura-preview.xcs-aura-mythical::before,
  .xcs-tcard.xcs-aura-eternal,
.xcs-aura-preview.xcs-aura-eternal,
  .xcs-tcard.xcs-aura-eternal::after,
.xcs-aura-preview.xcs-aura-eternal::after {
    animation: none !important;
  }
}

/* Mobile responsive — smaller wheel */
@media (max-width: 640px) {
  .xcs-aura-wheel-stage {
    max-width: 360px;
  }
  .xcs-aura-wheel-seg-emoji {
    font-size: 20px;
  }
  .xcs-aura-wheel-seg-name {
    font-size: 9px;
    max-width: 70px;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * AURA V2 — 6 additional tier effects (common/rare/legendary/ascended/divine/cosmic)
 * Each tier escalates in visual intensity following the brewek rarity ladder.
 * Existing epic / mythical / eternal stay as designed in MVP.
 * ════════════════════════════════════════════════════════════════════ */

/* ─── COMMON AURA: super subtle gray glow ─────────────────────────── */
.xcs-tcard.xcs-aura-common,
.xcs-aura-preview.xcs-aura-common {
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.55),
    0 0 16px rgba(148, 163, 184, 0.25),
    0 4px 12px rgba(148, 163, 184, 0.15);
  animation: xcs-aura-common-pulse 5s ease-in-out infinite;
}
@keyframes xcs-aura-common-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(148, 163, 184, 0.55),
      0 0 16px rgba(148, 163, 184, 0.25),
      0 4px 12px rgba(148, 163, 184, 0.15);
  }
  50% {
    box-shadow:
      0 0 0 1.5px rgba(148, 163, 184, 0.7),
      0 0 22px rgba(148, 163, 184, 0.35),
      0 4px 12px rgba(148, 163, 184, 0.2);
  }
}

/* ─── RARE AURA: gentle blue glow ─────────────────────────────────── */
.xcs-tcard.xcs-aura-rare,
.xcs-aura-preview.xcs-aura-rare {
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.65),
    0 0 22px rgba(0, 0, 0, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.2);
  animation: xcs-aura-rare-pulse 4s ease-in-out infinite;
}
@keyframes xcs-aura-rare-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px rgba(0, 0, 0, 0.65),
      0 0 22px rgba(0, 0, 0, 0.3),
      0 6px 16px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(0, 0, 0, 0.85),
      0 0 38px rgba(0, 0, 0, 0.45),
      0 6px 16px rgba(0, 0, 0, 0.3);
  }
}

/* ─── LEGENDARY AURA: gold glow with shine sweep ──────────────────── */
.xcs-tcard.xcs-aura-legendary,
.xcs-aura-preview.xcs-aura-legendary {
  position: relative;
  box-shadow:
    0 0 0 2px rgba(196, 196, 196, 0.75),
    0 0 32px rgba(196, 196, 196, 0.4),
    0 8px 22px rgba(196, 196, 196, 0.25);
  animation: xcs-aura-legendary-pulse 3.5s ease-in-out infinite;
}
@keyframes xcs-aura-legendary-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(196, 196, 196, 0.75),
      0 0 32px rgba(196, 196, 196, 0.4),
      0 8px 22px rgba(196, 196, 196, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(196, 196, 196, 0.95),
      0 0 50px rgba(196, 196, 196, 0.6),
      0 8px 22px rgba(196, 196, 196, 0.4);
  }
}
.xcs-tcard.xcs-aura-legendary::before,
.xcs-aura-preview.xcs-aura-legendary::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: xcs-aura-legendary-shine 4s linear infinite;
  mix-blend-mode: screen;
}
@keyframes xcs-aura-legendary-shine {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ─── ASCENDED AURA: cyan crystal glow with sparkle ───────────────── */
.xcs-tcard.xcs-aura-ascended,
.xcs-aura-preview.xcs-aura-ascended {
  position: relative;
  box-shadow:
    0 0 0 2.5px rgba(34, 211, 238, 0.8),
    0 0 36px rgba(34, 211, 238, 0.45),
    0 10px 26px rgba(34, 211, 238, 0.28);
  animation: xcs-aura-ascended-pulse 3s ease-in-out infinite;
}
@keyframes xcs-aura-ascended-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2.5px rgba(34, 211, 238, 0.8),
      0 0 36px rgba(34, 211, 238, 0.45),
      0 10px 26px rgba(34, 211, 238, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 3.5px rgba(34, 211, 238, 1),
      0 0 60px rgba(34, 211, 238, 0.65),
      0 10px 26px rgba(34, 211, 238, 0.45);
  }
}
.xcs-tcard.xcs-aura-ascended::before,
.xcs-aura-preview.xcs-aura-ascended::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(220, 240, 255, 0.85) 0.8px, transparent 2px),
    radial-gradient(circle at 78% 32%, rgba(180, 230, 255, 0.85) 0.7px, transparent 1.8px),
    radial-gradient(circle at 52% 78%, rgba(220, 240, 255, 0.85) 0.9px, transparent 2.2px),
    radial-gradient(circle at 92% 62%, rgba(180, 230, 255, 0.85) 0.6px, transparent 1.8px);
  animation: xcs-aura-ascended-sparkle 4s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes xcs-aura-ascended-sparkle {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* ─── DIVINE AURA: pale gold halo with radiating rays ─────────────── */
.xcs-tcard.xcs-aura-divine,
.xcs-aura-preview.xcs-aura-divine {
  position: relative;
  box-shadow:
    0 0 0 3px rgba(253, 230, 138, 0.85),
    0 0 40px rgba(253, 230, 138, 0.5),
    0 0 80px rgba(252, 211, 77, 0.35),
    0 12px 28px rgba(253, 230, 138, 0.3);
  animation: xcs-aura-divine-pulse 3s ease-in-out infinite;
}
@keyframes xcs-aura-divine-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(253, 230, 138, 0.85),
      0 0 40px rgba(253, 230, 138, 0.5),
      0 0 80px rgba(252, 211, 77, 0.35),
      0 12px 28px rgba(253, 230, 138, 0.3);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(253, 230, 138, 1),
      0 0 70px rgba(253, 230, 138, 0.75),
      0 0 120px rgba(252, 211, 77, 0.55),
      0 12px 28px rgba(253, 230, 138, 0.5);
  }
}
.xcs-tcard.xcs-aura-divine::before,
.xcs-aura-preview.xcs-aura-divine::before {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(253, 230, 138, 0.4) 0%, transparent 70%);
  animation: xcs-aura-divine-rays 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes xcs-aura-divine-rays {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* ─── COSMIC AURA: rainbow halo (similar to eternal but slower) ──── */
.xcs-tcard.xcs-aura-cosmic,
.xcs-aura-preview.xcs-aura-cosmic {
  position: relative;
  animation: xcs-aura-cosmic-halo 6s linear infinite;
}
@keyframes xcs-aura-cosmic-halo {
  0% {
    box-shadow:
      -8px 0  0 -2px rgba(251, 113, 133, 0.85),
       8px 0  0 -2px rgba(168, 85, 247, 0.85),
       0 -8px 0 -2px rgba(0, 0, 0, 0.85),
       0  8px 0 -2px rgba(34, 211, 238, 0.85),
      0 14px 40px rgba(251, 113, 133, 0.45),
      0 0 80px rgba(168, 85, 247, 0.55);
  }
  25% {
    box-shadow:
      -8px 0  0 -2px rgba(168, 85, 247, 0.85),
       8px 0  0 -2px rgba(0, 0, 0, 0.85),
       0 -8px 0 -2px rgba(34, 211, 238, 0.85),
       0  8px 0 -2px rgba(251, 113, 133, 0.85),
      0 14px 40px rgba(168, 85, 247, 0.45),
      0 0 80px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      -8px 0  0 -2px rgba(0, 0, 0, 0.85),
       8px 0  0 -2px rgba(34, 211, 238, 0.85),
       0 -8px 0 -2px rgba(251, 113, 133, 0.85),
       0  8px 0 -2px rgba(168, 85, 247, 0.85),
      0 14px 40px rgba(0, 0, 0, 0.45),
      0 0 80px rgba(34, 211, 238, 0.55);
  }
  75% {
    box-shadow:
      -8px 0  0 -2px rgba(34, 211, 238, 0.85),
       8px 0  0 -2px rgba(251, 113, 133, 0.85),
       0 -8px 0 -2px rgba(168, 85, 247, 0.85),
       0  8px 0 -2px rgba(0, 0, 0, 0.85),
      0 14px 40px rgba(34, 211, 238, 0.45),
      0 0 80px rgba(251, 113, 133, 0.55);
  }
  100% {
    box-shadow:
      -8px 0  0 -2px rgba(251, 113, 133, 0.85),
       8px 0  0 -2px rgba(168, 85, 247, 0.85),
       0 -8px 0 -2px rgba(0, 0, 0, 0.85),
       0  8px 0 -2px rgba(34, 211, 238, 0.85),
      0 14px 40px rgba(251, 113, 133, 0.45),
      0 0 80px rgba(168, 85, 247, 0.55);
  }
}

/* Reduced motion — all v2 tier auras off */
@media (prefers-reduced-motion: reduce) {
  .xcs-tcard.xcs-aura-common,
.xcs-aura-preview.xcs-aura-common,
  .xcs-tcard.xcs-aura-rare,
.xcs-aura-preview.xcs-aura-rare,
  .xcs-tcard.xcs-aura-legendary,
.xcs-aura-preview.xcs-aura-legendary,
  .xcs-tcard.xcs-aura-legendary::before,
.xcs-aura-preview.xcs-aura-legendary::before,
  .xcs-tcard.xcs-aura-ascended,
.xcs-aura-preview.xcs-aura-ascended,
  .xcs-tcard.xcs-aura-ascended::before,
.xcs-aura-preview.xcs-aura-ascended::before,
  .xcs-tcard.xcs-aura-divine,
.xcs-aura-preview.xcs-aura-divine,
  .xcs-tcard.xcs-aura-divine::before,
.xcs-aura-preview.xcs-aura-divine::before,
  .xcs-tcard.xcs-aura-cosmic,
.xcs-aura-preview.xcs-aura-cosmic {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * AURA PICKER in Edit Modal Meet Us
 * ════════════════════════════════════════════════════════════════════ */
.xcs-aura-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
.xcs-aura-edit-opt {
  --aura-color: #94A3B8;
  background: var(--xcs-bg-1, #FFFFFF);
  border: 2px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 10px 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
}
[data-theme="dark"] .xcs-aura-edit-opt {
  background: #1A1D26;
  border-color: rgba(148, 163, 184, 0.2);
}
.xcs-aura-edit-opt:hover:not(:disabled) {
  border-color: var(--aura-color);
  transform: translateY(-1px);
}
.xcs-aura-edit-opt.is-active {
  border-color: var(--aura-color);
  background: color-mix(in srgb, var(--aura-color) 10%, var(--xcs-bg-1, #FFFFFF) 90%);
  box-shadow: 0 0 0 2px var(--aura-color), 0 4px 12px color-mix(in srgb, var(--aura-color) 30%, transparent);
}
[data-theme="dark"] .xcs-aura-edit-opt.is-active {
  background: color-mix(in srgb, var(--aura-color) 18%, #1A1D26 82%);
}
.xcs-aura-edit-opt:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.xcs-aura-edit-opt-tier {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--aura-color);
  margin-bottom: 2px;
}
.xcs-aura-edit-opt-emoji {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 4px;
}
.xcs-aura-edit-opt-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--xcs-ink-1, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .xcs-aura-edit-opt-name { color: #F1F5F9; }
.xcs-aura-edit-opt-copies {
  font-size: 9px;
  color: var(--xcs-ink-3, #64748B);
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════
 * AURA ADMIN — config table + form styling
 * ════════════════════════════════════════════════════════════════════ */
.xcs-aura-admin-content { margin-top: 16px; }
.xcs-aura-admin-config { padding: 12px; }
.xcs-aura-admin-config-section {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(99, 102, 241, 0.05);
  border-radius: 12px;
}
[data-theme="dark"] .xcs-aura-admin-config-section {
  background: rgba(99, 102, 241, 0.1);
}
.xcs-aura-admin-config-section h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
}
.xcs-aura-admin-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.xcs-aura-admin-weights-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.xcs-aura-admin-weights-table th,
.xcs-aura-admin-weights-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.xcs-aura-admin-weights-table th {
  font-weight: 700;
  font-size: 12px;
  color: var(--xcs-ink-2, #475569);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.xcs-aura-admin-weights-table input[type="number"] {
  width: 100%;
  max-width: 120px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
[data-theme="dark"] .xcs-aura-admin-weights-table input[type="number"] {
  background: #1A1D26;
  color: #F1F5F9;
  border-color: rgba(148, 163, 184, 0.3);
}

.xcs-aura-admin-form-modal {
  max-width: 560px;
  width: 95vw;
}

/* ════════════════════════════════════════════════════════════════════
 * AURA WHEEL — transparent odds display
 * ════════════════════════════════════════════════════════════════════ */
.xcs-aura-wheel-odds {
  font-size: 12px;
  color: var(--xcs-ink-2, #475569);
  background: rgba(99, 102, 241, 0.06);
  padding: 8px 14px;
  border-radius: 10px;
  text-align: center;
  max-width: 700px;
  line-height: 1.8;
}
[data-theme="dark"] .xcs-aura-wheel-odds {
  background: rgba(99, 102, 241, 0.12);
}
.xcs-aura-wheel-odd-item {
  display: inline-block;
  margin: 0 6px;
  font-weight: 700;
  font-size: 11.5px;
}

/* ════════════════════════════════════════════════════════════════════
 * AURA PREVIEW MODAL — miniature Meet Us card with aura effect
 * ════════════════════════════════════════════════════════════════════ */
.xcs-aura-preview-modal {
  max-width: 480px;
  width: 95vw;
}
.xcs-aura-preview-info {
  text-align: center;
  margin-bottom: 18px;
}
.xcs-aura-preview-stage {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* Miniature Meet Us card replica — borrows xcs-tcard styling but smaller */
.xcs-aura-preview {
  width: 240px;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .xcs-aura-preview {
  background: linear-gradient(180deg, #1F2937 0%, #111827 100%);
  border-color: rgba(148, 163, 184, 0.15);
  color: #F1F5F9;
}
.xcs-aura-preview-top {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.xcs-aura-preview-role {
  background: linear-gradient(90deg, var(--xcs-violet), var(--xcs-violet));
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.08em;
}
.xcs-aura-preview-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
  z-index: 5;
}
.xcs-aura-preview-avatar,
.xcs-aura-preview-avatar-initials {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--xcs-bg-1, #FFFFFF);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.xcs-aura-preview-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 800;
}
[data-theme="dark"] .xcs-aura-preview-avatar,
[data-theme="dark"] .xcs-aura-preview-avatar-initials {
  border-color: #1F2937;
}
.xcs-aura-preview-name {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
  position: relative;
  z-index: 5;
}
.xcs-aura-preview-dept {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.6;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  position: relative;
  z-index: 5;
}
.xcs-aura-preview-status {
  font-size: 11px;
  font-style: italic;
  opacity: 0.7;
  margin-bottom: 8px;
  line-height: 1.4;
  position: relative;
  z-index: 5;
}
.xcs-aura-preview-aura-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--aura-color, var(--xcs-violet)), color-mix(in srgb, var(--aura-color, var(--xcs-violet)) 60%, #000000 40%));
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  position: relative;
  z-index: 5;
}
.xcs-aura-preview-desc {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--xcs-ink-2, #475569);
  padding: 0 16px;
  line-height: 1.5;
}
.xcs-aura-preview-equipped-tag {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

/* Encyclopedia card — make clickable button look like card + add preview hint */
button.xcs-aura-encyclo-card {
  cursor: pointer;
  border: 2px solid var(--aura-color);
  background: #FFFFFF;
  font-family: inherit;
  width: 100%;
  text-align: center;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
  outline: none;
}
[data-theme="dark"] button.xcs-aura-encyclo-card {
  background: #1A1D26;
}
button.xcs-aura-encyclo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--aura-color) 40%, transparent);
}
button.xcs-aura-encyclo-card:focus-visible {
  outline: 2px solid var(--aura-color);
  outline-offset: 2px;
}
.xcs-aura-encyclo-card-preview-hint {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  background: rgba(0, 0, 0, 0.4);
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.15s;
}
button.xcs-aura-encyclo-card:hover .xcs-aura-encyclo-card-preview-hint,
button.xcs-aura-encyclo-card:focus-visible .xcs-aura-encyclo-card-preview-hint {
  opacity: 1;
}

/* Preview cards (in modal) get extra padding to accommodate aura halo overflow */
.xcs-aura-preview {
  margin: 16px;
}

/* ════════════════════════════════════════════════════════════════════
 * AURA UI POLISH — Brewek-style floating animations, all CSS only
 * Goal: feel premium without dropping FPS. No JS animations added.
 * ════════════════════════════════════════════════════════════════════ */

/* Page entrance — gentle fade + lift on initial render */
.xcs-aura-wrapper {
  animation: xcs-aura-page-in 0.4s ease-out;
}
@keyframes xcs-aura-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Wrap the aura headline with subtle sparkle backdrop */
.xcs-aura-wrapper .xcs-pagehead h1 {
  background: linear-gradient(135deg, var(--xcs-violet) 0%, #EC4899 40%, var(--xcs-yellow) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: xcs-aura-title-shimmer 6s linear infinite;
}
@keyframes xcs-aura-title-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ─── WHEEL stage — floating + halo glow ───────────────────────────── */
.xcs-aura-wheel-stage {
  position: relative;
  animation: xcs-aura-wheel-float 5s ease-in-out infinite;
}
@keyframes xcs-aura-wheel-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Halo behind wheel — radial glow that pulses, gives depth */
.xcs-aura-wheel-stage::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center,
    rgba(168, 85, 247, 0.18) 0%,
    rgba(236, 72, 153, 0.10) 35%,
    transparent 65%);
  z-index: -1;
  pointer-events: none;
  animation: xcs-aura-wheel-halo 4s ease-in-out infinite;
  border-radius: 50%;
}
@keyframes xcs-aura-wheel-halo {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* When wheel is spinning, pause the float so it doesn't jitter */
.xcs-aura-wheel.is-spinning {
  /* float animation pauses naturally — the parent stage continues but
     the wheel itself is rotating, which dominates the visual */
}
/* Hint user to spin */
.xcs-aura-wheel:not(.is-spinning):hover {
  cursor: pointer;
}

/* ─── SPIN BUTTON — premium feel ───────────────────────────────────── */
.xcs-aura-spin-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--xcs-violet) 0%, var(--xcs-violet) 50%, #EC4899 100%);
  background-size: 200% 200%;
  animation: xcs-aura-spin-btn-gradient 4s linear infinite;
  border: none;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
@keyframes xcs-aura-spin-btn-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* Shine sweep across button — replaces the boring solid state */
.xcs-aura-spin-btn:not(:disabled)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent);
  animation: xcs-aura-spin-btn-shine 3s ease-in-out infinite;
}
@keyframes xcs-aura-spin-btn-shine {
  0%, 40% { left: -100%; }
  60%, 100% { left: 200%; }
}
.xcs-aura-spin-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);
}
.xcs-aura-spin-btn:disabled {
  background: linear-gradient(135deg, #94A3B8, #64748B);
  animation: none;
  opacity: 0.7;
}

/* ─── ODDS PANEL — soft sparkle effect ─────────────────────────────── */
.xcs-aura-wheel-odds {
  position: relative;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(236, 72, 153, 0.04)),
    var(--xcs-bg-1, #FFFFFF);
  border: 1px solid rgba(168, 85, 247, 0.18);
  animation: xcs-aura-odds-in 0.6s ease-out 0.1s backwards;
}
[data-theme="dark"] .xcs-aura-wheel-odds {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(236, 72, 153, 0.08)),
    #1A1D26;
}
@keyframes xcs-aura-odds-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── ENCYCLOPEDIA CARDS — stagger entrance + hover lift ───────────── */
.xcs-aura-encyclo-card {
  animation: xcs-aura-card-in 0.4s ease-out backwards;
}
/* Stagger first 12 cards — each 50ms delay */
.xcs-aura-encyclo-card:nth-child(1)  { animation-delay: 0.00s; }
.xcs-aura-encyclo-card:nth-child(2)  { animation-delay: 0.05s; }
.xcs-aura-encyclo-card:nth-child(3)  { animation-delay: 0.10s; }
.xcs-aura-encyclo-card:nth-child(4)  { animation-delay: 0.15s; }
.xcs-aura-encyclo-card:nth-child(5)  { animation-delay: 0.20s; }
.xcs-aura-encyclo-card:nth-child(6)  { animation-delay: 0.25s; }
.xcs-aura-encyclo-card:nth-child(7)  { animation-delay: 0.30s; }
.xcs-aura-encyclo-card:nth-child(8)  { animation-delay: 0.35s; }
.xcs-aura-encyclo-card:nth-child(9)  { animation-delay: 0.40s; }
.xcs-aura-encyclo-card:nth-child(10) { animation-delay: 0.45s; }
.xcs-aura-encyclo-card:nth-child(11) { animation-delay: 0.50s; }
.xcs-aura-encyclo-card:nth-child(12) { animation-delay: 0.55s; }
@keyframes xcs-aura-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Encyclopedia card hover — lift + halo (more pronounced than current) */
button.xcs-aura-encyclo-card:hover {
  transform: translateY(-4px) scale(1.02);
  z-index: 2;
}
button.xcs-aura-encyclo-card:hover::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--aura-color) 25%, transparent), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* ─── INVENTORY CARDS — same stagger entrance + tier-color halo ────── */
.xcs-aura-inv-card {
  animation: xcs-aura-card-in 0.4s ease-out backwards;
  position: relative;
}
.xcs-aura-inv-card:nth-child(1)  { animation-delay: 0.00s; }
.xcs-aura-inv-card:nth-child(2)  { animation-delay: 0.05s; }
.xcs-aura-inv-card:nth-child(3)  { animation-delay: 0.10s; }
.xcs-aura-inv-card:nth-child(4)  { animation-delay: 0.15s; }
.xcs-aura-inv-card:nth-child(5)  { animation-delay: 0.20s; }
.xcs-aura-inv-card:nth-child(6)  { animation-delay: 0.25s; }
.xcs-aura-inv-card:nth-child(7)  { animation-delay: 0.30s; }
.xcs-aura-inv-card:nth-child(8)  { animation-delay: 0.35s; }
.xcs-aura-inv-card:nth-child(9)  { animation-delay: 0.40s; }

/* Inventory equipped card — subtle floating */
.xcs-aura-inv-card.is-equipped {
  animation: xcs-aura-card-in 0.4s ease-out backwards,
             xcs-aura-inv-equipped-float 4s ease-in-out infinite 0.5s;
}
@keyframes xcs-aura-inv-equipped-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ─── RESULT MODAL — sparkle confetti backdrop ─────────────────────── */
.xcs-aura-result-modal {
  position: relative;
  overflow: hidden;
  animation: xcs-aura-result-modal-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes xcs-aura-result-modal-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
/* Sparkle dots behind the result card */
.xcs-aura-result-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 215, 0, 0.45) 1.5px, transparent 3px),
    radial-gradient(circle at 85% 18%, rgba(168, 85, 247, 0.4) 1px, transparent 2.5px),
    radial-gradient(circle at 30% 80%, rgba(236, 72, 153, 0.4) 1.2px, transparent 2.5px),
    radial-gradient(circle at 75% 75%, rgba(34, 211, 238, 0.4) 1px, transparent 2px),
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.5) 1.5px, transparent 3px),
    radial-gradient(circle at 10% 60%, rgba(252, 211, 77, 0.4) 1px, transparent 2px),
    radial-gradient(circle at 92% 50%, rgba(168, 85, 247, 0.4) 1.2px, transparent 2.5px);
  animation: xcs-aura-result-sparkle 3s ease-in-out infinite;
}
@keyframes xcs-aura-result-sparkle {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.xcs-aura-result-modal > * {
  position: relative;
  z-index: 1;
}

/* Result card itself — float + scale-in for drama */
.xcs-aura-result-card {
  animation: xcs-aura-result-card-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards;
}
@keyframes xcs-aura-result-card-pop {
  from { opacity: 0; transform: scale(0.7) rotate(-3deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ─── PREVIEW MODAL — soft floating preview card ───────────────────── */
.xcs-aura-preview-modal {
  animation: xcs-aura-preview-in 0.4s ease-out;
}
@keyframes xcs-aura-preview-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Preview card floats gently for life */
.xcs-aura-preview-stage .xcs-aura-preview {
  animation: xcs-aura-preview-float 4s ease-in-out infinite;
}
@keyframes xcs-aura-preview-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1deg); }
}

/* ─── TAB ACTIVATION — gentle slide ────────────────────────────────── */
.xcs-aura-content {
  animation: xcs-aura-tab-in 0.3s ease-out;
}
@keyframes xcs-aura-tab-in {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── EDIT MODAL aura picker — gentle hover lift on each option ────── */
.xcs-aura-edit-opt:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--aura-color) 25%, transparent);
}
.xcs-aura-edit-opt.is-active {
  animation: xcs-aura-edit-opt-pulse 2s ease-in-out infinite;
}
@keyframes xcs-aura-edit-opt-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--aura-color), 0 4px 12px color-mix(in srgb, var(--aura-color) 30%, transparent); }
  50%      { box-shadow: 0 0 0 3px var(--aura-color), 0 8px 24px color-mix(in srgb, var(--aura-color) 50%, transparent); }
}

/* ─── REDUCED MOTION — disable all polish animations ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .xcs-aura-wrapper,
  .xcs-aura-wrapper .xcs-pagehead h1,
  .xcs-aura-wheel-stage,
  .xcs-aura-wheel-stage::before,
  .xcs-aura-spin-btn,
  .xcs-aura-spin-btn::before,
  .xcs-aura-wheel-odds,
  .xcs-aura-encyclo-card,
  .xcs-aura-inv-card,
  .xcs-aura-inv-card.is-equipped,
  .xcs-aura-result-modal,
  .xcs-aura-result-modal::before,
  .xcs-aura-result-card,
  .xcs-aura-preview-modal,
  .xcs-aura-preview-stage .xcs-aura-preview,
  .xcs-aura-content,
  .xcs-aura-edit-opt.is-active {
    animation: none !important;
  }
  .xcs-aura-edit-opt:hover,
  button.xcs-aura-encyclo-card:hover,
  .xcs-aura-spin-btn:not(:disabled):hover {
    transform: none !important;
  }
}

/* ─── MOBILE — softer animations to save battery ──────────────────── */
@media (max-width: 640px) {
  .xcs-aura-wheel-stage::before {
    inset: -5%;  /* smaller halo on mobile */
  }
  .xcs-aura-spin-btn::before {
    /* skip shine on mobile to reduce paint cost */
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * PERFORMANCE: Mobile + low-end device optimizations
 *
 * Mobile devices typically have weaker GPU. Some heavy animations
 * (multi-layer box-shadow, sparkle ::before/::after with mix-blend-mode,
 * conic-gradient rotations) can cause jank or battery drain.
 *
 * Strategy:
 *   - On mobile (<640px), simplify heaviest effects
 *   - Sparkles disabled
 *   - Multi-layer box-shadow → single layer
 *   - Faster animation rates → SLOWER (less repaints/sec)
 * ════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Cosmic + Eternal rainbow rings — simplify to 2-step animation */
  .xcs-tcard.xcs-aura-cosmic,
  .xcs-tcard.xcs-aura-eternal,
  .xcs-aura-preview.xcs-aura-cosmic,
  .xcs-aura-preview.xcs-aura-eternal {
    animation-duration: 8s !important;  /* slow from 4-6s to 8s */
  }
  /* Disable sparkle dust on mobile — biggest perf cost */
  .xcs-tcard.xcs-aura-eternal::after,
  .xcs-aura-preview.xcs-aura-eternal::after,
  .xcs-tcard.xcs-aura-ascended::before,
  .xcs-aura-preview.xcs-aura-ascended::before {
    display: none !important;
  }
  /* Divine rays — disable on mobile */
  .xcs-tcard.xcs-aura-divine::before,
  .xcs-aura-preview.xcs-aura-divine::before {
    display: none !important;
  }
  /* Legendary shine — disable */
  .xcs-tcard.xcs-aura-legendary::before,
  .xcs-aura-preview.xcs-aura-legendary::before {
    display: none !important;
  }
  /* Mythical shimmer pseudo — disable */
  .xcs-tcard.xcs-aura-mythical::before,
  .xcs-aura-preview.xcs-aura-mythical::before {
    display: none !important;
  }

  /* Aura page wheel halo — smaller + slower */
  .xcs-aura-wheel-stage::before {
    animation-duration: 8s;
    inset: 0;
  }
  /* Floating animations slower on mobile */
  .xcs-aura-wheel-stage {
    animation-duration: 8s;
  }
  /* Pause sparkle confetti in result modal on mobile */
  .xcs-aura-result-modal::before {
    display: none;
  }
  /* Spin button shine off (we already had this rule, reinforce) */
  .xcs-aura-spin-btn::before {
    display: none !important;
  }
  .xcs-aura-spin-btn {
    animation: none !important;  /* no gradient cycling */
    background: linear-gradient(135deg, var(--xcs-violet), #EC4899) !important;
  }
}

/* Save battery — when user has device in power-save mode (or laptop on battery),
   browser may set prefers-reduced-data. Honor it. */
@media (prefers-reduced-data: reduce) {
  .xcs-tcard.xcs-aura-eternal::after,
  .xcs-tcard.xcs-aura-ascended::before,
  .xcs-tcard.xcs-aura-divine::before,
  .xcs-tcard.xcs-aura-legendary::before,
  .xcs-tcard.xcs-aura-mythical::before,
  .xcs-aura-result-modal::before,
  .xcs-aura-wheel-stage::before,
  .xcs-aura-spin-btn::before {
    display: none !important;
  }
}

/* GPU hint for animated elements — promotes to compositor layer.
   Sparingly used to avoid memory bloat. */
.xcs-aura-wheel,
.xcs-aura-wheel-stage,
.xcs-aura-spin-btn {
  will-change: transform;
}
/* Card auras also benefit from layer promotion, but only while animating.
   We set `will-change` on hover/active only. */
.xcs-tcard.xcs-aura-eternal:hover,
.xcs-tcard.xcs-aura-cosmic:hover {
  will-change: transform, box-shadow;
}

/* Reduce paint area: contain rule helps browser skip painting outside this box */
.xcs-aura-encyclo-card,
.xcs-aura-inv-card,
.xcs-aura-edit-opt {
  contain: layout style paint;
}

/* ════════════════════════════════════════════════════════════════════
 * AURA PAGE: content-visibility optimization
 *
 * content-visibility: auto tells browser to SKIP rendering offscreen
 * elements. Browser still allocates layout space (contain-intrinsic-size)
 * but doesn't paint or run animations until scrolled into view.
 *
 * Massive savings for long encyclopedia/inventory grids: only visible
 * cards consume GPU/CPU.
 *
 * Browser support: Chrome 85+, Edge 85+, Safari 18+ (May 2024).
 * Firefox doesn't support yet — feature degrades gracefully (no harm).
 * ════════════════════════════════════════════════════════════════════ */

.xcs-aura-encyclo-card,
.xcs-aura-inv-card {
  content-visibility: auto;
  contain-intrinsic-size: 220px 280px;  /* approx card size */
}

/* Disable aura page entrance animation when reduced motion */
@media (prefers-reduced-motion: reduce) {
  .xcs-aura-wrapper {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * HALL OF SPENDERS v2 — TCG Trading Card Style
 *
 * Each top-3 spender renders as a vertical TCG card with:
 *   - Tier border (gold #1, silver #2, bronze #3)
 *   - Holographic shine sweep (foiling effect)
 *   - Corner rank badge + tier label
 *   - Portrait frame with halo glow
 *   - Stat display panels
 *   - Crown floating above #1
 *
 * Layout: podium (#2 left, #1 center elevated, #3 right) with #1 larger
 * Rest (rank 4-5) below as slim cards.
 *
 * All animations pure CSS, GPU-friendly (transform/opacity only).
 * ════════════════════════════════════════════════════════════════════ */

.xcs-halloffame {
  position: relative;
  margin: 24px auto;
  padding: 32px 20px 28px;
  max-width: 1200px;
  background: linear-gradient(180deg,
    #0F172A 0%,
    #1E293B 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 24px 60px -12px rgba(15, 23, 42, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .xcs-halloffame {
  background: linear-gradient(180deg, #050811 0%, #0F172A 100%);
}

/* Subtle floating sparkle particles in background */
.xcs-halloffame-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.xcs-halloffame-sparkles span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, var(--xcs-yellow) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.5;
  animation: xcs-hof-sparkle-float 8s linear infinite;
}
.xcs-halloffame-sparkles span:nth-child(1) { left:  8%; top: 15%; animation-delay: 0s;   }
.xcs-halloffame-sparkles span:nth-child(2) { left: 22%; top: 75%; animation-delay: 1s;   background: radial-gradient(circle, #EC4899, transparent 70%); }
.xcs-halloffame-sparkles span:nth-child(3) { left: 40%; top:  8%; animation-delay: 2s;   background: radial-gradient(circle, #FFFFFF, transparent 70%); }
.xcs-halloffame-sparkles span:nth-child(4) { left: 58%; top: 88%; animation-delay: 3s;   background: radial-gradient(circle, var(--xcs-yellow), transparent 70%); }
.xcs-halloffame-sparkles span:nth-child(5) { left: 75%; top: 22%; animation-delay: 4s;   background: radial-gradient(circle, var(--xcs-violet), transparent 70%); }
.xcs-halloffame-sparkles span:nth-child(6) { left: 88%; top: 68%; animation-delay: 5s;   background: radial-gradient(circle, var(--xcs-yellow), transparent 70%); }
.xcs-halloffame-sparkles span:nth-child(7) { left: 50%; top: 50%; animation-delay: 6s;   background: radial-gradient(circle, #FFFFFF, transparent 70%); }
.xcs-halloffame-sparkles span:nth-child(8) { left: 92%; top: 42%; animation-delay: 7s;   background: radial-gradient(circle, #EC4899, transparent 70%); }
@keyframes xcs-hof-sparkle-float {
  0%, 100% { transform: translateY(0)    scale(1);   opacity: 0.5; }
  50%      { transform: translateY(-20px) scale(1.4); opacity: 1;   }
}

/* Header */
.xcs-halloffame-head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 28px;
}
.xcs-halloffame-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--xcs-yellow);
  background: rgba(196, 196, 196, 0.1);
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(196, 196, 196, 0.3);
  margin-bottom: 12px;
}
.xcs-halloffame-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin: 0 0 6px;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(196, 196, 196, 0.4);
  background: linear-gradient(180deg, #FFFFFF 30%, var(--xcs-yellow) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.xcs-halloffame-sub {
  font-size: 13px;
  color: rgba(241, 245, 249, 0.6);
}

/* Loading/empty states */
.xcs-halloffame-loading,
.xcs-halloffame-empty {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 20px;
  color: rgba(241, 245, 249, 0.7);
}
.xcs-halloffame-empty-ico {
  font-size: 48px;
  margin-bottom: 12px;
}
.xcs-halloffame-empty-cta {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(241, 245, 249, 0.5);
  font-style: italic;
}

/* ─── PODIUM — top 3 layout ───────────────────────────────────────── */
.xcs-halloffame-podium {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: end;
  max-width: 1000px;
  margin: 0 auto;
}
.xcs-halloffame-podium.count-1 {
  grid-template-columns: 1fr;
  max-width: 320px;
}
.xcs-halloffame-podium.count-2 {
  grid-template-columns: 1fr 1fr;
  max-width: 640px;
}

/* ─── TCG CARD — Hall of Fame card ──────────────────────────────── */
.xcs-hofcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #1F2937 0%, #0F172A 100%);
  border: 3px solid var(--hof-tier-color, #94A3B8);
  font-family: inherit;
  color: #FFFFFF;
  overflow: hidden;
  min-height: 320px;
  /* No cursor:pointer, no hover transform — card is static display */
}

/* Tier color variables + glow */
.xcs-hofcard.tier-gold {
  --hof-tier-color: #C4C4C4;
  --hof-tier-bright: #ECECEC;
  --hof-tier-deep: #B45309;
  box-shadow:
    0 0 0 1px rgba(196, 196, 196, 0.4),
    0 12px 30px rgba(196, 196, 196, 0.3),
    0 0 60px rgba(196, 196, 196, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: xcs-hofcard-gold-pulse 3s ease-in-out infinite;
}
@keyframes xcs-hofcard-gold-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(196, 196, 196, 0.4),
      0 12px 30px rgba(196, 196, 196, 0.3),
      0 0 60px rgba(196, 196, 196, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 1.5px rgba(196, 196, 196, 0.6),
      0 16px 40px rgba(196, 196, 196, 0.45),
      0 0 80px rgba(196, 196, 196, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
.xcs-hofcard.tier-silver {
  --hof-tier-color: #CBD5E1;
  --hof-tier-bright: #F1F5F9;
  --hof-tier-deep: #475569;
  box-shadow:
    0 0 0 1px rgba(203, 213, 225, 0.35),
    0 10px 24px rgba(203, 213, 225, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.xcs-hofcard.tier-bronze {
  --hof-tier-color: #D97706;
  --hof-tier-bright: #FBBF24;
  --hof-tier-deep: #7C2D12;
  box-shadow:
    0 0 0 1px rgba(217, 119, 6, 0.35),
    0 10px 24px rgba(217, 119, 6, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* #1 card is larger + elevated */
.xcs-hofcard.is-first {
  min-height: 380px;
  transform: translateY(-20px);
  z-index: 2;
}

/* Holographic foiling shine sweep */
.xcs-hofcard-foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.08) 55%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: xcs-hofcard-foil-sweep 4s linear infinite;
  border-radius: inherit;
  mix-blend-mode: screen;
}
.xcs-hofcard.tier-gold .xcs-hofcard-foil {
  animation-duration: 3s;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 215, 0, 0.15) 45%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 215, 0, 0.15) 55%,
    transparent 70%
  );
  background-size: 200% 200%;
}
@keyframes xcs-hofcard-foil-sweep {
  0%, 40% { background-position: -50% 50%; }
  60%, 100% { background-position: 150% 50%; }
}

/* Crown for #1 — floats above card */
.xcs-hofcard-crown {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 38px;
  filter: drop-shadow(0 4px 8px rgba(196, 196, 196, 0.6));
  z-index: 4;
  animation: xcs-hofcard-crown-float 3s ease-in-out infinite;
}
@keyframes xcs-hofcard-crown-float {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  50%      { transform: translateX(-50%) translateY(-4px) rotate(3deg); }
}

/* Corner rank badge (top-left) */
.xcs-hofcard-rank-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 100%);
  border: 1.5px solid var(--hof-tier-color);
  border-radius: 10px;
  padding: 6px 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.xcs-hofcard-rank-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--hof-tier-bright);
  line-height: 1;
}
.xcs-hofcard-rank-medal {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* Tier label (top-right) — like rarity stamp on TCG */
.xcs-hofcard-tier-label {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: var(--hof-tier-color);
  color: #0F172A;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Portrait frame — central focus, like card artwork */
.xcs-hofcard-portrait {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  margin-bottom: 14px;
}
.xcs-hofcard-portrait-frame {
  position: relative;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg,
    var(--hof-tier-bright),
    var(--hof-tier-color),
    var(--hof-tier-deep));
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 40px color-mix(in srgb, var(--hof-tier-color) 35%, transparent);
}
.xcs-hofcard-portrait.size-lg .xcs-hofcard-portrait-frame {
  /* sized via the inner block */
}
.xcs-hofcard-portrait-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.xcs-hofcard-portrait.size-lg .xcs-hofcard-portrait-inner {
  width: 110px;
  height: 110px;
}
.xcs-hofcard-portrait-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xcs-hofcard-portrait-initials {
  font-size: 32px;
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.xcs-hofcard-portrait.size-lg .xcs-hofcard-portrait-initials {
  font-size: 40px;
}

/* Name panel */
.xcs-hofcard-name-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  margin-bottom: 12px;
}
.xcs-hofcard-name {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.01em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.xcs-hofcard.is-first .xcs-hofcard-name {
  font-size: 17px;
}

/* Stat panel */
.xcs-hofcard-stat-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--hof-tier-color) 12%, #0F172A 88%) 0%,
      #0F172A 100%);
  border: 1px solid color-mix(in srgb, var(--hof-tier-color) 30%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.xcs-hofcard-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(241, 245, 249, 0.55);
  text-align: center;
  margin-bottom: 4px;
}
.xcs-hofcard-stat-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.xcs-hofcard-stat-icon {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.xcs-hofcard-stat-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 800;
  color: var(--hof-tier-bright);
  text-shadow: 0 0 12px color-mix(in srgb, var(--hof-tier-color) 50%, transparent);
}
.xcs-hofcard.is-first .xcs-hofcard-stat-num {
  font-size: 26px;
}

/* Footer decoration */
.xcs-hofcard-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(241, 245, 249, 0.4);
}
.xcs-hofcard-footer-deco {
  color: var(--hof-tier-color);
  font-size: 10px;
}

/* ─── REST (rank 4-5) — slim cards below podium ──────────────────── */
.xcs-halloffame-rest {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.xcs-hofrest-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border: 1.5px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  color: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-align: left;
}
.xcs-hofrest-card:hover {
  transform: translateY(-2px);
  border-color: rgba(148, 163, 184, 0.5);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.5);
}
.xcs-hofrest-rank {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 800;
  color: rgba(148, 163, 184, 0.8);
  min-width: 32px;
  text-align: center;
}
.xcs-hofrest-card .xcs-hofcard-portrait-inner {
  width: 44px;
  height: 44px;
}
.xcs-hofrest-card .xcs-hofcard-portrait-initials {
  font-size: 18px;
}
.xcs-hofrest-card .xcs-hofcard-portrait-frame {
  padding: 2px;
  background: linear-gradient(135deg, #94A3B8, #64748B);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.xcs-hofrest-info {
  flex: 1;
  min-width: 0;
}
.xcs-hofrest-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.xcs-hofrest-amount {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--xcs-yellow);
}
.xcs-hofrest-amount-icon { font-size: 13px; }

/* ─── MOBILE — podium stacks, cards shrink ───────────────────────── */
@media (max-width: 640px) {
  .xcs-halloffame {
    margin: 16px 8px;
    padding: 20px 8px 16px;
  }
  .xcs-halloffame-title { font-size: 22px; }
  .xcs-halloffame-eyebrow { font-size: 9px; padding: 5px 12px; }
  .xcs-halloffame-sub { font-size: 11px; }
  /* MOBILE: tetap 3 kolom side-by-side, jangan stack ke bawah.
     Compress cards drastis tapi tetap visible. */
  .xcs-halloffame-podium {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    max-width: 100%;
    padding: 0 2px;
  }
  .xcs-hofcard {
    min-height: 200px;
    padding: 10px 6px 8px;
    border-width: 2px;
    border-radius: 12px;
  }
  .xcs-hofcard.is-first {
    min-height: 220px;
    transform: translateY(-4px);  /* keep #1 lifted */
  }
  /* Smaller portraits + text on mobile podium */
  .xcs-hofcard-portrait-inner {
    width: 44px;
    height: 44px;
    border-width: 2px;
  }
  .xcs-hofcard-portrait.size-lg .xcs-hofcard-portrait-inner {
    width: 54px;
    height: 54px;
  }
  .xcs-hofcard-portrait-initials { font-size: 16px; }
  .xcs-hofcard.is-first .xcs-hofcard-portrait-initials { font-size: 20px; }
  .xcs-hofcard-name { font-size: 11px; line-height: 1.2; }
  .xcs-hofcard.is-first .xcs-hofcard-name { font-size: 12px; }
  .xcs-hofcard-stat-label { font-size: 7px; letter-spacing: 0.04em; }
  .xcs-hofcard-stat-num { font-size: 13px; }
  .xcs-hofcard.is-first .xcs-hofcard-stat-num { font-size: 15px; }
  .xcs-hofcard-stat-panel { padding: 4px 6px; }
  .xcs-hofcard-stat-icon { font-size: 11px; }
  .xcs-hofcard-rank-badge {
    padding: 2px 5px;
    top: 6px; left: 6px;
    border-width: 1px;
  }
  .xcs-hofcard-rank-num { font-size: 9px; }
  .xcs-hofcard-rank-medal { font-size: 9px; }
  .xcs-hofcard-tier-label {
    font-size: 7px;
    padding: 2px 6px;
    top: 6px; right: 6px;
  }
  .xcs-hofcard-crown {
    font-size: 18px;
    top: -10px;
  }
  .xcs-hofcard-footer {
    font-size: 7px;
    padding-top: 6px;
    gap: 4px;
  }
  .xcs-hofcard-footer-deco { font-size: 8px; }

  /* Disable heavy animations on mobile to save battery + GPU */
  .xcs-hofcard.tier-gold {
    animation: none;
  }
  .xcs-hofcard-foil {
    display: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .xcs-halloffame-sparkles span,
  .xcs-hofcard.tier-gold,
  .xcs-hofcard-foil,
  .xcs-hofcard-crown {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * HOF CARD: Meet Us-style background support
 *
 * Each HOF card now mirrors the user's Meet Us profile card background:
 * same theme colors (forest, ocean, winter, etc.) OR custom image bg
 * (image_url from shop item.style).
 *
 * The HOF wrapper applies bg via these classes (inherited from regular
 * .xcs-tcard-bg-* classes). We just need to make sure tier border and
 * tier glow still stand out over the user's bg.
 * ════════════════════════════════════════════════════════════════════ */

/* When HOF card has a custom bg image, dim it slightly so name/stats
   stay readable over busy images. Plus add a subtle inner overlay
   that keeps the bottom panel (stat panel) legible. */
.xcs-hofcard.xcs-tcard-bg-image {
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.85) 100%),
              var(--card-bg-image) center/cover no-repeat;
}

/* When HOF card has a CSS theme bg (forest/winter/ocean/etc), give it
   a darker overlay so text stays readable */
.xcs-hofcard.xcs-tcard-bg {
  position: relative;
}
.xcs-hofcard.xcs-tcard-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.7) 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
/* All inner content must sit above the overlay */
.xcs-hofcard.xcs-tcard-bg > * {
  position: relative;
  z-index: 1;
}

/* Card name/stat panel readability when over busy bg image:
   Add semi-transparent backdrop behind name + stat panels */
.xcs-hofcard.xcs-tcard-bg-image .xcs-hofcard-name-panel,
.xcs-hofcard.xcs-tcard-bg .xcs-hofcard-name-panel {
  background: rgba(15, 23, 42, 0.55);
  padding: 6px 10px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.xcs-hofcard.xcs-tcard-bg-image .xcs-hofcard-stat-panel,
.xcs-hofcard.xcs-tcard-bg .xcs-hofcard-stat-panel {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Tier border glow stays prominent over any bg (already set via tier-X classes) */