/* ═══════════════════════════════════════════════════
   MYSTERY SCOOP — Premium Scoop Machine UI
   Isolated module — no external dependencies
   ═══════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  --mc-black: #070707;
  --mc-black-2: #0e0b08;
  --mc-gold: #D4AF37;
  --mc-gold-dim: rgba(212, 175, 55, 0.35);
  --mc-gold-glow: rgba(212, 175, 55, 0.15);
  --mc-glass: rgba(255, 255, 255, 0.04);
  --mc-glass-border: rgba(255, 255, 255, 0.08);
  --mc-glass-shine: rgba(255, 255, 255, 0.12);
  --mc-pearl-common: #8ec8e8;
  --mc-pearl-rare: #c49cde;
  --mc-pearl-epic: #f0c040;
  --mc-text: #e8dcc8;
  --mc-muted: #8a7d6b;
  --mc-danger: #e74c3c;
  --mc-serif: 'Playfair Display', 'Georgia', serif;
  --mc-sans: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --mc-radius: 18px;
  --mc-transition: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Page Reset (scoped) ── */
.mystery-page {
  background: var(--mc-black);
  min-height: calc(100vh - 80px); /* Account for header */
  color: var(--mc-text);
  font-family: var(--mc-sans);
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
}

/* ── Particle Canvas ── */
#mysteryParticles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Header Area ── */
.mystery-hero {
  text-align: center;
  padding: 20px 20px 10px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 800px;
}
.mystery-hero .mystery-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mc-gold);
  border: 1px solid var(--mc-gold-dim);
  border-radius: 30px;
  padding: 6px 22px;
  margin-bottom: 16px;
  background: rgba(212, 175, 55, 0.06);
  animation: mc-pulse-border 3s ease-in-out infinite;
}
.mystery-hero h1 {
  font-family: var(--mc-serif);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  color: var(--mc-gold);
  line-height: 1.15;
  margin: 0 0 10px;
  text-shadow: 0 0 50px rgba(212, 175, 55, 0.4);
}
.mystery-hero p {
  font-size: 15px;
  color: var(--mc-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Machine Container ── */
.mystery-machine-wrapper {
  display: flex;
  justify-content: center;
  padding: 12px 20px 10px;
  margin-top: 0;
  position: relative;
  z-index: 2;
  width: 100%;
}
.mystery-machine {
  width: 100%;
  max-width: 520px;
  position: relative;
}

/* ── Glass Enclosure ── */
.mystery-glass {
  position: relative;
  width: 100%;
  height: 380px; /* slightly smaller for better vertical fit */
  background: linear-gradient(170deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--mc-gold-dim);
  border-radius: var(--mc-radius) var(--mc-radius) 0 0;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 var(--mc-glass-shine),
    0 0 60px rgba(212, 175, 55, 0.1),
    0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Glass reflections */
.mystery-glass::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.06) 50%, transparent 55%);
  pointer-events: none;
  z-index: 10;
  animation: mc-glass-shine 6s ease-in-out infinite;
}
.mystery-glass::after {
  content: '';
  position: absolute;
  top: 0; right: 5%;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
  z-index: 10;
}

/* ── Metal Frame Accents ── */
.mystery-frame-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #8a6914, var(--mc-gold), #c99b20, var(--mc-gold), #8a6914);
  z-index: 11;
  box-shadow: 0 2px 12px rgba(212, 175, 55, 0.3);
}
.mystery-frame-left,
.mystery-frame-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--mc-gold), #8a6914 40%, #6b5310 80%, var(--mc-gold));
  z-index: 11;
}
.mystery-frame-left { left: 0; }
.mystery-frame-right { right: 0; }

/* ── Claw Rail ── */
.mystery-claw-rail {
  position: absolute;
  top: 12px;
  left: 20px;
  right: 20px;
  height: 4px;
  background: linear-gradient(90deg, #6b5310, var(--mc-gold), #6b5310);
  border-radius: 2px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

/* ── Claw Assembly ── */
.mystery-claw-assembly {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  transition: left 0.35s var(--mc-transition);
  will-change: left;
}
.mystery-claw-rope {
  width: 2px;
  height: 30px;
  background: linear-gradient(to bottom, var(--mc-gold), #8a6914);
  margin: 0 auto;
  transition: height 0.6s var(--mc-transition);
  will-change: height;
}
.mystery-claw-head {
  width: 50px;
  height: 14px;
  background: linear-gradient(to bottom, var(--mc-gold), #a8892c);
  border-radius: 4px 4px 0 0;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Scoop Arms (formerly Claw Arms) */
.mystery-claw-arm {
  position: absolute;
  bottom: -20px;
  width: 12px;
  height: 26px;
  background: linear-gradient(to bottom, var(--mc-gold), #a8892c);
  border-radius: 0 0 10px 10px;
  transition: transform 0.4s var(--mc-transition);
  transform-origin: top center;
  will-change: transform;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}
.mystery-claw-arm-left {
  left: 4px;
  transform: rotate(-25deg);
  border-radius: 0 0 4px 12px;
}
.mystery-claw-arm-right {
  right: 4px;
  transform: rotate(25deg);
  border-radius: 0 0 12px 4px;
}
.mystery-claw-arm-center {
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 28px;
  border-radius: 0 0 12px 12px;
  transform: rotate(0deg);
}

/* Scoop closed state */
.mystery-claw-assembly.claw-closed .mystery-claw-arm-left {
  transform: rotate(-8deg);
}
.mystery-claw-assembly.claw-closed .mystery-claw-arm-right {
  transform: rotate(8deg);
}

/* ── Pearl Balls ── */
.mystery-pearl-field {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  z-index: 3;
}
.mystery-pearl {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: default;
  transition: transform 0.3s var(--mc-transition);
  will-change: transform;
}
.mystery-pearl::before {
  content: '';
  position: absolute;
  top: 6px; left: 8px;
  width: 14px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: rotate(-30deg);
}
.mystery-pearl.pearl-common {
  background: radial-gradient(circle at 35% 35%, #b8e0f4, var(--mc-pearl-common), #5a9ab8);
  box-shadow: 0 4px 15px rgba(142, 200, 232, 0.3), inset 0 -3px 6px rgba(0,0,0,0.15);
}
.mystery-pearl.pearl-rare {
  background: radial-gradient(circle at 35% 35%, #deb8f0, var(--mc-pearl-rare), #8a5ea8);
  box-shadow: 0 4px 15px rgba(196, 156, 222, 0.3), inset 0 -3px 6px rgba(0,0,0,0.15);
}
.mystery-pearl.pearl-epic {
  background: radial-gradient(circle at 35% 35%, #ffe680, var(--mc-pearl-epic), #b89020);
  box-shadow: 0 4px 20px rgba(240, 192, 64, 0.5), inset 0 -3px 6px rgba(0,0,0,0.15);
  animation: mc-epic-pulse 2s ease-in-out infinite;
}

/* Pearl bobbing */
@keyframes mc-pearl-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.mystery-pearl:nth-child(odd) { animation: mc-pearl-bob 3s ease-in-out infinite; }
.mystery-pearl:nth-child(even) { animation: mc-pearl-bob 3.5s ease-in-out 0.5s infinite; }

/* ── Controls Panel ── */
.mystery-controls {
  background: linear-gradient(to bottom, #1a1408, #100d06);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-top: 3px solid var(--mc-gold);
  border-radius: 0 0 var(--mc-radius) var(--mc-radius);
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Direction Buttons */
.mystery-btn-dir {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--mc-gold-dim);
  background: rgba(212, 175, 55, 0.06);
  color: var(--mc-gold);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mystery-btn-dir:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--mc-gold);
  box-shadow: 0 0 20px var(--mc-gold-glow);
}
.mystery-btn-dir:active {
  transform: scale(0.92);
  background: rgba(212, 175, 55, 0.2);
}
.mystery-btn-dir svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* GRAB Button */
.mystery-btn-grab {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--mc-gold);
  background: radial-gradient(circle at 40% 40%, #d4af37, #a88a2a, #705e1c);
  color: #070707;
  font-family: var(--mc-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 30px rgba(212, 175, 55, 0.3), inset 0 2px 4px rgba(255,255,255,0.25);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.mystery-btn-grab::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.15), transparent 30%);
  animation: mc-btn-spin 4s linear infinite;
}
.mystery-btn-grab:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 40px rgba(212, 175, 55, 0.5);
}
.mystery-btn-grab:active {
  transform: scale(0.95);
}
.mystery-btn-grab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.mystery-btn-grab span {
  position: relative;
  z-index: 1;
}

/* ── Collection Box ── */
.mystery-collection-box {
  position: absolute;
  bottom: 8px;
  right: 20px;
  width: 70px;
  height: 50px;
  background: linear-gradient(to bottom, #2a2010, #1a1508);
  border: 2px solid var(--mc-gold-dim);
  border-radius: 6px 6px 10px 10px;
  z-index: 4;
  overflow: hidden;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.5), 0 0 15px rgba(212, 175, 55, 0.1);
}
.mystery-collection-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #6b5310, var(--mc-gold), #6b5310);
  border-radius: 4px 4px 0 0;
}
.mystery-collection-label {
  position: absolute;
  bottom: -24px;
  right: 20px;
  width: 70px;
  text-align: center;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--mc-muted);
  z-index: 4;
}

/* ── Caught Pearl Animation ── */
.mystery-caught-pearl {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

/* ── Reveal Overlay ── */
.mystery-reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 7, 7, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.mystery-reveal-overlay.active {
  display: flex;
  opacity: 1;
}

/* ── Reveal Card ── */
.mystery-reveal-card {
  perspective: 1000px;
  width: 340px;
  height: 460px;
}
.mystery-reveal-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--mc-transition);
}
.mystery-reveal-card.flipped .mystery-reveal-card-inner {
  transform: rotateY(180deg);
}

.mystery-reveal-card-front,
.mystery-reveal-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--mc-radius);
  overflow: hidden;
}

/* Card Front (Mystery side) */
.mystery-reveal-card-front {
  background: linear-gradient(145deg, #1a1408, #100d06);
  border: 2px solid var(--mc-gold-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.mystery-reveal-card-front .mystery-question-mark {
  font-family: var(--mc-serif);
  font-size: 120px;
  color: var(--mc-gold);
  text-shadow: 0 0 60px rgba(212, 175, 55, 0.4);
  line-height: 1;
  animation: mc-question-float 3s ease-in-out infinite;
}
.mystery-reveal-card-front .mystery-tap-text {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mc-muted);
  animation: mc-pulse-text 2s ease-in-out infinite;
}

/* Card Back (Product) */
.mystery-reveal-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #1a1408, #0d0a05);
  border: 2px solid var(--mc-gold);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(212, 175, 55, 0.2);
}
.mystery-reveal-product-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.mystery-reveal-product-image img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}
.mystery-reveal-product-image .mystery-img-placeholder {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05));
  border: 2px dashed var(--mc-gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-serif);
  font-size: 48px;
  color: var(--mc-gold-dim);
}
.mystery-reveal-product-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(7,7,7,0.6));
  pointer-events: none;
}

.mystery-reveal-product-info {
  padding: 20px 24px 24px;
  text-align: center;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}
.mystery-reveal-rarity-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.mystery-rarity-common .mystery-reveal-rarity-badge {
  background: rgba(142, 200, 232, 0.12);
  color: var(--mc-pearl-common);
  border: 1px solid rgba(142, 200, 232, 0.25);
}
.mystery-rarity-rare .mystery-reveal-rarity-badge {
  background: rgba(196, 156, 222, 0.12);
  color: var(--mc-pearl-rare);
  border: 1px solid rgba(196, 156, 222, 0.25);
}
.mystery-rarity-epic .mystery-reveal-rarity-badge {
  background: rgba(240, 192, 64, 0.12);
  color: var(--mc-pearl-epic);
  border: 1px solid rgba(240, 192, 64, 0.3);
}
.mystery-reveal-product-name {
  font-family: var(--mc-serif);
  font-size: 20px;
  color: var(--mc-gold);
  margin: 0 0 4px;
  line-height: 1.3;
}
.mystery-reveal-product-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--mc-text);
  margin-bottom: 16px;
}

/* Add to Cart button */
.mystery-btn-cart {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--mc-gold), #a88a2a);
  color: #070707;
  font-family: var(--mc-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}
.mystery-btn-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(212, 175, 55, 0.5);
}
.mystery-btn-cart:active {
  transform: translateY(0);
}

/* Close Reveal */
.mystery-reveal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mc-glass-border);
  background: rgba(255,255,255,0.05);
  color: var(--mc-muted);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}
.mystery-reveal-close:hover {
  color: var(--mc-gold);
  border-color: var(--mc-gold-dim);
  background: rgba(212,175,55,0.08);
}

/* Play Again */
.mystery-btn-again {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 24px;
  border: 1px solid var(--mc-gold-dim);
  border-radius: 30px;
  background: transparent;
  color: var(--mc-gold);
  font-family: var(--mc-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.mystery-btn-again:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--mc-gold);
}

/* ── Status Text ── */
.mystery-status {
  text-align: center;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mc-gold);
  letter-spacing: 1px;
  min-height: 48px;
  position: relative;
  z-index: 2;
}

/* ── Sparkle burst (CSS only) ── */
.mystery-sparkle-burst {
  position: absolute;
  pointer-events: none;
  z-index: 20;
}
.mystery-sparkle {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--mc-gold);
  border-radius: 50%;
  animation: mc-sparkle-fly 0.8s ease-out forwards;
  box-shadow: 0 0 6px var(--mc-gold);
}

/* ── Rarity Glow ring on glass ── */
.mystery-glass.rarity-epic-glow {
  box-shadow:
    inset 0 1px 0 var(--mc-glass-shine),
    0 0 80px rgba(240, 192, 64, 0.15),
    0 0 120px rgba(240, 192, 64, 0.08);
}
.mystery-glass.rarity-rare-glow {
  box-shadow:
    inset 0 1px 0 var(--mc-glass-shine),
    0 0 60px rgba(196, 156, 222, 0.12);
}

/* ── Animations ── */
@keyframes mc-pulse-border {
  0%, 100% { border-color: var(--mc-gold-dim); }
  50% { border-color: var(--mc-gold); }
}
@keyframes mc-glass-shine {
  0% { transform: translateX(-100%); }
  40%, 100% { transform: translateX(200%); }
}
@keyframes mc-btn-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes mc-epic-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(240, 192, 64, 0.4), inset 0 -3px 6px rgba(0,0,0,0.15); }
  50% { box-shadow: 0 4px 30px rgba(240, 192, 64, 0.7), inset 0 -3px 6px rgba(0,0,0,0.15); }
}
@keyframes mc-question-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
@keyframes mc-pulse-text {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes mc-sparkle-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}
@keyframes mc-drop-pearl {
  0% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes mc-reveal-entrance {
  0% { transform: scale(0.7) rotateY(-30deg); opacity: 0; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
@keyframes mc-confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Confetti */
.mystery-confetti-piece {
  position: fixed;
  top: -10px;
  width: 8px;
  height: 16px;
  opacity: 0;
  z-index: 999;
  animation: mc-confetti linear forwards;
  border-radius: 2px;
}

/* ── Loading spinner ── */
.mystery-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--mc-gold-dim);
  border-top-color: var(--mc-gold);
  border-radius: 50%;
  animation: mc-spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes mc-spin {
  to { transform: rotate(360deg); }
}

/* ── Rarity legend ── */
.mystery-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px 20px 4px; /* Reduced bottom padding */
  position: relative;
  z-index: 2;
}
.mystery-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mc-muted);
  letter-spacing: 0.5px;
}
.mystery-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.mystery-legend-dot.common { background: var(--mc-pearl-common); box-shadow: 0 0 6px rgba(142,200,232,0.4); }
.mystery-legend-dot.rare { background: var(--mc-pearl-rare); box-shadow: 0 0 6px rgba(196,156,222,0.4); }
.mystery-legend-dot.epic { background: var(--mc-pearl-epic); box-shadow: 0 0 6px rgba(240,192,64,0.4); }

/* ── Responsive ── */
@media (max-width: 600px) {
  .mystery-hero { padding: 28px 16px 14px; }
  .mystery-hero h1 { font-size: 28px; }
  .mystery-glass { height: 340px; }
  .mystery-pearl { width: 34px; height: 34px; }
  .mystery-pearl::before { top: 5px; left: 6px; width: 11px; height: 8px; }
  .mystery-btn-dir { width: 48px; height: 48px; }
  .mystery-btn-grab { width: 80px; height: 80px; font-size: 13px; }
  .mystery-controls { padding: 18px 14px; gap: 12px; }
  .mystery-reveal-card { width: 300px; height: 420px; }
  .mystery-collection-box { width: 56px; height: 40px; right: 14px; }
  .mystery-collection-label { right: 14px; width: 56px; }
  .mystery-legend { gap: 16px; flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .mystery-glass { height: 280px; }
  .mystery-pearl { width: 28px; height: 28px; }
  .mystery-reveal-card { width: 280px; height: 400px; }
}

/* ── Added to cart confirmation ── */
.mystery-cart-confirm {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: linear-gradient(135deg, #1a1408, #0d0a05);
  border: 1px solid var(--mc-gold-dim);
  border-radius: 14px;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2000;
  opacity: 0;
  transition: all 0.4s var(--mc-transition);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.mystery-cart-confirm.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mystery-cart-confirm .mc-check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--mc-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #070707;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}
.mystery-cart-confirm span {
  color: var(--mc-text);
  font-size: 14px;
  font-weight: 600;
}

/* ── Back link ── */
.mystery-back-link {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  color: var(--mc-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
}
.mystery-back-link:hover {
  color: var(--mc-gold);
}
.mystery-back-link svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ── No items state ── */
.mystery-empty-state {
  text-align: center;
  padding: 60px 20px;
  position: relative;
  z-index: 2;
}
.mystery-empty-state .mystery-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}
.mystery-empty-state h2 {
  font-family: var(--mc-serif);
  font-size: 24px;
  color: var(--mc-gold);
  margin: 0 0 10px;
}
.mystery-empty-state p {
  color: var(--mc-muted);
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════
   LUXURY REVEAL OVERLAY  (mrl-* namespace)
   Completely replaces old cinematic reveal styles
   ════════════════════════════════════════════════════════════════ */

/* ── Overlay shell ── */
.mrl-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  overflow-y: auto;
  overflow-x: hidden;
  background: #060402;
}
.mrl-overlay.active {
  display: flex;
  opacity: 1;
}

/* ── Luxury atmosphere layers ── */
.mrl-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Velvet curtains */
.mrl-bg-curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;
}
.mrl-bg-curtain--left {
  left: 0;
  background: linear-gradient(to right, #1c0e06 0%, rgba(18,8,4,0.7) 70%, transparent 100%);
}
.mrl-bg-curtain--right {
  right: 0;
  background: linear-gradient(to left, #1c0e06 0%, rgba(18,8,4,0.7) 70%, transparent 100%);
}

/* Volumetric spotlight */
.mrl-bg-spotlight {
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 115%;
  background: radial-gradient(
    ellipse at 50% 8%,
    rgba(212,175,55,0.14) 0%,
    rgba(212,175,55,0.06) 30%,
    rgba(212,175,55,0.02) 55%,
    transparent 72%
  );
}

/* Warm amber floor bounce */
.mrl-bg-ambient {
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 50%;
  background: radial-gradient(ellipse at center, rgba(120,68,20,0.1) 0%, transparent 65%);
  filter: blur(30px);
}

/* Floating golden dust particles (CSS only) */
.mrl-bg-dust {
  position: absolute;
  inset: 0;
}
.mrl-bg-dust::before,
.mrl-bg-dust::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(212,175,55,0.45) 0%, transparent 100%),
    radial-gradient(1px   1px   at 55% 65%, rgba(212,175,55,0.30) 0%, transparent 100%),
    radial-gradient(2px   2px   at 80% 18%, rgba(212,175,55,0.38) 0%, transparent 100%),
    radial-gradient(1px   1px   at 35% 75%, rgba(212,175,55,0.28) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 40%, rgba(212,175,55,0.35) 0%, transparent 100%),
    radial-gradient(1px   1px   at 10% 85%, rgba(212,175,55,0.25) 0%, transparent 100%);
  animation: mrl-dust 9s ease-in-out infinite alternate;
}
.mrl-bg-dust::after {
  background-image:
    radial-gradient(1px   1px   at 90% 30%, rgba(212,175,55,0.32) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 25% 55%, rgba(212,175,55,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 60% 82%, rgba(212,175,55,0.28) 0%, transparent 100%),
    radial-gradient(2px   2px   at 45% 10%, rgba(212,175,55,0.36) 0%, transparent 100%);
  animation-duration: 13s;
  animation-direction: alternate-reverse;
}
@keyframes mrl-dust {
  from { transform: translateY(0px);   opacity: 0.55; }
  to   { transform: translateY(-22px); opacity: 1; }
}

/* ── Scene containers ── */
.mrl-scoop-scene,
.mrl-collection-scene {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 24px 50px;
  box-sizing: border-box;
}
.mrl-collection-scene {
  justify-content: flex-start;
  min-height: auto;
  padding-top: 70px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s ease, transform 1s ease;
}
.mrl-collection-scene.mrl-scene-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scene text ── */
.mrl-scene-title {
  font-family: var(--mc-serif);
  font-size: clamp(22px, 4.5vw, 40px);
  color: var(--mc-gold);
  text-align: center;
  text-shadow: 0 0 50px rgba(212,175,55,0.5), 0 2px 0 rgba(0,0,0,0.4);
  letter-spacing: 0.5px;
  margin: 0 0 36px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.mrl-scene-subtitle {
  font-family: var(--mc-serif);
  font-size: clamp(13px, 2.5vw, 19px);
  color: var(--mc-muted);
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 30px 0 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.mrl-scene-title.mrl-in,
.mrl-scene-subtitle.mrl-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scoop stage ── */
.mrl-scoop-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 480px;
}

/* ── Scoop wrapper — the ONE golden scoop ── */
.mrl-scoop-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(70px) scale(0.86);
  transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mrl-scoop-wrapper.mrl-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mrl-scoop-wrapper.mrl-tilting {
  transform: scale(1.07) rotate(-9deg) translateY(-8px);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Atmospheric rings */
.mrl-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.14);
  animation: mrl-ring-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
.mrl-ring--outer {
  inset: -28%;
  animation-delay: 0s;
}
.mrl-ring--inner {
  inset: -14%;
  animation-delay: 0.8s;
  border-color: rgba(212,175,55,0.22);
}
@keyframes mrl-ring-breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); box-shadow: 0 0 30px rgba(212,175,55,0.06); }
}

/* Warm glow blob */
.mrl-scoop-glow {
  position: absolute;
  inset: -35%;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.22) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.4s ease;
  pointer-events: none;
  animation: mrl-glow-breathe 4s ease-in-out 1.2s infinite;
}
.mrl-scoop-wrapper.mrl-in .mrl-scoop-glow {
  opacity: 1;
}
.mrl-scoop-wrapper.mrl-glowing .mrl-scoop-glow {
  opacity: 1;
  transform: scale(1.4);
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.45) 0%, transparent 65%);
}
@keyframes mrl-glow-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%       { transform: scale(1.12); opacity: 1; }
}

/* The scoop image itself */
.mrl-scoop-img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  max-height: 320px;
  object-fit: contain;
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.95))
    drop-shadow(0 0 30px rgba(212,175,55,0.12));
  transition: filter 1.2s ease;
}
.mrl-scoop-wrapper.mrl-glowing .mrl-scoop-img {
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.95))
    drop-shadow(0 0 80px rgba(212,175,55,0.5))
    drop-shadow(0 0 120px rgba(212,175,55,0.25));
}

/* Jewel burst container */
.mrl-jewel-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.mrl-jewel {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(212,175,55,0.9);
  animation: mrl-jewel-fly 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes mrl-jewel-fly {
  0%   { transform: translate(0, 0) scale(1.2); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--jx), var(--jy)) scale(0); opacity: 0; }
}

/* ── TAP TO REVEAL button ── */
.mrl-tap-btn {
  position: relative;
  overflow: hidden;
  margin-top: 44px;
  padding: 18px 56px;
  background: transparent;
  border: 1px solid rgba(212,175,55,0.7);
  color: var(--mc-gold);
  font-family: var(--mc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  border-radius: 40px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease, transform 1s ease, background 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 0 0 rgba(212,175,55,0);
}
.mrl-tap-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent 55%, rgba(212,175,55,0.18) 75%, transparent 100%);
  animation: mrl-btn-sweep 3.5s linear infinite;
  border-radius: inherit;
}
.mrl-tap-btn span {
  position: relative;
  z-index: 1;
}
.mrl-tap-btn.mrl-in {
  opacity: 1;
  transform: translateY(0);
}
.mrl-tap-btn.mrl-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mrl-tap-btn:hover {
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 50px rgba(212,175,55,0.22);
  transform: translateY(-2px);
}
@keyframes mrl-btn-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Collection header ── */
.mrl-collection-header {
  text-align: center;
  margin-bottom: 44px;
}
.mrl-collection-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--mc-gold);
  opacity: 0.65;
  margin-bottom: 14px;
}
.mrl-collection-title {
  font-family: var(--mc-serif);
  font-size: clamp(28px, 5vw, 46px);
  color: var(--mc-gold);
  margin: 0 0 10px;
  text-shadow: 0 0 40px rgba(212,175,55,0.3);
}
.mrl-collection-subtitle {
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--mc-muted);
}

/* ── Luxury product grid ── */
.mrl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 860px;
}
@media (max-width: 640px) {
  .mrl-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Luxury card */
.mrl-card {
  display: flex;
  align-items: center;
  min-height: 148px;
  background: linear-gradient(140deg, #1c1409 0%, #0e0a05 100%);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(212,175,55,0.07);
  opacity: 0;
  transform: translateY(22px);
  animation: mrl-card-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.mrl-card:hover {
  border-color: rgba(212,175,55,0.55);
  box-shadow: 0 14px 42px rgba(0,0,0,0.65), 0 0 35px rgba(212,175,55,0.09);
  transform: translateY(-4px);
}
@keyframes mrl-card-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Card image area */
.mrl-card-img {
  width: 136px;
  min-width: 136px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: radial-gradient(circle at center, rgba(212,175,55,0.05) 0%, transparent 70%);
  border-right: 1px solid rgba(212,175,55,0.1);
  overflow: hidden;
  flex-shrink: 0;
}
.mrl-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.mrl-img-ph {
  font-size: 34px;
  opacity: 0.35;
}

/* Card text area */
.mrl-card-info {
  flex: 1;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.mrl-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--mc-gold) 0%, #e8d070 100%);
  color: #070707;
  padding: 3px 10px;
  border-radius: 4px;
}
.mrl-name {
  font-family: var(--mc-serif);
  font-size: clamp(14px, 2vw, 18px);
  color: #f0e8d8;
  margin: 0;
  line-height: 1.35;
}
.mrl-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--mc-gold);
}

/* ── Reveal action buttons ── */
.mrl-actions {
  display: flex;
  gap: 16px;
  margin-top: 50px;
  width: 100%;
  max-width: 560px;
  justify-content: center;
}
.mrl-btn-cart,
.mrl-btn-buy {
  flex: 1;
  padding: 18px 24px;
  border: none;
  border-radius: 8px;
  font-family: var(--mc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.mrl-btn-cart {
  background: transparent;
  border: 1px solid rgba(212,175,55,0.7);
  color: var(--mc-gold);
}
.mrl-btn-cart:hover {
  background: rgba(212,175,55,0.09);
  box-shadow: 0 0 30px rgba(212,175,55,0.14);
}
.mrl-btn-buy {
  background: linear-gradient(135deg, var(--mc-gold) 0%, #c09428 100%);
  color: #060402;
  box-shadow: 0 8px 28px rgba(212,175,55,0.28);
}
.mrl-btn-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(212,175,55,0.45);
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .mrl-scoop-scene { padding: 80px 16px 40px; }
  .mrl-collection-scene { padding: 60px 14px 40px; }
  .mrl-scoop-img { max-width: 260px; max-height: 220px; }
  .mrl-scene-title { font-size: 22px; margin-bottom: 22px; }
  .mrl-scene-subtitle { font-size: 12px; letter-spacing: 2px; }
  .mrl-tap-btn { padding: 16px 36px; font-size: 11px; letter-spacing: 4px; }
  .mrl-card-img { width: 104px; min-width: 104px; height: 128px; }
  .mrl-collection-title { font-size: 26px; }
  .mrl-actions { flex-direction: column; max-width: 100%; }
  .mrl-btn-cart, .mrl-btn-buy { flex: none; width: 100%; }
  .mrl-ring--outer { inset: -20%; }
  .mrl-ring--inner { inset: -10%; }
}
@media (max-width: 380px) {
  .mrl-scoop-img { max-width: 200px; }
  .mrl-card { flex-direction: column; min-height: auto; }
  .mrl-card-img { width: 100%; height: 150px; border-right: none; border-bottom: 1px solid rgba(212,175,55,0.1); }
}

/* ── keep mc-card-enter for back-compat ── */
@keyframes mc-card-enter {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   SCENE 1 — Pulsing Mystery Orb + TAP TO REVEAL
   ════════════════════════════════════════════════════════════════ */

/* Pulsing question-mark orb */
.mrl-tap-stage {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 10px;
}
.mrl-tap-glow-ring,
.mrl-tap-inner-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.3);
  animation: mrl-ring-breathe 4s ease-in-out infinite;
}
.mrl-tap-glow-ring  { inset: 0;    animation-delay: 0s; }
.mrl-tap-inner-ring { inset: 14px; animation-delay: 0.7s; border-color: rgba(212,175,55,0.2); }

.mrl-question-mark {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%,
    rgba(212,175,55,0.22) 0%,
    rgba(120,80,20,0.14) 60%,
    rgba(0,0,0,0.3) 100%);
  border: 1px solid rgba(212,175,55,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-serif);
  font-size: 72px;
  color: var(--mc-gold);
  text-shadow: 0 0 30px rgba(212,175,55,0.6);
  box-shadow:
    0 0 40px rgba(212,175,55,0.12),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: mrl-qm-float 3s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes mrl-qm-float {
  0%, 100% { transform: translateY(0)   scale(1);    text-shadow: 0 0 30px rgba(212,175,55,0.5); }
  50%       { transform: translateY(-8px) scale(1.04); text-shadow: 0 0 60px rgba(212,175,55,0.8); }
}

/* ════════════════════════════════════════════════════════════════
   SCENE 2 — Single Scoop + Payment Panel
   ════════════════════════════════════════════════════════════════ */

.mrl-reveal-scene {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 780px;
  min-height: 100vh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 60px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease, transform 1s ease;
}
.mrl-reveal-scene.mrl-scene-in {
  opacity: 1;
  transform: translateY(0);
}

/* Single scoop wrapper */
.mrl-single-scoop {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 440px;
  margin-bottom: 44px;
}
.mrl-single-scoop-halo {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.18);
  animation: mrl-ring-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
.mrl-single-scoop-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.28) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(22px);
  pointer-events: none;
  animation: mrl-glow-breathe 4s ease-in-out infinite;
}
.mrl-single-scoop-img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  max-height: 340px;
  object-fit: contain;
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.95))
    drop-shadow(0 0 50px rgba(212,175,55,0.25));
  animation: mrl-scoop-entrance 1.2s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes mrl-scoop-entrance {
  from { opacity: 0; transform: scale(0.82) translateY(40px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ── Payment panel ── */
.mrl-payment-panel {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(140deg, #1c1409 0%, #0e0a05 100%);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 18px;
  padding: 32px 36px 36px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(212,175,55,0.08);
  text-align: center;
  animation: mrl-panel-in 1s 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes mrl-panel-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mrl-payment-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--mc-gold);
  opacity: 0.65;
  margin-bottom: 10px;
}
.mrl-payment-name {
  font-family: var(--mc-serif);
  font-size: clamp(22px, 4vw, 32px);
  color: #f0e8d8;
  margin: 0 0 12px;
  line-height: 1.2;
}
.mrl-payment-price {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  color: var(--mc-gold);
  text-shadow: 0 0 20px rgba(212,175,55,0.4);
  margin-bottom: 28px;
}
.mrl-payment-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mrl-btn-buy {
  width: 100%;
  padding: 18px 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--mc-gold) 0%, #c09428 100%);
  color: #060402;
  font-family: var(--mc-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 28px rgba(212,175,55,0.35);
}
.mrl-btn-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(212,175,55,0.5);
}
.mrl-btn-buy:active { transform: translateY(0); }

.mrl-btn-details {
  width: 100%;
  padding: 14px 24px;
  border: 1px solid rgba(212,175,55,0.5);
  border-radius: 10px;
  background: transparent;
  color: var(--mc-gold);
  font-family: var(--mc-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.mrl-btn-details:hover {
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 25px rgba(212,175,55,0.12);
}

/* ════════════════════════════════════════════════════════════════
   VIEW DETAILS MODAL
   ════════════════════════════════════════════════════════════════ */

.mrl-details-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 20px;
  box-sizing: border-box;
}
.mrl-details-modal-backdrop.mrl-modal-open {
  opacity: 1;
  pointer-events: auto;
}
.mrl-details-modal {
  position: relative;
  background: linear-gradient(145deg, #1e1508 0%, #100c06 100%);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 48px 36px 40px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(212,175,55,0.08);
  transform: scale(0.93) translateY(16px);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.25) transparent;
}
.mrl-details-modal-backdrop.mrl-modal-open .mrl-details-modal {
  transform: scale(1) translateY(0);
}
.mrl-details-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.2);
  background: rgba(255,255,255,0.04);
  color: var(--mc-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.mrl-details-close:hover {
  color: var(--mc-gold);
  border-color: rgba(212,175,55,0.45);
  background: rgba(212,175,55,0.07);
}
.mrl-details-header {
  margin-bottom: 28px;
}
.mrl-details-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--mc-gold);
  opacity: 0.6;
  margin-bottom: 8px;
}
.mrl-details-title {
  font-family: var(--mc-serif);
  font-size: clamp(22px, 4vw, 30px);
  color: var(--mc-gold);
  margin: 0;
  text-shadow: 0 0 25px rgba(212,175,55,0.25);
}
.mrl-details-body {
  color: var(--mc-text);
  font-size: 15px;
  line-height: 1.75;
}
.mrl-details-body p.mrl-desc-para {
  margin: 0 0 10px;
}
.mrl-details-body div.mrl-desc-bullet {
  margin: 6px 0;
  padding-left: 4px;
  color: var(--mc-gold);
  font-size: 14px;
}
.mrl-details-body br {
  display: block;
  content: '';
  margin: 4px 0;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .mrl-reveal-scene { padding: 70px 14px 50px; }
  .mrl-single-scoop-img { max-width: 260px; max-height: 220px; }
  .mrl-payment-panel { padding: 26px 22px 30px; }
  .mrl-payment-price { font-size: 32px; }
  .mrl-details-modal { padding: 44px 20px 32px; max-height: 85vh; }
  .mrl-tap-stage { width: 150px; height: 150px; }
  .mrl-question-mark { width: 110px; height: 110px; font-size: 58px; }
}