/* ============================================================
   Pack Spinner — pack_spinner.css
   Extracted from pack_spinner.html inline <style>.
   ============================================================ */

/* ===== IMAGE FADE-IN — hide until loaded ===== */
.spin-img-fade { opacity: 0; transition: opacity 0.35s ease; }
.spin-img-fade.loaded { opacity: 1; }

/* ===== PACK CINEMA TRANSITION (dim → swap → reveal) ===== */
.spin-cinema-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #0f1119;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
.spin-cinema-overlay.dimming { opacity: 1; pointer-events: auto; }
.spin-cinema-overlay.revealing {
  opacity: 0; pointer-events: none;
  transition: opacity 1s ease;
}

/* ===== PACK REVEAL OVERLAY ===== */
.pack-spinner-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: #050a0f;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.pack-spinner-overlay.active { display: flex; }

/* Title + counter */
.spin-title {
  font-size: 0.8rem; font-weight: 700; color: var(--spin-era-accent, #e9c46a);
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 0.3rem;
}
/* Revolver counter — horizontal scroll strip */
.spin-counter {
  overflow: hidden; position: relative;
  width: 280px; height: 2.2rem;
  margin-bottom: 1rem;
}
.spin-counter-track {
  display: flex; align-items: center;
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  transition: transform 0.6s cubic-bezier(0.22,0.68,0.35,1);
  will-change: transform;
}
.spin-counter-pip {
  flex-shrink: 0; width: 56px;
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', 'Palatino Linotype', serif;
  font-weight: 400; letter-spacing: 2px;
  white-space: nowrap;
  transition: font-size 0.6s cubic-bezier(0.22,0.68,0.35,1),
              color 0.5s ease, opacity 0.5s ease,
              transform 0.6s cubic-bezier(0.22,0.68,0.35,1);
  font-size: 0.75rem; color: rgba(255,255,255,0.15); opacity: 0.4;
  transform: scale(0.7);
}
.spin-counter-pip.active {
  font-size: 1.3rem; color: rgba(255,255,255,0.85); opacity: 1;
  transform: scale(1);
}
.spin-counter-pip.near {
  font-size: 0.85rem; color: rgba(255,255,255,0.25); opacity: 0.6;
  transform: scale(0.85);
}
/* Edge fades */
.spin-counter::before, .spin-counter::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px;
  pointer-events: none; z-index: 1;
}
.spin-counter::before {
  left: 0; background: linear-gradient(90deg, rgba(5,10,15,1) 0%, transparent 100%);
}
.spin-counter::after {
  right: 0; background: linear-gradient(-90deg, rgba(5,10,15,1) 0%, transparent 100%);
}

/* ===== PIECE SILHOUETTE (stage 1 variant) ===== */
.spin-card:has(.piece-silhouette) .spin-card-info {
  justify-content: flex-end; padding-bottom: 0.5rem !important;
}
.piece-silhouette {
  width: 65%; height: auto; object-fit: contain;
  filter: brightness(0) invert(0.15);
  opacity: 0.6;
}

/* ===== SPINNER REEL ===== */
.spinner-container {
  position: relative; width: 70%; max-width: 700px; height: 220px;
  overflow: visible; /* allow pointer to show above */
}
/* Inner clip for the track only */
.spinner-clip {
  position: absolute; inset: 20px 0 0 0;
  overflow: hidden;
}
/* Edge fade — cards fade out at left/right edges */
.spinner-clip::before, .spinner-clip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 30%; z-index: 5;
  pointer-events: none;
}
.spinner-clip::before {
  left: 0; background: linear-gradient(90deg, rgba(5,10,15,1) 0%, transparent 100%);
}
.spinner-clip::after {
  right: 0; background: linear-gradient(-90deg, rgba(5,10,15,1) 0%, transparent 100%);
}
/* Roulette pointer arrow — top center */
/* Pointer — thin roulette needle, anchored at top center, ticks on card pass */
.spinner-indicator {
  position: absolute; left: 50%; top: 4px;
  transform-origin: 50% 0%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 12; pointer-events: none;
  transition: transform 0.08s ease-out;
}
.spinner-indicator::after {
  content: ''; display: block;
  width: 2px; height: 20px; margin-left: -1px;
  background: linear-gradient(180deg, var(--spin-era-accent, #e9c46a) 0%, var(--spin-era-accent-dim, #c4983a) 100%);
  border-radius: 0 0 1px 1px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--spin-era-accent, #e9c46a) 40%, transparent);
}
.spinner-indicator::before {
  content: ''; display: block;
  width: 8px; height: 8px; margin-left: -3px;
  background: radial-gradient(circle, var(--spin-era-accent, #f0d878) 30%, var(--spin-era-accent-dim, #c49a3a) 100%);
  border-radius: 50%;
  box-shadow: 0 0 4px color-mix(in srgb, var(--spin-era-accent, #e9c46a) 50%, transparent);
}
/* Card outline holder — bold metallic border, transparent inside */
.spinner-holder {
  position: absolute; left: 50%; top: 20px;
  transform: translateX(-50%);
  width: 154px; height: 202px;
  border-radius: 10px;
  pointer-events: none; z-index: 8;
  background: transparent;
}
/* Metallic gradient border via pseudo-element mask trick */
.spinner-holder::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 10px;
  padding: 2.5px; /* border thickness */
  background: linear-gradient(160deg, #d4a94e 0%, #8b6d2e 25%, #f0d878 50%, #8b6d2e 75%, #d4a94e 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* Glow */
.spinner-holder::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: 11px;
  box-shadow: 0 0 12px rgba(233,196,106,0.12);
  pointer-events: none;
  animation: holderGlow 2s ease-in-out infinite;
}
@keyframes holderGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.spinner-track {
  position: absolute; top: 50%; left: 0; display: flex; gap: 10px;
  transform: translateY(-50%); will-change: transform;
  align-items: center;
}

/* ===== SPIN CARD (matches deck-card from club_shop modal) ===== */
.spin-card {
  width: 150px; height: 200px; flex-shrink: 0;
  border-radius: 9px; position: relative;
  overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,0.06);
  background: #111820;
}
/* Country shape — top-left corner, partially cropped by card overflow */
.spin-card-shape {
  position: absolute; top: -5px; left: -4px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.08);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  pointer-events: none; z-index: 1;
}
/* Art area — fills card by default, shrinks when info shows */
.spin-card-art {
  flex: 1; display: flex; align-items: center; justify-content: center;
  position: relative; transition: height 0.3s ease;
}
/* Info area base */
.spin-card-info {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Accent line between art and info */
.spin-card-art::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
/* Text sizes scaled from reveal (0.68x ratio) */
.spin-card-year {
  font-size: 0.75rem; font-weight: 900; color: var(--spin-era-accent, #e9c46a);
}
.spin-card-name {
  font-size: 0.42rem; color: rgba(255,255,255,0.7); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}
/* Plastic wrap glass cover (matches pack-card from club_shop) */
.spin-card::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 15%, transparent 30%),
    linear-gradient(165deg, transparent 45%, rgba(255,255,255,0.025) 50%, transparent 55%),
    linear-gradient(0deg, rgba(255,255,255,0.03) 0%, transparent 20%);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-left: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.02);
}
/* Bottom edge reflection */
.spin-card::after {
  content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  pointer-events: none; z-index: 3;
}
/* Rarity accent lines on art::after */
.rarity-common .spin-card-art::after { background: linear-gradient(90deg, transparent, #9e9e9e33, transparent); }
.rarity-uncommon .spin-card-art::after { background: linear-gradient(90deg, transparent, #4caf5033, transparent); }
.rarity-rare .spin-card-art::after { background: linear-gradient(90deg, transparent, #ffd70033, transparent); }
.rarity-epic .spin-card-art::after { background: linear-gradient(90deg, transparent, #9c27b033, transparent); }
.rarity-legendary .spin-card-art::after { background: linear-gradient(90deg, transparent, #ff980033, transparent); }
.rarity-icon .spin-card-art::after { background: linear-gradient(90deg, transparent, #c0c0c033, transparent); }
/* All spin cards: proportions scaled from reveal (220w: 190art/~90info → 150w: 130art/70info) */
.spin-card .spin-card-art { height: 130px; flex: none; overflow: hidden; }
.spin-card .spin-card-info {
  height: 70px !important; padding: 0.25rem 0.35rem 0.35rem !important;
  background: #0d1520; border-top: 1px solid rgba(255,255,255,0.04);
  overflow: hidden; gap: 0.03rem;
}
/* Item cards in reel (boards/stadiums) — reuses spin-item-card-art structure
   from the reveal modal so image cropping matches exactly. */
.spin-card.spin-card-item .spin-item-card-art {
  position: relative; overflow: hidden; height: 130px; flex: none;
  background: linear-gradient(150deg, #1e2830, #141c24);
}
.spin-card.spin-card-item .spin-item-card-art img {
  position: absolute; top: 30%; left: 30%;
  width: 95%; height: auto;
  object-fit: contain;
  filter: drop-shadow(-2px -2px 6px rgba(0,0,0,0.5));
  z-index: 0; border-radius: 4px; transform: rotate(3deg);
}
.spin-card.spin-card-item .spin-item-card-art .spin-item-shape {
  position: absolute; top: -5px; left: -4px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.08);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  pointer-events: none; z-index: 2;
}
/* Rarity-tinted shapes — item reel cards (stage 2) */
.spin-card.spin-card-item.rarity-common .spin-item-shape { background: rgba(255,255,255,0.05); }
.spin-card.spin-card-item.rarity-uncommon .spin-item-shape { background: rgba(255,255,255,0.08); }
.spin-card.spin-card-item.rarity-rare .spin-item-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.18) 0%, rgba(192,192,192,0.10) 50%, rgba(192,192,192,0.06) 100%); }
.spin-card.spin-card-item.rarity-epic .spin-item-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,200,120,0.22) 0%, rgba(205,127,50,0.12) 50%, rgba(205,127,50,0.06) 100%); }
.spin-card.spin-card-item.rarity-legendary .spin-item-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,245,150,0.24) 0%, rgba(255,215,0,0.12) 50%, rgba(255,215,0,0.06) 100%); }
.spin-card.spin-card-item.rarity-icon .spin-item-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.28) 0%, rgba(210,210,220,0.14) 50%, rgba(210,210,220,0.06) 100%); }
/* Era art backgrounds for item reel cards */
.spin-card.spin-card-item.era-pioneers .spin-item-card-art { background: linear-gradient(150deg, #4a3520, #352516); }
.spin-card.spin-card-item.era-golden .spin-item-card-art { background: linear-gradient(150deg, #3a3a40, #282830); }
.spin-card.spin-card-item.era-modern .spin-item-card-art { background: linear-gradient(150deg, #3a3210, #2a2408); }
.spin-card.spin-card-item.era-millennium .spin-item-card-art { background: linear-gradient(150deg, #2a2a32, #1c1c24); }
.spin-card.spin-card-item.era-neomundo .spin-item-card-art { background: linear-gradient(150deg, #162a28, #0e1e1c); }

/* All stages: same card style, no dimming, no spoiler */
.spin-card.ghost { opacity: 1; }
.spin-card.stage2 { opacity: 1; }
.spin-card.winner-highlight { opacity: 1; }

/* ===== YEAR OVERLAY (Stage 2 center text) ===== */
.spin-year-overlay {
  position: absolute; z-index: 20;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
.spin-year-overlay.active { display: flex; }
.spin-year-overlay.fade-out { animation: yearFadeOut 0.4s ease forwards; }
.spin-year-text {
  font-size: 4rem; font-weight: 900; color: rgba(255,255,255,0.9);
  text-shadow: 0 0 40px color-mix(in srgb, var(--spin-era-accent, #e9c46a) 40%, transparent), 0 4px 20px rgba(0,0,0,0.5);
  letter-spacing: 4px;
  animation: yearFadeIn 0.6s ease forwards;
}
@keyframes yearFadeIn {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes yearFadeOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}
/* Subtle shake on winner land */
.spinner-container.winner-shake {
  animation: winnerShake 0.3s ease;
}
@keyframes winnerShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

/* ===== REVEAL (Stage 3) ===== */
.spin-reveal {
  display: none; flex-direction: column; align-items: center;
  gap: 1.2rem;
}
.spin-reveal.active { display: flex; animation: revealIn 0.55s cubic-bezier(0.22,0.68,0.35,1); }
@keyframes revealIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* White flash — gentle, slow fade */
.spin-flash {
  position: fixed; inset: 0; z-index: 30;
  background: white; pointer-events: none;
  animation: flashAnim 1.4s ease forwards;
}
@keyframes flashAnim {
  0% { opacity: 0; }
  8% { opacity: 0.2; }
  25% { opacity: 0.15; }
  100% { opacity: 0; }
}
/* Reveal card — large, same proportions as focus card */
.spin-reveal-card {
  width: 220px; display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,196,106,0.1);
  position: relative; background: #111820;
}
.spin-reveal-card .spin-card-art {
  height: 190px; flex: none; position: relative;
  overflow: hidden; /* clip the shape within art area */
}
.spin-reveal-card .spin-card-shape {
  width: 70px; height: 70px; top: -8px; left: -6px;
}
/* Rarity-tinted shapes — reveal card */
.spin-reveal-card.rarity-common .spin-card-shape { background: rgba(255,255,255,0.06); }
.spin-reveal-card.rarity-uncommon .spin-card-shape { background: rgba(255,255,255,0.09); }
.spin-reveal-card.rarity-rare .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.20) 0%, rgba(192,192,192,0.12) 50%, rgba(192,192,192,0.06) 100%); }
.spin-reveal-card.rarity-epic .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,200,120,0.24) 0%, rgba(205,127,50,0.14) 50%, rgba(205,127,50,0.06) 100%); }
.spin-reveal-card.rarity-legendary .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,245,150,0.26) 0%, rgba(255,215,0,0.14) 50%, rgba(255,215,0,0.06) 100%); }
.spin-reveal-card.rarity-icon .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.30) 0%, rgba(210,210,220,0.16) 50%, rgba(210,210,220,0.06) 100%); }
.spin-reveal-card .spin-card-info {
  height: auto !important; overflow: visible !important;
  padding: 0.4rem 0.6rem 0.6rem;
  background: #0d1520;
  border-top: 1px solid rgba(255,255,255,0.06);
  gap: 0.05rem;
}
/* Era info backgrounds on reveal card — match reel cards */
.spin-reveal-card.era-pioneers .spin-card-info { background: #1a1208; }
.spin-reveal-card.era-golden .spin-card-info { background: #14141a; }
.spin-reveal-card.era-modern .spin-card-info { background: #1a1608; }
.spin-reveal-card.era-millennium .spin-card-info { background: #121216; }
.spin-reveal-card.era-neomundo .spin-card-info { background: #0c1614;
}
.spin-reveal-card .spin-card-year {
  font-size: 1.1rem; color: var(--spin-era-accent, #e9c46a); font-weight: 900;
}
.spin-reveal-card .spin-card-name {
  font-size: 0.62rem; color: rgba(255,255,255,0.7); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.spin-reveal-card .spin-card-art::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--spin-era-accent, #e9c46a) 15%, transparent), transparent);
}
/* Glass cover on reveal — same plastic wrap */
.spin-reveal-card::before {
  content: ''; position: absolute; inset: 0; z-index: 4;
  border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 15%, transparent 30%),
    linear-gradient(165deg, transparent 45%, rgba(255,255,255,0.025) 50%, transparent 55%),
    linear-gradient(0deg, rgba(255,255,255,0.03) 0%, transparent 20%);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-left: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.02);
}
.spin-reveal-card::after {
  content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  pointer-events: none; z-index: 4;
}
/* Rarity glow on reveal card */
.spin-reveal-card.rarity-common { box-shadow: 0 12px 60px rgba(0,0,0,0.5); border-color: rgba(158,158,158,0.12); }
.spin-reveal-card.rarity-uncommon { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 14px rgba(76,175,80,0.10); border-color: rgba(76,175,80,0.18); }
.spin-reveal-card.rarity-rare { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 16px rgba(192,192,192,0.12); border-color: rgba(192,192,192,0.20); }
.spin-reveal-card.rarity-epic { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 20px rgba(205,127,50,0.15); border-color: rgba(205,127,50,0.25); }
.spin-reveal-card.rarity-legendary { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 24px rgba(233,196,106,0.18); border-color: rgba(255,215,0,0.22); }
.spin-reveal-card.rarity-icon { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 28px rgba(220,220,230,0.15); border-color: rgba(200,200,220,0.28); }
/* Shine sweep on reveal card */
.spin-reveal-card .spin-shine-sweep {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  pointer-events: none; overflow: hidden;
}
.spin-reveal-card .spin-shine-sweep::after {
  content: ''; position: absolute; top: -50%; left: -100%;
  width: 50%; height: 200%;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.1) 55%, transparent 75%);
  transform: skewX(-12deg);
  animation: spinShineLTR 0.8s cubic-bezier(0.25,0.8,0.25,1) 0.3s forwards;
  opacity: 0;
}
/* Shine on item reveal cards too */
.spin-reveal .spin-item-card .spin-shine-sweep {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  pointer-events: none; overflow: hidden;
}
.spin-reveal .spin-item-card .spin-shine-sweep::after {
  content: ''; position: absolute; top: -50%; left: -100%;
  width: 50%; height: 200%;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.1) 55%, transparent 75%);
  transform: skewX(-12deg);
  animation: spinShineLTR 0.8s cubic-bezier(0.25,0.8,0.25,1) 0.3s forwards;
  opacity: 0;
}
/* Rarity glow on item reveal cards */
.spin-reveal .spin-item-card.tier-common { box-shadow: 0 12px 60px rgba(0,0,0,0.5); border-color: rgba(158,158,158,0.12); }
.spin-reveal .spin-item-card.tier-uncommon { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 14px rgba(76,175,80,0.10); border-color: rgba(76,175,80,0.18); }
.spin-reveal .spin-item-card.tier-rare { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 16px rgba(192,192,192,0.12); border-color: rgba(192,192,192,0.20); }
.spin-reveal .spin-item-card.tier-epic { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 20px rgba(205,127,50,0.15); border-color: rgba(205,127,50,0.25); }
.spin-reveal .spin-item-card.tier-legendary { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 24px rgba(233,196,106,0.18); border-color: rgba(255,215,0,0.22); }
.spin-reveal .spin-item-card.tier-icon { box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 28px rgba(220,220,230,0.15); border-color: rgba(200,200,220,0.28); }

.spin-reveal-badge {
  margin: -0.1rem 0 0;
  transform: scale(0.85);
}
/* Prevent badge hover transforms from shifting layout inside reel cards */
.pack-spinner-overlay .spin-card .country-badge-wrapper,
.pack-spinner-overlay .spin-card .country-badge-wrapper:hover {
  transform: none !important;
  pointer-events: none;
}
/* Reveal and pick badges: allow rarity filters, suppress hover transform only */
.pack-spinner-overlay .spin-reveal .country-badge-wrapper,
.pack-spinner-overlay .spin-pick-inner .country-badge-wrapper {
  pointer-events: none;
}
.spin-card-type {
  font-size: 0.5rem; color: rgba(255,255,255,0.25);
  margin-top: 0.08rem; line-height: 1;
}
.type-icon-img {
  height: 1em; width: auto; vertical-align: middle;
  filter: brightness(0) invert(1); opacity: 0.25;
}
.spin-reveal-btn {
  background: var(--spin-era-accent, #e9c46a); border: none; color: #1a1a1a;
  padding: 0.55rem 2.5rem; border-radius: 8px;
  font-size: 0.75rem; font-weight: 700; cursor: var(--cur-pointer, pointer);
  text-transform: uppercase; letter-spacing: 1px;
  transition: filter 0.15s;
}
.spin-reveal-btn:hover { filter: brightness(1.1); }
.spin-reveal-btn:focus-visible { outline: none; }
.spin-reveal-btn.spin-btn-secondary {
  background: transparent; border: 1px solid rgba(255,255,255,0.1);
  color: #9ca3af;
}
.spin-reveal-btn.spin-btn-secondary:hover {
  background: rgba(255,255,255,0.05);
}

/* ===== FINAL SUMMARY ITEMS ===== */
.spin-summary-item {
  text-align: center; padding: 0.5rem;
  background: rgba(255,255,255,0.03); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  width: 100px; flex-shrink: 0;
}

/* ===== PLAYER PICK ===== */
.spin-pick-grid {
  display: flex; gap: 1.2rem; align-items: stretch;
  justify-content: center; flex-wrap: wrap;
}
/* Mystery card */
.spin-pick-card {
  width: 170px; height: 260px; position: relative; cursor: var(--cur-pointer, pointer);
  border-radius: 10px; overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  opacity: 0; transform: translateY(20px);
  animation: pickCardIn 0.6s cubic-bezier(0.22,0.68,0.35,1) forwards;
}
.spin-pick-card:nth-child(2) { animation-delay: 0.12s; }
.spin-pick-card:nth-child(3) { animation-delay: 0.24s; }
.spin-pick-card:nth-child(4) { animation-delay: 0.36s; }
.spin-pick-card:nth-child(5) { animation-delay: 0.48s; }
@keyframes pickCardIn {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pickOverlayIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.spin-pick-card:not(.revealed):not(.revealing) {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 1.5px rgba(200,195,188,0.3), 0 0 0 3px rgba(180,174,168,0.1);
}
.spin-pick-card.revealing {
  transition: transform 0.3s ease;
}
.spin-pick-card:not(.revealed):not(.selected):hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 0 0 1.5px rgba(210,205,198,0.4), 0 0 0 3px rgba(190,184,178,0.15);
}
/* Revealed card hover — lift + golden glow + brightness */
.spin-pick-card.revealed:not(.selected):hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 14px rgba(233,196,106,0.1);
  filter: brightness(1.08);
}
/* Shine sweep on revealed hover */
.spin-pick-card.revealed .spin-pick-shine {
  position: absolute; inset: 0; z-index: 8; border-radius: inherit;
  pointer-events: none; overflow: hidden;
}
.spin-pick-card.revealed .spin-pick-shine::after {
  content: ''; position: absolute; top: -50%; left: -100%;
  width: 50%; height: 200%;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.13) 50%, rgba(255,255,255,0.08) 55%, transparent 75%);
  transform: skewX(-12deg); opacity: 0;
}
.spin-pick-card.revealed:not(.selected):hover .spin-pick-shine::after {
  animation: spinShineLTR 0.7s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
/* Click to select — smooth transitions for all animated props */
.spin-pick-card.revealed {
  transition: transform 0.4s cubic-bezier(0.22,0.68,0.35,1),
              box-shadow 0.35s ease, filter 0.3s ease, opacity 0.35s ease;
}
/* Unopened cover — two-part card shape matching the real card */
.spin-pick-cover {
  position: absolute; inset: 0; z-index: 5;
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Top part — lighter */
.spin-pick-cover-top {
  flex: 1; position: relative;
  background: linear-gradient(155deg, #d0cbc5 0%, #c4beb8 50%, #cec8c2 100%);
}
/* Glass sheen on top */
.spin-pick-cover-top::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.08) 20%, transparent 40%),
    linear-gradient(245deg, rgba(255,255,255,0.12) 0%, transparent 30%);
  border-top: 1px solid rgba(255,255,255,0.4);
  border-left: 1px solid rgba(255,255,255,0.15);
  pointer-events: none;
}
/* Bottom part — slightly darker, with type icon */
.spin-pick-cover-bottom {
  height: 95px; position: relative;
  background: linear-gradient(155deg, #b8b2ac 0%, #ada7a1 100%);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}
.spin-pick-cover-icon {
  font-size: 1.2rem; opacity: 0.2;
}
.spin-pick-cover-icon .type-icon-img { height: 18px; }
/* Bottom edge reflection */
.spin-pick-cover-bottom::after {
  content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  pointer-events: none;
}
/* Cursor-based glow */
.spin-pick-glow {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 6; opacity: 0;
  transition: opacity 0.25s;
}
.spin-pick-card:not(.revealed):hover .spin-pick-glow { opacity: 1; }
/* Reveal — clean opacity fade only */
.spin-pick-card.revealing .spin-pick-cover {
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Final revealed state */
.spin-pick-card.revealed .spin-pick-cover {
  opacity: 0; pointer-events: none;
}
/* Selected state — scale up + lift + golden glow */
.spin-pick-card.selected {
  transform: translateY(-16px) scale(1.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(233,196,106,0.18);
  z-index: 10;
  filter: brightness(1.05);
}
.spin-pick-card.selected .spin-pick-shine::after {
  animation: spinShineLTR 0.7s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
.spin-pick-card.selected::after {
  content: ''; position: absolute; inset: -2px; z-index: 6;
  border: 1.5px solid rgba(233,196,106,0.4); border-radius: 11px;
  pointer-events: none;
}
/* Unselected cards dim when a sibling is selected */
.spin-pick-grid:has(.selected) .spin-pick-card:not(.selected) {
  opacity: 0.5;
  transform: scale(0.97);
  filter: brightness(0.85);
  transition: transform 0.4s cubic-bezier(0.22,0.68,0.35,1),
              box-shadow 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}
/* Inner card content — same as reveal card */
.spin-pick-inner {
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  background: #111820;
  border: 1px solid rgba(255,255,255,0.06);
  height: 100%;
}
/* When inner contains an item-style card, be transparent */
.spin-pick-inner:has(.spin-item-card) {
  background: none; border: none;
}
.spin-pick-inner .spin-card-art {
  flex: 1; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #1a2430, #121a22);
}
.spin-pick-inner .spin-card-info {
  min-height: 95px;
  padding: 0.4rem 0.5rem 0.5rem;
  background: #0d1520; border-top: 1px solid rgba(255,255,255,0.04);
  text-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.03rem;
}
/* Era art + info backgrounds on pick cards (piece inner content) */
.spin-pick-inner-content {
  display: flex; flex-direction: column; height: 100%;
  position: relative;
}
.spin-pick-inner-content .spin-card-art { flex: 1; }
.spin-pick-inner-content.era-pioneers .spin-card-art { background: linear-gradient(150deg, #4a3520, #352516); }
.spin-pick-inner-content.era-golden .spin-card-art { background: linear-gradient(150deg, #3a3a40, #282830); }
.spin-pick-inner-content.era-modern .spin-card-art { background: linear-gradient(150deg, #3a3210, #2a2408); }
.spin-pick-inner-content.era-millennium .spin-card-art { background: linear-gradient(150deg, #2a2a32, #1c1c24); }
.spin-pick-inner-content.era-neomundo .spin-card-art { background: linear-gradient(150deg, #162a28, #0e1e1c); }
.spin-pick-inner-content.era-pioneers .spin-card-info { background: #1a1208; }
.spin-pick-inner-content.era-golden .spin-card-info { background: #14141a; }
.spin-pick-inner-content.era-modern .spin-card-info { background: #1a1608; }
.spin-pick-inner-content.era-millennium .spin-card-info { background: #121216; }
.spin-pick-inner-content.era-neomundo .spin-card-info { background: #0c1614; }
/* Rarity-tinted shapes — piece pick cards */
.spin-pick-inner-content.rarity-common .spin-card-shape { background: rgba(255,255,255,0.05); }
.spin-pick-inner-content.rarity-uncommon .spin-card-shape { background: rgba(255,255,255,0.08); }
.spin-pick-inner-content.rarity-rare .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.20) 0%, rgba(192,192,192,0.12) 50%, rgba(192,192,192,0.06) 100%); }
.spin-pick-inner-content.rarity-epic .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,200,120,0.24) 0%, rgba(205,127,50,0.14) 50%, rgba(205,127,50,0.06) 100%); }
.spin-pick-inner-content.rarity-legendary .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,245,150,0.26) 0%, rgba(255,215,0,0.14) 50%, rgba(255,215,0,0.06) 100%); }
.spin-pick-inner-content.rarity-icon .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.30) 0%, rgba(210,210,220,0.16) 50%, rgba(210,210,220,0.06) 100%); }
/* Item-style card inside pick/reveal — self-contained, no deck-card deps */
.spin-item-card {
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #111820; position: relative;
  height: 100%;
}
/* Era art backgrounds */
.spin-item-card-art {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #1e2830, #141c24);
}
.spin-item-card.era-pioneers .spin-item-card-art { background: linear-gradient(150deg, #4a3520, #352516); }
.spin-item-card.era-golden .spin-item-card-art { background: linear-gradient(150deg, #3a3a40, #282830); }
.spin-item-card.era-modern .spin-item-card-art { background: linear-gradient(150deg, #3a3210, #2a2408); }
.spin-item-card.era-millennium .spin-item-card-art { background: linear-gradient(150deg, #2a2a32, #1c1c24); }
.spin-item-card.era-neomundo .spin-item-card-art { background: linear-gradient(150deg, #162a28, #0e1e1c); }
/* Tier info backgrounds + border colors */
/* Tier border colors — consistent rarity palette */
.spin-item-card.tier-common { border-color: rgba(158,158,158,0.12); }
.spin-item-card.tier-uncommon { border-color: rgba(76,175,80,0.18); }
.spin-item-card.tier-rare { border-color: rgba(192,192,192,0.20); }
.spin-item-card.tier-epic { border-color: rgba(205,127,50,0.25); }
.spin-item-card.tier-legendary { border-color: rgba(255,215,0,0.22); }
.spin-item-card.tier-icon { border-color: rgba(200,200,220,0.28); }
/* Era info backgrounds on item reveal cards — match reel cards */
.spin-item-card.era-pioneers .spin-item-card-info { background: #1a1208; }
.spin-item-card.era-golden .spin-item-card-info { background: #14141a; }
.spin-item-card.era-modern .spin-item-card-info { background: #1a1608; }
.spin-item-card.era-millennium .spin-item-card-info { background: #121216; }
.spin-item-card.era-neomundo .spin-item-card-info { background: #0c1614; }
.spin-item-card-art img {
  position: absolute; top: 30%; left: 30%;
  width: 95%; height: auto;
  object-fit: contain; opacity: 0.75;
  filter: drop-shadow(-2px -2px 8px rgba(0,0,0,0.5));
  z-index: 0; border-radius: 4px; transform: rotate(3deg);
}
.spin-item-card-art .spin-item-shape {
  position: absolute; top: -5px; left: -4px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.08);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  pointer-events: none; z-index: 2;
}
/* Bigger shape on reveal modal cards */
.spin-reveal .spin-item-card-art .spin-item-shape {
  width: 65px; height: 65px; top: -8px; left: -6px;
}
/* Rarity-tinted shapes — item pick cards + item reveal */
.spin-item-card.tier-common .spin-item-shape { background: rgba(255,255,255,0.06); }
.spin-item-card.tier-uncommon .spin-item-shape { background: rgba(255,255,255,0.09); }
.spin-item-card.tier-rare .spin-item-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.20) 0%, rgba(192,192,192,0.12) 50%, rgba(192,192,192,0.06) 100%); }
.spin-item-card.tier-epic .spin-item-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,200,120,0.24) 0%, rgba(205,127,50,0.14) 50%, rgba(205,127,50,0.06) 100%); }
.spin-item-card.tier-legendary .spin-item-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,245,150,0.26) 0%, rgba(255,215,0,0.14) 50%, rgba(255,215,0,0.06) 100%); }
.spin-item-card.tier-icon .spin-item-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.30) 0%, rgba(210,210,220,0.16) 50%, rgba(210,210,220,0.06) 100%); }
.spin-item-card-info {
  padding: 0.4rem 0.5rem 0.5rem;
  background: #0d1520; border-top: 1px solid rgba(255,255,255,0.04);
  text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 0.05rem;
  min-height: 75px; justify-content: center;
}
.spin-item-card-info .item-name {
  text-transform: uppercase; letter-spacing: 1.5px;
  font-weight: 700; color: rgba(255,255,255,0.7);
  line-height: 1.15; word-break: break-word;
}
.spin-item-card-info .item-sub {
  color: rgba(255,255,255,0.3);
}
.spin-item-card-info .item-type-icon {
  margin-top: 0.08rem; line-height: 1;
}
.spin-item-card-info .item-type-icon .type-icon-img { height: 14px; }
/* Pick size — item cards match pack card proportions */
.spin-pick-inner .spin-item-card { width: 100%; }
.spin-pick-inner .spin-item-card-art { flex: 1; min-height: 150px; }
.spin-pick-inner .spin-item-card-info {
  min-height: 95px; padding: 0.4rem 0.5rem 0.5rem;
  gap: 0.03rem;
}
.spin-pick-inner .spin-item-card-info .item-name { font-size: 0.5rem; }
.spin-pick-inner .spin-item-card-info .item-sub { font-size: 0.36rem; }
.spin-pick-inner .spin-item-card-info .item-type-icon .type-icon-img { height: 12px; }
/* Reveal size */
.spin-reveal .spin-item-card {
  width: 220px;
  box-shadow: 0 12px 60px rgba(0,0,0,0.5), 0 0 30px rgba(233,196,106,0.1);
}
.spin-reveal .spin-item-card-art { height: 180px; }
.spin-reveal .spin-item-card-info .item-name { font-size: 0.62rem; }
.spin-reveal .spin-item-card-info .item-sub { font-size: 0.42rem; }
.spin-reveal .spin-item-card-info .item-type-icon .type-icon-img { height: 16px; }
.spin-reveal .spin-item-card-art .spin-item-shape { width: 65px; height: 65px; }
.spin-pick-actions {
  display: flex; gap: 0.8rem; margin-top: 1.5rem;
  justify-content: center; min-height: 42px;
  opacity: 0; transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22,0.68,0.35,1);
}
.spin-pick-actions.visible {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
/* Rarity hint — tinted bottom edge on cover */
.spin-pick-card[data-rarity="epic"] .spin-pick-cover-bottom {
  border-bottom: 2px solid rgba(205,127,50,0.25);
}
.spin-pick-card[data-rarity="legendary"] .spin-pick-cover-bottom {
  border-bottom: 2px solid rgba(233,196,106,0.25);
}
.spin-pick-card[data-rarity="icon"] .spin-pick-cover-bottom {
  border-bottom: 2px solid rgba(220,220,230,0.25);
}

/* Piece pair display — matches locker room .psd-piece-imgs */
/* Piece pair — scaled from reveal (140x110 at 220w → 95x75 at 150w) */
.spin-piece-pair {
  position: relative; width: 95px; height: 75px;
  display: flex; align-items: center; justify-content: center;
  cursor: var(--cur-pointer, pointer); margin-top: 20px;
}
.spin-piece-pair img {
  position: absolute; height: 60px; width: auto; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  left: 50%; top: 50%;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;
}
/* Default: white front-left, black behind-right */
.spin-piece-pair img:first-child {
  z-index: 2; opacity: 1;
  transform: translate(-65%, -55%);
}
.spin-piece-pair img:last-child {
  z-index: 1; opacity: 0.85;
  transform: translate(-35%, -45%);
}
/* Swapped: exact position exchange */
.spin-piece-pair.show-black img:first-child {
  z-index: 1; opacity: 0.85;
  transform: translate(-35%, -45%);
}
.spin-piece-pair.show-black img:last-child {
  z-index: 2; opacity: 1;
  transform: translate(-65%, -55%);
}
/* Larger pair for reveal card — pieces sit lower in art area */
.spin-reveal-card .spin-piece-pair {
  width: 140px; height: 110px;
  margin-top: 45px;
}
.spin-reveal-card .spin-piece-pair img {
  height: 94px;
  /* Use transform for positioning so transitions animate smoothly */
  left: 50%; top: 50%;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6));
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;
}
/* Default: white front-left, black behind-right */
.spin-reveal-card .spin-piece-pair img:first-child {
  z-index: 2; opacity: 1;
  transform: translate(-65%, -55%);
}
.spin-reveal-card .spin-piece-pair img:last-child {
  z-index: 1; opacity: 0.8;
  transform: translate(-35%, -45%);
}
/* Swapped: black front-left, white behind-right */
.spin-reveal-card .spin-piece-pair.show-black img:first-child {
  z-index: 1; opacity: 0.8;
  transform: translate(-35%, -45%);
}
.spin-reveal-card .spin-piece-pair.show-black img:last-child {
  z-index: 2; opacity: 1;
  transform: translate(-65%, -55%);
}

/* Rarity art backgrounds — fully solid */
/* Rarity art backgrounds removed — art background always matches era/neutral
   from the reel. Rarity is conveyed via border glow + card info section. */
/* Default (no rarity) */
.spin-card .spin-card-art { background: linear-gradient(150deg, #1a2430, #121a22); }
/* Era art backgrounds for spin cards */
.spin-card.era-pioneers .spin-card-art { background: linear-gradient(150deg, #4a3520, #352516); }
.spin-card.era-golden .spin-card-art { background: linear-gradient(150deg, #3a3a40, #282830); }
.spin-card.era-modern .spin-card-art { background: linear-gradient(150deg, #3a3210, #2a2408); }
.spin-card.era-millennium .spin-card-art { background: linear-gradient(150deg, #2a2a32, #1c1c24); }
.spin-card.era-neomundo .spin-card-art { background: linear-gradient(150deg, #162a28, #0e1e1c); }
/* Era info backgrounds for spin cards */
.spin-card.era-pioneers .spin-card-info { background: #1a1208; }
.spin-card.era-golden .spin-card-info { background: #14141a; }
.spin-card.era-modern .spin-card-info { background: #1a1608; }
.spin-card.era-millennium .spin-card-info { background: #121216; }
.spin-card.era-neomundo .spin-card-info { background: #0c1614; }
/* ===== RARITY GLOW BORDERS on stage 2 reel cards ===== */
.spin-card.stage2.rarity-common { border-color: rgba(158,158,158,0.1); }
.spin-card.stage2.rarity-uncommon { box-shadow: 0 0 5px rgba(76,175,80,0.08); border-color: rgba(76,175,80,0.14); }
.spin-card.stage2.rarity-rare { box-shadow: 0 0 6px rgba(192,192,192,0.1); border-color: rgba(192,192,192,0.16); }
.spin-card.stage2.rarity-epic { box-shadow: 0 0 8px rgba(205,127,50,0.12); border-color: rgba(205,127,50,0.2); }
.spin-card.stage2.rarity-legendary { box-shadow: 0 0 10px rgba(255,215,0,0.12); border-color: rgba(255,215,0,0.18); }
.spin-card.stage2.rarity-icon { box-shadow: 0 0 12px rgba(220,220,230,0.12); border-color: rgba(200,200,220,0.22); }
/* Rarity-tinted country shapes — stage 2 reel cards */
.spin-card.stage2.rarity-common .spin-card-shape { background: rgba(255,255,255,0.05); }
.spin-card.stage2.rarity-uncommon .spin-card-shape { background: rgba(255,255,255,0.08); }
.spin-card.stage2.rarity-rare .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.18) 0%, rgba(192,192,192,0.10) 50%, rgba(192,192,192,0.06) 100%); }
.spin-card.stage2.rarity-epic .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,200,120,0.22) 0%, rgba(205,127,50,0.12) 50%, rgba(205,127,50,0.06) 100%); }
.spin-card.stage2.rarity-legendary .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,245,150,0.24) 0%, rgba(255,215,0,0.12) 50%, rgba(255,215,0,0.06) 100%); }
.spin-card.stage2.rarity-icon .spin-card-shape { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.28) 0%, rgba(210,210,220,0.14) 50%, rgba(210,210,220,0.06) 100%); }

/* ===== WINNER SHINE SWEEP — triggered by .winner-landed class ===== */
.spin-card .spin-shine-sweep {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit;
  pointer-events: none; overflow: hidden;
}
.spin-card .spin-shine-sweep::after {
  content: ''; position: absolute; top: -50%; left: -100%;
  width: 50%; height: 200%;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.1) 55%, transparent 75%);
  transform: skewX(-12deg); opacity: 0;
}
.spin-card.winner-landed .spin-shine-sweep::after {
  animation: spinShineLTR 0.7s cubic-bezier(0.25,0.8,0.25,1) 0.15s forwards;
}
@keyframes spinShineLTR {
  0%   { left: -100%; opacity: 1; }
  100% { left: 150%;  opacity: 0; }
}

/* Reveal card art — slightly brighter for contrast with info */
.spin-reveal-card .spin-card-art { background: linear-gradient(150deg, #1a2636, #121c28) !important; }
/* Era art backgrounds on reveal card */
.spin-reveal-card.era-pioneers .spin-card-art { background: linear-gradient(150deg, #4a3520, #352516) !important; }
.spin-reveal-card.era-golden .spin-card-art { background: linear-gradient(150deg, #3a3a40, #282830) !important; }
.spin-reveal-card.era-modern .spin-card-art { background: linear-gradient(150deg, #3a3210, #2a2408) !important; }
.spin-reveal-card.era-millennium .spin-card-art { background: linear-gradient(150deg, #2a2a32, #1c1c24) !important; }
.spin-reveal-card.era-neomundo .spin-card-art { background: linear-gradient(150deg, #162a28, #0e1e1c) !important; }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 600px) {
  .spin-title { font-size: 0.65rem; letter-spacing: 1.5px; }
  .spin-counter { width: 220px; height: 2rem; margin-left: auto; margin-right: auto; }
  .spin-counter-pip { width: 44px; font-size: 0.5rem; }
  /* Cinema overlay must sit above the shop focus panel (z-index 10100) */
  .spin-cinema-overlay { z-index: 10200; }
  .pack-spinner-overlay { z-index: 10201; }
  .spinner-container { width: 92%; height: 210px; }
  .spinner-holder { width: 130px; height: 185px; }
  .spin-card { width: 126px; height: 180px; }
  .spin-card .spin-card-art { height: 115px; }
  .spin-card .spin-card-info { height: 65px !important; padding: 0.1rem 0.3rem !important; gap: 0 !important; }
  .spin-card .spin-card-type { margin-top: 0; margin-bottom: 0.08rem; font-size: 0.4rem; }
  .spin-card-name { font-size: 0.4rem; line-height: 1.1; }
  .spin-card-year { font-size: 0.55rem; line-height: 1.2; }
  .spin-card .spin-piece-pair img { height: 42px; }
  .spin-card .country-badge-wrapper { transform: scale(0.7); }
  .spin-reveal { margin: 1rem 0; }
  .spin-reveal-card { width: 170px; }
  .spin-reveal-card .spin-card-art { height: 150px; }
  .spin-reveal-card .spin-card-info { padding: 0.35rem 0.5rem 0.45rem; }
  .spin-reveal-card .spin-card-year { font-size: 0.8rem; }
  .spin-reveal-card .spin-card-name { font-size: 0.75rem; }
  .spin-reveal-card .spin-piece-pair { width: 90px; }
  .spin-reveal-card .spin-piece-pair img { height: 80px; }
  .spin-reveal .spin-item-card { width: 180px; }
  .spin-reveal .spin-item-card-art { height: 150px; }
  .spin-reveal-btn { padding: 0.5rem 2rem; font-size: 0.7rem; min-height: 44px; }
  /* Allow spinner overlay to scroll vertically when content overflows */
  .pack-spinner-overlay { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 1rem 0; }
  /* Center holder within clip area to match track centering */
  .spinner-holder { top: 20px; bottom: 0; margin-top: auto; margin-bottom: auto; }
  .spin-pick-grid {
    gap: 0.8rem; padding: 0.5rem 0.5rem 0.5rem;
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    width: 100%; max-width: 100vw;
    scrollbar-width: none;
    transform-origin: top center;
  }
  .spin-pick-grid::-webkit-scrollbar { display: none; }
  .spin-pick-grid::after { display: none; }
  /* Auto margins center cards when they fit, collapse when they overflow */
  .spin-pick-card:first-child { margin-left: auto; }
  .spin-pick-card:last-child  { margin-right: auto; }
  /* Keep card dimensions, allow horizontal scroll */
  .spin-pick-card { width: 140px; min-width: 140px; height: 220px; flex-shrink: 0; }
  .spin-pick-inner .spin-reveal-card { width: 100%; height: 100%; }
  .spin-pick-inner .spin-item-card { width: 100%; height: 100%; }
  .spin-pick-actions { gap: 0.6rem; }
  .spin-summary-item { width: 80px; padding: 0.4rem; }
}
@media (max-width: 380px) {
  .spin-counter { width: 180px; }
  .spin-counter-pip { width: 36px; font-size: 0.42rem; }
  .spinner-container { width: 95%; height: 185px; }
  .spinner-holder { width: 110px; height: 160px; }
  .spin-card { width: 106px; height: 155px; }
  .spin-card .spin-card-art { height: 95px; }
  .spin-card .spin-card-info { height: 60px !important; padding: 0.12rem 0.25rem !important; gap: 0 !important; }
  .spin-card-name { font-size: 0.38rem; }
  .spin-card .spin-piece-pair img { height: 34px; }
  .spin-reveal-card { width: 150px; }
  .spin-reveal-card .spin-card-art { height: 130px; }
  .spin-reveal .spin-item-card { width: 160px; }
  .spin-reveal .spin-item-card-art { height: 130px; }
  .spin-pick-grid { gap: 0.6rem; }
  .spin-pick-card { width: 120px; min-width: 120px; height: 190px; }
  .spin-reveal-btn { padding: 0.45rem 1.5rem; min-height: 44px; }
  .spin-summary-item { width: 70px; padding: 0.3rem; }
}

.spin-item-card-art.spin-piece-pair