:root {
  --bg: #FFE3F1;
  --bg-deep: #FFC9E4;
  --card: #FFFFFF;
  --ink: #5A1740;
  --berry: #7A1F55;
  --hot: #FF4FA3;
  --hot-dark: #E8348A;
  --bubblegum: #FF9EDB;
  --lilac: #C64FFF;
  --gold: #FFD65C;
  --gold-glow: #FFEB99;
  --line: #FFD1EC;

  --r-common: #F6C9E6;
  --r-uncommon: #FF9EDB;
  --r-rare: #FF4FA3;
  --r-epic: #C64FFF;
  --r-legendary: #FFD65C;
  --r-postcard: #FF7FA8;

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, sans-serif;

  --radius: 20px;
  --shadow: 0 8px 24px rgba(255, 79, 163, 0.18);
  --card-art-position: 0%;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 15% 10%, #FFF0F8 0%, transparent 45%),
    radial-gradient(circle at 85% 0%, #FFD6EE 0%, transparent 50%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  min-height: 100vh;
}

h1, h2, .brand-name, .btn, .tab {
  font-family: var(--font-display);
}

button { font-family: inherit; cursor: pointer; border: none; }
a { color: inherit; }

/* ambient sparkles */
.sparkle-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.sparkle-field::before, .sparkle-field::after {
  content: "✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧";
  position: absolute;
  width: 200%;
  left: -50%;
  color: rgba(255, 255, 255, 0.55);
  font-size: 22px;
  letter-spacing: 60px;
  opacity: 0.5;
}
.sparkle-field::before { top: 8%; animation: drift 40s linear infinite; }
.sparkle-field::after { top: 70%; color: rgba(255, 214, 92, 0.35); animation: drift 55s linear infinite reverse; }
@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.brand-mark { font-size: 26px; }
.brand-logo {
  width: 100px;
  height: auto;
}

.tabs {
  display: flex;
  gap: 6px;
  background: var(--line);
  padding: 4px;
  border-radius: 999px;
}
.tab {
  padding: 9px 20px;
  border-radius: 999px;
  background: transparent;
  color: var(--berry);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
.tab.active {
  background: var(--hot);
  color: white;
  box-shadow: 0 4px 10px rgba(255, 79, 163, 0.4);
}

.profile-bar { display: flex; align-items: center; gap: 12px; }
.balance-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--gold-glow), var(--gold));
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: #6B4E00;
  box-shadow: 0 3px 8px rgba(255, 214, 92, 0.5);
}
.greeting { font-weight: 600; font-size: 14px; color: var(--berry); }
.claim-btn {
  background: white;
  color: var(--hot-dark);
  border: 2px solid var(--hot);
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}
.claim-btn:hover { background: var(--hot); color: white; }
.claim-btn:disabled { opacity: 0.5; cursor: default; background: white; color: var(--hot-dark); }

.mute-btn {
  background: white;
  border: 2px solid var(--line);
  color: var(--berry);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mute-btn:hover { border-color: var(--hot); }

.name-form { display: flex; gap: 8px; align-items: center; }
.name-form input {
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  outline: none;
  background: white;
}
.name-form input:focus { border-color: var(--hot); }

/* main / views */
main { position: relative; z-index: 1; padding: 32px; max-width: 1200px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

.view-heading { margin-bottom: 24px; }
.view-heading h1 {
  margin: 0 0 6px;
  font-size: 30px;
  color: var(--berry);
}
.view-heading p { margin: 0; color: var(--hot-dark); font-weight: 600; }

.completion-bar-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  max-width: 480px;
}
.completion-bar-track {
  flex: 1;
  height: 16px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(90,23,64,0.12);
}
.completion-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hot), var(--gold));
  border-radius: 999px;
  transition: width 0.5s ease;
}
.completion-bar-text {
  font-weight: 700;
  font-size: 14px;
  color: var(--berry);
  white-space: nowrap;
}

/* pack grid */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}

.pack-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 0 0 20px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  border: 2px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pack-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(255, 79, 163, 0.28);
}
.pack-image-wrap {
  width: 100%;
  aspect-ratio: 5/7;
  background: var(--pack-color, var(--bubblegum));
  overflow: hidden;
}
.pack-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.70));
  transition: transform .25s ease, filter .25s ease;
}

.pack-card:hover .pack-image-wrap img {
  transform: translateY(-6px);
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.35));
}
.pack-card-body { padding: 16px 22px 0; }
.pack-card h3 {
  margin: 0 0 4px;
  font-size: 19px;
  color: var(--berry);
}
.pack-card .pack-desc {
  font-size: 13px;
  color: #9B4A78;
  margin: 0 0 14px;
  min-height: 34px;
}
.pack-footer, .pack-odds { padding-left: 22px; padding-right: 22px; }
.pack-odds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.odds-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: white;
}
.pack-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pack-purchase-footer {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 8px;
}
.pack-purchase-footer .pack-price { grid-column: 1 / -1; }
.pack-purchase-footer .btn { width: 100%; padding-right: 12px; padding-left: 12px; }
.pack-info-button {
  border: 1px solid rgba(198,79,255,.24);
  color: var(--hot-dark);
  background: linear-gradient(180deg, #fff, #fff0f8);
  box-shadow: 0 4px 10px rgba(122,31,85,.1);
}
.pack-info-button:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(122,31,85,.16); }
.pack-price {
  font-weight: 700;
  color: var(--berry);
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn {
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  color: white;
  box-shadow: 0 6px 14px rgba(198, 79, 255, 0.35);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.03); }
.btn-primary:disabled {
  background: #E8D6E2;
  color: #B08AA3;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* inventory */
.theme-sections { display: flex; flex-direction: column; gap: 40px; }

/* merge tab */
.merge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.merge-card {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  border: 2px solid var(--rarity-color, var(--line));
  box-shadow: 0 6px 16px rgba(255, 79, 163, 0.12);
}
.merge-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.merge-card .rarity-tag { background: var(--rarity-color, var(--bubblegum)); }
.merge-chance {
  font-size: 11px;
  font-weight: 700;
  color: var(--hot-dark);
}
.merge-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--berry);
  margin-bottom: 10px;
}
.merge-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  color: white;
  font-weight: 700;
  font-size: 13px;
  padding: 10px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(198, 79, 255, 0.3);
}
.merge-btn:disabled {
  background: #E8D6E2;
  color: #B08AA3;
  box-shadow: none;
  cursor: not-allowed;
}
.merge-btn:not(:disabled):hover { transform: translateY(-1px); }
.merge-disabled-note {
  font-size: 11px;
  color: #C48AAE;
  text-align: center;
  margin-top: 6px;
}

.merge-result-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  margin-bottom: 24px;
  animation: revealPop 0.4s ease forwards;
}
.merge-result-banner.success {
  background: linear-gradient(135deg, #FFF6D8, #FFE9A8);
  border: 2px solid var(--gold);
}
.merge-result-banner.fail {
  background: #FFF0F5;
  border: 2px solid var(--line);
}
.merge-result-thumb {
  width: 52px; height: 73px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(90, 23, 64, 0.2);
}
.merge-result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.merge-result-text { font-weight: 700; color: var(--berry); font-size: 14px; }
.merge-result-text span { display: block; font-weight: 500; font-size: 12px; color: #9B4A78; margin-top: 2px; }

.theme-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.theme-thumb {
  width: 52px; height: 73px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(90, 23, 64, 0.2);
}
.theme-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-title-group { flex: 1; min-width: 180px; }
.theme-title-group h2 {
  margin: 0;
  font-size: 20px;
  color: var(--berry);
}
.theme-progress-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--hot-dark);
}
.progress-track {
  width: 160px;
  height: 10px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hot), var(--lilac));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 18px;
}

.item-card.locked {
  cursor: default;
  border-color: var(--line);
  background: #FFF3FA;
  opacity: 0.75;
}
.item-card.locked:hover { transform: none; }
.item-card.locked .item-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, #FFE6F2, #FFE6F2 10px, #FFD6EC 10px, #FFD6EC 20px);
}
.item-card.locked .item-image-wrap span { font-size: 34px; opacity: 0.5; }
.item-card.locked .item-name { color: #C48AAE; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--hot-dark);
  font-weight: 600;
}

/* item card (shared: reveal + inventory) */
.item-card {
  background: var(--card);
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border: 2px solid var(--rarity-color, var(--line));
  box-shadow: 0 6px 16px rgba(255, 79, 163, 0.15);
  transition: transform 0.2s ease;
  overflow: hidden;
}
.item-card:hover { transform: translateY(-4px) rotate(-0.5deg); }
.item-card.legendary {
  box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgba(255, 214, 92, 0.55);
  animation: pulseGold 2.2s ease-in-out infinite;
}
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 8px 22px rgba(255, 214, 92, 0.45); }
  50% { box-shadow: 0 0 0 3px var(--gold), 0 10px 30px rgba(255, 214, 92, 0.8); }
}

/* Postcard is the premium personal-photo rarity. Warm paper, blush and gold
   replace the old rainbow treatment while keeping the pull visually special. */
.item-card.postcard {
  box-shadow:
    0 0 0 2px #FF7FA8,
    0 0 18px 4px rgba(255, 127, 168, 0.48),
    0 0 34px 8px rgba(255, 214, 92, 0.30);
  animation: pulsePostcard 1.8s ease-in-out infinite;
}
@keyframes pulsePostcard {
  0%, 100% { box-shadow: 0 0 0 2px #FF7FA8, 0 0 18px 4px rgba(255, 127, 168, 0.44), 0 0 34px 8px rgba(255, 214, 92, 0.26); }
  50% { box-shadow: 0 0 0 3px #FFD65C, 0 0 24px 6px rgba(255, 127, 168, 0.62), 0 0 42px 11px rgba(255, 238, 196, 0.48); }
}
.item-card.postcard .rarity-tag,
.merge-card.postcard .rarity-tag,
.detail-card .rarity-tag.postcard,
.odds-chip.postcard {
  background: linear-gradient(100deg, #FF7FA8, #FFD6E4, #FFF0C7, #FFD65C, #FF7FA8) !important;
  color: #7A1F55;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  background-size: 220% 100%;
  animation: postcardTagShift 3s ease-in-out infinite;
}
@keyframes postcardTagShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* The shine-sweep is decorative — must sit BEHIND the card art, not in
   front of it. pointer-events:none so it can't intercept hover either.
   The art/image-wrap stack above it with explicit z-index. */
.item-card::after {
  content: "";
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: rotate(20deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 0;
}
.item-card:hover::after { left: 120%; }
/* Push the actual card content above the shine so it never paints over
   the art (which was the white-mask look on rare+ pulls). */
.item-card > * { position: relative; z-index: 1; }
/* Hide the hover-shine on reveal-stage cards. The 200%-tall ::after bar
   leaks past the card's bottom edge during the 3D flip rotation — the
   preserve-3d context on .reveal-inner defeats overflow:hidden in some
   browsers, so the bar shows up as a white shape below the card. The
   shine is an inventory hover effect and doesn't belong on a card the
   player is clicking to flip anyway. */
.reveal-face-front .item-card::after { display: none; }

.item-image-wrap {
  width: 100%;
  aspect-ratio: 5/7;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--line);
}
.item-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--card-art-position); display: block; }

.item-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--berry); margin: 2px 0; }
.item-handle { font-size: 10px; font-weight: 700; color: var(--hot-dark); margin: -2px 0 4px; }
.rarity-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 999px;
  color: white;
  background: var(--rarity-color, var(--bubblegum));
}
.catalog-no { font-size: 9px; color: #B08AA3; margin-top: 4px; font-weight: 700; }
.count-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--berry);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 7px;
  z-index: 2;
}

/* overlays */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(90, 23, 64, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.overlay.active { display: flex; }

.open-stage {
  background: linear-gradient(180deg, #FFF6FB, #FFE9F5);
  border-radius: 28px;
  padding: 36px;
  max-width: 880px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(90, 23, 64, 0.4);
  position: relative;
  overflow: hidden;
}
.open-stage.shake { animation: screenShake 0.5s ease; }
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 4px); }
  40% { transform: translate(7px, -5px); }
  60% { transform: translate(-6px, -3px); }
  80% { transform: translate(5px, 4px); }
}

.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 8px; height: 14px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}
.confetti-piece.postcard-piece {
  width: 12px;
  height: 18px;
  border-radius: 3px;
  animation: confettiFallPostcard 1.8s linear forwards, hueSpin 0.8s linear infinite;
}
@keyframes hueSpin {
  to { filter: hue-rotate(360deg); }
}
@keyframes confettiFall {
  to { transform: translateY(480px) rotate(540deg); opacity: 0; }
}
@keyframes confettiFallPostcard {
  to { transform: translateY(520px) rotate(720deg); opacity: 0; }
}

.suspense-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
}
.suspense-pack {
  width: 200px;
  aspect-ratio: 5/7;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(255, 79, 163, 0.45);
  animation: packIdle 1.4s ease-in-out infinite;
}
.suspense-pack img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suspense-pack.shaking { animation: packShake 0.28s ease-in-out infinite; }
@keyframes packIdle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.03) rotate(-1deg); }
}
@keyframes packShake {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1.05); }
  25% { transform: translate(-6px,2px) rotate(-3deg) scale(1.05); }
  50% { transform: translate(6px,-2px) rotate(3deg) scale(1.08); }
  75% { transform: translate(-4px,-3px) rotate(-2deg) scale(1.05); }
}
.suspense-hint {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--berry);
  font-size: 16px;
  animation: hintPulse 1.4s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.open-title { font-family: var(--font-display); font-size: 22px; color: var(--berry); margin-bottom: 20px; }
.reveal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 24px;
  min-height: 270px;
}
.reveal-hint {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--hot-dark);
  margin-bottom: 12px;
  min-height: 18px;
  animation: hintPulse 1.4s ease-in-out infinite;
}
.reveal-hint:empty { display: none; }

/* Flip card container — handles 3D rotation.
   position:relative so the ::after glow layer can position against it. */
.reveal-card {
  width: 180px;
  perspective: 1200px;
  /* The premium pack-opening sequence owns the card entrance animation.
     Keeping revealPop here caused it to restart when cards-emerging was
     removed, making every card shrink and grow a second time. */
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: none;
  cursor: pointer;
  position: relative;
}
@keyframes revealPop {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.reveal-card.flipped .reveal-inner { transform: rotateY(180deg); }
.reveal-card.flipped { cursor: zoom-in; }

/* The inner wrapper that actually does the Y-axis rotation.
   preserve-3d keeps both faces real 3D planes; backface-visibility:hidden
   on each face means we only see whichever side is facing us. */
.reveal-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 5/7;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.2,.8,.3,1);
  border-radius: 16px;
}
.reveal-inner > .reveal-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
}
/* Face-down: glossy pack-art-style back with a centered emblem */
.reveal-face-back {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.55), transparent 50%),
    linear-gradient(135deg, var(--hot) 0%, var(--lilac) 60%, var(--gold) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 16px rgba(255, 79, 163, 0.25),
    inset 0 0 0 3px rgba(255, 255, 255, 0.5),
    inset 0 0 24px rgba(255, 255, 255, 0.25);
}
.reveal-face-back::after {
  content: "?";
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 8px rgba(90, 23, 64, 0.45);
  animation: questionPulse 1.6s ease-in-out infinite;
}
@keyframes questionPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1; }
}
/* Face-up: the actual item card. Rotated 180° so when inner flips, this faces camera.
   overflow MUST be visible here — combining overflow:hidden with a 3D transform and
   backface-visibility:hidden breaks the backface hiding in browsers, letting the
   white item-card show through behind the face-down "?" card before the player
   clicks. The item-card inside has its own overflow:hidden + matching border-radius,
   so we don't lose any clipping by dropping it on the face itself. */
.reveal-face-front {
  transform: rotateY(180deg);
  overflow: visible;
}
/* Hold the art in the front face — these classes already style the card,
   we just want to fill the 5:7 inner box. */
.reveal-face-front .item-card {
  /* inset:0 is more reliable than width/height:100% inside a preserve-3d
     context — percentage heights can fail to resolve when the parent's
     height comes from aspect-ratio, letting the card grow to fit its
     content and the 2px rarity border spill past the front face. */
  position: absolute;
  inset: 0;
  border-width: 0;
  border-radius: 16px;
  padding: 8px;
  box-shadow: none;
  background: var(--card);
  border: 2px solid var(--rarity-color, var(--line));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.reveal-face-front .item-image-wrap {
  flex: 1;
  min-height: 0;
  margin-bottom: 4px;
  aspect-ratio: auto;
  border-radius: 8px;
}
.reveal-face-front .item-image-wrap img { height: 100%; object-fit: cover; object-position: center var(--card-art-position); }
.reveal-face-front .item-name { font-size: 12px; line-height: 1.15; flex-shrink: 0; margin: 0; }
.reveal-face-front .item-handle { font-size: 10px; flex-shrink: 0; margin: 0; }
.reveal-face-front .rarity-tag {
  display: inline-block;
  font-size: 8px;
  padding: 2px 7px;
  flex-shrink: 0;
  align-self: center;
  margin-top: 3px;
  letter-spacing: 0.4px;
}

/* Rare+ flips land BIG — a moment of emphasis while the art reveals.
   The glow is a box-shadow on a ::before pseudo on the outer .reveal-card.
   Pseudos are siblings of .reveal-inner, not ancestors, so the preserve-3d
   context survives (the earlier "front face becomes back" bug was caused
   by putting filter/box-shadow on an ancestor of the rotating element).
   The glow is animated to fade out so it never becomes a permanent halo
   behind the card. */
.reveal-card {
  position: relative;
}

.reveal-card::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  filter: blur(12px);
  transition: opacity 0.25s ease;
}

/* Hover glow before reveal */
.reveal-card[data-rarity="rare"]:hover::before {
  opacity: 1;
  background: rgba(255, 79, 163, 0.7);
}

.reveal-card[data-rarity="epic"]:hover::before {
  opacity: 1;
  background: rgba(198, 79, 255, 0.8);
}

.reveal-card[data-rarity="legendary"]:hover::before {
  opacity: 1;
  background: rgba(255, 214, 92, 0.9);
}

.reveal-card[data-rarity="postcard"]:hover::before {
  opacity: 1;
  background: linear-gradient(
    45deg,
    #FF4FA3,
    #C64FFF,
    #7AB8FF,
    #FFD65C
  );
}

/* Reveal flash */
.reveal-card.flipped.flip-rare::before {
  animation: revealGlow 1.8s ease-out forwards;
  background: rgba(255,79,163,0.8);
}

.reveal-card.flipped.flip-epic::before {
  animation: revealGlow 1.8s ease-out forwards;
  background: rgba(198,79,255,0.8);
}

.reveal-card.flipped.flip-legendary::before {
  animation: revealGlow 2s ease-out forwards;
  background: rgba(255,214,92,0.9);
}

.reveal-card.flipped.flip-postcard::before {
  animation: revealGlow 2s ease-out forwards;
  background: linear-gradient(
    45deg,
    #FF4FA3,
    #C64FFF,
    #7AB8FF,
    #FFD65C
  );
}

@keyframes revealGlow {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  30% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.detail-card {
  background: white;
  border-radius: 22px;
  padding: 26px;
  max-width: 300px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(90, 23, 64, 0.4);
}
#detailOverlay {
  z-index: 120;
}
.detail-card .detail-image-wrap {
  width: 100%;
  aspect-ratio: 5/7;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
}
.detail-card .detail-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--card-art-position); display: block; }
.detail-card h2 { margin: 0 0 4px; color: var(--berry); }
.detail-card .detail-handle { margin: -6px 0 10px; color: var(--hot-dark); font-weight: 700; font-size: 13px; }
.detail-card p { margin: 4px 0; color: #9B4A78; font-weight: 600; font-size: 13px; }
.detail-card .detail-desc { font-style: italic; font-weight: 500; color: var(--berry); margin-top: 10px; line-height: 1.4; }
.detail-close {
  margin-top: 14px;
  background: var(--line);
  color: var(--berry);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  main { padding: 20px; }
  .view-heading h1 { font-size: 24px; }
}

/* Age verification gate */
.age-gate { z-index: 100; background: rgba(90, 23, 64, 0.55); backdrop-filter: blur(6px); }
.age-gate-card {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, #FFF0F8 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, #FFD6EE 0%, transparent 55%),
    #FFFFFF;
  border-radius: 28px;
  padding: 38px 36px 30px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(90, 23, 64, 0.45);
  border: 2px solid var(--line);
  animation: ageGatePop 0.5s cubic-bezier(.2,.9,.3,1.3) forwards;
  overflow: hidden;
}
@keyframes ageGatePop {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.age-gate-sparkles {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  color: rgba(255, 79, 163, 0.35);
  font-size: 18px;
  letter-spacing: 12px;
  pointer-events: none;
}
.age-gate-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(198, 79, 255, 0.35);
  margin-bottom: 14px;
}
.age-gate-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--berry);
  margin: 0 0 10px;
}
.age-gate-text {
  color: var(--berry);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.age-gate-text strong {
  color: var(--hot-dark);
  font-weight: 700;
}
.age-gate-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.age-gate-buttons .btn { font-size: 15px; padding: 12px 24px; min-width: 140px; }
.age-gate-no {
  background: white;
  color: var(--berry);
  border: 2px solid var(--line);
  box-shadow: 0 4px 10px rgba(90, 23, 64, 0.08);
}
.age-gate-no:hover { border-color: var(--hot); color: var(--hot-dark); transform: translateY(-2px); }
.age-gate-fineprint {
  margin: 18px 0 0;
  font-size: 11px;
  color: #B0748E;
  font-weight: 600;
}

.detail-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.sell-btn {
  background: #FFD65C;
  color: #5A1740;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.sell-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(255,214,92,.6);
}

.item-card.first-edition {
  border: 2px solid #E7B52E;
  box-shadow:
    0 0 0 1px rgba(255, 246, 184, .9),
    0 7px 20px rgba(189, 128, 0, .22);
}

.first-edition-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #9A6500;
  font-weight: 800;
}

.item-image-wrap,
.detail-image-wrap {
  position: relative;
}

/* Premium First Edition collector seal. It deliberately remains gold on
   every rarity, including Postcard, so the variant and rarity read separately. */
.first-edition-stamp {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 10px 6px 7px;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;

  background:
    radial-gradient(circle at 31% 22%, rgba(255,255,255,.95) 0 5%, transparent 18%),
    conic-gradient(from 215deg,
      #A96700 0deg,
      #FFE889 38deg,
      #C98C0A 88deg,
      #FFF5BA 145deg,
      #D59B15 205deg,
      #FFF0A0 265deg,
      #B87300 320deg,
      #A96700 360deg);
  border: 2px solid #FFF4B1;
  outline: 1px solid #9A6200;

  color: #654000;
  font-family: var(--font-display);
  font-size: 7.4px;
  font-weight: 800;
  line-height: .98;
  letter-spacing: .35px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);

  box-shadow:
    0 4px 8px rgba(67, 37, 0, .3),
    0 0 13px rgba(255, 214, 92, .62),
    inset 0 0 0 3px rgba(114, 68, 0, .22),
    inset 0 0 0 5px rgba(255, 247, 183, .72),
    inset 0 3px 5px rgba(255,255,255,.88),
    inset 0 -5px 7px rgba(112, 63, 0, .28);

  transform: rotate(-10deg);
}

/* Inner engraved ring and top star. */
.first-edition-stamp::before {
  content: "★";
  position: absolute;
  inset: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  border: 1px dashed rgba(103, 59, 0, .6);
  border-radius: 50%;
  color: #805000;
  font-size: 10px;
  line-height: 1;
  z-index: -1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
}

/* Slow foil reflection. */
.first-edition-stamp::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -110%;
  width: 18px;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  transform: rotate(28deg);
  animation: firstEditionShine 8.5s ease-in-out infinite;
  z-index: 2;
}

@keyframes firstEditionShine {
  0%, 76%, 100% { left: -110%; opacity: 0; }
  80% { opacity: .9; }
  89% { left: 145%; opacity: .75; }
  92% { opacity: 0; }
}

.rarity-tags {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Higher specificity plus !important prevents Postcard's animated rarity rule
   from recolouring the First Edition variant tag. */
.rarity-tag.first-edition-tag,
.item-card.postcard .rarity-tag.first-edition-tag,
.detail-card .rarity-tag.first-edition-tag {
  background: linear-gradient(135deg, #B97800 0%, #FFE889 28%, #FFD65C 55%, #FFF4B0 76%, #C78600 100%) !important;
  background-size: 180% 100% !important;
  color: #5A3900 !important;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.78);
  text-shadow: 0 1px 0 rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.65), 0 2px 5px rgba(135,84,0,.2);
  animation: firstEditionTagGleam 8.5s ease-in-out infinite !important;
}

@keyframes firstEditionTagGleam {
  0%, 76%, 100% { background-position: 0% 0; }
  90% { background-position: 100% 0; }
}

.pack-odds h4 {
  width: 100%;
  margin: 8px 0 6px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  opacity: 0.8;
}

.pack-odds-roll-note {
  width: 100%;
  margin-top: 3px;
  color: #8b4a72;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
}

.first-edition-preview {
  background: linear-gradient(135deg, #B97800, #FFE889 32%, #FFD65C 60%, #FFF4B0 82%, #C78600) !important;
  color: #5A3900 !important;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.8);
}
/* =====================================================================
   SATISFYING PACK OPENING FX
   Layered impact flashes, charge-up glow, reveal particles and rarity hits.
   ===================================================================== */
.open-stage::before,
.open-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}
.open-stage::before {
  background: radial-gradient(circle at center, rgba(255,255,255,.98) 0%, rgba(255,255,255,.5) 20%, transparent 58%);
  mix-blend-mode: screen;
}
.open-stage::after {
  inset: -25%;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(255,255,255,.55) 14%, transparent 17% 30%, rgba(255,255,255,.4) 32%, transparent 35% 100%);
  transform: scale(.7) rotate(0deg);
}
.open-stage.pack-charging {
  animation: stageCharge .72s ease-in-out infinite alternate;
}
.open-stage.pack-charging::before {
  opacity: .32;
  animation: chargePulse .28s ease-in-out infinite alternate;
}
.open-stage.pack-burst::before {
  animation: packFlash .46s ease-out forwards;
}
.open-stage.pack-burst::after {
  animation: radialBurst .64s cubic-bezier(.1,.75,.2,1) forwards;
}
@keyframes stageCharge {
  from { box-shadow: 0 24px 60px rgba(90,23,64,.4), inset 0 0 0 rgba(255,79,163,0); }
  to { box-shadow: 0 24px 75px rgba(198,79,255,.52), inset 0 0 48px rgba(255,79,163,.18); }
}
@keyframes chargePulse { from { transform: scale(.9); } to { transform: scale(1.08); } }
@keyframes packFlash {
  0% { opacity: 0; transform: scale(.65); }
  35% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes radialBurst {
  0% { opacity: 0; transform: scale(.55) rotate(0deg); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.65) rotate(38deg); }
}

.suspense-pack.charged {
  box-shadow:
    0 0 0 3px rgba(255,255,255,.8),
    0 0 28px 8px rgba(255,79,163,.55),
    0 0 60px 18px rgba(198,79,255,.3);
}
.suspense-pack.bursting {
  animation: packRip .42s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes packRip {
  0% { transform: scale(1.08) rotate(0deg); filter: brightness(1); opacity: 1; }
  35% { transform: scale(1.2) rotate(-3deg); filter: brightness(1.8) saturate(1.35); }
  100% { transform: scale(1.5) rotate(8deg); filter: brightness(2.6) blur(6px); opacity: 0; }
}

.reveal-card.flipping {
  z-index: 8;
}
.reveal-card.flipping .reveal-inner {
  transition-duration: .78s;
  transition-timing-function: cubic-bezier(.15,.82,.18,1.12);
}
.reveal-card.flipping-big {
  animation: revealLift .78s cubic-bezier(.16,.78,.2,1) both;
}
.reveal-card.landed {
  animation: cardLand .62s cubic-bezier(.2,.9,.24,1.25) both;
}
.reveal-card .first-edition-stamp {
  opacity: 0;
  transform: translate(28px, -34px) scale(.25) rotate(18deg);
}
.reveal-card.first-edition-hit .first-edition-stamp {
  animation: firstEditionImpact .82s cubic-bezier(.16,.9,.22,1.28) both;
}
@keyframes revealLift {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-18px) scale(1.12); }
  100% { transform: translateY(0) scale(1.02); }
}
@keyframes cardLand {
  0% { transform: translateY(-8px) scale(1.08); }
  45% { transform: translateY(5px) scale(.98); }
  72% { transform: translateY(-2px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes firstEditionImpact {
  0% { transform: translate(28px, -34px) scale(.25) rotate(18deg); opacity: 0; filter: brightness(2.3); }
  52% { transform: translate(-2px, 3px) scale(1.22) rotate(-13deg); opacity: 1; }
  72% { transform: translate(1px, -1px) scale(.94) rotate(-8deg); }
  88% { transform: translate(0, 0) scale(1.04) rotate(-11deg); }
  100% { transform: translate(0, 0) scale(1) rotate(-10deg); opacity: 1; filter: brightness(1); }
}

.open-stage.impact-flash::before {
  animation: rarityImpactFlash .58s ease-out forwards;
}
.open-stage.impact-heavy {
  animation: impactShake .5s cubic-bezier(.2,.8,.2,1);
}
/* Postcard reveal: a soft aurora beam rather than a full rectangular colour layer. */
.open-stage.impact-postcard::after {
  inset: -35% -65%;
  border-radius: 50%;
  background:
    linear-gradient(
      105deg,
      transparent 31%,
      rgba(255,79,163,.08) 36%,
      rgba(198,79,255,.42) 41%,
      rgba(92,224,255,.62) 47%,
      rgba(109,255,176,.44) 53%,
      rgba(255,214,92,.30) 58%,
      rgba(255,107,107,.10) 63%,
      transparent 69%
    );
  filter: blur(18px) saturate(1.25);
  mix-blend-mode: screen;
  animation: postcardLightSweep .95s cubic-bezier(.16,.72,.22,1) forwards;
}
.open-stage[data-impact="rare"]::before { background: radial-gradient(circle, rgba(255,79,163,.95), transparent 58%); }
.open-stage[data-impact="epic"]::before { background: radial-gradient(circle, rgba(198,79,255,.95), transparent 60%); }
.open-stage[data-impact="legendary"]::before { background: radial-gradient(circle, rgba(255,240,160,1), rgba(255,214,92,.55) 28%, transparent 62%); }
.open-stage[data-impact="postcard"]::before { background: radial-gradient(circle, white 0%, rgba(255,255,255,.9) 12%, rgba(92,224,255,.48) 34%, rgba(198,79,255,.32) 48%, transparent 68%); }
@keyframes rarityImpactFlash {
  0% { opacity: 0; transform: scale(.55); }
  18% { opacity: .96; }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes impactShake {
  0%,100% { transform: translate(0) scale(1); }
  18% { transform: translate(-7px, 3px) scale(1.008); }
  34% { transform: translate(8px, -4px) scale(1.012); }
  50% { transform: translate(-5px, -3px) scale(1.006); }
  68% { transform: translate(4px, 2px); }
}
@keyframes postcardLightSweep {
  0% { opacity: 0; transform: translateX(-34%) rotate(-7deg) scale(.78); }
  18% { opacity: .88; }
  58% { opacity: .58; }
  100% { opacity: 0; transform: translateX(34%) rotate(7deg) scale(1.08); }
}

.reveal-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 12;
  box-shadow: 0 0 8px currentColor;
  animation: revealParticleBurst .9s cubic-bezier(.12,.7,.16,1) forwards;
}
.reveal-particle:nth-of-type(3n) { border-radius: 2px; width: 6px; height: 13px; }
.reveal-particle.particle-legendary { box-shadow: 0 0 12px #FFD65C; }
.reveal-particle.particle-postcard { box-shadow: 0 0 14px rgba(255,255,255,.85); }
@keyframes revealParticleBurst {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(.1) rotate(var(--particle-rotate)); }
}

.open-stage.all-revealed {
  animation: allRevealedGlow 1.15s ease-out both;
}
#closeOverlayBtn.ready {
  animation: readyButtonPop .75s cubic-bezier(.2,.9,.2,1.3) both, readyButtonGlow 1.5s ease-in-out .75s infinite;
}
@keyframes allRevealedGlow {
  0% { box-shadow: 0 24px 60px rgba(90,23,64,.4); }
  35% { box-shadow: 0 24px 80px rgba(255,79,163,.6), inset 0 0 45px rgba(255,214,92,.18); }
  100% { box-shadow: 0 24px 60px rgba(90,23,64,.4); }
}
@keyframes readyButtonPop {
  0% { transform: scale(.65); opacity: .4; }
  55% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes readyButtonGlow {
  0%,100% { box-shadow: 0 6px 14px rgba(198,79,255,.35); }
  50% { box-shadow: 0 8px 26px rgba(255,79,163,.62), 0 0 0 4px rgba(255,255,255,.5); }
}

@media (prefers-reduced-motion: reduce) {
  .open-stage.pack-charging,
  .suspense-pack.shaking,
  .reveal-card.flipping-big,
  .reveal-card.landed,
  #closeOverlayBtn.ready { animation: none !important; }
  .reveal-particle { display: none; }
}


/* =====================================================================
   SMOOTH REVEAL PATCH
   Keep the outer card completely stable during flips. Earlier versions
   replaced its entry animation with lift/landing animations, producing
   visible scale jumps and pulsing, especially on common/uncommon cards.
   ===================================================================== */
.reveal-card.flipping-big,
.reveal-card.landed {
  animation: none !important;
  transform: translateY(0) scale(1) !important;
}

/* Collection cards may pulse forever, but a card being revealed should
   remain visually stable after it turns over. The one-shot impact glow,
   particles, flash, sound and confetti still provide the rarity payoff. */
.reveal-face-front .item-card.legendary,
.reveal-face-front .item-card.postcard {
  animation: none !important;
}

/* Use a clean, GPU-friendly flip without overshooting past 180 degrees. */
.reveal-card.flipping .reveal-inner,
.reveal-inner {
  transition: transform 0.68s cubic-bezier(.22,.72,.24,1) !important;
  will-change: transform;
}

/* Avoid animating the entire stage and cards simultaneously on impacts.
   Flash and particle effects remain, but the layout itself stays steady. */
.open-stage.impact-heavy {
  animation: none !important;
}

/* Prevent hover transforms from competing with a card currently flipping. */
.reveal-card.flipping,
.reveal-card.flipped {
  transform: translateY(0) scale(1) !important;
}

/* =====================================================================
   HOLOGRAPHIC CARD VARIANT
   Separate collectible variant with an animated foil layer and cool-toned tag.
   ===================================================================== */
.item-card.holographic {
  border-color: #8eeaff;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.8),
    0 0 16px rgba(92,224,255,.55),
    0 8px 24px rgba(198,79,255,.28);
}

.holographic-foil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: .68;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.9) 0 2%, transparent 12%),
    radial-gradient(circle at 78% 72%, rgba(118,244,255,.72) 0 3%, transparent 18%),
    linear-gradient(112deg,
      transparent 0%,
      rgba(63,124,255,.2) 12%,
      rgba(255,91,210,.48) 25%,
      rgba(92,224,255,.88) 38%,
      rgba(255,255,255,.96) 48%,
      rgba(142,125,255,.76) 58%,
      rgba(109,255,176,.58) 70%,
      rgba(255,214,92,.42) 82%,
      transparent 100%),
    repeating-linear-gradient(132deg,
      rgba(255,255,255,.24) 0 1px,
      transparent 1px 6px);
  background-size: 160% 160%, 170% 170%, 260% 220%, 14px 14px;
  background-position: 0% 0%, 100% 100%, 0% 55%, 0 0;
  filter: saturate(1.35) contrast(1.08) brightness(1.08);
  box-shadow: inset 0 0 22px rgba(142,234,255,.2);
  animation: holographicSweep 2.5s ease-in-out infinite;
}

@keyframes holographicSweep {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 0% 58%, 0 0;
    filter: saturate(1.3) contrast(1.06) brightness(1.04) hue-rotate(0deg);
  }
  45% {
    background-position: 75% 35%, 30% 65%, 100% 42%, 7px 7px;
    filter: saturate(1.65) contrast(1.12) brightness(1.28) hue-rotate(45deg);
  }
  62% {
    background-position: 100% 70%, 0% 20%, 78% 50%, 11px 11px;
    filter: saturate(1.5) contrast(1.1) brightness(1.16) hue-rotate(95deg);
  }
}


/* =====================================================================
   GOLD ETCHED HOLO
   A clean-art alternative to Gilded Holo. The photograph keeps its original
   colour while fine metallic linework and isolated glints move above it.
   ===================================================================== */
.item-card.gold-etched-holographic {
  border-color: #d9a528;
  box-shadow:
    0 0 0 2px rgba(255, 249, 213, .78),
    0 0 0 4px rgba(196, 135, 17, .25),
    0 0 16px 3px rgba(244, 185, 42, .3),
    0 9px 24px rgba(105, 62, 0, .18);
  animation: goldEtchedFramePulse 4.6s ease-in-out infinite;
}

.detail-image-wrap.gold-etched-holographic {
  box-shadow:
    0 0 0 2px rgba(255, 248, 204, .82),
    0 0 0 4px rgba(196, 135, 17, .25),
    0 0 18px 4px rgba(244, 185, 42, .3);
}

@keyframes goldEtchedFramePulse {
  0%, 100% {
    border-color: #c58a13;
    box-shadow:
      0 0 0 2px rgba(255, 246, 191, .7),
      0 0 0 4px rgba(184, 121, 7, .2),
      0 0 13px 2px rgba(232, 169, 27, .25),
      0 9px 24px rgba(105, 62, 0, .17);
  }
  52% {
    border-color: #ffed91;
    box-shadow:
      0 0 0 2px rgba(255, 254, 231, .9),
      0 0 0 4px rgba(225, 170, 42, .32),
      0 0 20px 4px rgba(255, 211, 83, .4),
      0 10px 26px rgba(105, 62, 0, .2);
  }
}

/* Remove the colour-shifted duplicate artwork used by normal Holo. Gold
   Etched keeps the original image untouched and draws only metallic marks. */
.gold-etched-holographic .holographic-art-copy,
.gold-etched-holographic .holographic-art-copy.holographic-art-ready {
  display: none !important;
}

.gold-etched-holographic .holographic-foil {
  opacity: .56;
  mix-blend-mode: screen;
  background:
    linear-gradient(112deg,
      transparent 0 34%,
      rgba(173, 105, 0, .12) 39%,
      rgba(255, 207, 73, .54) 45%,
      rgba(255, 255, 226, .92) 49%,
      rgba(255, 221, 119, .54) 54%,
      transparent 64% 100%),
    repeating-linear-gradient(118deg,
      transparent 0 18px,
      rgba(255, 210, 86, .26) 19px,
      rgba(255, 247, 195, .42) 20px,
      transparent 21px 41px),
    repeating-linear-gradient(28deg,
      transparent 0 27px,
      rgba(190, 126, 10, .12) 28px,
      rgba(255, 231, 142, .25) 29px,
      transparent 30px 58px),
    radial-gradient(circle at 50% 50%, rgba(255, 246, 193, .78) 0 1px, transparent 2.7px),
    radial-gradient(ellipse at center, transparent 48%, rgba(220, 158, 30, .1) 100%);
  background-size: 330% 100%, 46px 46px, 64px 64px, 73px 67px, 100% 100%;
  background-position: -195% 50%, 0 0, 0 0, 7px 4px, 50% 50%;
  filter: none;
  box-shadow:
    inset 0 0 14px rgba(255, 207, 70, .13),
    inset 0 0 0 1px rgba(255, 237, 161, .12);
  animation: goldEtchedLineDrift 5.2s ease-in-out infinite;
}

.gold-etched-holographic .holographic-foil::before {
  opacity: .48;
  background: linear-gradient(108deg,
    transparent 34%,
    rgba(213, 151, 20, .12) 42%,
    rgba(255, 224, 118, .5) 47%,
    rgba(255, 255, 231, .92) 50%,
    rgba(255, 211, 76, .46) 54%,
    transparent 65%);
  filter: blur(.15px);
  animation: goldEtchedLightPass 5.2s ease-in-out infinite;
}

.gold-etched-holographic .holographic-foil::after {
  opacity: .48;
  background:
    radial-gradient(circle at 14% 17%, #fff5b1 0 1px, transparent 2.7px),
    radial-gradient(circle at 77% 21%, #fff 0 1px, transparent 2.5px),
    radial-gradient(circle at 46% 61%, #ffd76b 0 1.2px, transparent 2.9px),
    radial-gradient(circle at 88% 81%, #e4f7ff 0 1px, transparent 2.6px),
    radial-gradient(circle at 21% 86%, #ffe8a3 0 1px, transparent 2.6px);
  background-size: 53px 59px, 71px 67px, 79px 74px, 63px 73px, 77px 69px;
  animation: goldEtchedGlints 3.3s steps(2, end) infinite;
}

.reveal-card.holographic-hit .gold-etched-holographic .holographic-foil {
  animation:
    goldEtchedRevealBurst .95s ease-out both,
    goldEtchedLineDrift 5.2s .95s ease-in-out infinite;
}

@keyframes goldEtchedLineDrift {
  0%, 100% {
    opacity: .43;
    background-position: -195% 50%, 0 0, 0 0, 7px 4px, 50% 50%;
  }
  48% {
    opacity: .65;
    background-position: 42% 50%, 15px -10px, -12px 14px, 22px -5px, 50% 50%;
  }
  76% {
    opacity: .5;
    background-position: 170% 50%, 28px -19px, -23px 27px, 36px -12px, 50% 50%;
  }
}

@keyframes goldEtchedLightPass {
  0%, 18%, 100% { transform: translateX(-82%) rotate(3deg); opacity: .08; }
  52% { transform: translateX(3%) rotate(3deg); opacity: .56; }
  79% { transform: translateX(82%) rotate(3deg); opacity: .18; }
}

@keyframes goldEtchedGlints {
  0%, 100% { opacity: .22; filter: brightness(1); transform: translate(0, 0); }
  50% { opacity: .5; filter: brightness(1.35); transform: translate(1px, -1px); }
}

@keyframes goldEtchedRevealBurst {
  0% { opacity: 0; filter: brightness(2.4); transform: scale(1.045); }
  42% { opacity: .78; filter: brightness(1.65); transform: scale(1.012); }
  100% { opacity: .56; filter: brightness(1); transform: scale(1); }
}

.rarity-tag.gold-etched-holographic-tag,
.item-card.postcard .rarity-tag.gold-etched-holographic-tag,
.detail-card .rarity-tag.gold-etched-holographic-tag,
.gold-etched-holographic-preview {
  border: 1px solid rgba(255, 248, 203, .84);
  background:
    repeating-linear-gradient(118deg, transparent 0 9px, rgba(255,255,255,.24) 10px, transparent 11px 20px),
    linear-gradient(105deg, #825000 0%, #d99d1b 24%, #fff0a0 43%, #b97705 61%, #ffe596 81%, #8d5700 100%) !important;
  background-size: 42px 42px, 220% 100% !important;
  color: #523100 !important;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 2px 7px rgba(124, 73, 0, .2);
  animation: goldEtchedTagShift 5.2s ease-in-out infinite !important;
}

@keyframes goldEtchedTagShift {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 21px -10px, 100% 50%; }
}

.recent-pull-thumb.gold-etched-holographic {
  border-color: #d9a327;
  box-shadow: 0 0 0 1px rgba(255, 240, 147, .7), 0 0 11px rgba(222, 157, 18, .3);
}

.item-card.variant-locked.gold-etched-holographic .holographic-foil {
  opacity: .18;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.gold-etched-holographic,
  .gold-etched-holographic .holographic-foil,
  .gold-etched-holographic .holographic-foil::before,
  .gold-etched-holographic .holographic-foil::after,
  .gold-etched-holographic-tag,
  .gold-etched-holographic-preview {
    animation: none !important;
  }
}

/* Final colour grade: a distinctly blue sapphire-diamond identity. */
.item-card.gold-etched-holographic {
  border-color: #c9f7ff !important;
  background:
    radial-gradient(circle at 13% 3%, rgba(255,255,255,.98) 0 2%, transparent 18%),
    radial-gradient(circle at 91% 91%, rgba(50,157,255,.4) 0 3%, transparent 25%),
    conic-gradient(from 218deg at 52% 47%,
      #153b73 0deg,
      #4aaeff 26deg,
      #bcefff 54deg,
      #f8feff 85deg,
      #69c8ff 118deg,
      #235aa7 156deg,
      #d8f9ff 194deg,
      #2588e8 231deg,
      #8ce7ff 270deg,
      #315ec2 310deg,
      #e9fdff 360deg) !important;
  background-size: 180% 180%, 190% 190%, 230% 230% !important;
  animation: blueDiamondCardPulse 5.8s ease-in-out infinite !important;
  box-shadow:
    0 0 0 2px rgba(239,253,255,.96),
    0 0 0 4px rgba(48,164,255,.38),
    0 0 19px 4px rgba(42,176,255,.4),
    0 0 29px 6px rgba(58,104,255,.22),
    0 10px 26px rgba(14,47,95,.3) !important;
}

@keyframes blueDiamondCardPulse {
  0%, 100% {
    background-position: 0% 8%, 100% 94%, 0% 48%;
    filter: brightness(1) saturate(1.08);
    box-shadow:
      0 0 0 2px rgba(239,253,255,.94),
      0 0 0 4px rgba(48,164,255,.34),
      0 0 17px 3px rgba(42,176,255,.34),
      0 0 26px 5px rgba(58,104,255,.18),
      0 10px 26px rgba(14,47,95,.29);
  }
  52% {
    background-position: 78% 30%, 22% 70%, 100% 53%;
    filter: brightness(1.12) saturate(1.2);
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 4px rgba(124,221,255,.55),
      0 0 25px 6px rgba(45,192,255,.52),
      0 0 36px 8px rgba(52,110,255,.3),
      0 11px 28px rgba(14,47,95,.32);
  }
}

.item-card.first-edition.gold-etched-holographic::before,
.detail-image-wrap.first-edition.gold-etched-holographic::before {
  background: linear-gradient(112deg,
    #12386f 0%,
    #3da8ff 14%,
    #c8f5ff 29%,
    #ffffff 43%,
    #67d5ff 57%,
    #447bff 70%,
    #a8efff 84%,
    #173f7b 100%) !important;
  background-size: 240% 100% !important;
  filter: drop-shadow(0 0 5px rgba(82,202,255,.82)) !important;
}

.item-card.first-edition.gold-etched-holographic .item-image-wrap::before {
  background: linear-gradient(108deg,
    #173d75,
    #59baff 16%,
    #e5fbff 32%,
    #ffffff 47%,
    #72dbff 62%,
    #4e7dff 77%,
    #b9f3ff 89%,
    #173d75) !important;
  background-size: 230% 100% !important;
  filter: drop-shadow(0 0 4px rgba(75,196,255,.78)) !important;
}

.item-card.gold-etched-holographic .item-image-wrap {
  background: #163b70 !important;
  box-shadow:
    0 0 0 2px rgba(9,37,80,.78),
    0 0 0 4px rgba(205,247,255,.94),
    0 0 12px rgba(52,188,255,.58),
    0 5px 14px rgba(9,35,76,.38) !important;
}

.detail-image-wrap.gold-etched-holographic {
  border-color: #c9f7ff !important;
  box-shadow:
    0 0 0 2px rgba(244,254,255,.98),
    0 0 0 4px rgba(53,179,255,.5),
    0 0 24px 6px rgba(45,191,255,.48),
    0 0 34px 8px rgba(48,91,255,.24) !important;
}

.gold-etched-holographic .holographic-foil {
  background:
    linear-gradient(124deg,
      transparent 0 25%,
      rgba(42,160,255,.2) 31%,
      rgba(211,249,255,.82) 37%,
      rgba(255,255,255,.98) 40%,
      rgba(57,187,255,.5) 45%,
      transparent 54% 100%),
    repeating-linear-gradient(138deg,
      transparent 0 24px,
      rgba(85,201,255,.25) 25px,
      rgba(229,252,255,.55) 26px,
      transparent 27px 53px),
    repeating-linear-gradient(42deg,
      transparent 0 31px,
      rgba(39,142,255,.2) 32px,
      rgba(126,224,255,.34) 33px,
      transparent 34px 68px),
    conic-gradient(from 45deg at 50% 50%,
      transparent 0 12%,
      rgba(73,184,255,.2) 12% 24%,
      transparent 24% 38%,
      rgba(177,241,255,.22) 38% 50%,
      transparent 50% 68%,
      rgba(72,102,255,.13) 68% 78%,
      transparent 78% 100%) !important;
}

.gold-etched-holographic .holographic-foil::before {
  background: linear-gradient(108deg,
    transparent 33%,
    rgba(45,158,255,.22) 41%,
    rgba(224,251,255,.78) 47%,
    #fff 50%,
    rgba(72,198,255,.56) 55%,
    transparent 66%) !important;
}

.gold-etched-holographic .holographic-foil::after {
  background:
    radial-gradient(ellipse at 14% 17%, #fff 0 1px, #72d9ff 1.2px 2px, transparent 3px),
    radial-gradient(ellipse at 77% 21%, #fff 0 1px, #4b9fff 1.2px 2px, transparent 3px),
    radial-gradient(ellipse at 46% 61%, #fff 0 1.3px, #84e5ff 1.5px 2.3px, transparent 3.4px),
    radial-gradient(ellipse at 88% 81%, #fff 0 1px, #4580ff 1.2px 2px, transparent 3px),
    radial-gradient(ellipse at 21% 86%, #fff 0 1px, #a9f0ff 1.2px 2px, transparent 3px) !important;
}

.rarity-tag.gold-etched-holographic-tag,
.item-card.postcard .rarity-tag.gold-etched-holographic-tag,
.detail-card .rarity-tag.gold-etched-holographic-tag,
.gold-etched-holographic-preview {
  border-color: rgba(221,250,255,.98) !important;
  color: #102f61 !important;
  background:
    repeating-linear-gradient(132deg, transparent 0 10px, rgba(255,255,255,.42) 11px, transparent 12px 23px),
    linear-gradient(105deg, #12396f 0%, #3d9cff 17%, #bcefff 33%, #ffffff 47%, #71d8ff 61%, #4777ef 77%, #173f7c 100%) !important;
  background-size: 48px 48px, 230% 100% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 2px 9px rgba(24,91,166,.34) !important;
}

.recent-pull-thumb.gold-etched-holographic {
  border-color: #9eeaff !important;
  box-shadow: 0 0 0 1px rgba(239,253,255,.94), 0 0 14px rgba(42,185,255,.55), 0 0 21px rgba(48,99,255,.24) !important;
}

.item-card.gold-etched-holographic .item-name,
.item-card.gold-etched-holographic .item-handle,
.item-card.gold-etched-holographic .catalog-no,
.item-card.gold-etched-holographic .variant-binder-status,
.item-card.gold-etched-holographic .collection-best-variant,
.item-card.gold-etched-holographic .collection-variant-line {
  color: #102e5a !important;
  text-shadow: 0 1px 0 rgba(224,249,255,.82) !important;
}

.item-card.gold-etched-holographic .collection-binder-action {
  border-color: rgba(24,81,145,.28) !important;
  color: #123668 !important;
  background: rgba(199,242,255,.42) !important;
}

.item-card.gold-etched-holographic .card-value-badge,
.item-card.gold-etched-holographic .count-badge {
  border-color: rgba(201,246,255,.9) !important;
  color: #effcff !important;
  background: rgba(8,40,88,.92) !important;
}

.item-card.variant-locked.gold-etched-holographic {
  background: linear-gradient(135deg, rgba(25,74,137,.78), rgba(171,230,255,.8), rgba(51,104,188,.76)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.gold-etched-holographic { animation: none !important; }
}

.holographic-stamp {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 20;
  padding: 5px 9px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.9);
  background: linear-gradient(120deg, #ff9edb, #c64fff, #5ce0ff, #6dffb0, #ffd65c);
  background-size: 220% 100%;
  color: white;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .9px;
  text-shadow: 0 1px 3px rgba(60,20,80,.55);
  box-shadow: 0 3px 10px rgba(92,224,255,.45);
  transform: rotate(-7deg);
  animation: holographicTagShift 2.2s linear infinite;
  pointer-events: none;
}

.holographic-tag,
.holographic-preview {
  background: linear-gradient(90deg, #ff9edb, #c64fff, #5ce0ff, #6dffb0, #ffd65c, #ff9edb) !important;
  background-size: 220% 100% !important;
  color: white !important;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(50,20,80,.45);
  animation: holographicTagShift 2.2s linear infinite;
}

@keyframes holographicTagShift {
  to { background-position: 220% 0; }
}

.reveal-card.holographic-hit .holographic-stamp {
  animation: holographicImpact .9s cubic-bezier(.18,.85,.2,1.2) both, holographicTagShift 2.2s .9s linear infinite;
}

.reveal-card.holographic-hit .holographic-foil {
  animation: holographicBurst .9s ease-out both, holographicSweep 2.5s .9s ease-in-out infinite;
}

@keyframes holographicImpact {
  0% { transform: scale(.2) rotate(-35deg); opacity: 0; filter: brightness(2.5); }
  48% { transform: scale(1.32) rotate(4deg); opacity: 1; }
  72% { transform: scale(.94) rotate(-9deg); }
  100% { transform: scale(1) rotate(-7deg); filter: brightness(1); }
}

@keyframes holographicBurst {
  0% { opacity: 0; filter: brightness(3) hue-rotate(0deg); }
  35% { opacity: .9; filter: brightness(2.2) hue-rotate(90deg); }
  100% { opacity: .68; filter: saturate(1.35) contrast(1.08) brightness(1.08) hue-rotate(0deg); }
}

/* Keep the foil within the artwork in inventory, reveal and detail views. */
.item-image-wrap .holographic-foil,
.detail-image-wrap .holographic-foil {
  border-radius: 12px;
}

/* =====================================================================
   HOLOGRAPHIC TAG POLISH
   Keep Holographic blue on every rarity, including Postcard, and use a
   duplicated gradient cycle so the moving colour loop has no visible jump.
   ===================================================================== */
.rarity-tag.holographic-tag,
.item-card.postcard .rarity-tag.holographic-tag,
.detail-card .rarity-tag.holographic-tag,
.holographic-preview {
  background: linear-gradient(90deg,
    #3f7cff 0%,
    #59c8ff 12.5%,
    #b6f3ff 25%,
    #8c7dff 37.5%,
    #3f7cff 50%,
    #59c8ff 62.5%,
    #b6f3ff 75%,
    #8c7dff 87.5%,
    #3f7cff 100%) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(22, 42, 105, .55) !important;
  animation: holographicBlueFlow 3.6s linear infinite !important;
}

.holographic-stamp {
  background: linear-gradient(90deg,
    #3975ff 0%,
    #55c8ff 12.5%,
    #d3f9ff 25%,
    #8878ff 37.5%,
    #3975ff 50%,
    #55c8ff 62.5%,
    #d3f9ff 75%,
    #8878ff 87.5%,
    #3975ff 100%) !important;
  background-size: 200% 100% !important;
  border-color: rgba(225, 249, 255, .95);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.68),
    0 3px 10px rgba(62, 152, 255, .48);
  animation: holographicBlueFlow 3.6s linear infinite !important;
}

@keyframes holographicBlueFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

.reveal-card.holographic-hit .holographic-stamp {
  animation:
    holographicImpact .9s cubic-bezier(.18,.85,.2,1.2) both,
    holographicBlueFlow 3.6s .9s linear infinite !important;
}


/* =====================================================================
   HOLOGRAPHIC ARTWORK REFRACTION
   The shine now comes from a duplicated copy of the artwork rather than
   relying on a heavy full-card colour wash. The duplicate catches moving
   light while the original image remains crisp underneath.
   ===================================================================== */
.item-image-wrap > img:not(.holographic-art-copy),
.detail-image-wrap > img:not(.holographic-art-copy) {
  position: relative;
  z-index: 1;
}

.holographic-art-copy {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: .28;
  mix-blend-mode: screen;
  filter: brightness(1.18) contrast(1.3) saturate(1.6) hue-rotate(0deg);
  transform: translate3d(-1.5%, -1%, 0) scale(1.035);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: holographicArtworkRefraction 4.6s ease-in-out infinite;
}

@keyframes holographicArtworkRefraction {
  0%, 100% {
    opacity: .18;
    transform: translate3d(-1.8%, -1.2%, 0) scale(1.035);
    filter: brightness(1.08) contrast(1.22) saturate(1.45) hue-rotate(0deg);
  }
  32% {
    opacity: .42;
    transform: translate3d(1.6%, -.4%, 0) scale(1.045);
    filter: brightness(1.4) contrast(1.38) saturate(1.9) hue-rotate(28deg);
  }
  58% {
    opacity: .26;
    transform: translate3d(.3%, 1.4%, 0) scale(1.04);
    filter: brightness(1.22) contrast(1.32) saturate(1.7) hue-rotate(74deg);
  }
  78% {
    opacity: .38;
    transform: translate3d(-1%, .5%, 0) scale(1.045);
    filter: brightness(1.35) contrast(1.36) saturate(1.82) hue-rotate(118deg);
  }
}

/* A narrow reflected light streak and restrained foil texture. */
.holographic-foil {
  z-index: 3;
  opacity: .48;
  mix-blend-mode: screen;
  background:
    linear-gradient(112deg,
      transparent 0 35%,
      rgba(97, 155, 255, .12) 39%,
      rgba(91, 224, 255, .46) 44%,
      rgba(255,255,255,.92) 49%,
      rgba(171, 130, 255, .48) 54%,
      rgba(109,255,176,.18) 59%,
      transparent 65% 100%),
    repeating-linear-gradient(132deg,
      rgba(220, 251, 255, .14) 0 1px,
      transparent 1px 7px);
  background-size: 280% 100%, 14px 14px;
  background-position: -150% 50%, 0 0;
  filter: saturate(1.25) contrast(1.04) brightness(1.08);
  box-shadow: inset 0 0 18px rgba(107, 216, 255, .12);
  animation: holographicLightCatch 3.9s ease-in-out infinite;
}

@keyframes holographicLightCatch {
  0%, 14%, 100% {
    background-position: -150% 50%, 0 0;
    opacity: .26;
  }
  42% {
    background-position: 45% 50%, 5px 5px;
    opacity: .66;
  }
  68% {
    background-position: 145% 50%, 9px 9px;
    opacity: .38;
  }
}

.reveal-card.holographic-hit .holographic-art-copy {
  animation: holographicArtworkBurst .95s ease-out both,
             holographicArtworkRefraction 4.6s .95s ease-in-out infinite;
}

@keyframes holographicArtworkBurst {
  0% { opacity: 0; transform: scale(1.12); filter: brightness(2.5) saturate(2.2); }
  38% { opacity: .72; transform: scale(1.055); filter: brightness(1.8) saturate(2); }
  100% { opacity: .28; transform: scale(1.035); filter: brightness(1.18) contrast(1.3) saturate(1.6); }
}

.reveal-card.holographic-hit .holographic-foil {
  animation: holographicLightBurst .9s ease-out both,
             holographicLightCatch 3.9s .9s ease-in-out infinite;
}

@keyframes holographicLightBurst {
  0% { opacity: 0; background-position: -120% 50%, 0 0; }
  46% { opacity: .9; background-position: 45% 50%, 5px 5px; }
  100% { opacity: .48; background-position: 125% 50%, 9px 9px; }
}

/* On the combined variant, the blue HOLO stamp is applied over the lower
   edge of the gold First Edition seal. */
.item-card.first-edition.holographic .first-edition-stamp,
.detail-image-wrap.first-edition-holographic .first-edition-stamp {
  z-index: 18;
}

.item-card.first-edition.holographic .holographic-stamp,
.detail-image-wrap.first-edition-holographic .holographic-stamp {
  left: auto;
  right: 1px;
  bottom: 3px;
  z-index: 26;
  transform: rotate(-5deg);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.75),
    0 3px 10px rgba(62,152,255,.55),
    0 0 0 2px rgba(255,255,255,.38);
}

.reveal-card.holographic-hit .item-card.first-edition.holographic .holographic-stamp {
  animation:
    holographicImpact .9s cubic-bezier(.18,.85,.2,1.2) both,
    holographicBlueFlow 3.6s .9s linear infinite !important;
}

/* =====================================================================
   HOLOGRAPHIC SOURCE-SYNC + BRIGHT-INK POLISH
   The duplicate stays hidden until its resolved artwork has loaded. Higher
   contrast makes bright printed areas catch the foil while dark areas remain
   comparatively restrained.
   ===================================================================== */
.holographic-art-copy {
  opacity: 0 !important;
  mix-blend-mode: screen;
  filter: brightness(1.22) contrast(1.72) saturate(1.72) hue-rotate(0deg);
}

.holographic-art-copy.holographic-art-ready {
  opacity: .3 !important;
  animation: holographicBrightInkRefraction 4.6s ease-in-out infinite;
}

@keyframes holographicBrightInkRefraction {
  0%, 100% {
    opacity: .16;
    transform: translate3d(-1.8%, -1.2%, 0) scale(1.035);
    filter: brightness(1.1) contrast(1.65) saturate(1.5) hue-rotate(0deg);
  }
  32% {
    opacity: .46;
    transform: translate3d(1.6%, -.4%, 0) scale(1.045);
    filter: brightness(1.52) contrast(1.82) saturate(2) hue-rotate(28deg);
  }
  58% {
    opacity: .24;
    transform: translate3d(.3%, 1.4%, 0) scale(1.04);
    filter: brightness(1.25) contrast(1.72) saturate(1.76) hue-rotate(74deg);
  }
  78% {
    opacity: .4;
    transform: translate3d(-1%, .5%, 0) scale(1.045);
    filter: brightness(1.42) contrast(1.8) saturate(1.92) hue-rotate(118deg);
  }
}

.reveal-card.holographic-hit .holographic-art-copy.holographic-art-ready {
  animation: holographicArtworkBurst .95s ease-out both,
             holographicBrightInkRefraction 4.6s .95s ease-in-out infinite;
}

/* Restore the cleaner right-side HOLO sticker placement on every HOLO card. */
.holographic-stamp,
.item-card.first-edition.holographic .holographic-stamp,
.detail-image-wrap.first-edition-holographic .holographic-stamp {
  left: auto !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 26;
  transform: rotate(7deg);
}

/* The gold seal remains beneath the blue sticker on combined variants. */
.item-card.first-edition.holographic .first-edition-stamp,
.detail-image-wrap.first-edition-holographic .first-edition-stamp {
  z-index: 18;
}

/* =====================================================================
   REVEAL CARD LAYOUT POLISH
   Variant labels no longer force the artwork to compress. The reveal card
   gets a little more vertical room, while its tags remain in one compact row.
   Physical variant stickers continue to float over the artwork independently.
   ===================================================================== */
.open-stage {
  max-width: 1040px;
  padding: 38px 42px;
}

.reveal-row {
  gap: 22px;
  min-height: 305px;
}

.reveal-card {
  width: 190px;
}

.reveal-inner {
  aspect-ratio: 5 / 7.65;
}

.reveal-face-front .item-card {
  padding: 9px 9px 42px;
}

/* Keep all reveal labels side-by-side in a fixed footer instead of allowing
   extra variants to create another line and steal height from the artwork. */
.reveal-face-front .rarity-tags {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  z-index: 30;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin: 0;
  min-width: 0;
}

.reveal-face-front .rarity-tag {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 3px 5px;
  font-size: 7px;
  line-height: 1;
  letter-spacing: .18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Floating physical stickers: no badge participates in document flow. */
.item-image-wrap .first-edition-stamp,
.item-image-wrap .holographic-stamp,
.detail-image-wrap .first-edition-stamp,
.detail-image-wrap .holographic-stamp {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

/* Extra paper/foil thickness and a small contact shadow make the stickers
   feel attached to the printed card rather than drawn into the interface. */
.first-edition-stamp {
  filter:
    drop-shadow(0 2px 0 rgba(105, 63, 0, .34))
    drop-shadow(0 5px 5px rgba(49, 27, 0, .28));
}

.holographic-stamp {
  filter:
    drop-shadow(0 2px 0 rgba(26, 70, 155, .42))
    drop-shadow(0 5px 5px rgba(25, 63, 132, .3));
}

/* Combined cards use a deliberate sticker overlap. The gold seal sits under
   the right-side HOLO sticker, while neither badge affects artwork sizing. */
.item-card.first-edition.holographic .first-edition-stamp,
.detail-image-wrap.first-edition-holographic .first-edition-stamp {
  left: auto;
  right: 31px;
  bottom: 5px;
  z-index: 18;
  transform: rotate(-10deg);
}

.item-card.first-edition.holographic .holographic-stamp,
.detail-image-wrap.first-edition-holographic .holographic-stamp {
  left: auto !important;
  right: 4px !important;
  bottom: 8px !important;
  z-index: 26;
  transform: rotate(7deg);
}

@media (max-width: 700px) {
  .open-stage {
    padding: 28px 14px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .reveal-card {
    width: min(190px, 72vw);
  }
}

/* Variant-aware locked collection cards */
.item-card.variant-locked {
  cursor: default;
  opacity: .78;
  background: #fff8fc;
}
.item-card.variant-locked:hover { transform: none; }
.item-card.variant-locked .locked-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, #ffe6f2, #ffe6f2 10px, #ffd6ec 10px, #ffd6ec 20px);
}
.item-card.variant-locked .locked-image-wrap > span {
  position: relative;
  z-index: 3;
  font-size: 34px;
  opacity: .55;
}
.item-card.variant-locked.first-edition {
  border-color: #d7aa35;
  box-shadow: 0 0 0 1px rgba(255,214,92,.65), 0 8px 20px rgba(173,118,9,.2);
}
.item-card.variant-locked.holographic {
  border-color: #76d9ff;
  box-shadow: 0 0 0 1px rgba(139,224,255,.7), 0 8px 22px rgba(91,151,255,.24);
}
.item-card.variant-locked.first-edition.holographic {
  border-color: #9fdfff;
  box-shadow: 0 0 0 1px rgba(255,214,92,.7), 0 0 18px rgba(104,210,255,.3), 0 8px 24px rgba(89,136,255,.22);
}
.item-card.variant-locked .holographic-foil {
  opacity: .42;
}
.item-card.variant-locked .first-edition-stamp,
.item-card.variant-locked .holographic-stamp {
  filter: saturate(.75) brightness(.95);
}
.locked-variant-name {
  min-height: 1.15em;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a96c94;
}

/* Alternate artwork edition -------------------------------------------------
   ALT ART is an artwork identity, independent from First Edition and HOLO.
   It therefore combines cleanly with every existing modifier. */
.alt-art-tag {
  color: #fff;
  background:
    linear-gradient(110deg, #5a1b86 0%, #a13bd1 34%, #ff6bb5 68%, #6f42d8 100%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 2px 8px rgba(111,66,216,.28);
  letter-spacing: .07em;
}

.item-card.alt-art {
  border-color: #b56cff;
  box-shadow:
    0 0 0 1px rgba(255,120,205,.48),
    0 0 16px rgba(153,74,230,.24),
    0 8px 22px rgba(91,29,134,.16);
}

.item-card.alt-art .item-image-wrap::after,
.detail-image-wrap.alt-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(214,152,255,.34);
  z-index: 8;
}

.item-card.variant-locked.alt-art {
  border-color: #ad62e8;
  box-shadow:
    0 0 0 1px rgba(255,117,203,.5),
    0 0 16px rgba(154,77,226,.26),
    0 8px 22px rgba(91,29,134,.16);
}


/* Keep ALT ART purple everywhere, even when its base rarity is Postcard.
   Postcard cards normally recolour every nested rarity tag, so these more
   specific rules intentionally restore the ALT ART identity. */
.item-card.postcard .rarity-tag.alt-art-tag,
.merge-card.postcard .rarity-tag.alt-art-tag,
.reveal-card .rarity-tag.alt-art-tag,
.reveal-face-front .rarity-tag.alt-art-tag,
.detail-card .rarity-tag.alt-art-tag,
.detail-card.postcard .rarity-tag.alt-art-tag,
.rarity-tag.alt-art-tag {
  color: #fff !important;
  background: linear-gradient(110deg, #5a1b86 0%, #a13bd1 34%, #ff6bb5 68%, #6f42d8 100%) !important;
  background-size: 100% 100% !important;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 8px rgba(111,66,216,.28);
  text-shadow: 0 1px 2px rgba(48,10,76,.55);
  animation: none !important;
}


/* Shop placeholders ----------------------------------------------------- */
.pack-card.coming-soon-pack {
  border-style: dashed;
  opacity: 0.9;
}
.coming-soon-image {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.7), transparent 34%),
    linear-gradient(145deg, var(--pack-color, var(--lilac)), #ffd6ec);
  position: relative;
}
.coming-soon-image::after {
  content: "?";
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(72px, 10vw, 118px);
  font-weight: 700;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 8px 24px rgba(90,23,64,0.22);
}
.coming-soon-symbol {
  position: absolute;
  top: 18%;
  right: 18%;
  z-index: 1;
  font-size: 28px;
  color: white;
  animation: hintPulse 1.8s ease-in-out infinite;
}
.coming-soon-footer { gap: 12px; }
.coming-soon-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff0f8;
  border: 2px solid var(--line);
  color: var(--hot-dark);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

/* First-time card-type reveal tag -------------------------------------- */
.new-card-tag {
  position: absolute !important;
  top: 7px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 12 !important;
  padding: 3px 12px 4px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.95);
  background: linear-gradient(135deg, #ff4fa3, #c64fff);
  color: white;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(90,23,64,0.28);
  text-shadow: 0 1px 2px rgba(90,23,64,0.25);
  pointer-events: none;
  animation: newCardTagPop 0.45s cubic-bezier(.2,.9,.3,1.35) both;
}
@keyframes newCardTagPop {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.7) rotate(-2deg); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(-2deg); }
}




/* -------------------------------------------------------------------------
   Fusion Lab main tab layout
   These styles match the current Fusion markup generated by script.js.
   They are intentionally separate from the full-screen reveal overlay.
   ------------------------------------------------------------------------- */

#view-merge {
  --fusion-panel-width: 310px;
}

#view-merge .view-heading {
  max-width: 760px;
}

#mergeResult:empty {
  display: none;
}

.fusion-layout {
  display: grid;
  grid-template-columns: minmax(260px, var(--fusion-panel-width)) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.fusion-panel {
  position: sticky;
  top: 112px;
  min-width: 0;
}

.fusion-panel-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 2px solid rgba(198, 79, 255, .24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(155deg, #fffafd 0%, #ffeaf7 58%, #f5e7ff 100%);
  box-shadow:
    0 14px 34px rgba(122, 31, 85, .14),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.fusion-panel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(198,79,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,79,163,.10) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.fusion-panel-card > * {
  position: relative;
  z-index: 1;
}

.fusion-reactor {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: white;
  font-family: var(--font-display);
  font-size: 36px;
  background:
    radial-gradient(circle, #fff 0 8%, #ffb8e4 9% 24%, #c64fff 45%, #7a1f55 72%);
  box-shadow:
    0 0 0 8px rgba(198,79,255,.09),
    0 0 26px rgba(198,79,255,.45),
    inset 0 0 20px rgba(255,255,255,.55);
  animation: fusionReactorIdle 2.2s ease-in-out infinite;
}

@keyframes fusionReactorIdle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 8px rgba(198,79,255,.09), 0 0 24px rgba(198,79,255,.38), inset 0 0 20px rgba(255,255,255,.55);
  }
  50% {
    transform: scale(1.055) rotate(8deg);
    box-shadow: 0 0 0 12px rgba(255,79,163,.08), 0 0 36px rgba(255,79,163,.52), inset 0 0 26px rgba(255,255,255,.72);
  }
}

.fusion-panel-card h2 {
  margin: 0 0 18px;
  text-align: center;
  color: var(--berry);
  font-size: 22px;
}

.fusion-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0;
  color: #945174;
  font-size: 13px;
  font-weight: 700;
}

.fusion-stat-row strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--berry);
  font-family: var(--font-display);
  font-size: 15px;
}

.fusion-stat-row .coin-icon,
.fusion-tier-card .coin-icon,
.fusion-card-info .coin-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.fusion-progress {
  height: 12px;
  overflow: hidden;
  margin: 8px 0 16px;
  border: 1px solid rgba(122,31,85,.08);
  border-radius: 999px;
  background: rgba(122,31,85,.09);
  box-shadow: inset 0 2px 4px rgba(90,23,64,.10);
}

.fusion-progress > div {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hot), var(--lilac), #7cecff);
  box-shadow: 0 0 12px rgba(198,79,255,.45);
  transition: width .28s ease;
}

.fusion-tier-card {
  padding: 12px;
  margin: 4px 0 14px;
  border: 1px solid rgba(198,79,255,.2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(198,79,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.fusion-tier-card.maximum {
  border-color: rgba(214,157,28,.34);
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,211,91,.16));
}

.fusion-tier-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #945174;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.fusion-tier-heading strong {
  color: var(--hot-dark);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .02em;
}

.fusion-tier-card.maximum .fusion-tier-heading strong {
  color: #a56c00;
}

.fusion-tier-progress {
  height: 8px;
  overflow: hidden;
  margin: 9px 0 8px;
  border-radius: 999px;
  background: rgba(122,31,85,.1);
}

.fusion-tier-progress > div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hot), var(--lilac), #7cecff);
  box-shadow: 0 0 10px rgba(198,79,255,.4);
  transition: width .28s ease;
}

.fusion-tier-card.maximum .fusion-tier-progress > div {
  background: linear-gradient(90deg, #c78300, #ffd75b, #fff2a6);
  box-shadow: 0 0 10px rgba(224,171,34,.38);
}

.fusion-tier-card small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #9c6484;
  font-size: 9.5px;
  line-height: 1.4;
  text-align: center;
}

.fusion-odds {
  display: grid;
  gap: 6px;
  padding: 12px;
  margin: 16px 0 12px;
  border: 1px solid rgba(255,79,163,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.66);
}

.fusion-odds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  font-size: 12px;
}

.fusion-odds-row span {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #8e4b70;
  font-weight: 700;
}

.fusion-odds-row i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-right: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.82), 0 1px 4px rgba(90,23,64,.2);
}

.fusion-odds-row strong {
  color: var(--berry);
  font-size: 12px;
}

.fusion-variant-note,
.fusion-warning {
  color: #9c6484;
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center;
}

.fusion-variant-note {
  padding: 10px 11px;
  margin: 0 0 14px;
  border-radius: 12px;
  background: rgba(198,79,255,.07);
}

.fusion-submit {
  width: 100%;
  min-height: 44px;
}

.fusion-clear {
  width: 100%;
  margin-top: 9px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  color: var(--hot-dark);
  background: transparent;
  font-weight: 800;
}

.fusion-clear:not(:disabled):hover {
  background: rgba(255,79,163,.09);
}

.fusion-clear:disabled {
  opacity: .42;
  cursor: default;
}

.fusion-warning {
  margin: 12px 0 0;
}

.fusion-collection {
  min-width: 0;
}

.fusion-help {
  margin-bottom: 16px;
  padding: 13px 16px;
  border: 1px solid rgba(255,79,163,.18);
  border-radius: 15px;
  color: #8c4a70;
  background: rgba(255,255,255,.67);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: 0 5px 14px rgba(122,31,85,.07);
}

.fusion-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 16px;
}

.fusion-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "image info"
    "image controls";
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--rarity-color) 65%, white);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 7px 18px rgba(122,31,85,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fusion-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background: linear-gradient(135deg, var(--rarity-color), transparent 58%);
}

.fusion-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(122,31,85,.16);
}

.fusion-card.selected {
  border-color: var(--rarity-color);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), color-mix(in srgb, var(--rarity-color) 10%, white));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--rarity-color) 19%, transparent),
    0 12px 26px rgba(122,31,85,.16);
}

.fusion-card-image {
  grid-area: image;
  position: relative;
  width: 72px;
  aspect-ratio: 5 / 7;
  align-self: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 10px;
  background: var(--line);
  box-shadow: 0 5px 12px rgba(90,23,64,.2);
}

.fusion-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fusion-card-image .edition-badge,
.fusion-card-image .holo-badge,
.fusion-card-image .alt-art-badge {
  transform: scale(.72);
  transform-origin: top left;
}

.fusion-card-info {
  grid-area: info;
  min-width: 0;
  align-self: end;
}

.fusion-card-info strong {
  display: block;
  overflow: hidden;
  color: var(--berry);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fusion-card-info span,
.fusion-card-info small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fusion-card-info span {
  margin-top: 3px;
  color: var(--hot-dark);
  font-size: 9.5px;
  font-weight: 800;
}

.fusion-card-info small {
  margin-top: 5px;
  color: #a06a89;
  font-size: 9px;
  font-weight: 700;
}

.fusion-stepper {
  grid-area: controls;
  display: grid;
  grid-template-columns: 30px minmax(28px, 1fr) 30px;
  align-items: center;
  align-self: start;
  width: 100%;
  max-width: 118px;
  overflow: hidden;
  border: 1px solid rgba(122,31,85,.13);
  border-radius: 999px;
  background: #fff6fb;
}

.fusion-stepper button {
  width: 30px;
  height: 30px;
  padding: 0;
  color: white;
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.fusion-stepper button:not(:disabled):hover {
  filter: brightness(1.07);
}

.fusion-stepper button:disabled {
  color: #b999ad;
  background: #eadce5;
  cursor: default;
}

.fusion-stepper strong {
  min-width: 0;
  text-align: center;
  color: var(--berry);
  font-size: 12px;
}

.fusion-result-banner {
  position: relative;
  overflow: hidden;
}

.fusion-result-banner::after {
  content: "";
  position: absolute;
  inset: -100% auto -100% -30%;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: rotate(18deg);
  animation: fusionResultSweep 1.1s ease-out both;
}

@keyframes fusionResultSweep {
  to { left: 125%; }
}

@media (max-width: 900px) {
  .fusion-layout {
    grid-template-columns: 1fr;
  }

  .fusion-panel {
    position: static;
  }

  .fusion-panel-card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    column-gap: 16px;
  }

  .fusion-reactor {
    grid-row: 1 / span 5;
    width: 70px;
    height: 70px;
    margin: 0;
  }

  .fusion-panel-card h2 {
    margin: 0 0 8px;
    text-align: left;
  }

  .fusion-odds,
  .fusion-tier-card,
  .fusion-power-guide,
  .fusion-variant-note,
  .fusion-submit,
  .fusion-clear,
  .fusion-warning {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .fusion-panel-card {
    display: block;
    padding: 18px;
  }

  .fusion-reactor {
    margin: 0 auto 12px;
  }

  .fusion-panel-card h2 {
    text-align: center;
  }

  .fusion-card-grid {
    grid-template-columns: 1fr;
  }

  .fusion-card {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .fusion-card-image {
    width: 68px;
  }
}


/* -------------------------------------------------------------------------
   Epic Fusion click-to-reveal sequence
   ------------------------------------------------------------------------- */
.fusion-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(225, 95, 255, .24), transparent 28%),
    radial-gradient(circle at 50% 55%, rgba(70, 210, 255, .18), transparent 42%),
    rgba(18, 5, 34, .93);
  backdrop-filter: blur(10px);
  animation: fusion-overlay-in .34s ease both;
}

.fusion-reveal-overlay::before,
.fusion-reveal-overlay::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
}

.fusion-reveal-overlay::before {
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(129, 233, 255, .13),
    transparent 18%,
    rgba(255, 111, 228, .16),
    transparent 42%,
    rgba(255, 234, 122, .12),
    transparent 68%
  );
  animation: fusion-field-spin 8s linear infinite;
}

.fusion-reveal-overlay::after {
  opacity: 0;
  background: white;
}

.fusion-reveal-overlay.revealing::after {
  animation: fusion-screen-flash .82s ease-out both;
}

.fusion-reveal-shell {
  position: relative;
  z-index: 2;
  width: min(92vw, 540px);
  min-height: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(223, 181, 255, .28);
  border-radius: 34px;
  padding: 28px 24px 24px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(45, 13, 77, .93), rgba(20, 9, 40, .96)),
    radial-gradient(circle at 50% 35%, rgba(170, 91, 255, .22), transparent 45%);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .5),
    inset 0 0 70px rgba(143, 82, 255, .13),
    0 0 60px rgba(150, 90, 255, .16);
}

.fusion-reveal-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}

.fusion-machine-title {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: clamp(22px, 6vw, 34px);
  font-weight: 1000;
  letter-spacing: .16em;
  text-align: center;
  text-shadow: 0 0 22px rgba(206, 135, 255, .85);
}

.fusion-machine-subtitle {
  position: relative;
  z-index: 2;
  margin: 6px 0 24px;
  color: #cab6dc;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fusion-core {
  position: relative;
  z-index: 3;
  width: 252px;
  height: 352px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  color: inherit;
  background: transparent;
  perspective: 1200px;
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.45));
}

.fusion-core:focus-visible {
  outline: 3px solid #f6d3ff;
  outline-offset: 9px;
}

.fusion-core-rings {
  position: absolute;
  inset: -45px;
  border: 2px solid rgba(128, 226, 255, .45);
  border-radius: 50%;
  box-shadow:
    0 0 20px rgba(109, 226, 255, .4),
    inset 0 0 18px rgba(251, 122, 255, .32);
  animation: fusion-ring-spin 2.8s linear infinite;
}

.fusion-core-rings::before,
.fusion-core-rings::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 1px dashed rgba(255, 142, 239, .65);
}

.fusion-core-rings::before {
  inset: 18px;
  animation: fusion-ring-spin 2s linear infinite reverse;
}

.fusion-core-rings::after {
  inset: 38px;
  border-color: rgba(255, 236, 133, .58);
  animation: fusion-ring-spin 1.4s linear infinite;
}

.fusion-core-card {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 22px;
  transform-style: preserve-3d;
  transition: transform .92s cubic-bezier(.18,.9,.2,1.14);
}

.fusion-core-back,
.fusion-core-front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 22px;
  backface-visibility: hidden;
}

.fusion-core-back {
  border: 2px solid rgba(220, 184, 255, .85);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.18), transparent 17%),
    repeating-radial-gradient(circle at center, rgba(182, 107, 255, .24) 0 2px, transparent 3px 15px),
    linear-gradient(145deg, #45116c, #16102f 58%, #37105c);
  box-shadow:
    inset 0 0 36px rgba(127, 230, 255, .22),
    0 0 35px rgba(196, 100, 255, .42);
}

.fusion-core-back strong {
  color: white;
  font-size: 18px;
  letter-spacing: .09em;
  text-shadow: 0 0 12px rgba(255,255,255,.65);
}

.fusion-core-back small {
  margin-top: 8px;
  color: #ddc9ec;
  font-size: 11px;
  letter-spacing: .05em;
}

.fusion-bolt {
  margin-bottom: 12px;
  color: #d5f9ff;
  font-size: 76px;
  line-height: 1;
  text-shadow:
    0 0 8px white,
    0 0 24px #75eaff,
    0 0 46px #e479ff;
  animation: fusion-bolt-pulse .72s ease-in-out infinite alternate;
}

.fusion-core-front {
  transform: rotateY(180deg);
  border: 3px solid rgba(255,255,255,.8);
  background: #160b25;
  box-shadow:
    0 0 42px rgba(255,255,255,.42),
    0 0 76px rgba(171, 85, 255, .58);
}

.fusion-core-front img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fusion-reveal-overlay.revealing .fusion-core-card,
.fusion-reveal-overlay.revealed .fusion-core-card {
  transform: rotateY(180deg) scale(1.05);
}

.fusion-reveal-overlay.revealing .fusion-core {
  animation: fusion-core-impact .92s cubic-bezier(.2,.85,.25,1) both;
}

.fusion-reveal-overlay.revealed .fusion-core-rings {
  opacity: .32;
  animation-duration: 8s;
}

.fusion-charge-meter {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin: 28px 0 4px;
}

.fusion-charge-meter span {
  width: 35px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 5px rgba(0,0,0,.5);
  animation: fusion-meter-charge 1.15s ease-in-out infinite;
}

.fusion-charge-meter span:nth-child(2) { animation-delay: .1s; }
.fusion-charge-meter span:nth-child(3) { animation-delay: .2s; }
.fusion-charge-meter span:nth-child(4) { animation-delay: .3s; }
.fusion-charge-meter span:nth-child(5) { animation-delay: .4s; }

.fusion-reward-copy {
  position: relative;
  z-index: 3;
  display: none;
  width: 100%;
  margin-top: 24px;
  text-align: center;
  color: white;
}

.fusion-reveal-overlay.revealed .fusion-machine-subtitle,
.fusion-reveal-overlay.revealed .fusion-charge-meter {
  display: none;
}

.fusion-reveal-overlay.revealed .fusion-reward-copy {
  display: block;
  animation: fusion-copy-in .45s ease both;
}

.fusion-reward-copy h2 {
  margin: 5px 0 2px;
  font-size: 32px;
  line-height: 1;
}

.fusion-reward-copy p {
  margin: 6px 0;
  color: #dcc8eb;
}

.fusion-reward-rarity {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
  color: #ffe993;
  text-transform: uppercase;
}

.fusion-reward-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 8px;
}

.fusion-reward-tags span {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: white;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 14px rgba(214, 133, 255, .16);
}

.fusion-reveal-close {
  position: relative;
  z-index: 4;
  display: none;
  margin-top: 20px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #321044;
  font-weight: 1000;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #fff4af, #f7b8ff 48%, #a8f3ff);
  box-shadow: 0 8px 28px rgba(188, 98, 255, .38);
}

.fusion-reveal-overlay.revealed .fusion-reveal-close {
  display: block;
  animation: fusion-copy-in .45s .12s ease both;
}

.fusion-energy-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fusion-energy-field i {
  --angle: calc(var(--spark) * 20deg);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 95px;
  opacity: .35;
  border-radius: 999px;
  background: linear-gradient(to top, transparent, #b7f8ff, white, transparent);
  transform-origin: 50% calc(50% + 230px);
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-230px) scaleY(.25);
  animation: fusion-spark 1.2s var(--delay) ease-in-out infinite;
  filter: drop-shadow(0 0 7px #77efff);
}

.fusion-reveal-overlay.revealing .fusion-energy-field i {
  animation-duration: .2s;
  opacity: 1;
}

.fusion-reveal-overlay.closing {
  animation: fusion-overlay-out .36s ease both;
}

@keyframes fusion-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fusion-overlay-out {
  to { opacity: 0; transform: scale(1.04); }
}

@keyframes fusion-field-spin {
  to { transform: rotate(360deg); }
}

@keyframes fusion-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes fusion-bolt-pulse {
  from { transform: scale(.92); opacity: .72; }
  to { transform: scale(1.08); opacity: 1; }
}

@keyframes fusion-meter-charge {
  0%, 100% { background: rgba(255,255,255,.12); transform: scaleX(.86); }
  50% { background: #b9f6ff; box-shadow: 0 0 14px #89ecff; transform: scaleX(1); }
}

@keyframes fusion-spark {
  0%, 100% { opacity: .08; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-220px) scaleY(.15); }
  50% { opacity: .75; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-245px) scaleY(1); }
}

@keyframes fusion-core-impact {
  0% { transform: scale(1); }
  18% { transform: scale(.88) rotate(-2deg); }
  45% { transform: scale(1.16) rotate(2deg); }
  68% { transform: scale(.98); }
  100% { transform: scale(1); }
}

@keyframes fusion-screen-flash {
  0% { opacity: 0; }
  12% { opacity: .95; }
  28% { opacity: .15; }
  42% { opacity: .7; }
  100% { opacity: 0; }
}

@keyframes fusion-copy-in {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .fusion-reveal-shell {
    min-height: 610px;
    padding: 22px 14px 18px;
  }

  .fusion-core {
    width: 218px;
    height: 305px;
  }

  .fusion-core-rings {
    inset: -32px;
  }

  .fusion-machine-title {
    letter-spacing: .1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fusion-reveal-overlay *,
  .fusion-reveal-overlay *::before,
  .fusion-reveal-overlay *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ========================================================================
   CollectGirls-themed Fusion reveal
   Keeps the epic timing and electrical effects, but uses the website's
   soft pink, white, lilac and berry visual language.
   ======================================================================== */

.fusion-reveal-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.86), transparent 23%),
    radial-gradient(circle at 20% 18%, rgba(255,158,219,.55), transparent 35%),
    radial-gradient(circle at 82% 12%, rgba(198,79,255,.30), transparent 38%),
    linear-gradient(145deg, rgba(255,227,241,.96), rgba(255,201,228,.94));
  backdrop-filter: blur(10px);
}

.fusion-reveal-overlay::before {
  inset: -28%;
  opacity: .8;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 8%,
      rgba(255,255,255,.62) 11%,
      transparent 15% 28%,
      rgba(255,79,163,.18) 32%,
      transparent 37% 52%,
      rgba(198,79,255,.16) 57%,
      transparent 62% 77%,
      rgba(255,214,92,.18) 82%,
      transparent 88%
    );
}

.fusion-reveal-shell {
  min-height: 650px;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.92), transparent 32%),
    linear-gradient(180deg, #fffafd 0%, #fff0f8 52%, #f8eaff 100%);
  box-shadow:
    0 26px 70px rgba(122,31,85,.25),
    0 0 0 2px rgba(255,79,163,.16),
    inset 0 1px 0 white,
    inset 0 -28px 65px rgba(198,79,255,.08);
}

.fusion-reveal-shell::before {
  opacity: .34;
  background-image:
    radial-gradient(circle, rgba(255,79,163,.22) 1.5px, transparent 1.8px),
    radial-gradient(circle, rgba(198,79,255,.17) 1.2px, transparent 1.5px);
  background-position: 0 0, 13px 13px;
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.fusion-machine-title {
  color: var(--berry);
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 35px);
  letter-spacing: .07em;
  text-shadow:
    0 2px 0 white,
    0 0 18px rgba(255,79,163,.28);
}

.fusion-machine-subtitle {
  color: var(--hot-dark);
  font-weight: 800;
  letter-spacing: .09em;
}

.fusion-core {
  filter: drop-shadow(0 18px 24px rgba(122,31,85,.25));
}

.fusion-core-rings {
  border: 3px solid rgba(255,79,163,.34);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.28),
    0 0 22px rgba(255,79,163,.26),
    inset 0 0 18px rgba(198,79,255,.18);
}

.fusion-core-rings::before {
  border: 2px dashed rgba(198,79,255,.48);
}

.fusion-core-rings::after {
  border: 2px dotted rgba(255,214,92,.72);
}

.fusion-core-back {
  border: 3px solid white;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.72), transparent 19%),
    repeating-radial-gradient(circle at center, rgba(255,255,255,.18) 0 2px, transparent 3px 15px),
    linear-gradient(145deg, #ff9edb, #ff4fa3 48%, #c64fff);
  box-shadow:
    0 0 0 2px rgba(255,79,163,.24),
    inset 0 0 38px rgba(255,255,255,.32),
    0 14px 32px rgba(122,31,85,.27);
}

.fusion-core-back::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(255,255,255,.48);
  border-radius: 15px;
  pointer-events: none;
}

.fusion-core-back strong {
  color: white;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .06em;
  text-shadow: 0 2px 6px rgba(90,23,64,.28);
}

.fusion-core-back small {
  color: white;
  font-weight: 700;
  opacity: .88;
}

.fusion-bolt {
  color: #fff7c8;
  text-shadow:
    0 0 6px white,
    0 0 18px var(--gold),
    0 0 36px rgba(198,79,255,.7);
}

.fusion-core-front {
  border: 4px solid white;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(255,79,163,.22),
    0 18px 38px rgba(122,31,85,.30),
    0 0 42px rgba(198,79,255,.30);
}

.fusion-charge-meter span {
  border: 1px solid rgba(122,31,85,.08);
  background: rgba(255,79,163,.12);
  box-shadow: inset 0 1px 3px rgba(122,31,85,.10);
}

@keyframes fusion-meter-charge {
  0%, 100% {
    background: rgba(255,79,163,.12);
    transform: scaleX(.86);
  }
  50% {
    background: linear-gradient(90deg, var(--hot), var(--lilac));
    box-shadow: 0 0 13px rgba(198,79,255,.38);
    transform: scaleX(1);
  }
}

.fusion-reward-copy {
  color: var(--berry);
}

.fusion-reward-copy h2 {
  color: var(--berry);
  font-family: var(--font-display);
}

.fusion-reward-copy p {
  color: var(--hot-dark);
  font-weight: 700;
}

.fusion-reward-rarity {
  color: var(--hot-dark);
  font-family: var(--font-display);
}

.fusion-reward-tags span {
  border: 1px solid rgba(255,79,163,.28);
  color: var(--berry);
  background: linear-gradient(135deg, #fff, #ffe7f4);
  box-shadow: 0 3px 10px rgba(122,31,85,.09);
}

.fusion-reward-copy > small {
  color: #9b4a78;
  font-weight: 800;
}

.fusion-reveal-close {
  color: white;
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  box-shadow: 0 7px 18px rgba(198,79,255,.30);
}

.fusion-reveal-close:hover {
  transform: translateY(-2px) scale(1.03);
}

.fusion-energy-field i {
  background: linear-gradient(to top, transparent, #ff9edb, white, #c64fff, transparent);
  filter:
    drop-shadow(0 0 5px rgba(255,79,163,.65))
    drop-shadow(0 0 9px rgba(198,79,255,.35));
}

/* Make the flash pink-white instead of a harsh pure-white blackout. */
.fusion-reveal-overlay::after {
  background: radial-gradient(circle, #fff 0%, #ffe0f2 52%, rgba(198,79,255,.45) 100%);
}

/* ========================================================================
   Pack Alt Art chance badge
   The pack uses .alt-art-preview rather than the card .alt-art-tag class.
   ======================================================================== */

.odds-chip.alt-art-preview,
.pack-odds .alt-art-preview {
  color: #fff !important;
  background:
    linear-gradient(110deg, #5a1b86 0%, #a13bd1 34%, #ff4fa3 68%, #6f42d8 100%) !important;
  background-size: 100% 100% !important;
  border: 1px solid rgba(255,255,255,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 2px 7px rgba(111,66,216,.28);
  text-shadow: 0 1px 2px rgba(48,10,76,.72);
  animation: none !important;
}



/* ========================================================================
   Fusion reward tags match the Shop pack chips
   ======================================================================== */

.fusion-reward-tags {
  align-items: center;
}

.fusion-reward-tags .odds-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

/* Override the earlier generic light Fusion pill style. */
.fusion-reward-tags .odds-chip,
.fusion-reward-tags .odds-chip span {
  border-color: transparent;
}

.fusion-reward-tags .fusion-standard-tag {
  color: var(--berry) !important;
  background: var(--r-common) !important;
  border: 1px solid rgba(122,31,85,.12) !important;
  text-shadow: none !important;
}

.fusion-reward-tags .fusion-rarity-tag.postcard {
  background: linear-gradient(
    90deg,
    #FF4FA3,
    #C64FFF,
    #5CE0FF,
    #6DFFB0,
    #FFD65C,
    #FF6B6B,
    #FF4FA3
  ) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.38) !important;
  animation: postcardTagShift 2.4s linear infinite !important;
}

/* Reuse the exact pack variant chip appearances inside Fusion. */
.fusion-reward-tags .alt-art-preview {
  color: #fff !important;
  background: linear-gradient(
    110deg,
    #5a1b86 0%,
    #a13bd1 34%,
    #ff4fa3 68%,
    #6f42d8 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 2px 7px rgba(111,66,216,.28) !important;
  text-shadow: 0 1px 2px rgba(48,10,76,.72) !important;
  animation: none !important;
}

.fusion-reward-tags .first-edition-preview {
  color: #6b4e00 !important;
  background: linear-gradient(135deg, #fff3a8, #ffd65c) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 2px 7px rgba(202,151,0,.24) !important;
  text-shadow: none !important;
}

.fusion-reward-tags .holographic-preview {
  background: linear-gradient(
    90deg,
    #3f7cff 0%,
    #59c8ff 12.5%,
    #b6f3ff 25%,
    #8c7dff 37.5%,
    #3f7cff 50%,
    #59c8ff 62.5%,
    #b6f3ff 75%,
    #8c7dff 87.5%,
    #3f7cff 100%
  ) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  text-shadow: 0 1px 2px rgba(22,42,105,.55) !important;
  animation: holographicBlueFlow 3.6s linear infinite !important;
}



/* -------------------------------------------------------------------------
   Consistent uppercase tags across Shop, pack reveals, cards and Fusion.
   ------------------------------------------------------------------------- */
.odds-chip,
.rarity-tag,
.edition-tag,
.edition-badge,
.holo-tag,
.holo-badge,
.alt-art-tag,
.alt-art-badge,
.alt-art-preview,
.first-edition-preview,
.holographic-preview,
.fusion-reward-tags span,
.fusion-variant-note {
  text-transform: uppercase;
}


/* Fusion Power value guide */
.fusion-power-guide {
  display: block;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  font-size: 10px;
  color: var(--berry);
}

.fusion-power-guide > strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--hot-dark);
}

.fusion-power-guide span {
  display: block;
  font-weight: 700;
  line-height: 1.45;
}

.fusion-card-info small > strong {
  color: var(--hot-dark);
}

/* New Fusion reward indicator */
.fusion-core-front {
  position: relative;
}

.fusion-new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFD65C, #FF9EDB);
  color: #5A1740;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow:
    0 4px 12px rgba(90,23,64,.28),
    0 0 16px rgba(255,214,92,.65);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  animation: fusionNewPulse 1.3s ease-in-out infinite;
}

.fusion-new-tag {
  background: linear-gradient(135deg, #FFD65C, #FF9EDB) !important;
  color: #5A1740 !important;
  box-shadow: 0 0 10px rgba(255,214,92,.55);
}

@keyframes fusionNewPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}


/* Pack information and character guide */
.pack-info-overlay {
  z-index: 430;
  overflow: hidden;
}
.pack-info-dialog {
  position: relative;
  width: min(1080px, calc(100vw - 28px));
  max-height: min(92vh, 940px);
  padding: 28px;
  border: 2px solid rgba(255,158,219,.52);
  border-radius: 28px;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--berry);
  background:
    radial-gradient(circle at 88% 0%, rgba(255,214,92,.2), transparent 28%),
    radial-gradient(circle at 5% 16%, rgba(198,79,255,.12), transparent 32%),
    linear-gradient(180deg, #fffafd, #fff1f8);
  box-shadow: 0 28px 80px rgba(90,23,64,.42);
  scrollbar-width: thin;
  scrollbar-color: rgba(198,79,255,.55) rgba(255,255,255,.55);
}
.pack-info-dialog::-webkit-scrollbar { width: 11px; }
.pack-info-dialog::-webkit-scrollbar-track { margin: 18px 0; border-radius: 999px; background: rgba(255,255,255,.58); }
.pack-info-dialog::-webkit-scrollbar-thumb { border: 3px solid rgba(255,255,255,.72); border-radius: 999px; background: linear-gradient(#ff9edb, #c64fff); }
.pack-info-dialog::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.pack-info-close {
  position: sticky;
  z-index: 20;
  top: -16px;
  float: right;
  width: 42px;
  height: 42px;
  margin: -8px -8px 0 10px;
  border: 1px solid rgba(122,31,85,.12);
  border-radius: 50%;
  color: var(--berry);
  background: rgba(255,255,255,.9);
  box-shadow: 0 5px 16px rgba(90,23,64,.14);
  font-size: 28px;
  line-height: 1;
}
.pack-info-hero {
  display: grid;
  grid-template-columns: 132px minmax(0,1fr);
  align-items: center;
  gap: 24px;
  min-height: 180px;
  padding: 20px 24px;
  border: 1px solid rgba(255,158,219,.35);
  border-radius: 22px;
  background: rgba(255,255,255,.7);
}
.pack-info-pack-image {
  display: grid;
  place-items: center;
  height: 150px;
}
.pack-info-pack-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 13px rgba(90,23,64,.28));
}
.pack-info-kicker,
.pack-info-section-heading span,
.pack-info-character-heading span,
.pack-info-variant-copy span {
  color: var(--hot-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.7px;
}
.pack-info-hero h2 { margin: 3px 0 5px; font-size: clamp(27px, 4vw, 40px); }
.pack-info-hero p { max-width: 680px; margin: 0; color: #8f4a72; font-weight: 700; line-height: 1.5; }
.pack-info-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.pack-info-stats span {
  padding: 6px 10px;
  border: 1px solid rgba(198,79,255,.17);
  border-radius: 999px;
  color: #8b4a72;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}
.pack-info-stats strong { color: var(--hot-dark); font-size: 13px; }
.pack-info-section { margin-top: 22px; padding: 22px; border: 1px solid rgba(255,158,219,.32); border-radius: 22px; background: rgba(255,255,255,.66); }
.pack-info-section-heading,
.pack-info-character-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.pack-info-section-heading h3,
.pack-info-character-heading h3 { margin: 2px 0 0; font-size: 24px; }
.pack-info-section-heading p,
.pack-info-character-heading p { max-width: 520px; margin: 0; color: #985477; font-size: 12px; font-weight: 700; line-height: 1.45; text-align: right; }
.pack-info-roster {
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  gap: 9px;
  margin-top: 18px;
}
.pack-info-roster-card {
  min-width: 0;
  padding: 6px 6px 9px;
  border: 2px solid transparent;
  border-radius: 15px;
  color: var(--berry);
  background: #fff;
  box-shadow: 0 5px 13px rgba(90,23,64,.1);
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pack-info-roster-card:hover { transform: translateY(-3px); }
.pack-info-roster-card.active { border-color: var(--hot); box-shadow: 0 7px 18px rgba(255,79,163,.25); transform: translateY(-3px); }
.pack-info-roster-image { display: block; aspect-ratio: 5/7; border-radius: 10px; overflow: hidden; background: var(--blush); }
.pack-info-roster-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack-info-roster-card strong { display: block; margin-top: 7px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pack-info-roster-card small { display: block; margin-top: 2px; color: #a56589; font-size: 8px; font-weight: 800; }
.pack-info-character { margin-top: 20px; padding-top: 19px; border-top: 1px solid rgba(198,79,255,.14); }
.pack-info-art-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 11px; margin-top: 14px; }
.pack-info-art-card {
  min-width: 0;
  padding: 6px 6px 10px;
  border: 2px solid transparent;
  border-radius: 15px;
  color: var(--berry);
  background: #fff;
  box-shadow: 0 5px 14px rgba(90,23,64,.1);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pack-info-art-card:hover { transform: translateY(-3px); }
.pack-info-art-card.active { border-color: var(--pack-info-rarity); box-shadow: 0 7px 20px color-mix(in srgb, var(--pack-info-rarity) 38%, transparent); transform: translateY(-3px); }
.pack-info-art-image { display: block; aspect-ratio: 5/7; overflow: hidden; border-radius: 10px; background: var(--blush); }
.pack-info-art-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack-info-art-card strong { display: block; margin-top: 7px; font-size: 11px; }
.pack-info-art-card small { display: inline-block; margin-top: 3px; padding: 2px 7px; border-radius: 999px; color: var(--berry); background: var(--pack-info-rarity); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.pack-info-variant-layout { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0,1fr); align-items: center; gap: 30px; margin-top: 18px; }
.pack-info-variant-preview { display: flex; justify-content: center; min-height: 360px; }
.pack-info-sample-card { width: min(238px, 100%); margin: 0; pointer-events: none; }
.pack-info-sample-card:hover { transform: none; }
.pack-info-variant-controls { min-width: 0; }
.pack-info-variant-buttons { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.pack-info-variant-button {
  min-width: 0;
  padding: 10px 7px;
  border: 1px solid rgba(198,79,255,.18);
  border-radius: 13px;
  color: var(--berry);
  background: #fff;
  box-shadow: 0 4px 11px rgba(90,23,64,.08);
}
.pack-info-variant-button strong { display: block; font-size: 10px; line-height: 1.2; }
.pack-info-variant-button small { display: block; margin-top: 4px; color: var(--hot-dark); font-size: 9px; font-weight: 900; }
.pack-info-variant-button.active { border-color: var(--hot); color: #fff; background: linear-gradient(135deg, var(--hot), var(--lilac)); box-shadow: 0 7px 18px rgba(198,79,255,.28); }
.pack-info-variant-button.active small { color: #fff; }
.pack-info-variant-copy { margin-top: 18px; padding: 17px 18px; border: 1px solid rgba(255,158,219,.28); border-radius: 16px; background: linear-gradient(135deg, #fff, #fff0f8); }
.pack-info-variant-copy h4 { margin: 3px 0 4px; font-size: 20px; }
.pack-info-variant-copy p { margin: 0; color: #925074; font-size: 12px; font-weight: 700; line-height: 1.5; }
.pack-info-independent-note { margin: 12px 2px 0; color: #925074; font-size: 10px; font-weight: 700; line-height: 1.5; }
@media (max-width: 900px) {
  .pack-info-roster { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .pack-info-art-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pack-info-variant-buttons { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .pack-info-dialog { width: min(100%, calc(100vw - 16px)); max-height: 94vh; padding: 14px; border-radius: 20px; }
  .pack-info-close { top: -5px; margin: 0; }
  .pack-info-hero { grid-template-columns: 82px minmax(0,1fr); gap: 13px; min-height: 130px; padding: 14px; }
  .pack-info-pack-image { height: 105px; }
  .pack-info-hero h2 { font-size: 24px; }
  .pack-info-stats { gap: 5px; margin-top: 10px; }
  .pack-info-stats span { padding: 4px 7px; font-size: 9px; }
  .pack-info-section { padding: 14px; }
  .pack-info-section-heading,
  .pack-info-character-heading { display: block; }
  .pack-info-section-heading p,
  .pack-info-character-heading p { margin-top: 6px; text-align: left; }
  .pack-info-roster { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
  .pack-info-roster-card strong { font-size: 9px; }
  .pack-info-art-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pack-info-variant-layout { grid-template-columns: 1fr; gap: 18px; }
  .pack-info-variant-preview { min-height: 0; }
  .pack-info-sample-card { width: min(220px, 76vw); }
  .pack-info-variant-buttons { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Daily reward reel */
.daily-wheel-card {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  padding: 28px 28px 30px;
  border: 2px solid rgba(255, 158, 219, .55);
  border-radius: 28px;
  overflow: hidden;
  color: var(--berry);
  background:
    radial-gradient(circle at 50% -25%, rgba(255, 214, 92, .28), transparent 42%),
    linear-gradient(180deg, #fffafd, #ffe9f5);
  box-shadow: 0 24px 70px rgba(90, 23, 64, .38);
  text-align: center;
}
.daily-wheel-card h2 { margin: 2px 0 4px; color: var(--berry); font-size: 32px; }
.daily-wheel-subtitle { margin: 0 0 20px; color: var(--hot-dark); font-weight: 700; }
.daily-wheel-close {
  position: absolute;
  z-index: 12;
  top: 10px;
  right: 16px;
  border: 0;
  background: transparent;
  color: var(--berry);
  font-size: 30px;
  line-height: 1;
}
.daily-wheel-sparkles {
  margin-bottom: 2px;
  color: var(--gold);
  letter-spacing: 12px;
  animation: hintPulse 1.4s ease-in-out infinite;
}
.daily-wheel-wrap {
  position: relative;
  width: 100%;
  margin: 8px auto 16px;
  padding: 10px 0;
}
.daily-wheel {
  position: relative;
  height: 174px;
  border: 3px solid rgba(122, 31, 85, .74);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(52, 16, 45, .98), rgba(91, 24, 71, .96)),
    #451331;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 16px 30px rgba(0,0,0,.22),
    0 12px 28px rgba(90,23,64,.22);
}
.daily-wheel::before,
.daily-wheel::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  width: 15%;
  pointer-events: none;
}
.daily-wheel::before { left: 0; background: linear-gradient(90deg, #3b102d 2%, transparent); }
.daily-wheel::after { right: 0; background: linear-gradient(-90deg, #3b102d 2%, transparent); }
.daily-reel-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  height: 100%;
  padding: 10px;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.daily-reel-item {
  position: relative;
  display: flex;
  flex: 0 0 126px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 148px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
  overflow: hidden;
  color: white;
  background: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.035));
  box-shadow: inset 0 0 22px var(--reel-glow, rgba(255,158,219,.18));
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.daily-reel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .58;
  background: radial-gradient(circle at 50% 32%, var(--reel-glow, rgba(255,158,219,.35)), transparent 58%);
}
.daily-reel-rarity-bar {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: var(--reel-colour, #ff9edb);
  box-shadow: 0 -3px 14px var(--reel-glow, rgba(255,158,219,.6));
}
.daily-reel-item .daily-reel-coin {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.28));
}
.daily-reel-item strong { position: relative; z-index: 1; font-family: var(--font-display); font-size: 25px; line-height: 1; }
.daily-reel-item small { position: relative; z-index: 1; margin-top: 5px; font-size: 9px; font-weight: 900; letter-spacing: 1.3px; opacity: .78; }
.daily-reel-item.is-winning {
  filter: brightness(1.2);
  transform: translateY(-3px) scale(1.035);
  box-shadow: inset 0 0 30px var(--reel-glow), 0 0 24px var(--reel-glow);
}
.daily-reel-tier-common { --reel-colour: #f6c9e6; --reel-glow: rgba(246,201,230,.45); }
.daily-reel-tier-uncommon { --reel-colour: #ff9edb; --reel-glow: rgba(255,158,219,.5); }
.daily-reel-tier-rare { --reel-colour: #ff4fa3; --reel-glow: rgba(255,79,163,.58); }
.daily-reel-tier-epic { --reel-colour: #c64fff; --reel-glow: rgba(198,79,255,.62); }
.daily-reel-tier-legendary { --reel-colour: #ffd65c; --reel-glow: rgba(255,214,92,.68); }
.daily-reel-tier-jackpot { --reel-colour: #fff2a8; --reel-glow: rgba(255,226,88,.82); }
.daily-reel-tier-jackpot.daily-reel-item {
  background:
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,.24) 45%, transparent 68%),
    linear-gradient(155deg, rgba(255,214,92,.34), rgba(122,31,85,.16));
}
.daily-wheel-pointer {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg, #fff5b8, #ffd65c 48%, #fff5b8);
  box-shadow: 0 0 9px rgba(255,214,92,.9), 0 0 18px rgba(255,79,163,.45);
}
.daily-wheel-pointer::before,
.daily-wheel-pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
}
.daily-wheel-pointer::before { top: 3px; border-top: 13px solid #fff3a3; }
.daily-wheel-pointer::after { bottom: 3px; border-bottom: 13px solid #fff3a3; }
.daily-reel-odds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 14px;
}
.daily-reel-odds-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--reel-colour) 55%, white);
  border-radius: 999px;
  color: var(--berry);
  background: color-mix(in srgb, var(--reel-colour) 16%, white);
  font-size: 10px;
}
.daily-reel-odds-chip b { font-size: 11px; }
.daily-reel-odds-chip small { font-weight: 900; opacity: .68; }
.daily-wheel-result {
  min-height: 28px;
  margin-bottom: 12px;
  color: var(--berry);
  font-weight: 800;
}
.daily-wheel-result.winner {
  color: var(--hot-dark);
  font-family: var(--font-display);
  font-size: 22px;
  animation: revealPop .45s ease both;
}
.daily-wheel-spin-btn { min-width: 150px; }
.daily-spin-topbar-btn {
  white-space: nowrap;
  background: linear-gradient(135deg, var(--gold-glow), var(--gold));
  color: #6b4e00;
  box-shadow: 0 4px 10px rgba(255,214,92,.45);
}
.daily-spin-topbar-btn:disabled {
  background: #f2e5ed;
  color: #9b7b90;
  box-shadow: none;
  cursor: default;
}
@media (max-width: 560px) {
  .daily-wheel-card { padding: 24px 12px 26px; }
  .daily-wheel-card h2 { font-size: 27px; }
  .daily-wheel { height: 158px; border-radius: 15px; }
  .daily-reel-item { flex-basis: 108px; height: 132px; }
  .daily-reel-item .daily-reel-coin { width: 41px; height: 41px; }
  .daily-reel-item strong { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-wheel-sparkles { animation: none; }
  .daily-reel-item { transition: none; }
}

/* Card collection-value labels */
.item-card {
  position: relative;
}

.card-value-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(78, 23, 61, 0.88);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 10px rgba(74, 22, 58, 0.24);
  backdrop-filter: blur(5px);
  pointer-events: none;
}

.item-card.locked .card-value-badge {
  display: none;
}

.detail-card-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(122, 31, 85, 0.1);
  color: #7a1f55;
  font-weight: 800;
}


/* Value label on the full Fusion reward card */
.fusion-core-front .card-value-badge {
  top: 10px;
  left: 10px;
  z-index: 30;
  font-size: 0.72rem;
}

.fusion-result-banner .merge-result-text span {
  line-height: 1.45;
}


/* =========================================================
   PLAYER PROFILE
   ========================================================= */

.profile-view-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.profile-view-toolbar .view-heading {
  margin-bottom: 0;
}

.profile-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile-search input {
  width: min(260px, 100%);
  min-height: 42px;
  padding: 10px 15px;
  border: 2px solid var(--line);
  border-radius: 999px;
  outline: none;
  background: #fff;
  color: var(--berry);
  font-family: var(--font-body);
  font-weight: 700;
}

.profile-search input:focus {
  border-color: var(--hot);
  box-shadow: 0 0 0 4px rgba(255, 79, 163, 0.12);
}

.profile-search .btn {
  min-height: 42px;
  padding: 9px 16px;
  background: #fff;
  border: 2px solid var(--hot);
  color: var(--hot-dark);
}

.profile-search .btn:hover {
  background: var(--hot);
  color: #fff;
}

.profile-back-btn[hidden] {
  display: none;
}

.profile-page-state {
  padding: 44px 22px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.62);
  color: var(--hot-dark);
  font-weight: 700;
  text-align: center;
}

.player-profile {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.player-profile[hidden] {
  display: none;
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  gap: 24px;
  align-items: stretch;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 214, 92, 0.22), transparent 34%),
    linear-gradient(145deg, #fff, #fff7fb);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.profile-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex-wrap: wrap;
}

.profile-avatar {
  width: 86px;
  height: 86px;
  flex: 0 0 86px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  outline: 3px solid var(--hot);
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  box-shadow: 0 8px 20px rgba(198, 79, 255, 0.25);
  color: #fff;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

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

.profile-display-name {
  margin: 0;
  color: var(--berry);
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.profile-username {
  margin-top: 4px;
  color: var(--hot-dark);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.profile-owner-badge {
  align-self: flex-start;
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  white-space: nowrap;
}

.profile-bio {
  max-width: 650px;
  margin: 20px 0 8px;
  color: #7c4164;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.profile-meta {
  color: #b06b92;
  font-size: 12px;
  font-weight: 700;
}

.profile-favourite {
  min-width: 0;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 227, 241, 0.72);
  border: 2px solid rgba(255, 79, 163, 0.14);
  text-align: center;
}

.profile-favourite h3,
.profile-rarest h3,
.profile-edit-card h3 {
  margin: 0 0 12px;
  color: var(--berry);
  font-family: var(--font-display);
  font-size: 18px;
}

.profile-card-preview {
  width: min(100%, 185px);
  margin: 0 auto;
}

.profile-card-preview .item-card {
  width: 100%;
  cursor: default;
}

.profile-card-preview .item-card:hover {
  transform: none;
}

.profile-card-preview .item-image-wrap {
  width: 100%;
  aspect-ratio: 5 / 7;
}

.profile-card-preview .item-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.profile-card-preview .card-value-badge {
  font-size: 9px;
  padding: 4px 7px;
}

.profile-empty-card {
  display: grid;
  place-items: center;
  min-height: 170px;
  padding: 20px;
  border: 2px dashed var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #aa668d;
  font-size: 13px;
  font-weight: 700;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.profile-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 108px;
  padding: 16px 12px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(255, 79, 163, 0.11);
  text-align: center;
}

.profile-stat-value {
  max-width: 100%;
  color: var(--berry);
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 25px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.profile-stat-label {
  color: var(--hot-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.profile-rarest {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 126px;
  padding: 18px 22px;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(255, 79, 163, 0.1);
}

.profile-rarest-thumb {
  width: 72px;
  height: 100px;
  flex: 0 0 72px;
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: var(--line);
  box-shadow: 0 5px 14px rgba(90, 23, 64, 0.22);
}

.profile-rarest-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.profile-rarest h3 {
  margin-bottom: 5px;
}

.profile-rarest p {
  margin: 0;
  color: #8a4d70;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.profile-edit-card {
  padding: 22px;
  border: 2px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow);
}

.profile-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.profile-edit-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--berry);
  font-size: 12px;
  font-weight: 700;
}

.profile-edit-field.full {
  grid-column: 1 / -1;
}

.profile-edit-field input,
.profile-edit-field textarea,
.profile-edit-field select {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  border: 2px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: #fffafd;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}

.profile-edit-field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.profile-edit-field select {
  cursor: pointer;
}

.profile-favourite-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.profile-favourite-clear {
  min-width: 76px;
}

.profile-avatar-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.profile-avatar-choice {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 104px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fffafd;
  color: var(--berry);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.profile-avatar-choice:hover {
  transform: translateY(-2px);
  border-color: var(--bubblegum);
}

.profile-avatar-choice.selected {
  border-color: var(--hot);
  box-shadow: 0 0 0 3px rgba(255,79,163,.14), 0 8px 18px rgba(122,31,85,.12);
}

.profile-avatar-choice-image {
  width: 72px;
  height: 72px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  outline: 2px solid rgba(255,79,163,.38);
  background: #ffe5f3;
  box-shadow: 0 5px 13px rgba(90,23,64,.16);
}

.profile-avatar-choice-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-choice-initials {
  background: linear-gradient(135deg,var(--hot),var(--lilac));
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
}

.profile-avatar-choice strong {
  font-family: var(--font-display);
  font-size: 12px;
}

.profile-edit-field input:focus,
.profile-edit-field textarea:focus,
.profile-edit-field select:focus {
  border-color: var(--hot);
  box-shadow: 0 0 0 4px rgba(255, 79, 163, 0.11);
}

.profile-edit-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-form-message {
  color: var(--hot-dark);
  font-size: 12px;
  font-weight: 700;
}

.profile-form-message.error {
  color: #b42318;
}

@media (max-width: 900px) {
  .profile-hero {
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  .profile-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .profile-view-toolbar {
    flex-direction: column;
  }

  .profile-search {
    width: 100%;
    justify-content: flex-start;
  }

  .profile-search input {
    width: 100%;
  }

  .profile-hero {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .profile-name-row {
    align-items: center;
  }

  .profile-owner-badge {
    margin-left: 0;
  }

  .profile-favourite {
    width: 100%;
  }

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

  .profile-edit-form {
    grid-template-columns: 1fr;
  }

  .profile-edit-field.full,
  .profile-edit-actions {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .profile-avatar {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
    font-size: 23px;
  }

  .profile-stats {
    grid-template-columns: 1fr;
  }

  .profile-rarest {
    align-items: flex-start;
  }
}


/* Keep the Collection Value label crisp on the 3D Fusion reward face.
   backdrop-filter becomes rasterised and blurry while the parent flips. */
.fusion-core-front .card-value-badge {
  background: rgba(78, 23, 61, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateZ(3px);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}


/* =========================================================
   CUSTOM COIN ICON
   ========================================================= */

.coin-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  vertical-align: middle;
}

.coin-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  object-fit: contain;
  vertical-align: -0.12em;
  pointer-events: none;
  user-select: none;
}

.card-value-badge .coin-icon,
.fusion-core-front .card-value-badge .coin-icon {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
}

.daily-wheel-result .coin-icon,
.daily-spin-topbar-btn .coin-icon,
.wallet-balance .coin-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.shop-price .coin-icon,
.pack-price .coin-icon,
.btn .coin-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}


/* =========================================================
   COIN SHOP
   ========================================================= */
.wallet-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wallet-add-btn {
  width: 32px;
  height: 32px;
  border: 2px solid #FFD65C;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff8cc, #FFD65C);
  color: #6b4e00;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(255, 214, 92, 0.45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.wallet-add-btn:hover {
  transform: scale(1.09) rotate(4deg);
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(255, 214, 92, 0.7);
}
.wallet-add-btn:active { transform: scale(.94); }

.coin-shop-overlay {
  padding: 24px;
  overflow-y: auto;
}
.coin-shop-card {
  position: relative;
  width: min(940px, 100%);
  margin: auto;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,214,92,.24), transparent 34%),
    linear-gradient(155deg, #fff 0%, #fff3fa 58%, #fff8dc 100%);
  box-shadow: 0 28px 80px rgba(84, 25, 65, .28);
  text-align: center;
}
.coin-shop-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--berry);
  font-size: 25px;
  box-shadow: 0 5px 16px rgba(84,25,65,.14);
}
.coin-shop-kicker {
  color: var(--hot-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}
.coin-shop-card h2 {
  margin: 7px 0 14px;
  color: var(--berry);
  font-size: clamp(30px, 5vw, 48px);
}
.coin-shop-balance {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  color: var(--berry);
  box-shadow: inset 0 0 0 1px rgba(255,79,163,.13);
}
.coin-shop-balance span { font-size: 13px; font-weight: 700; opacity: .75; }
.coin-shop-balance strong { font-size: 18px; }
.coin-bundle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.coin-bundle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 300px;
  padding: 26px 18px 18px;
  border: 2px solid rgba(255,158,219,.32);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 28px rgba(84,25,65,.1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.coin-bundle:hover {
  transform: translateY(-7px);
  border-color: var(--hot);
  box-shadow: 0 20px 38px rgba(255,79,163,.22);
}
.coin-bundle-featured {
  border-color: #FFD65C;
  background: linear-gradient(180deg, #fffdf2, #fff7cd);
  transform: scale(1.035);
}
.coin-bundle-featured:hover { transform: scale(1.035) translateY(-7px); }
.coin-bundle-mega {
  border-color: #C64FFF;
  background: linear-gradient(160deg, #fff 0%, #f8eaff 45%, #fff4c8 100%);
}
.coin-bundle-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4fa3, #c64fff);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  white-space: nowrap;
  box-shadow: 0 6px 15px rgba(198,79,255,.3);
}
.coin-bundle-icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin: 3px 0 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 20%, #fff2a6 68%, #ffd65c 100%);
  box-shadow: 0 9px 24px rgba(255,214,92,.35);
}
.coin-bundle-icon img { width: 58px; height: 58px; object-fit: contain; }
.coin-bundle h3 { margin: 0; color: var(--berry); font-size: 21px; }
.coin-bundle-bonus {
  margin: 10px 0 3px;
  color: #b63cf0;
  font-size: 14px;
  font-weight: 900;
}
.coin-bundle-total { margin: 6px 0 18px; color: var(--berry); font-size: 13px; font-weight: 700; opacity: .68; }
.coin-bundle-buy { width: 100%; margin-top: auto; font-size: 17px; }
.coin-shop-disclosure {
  margin: 24px auto 0;
  padding: 14px 16px;
  max-width: 760px;
  border: 1px solid rgba(198,79,255,.18);
  border-radius: 16px;
  color: var(--berry);
  background: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}
.coin-shop-disclosure strong {
  display: block;
  margin-bottom: 3px;
  color: var(--hot-dark);
  font-size: 13px;
}
.coin-shop-disclosure p { margin: 0; }
.coin-shop-disclosure a { color: var(--hot-dark); font-weight: 900; }
.coin-shop-note { margin: 24px 0 0; color: var(--berry); font-size: 13px; opacity: .7; }
@media (max-width: 850px) {
  .coin-bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coin-bundle-featured { transform: none; }
  .coin-bundle-featured:hover { transform: translateY(-7px); }
}
@media (max-width: 520px) {
  .coin-shop-card { padding: 30px 16px 20px; border-radius: 24px; }
  .coin-bundle-grid { grid-template-columns: 1fr; }
  .coin-bundle { min-height: 260px; }
  .profile-bar { gap: 7px; }
  .balance-pill { padding: 7px 10px; }
}


/* Provider-neutral checkout status and purchase history */
.coin-checkout-status {
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}
.coin-checkout-status-info,
.coin-checkout-status-loading { background: rgba(198, 79, 255, .10); color: #742096; }
.coin-checkout-status-success { background: rgba(36, 176, 112, .12); color: #176c48; }
.coin-checkout-status-error { background: rgba(218, 45, 93, .11); color: #a01842; }
.coin-bundle-buy:disabled { opacity: .62; cursor: wait; transform: none !important; }
.coin-purchase-history { margin-top: 22px; text-align: left; }
.coin-purchase-history h3 { margin: 0 0 10px; font-size: 16px; color: var(--berry); }
#coinPurchaseHistoryList { display: grid; gap: 8px; }
.coin-purchase-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 31, 85, .12);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
}
.coin-purchase-row > div { display: grid; gap: 2px; }
.coin-purchase-row strong .coin-icon { width: 17px; height: 17px; }
.coin-purchase-row span { font-size: 12px; color: rgba(90, 23, 64, .72); }
.coin-purchase-status { padding: 5px 8px; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.coin-purchase-status-paid { background: rgba(36, 176, 112, .14); color: #176c48 !important; }
.coin-purchase-status-pending,
.coin-purchase-status-awaiting_provider { background: rgba(255, 178, 58, .17); color: #8d5700 !important; }
.coin-purchase-status-failed,
.coin-purchase-status-cancelled,
.coin-purchase-status-refunded { background: rgba(218, 45, 93, .11); color: #a01842 !important; }


/* =========================================================
   SITE FOOTER + TERMS PAGE
   ========================================================= */
.site-footer {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 28px auto 0;
  padding: 22px 32px 30px;
  border-top: 1px solid rgba(122, 31, 85, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #8f5275;
  font-size: 14px;
  font-weight: 700;
}
.site-footer p { margin: 0; }
.site-footer a {
  color: var(--berry);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.site-footer a:hover {
  color: var(--hot);
  transform: translateY(-1px);
}

/* The transparent Series 1 pack artwork floats above the card instead of
   sitting on a solid pink image panel. */
.pack-image-wrap-s1 {
  background: transparent;
  padding: 18px 18px 4px;
  box-sizing: border-box;
  overflow: visible;
}
.pack-image-wrap-s1 img {
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(122, 31, 85, .20));
}

.terms-body {
  min-height: 100vh;
  background: linear-gradient(180deg, #fff7fc 0%, #ffeaf6 100%);
}
.terms-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 32px;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(122,31,85,.12);
  backdrop-filter: blur(14px);
}
.terms-topbar .brand-logo { max-height: 52px; width: auto; }
.terms-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--berry);
  text-decoration: none;
  font-weight: 800;
}
.terms-back-link:hover { color: var(--hot); }
.terms-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 28px 64px;
}
.terms-card {
  background: rgba(255,255,255,.94);
  border: 2px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 52px);
}
.terms-card h1 {
  margin: 0 0 34px;
  color: var(--berry);
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.08;
}
.terms-card h2 {
  margin: 34px 0 12px;
  color: var(--berry);
  font-family: 'Fredoka', sans-serif;
  font-size: 21px;
}
.terms-card h3 {
  margin: 22px 0 8px;
  color: #7a1f55;
  font-size: 17px;
}
.terms-card p,
.terms-card li {
  color: #70435e;
  line-height: 1.72;
}
.terms-card ul { padding-left: 24px; }
.terms-contact-placeholder {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff0f8;
  border: 1px dashed #e78bbb;
  color: #9b4a78;
  font-weight: 800;
}
@media (max-width: 700px) {
  .site-footer {
    padding: 20px;
    flex-direction: column;
    text-align: center;
  }
  .terms-topbar { padding: 14px 18px; }
  .terms-main { padding: 28px 16px 44px; }
  .terms-card { border-radius: 20px; }
}


/* Legal page navigation and shared policy styling */
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 18px;
}
.legal-updated {
  margin: -22px 0 28px !important;
  color: #a56a8b !important;
  font-size: 14px;
  font-weight: 700;
}
.terms-card a { color: var(--berry); font-weight: 800; }
.terms-card a:hover { color: var(--hot); }
@media (max-width: 700px) {
  .site-footer-links { justify-content: center; }
}


.coin-bundle-loading {
  grid-column: 1 / -1;
  padding: 28px 18px;
  text-align: center;
  font-weight: 700;
  color: rgba(255,255,255,.78);
}

/* =========================================================================
   COLLECTOR JOURNAL, ACHIEVEMENTS AND LEVELS
   ========================================================================= */
.journal-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.journal-heading-row .view-heading { margin-bottom: 0; }
.journal-refresh-btn {
  background: white;
  color: var(--berry);
  border: 2px solid var(--line);
}
.journal-state {
  padding: 50px 20px;
  text-align: center;
  color: var(--hot-dark);
  font-weight: 700;
}
.collector-journal { display: grid; gap: 28px; }
.collector-level-card {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff 0%, #fff0f8 52%, #ffe2f1 100%);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.collector-level-card::after {
  content: "✦";
  position: absolute;
  right: 22px;
  top: 10px;
  font-size: 64px;
  color: rgba(255, 79, 163, .10);
}
.collector-level-badge {
  width: 112px;
  min-width: 112px;
  border-radius: 22px;
  display: grid;
  place-content: center;
  text-align: center;
  background: linear-gradient(145deg, var(--hot), var(--lilac));
  color: white;
  box-shadow: 0 10px 24px rgba(198, 79, 255, .28);
}
.collector-level-badge span { font: 700 12px var(--font-display); letter-spacing: 1.6px; }
.collector-level-badge strong { font: 700 42px var(--font-display); line-height: 1; margin-top: 4px; }
.collector-level-content { flex: 1; min-width: 0; align-self: center; }
.collector-level-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}
.collector-level-kicker { font-size: 11px; font-weight: 800; color: var(--hot-dark); letter-spacing: 1.2px; }
.collector-level-title-row h2 { margin: 2px 0 0; color: var(--berry); font-size: 25px; }
.collector-level-title-row > strong { color: var(--lilac); font: 700 18px var(--font-display); white-space: nowrap; }
.collector-xp-track { height: 15px; border-radius: 999px; background: var(--line); overflow: hidden; box-shadow: inset 0 2px 4px rgba(90,23,64,.12); }
.collector-xp-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hot), var(--lilac), var(--gold)); transition: width .45s ease; }
.collector-xp-caption { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; font-weight: 700; color: #9b4a78; }
.journal-section-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.journal-section-title h2 { margin: 0; color: var(--berry); font-size: 22px; }
.journal-section-title span { font-size: 13px; font-weight: 800; color: var(--hot-dark); }
.journal-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; }
.journal-stat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 86px;
  padding: 15px;
  border-radius: 17px;
  background: white;
  border: 2px solid var(--line);
  box-shadow: 0 5px 14px rgba(255,79,163,.10);
}
.journal-stat-icon { width: 43px; height: 43px; border-radius: 13px; display: grid; place-items: center; font-size: 23px; background: #fff0f8; flex-shrink: 0; }
.journal-stat-card div { min-width: 0; display: grid; gap: 3px; }
.journal-stat-card div > span { font-size: 11px; font-weight: 800; color: #9b4a78; text-transform: uppercase; letter-spacing: .5px; }
.journal-stat-card strong { color: var(--berry); font: 700 17px var(--font-display); overflow-wrap: anywhere; }
.achievement-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.achievement-filter { padding: 8px 14px; border-radius: 999px; background: white; border: 2px solid var(--line); color: var(--berry); font-weight: 800; font-size: 12px; }
.achievement-filter.active { background: var(--hot); border-color: var(--hot); color: white; box-shadow: 0 4px 10px rgba(255,79,163,.28); }
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.achievement-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 13px;
  padding: 17px;
  border-radius: 19px;
  background: white;
  border: 2px solid var(--line);
  box-shadow: 0 6px 16px rgba(255,79,163,.11);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.achievement-card.unlocked { border-color: var(--gold); background: linear-gradient(145deg, #fff 0%, #fffaf0 100%); }
.achievement-card.unlocked:not(.claimed) { box-shadow: 0 8px 24px rgba(255,214,92,.28); }
.achievement-card.locked { filter: grayscale(.28); opacity: .78; }
.achievement-card:hover { transform: translateY(-2px); }
.achievement-card-icon { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-size: 29px; background: #fff0f8; border: 2px solid var(--line); }
.achievement-card.unlocked .achievement-card-icon { background: #fff4c9; border-color: var(--gold); }
.achievement-card-copy { min-width: 0; }
.achievement-category { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--hot-dark); }
.achievement-card h3 { margin: 2px 0 5px; font: 700 18px var(--font-display); color: var(--berry); }
.achievement-card p { margin: 0; color: #8d4d72; font-size: 12px; line-height: 1.45; }
.achievement-card small { display: block; margin-top: 8px; color: #aa7895; font-size: 10px; font-weight: 700; }
.achievement-rewards { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.achievement-rewards span { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 999px; background: #fff0f8; color: var(--berry); font-size: 11px; font-weight: 800; }
.achievement-rewards .coin-icon { width: 14px; height: 14px; }
.achievement-card-action { grid-column: 1 / -1; }
.achievement-claim-btn { width: 100%; padding: 9px 13px; }
.achievement-claim-btn .coin-icon { width: 15px; height: 15px; vertical-align: -2px; }
.achievement-status { width: 100%; padding: 8px; border-radius: 999px; text-align: center; font: 700 11px var(--font-display); letter-spacing: 1px; }
.achievement-status.locked { background: #f1e4ec; color: #a98a9e; }
.achievement-status.unlocked { background: #fff0b7; color: #7b5c00; }
.achievement-status.claimed { background: #e7f9ef; color: #26704a; }
.achievement-toast-stack { position: fixed; top: 92px; right: 22px; z-index: 1500; width: min(370px, calc(100vw - 28px)); pointer-events: none; }
.achievement-toast {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  border: 2px solid var(--gold);
  box-shadow: 0 16px 40px rgba(90,23,64,.26);
  transform: translateX(calc(100% + 40px));
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.achievement-toast.show { transform: translateX(0); opacity: 1; }
.achievement-toast-icon { width: 51px; height: 51px; border-radius: 15px; display: grid; place-items: center; font-size: 27px; background: #fff4c9; flex-shrink: 0; }
.achievement-toast-copy { display: grid; gap: 2px; min-width: 0; }
.achievement-toast-copy > span { color: var(--hot-dark); font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.achievement-toast-copy strong { color: var(--berry); font: 700 17px var(--font-display); }
.achievement-toast-copy small { color: #8d4d72; font-size: 11px; font-weight: 700; }
.achievement-toast-copy .coin-icon { width: 14px; height: 14px; vertical-align: -2px; }

@media (max-width: 700px) {
  .journal-heading-row { align-items: stretch; flex-direction: column; }
  .journal-refresh-btn { align-self: flex-start; }
  .collector-level-card { flex-direction: column; }
  .collector-level-badge { width: 100%; min-width: 0; height: 90px; }
  .collector-level-title-row { align-items: flex-start; flex-direction: column; }
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement-toast-stack { top: 78px; right: 14px; }
}

.collector-level-pill {
  min-width: 48px;
  height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  color: white;
  font: 700 12px var(--font-display);
  box-shadow: 0 4px 10px rgba(198,79,255,.25);
  white-space: nowrap;
}
.collector-level-pill:hover { transform: translateY(-1px); }

/* Compact player identity in the top bar */
.player-identity-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  max-width: 210px;
  padding: 7px 13px 7px 15px;
  border: 2px solid rgba(255, 79, 163, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,240,248,.96));
  color: var(--berry);
  box-shadow: 0 5px 14px rgba(255,79,163,.14);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.player-identity-pill:hover {
  transform: translateY(-1px);
  border-color: var(--hot);
  box-shadow: 0 7px 17px rgba(255,79,163,.22);
}
.player-identity-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 700 14px var(--font-display);
}
.player-identity-divider {
  width: 1px;
  height: 17px;
  flex: 0 0 1px;
  background: var(--line);
}
.player-identity-level {
  flex-shrink: 0;
  color: var(--hot-dark);
  font: 700 11px var(--font-display);
  letter-spacing: .15px;
}

@media (max-width: 520px) {
  .player-identity-pill {
    max-width: 145px;
    min-height: 34px;
    padding: 6px 10px 6px 12px;
    gap: 7px;
  }
  .player-identity-name { font-size: 12px; }
  .player-identity-level { font-size: 10px; }
}


/* Collector Journal embedded in public and personal profiles */
.profile-journal-section { margin-top: 24px; display: grid; gap: 20px; }
.profile-journal-heading { padding-top: 8px; border-top: 2px solid var(--line); }
.profile-journal-heading > div { display: grid; gap: 2px; }
.profile-journal-heading h2 { margin: 0; }
.profile-collector-level-card { margin: 0; }
.profile-achievements-title { margin-top: 4px; }
.journal-xp-track { height: 13px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 14px; }
.journal-xp-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hot), var(--lilac), var(--gold)); transition: width .45s ease; }
.journal-xp-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: #9b4a78; font-size: 11px; font-weight: 800; }
@media (max-width: 620px) { .journal-xp-labels { flex-direction: column; gap: 3px; } }


/* Collector level now lives in the public profile hero. */
.profile-level-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(100%, 520px);
  margin-top: 17px;
  padding: 13px 15px;
  border: 2px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 5px 14px rgba(255,79,163,.09);
}
.profile-level-number {
  width: 66px;
  min-width: 66px;
  height: 66px;
  border-radius: 15px;
  display: grid;
  place-content: center;
  text-align: center;
  background: linear-gradient(145deg, var(--hot), var(--lilac));
  color: white;
  box-shadow: 0 7px 16px rgba(198,79,255,.24);
}
.profile-level-number span { font: 700 9px var(--font-display); letter-spacing: 1.2px; }
.profile-level-number strong { font: 700 27px var(--font-display); line-height: 1; margin-top: 3px; }
.profile-level-details { flex: 1; min-width: 0; }
.profile-level-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.profile-level-heading strong { color: var(--berry); font: 700 16px var(--font-display); }
.profile-level-heading span { color: var(--lilac); font-size: 12px; font-weight: 800; white-space: nowrap; }
.profile-level-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--line); box-shadow: inset 0 2px 3px rgba(90,23,64,.10); }
.profile-level-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hot), var(--lilac), var(--gold)); }
.profile-level-details small { display: block; margin-top: 5px; color: #9b4a78; font-size: 11px; font-weight: 700; }
@media (max-width: 520px) {
  .profile-level-summary { align-items: stretch; }
  .profile-level-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
}


/* Recently Pulled live activity feed */
.recent-pulls-section {
  margin-top: 34px;
  background: rgba(255,255,255,.76);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  backdrop-filter: blur(8px);
}
.recent-pulls-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.recent-pulls-heading h2 { margin: 2px 0 0; color: var(--berry); font-size: 23px; }
.recent-pulls-kicker { font-size: 10px; letter-spacing: .16em; font-weight: 800; color: var(--hot-dark); }
.recent-pulls-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: #8a315f; }
.recent-pulls-live span { width: 9px; height: 9px; border-radius: 50%; background: #35c76f; box-shadow: 0 0 0 4px rgba(53,199,111,.14); animation: recentLivePulse 1.8s ease-in-out infinite; }
@keyframes recentLivePulse { 50% { transform: scale(.72); opacity: .65; } }
.recent-pulls-list { display: grid; gap: 10px; }
.recent-pulls-state { padding: 24px; text-align: center; color: #9b4a78; font-weight: 700; }
.recent-pull-row {
  --recent-rarity: var(--line);
  display: grid;
  grid-template-columns: 66px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 12px 10px 10px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--recent-rarity);
  border-radius: 15px;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(90,23,64,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.recent-pull-row:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(255,79,163,.16); border-color: var(--recent-rarity); }
.recent-pull-row.new-entry { animation: recentPullIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes recentPullIn { from { opacity:0; transform:translateY(-12px) scale(.98); } }
.recent-pull-thumb { width: 58px; aspect-ratio: 5/7; border-radius: 9px; overflow: hidden; border: 2px solid var(--recent-rarity); background: #ffe6f2; position: relative; }
.recent-pull-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.recent-pull-main { min-width: 0; }
.recent-pull-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 9px; margin-bottom:3px; }
.recent-pull-user { font-weight:800; color:var(--hot-dark); }
.recent-pull-time { font-size:11px; font-weight:700; color:#aa7594; }
.recent-pull-name { display:block; font-family:var(--font-display); font-weight:700; color:var(--berry); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-pull-handle { font-size:11px; color:#9b4a78; font-weight:700; }
.recent-pull-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.recent-pull-tags .rarity-tag { font-size:9px; padding:3px 7px; }
.recent-pull-value { white-space:nowrap; font-size:11px; font-weight:800; color:var(--berry); }
.recent-pull-row.postcard-pull { background:linear-gradient(120deg,#fff,#fff4f8,#fff9e8); }
.global-pull-toast {
  position:fixed; top:88px; right:22px; z-index:1500; width:min(360px,calc(100vw - 32px));
  border:2px solid #ff7fa8; border-radius:20px; background:linear-gradient(135deg,#fff,#fff0f6,#fff5cc);
  box-shadow:0 20px 50px rgba(122,31,85,.28); padding:16px; cursor:pointer;
  animation:globalPullIn .5s cubic-bezier(.2,.9,.25,1), globalPullGlow 1.7s ease-in-out infinite;
}
@keyframes globalPullIn { from { opacity:0; transform:translateX(35px) scale(.94); } }
@keyframes globalPullGlow { 50% { box-shadow:0 20px 58px rgba(255,127,168,.48); } }
.global-pull-toast-title { font-family:var(--font-display); font-weight:800; color:var(--hot-dark); letter-spacing:.06em; }
.global-pull-toast-copy { margin-top:5px; color:var(--berry); font-weight:700; }
.global-pull-toast small { display:block; margin-top:5px; color:#9b4a78; }
@media (max-width:640px) {
  .recent-pull-row { grid-template-columns:56px minmax(0,1fr); }
  .recent-pull-thumb { width:50px; }
  .recent-pull-value { grid-column:2; }
  .global-pull-toast { top:76px; right:16px; }
}

/* Shop live layout: packs on the left, community feed on the right */
.shop-live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  gap: 28px;
  align-items: start;
}
.shop-packs-column { min-width: 0; }
.shop-live-layout .pack-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.shop-live-layout .recent-pulls-section {
  position: sticky;
  top: 96px;
  margin-top: 0;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.shop-live-layout .recent-pulls-list {
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--bubblegum) transparent;
}
.collectors-online {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(53, 199, 111, .09);
  border: 1px solid rgba(53, 199, 111, .22);
  color: #28794a;
  font-size: 12px;
  font-weight: 700;
}
.collectors-online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #35c76f;
  box-shadow: 0 0 0 4px rgba(53,199,111,.14);
  flex: 0 0 auto;
}
.shop-live-layout .recent-pull-row {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}
.shop-live-layout .recent-pull-thumb { width: 54px; }
.shop-live-layout .recent-pull-value {
  grid-column: 2;
  justify-self: start;
}

@media (max-width: 900px) {
  .shop-live-layout { grid-template-columns: 1fr; }
  .shop-live-layout .recent-pulls-section {
    position: static;
    max-height: none;
  }
  .shop-live-layout .recent-pulls-list {
    max-height: 560px;
  }
}


/* =====================================================================
   PREMIUM BOOSTER PACK OPENING
   Keeps the pack artwork at its natural proportions so it reads as a
   sealed foil pack rather than an image clipped into a trading card.
   ===================================================================== */
.suspense-stage {
  min-height: 440px;
  justify-content: center;
  perspective: 1000px;
}

.suspense-pack {
  position: relative;
  width: clamp(185px, 24vw, 250px);
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transform-origin: 50% 68%;
  isolation: isolate;
  animation: premiumPackIdle 2.6s ease-in-out infinite;
  will-change: transform, filter;
}

.suspense-pack::before {
  content: "";
  position: absolute;
  inset: 3% 7%;
  z-index: 2;
  pointer-events: none;
  opacity: .7;
  mix-blend-mode: screen;
  background: linear-gradient(
    112deg,
    transparent 18%,
    rgba(255,255,255,.05) 31%,
    rgba(255,255,255,.75) 43%,
    rgba(255,255,255,.18) 50%,
    transparent 62%
  );
  transform: translateX(-145%) skewX(-8deg);
  animation: foilSweep 3.4s ease-in-out infinite;
  clip-path: inset(0 0 0 0 round 8px);
}

.suspense-pack::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -7%;
  height: 12%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(50, 8, 34, .52);
  filter: blur(15px);
  transform: scaleX(.9);
  animation: premiumPackShadow 2.6s ease-in-out infinite;
}

.suspense-pack img {
  width: 100%;
  height: auto;
  max-height: min(58vh, 430px);
  object-fit: contain;
  display: block;
  border-radius: 0;
  filter:
    drop-shadow(0 9px 8px rgba(45, 7, 31, .62))
    drop-shadow(0 22px 24px rgba(90, 23, 64, .34));
  user-select: none;
  -webkit-user-drag: none;
  transition: filter .25s ease;
}

.suspense-pack.pressed {
  animation: packGrab .18s cubic-bezier(.2,.8,.2,1) both;
}

.suspense-pack.shaking {
  animation: premiumPackCrinkle .24s ease-in-out infinite;
}

.suspense-pack.charged {
  box-shadow: none;
}

.suspense-pack.charged img {
  filter:
    brightness(1.08)
    saturate(1.08)
    drop-shadow(0 0 8px rgba(255,255,255,.9))
    drop-shadow(0 0 24px rgba(255,79,163,.75))
    drop-shadow(0 24px 25px rgba(90,23,64,.4));
}

.suspense-pack.bursting {
  animation: premiumPackRip .43s cubic-bezier(.18,.82,.2,1) forwards;
}

.suspense-pack.bursting::before {
  animation: ripFlash .35s ease-out forwards;
}

@keyframes premiumPackIdle {
  0%, 100% { transform: translateY(0) rotateZ(-.35deg) rotateX(0deg); }
  35% { transform: translateY(-8px) rotateZ(.7deg) rotateX(1deg); }
  70% { transform: translateY(-3px) rotateZ(-.6deg) rotateX(-.5deg); }
}

@keyframes premiumPackShadow {
  0%, 100% { opacity: .62; transform: scaleX(.82) scaleY(.9); }
  35% { opacity: .38; transform: scaleX(1.03) scaleY(.72); }
  70% { opacity: .5; transform: scaleX(.92) scaleY(.82); }
}

@keyframes foilSweep {
  0%, 54% { transform: translateX(-145%) skewX(-8deg); opacity: 0; }
  62% { opacity: .75; }
  82% { transform: translateX(145%) skewX(-8deg); opacity: .5; }
  100% { transform: translateX(145%) skewX(-8deg); opacity: 0; }
}

@keyframes packGrab {
  0% { transform: translateY(0) scale(1); }
  55% { transform: translateY(8px) scaleX(1.06) scaleY(.91); }
  100% { transform: translateY(-2px) scaleX(.98) scaleY(1.035); }
}

@keyframes premiumPackCrinkle {
  0%, 100% { transform: translate(0,0) rotate(-.5deg) scale(1.035); }
  20% { transform: translate(-5px,2px) rotate(-2.4deg) scaleX(1.055) scaleY(1.01); }
  45% { transform: translate(5px,-2px) rotate(2.2deg) scaleX(1.01) scaleY(1.05); }
  70% { transform: translate(-3px,-3px) rotate(-1.5deg) scale(1.045); }
}

@keyframes premiumPackRip {
  0% { transform: scale(1.05) rotate(0deg); filter: brightness(1); opacity: 1; }
  28% { transform: scaleX(.92) scaleY(1.15) rotate(-2deg); filter: brightness(1.35) saturate(1.2); }
  58% { transform: scaleX(1.24) scaleY(.92) rotate(3deg); filter: brightness(2.1) saturate(1.45); opacity: .95; }
  100% { transform: translateY(-28px) scale(1.62) rotate(8deg); filter: brightness(2.8) blur(8px); opacity: 0; }
}

@keyframes ripFlash {
  0% { opacity: .7; transform: translateX(-110%) skewX(-8deg); }
  60% { opacity: 1; transform: translateX(20%) skewX(-8deg) scaleX(1.6); }
  100% { opacity: 0; transform: translateX(100%) skewX(-8deg) scaleX(2); }
}

/* The newly created cards appear to fly out from where the pack was. */
.reveal-stage.cards-emerging .reveal-card {
  opacity: 0;
  animation: cardEmergeFromPack .62s cubic-bezier(.16,.84,.24,1.16) both;
}
.reveal-stage.cards-emerging .reveal-card:nth-child(1) {
  --emerge-x: 80px;
  --emerge-r: -8deg;
  animation-delay: .03s;
}
.reveal-stage.cards-emerging .reveal-card:nth-child(2) {
  --emerge-x: 0px;
  --emerge-r: 0deg;
  animation-delay: .11s;
}
.reveal-stage.cards-emerging .reveal-card:nth-child(3) {
  --emerge-x: -80px;
  --emerge-r: 8deg;
  animation-delay: .19s;
}

@keyframes cardEmergeFromPack {
  0% {
    opacity: 0;
    transform: translate(var(--emerge-x, 0), -105px) scale(.42) rotate(var(--emerge-r, 0deg));
    filter: blur(5px) brightness(1.8);
  }
  65% {
    opacity: 1;
    transform: translate(0, 8px) scale(1.045) rotate(0deg);
    filter: blur(0) brightness(1.08);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: none;
  }
}

@media (max-width: 600px) {
  .suspense-stage { min-height: 380px; padding: 6px 0; }
  .suspense-pack { width: clamp(170px, 54vw, 220px); }
  .suspense-pack img { max-height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
  .suspense-pack,
  .suspense-pack::before,
  .suspense-pack::after,
  .reveal-stage.cards-emerging .reveal-card {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   LEADERBOARDS
   ========================================================= */

.leaderboard-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.leaderboard-page-heading > div {
  min-width: 0;
}

.leaderboard-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--hot);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.leaderboard-refresh-btn {
  flex: 0 0 auto;
  min-width: 104px;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--hot-dark);
}

.leaderboard-refresh-btn:hover:not(:disabled) {
  border-color: var(--hot);
  color: var(--hot);
}

.leaderboard-refresh-btn:disabled {
  opacity: .65;
  cursor: wait;
}

.leaderboard-shell {
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 26px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow);
}

.leaderboard-tabs {
  display: flex;
  gap: 8px;
  padding: 14px;
  overflow-x: auto;
  border-bottom: 2px solid var(--line);
  background: linear-gradient(135deg, rgba(255, 227, 241, .78), rgba(246, 230, 255, .7));
}

.leaderboard-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--berry);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.leaderboard-tab.active {
  border-color: rgba(255, 79, 163, .2);
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  box-shadow: 0 6px 16px rgba(198, 79, 255, .22);
  color: #fff;
}

.leaderboard-tab i {
  width: 15px;
  text-align: center;
}

.leaderboard-panel {
  padding: 22px;
}

.leaderboard-panel-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.leaderboard-trophy {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 214, 92, .7);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff9d8, #ffe47c);
  box-shadow: 0 8px 18px rgba(180, 126, 0, .18);
  font-size: 28px;
}

.leaderboard-panel-heading h2 {
  margin: 0 0 4px;
  color: var(--berry);
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
}

.leaderboard-panel-heading p {
  margin: 0;
  color: #96577c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.leaderboard-state {
  padding: 44px 20px;
  border: 2px dashed var(--line);
  border-radius: 18px;
  background: rgba(255, 247, 251, .78);
  color: var(--hot-dark);
  font-weight: 700;
  text-align: center;
}

.leaderboard-list {
  display: grid;
  gap: 10px;
}

.leaderboard-list[hidden] {
  display: none;
}

.leaderboard-row {
  width: 100%;
  display: grid;
  grid-template-columns: 64px 50px minmax(180px, 1fr) minmax(170px, auto) 22px;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--berry);
  text-align: left;
  box-shadow: 0 5px 14px rgba(122, 31, 85, .07);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.leaderboard-row:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 79, 163, .45);
  box-shadow: 0 9px 22px rgba(122, 31, 85, .13);
}

.leaderboard-row.is-current-player {
  border-color: var(--hot);
  box-shadow: 0 0 0 3px rgba(255, 79, 163, .1), 0 8px 20px rgba(122, 31, 85, .12);
}

.leaderboard-row.leaderboard-top-1 {
  border-color: #f2c84b;
  background: linear-gradient(100deg, rgba(255, 246, 196, .88), #fff 42%);
}

.leaderboard-row.leaderboard-top-2 {
  border-color: #c8cdd6;
  background: linear-gradient(100deg, rgba(237, 240, 245, .92), #fff 42%);
}

.leaderboard-row.leaderboard-top-3 {
  border-color: #d79a68;
  background: linear-gradient(100deg, rgba(249, 226, 207, .88), #fff 42%);
}

.leaderboard-rank {
  display: grid;
  place-items: center;
  color: var(--hot-dark);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}

.leaderboard-medal {
  font-size: 30px;
  filter: drop-shadow(0 3px 4px rgba(90, 23, 64, .18));
}

.leaderboard-medal-1 { color: #e4b72f; }
.leaderboard-medal-2 { color: #9da6b4; }
.leaderboard-medal-3 { color: #c57d48; }

.leaderboard-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  outline: 2px solid rgba(255, 79, 163, .28);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hot), var(--lilac));
  box-shadow: 0 5px 12px rgba(198, 79, 255, .22);
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
}

.leaderboard-avatar-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.leaderboard-avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaderboard-collector,
.leaderboard-value {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.leaderboard-collector strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.leaderboard-collector small {
  color: #a16689;
  font-size: 11px;
  font-weight: 700;
}

.leaderboard-you {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--hot);
  color: #fff;
  font-size: 8px;
  letter-spacing: .7px;
}

.leaderboard-value {
  align-items: flex-end;
  text-align: right;
}

.leaderboard-value small {
  color: #a16689;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.leaderboard-value strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--berry);
  font-family: var(--font-display);
  font-size: 18px;
  white-space: nowrap;
}

.leaderboard-value .coin-icon {
  width: 19px;
  height: 19px;
}

.leaderboard-chevron {
  color: var(--hot);
  font-size: 28px;
  line-height: 1;
  text-align: right;
}

@media (max-width: 760px) {
  .leaderboard-panel {
    padding: 15px;
  }

  .leaderboard-row {
    grid-template-columns: 46px 42px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 11px 12px;
  }

  .leaderboard-avatar {
    width: 40px;
    height: 40px;
  }

  .leaderboard-value {
    grid-column: 3 / 4;
    align-items: flex-start;
    text-align: left;
  }

  .leaderboard-value small {
    display: none;
  }

  .leaderboard-chevron {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 520px) {
  .leaderboard-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .leaderboard-refresh-btn {
    width: 100%;
  }

  .leaderboard-panel-heading {
    align-items: center;
  }

  .leaderboard-trophy {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 23px;
  }

  .leaderboard-row {
    grid-template-columns: 32px 38px minmax(0, 1fr) 14px;
    gap: 8px;
    padding: 10px;
  }

  .leaderboard-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    border-width: 2px;
    font-size: 15px;
  }

  .leaderboard-collector,
  .leaderboard-value {
    grid-column: 3 / 4;
  }

  .leaderboard-chevron {
    grid-column: 4;
  }

  .leaderboard-medal {
    font-size: 22px;
  }

  .leaderboard-collector small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* =========================================================
   GROUPED CHARACTER COLLECTION + VARIANT BINDER
   ========================================================= */

body.modal-open {
  overflow: hidden;
}

#view-inventory .inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px;
}

.collection-character-card {
  width: 100%;
  min-width: 0;
  appearance: none;
  color: var(--ink);
  font-family: var(--font-body);
}

.collection-character-card:not(.locked) {
  padding-bottom: 10px;
}

.collection-character-card:focus-visible,
.variant-binder-card:focus-visible {
  outline: 4px solid rgba(255, 79, 163, .24);
  outline-offset: 3px;
}

.collection-character-card .item-name {
  font-size: 15px;
}

.collection-character-card .item-handle {
  font-size: 11px;
}

.collection-copy-badge {
  min-width: 32px;
  padding: 5px 8px;
  background: rgba(90, 23, 64, .92);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 3px 10px rgba(74, 22, 58, .24);
  font-size: 11px;
}

.collection-best-variant {
  width: fit-content;
  max-width: 100%;
  margin: 7px auto 8px;
  padding: 4px 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 79, 163, .1);
  color: var(--hot-dark);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-variant-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  color: #955574;
  font-size: 10px;
  font-weight: 800;
}

.collection-variant-track {
  height: 7px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
  box-shadow: inset 0 1px 2px rgba(90, 23, 64, .08);
}

.collection-variant-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hot), var(--lilac));
}

.collection-character-card .rarity-tags {
  min-height: 21px;
  margin-top: 10px;
}

.collection-binder-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 10px -12px -10px;
  padding: 9px 10px;
  border-top: 1px solid rgba(255, 79, 163, .13);
  background: rgba(255, 227, 241, .46);
  color: var(--hot-dark);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}

.collection-binder-action span {
  font-size: 18px;
  line-height: .7;
  transition: transform .18s ease;
}

.collection-character-card:hover .collection-binder-action span {
  transform: translateX(3px);
}

.collection-character-locked {
  align-self: stretch;
}

.collection-character-locked .collection-variant-line {
  margin-top: 12px;
  color: #b17b9c;
}

.variant-binder-overlay {
  z-index: 115;
  align-items: center;
  overflow-y: auto;
}

.variant-binder {
  position: relative;
  width: min(1080px, 100%);
  max-height: calc(100vh - 40px);
  padding: 26px;
  overflow-y: auto;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(198, 79, 255, .12), transparent 32%),
    radial-gradient(circle at 0% 0%, rgba(255, 79, 163, .13), transparent 30%),
    linear-gradient(160deg, #fff, #fff7fb);
  box-shadow: 0 26px 70px rgba(90, 23, 64, .44);
}

.variant-binder-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--berry);
  font-size: 25px;
  line-height: 1;
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}

.variant-binder-close:hover {
  transform: rotate(6deg) scale(1.06);
  border-color: var(--hot);
  color: var(--hot);
}

.variant-binder-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  align-items: end;
  gap: 24px;
  margin: 0 48px 24px 0;
  padding: 2px 0 20px;
  border-bottom: 2px solid var(--line);
}

.variant-binder-kicker {
  color: var(--hot);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.variant-binder-heading-copy h2 {
  margin: 3px 0 2px;
  color: var(--berry);
  font-family: var(--font-display);
  font-size: clamp(25px, 4vw, 35px);
  line-height: 1.1;
}

.variant-binder-heading-copy > p {
  margin: 0;
  color: var(--hot-dark);
  font-size: 13px;
  font-weight: 700;
}

.variant-binder-heading-tags {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.variant-binder-count {
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff0f8;
  color: var(--hot-dark);
  font-size: 10px;
  font-weight: 800;
}

.variant-binder-progress {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
  box-shadow: inset 0 2px 3px rgba(90, 23, 64, .08);
}

.variant-binder-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hot), var(--lilac), #8ba9ff);
  box-shadow: 0 0 14px rgba(198, 79, 255, .4);
}

.variant-binder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.variant-binder-card {
  width: 100%;
  min-width: 0;
  appearance: none;
  color: var(--ink);
  font-family: var(--font-body);
}

.variant-binder-card .item-name {
  min-height: 32px;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1.2;
}

.variant-binder-card .card-value-badge {
  max-width: calc(100% - 48px);
  padding: 4px 6px;
  font-size: 9px;
}

.variant-binder-card .card-value-badge .coin-icon {
  width: 13px;
  height: 13px;
}

.variant-binder-card .rarity-tags {
  min-height: 23px;
  align-content: flex-start;
}

.variant-binder-status {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.variant-binder-status.owned-status {
  color: var(--hot-dark);
}

.variant-binder-status.locked-status {
  color: #b07b9b;
}

@media (max-width: 820px) {
  .variant-binder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #view-inventory .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }

  .collection-character-card {
    padding: 9px;
  }

  .collection-binder-action {
    margin-right: -9px;
    margin-left: -9px;
  }

  .variant-binder-overlay {
    padding: 10px;
    align-items: flex-start;
  }

  .variant-binder {
    max-height: calc(100vh - 20px);
    padding: 20px 14px;
    border-radius: 22px;
  }

  .variant-binder-header {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-right: 38px;
  }

  .variant-binder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .variant-binder-card {
    padding: 9px;
  }

  .variant-binder-card .card-value-badge {
    position: static;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 7px;
  }
}

@media (max-width: 390px) {
  #view-inventory .inventory-grid {
    grid-template-columns: 1fr;
  }

  .variant-binder-grid {
    grid-template-columns: 1fr;
  }

  .variant-binder-card {
    width: min(220px, 100%);
    margin: 0 auto;
  }
}


/* =========================================================
   HIGH-IMPACT HOLOGRAPHIC FINISH
   Deliberately louder than the original restrained foil treatment.
   ========================================================= */

.item-card.holographic {
  border-color: #7eeaff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .94),
    0 0 0 4px rgba(83, 211, 255, .48),
    0 0 24px 5px rgba(72, 205, 255, .62),
    0 0 38px 8px rgba(198, 79, 255, .36),
    0 10px 28px rgba(56, 85, 181, .3);
  animation: holographicCardGlow 2.1s ease-in-out infinite;
}

.detail-image-wrap:has(.holographic-foil) {
  box-shadow:
    0 0 0 3px rgba(222, 251, 255, .92),
    0 0 24px 5px rgba(69, 213, 255, .58),
    0 0 38px 7px rgba(191, 83, 255, .35);
}

@keyframes holographicCardGlow {
  0%, 100% {
    border-color: #74dfff;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, .9),
      0 0 0 4px rgba(83, 211, 255, .4),
      0 0 21px 4px rgba(72, 205, 255, .5),
      0 0 34px 7px rgba(198, 79, 255, .3),
      0 10px 28px rgba(56, 85, 181, .27);
  }
  50% {
    border-color: #d3f9ff;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 1),
      0 0 0 5px rgba(159, 110, 255, .56),
      0 0 31px 8px rgba(76, 226, 255, .76),
      0 0 48px 12px rgba(255, 86, 211, .43),
      0 13px 32px rgba(56, 85, 181, .34);
  }
}

.holographic-foil {
  z-index: 6;
  opacity: .88;
  mix-blend-mode: screen;
  overflow: hidden;
  background:
    radial-gradient(circle at 17% 20%, rgba(255, 255, 255, .98) 0 2%, rgba(67, 224, 255, .54) 5%, transparent 17%),
    radial-gradient(circle at 83% 74%, rgba(255, 110, 225, .8) 0 3%, rgba(133, 98, 255, .42) 9%, transparent 22%),
    conic-gradient(from 210deg at 50% 50%,
      rgba(78, 153, 255, .12),
      rgba(65, 238, 255, .72),
      rgba(255, 83, 211, .68),
      rgba(255, 235, 103, .58),
      rgba(100, 255, 174, .6),
      rgba(127, 91, 255, .72),
      rgba(78, 153, 255, .12)),
    linear-gradient(112deg,
      transparent 0 27%,
      rgba(70, 129, 255, .25) 33%,
      rgba(62, 231, 255, .88) 40%,
      rgba(255, 255, 255, 1) 48%,
      rgba(255, 92, 215, .88) 56%,
      rgba(255, 230, 98, .58) 63%,
      transparent 72% 100%),
    repeating-linear-gradient(132deg,
      rgba(235, 254, 255, .3) 0 1px,
      transparent 1px 6px);
  background-size: 180% 180%, 180% 180%, 190% 190%, 310% 100%, 12px 12px;
  background-position: 0% 0%, 100% 100%, 50% 50%, -180% 50%, 0 0;
  filter: saturate(1.9) contrast(1.14) brightness(1.22);
  box-shadow:
    inset 0 0 28px rgba(99, 226, 255, .34),
    inset 0 0 12px rgba(255, 255, 255, .28);
  animation: holographicObviousSweep 2.15s ease-in-out infinite;
}

.holographic-foil::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(108deg,
    transparent 30%,
    rgba(71, 170, 255, .2) 38%,
    rgba(89, 245, 255, .82) 44%,
    rgba(255, 255, 255, 1) 49%,
    rgba(255, 96, 220, .84) 54%,
    rgba(255, 229, 92, .38) 60%,
    transparent 69%);
  transform: translateX(-75%) rotate(3deg);
  filter: blur(.35px);
  animation: holographicObviousBand 2.15s ease-in-out infinite;
}

.holographic-foil::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .82;
  background:
    radial-gradient(circle at 15% 18%, #fff 0 1.2px, transparent 2.8px),
    radial-gradient(circle at 74% 24%, #fff 0 1px, transparent 2.5px),
    radial-gradient(circle at 43% 62%, #d8fbff 0 1.4px, transparent 3px),
    radial-gradient(circle at 86% 79%, #fff 0 1.2px, transparent 2.8px),
    radial-gradient(circle at 23% 84%, #ffd5f4 0 1px, transparent 2.6px);
  background-size: 38px 42px, 53px 47px, 61px 58px, 44px 55px, 57px 49px;
  animation: holographicSparkleDance 1.35s steps(2, end) infinite;
}

@keyframes holographicObviousSweep {
  0%, 100% {
    opacity: .68;
    background-position: 0% 0%, 100% 100%, 30% 48%, -180% 50%, 0 0;
    filter: saturate(1.75) contrast(1.1) brightness(1.12) hue-rotate(0deg);
  }
  46% {
    opacity: 1;
    background-position: 90% 45%, 15% 65%, 74% 52%, 55% 50%, 6px 6px;
    filter: saturate(2.35) contrast(1.2) brightness(1.45) hue-rotate(45deg);
  }
  72% {
    opacity: .86;
    background-position: 100% 90%, 0% 18%, 42% 70%, 165% 50%, 10px 10px;
    filter: saturate(2.05) contrast(1.16) brightness(1.28) hue-rotate(105deg);
  }
}

@keyframes holographicObviousBand {
  0%, 12%, 100% { transform: translateX(-78%) rotate(3deg); opacity: .35; }
  48% { transform: translateX(2%) rotate(3deg); opacity: 1; }
  76% { transform: translateX(78%) rotate(3deg); opacity: .62; }
}

@keyframes holographicSparkleDance {
  0%, 100% { opacity: .52; filter: brightness(1); transform: translate(0, 0); }
  50% { opacity: 1; filter: brightness(1.65); transform: translate(2px, -1px); }
}

.holographic-art-copy.holographic-art-ready {
  opacity: .52 !important;
  mix-blend-mode: screen;
  animation: holographicObviousRefraction 2.7s ease-in-out infinite;
}

.reveal-card.holographic-hit .holographic-foil {
  animation:
    holographicObviousRevealBurst 1s ease-out both,
    holographicObviousSweep 2.15s 1s ease-in-out infinite;
}

.reveal-card.holographic-hit .holographic-art-copy.holographic-art-ready {
  animation:
    holographicObviousArtworkBurst 1s ease-out both,
    holographicObviousRefraction 2.7s 1s ease-in-out infinite;
}

@keyframes holographicObviousRevealBurst {
  0% { opacity: 0; filter: brightness(3.2) saturate(2.8); transform: scale(1.08); }
  38% { opacity: 1; filter: brightness(2.2) saturate(2.7) hue-rotate(75deg); transform: scale(1.025); }
  100% { opacity: .88; filter: brightness(1.22) saturate(1.9); transform: scale(1); }
}

@keyframes holographicObviousArtworkBurst {
  0% { opacity: 0; transform: scale(1.14); filter: brightness(3) saturate(3); }
  45% { opacity: .82; transform: scale(1.065); filter: brightness(2.05) saturate(2.7); }
  100% { opacity: .52; transform: scale(1.04); filter: brightness(1.35) contrast(1.75) saturate(2); }
}

@keyframes holographicObviousRefraction {
  0%, 100% {
    opacity: .3;
    transform: translate3d(-2%, -1%, 0) scale(1.04);
    filter: brightness(1.22) contrast(1.7) saturate(1.85) hue-rotate(0deg);
  }
  42% {
    opacity: .68;
    transform: translate3d(2%, -.3%, 0) scale(1.055);
    filter: brightness(1.72) contrast(1.9) saturate(2.45) hue-rotate(54deg);
  }
  73% {
    opacity: .48;
    transform: translate3d(-.4%, 1.5%, 0) scale(1.05);
    filter: brightness(1.48) contrast(1.82) saturate(2.2) hue-rotate(122deg);
  }
}

.item-card.variant-locked .holographic-foil {
  opacity: .28;
  filter: saturate(.7) brightness(.9);
  animation: none;
}

.item-card.variant-locked .holographic-foil::before,
.item-card.variant-locked .holographic-foil::after {
  animation: none;
  opacity: .2;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.holographic,
  .holographic-foil,
  .holographic-foil::before,
  .holographic-foil::after,
  .holographic-art-copy.holographic-art-ready {
    animation: none !important;
  }

  .holographic-foil {
    opacity: .82;
    background-position: 50% 50%, 50% 50%, 50% 50%, 48% 50%, 0 0;
  }
}


/* Balanced pass: still unmistakably Holo, without overpowering the art. */
.item-card.holographic {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .72),
    0 0 0 3px rgba(83, 211, 255, .24),
    0 0 14px 2px rgba(72, 205, 255, .32),
    0 0 23px 4px rgba(198, 79, 255, .17),
    0 9px 24px rgba(56, 85, 181, .2);
  animation: holographicBalancedGlow 3s ease-in-out infinite;
}

.detail-image-wrap:has(.holographic-foil) {
  box-shadow:
    0 0 0 2px rgba(222, 251, 255, .7),
    0 0 14px 2px rgba(69, 213, 255, .29),
    0 0 23px 4px rgba(191, 83, 255, .17);
}

.holographic-foil {
  opacity: .58;
  filter: saturate(1.42) contrast(1.07) brightness(1.1);
  box-shadow:
    inset 0 0 20px rgba(99, 226, 255, .18),
    inset 0 0 8px rgba(255, 255, 255, .14);
  animation: holographicBalancedSweep 3s ease-in-out infinite;
}

.holographic-foil::before {
  opacity: .54;
  animation: holographicBalancedBand 3s ease-in-out infinite;
}

.holographic-foil::after {
  opacity: .4;
  animation: holographicBalancedSparkles 2.1s steps(2, end) infinite;
}

.holographic-art-copy.holographic-art-ready {
  opacity: .29 !important;
  animation: holographicBalancedRefraction 3.6s ease-in-out infinite;
}

.reveal-card.holographic-hit .holographic-foil {
  animation:
    holographicBalancedRevealBurst 1s ease-out both,
    holographicBalancedSweep 3s 1s ease-in-out infinite;
}

.reveal-card.holographic-hit .holographic-art-copy.holographic-art-ready {
  animation:
    holographicBalancedArtworkBurst 1s ease-out both,
    holographicBalancedRefraction 3.6s 1s ease-in-out infinite;
}

@keyframes holographicBalancedGlow {
  0%, 100% {
    border-color: #78dcff;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, .7),
      0 0 0 3px rgba(83, 211, 255, .22),
      0 0 13px 2px rgba(72, 205, 255, .28),
      0 0 21px 4px rgba(198, 79, 255, .14),
      0 9px 24px rgba(56, 85, 181, .19);
  }
  50% {
    border-color: #c7f7ff;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, .8),
      0 0 0 3px rgba(154, 111, 255, .28),
      0 0 18px 3px rgba(76, 226, 255, .4),
      0 0 27px 5px rgba(255, 86, 211, .2),
      0 10px 26px rgba(56, 85, 181, .22);
  }
}

@keyframes holographicBalancedSweep {
  0%, 100% {
    opacity: .44;
    background-position: 0% 0%, 100% 100%, 30% 48%, -180% 50%, 0 0;
    filter: saturate(1.34) contrast(1.05) brightness(1.06) hue-rotate(0deg);
  }
  46% {
    opacity: .68;
    background-position: 90% 45%, 15% 65%, 74% 52%, 55% 50%, 6px 6px;
    filter: saturate(1.62) contrast(1.1) brightness(1.19) hue-rotate(42deg);
  }
  72% {
    opacity: .54;
    background-position: 100% 90%, 0% 18%, 42% 70%, 165% 50%, 10px 10px;
    filter: saturate(1.5) contrast(1.08) brightness(1.12) hue-rotate(98deg);
  }
}

@keyframes holographicBalancedBand {
  0%, 12%, 100% { transform: translateX(-78%) rotate(3deg); opacity: .14; }
  48% { transform: translateX(2%) rotate(3deg); opacity: .54; }
  76% { transform: translateX(78%) rotate(3deg); opacity: .28; }
}

@keyframes holographicBalancedSparkles {
  0%, 100% { opacity: .22; filter: brightness(1); transform: translate(0, 0); }
  50% { opacity: .46; filter: brightness(1.22); transform: translate(1px, -1px); }
}

@keyframes holographicBalancedRefraction {
  0%, 100% {
    opacity: .16;
    transform: translate3d(-1.6%, -.8%, 0) scale(1.035);
    filter: brightness(1.1) contrast(1.55) saturate(1.45) hue-rotate(0deg);
  }
  42% {
    opacity: .36;
    transform: translate3d(1.6%, -.2%, 0) scale(1.045);
    filter: brightness(1.34) contrast(1.66) saturate(1.75) hue-rotate(50deg);
  }
  73% {
    opacity: .24;
    transform: translate3d(-.3%, 1.2%, 0) scale(1.04);
    filter: brightness(1.23) contrast(1.62) saturate(1.62) hue-rotate(112deg);
  }
}

@keyframes holographicBalancedRevealBurst {
  0% { opacity: 0; filter: brightness(2.3) saturate(2); transform: scale(1.05); }
  38% { opacity: .72; filter: brightness(1.55) saturate(1.85) hue-rotate(65deg); transform: scale(1.012); }
  100% { opacity: .58; filter: brightness(1.1) saturate(1.42); transform: scale(1); }
}

@keyframes holographicBalancedArtworkBurst {
  0% { opacity: 0; transform: scale(1.08); filter: brightness(2.15) saturate(2.15); }
  45% { opacity: .48; transform: scale(1.04); filter: brightness(1.5) saturate(1.85); }
  100% { opacity: .29; transform: scale(1.035); filter: brightness(1.17) contrast(1.6) saturate(1.55); }
}

.item-card.variant-locked .holographic-foil {
  opacity: .24;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.holographic,
  .holographic-foil,
  .holographic-foil::before,
  .holographic-foil::after,
  .holographic-art-copy.holographic-art-ready {
    animation: none !important;
  }

  .holographic-foil {
    opacity: .54;
  }
}


/* First Edition is shown through a premium gold edge instead of an artwork
   sticker. The separate pseudo-element lets the gold glimmer coexist with
   rarity and Holographic animations without replacing either effect. */
.first-edition-stamp {
  display: none !important;
}

.item-card.first-edition,
.detail-image-wrap.first-edition {
  position: relative;
  isolation: isolate;
}

.item-card.first-edition::before,
.detail-image-wrap.first-edition::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 28;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    #8f5700 0%,
    #d99a16 16%,
    #fff2a6 28%,
    #f4bf38 40%,
    #a86800 56%,
    #ffe889 72%,
    #c78008 86%,
    #fff5bd 100%
  );
  background-size: 280% 280%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(255, 205, 67, .58));
  animation: firstEditionGoldGlimmer 3.4s ease-in-out infinite;
}

.item-card.first-edition {
  border-color: #d9a52b;
  box-shadow:
    0 0 0 1px rgba(255, 241, 157, .62),
    0 0 13px rgba(244, 185, 42, .3),
    0 8px 22px rgba(139, 87, 0, .2);
}

.detail-image-wrap.first-edition {
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 241, 157, .58),
    0 0 15px rgba(244, 185, 42, .3);
}

@keyframes firstEditionGoldGlimmer {
  0%, 100% {
    background-position: 0% 50%;
    opacity: .78;
    filter: drop-shadow(0 0 2px rgba(255, 196, 35, .42)) brightness(.96);
  }
  48% {
    background-position: 100% 50%;
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(255, 220, 105, .78)) brightness(1.18);
  }
}

/* Give a newly revealed First Edition a quick gold flash, replacing the old
   sticker-impact animation. */
.reveal-card.first-edition-hit .item-card.first-edition::before {
  animation:
    firstEditionBorderReveal .85s cubic-bezier(.16, .9, .22, 1.18) both,
    firstEditionGoldGlimmer 3.4s .85s ease-in-out infinite;
}

@keyframes firstEditionBorderReveal {
  0% { opacity: 0; filter: brightness(2.2) drop-shadow(0 0 12px rgba(255, 227, 124, .9)); }
  48% { opacity: 1; filter: brightness(1.55) drop-shadow(0 0 9px rgba(255, 205, 55, .86)); }
  100% { opacity: .84; filter: brightness(1) drop-shadow(0 0 3px rgba(255, 196, 35, .48)); }
}

/* Compact previews do not have room for the full masked edge, so they use a
   restrained gold outline and glow. */
.recent-pull-thumb.first-edition,
.fusion-card-image.first-edition,
.fusion-core-front.first-edition,
.merge-result-thumb.first-edition {
  border-color: #e0ad2e !important;
  box-shadow:
    0 0 0 1px rgba(255, 240, 145, .72),
    0 0 11px rgba(244, 185, 42, .34);
}

.item-card.variant-locked.first-edition::before {
  opacity: .38;
  filter: saturate(.65) brightness(.9);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.first-edition::before,
  .detail-image-wrap.first-edition::before {
    animation: none !important;
    background-position: 46% 50%;
  }
}


/* A second, finer First Edition edge sits directly inside the artwork frame.
   It mirrors the outer gold glimmer while leaving the image unobstructed. */
.item-card.first-edition .item-image-wrap {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255, 238, 143, .62),
    0 0 9px rgba(240, 175, 28, .28);
}

.item-card.first-edition .item-image-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 18;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    #9d6200 0%,
    #e2a824 17%,
    #fff5b8 30%,
    #efb92f 43%,
    #a96b00 58%,
    #ffe98d 73%,
    #c98509 87%,
    #fff7c9 100%
  );
  background-size: 280% 280%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 2px rgba(255, 205, 67, .52));
  animation: firstEditionGoldGlimmer 3.4s ease-in-out -.65s infinite;
}

.reveal-card.first-edition-hit .item-card.first-edition .item-image-wrap::before {
  animation:
    firstEditionBorderReveal .85s cubic-bezier(.16, .9, .22, 1.18) both,
    firstEditionGoldGlimmer 3.4s .2s ease-in-out infinite;
}

.item-card.variant-locked.first-edition .item-image-wrap::before {
  opacity: .32;
  filter: saturate(.6) brightness(.88);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.first-edition .item-image-wrap::before {
    animation: none !important;
    background-position: 58% 50%;
  }
}

/* Holographic cards now communicate the variant through the foil itself;
   the artwork sticker is intentionally removed. */
.holographic-stamp {
  display: none !important;
}


/* Match the clean scrollbar used by Recently Pulled. The transparent track
   lets it sit naturally against the binder window instead of appearing as a
   separate floating control. */
.variant-binder,
.variant-binder-overlay {
  scrollbar-width: thin;
  scrollbar-color: var(--bubblegum) transparent;
}

.variant-binder::-webkit-scrollbar,
.variant-binder-overlay::-webkit-scrollbar {
  width: 8px;
}

.variant-binder::-webkit-scrollbar-track,
.variant-binder-overlay::-webkit-scrollbar-track {
  background: transparent;
}

.variant-binder::-webkit-scrollbar-thumb,
.variant-binder-overlay::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--bubblegum);
}

.variant-binder::-webkit-scrollbar-thumb:hover,
.variant-binder-overlay::-webkit-scrollbar-thumb:hover {
  background: var(--hot);
}

.variant-binder::-webkit-scrollbar-corner,
.variant-binder-overlay::-webkit-scrollbar-corner {
  background: transparent;
}

.variant-binder::-webkit-scrollbar-button,
.variant-binder-overlay::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}


/* Use one normal viewport scroll layer instead of nesting a second scrolling
   panel inside the overlay. Removing the full-screen live blur also prevents
   composited card layers from appearing to trail behind during scrolling. */
.variant-binder-overlay {
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(90, 23, 64, .68);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.variant-binder {
  flex: 0 0 auto;
  max-height: none;
  margin: auto;
  overflow: visible;
}


/* =====================================================================
   GILDED HOLO
   First Edition + Holographic is its own premium finish rather than two
   independent effects stacked together. Variant IDs remain unchanged.
   ===================================================================== */
.item-card.gilded-holographic {
  border-color: #e3b33c;
  box-shadow:
    0 0 0 2px rgba(255, 248, 205, .78),
    0 0 0 4px rgba(213, 155, 27, .28),
    0 0 18px 3px rgba(255, 205, 73, .38),
    0 0 28px 6px rgba(180, 114, 15, .2),
    0 9px 25px rgba(112, 68, 0, .2);
  animation: gildedHoloCardGlow 3.8s ease-in-out infinite;
}

.detail-image-wrap.gilded-holographic {
  box-shadow:
    0 0 0 2px rgba(255, 246, 190, .8),
    0 0 0 4px rgba(211, 153, 25, .25),
    0 0 20px 4px rgba(255, 205, 73, .34),
    0 0 31px 6px rgba(165, 103, 11, .18);
}

@keyframes gildedHoloCardGlow {
  0%, 100% {
    border-color: #cf9418;
    box-shadow:
      0 0 0 2px rgba(255, 245, 185, .72),
      0 0 0 4px rgba(196, 133, 12, .23),
      0 0 15px 3px rgba(244, 185, 42, .3),
      0 9px 24px rgba(112, 68, 0, .18);
  }
  52% {
    border-color: #fff0a1;
    box-shadow:
      0 0 0 2px rgba(255, 253, 228, .9),
      0 0 0 4px rgba(235, 182, 48, .35),
      0 0 22px 5px rgba(255, 216, 101, .46),
      0 0 33px 7px rgba(191, 120, 12, .22),
      0 10px 27px rgba(112, 68, 0, .22);
  }
}

.gilded-holographic .holographic-foil {
  opacity: .58;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 240, .92) 0 2%, rgba(255, 215, 104, .36) 6%, transparent 17%),
    radial-gradient(circle at 82% 73%, rgba(205, 240, 255, .5) 0 2%, rgba(255, 188, 224, .3) 7%, transparent 20%),
    conic-gradient(from 218deg at 50% 50%,
      rgba(123, 72, 0, .08),
      rgba(255, 203, 76, .48),
      rgba(255, 249, 205, .68),
      rgba(190, 228, 255, .28),
      rgba(255, 196, 221, .22),
      rgba(214, 151, 25, .5),
      rgba(123, 72, 0, .08)),
    linear-gradient(112deg,
      transparent 0 29%,
      rgba(172, 105, 0, .16) 35%,
      rgba(255, 204, 76, .58) 42%,
      rgba(255, 255, 225, .92) 49%,
      rgba(255, 224, 132, .66) 56%,
      rgba(184, 224, 255, .22) 62%,
      transparent 71% 100%),
    repeating-linear-gradient(132deg,
      rgba(255, 245, 195, .2) 0 1px,
      transparent 1px 7px);
  background-size: 180% 180%, 185% 185%, 200% 200%, 320% 100%, 14px 14px;
  background-position: 0% 0%, 100% 100%, 48% 50%, -190% 50%, 0 0;
  filter: sepia(.28) saturate(1.38) contrast(1.07) brightness(1.1);
  box-shadow:
    inset 0 0 22px rgba(255, 207, 81, .22),
    inset 0 0 9px rgba(255, 255, 224, .16);
  animation: gildedFoilSweep 4.4s ease-in-out infinite;
}

.gilded-holographic .holographic-foil::before {
  opacity: .62;
  background: linear-gradient(108deg,
    transparent 31%,
    rgba(169, 100, 0, .12) 39%,
    rgba(255, 207, 76, .55) 45%,
    rgba(255, 255, 224, .9) 50%,
    rgba(255, 224, 132, .58) 55%,
    rgba(196, 227, 255, .2) 60%,
    transparent 69%);
  animation: gildedLightBand 4.4s ease-in-out infinite;
}

.gilded-holographic .holographic-foil::after {
  opacity: .45;
  background:
    radial-gradient(circle at 15% 18%, #fff7c7 0 1.2px, transparent 2.8px),
    radial-gradient(circle at 74% 24%, #fff 0 1px, transparent 2.5px),
    radial-gradient(circle at 43% 62%, #ffe08a 0 1.3px, transparent 3px),
    radial-gradient(circle at 86% 79%, #dff5ff 0 1px, transparent 2.7px),
    radial-gradient(circle at 23% 84%, #ffd9ec 0 1px, transparent 2.6px);
  background-size: 43px 47px, 61px 53px, 69px 64px, 51px 63px, 67px 57px;
  animation: gildedSparkleDrift 2.8s steps(2, end) infinite;
}

.gilded-holographic .holographic-art-copy.holographic-art-ready {
  opacity: .24 !important;
  mix-blend-mode: screen;
  animation: gildedArtworkRefraction 4.8s ease-in-out infinite;
}

.reveal-card.holographic-hit .gilded-holographic .holographic-foil {
  animation:
    gildedHoloRevealBurst 1s ease-out both,
    gildedFoilSweep 4.4s 1s ease-in-out infinite;
}

.reveal-card.holographic-hit .gilded-holographic .holographic-art-copy.holographic-art-ready {
  animation:
    gildedArtworkRevealBurst 1s ease-out both,
    gildedArtworkRefraction 4.8s 1s ease-in-out infinite;
}

@keyframes gildedFoilSweep {
  0%, 100% {
    opacity: .45;
    background-position: 0% 0%, 100% 100%, 36% 48%, -190% 50%, 0 0;
    filter: sepia(.32) saturate(1.25) contrast(1.05) brightness(1.04) hue-rotate(0deg);
  }
  47% {
    opacity: .7;
    background-position: 82% 42%, 20% 68%, 68% 52%, 48% 50%, 7px 7px;
    filter: sepia(.2) saturate(1.55) contrast(1.1) brightness(1.22) hue-rotate(-5deg);
  }
  74% {
    opacity: .55;
    background-position: 100% 88%, 0% 20%, 45% 70%, 166% 50%, 11px 11px;
    filter: sepia(.24) saturate(1.42) contrast(1.08) brightness(1.13) hue-rotate(8deg);
  }
}

@keyframes gildedLightBand {
  0%, 15%, 100% { transform: translateX(-80%) rotate(3deg); opacity: .12; }
  50% { transform: translateX(2%) rotate(3deg); opacity: .68; }
  78% { transform: translateX(80%) rotate(3deg); opacity: .24; }
}

@keyframes gildedSparkleDrift {
  0%, 100% { opacity: .25; filter: brightness(1); transform: translate(0, 0); }
  50% { opacity: .52; filter: brightness(1.3); transform: translate(1px, -1px); }
}

@keyframes gildedArtworkRefraction {
  0%, 100% {
    opacity: .13;
    transform: translate3d(-1.2%, -.6%, 0) scale(1.035);
    filter: sepia(.42) brightness(1.12) contrast(1.58) saturate(1.28);
  }
  48% {
    opacity: .31;
    transform: translate3d(1.2%, -.1%, 0) scale(1.043);
    filter: sepia(.3) brightness(1.38) contrast(1.66) saturate(1.5);
  }
  76% {
    opacity: .2;
    transform: translate3d(-.2%, 1%, 0) scale(1.04);
    filter: sepia(.35) brightness(1.25) contrast(1.62) saturate(1.4);
  }
}

@keyframes gildedHoloRevealBurst {
  0% { opacity: 0; filter: sepia(.2) brightness(2.5) saturate(1.9); transform: scale(1.05); }
  40% { opacity: .8; filter: sepia(.25) brightness(1.7) saturate(1.7); transform: scale(1.014); }
  100% { opacity: .58; filter: sepia(.28) brightness(1.1) saturate(1.38); transform: scale(1); }
}

@keyframes gildedArtworkRevealBurst {
  0% { opacity: 0; transform: scale(1.08); filter: sepia(.3) brightness(2.2) saturate(1.9); }
  45% { opacity: .44; transform: scale(1.04); filter: sepia(.35) brightness(1.5) saturate(1.55); }
  100% { opacity: .24; transform: scale(1.035); filter: sepia(.4) brightness(1.18) contrast(1.6) saturate(1.35); }
}

.rarity-tag.gilded-holographic-tag,
.item-card.postcard .rarity-tag.gilded-holographic-tag,
.detail-card .rarity-tag.gilded-holographic-tag,
.gilded-holographic-preview {
  border: 1px solid rgba(255, 249, 211, .84);
  background: linear-gradient(105deg, #8e5700 0%, #e4a51f 22%, #fff1a3 42%, #cf8b0a 60%, #ffe69a 80%, #9b6100 100%) !important;
  background-size: 220% 100% !important;
  color: #563400 !important;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 2px 7px rgba(129, 77, 0, .22);
  animation: gildedTagShimmer 4.4s ease-in-out infinite !important;
}

@keyframes gildedTagShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.recent-pull-thumb.gilded-holographic {
  border-color: #dfaa2d;
  box-shadow: 0 0 0 1px rgba(255, 240, 150, .7), 0 0 12px rgba(232, 169, 28, .34);
}

.item-card.variant-locked.gilded-holographic .holographic-foil {
  opacity: .2;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.gilded-holographic,
  .gilded-holographic .holographic-foil,
  .gilded-holographic .holographic-foil::before,
  .gilded-holographic .holographic-foil::after,
  .gilded-holographic .holographic-art-copy.holographic-art-ready,
  .gilded-holographic-tag,
  .gilded-holographic-preview {
    animation: none !important;
  }
}

/* Final cascade guard: Gold Etched replaces the generic Holo card glow while
   still retaining the separate double First Edition border layers. */
.item-card.gold-etched-holographic {
  border-color: #d9a528;
  box-shadow:
    0 0 0 2px rgba(255, 249, 213, .78),
    0 0 0 4px rgba(196, 135, 17, .25),
    0 0 16px 3px rgba(244, 185, 42, .3),
    0 9px 24px rgba(105, 62, 0, .18);
  animation: goldEtchedFramePulse 4.6s ease-in-out infinite;
}

.detail-image-wrap.gold-etched-holographic {
  box-shadow:
    0 0 0 2px rgba(255, 248, 204, .82),
    0 0 0 4px rgba(196, 135, 17, .25),
    0 0 18px 4px rgba(244, 185, 42, .3);
}

@media (prefers-reduced-motion: reduce) {
  .item-card.gold-etched-holographic {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------
   Player marketplace
   ---------------------------------------------------------------------- */
.marketplace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.marketplace-kicker, .marketplace-dialog-kicker { display: block; color: var(--hot-dark); font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.marketplace-fee-note { flex: 0 0 auto; display: grid; gap: 2px; padding: 13px 18px; border: 1px solid rgba(255,79,163,.22); border-radius: 16px; background: rgba(255,255,255,.68); box-shadow: 0 6px 18px rgba(122,31,85,.08); text-align: right; }
.marketplace-fee-note strong { font-family: var(--font-display); color: var(--hot-dark); }
.marketplace-fee-note span { font-size: 12px; color: var(--berry); }
.marketplace-shell { overflow: hidden; border: 1px solid rgba(255,79,163,.2); border-radius: 26px; background: rgba(255,255,255,.72); box-shadow: var(--shadow); }
.marketplace-tabs { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(255,240,248,.86), rgba(250,235,255,.72)); }
.marketplace-tab { padding: 11px 18px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--berry); font-family: var(--font-display); font-weight: 700; }
.marketplace-tab:hover { background: rgba(255,255,255,.76); }
.marketplace-tab.active { border-color: rgba(255,79,163,.24); background: #fff; color: var(--hot-dark); box-shadow: 0 5px 14px rgba(122,31,85,.09); }
.marketplace-panel { padding: 20px; }
.marketplace-toolbar { display: grid; grid-template-columns: minmax(190px,1.6fr) repeat(3,minmax(140px,.75fr)) auto; gap: 12px; align-items: end; margin-bottom: 20px; }
.marketplace-toolbar label, .marketplace-form-field { display: grid; gap: 6px; color: var(--berry); font-size: 12px; font-weight: 800; }
.marketplace-toolbar input, .marketplace-toolbar select, .marketplace-form-field input, .marketplace-form-field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #efbddc; border-radius: 12px; outline: none; background: #fff; color: var(--ink); font: inherit; }
.marketplace-toolbar input:focus, .marketplace-toolbar select:focus, .marketplace-form-field input:focus, .marketplace-form-field select:focus { border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255,79,163,.13); }
.marketplace-card-picker-trigger { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #efbddc; border-radius: 12px; background: #fff; color: var(--ink); text-align: left; }
.marketplace-card-picker-trigger:hover { border-color: var(--hot); background: #fff9fc; box-shadow: 0 0 0 3px rgba(255,79,163,.09); }
.marketplace-card-picker-trigger:disabled { cursor: not-allowed; opacity: .55; }
.marketplace-card-picker-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg,var(--hot),var(--lilac)); color: #fff; font-size: 18px; line-height: 1; }
#marketplaceInventoryPickerLabel { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.marketplace-card-picker-arrow { color: var(--hot-dark); font-size: 25px; line-height: 1; }
.marketplace-search { align-self: end; }
.marketplace-refresh { min-height: 44px; }
.marketplace-panel-header { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 18px; }
.marketplace-panel-header h2 { margin: 0 0 4px; }
.marketplace-panel-header p { margin: 0; color: var(--berry); }
.marketplace-state { padding: 46px 20px; border: 1px dashed rgba(255,79,163,.3); border-radius: 18px; color: var(--berry); text-align: center; }
.marketplace-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 18px; }
.market-listing-card { position: relative; min-width: 0; padding: 12px; overflow: hidden; border: 1px solid rgba(255,79,163,.18); border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(122,31,85,.1); transition: transform .18s ease, box-shadow .18s ease; }
.market-listing-card:hover { transform: translateY(-3px); box-shadow: 0 13px 28px rgba(122,31,85,.16); }
.market-listing-card .item-card { width: 100%; margin: 0 0 12px; cursor: pointer; }
.market-listing-meta { display: grid; gap: 8px; padding: 2px 3px 3px; }
.market-listing-title { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.market-listing-title h3 { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-family: var(--font-display); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.market-listing-variant { color: var(--hot-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.market-listing-seller { color: var(--berry); font-size: 12px; }
.market-listing-seller button { padding: 0; background: none; color: var(--hot-dark); font-weight: 800; }
.market-listing-numbers { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid #ffe2f1; }
.market-listing-value { color: var(--berry); font-size: 11px; }
.market-listing-value strong { display: block; color: var(--ink); font-size: 13px; }
.market-listing-price { color: var(--hot-dark); font-family: var(--font-display); font-size: 20px; font-weight: 800; white-space: nowrap; }
.market-listing-action { width: 100%; margin-top: 2px; }
.market-listing-action[disabled] { cursor: default; opacity: .58; }
.market-listing-status { position: absolute; z-index: 3; top: 20px; left: 20px; padding: 6px 10px; border-radius: 999px; background: rgba(90,23,64,.88); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marketplace-history { display: grid; gap: 10px; }
.market-history-row { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.market-history-art { width: 58px; height: 70px; overflow: hidden; border-radius: 10px; background: #ffe7f4; }
.market-history-art img { width: 100%; height: 100%; object-fit: cover; }
.market-history-copy { min-width: 0; }
.market-history-copy strong { display: block; overflow: hidden; font-family: var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.market-history-copy span { color: var(--berry); font-size: 12px; }
.market-history-amount { text-align: right; }
.market-history-amount strong { display: block; color: var(--hot-dark); font-family: var(--font-display); }
.market-history-amount span { color: var(--berry); font-size: 11px; }
.marketplace-dialog { position: relative; width: min(520px,calc(100vw - 28px)); max-height: min(760px,calc(100vh - 28px)); overflow: auto; padding: 28px; border: 2px solid rgba(255,79,163,.24); border-radius: 25px; background: linear-gradient(160deg,#fff,#fff5fb); box-shadow: 0 22px 70px rgba(90,23,64,.28); }
.marketplace-dialog h2 { margin: 5px 0 7px; font-size: 28px; }
.marketplace-dialog-copy { margin: 0 0 18px; color: var(--berry); }
.marketplace-dialog-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: #ffe2f2; color: var(--berry); font-size: 23px; }
.marketplace-list-preview { min-height: 75px; margin: 14px 0; }
.marketplace-list-preview-empty { display: grid; place-items: center; min-height: 75px; border: 1px dashed rgba(255,79,163,.3); border-radius: 14px; color: var(--berry); font-size: 13px; }
.marketplace-preview-row { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.marketplace-preview-row > img { width: 58px; height: 70px; border-radius: 9px; object-fit: cover; }
.marketplace-preview-row strong { display: block; font-family: var(--font-display); }
.marketplace-preview-row span { color: var(--berry); font-size: 12px; }
.marketplace-preview-value { text-align: right; }
.marketplace-preview-value .coin-icon,
.marketplace-payout .coin-icon {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
  border-radius: 0;
  object-fit: contain;
}
.marketplace-payout { display: flex; justify-content: space-between; gap: 14px; margin: 14px 0 4px; padding: 12px 14px; border-radius: 13px; background: #fff1f8; color: var(--berry); }
.marketplace-payout strong { color: var(--hot-dark); }
.marketplace-dialog-message { min-height: 24px; padding-top: 6px; color: #b42318; font-size: 13px; font-weight: 700; }
.marketplace-dialog-submit { width: 100%; min-height: 46px; }
.marketplace-buy-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 10px; }
.marketplace-buy-dialog .marketplace-preview-row { margin-top: 16px; }
.marketplace-balance-warning { margin-top: 12px; padding: 10px 12px; border-radius: 11px; background: #fff0e8; color: #9b3d13; font-size: 12px; font-weight: 700; }
.marketplace-inventory-overlay { z-index: 120; align-items: flex-start; justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: rgba(90,23,64,.68); backdrop-filter: none; -webkit-backdrop-filter: none; }
.marketplace-inventory-dialog { position: relative; flex: 0 0 auto; width: min(1000px,calc(100vw - 32px)); max-height: none; margin: auto; overflow: visible; padding: 24px; border: 2px solid rgba(255,79,163,.25); border-radius: 26px; background: linear-gradient(160deg,#fff,#fff4fb); box-shadow: 0 24px 80px rgba(90,23,64,.32); }
.marketplace-inventory-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-right: 42px; margin-bottom: 18px; }
.marketplace-inventory-heading h2 { margin: 4px 0; font-size: 28px; }
.marketplace-inventory-heading p { margin: 0; color: var(--berry); }
.marketplace-inventory-search { flex: 0 1 300px; }
.marketplace-inventory-search input { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid #efbddc; border-radius: 12px; outline: none; background: #fff; color: var(--ink); font: inherit; }
.marketplace-inventory-search input:focus { border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255,79,163,.13); }
.marketplace-inventory-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 14px; max-height: none; overflow: visible; padding: 4px 8px 10px 4px; }
.marketplace-inventory-overlay { scrollbar-color: var(--bubblegum) rgba(255,227,241,.65); scrollbar-width: thin; }
.marketplace-inventory-overlay::-webkit-scrollbar { width: 10px; }
.marketplace-inventory-overlay::-webkit-scrollbar-track { border-radius: 999px; background: rgba(255,227,241,.65); }
.marketplace-inventory-overlay::-webkit-scrollbar-thumb { border: 2px solid rgba(255,246,251,.9); border-radius: 999px; background: linear-gradient(var(--bubblegum),var(--hot)); }
.marketplace-inventory-choice { position: relative; min-width: 0; padding: 8px; border: 2px solid transparent; border-radius: 18px; background: rgba(255,255,255,.74); color: inherit; text-align: left; transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.marketplace-inventory-choice:hover { transform: translateY(-3px); border-color: rgba(255,79,163,.5); box-shadow: 0 10px 25px rgba(122,31,85,.16); }
.marketplace-inventory-choice.is-selected { border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255,79,163,.14); }
.marketplace-inventory-choice .item-card { width: 100%; margin: 0; pointer-events: none; }
.marketplace-inventory-choice .item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketplace-inventory-choice .card-value-badge { font-size: 9px; }
.marketplace-inventory-quantity { position: absolute; z-index: 4; top: 14px; right: 14px; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border: 2px solid #fff; border-radius: 999px; background: var(--berry); color: #fff; font-family: var(--font-display); font-size: 12px; font-weight: 800; box-shadow: 0 3px 10px rgba(90,23,64,.25); }
.marketplace-inventory-state { padding: 50px 20px; border: 1px dashed rgba(255,79,163,.35); border-radius: 18px; color: var(--berry); text-align: center; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 950px) {
  .marketplace-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .marketplace-search { grid-column: 1 / -1; }
  .marketplace-refresh { width: 100%; }
}
@media (max-width: 620px) {
  .marketplace-heading, .marketplace-panel-header { align-items: stretch; flex-direction: column; }
  .marketplace-fee-note { text-align: left; }
  .marketplace-tabs { overflow-x: auto; }
  .marketplace-tab { flex: 0 0 auto; }
  .marketplace-panel { padding: 14px; }
  .marketplace-toolbar { grid-template-columns: 1fr; }
  .marketplace-search { grid-column: auto; }
  .marketplace-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .market-listing-card { padding: 8px; border-radius: 15px; }
  .market-listing-title h3 { font-size: 14px; }
  .market-listing-price { font-size: 16px; }
  .market-history-row { grid-template-columns: 48px minmax(0,1fr); }
  .market-history-art { width: 48px; height: 60px; }
  .market-history-amount { grid-column: 2; text-align: left; }
  .marketplace-dialog { padding: 24px 18px; }
  .marketplace-inventory-dialog { padding: 20px 12px; }
  .marketplace-inventory-heading { align-items: stretch; flex-direction: column; padding: 0 40px 0 4px; }
  .marketplace-inventory-search { flex-basis: auto; width: 100%; }
  .marketplace-inventory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: none; }
  .marketplace-inventory-choice { padding: 5px; border-radius: 14px; }
}


/* Full metallic card body for Gold Etched Holo. The photo itself remains in
   its natural colours while the physical card stock reads as solid gold. */
.item-card.gold-etched-holographic {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 224, .78) 0 3%, transparent 19%),
    radial-gradient(circle at 88% 82%, rgba(255, 225, 117, .46) 0 4%, transparent 24%),
    linear-gradient(132deg,
      #8c5700 0%,
      #cf8e0d 12%,
      #f5c847 25%,
      #fff1a1 37%,
      #c78308 52%,
      #f0b932 65%,
      #ffe58d 78%,
      #b87300 90%,
      #f3c64a 100%);
  background-size: 170% 170%, 180% 180%, 230% 230%;
  color: #4f2f00;
  animation: goldEtchedFullCardPulse 5.2s ease-in-out infinite;
}

@keyframes goldEtchedFullCardPulse {
  0%, 100% {
    border-color: #bc7d08;
    background-position: 0% 0%, 100% 100%, 0% 50%;
    box-shadow:
      0 0 0 2px rgba(255, 246, 191, .72),
      0 0 0 4px rgba(184, 121, 7, .22),
      0 0 14px 3px rgba(232, 169, 27, .28),
      0 9px 24px rgba(105, 62, 0, .2);
  }
  52% {
    border-color: #fff0a0;
    background-position: 82% 32%, 18% 75%, 100% 50%;
    box-shadow:
      0 0 0 2px rgba(255, 254, 231, .92),
      0 0 0 4px rgba(225, 170, 42, .35),
      0 0 22px 5px rgba(255, 211, 83, .44),
      0 10px 27px rgba(105, 62, 0, .23);
  }
}

.item-card.gold-etched-holographic .item-image-wrap {
  background: #9b6200;
  box-shadow:
    0 0 0 2px rgba(91, 53, 0, .58),
    0 0 0 4px rgba(255, 240, 154, .72),
    0 4px 11px rgba(82, 45, 0, .3);
}

.item-card.gold-etched-holographic .item-name,
.item-card.gold-etched-holographic .item-handle,
.item-card.gold-etched-holographic .catalog-no,
.item-card.gold-etched-holographic .variant-binder-status,
.item-card.gold-etched-holographic .collection-best-variant,
.item-card.gold-etched-holographic .collection-variant-line {
  color: #513000;
  text-shadow: 0 1px 0 rgba(255, 247, 194, .58);
}

.item-card.gold-etched-holographic .collection-binder-action {
  border-color: rgba(102, 59, 0, .22);
  background: rgba(104, 61, 0, .13);
  color: #523100;
}

.item-card.gold-etched-holographic .card-value-badge,
.item-card.gold-etched-holographic .count-badge {
  border-color: rgba(255, 244, 180, .7);
  background: rgba(73, 42, 0, .88);
  color: #fff8d8;
}

.item-card.variant-locked.gold-etched-holographic {
  background:
    linear-gradient(135deg, rgba(177, 121, 12, .72), rgba(255, 226, 125, .74), rgba(194, 132, 13, .7));
}

@media (prefers-reduced-motion: reduce) {
  .item-card.gold-etched-holographic {
    animation: none !important;
    background-position: 35% 20%, 72% 70%, 48% 50%;
  }
}

/* Blue Diamond final cascade guard. This sits after every legacy gold rule. */
.item-card.gold-etched-holographic {
  border-color: #c9f7ff !important;
  background:
    radial-gradient(circle at 13% 3%, rgba(255,255,255,.98) 0 2%, transparent 18%),
    radial-gradient(circle at 91% 91%, rgba(50,157,255,.4) 0 3%, transparent 25%),
    conic-gradient(from 218deg at 52% 47%,
      #153b73 0deg, #4aaeff 26deg, #bcefff 54deg, #f8feff 85deg,
      #69c8ff 118deg, #235aa7 156deg, #d8f9ff 194deg, #2588e8 231deg,
      #8ce7ff 270deg, #315ec2 310deg, #e9fdff 360deg) !important;
  background-size: 180% 180%, 190% 190%, 230% 230% !important;
  color: #102e5a !important;
  animation: blueDiamondCardPulse 5.8s ease-in-out infinite !important;
  box-shadow:
    0 0 0 2px rgba(239,253,255,.96),
    0 0 0 4px rgba(48,164,255,.38),
    0 0 19px 4px rgba(42,176,255,.4),
    0 0 29px 6px rgba(58,104,255,.22),
    0 10px 26px rgba(14,47,95,.3) !important;
}

.item-card.first-edition.gold-etched-holographic::before,
.detail-image-wrap.first-edition.gold-etched-holographic::before {
  background: linear-gradient(112deg,
    #12386f, #3da8ff 14%, #c8f5ff 29%, #fff 43%,
    #67d5ff 57%, #447bff 70%, #a8efff 84%, #173f7b) !important;
  background-size: 240% 100% !important;
  filter: drop-shadow(0 0 5px rgba(82,202,255,.82)) !important;
  animation: diamondEtchedEdgeShift 4.8s ease-in-out infinite !important;
}

.item-card.first-edition.gold-etched-holographic .item-image-wrap::before {
  background: linear-gradient(108deg,
    #173d75, #59baff 16%, #e5fbff 32%, #fff 47%,
    #72dbff 62%, #4e7dff 77%, #b9f3ff 89%, #173d75) !important;
  background-size: 230% 100% !important;
  filter: drop-shadow(0 0 4px rgba(75,196,255,.78)) !important;
  animation: diamondEtchedEdgeShift 4.8s ease-in-out -.6s infinite !important;
}

.item-card.gold-etched-holographic .item-image-wrap {
  background: #163b70 !important;
  box-shadow:
    0 0 0 2px rgba(9,37,80,.78),
    0 0 0 4px rgba(205,247,255,.94),
    0 0 12px rgba(52,188,255,.58),
    0 5px 14px rgba(9,35,76,.38) !important;
}

.detail-image-wrap.gold-etched-holographic {
  border-color: #c9f7ff !important;
  box-shadow:
    0 0 0 2px rgba(244,254,255,.98),
    0 0 0 4px rgba(53,179,255,.5),
    0 0 24px 6px rgba(45,191,255,.48),
    0 0 34px 8px rgba(48,91,255,.24) !important;
}

.item-card.gold-etched-holographic .item-name,
.item-card.gold-etched-holographic .item-handle,
.item-card.gold-etched-holographic .catalog-no,
.item-card.gold-etched-holographic .variant-binder-status,
.item-card.gold-etched-holographic .collection-best-variant,
.item-card.gold-etched-holographic .collection-variant-line {
  color: #102e5a !important;
  text-shadow: 0 1px 0 rgba(224,249,255,.82) !important;
}

.item-card.gold-etched-holographic .collection-binder-action {
  border-color: rgba(24,81,145,.28) !important;
  color: #123668 !important;
  background: rgba(199,242,255,.42) !important;
}

.item-card.gold-etched-holographic .card-value-badge,
.item-card.gold-etched-holographic .count-badge {
  border-color: rgba(201,246,255,.9) !important;
  color: #effcff !important;
  background: rgba(8,40,88,.92) !important;
}

.item-card.variant-locked.gold-etched-holographic {
  background: linear-gradient(135deg, rgba(25,74,137,.78), rgba(171,230,255,.8), rgba(51,104,188,.76)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.gold-etched-holographic,
  .item-card.first-edition.gold-etched-holographic::before,
  .item-card.first-edition.gold-etched-holographic .item-image-wrap::before {
    animation: none !important;
  }
}

/* =====================================================================
   DIAMOND ETCHED
   The stored variant ID and legacy class remain unchanged for compatibility.
   Player-facing styling is a platinum crystalline finish rather than gold.
   ===================================================================== */
.item-card.gold-etched-holographic {
  border-color: #dcfbff !important;
  color: #23334d;
  background:
    radial-gradient(circle at 14% 4%, rgba(255,255,255,.96) 0 2%, transparent 18%),
    radial-gradient(circle at 91% 91%, rgba(200,168,255,.34) 0 2%, transparent 23%),
    conic-gradient(from 218deg at 52% 47%,
      #70849f 0deg,
      #dff8ff 30deg,
      #9baac0 63deg,
      #f9fdff 101deg,
      #c8bdf1 139deg,
      #8296ad 184deg,
      #d3faff 224deg,
      #f8cced 267deg,
      #91a5bd 311deg,
      #eefcff 360deg) !important;
  background-size: 180% 180%, 190% 190%, 230% 230% !important;
  animation: diamondEtchedCardPulse 5.8s ease-in-out infinite !important;
  box-shadow:
    0 0 0 2px rgba(244,254,255,.94),
    0 0 0 4px rgba(127,218,241,.3),
    0 0 17px 3px rgba(115,221,255,.3),
    0 0 25px 5px rgba(220,143,255,.16),
    0 10px 25px rgba(43,61,92,.25) !important;
}

@keyframes diamondEtchedCardPulse {
  0%, 100% {
    background-position: 0% 8%, 100% 94%, 0% 48%;
    filter: brightness(1) saturate(1.02);
    box-shadow:
      0 0 0 2px rgba(244,254,255,.92),
      0 0 0 4px rgba(127,218,241,.27),
      0 0 15px 3px rgba(115,221,255,.26),
      0 0 23px 4px rgba(220,143,255,.14),
      0 10px 25px rgba(43,61,92,.24);
  }
  52% {
    background-position: 78% 30%, 22% 70%, 100% 53%;
    filter: brightness(1.09) saturate(1.12);
    box-shadow:
      0 0 0 2px rgba(255,255,255,1),
      0 0 0 4px rgba(194,238,255,.46),
      0 0 23px 5px rgba(112,224,255,.42),
      0 0 32px 7px rgba(230,154,255,.24),
      0 11px 27px rgba(43,61,92,.27);
  }
}

.item-card.first-edition.gold-etched-holographic::before,
.detail-image-wrap.first-edition.gold-etched-holographic::before {
  background: linear-gradient(112deg,
    #60758e 0%,
    #e9fbff 14%,
    #8ceaff 28%,
    #ffffff 42%,
    #e4b9ff 56%,
    #ffcfeb 69%,
    #b9f5ff 83%,
    #71869f 100%) !important;
  background-size: 240% 100% !important;
  filter: drop-shadow(0 0 4px rgba(160,238,255,.75)) !important;
  animation: diamondEtchedEdgeShift 4.8s ease-in-out infinite !important;
}

.item-card.first-edition.gold-etched-holographic .item-image-wrap::before {
  background: linear-gradient(108deg,
    #74879e,
    #f8feff 17%,
    #8de8ff 33%,
    #e9c2ff 51%,
    #ffdaee 68%,
    #b4f4ff 84%,
    #74879e) !important;
  background-size: 230% 100% !important;
  filter: drop-shadow(0 0 3px rgba(145,230,255,.72)) !important;
  animation: diamondEtchedEdgeShift 4.8s ease-in-out -.6s infinite !important;
}

@keyframes diamondEtchedEdgeShift {
  0%, 100% { background-position: 0% 50%; opacity: .82; }
  50% { background-position: 100% 50%; opacity: 1; }
}

.item-card.gold-etched-holographic .item-image-wrap {
  background: #64768d !important;
  box-shadow:
    0 0 0 2px rgba(47,65,89,.7),
    0 0 0 4px rgba(220,249,255,.88),
    0 0 11px rgba(125,225,255,.45),
    0 5px 13px rgba(35,47,71,.3) !important;
}

.detail-image-wrap.gold-etched-holographic {
  border-color: #dffbff !important;
  box-shadow:
    0 0 0 2px rgba(247,254,255,.96),
    0 0 0 4px rgba(137,225,247,.4),
    0 0 22px 5px rgba(112,222,255,.36),
    0 0 30px 7px rgba(227,150,255,.18) !important;
}

.gold-etched-holographic .holographic-foil {
  opacity: .58 !important;
  mix-blend-mode: screen !important;
  background:
    linear-gradient(124deg,
      transparent 0 25%,
      rgba(137,230,255,.18) 31%,
      rgba(255,255,255,.84) 38%,
      rgba(232,169,255,.46) 44%,
      transparent 53% 100%),
    repeating-linear-gradient(138deg,
      transparent 0 24px,
      rgba(213,249,255,.24) 25px,
      rgba(255,255,255,.46) 26px,
      transparent 27px 53px),
    repeating-linear-gradient(42deg,
      transparent 0 31px,
      rgba(131,224,255,.18) 32px,
      rgba(244,191,255,.3) 33px,
      transparent 34px 68px),
    conic-gradient(from 45deg at 50% 50%,
      transparent 0 12%,
      rgba(190,244,255,.18) 12% 24%,
      transparent 24% 38%,
      rgba(239,190,255,.2) 38% 50%,
      transparent 50% 68%,
      rgba(255,220,241,.16) 68% 78%,
      transparent 78% 100%) !important;
  background-size: 330% 100%, 58px 58px, 76px 76px, 118px 118px !important;
  background-position: -190% 50%, 0 0, 0 0, 50% 50% !important;
  box-shadow: inset 0 0 14px rgba(189,243,255,.18), inset 0 0 0 1px rgba(255,255,255,.2) !important;
  animation: diamondEtchedFacetDrift 5.8s ease-in-out infinite !important;
}

.gold-etched-holographic .holographic-foil::before {
  opacity: .62 !important;
  background: linear-gradient(108deg,
    transparent 33%,
    rgba(125,226,255,.2) 41%,
    rgba(255,255,255,.94) 49%,
    rgba(235,180,255,.5) 54%,
    transparent 66%) !important;
  filter: blur(.1px) !important;
  animation: diamondEtchedLightPass 5.8s ease-in-out infinite !important;
}

.gold-etched-holographic .holographic-foil::after {
  opacity: .62 !important;
  background:
    radial-gradient(ellipse at 14% 17%, #fff 0 1px, #aef1ff 1.2px 2px, transparent 3px),
    radial-gradient(ellipse at 77% 21%, #fff 0 1px, #f0c3ff 1.2px 2px, transparent 3px),
    radial-gradient(ellipse at 46% 61%, #fff 0 1.3px, #a9eaff 1.5px 2.3px, transparent 3.4px),
    radial-gradient(ellipse at 88% 81%, #fff 0 1px, #ffd1ec 1.2px 2px, transparent 3px),
    radial-gradient(ellipse at 21% 86%, #fff 0 1px, #c7b9ff 1.2px 2px, transparent 3px) !important;
  background-size: 53px 59px, 71px 67px, 79px 74px, 63px 73px, 77px 69px !important;
  animation: diamondEtchedGlints 3.6s steps(2, end) infinite !important;
}

@keyframes diamondEtchedFacetDrift {
  0%, 100% { opacity: .46; background-position: -190% 50%, 0 0, 0 0, 50% 50%; }
  48% { opacity: .68; background-position: 40% 50%, 16px -11px, -13px 15px, 62% 42%; }
  77% { opacity: .52; background-position: 170% 50%, 29px -20px, -24px 28px, 39% 61%; }
}

@keyframes diamondEtchedLightPass {
  0%, 17%, 100% { transform: translateX(-84%) rotate(3deg); opacity: .08; }
  51% { transform: translateX(2%) rotate(3deg); opacity: .68; }
  79% { transform: translateX(84%) rotate(3deg); opacity: .2; }
}

@keyframes diamondEtchedGlints {
  0%, 100% { opacity: .3; filter: brightness(1); transform: translate(0,0) scale(1); }
  50% { opacity: .72; filter: brightness(1.55); transform: translate(1px,-1px) scale(1.02); }
}

.reveal-card.holographic-hit .gold-etched-holographic .holographic-foil {
  animation:
    diamondEtchedRevealBurst .95s ease-out both,
    diamondEtchedFacetDrift 5.8s .95s ease-in-out infinite !important;
}

@keyframes diamondEtchedRevealBurst {
  0% { opacity: 0; filter: brightness(2.8) saturate(1.45); transform: scale(1.055); }
  42% { opacity: .88; filter: brightness(1.9) saturate(1.25); transform: scale(1.014); }
  100% { opacity: .58; filter: brightness(1) saturate(1); transform: scale(1); }
}

.rarity-tag.gold-etched-holographic-tag,
.item-card.postcard .rarity-tag.gold-etched-holographic-tag,
.detail-card .rarity-tag.gold-etched-holographic-tag,
.gold-etched-holographic-preview {
  border: 1px solid rgba(232,252,255,.96) !important;
  color: #263650 !important;
  background:
    repeating-linear-gradient(132deg, transparent 0 10px, rgba(255,255,255,.36) 11px, transparent 12px 23px),
    linear-gradient(105deg, #6f829b 0%, #dffaff 18%, #ffffff 34%, #b9eefe 49%, #e3c3ff 66%, #ffd5ed 81%, #8297ae 100%) !important;
  background-size: 48px 48px, 230% 100% !important;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(80,137,164,.25) !important;
  animation: diamondEtchedTagShift 5.2s ease-in-out infinite !important;
}

@keyframes diamondEtchedTagShift {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 24px -12px, 100% 50%; }
}

.recent-pull-thumb.gold-etched-holographic {
  border-color: #c9f5ff !important;
  box-shadow: 0 0 0 1px rgba(248,254,255,.9), 0 0 12px rgba(120,224,255,.42), 0 0 18px rgba(224,152,255,.2) !important;
}

.item-card.gold-etched-holographic .item-name,
.item-card.gold-etched-holographic .item-handle,
.item-card.gold-etched-holographic .catalog-no,
.item-card.gold-etched-holographic .variant-binder-status,
.item-card.gold-etched-holographic .collection-best-variant,
.item-card.gold-etched-holographic .collection-variant-line {
  color: #263650 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
}

.item-card.gold-etched-holographic .collection-binder-action {
  border-color: rgba(55,91,122,.25) !important;
  color: #2b405d !important;
  background: rgba(223,248,255,.36) !important;
}

.item-card.gold-etched-holographic .card-value-badge,
.item-card.gold-etched-holographic .count-badge {
  border-color: rgba(223,249,255,.86) !important;
  color: #effcff !important;
  background: rgba(33,48,74,.9) !important;
}

.item-card.variant-locked.gold-etched-holographic {
  background: linear-gradient(135deg, rgba(113,132,155,.76), rgba(224,248,255,.76), rgba(180,161,215,.72)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.gold-etched-holographic,
  .item-card.first-edition.gold-etched-holographic::before,
  .item-card.first-edition.gold-etched-holographic .item-image-wrap::before,
  .gold-etched-holographic .holographic-foil,
  .gold-etched-holographic .holographic-foil::before,
  .gold-etched-holographic .holographic-foil::after,
  .gold-etched-holographic-tag,
  .gold-etched-holographic-preview {
    animation: none !important;
  }
}

/* Keep the complete First Edition frame inside the pack-reveal face on every
   screen size. Its animated glow otherwise meets the clipped card boundary. */
.reveal-face-front .item-card.first-edition::before {
  inset: 2px;
  border-radius: 13px;
}

/* =====================================================================
   MOBILE APP LAYOUT
   Final responsive overrides are deliberately last so the phone layout
   remains predictable despite the feature-specific sections above.
   ===================================================================== */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

button,
input,
select,
textarea {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  :root {
    --mobile-edge: 12px;
    --mobile-nav-height: 68px;
  }

  body {
    min-width: 0;
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    width: 100%;
    padding: calc(8px + env(safe-area-inset-top)) var(--mobile-edge) 8px;
    border-bottom-width: 1px;
    background: rgba(255, 250, 253, .94);
    box-shadow: 0 5px 18px rgba(90, 23, 64, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0;
  }
  .brand-logo { width: 86px; }

  .mute-btn {
    grid-column: 2;
    grid-row: 1;
    width: 34px;
    height: 34px;
    justify-self: end;
    border-width: 1px;
  }

  .profile-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 1px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .profile-bar::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .marketplace-tabs::-webkit-scrollbar,
  .leaderboard-tabs::-webkit-scrollbar { display: none; }

  .profile-bar > * { flex: 0 0 auto; }
  #openLoginBtn,
  #openSignupBtn { flex: 1 1 0; }

  .profile-bar .btn {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 11px;
  }
  .player-identity-pill {
    min-height: 34px;
    max-width: 145px;
    padding: 6px 10px;
  }
  .wallet-cluster { gap: 4px; }
  .balance-pill {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }
  .wallet-add-btn { width: 30px; height: 30px; font-size: 19px; }
  .daily-spin-topbar-btn { min-height: 34px; font-size: 11px; }

  /* Compact app-style navigation with all six destinations visible. */
  .tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    min-width: 0;
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding: 6px 5px calc(6px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: rgba(255, 252, 254, .97);
    box-shadow: 0 -8px 24px rgba(90, 23, 64, .12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .tab {
    min-width: 0;
    min-height: 52px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    padding: 4px 1px;
    border-radius: 13px;
    font-size: 0;
    line-height: 1;
  }
  .tab::before {
    font-size: 18px;
    line-height: 1;
    filter: saturate(.72);
  }
  .tab::after {
    color: currentColor;
    font: 700 9px/1 var(--font-display);
    white-space: nowrap;
  }
  .tab[data-view="shop"]::before { content: none; }
  .tab[data-view="shop"]::after { content: "Shop"; }
  .tab[data-view="inventory"]::before { content: none; }
  .tab[data-view="inventory"]::after { content: "Cards"; }
  .tab[data-view="marketplace"]::before { content: none; }
  .tab[data-view="marketplace"]::after { content: "Market"; }
  .tab[data-view="merge"]::before { content: none; }
  .tab[data-view="merge"]::after { content: "Fusion"; }
  .tab[data-view="leaderboards"]::before { content: none; }
  .tab[data-view="leaderboards"]::after { content: "Ranks"; }
  .tab[data-view="profile"]::before { content: none; }
  .tab[data-view="profile"]::after { content: "Profile"; }
  .tab.active {
    background: linear-gradient(145deg, var(--hot), var(--lilac));
    box-shadow: 0 4px 12px rgba(198, 79, 255, .24);
  }
  .tab.active::before { filter: none; }

  main {
    width: 100%;
    max-width: none;
    padding: 20px var(--mobile-edge) 28px;
  }
  .view-heading { margin-bottom: 17px; }
  .view-heading h1 {
    margin-bottom: 5px;
    font-size: clamp(24px, 8vw, 29px);
    line-height: 1.08;
  }
  .view-heading p { font-size: 13px; line-height: 1.45; }
  .completion-bar-wrap {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
    width: 100%;
  }
  .completion-bar-text { font-size: 12px; white-space: normal; }

  /* Shop */
  .shop-live-layout { gap: 18px; }
  .pack-grid,
  .shop-live-layout .pack-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }
  .pack-card {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    border-radius: 22px;
  }
  .pack-card:hover,
  .item-card:hover,
  .market-listing-card:hover { transform: none; }
  .pack-card-body { padding: 14px 16px 0; }
  .pack-footer,
  .pack-odds { padding-right: 16px; padding-left: 16px; }
  .pack-odds { gap: 5px; }
  .pack-odds h4 { margin-top: 8px; }
  .odds-chip { padding: 3px 7px; font-size: 9px; }
  .pack-purchase-footer { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .pack-purchase-footer .btn { min-height: 42px; }
  .recent-pulls-section,
  .shop-live-layout .recent-pulls-section {
    padding: 15px;
    border-radius: 20px;
  }
  .recent-pulls-heading h2 { font-size: 20px; }
  .shop-live-layout .recent-pulls-list { max-height: 460px; }
  .recent-pull-row,
  .shop-live-layout .recent-pull-row { padding: 8px; }

  /* Collection */
  .theme-sections { gap: 28px; }
  .theme-section-header { gap: 10px; }
  .theme-thumb { width: 44px; height: 62px; }
  .theme-title-group { min-width: 0; }
  .theme-title-group h2 { font-size: 18px; }
  .theme-progress-text { font-size: 10px; line-height: 1.35; }
  .theme-section-header .progress-track {
    flex: 1 0 100%;
    width: 100%;
  }
  #view-inventory .inventory-grid,
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .collection-character-card,
  .item-card {
    min-width: 0;
    padding: 8px;
    border-radius: 14px;
  }
  .item-image-wrap { border-radius: 10px; }
  .item-name { font-size: 11px; }
  .item-handle { font-size: 9px; }
  .collection-best-variant,
  .collection-variant-line,
  .collection-binder-action { font-size: 9px; }
  .collection-binder-action {
    margin-right: -8px;
    margin-bottom: -8px;
    margin-left: -8px;
    padding: 8px 5px;
  }

  /* Marketplace */
  .marketplace-heading,
  .marketplace-panel-header { gap: 12px; }
  .marketplace-fee-note { padding: 11px 13px; }
  .marketplace-shell { border-radius: 20px; }
  .marketplace-tabs {
    padding: 8px;
    scroll-snap-type: x proximity;
  }
  .marketplace-tab {
    padding: 9px 12px;
    scroll-snap-align: start;
    font-size: 12px;
  }
  .marketplace-panel { padding: 12px; }
  .marketplace-toolbar { gap: 9px; }
  .marketplace-toolbar input,
  .marketplace-toolbar select { min-height: 42px; }

  /* Profile and journal */
  .profile-view-toolbar { gap: 12px; }
  .profile-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }
  .profile-search input { grid-column: 1 / -1; }
  .profile-search .btn { padding: 9px 12px; }
  .player-profile { gap: 14px; }
  .profile-hero,
  .profile-edit-card { padding: 15px; border-radius: 19px; }
  .profile-name-row { align-items: flex-start; flex-wrap: wrap; }
  .profile-display-name { font-size: 23px; }
  .profile-level-summary { padding: 10px; }
  .profile-level-number { width: 56px; min-width: 56px; height: 56px; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .profile-stat { min-height: 88px; padding: 11px 7px; }
  .profile-stat-value { font-size: 18px; }
  .profile-rarest { padding: 13px; gap: 12px; }
  .profile-edit-form { gap: 12px; }
  .profile-avatar-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .profile-avatar-choice { min-width: 0; }
  .journal-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .achievement-filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }

  /* Rankings */
  .leaderboard-shell { border-radius: 20px; }
  .leaderboard-tabs { padding: 9px; scroll-snap-type: x proximity; }
  .leaderboard-tab { padding: 9px 12px; scroll-snap-align: start; font-size: 11px; }
  .leaderboard-panel { padding: 12px; }
  .leaderboard-panel-heading { gap: 11px; margin-bottom: 14px; }
  .leaderboard-panel-heading p { font-size: 11px; }
  .leaderboard-row { min-height: 74px; border-radius: 15px; }
  .leaderboard-collector strong { font-size: 14px; }
  .leaderboard-value strong { font-size: 15px; }

  /* Fusion */
  .fusion-layout { gap: 14px; }
  .fusion-panel-card { border-radius: 20px; }
  .fusion-card-grid { gap: 9px; }
  .fusion-card { border-radius: 15px; }

  /* Phone-sized dialogs with reachable close controls. */
  .overlay { padding: 8px; }
  .auth-card,
  .age-gate-card,
  .detail-card,
  .marketplace-dialog,
  .daily-wheel-card,
  .coin-shop-card {
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    border-radius: 22px;
  }
  .auth-card,
  .age-gate-card { padding: 28px 18px 20px; }
  .detail-card { max-width: 330px; padding: 16px; }
  .marketplace-dialog { padding: 23px 15px 17px; }
  .marketplace-preview-row { grid-template-columns: 50px minmax(0, 1fr); }
  .marketplace-preview-row > img { width: 50px; height: 64px; }
  .marketplace-preview-value { grid-column: 2; text-align: left; }
  .marketplace-buy-actions { grid-template-columns: 1fr; }
  .marketplace-inventory-overlay { padding: 7px; }
  .marketplace-inventory-dialog {
    width: calc(100vw - 14px);
    padding: 18px 9px;
    border-radius: 20px;
  }
  .marketplace-inventory-heading h2 { font-size: 23px; }
  .marketplace-inventory-grid { padding-right: 0; padding-left: 0; }
  .variant-binder-overlay { padding: 7px; }
  .variant-binder {
    width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
    padding: 18px 10px;
    border-radius: 20px;
  }
  .variant-binder-header { margin-bottom: 14px; padding-bottom: 14px; }
  .variant-binder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .variant-binder-card { width: 100%; margin: 0; padding: 7px; }
  .pack-info-overlay { padding: 6px; }
  .pack-info-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }
  .coin-shop-overlay { padding: 7px; }
  .coin-shop-card { padding: 28px 13px 18px; }
  .coin-bundle { min-height: 0; padding: 18px 14px; }
  .daily-wheel-overlay { padding: 7px; }
  .daily-wheel-card { padding: 23px 10px 20px; }

  /* Full-proportion pack cards presented as a swipeable reveal carousel. */
  .open-stage {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 18px 9px;
    overflow-y: auto;
    border-radius: 22px;
  }
  .suspense-stage { min-height: min(430px, 72dvh); }
  .suspense-pack { width: min(210px, 66vw); }
  .open-title { margin-bottom: 13px; font-size: 19px; }
  .reveal-row {
    --mobile-reveal-card-width: min(190px, 68vw);
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    min-height: 0;
    margin-bottom: 12px;
    padding: 7px calc((100% - var(--mobile-reveal-card-width)) / 2) 13px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-padding-inline: calc((100% - var(--mobile-reveal-card-width)) / 2);
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bubblegum) rgba(255, 255, 255, .55);
  }

  .reveal-row::-webkit-scrollbar { height: 5px; }
  .reveal-row::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
  }
  .reveal-row::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bubblegum), var(--hot));
  }

  .reveal-card {
    flex: 0 0 var(--mobile-reveal-card-width);
    width: var(--mobile-reveal-card-width);
    min-width: var(--mobile-reveal-card-width);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .reveal-inner { aspect-ratio: 5 / 7.65; }

  .reveal-face-front .item-card {
    padding: 8px 8px 40px;
    border-radius: 15px;
  }

  .reveal-face-front .item-card.first-edition::before {
    inset: 2px;
    border-radius: 12px;
  }

  .reveal-face-front .item-image-wrap {
    margin-bottom: 6px;
    border-radius: 9px;
  }

  .reveal-face-front .item-name {
    font-size: 11px;
    line-height: 1.15;
  }

  .reveal-face-front .item-handle {
    display: block;
    font-size: 8px;
    line-height: 1.1;
  }

  .reveal-face-front .rarity-tags {
    right: 8px;
    bottom: 8px;
    left: 8px;
    gap: 4px;
  }

  .reveal-face-front .rarity-tag {
    padding: 3px 5px;
    font-size: 7px;
  }
  .reveal-face-back::after { font-size: 38px; }

  .site-footer {
    padding-right: 14px;
    padding-bottom: 20px;
    padding-left: 14px;
  }
  .site-footer-links { justify-content: center; gap: 9px 13px; text-align: center; }

  .global-pull-toast,
  .achievement-toast-stack {
    right: 10px;
    left: 10px;
    width: auto;
  }
}

@media (max-width: 480px) {
  /* Profile remains one tap away in the bottom bar, saving header room. */
  #openJournalBtn { display: none; }
  #logoutBtn { margin-left: auto; }

  .marketplace-grid { grid-template-columns: minmax(0, 1fr); }
  .market-listing-card { padding: 10px; }
  .market-listing-card .item-card {
    width: min(245px, 100%);
    margin-right: auto;
    margin-left: auto;
  }
  .profile-avatar { width: 64px; height: 64px; flex-basis: 64px; }
  .profile-level-summary { align-items: stretch; }
  .profile-level-heading { flex-direction: column; gap: 2px; align-items: flex-start; }

  /* Override older single-column collection rules. */
  #view-inventory .inventory-grid,
  .variant-binder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 350px) {
  :root { --mobile-edge: 8px; }
  .tab::after { font-size: 8px; }
  .tab::before { font-size: 17px; }
  .profile-bar .btn { padding-right: 8px; padding-left: 8px; }
  .balance-pill { padding-right: 8px; padding-left: 8px; }
  .inventory-grid,
  #view-inventory .inventory-grid { gap: 6px; }
  .collection-character-card,
  .item-card { padding: 6px; }
}

/* ===== CLEAR AUTHENTICATION FEEDBACK ===== */
.auth-card {
  width: min(470px, calc(100vw - 32px));
}

.auth-card [hidden] {
  display: none !important;
}

.auth-field > span:first-child {
  color: var(--berry);
  font-family: var(--font-display);
  font-size: 13px;
}

.auth-field-help {
  color: #98617f;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.auth-field-status {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a33b72;
  font-size: 11px;
  font-weight: 700;
}

.auth-field-status:empty {
  display: none;
}

.auth-field-status.is-available {
  color: #17734c;
}

.auth-field-status.is-checking {
  color: #7f5680;
}

.auth-field input.auth-input-valid {
  border-color: #45b985;
  box-shadow: 0 0 0 3px rgba(69, 185, 133, .12);
}

.auth-field input.auth-input-invalid {
  border-color: #df6b75;
  box-shadow: 0 0 0 3px rgba(223, 107, 117, .11);
}

.auth-password-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: -3px 0 5px;
}

.auth-password-rules span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff9fc;
  color: #9d6685;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
}

.auth-password-rules span i {
  color: #ddb4cc;
  font-size: 7px;
}

.auth-password-rules span.is-valid {
  border-color: rgba(69, 185, 133, .34);
  background: rgba(232, 250, 241, .72);
  color: #17734c;
}

.auth-password-rules span.is-valid i {
  color: #35a875;
  font-size: 11px;
}

.auth-message {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(122, 31, 85, .14);
  border-radius: 12px;
  background: #fff8fc;
  color: var(--berry);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.auth-message:empty {
  display: none;
}

.auth-message i {
  flex: 0 0 auto;
  margin-top: 2px;
}

.auth-message.auth-error {
  border-color: rgba(180, 35, 24, .24);
  background: #fff1f0;
  color: #a32620;
}

.auth-message.auth-success {
  border-color: rgba(32, 137, 88, .25);
  background: #edfbf4;
  color: #17653f;
}

.auth-message.auth-loading,
.auth-message.auth-info {
  border-color: rgba(198, 79, 255, .2);
  background: #fbf4ff;
  color: #754183;
}

@media (max-width: 520px) {
  .auth-card {
    padding: 27px 17px 19px;
  }

  .auth-intro {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.45;
  }

  .auth-field {
    margin: 10px 0;
  }

  .auth-password-rules {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .auth-password-rules span {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* ===== CONSISTENT INTERFACE ICONS ===== */
.mute-btn i,
.leaderboard-trophy i,
.journal-stat-icon i,
.achievement-card-icon i,
.achievement-toast-icon i,
.global-pull-toast-title i,
.locked-image-wrap i,
.rarity-tag i,
.odds-chip i,
.achievement-rewards i {
  pointer-events: none;
}

.leaderboard-trophy i {
  font-size: .92em;
}

.journal-stat-icon i,
.achievement-card-icon i,
.achievement-toast-icon i {
  font-size: .78em;
}

.rarity-tag i,
.odds-chip i,
.achievement-rewards i,
.global-pull-toast-title i {
  font-size: .82em;
}

.locked-image-wrap i {
  color: rgba(122, 31, 85, .58);
  font-size: 27px;
}

/* BLUE DIAMOND ABSOLUTE FINAL: intentionally last in the stylesheet. */

/* ===== MOBILE NAVIGATION REFINEMENT ===== */
.mobile-tabs-scroll-track {
  display: none;
}

@media (max-width: 760px) {
  body {
    padding-bottom: 0;
  }

  .topbar {
    grid-template-rows: auto auto auto auto;
  }

  .tabs {
    position: static;
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    height: auto;
    min-width: 0;
    padding: 4px 4px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    border: 0;
    border-radius: 999px;
    background: var(--line);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .mobile-tabs-scroll-track {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 4;
    display: block;
    width: min(150px, 42vw);
    height: 5px;
    margin: -1px auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 2px rgba(90, 23, 64, 0.12);
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .mobile-tabs-scroll-track.is-hidden {
    opacity: 0;
  }

  .mobile-tabs-scroll-track span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 44px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--hot), var(--lilac));
    box-shadow: 0 1px 4px rgba(255, 79, 163, 0.32);
    transform: translateX(0);
    will-change: transform;
  }

  .tab {
    flex: 0 0 auto;
    display: block;
    min-width: 0;
    min-height: 36px;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .tab::before,
  .tab::after {
    content: none !important;
    display: none !important;
  }

  .tab.active {
    color: #fff;
    background: var(--hot);
    box-shadow: 0 5px 14px rgba(255, 79, 163, 0.24);
  }
}

@media (max-width: 380px) {
  .tab {
    padding: 8px 12px;
    font-size: 11px;
  }
}

.item-card.gold-etched-holographic {
  border-color: #c9f7ff !important;
  color: #102e5a !important;
  background:
    radial-gradient(circle at 13% 3%, rgba(255,255,255,.98) 0 2%, transparent 18%),
    radial-gradient(circle at 91% 91%, rgba(50,157,255,.4) 0 3%, transparent 25%),
    conic-gradient(from 218deg at 52% 47%,
      #153b73 0deg, #4aaeff 26deg, #bcefff 54deg, #f8feff 85deg,
      #69c8ff 118deg, #235aa7 156deg, #d8f9ff 194deg, #2588e8 231deg,
      #8ce7ff 270deg, #315ec2 310deg, #e9fdff 360deg) !important;
  background-size: 180% 180%, 190% 190%, 230% 230% !important;
  animation: blueDiamondCardPulse 5.8s ease-in-out infinite !important;
  box-shadow:
    0 0 0 2px rgba(239,253,255,.96),
    0 0 0 4px rgba(48,164,255,.38),
    0 0 19px 4px rgba(42,176,255,.4),
    0 0 29px 6px rgba(58,104,255,.22),
    0 10px 26px rgba(14,47,95,.3) !important;
}

.item-card.first-edition.gold-etched-holographic::before,
.detail-image-wrap.first-edition.gold-etched-holographic::before {
  background: linear-gradient(112deg,
    #12386f, #3da8ff 14%, #c8f5ff 29%, #fff 43%,
    #67d5ff 57%, #447bff 70%, #a8efff 84%, #173f7b) !important;
  background-size: 240% 100% !important;
  filter: drop-shadow(0 0 5px rgba(82,202,255,.82)) !important;
  animation: diamondEtchedEdgeShift 4.8s ease-in-out infinite !important;
}

.item-card.first-edition.gold-etched-holographic .item-image-wrap::before {
  background: linear-gradient(108deg,
    #173d75, #59baff 16%, #e5fbff 32%, #fff 47%,
    #72dbff 62%, #4e7dff 77%, #b9f3ff 89%, #173d75) !important;
  background-size: 230% 100% !important;
  filter: drop-shadow(0 0 4px rgba(75,196,255,.78)) !important;
  animation: diamondEtchedEdgeShift 4.8s ease-in-out -.6s infinite !important;
}

.item-card.gold-etched-holographic .item-image-wrap {
  background: #163b70 !important;
  box-shadow:
    0 0 0 2px rgba(9,37,80,.78),
    0 0 0 4px rgba(205,247,255,.94),
    0 0 12px rgba(52,188,255,.58),
    0 5px 14px rgba(9,35,76,.38) !important;
}

.detail-image-wrap.gold-etched-holographic {
  border-color: #c9f7ff !important;
  box-shadow:
    0 0 0 2px rgba(244,254,255,.98),
    0 0 0 4px rgba(53,179,255,.5),
    0 0 24px 6px rgba(45,191,255,.48),
    0 0 34px 8px rgba(48,91,255,.24) !important;
}

.gold-etched-holographic .holographic-foil {
  opacity: .58 !important;
  mix-blend-mode: screen !important;
  background:
    linear-gradient(124deg, transparent 0 25%, rgba(42,160,255,.2) 31%, rgba(211,249,255,.82) 37%, #fff 40%, rgba(57,187,255,.5) 45%, transparent 54% 100%),
    repeating-linear-gradient(138deg, transparent 0 24px, rgba(85,201,255,.25) 25px, rgba(229,252,255,.55) 26px, transparent 27px 53px),
    repeating-linear-gradient(42deg, transparent 0 31px, rgba(39,142,255,.2) 32px, rgba(126,224,255,.34) 33px, transparent 34px 68px),
    conic-gradient(from 45deg at 50% 50%, transparent 0 12%, rgba(73,184,255,.2) 12% 24%, transparent 24% 38%, rgba(177,241,255,.22) 38% 50%, transparent 50% 68%, rgba(72,102,255,.13) 68% 78%, transparent 78% 100%) !important;
  background-size: 330% 100%, 58px 58px, 76px 76px, 118px 118px !important;
  background-position: -190% 50%, 0 0, 0 0, 50% 50% !important;
  box-shadow: inset 0 0 14px rgba(90,205,255,.24), inset 0 0 0 1px rgba(219,250,255,.28) !important;
  animation: diamondEtchedFacetDrift 5.8s ease-in-out infinite !important;
}

.gold-etched-holographic .holographic-foil::before {
  opacity: .66 !important;
  background: linear-gradient(108deg, transparent 33%, rgba(45,158,255,.22) 41%, rgba(224,251,255,.78) 47%, #fff 50%, rgba(72,198,255,.56) 55%, transparent 66%) !important;
  animation: diamondEtchedLightPass 5.8s ease-in-out infinite !important;
}

.gold-etched-holographic .holographic-foil::after {
  opacity: .66 !important;
  background:
    radial-gradient(ellipse at 14% 17%, #fff 0 1px, #72d9ff 1.2px 2px, transparent 3px),
    radial-gradient(ellipse at 77% 21%, #fff 0 1px, #4b9fff 1.2px 2px, transparent 3px),
    radial-gradient(ellipse at 46% 61%, #fff 0 1.3px, #84e5ff 1.5px 2.3px, transparent 3.4px),
    radial-gradient(ellipse at 88% 81%, #fff 0 1px, #4580ff 1.2px 2px, transparent 3px),
    radial-gradient(ellipse at 21% 86%, #fff 0 1px, #a9f0ff 1.2px 2px, transparent 3px) !important;
  background-size: 53px 59px, 71px 67px, 79px 74px, 63px 73px, 77px 69px !important;
  animation: diamondEtchedGlints 3.6s steps(2,end) infinite !important;
}

.rarity-tag.gold-etched-holographic-tag,
.item-card.postcard .rarity-tag.gold-etched-holographic-tag,
.detail-card .rarity-tag.gold-etched-holographic-tag,
.gold-etched-holographic-preview {
  border-color: rgba(221,250,255,.98) !important;
  color: #102f61 !important;
  background:
    repeating-linear-gradient(132deg, transparent 0 10px, rgba(255,255,255,.42) 11px, transparent 12px 23px),
    linear-gradient(105deg, #12396f 0%, #3d9cff 17%, #bcefff 33%, #fff 47%, #71d8ff 61%, #4777ef 77%, #173f7c 100%) !important;
  background-size: 48px 48px, 230% 100% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 2px 9px rgba(24,91,166,.34) !important;
  animation: diamondEtchedTagShift 5.2s ease-in-out infinite !important;
}

.recent-pull-thumb.gold-etched-holographic {
  border-color: #9eeaff !important;
  box-shadow: 0 0 0 1px rgba(239,253,255,.94), 0 0 14px rgba(42,185,255,.55), 0 0 21px rgba(48,99,255,.24) !important;
}

.item-card.gold-etched-holographic .item-name,
.item-card.gold-etched-holographic .item-handle,
.item-card.gold-etched-holographic .catalog-no,
.item-card.gold-etched-holographic .variant-binder-status,
.item-card.gold-etched-holographic .collection-best-variant,
.item-card.gold-etched-holographic .collection-variant-line {
  color: #102e5a !important;
  text-shadow: 0 1px 0 rgba(224,249,255,.82) !important;
}

.item-card.gold-etched-holographic .collection-binder-action {
  border-color: rgba(24,81,145,.28) !important;
  color: #123668 !important;
  background: rgba(199,242,255,.42) !important;
}

.item-card.gold-etched-holographic .card-value-badge,
.item-card.gold-etched-holographic .count-badge {
  border-color: rgba(201,246,255,.9) !important;
  color: #effcff !important;
  background: rgba(8,40,88,.92) !important;
}

.item-card.variant-locked.gold-etched-holographic {
  background: linear-gradient(135deg, rgba(25,74,137,.78), rgba(171,230,255,.8), rgba(51,104,188,.76)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.gold-etched-holographic,
  .item-card.first-edition.gold-etched-holographic::before,
  .item-card.first-edition.gold-etched-holographic .item-image-wrap::before,
  .gold-etched-holographic .holographic-foil,
  .gold-etched-holographic .holographic-foil::before,
  .gold-etched-holographic .holographic-foil::after,
  .gold-etched-holographic-tag,
  .gold-etched-holographic-preview {
    animation: none !important;
  }
}