/* cosmo-cards.css — Card base styles + rarity variants */

/* ============================================================
   CARD BASE
   ============================================================ */

.cosmo-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-top: 0.5;
  --pointer-from-left: 0.5;
  --card-opacity: 0;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --background-x: 50%;
  --background-y: 50%;

  position: relative;
  width: 280px;
  max-width: 90vw;
  aspect-ratio: 5 / 7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.cosmo-card__rotator {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(600px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
  transition: transform 0.6s ease-out;
  will-change: transform;
}

.cosmo-card.active .cosmo-card__rotator {
  transition: transform 0.05s ease-out;
}

/* ============================================================
   CARD FRONT — A) Normal layout + B) Fullbleed (secret rare)
   ============================================================ */

/* -- Shared front base -- */
.cosmo-card__front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: #5C4A3A; /* overridden inline */
}

/* Rarity outer glow */
.cosmo-card[data-rarity="common"] .cosmo-card__front {
  box-shadow: 0 0 0 2px var(--card-color-light, #C0C0C0), 0 8px 32px rgba(0,0,0,0.3);
}
.cosmo-card[data-rarity="rare"] .cosmo-card__front {
  box-shadow: 0 0 0 2px #FFD700, 0 8px 32px rgba(255,215,0,0.2);
}
.cosmo-card[data-rarity="ultra_rare"] .cosmo-card__front {
  box-shadow: 0 8px 32px rgba(255,107,157,0.3);
}
.cosmo-card[data-rarity="ultra_rare"]::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 19px;
  background: linear-gradient(45deg, #ff6b6b, #ffd166, #6bc5d2, #c8b5e8, #ff6b9d, #ffa94d);
  background-size: 300% 300%;
  animation: rainbowBorder 3s ease infinite;
  z-index: -1;
}
.cosmo-card[data-rarity="secret_rare"] .cosmo-card__front {
  padding: 8px;
  box-shadow: 0 8px 40px rgba(255,107,157,0.4), 0 0 60px rgba(200,181,232,0.2);
}
.cosmo-card[data-rarity="secret_rare"]::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 21px;
  background:
    radial-gradient(ellipse at 30% 25%,
      hsla(293, 64%, 33%, 0.55),
      transparent 60%),
    radial-gradient(ellipse at 70% 75%,
      hsla(290, 70%, 7%, 0.8),
      transparent 55%),
    linear-gradient(135deg,
      hsl(290, 70%, 7%) 0%,
      hsl(291, 71%, 13%) 22%,
      hsl(292, 70%, 19%) 50%,
      hsl(291, 71%, 13%) 78%,
      hsl(290, 70%, 7%) 100%);
  background-blend-mode: overlay, multiply, normal;
  z-index: -1;
  filter: saturate(1.1) contrast(1.05);
}

.cosmo-card[data-rarity="secret_rare"]::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 25px;
  background:
    radial-gradient(ellipse at 35% 30%, hsla(293, 64%, 33%, 0.45), transparent 55%),
    radial-gradient(ellipse at 65% 70%, hsla(292, 70%, 19%, 0.55), transparent 55%),
    radial-gradient(ellipse at 50% 50%, hsla(290, 70%, 7%, 0.7), transparent 70%);
  z-index: -2;
  filter: blur(22px);
  opacity: 0.85;
}

@keyframes purpleSwirl {
  0%   { background-position: 0% 50%, 0% 0%; transform: rotate(0deg); }
  100% { background-position: 200% 50%, 0% 0%; transform: rotate(360deg); }
}

@keyframes purpleAura {
  0%, 100% {
    background-position: 30% 30%, 70% 70%, 50% 50%;
    opacity: 0.8;
  }
  50% {
    background-position: 70% 70%, 30% 30%, 50% 50%;
    opacity: 1;
  }
}

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

/* ---- A) NORMAL LAYOUT (common / rare / ultra_rare) ---- */

/* Header bar */
.cosmo-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.7rem;
  color: #fff;
  position: relative;
  z-index: 5;
  border-radius: 10px 10px 0 0;
}

.cosmo-card__name {
  flex: 1;
  font-family: 'Fredoka One', cursive;
  font-size: 0.85rem;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cosmo-card__number {
  font-family: 'Nunito', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}

/* Photo area — ~60% of card height, inset with small border-radius */
.cosmo-card__image-area {
  position: relative;
  flex: 1 1 60%;
  overflow: hidden;
  min-height: 0;
  border-radius: 4px;
  margin: 0 0 0 0;
}

.cosmo-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* Info section */
.cosmo-card__info {
  padding: 6px 10px 2px;
  position: relative;
  z-index: 5;
  border-radius: 0 0 10px 10px;
}

.cosmo-card__zodiac {
  font-family: 'Nunito', sans-serif;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.65);
  text-transform: capitalize;
  margin-bottom: 2px;
}

.cosmo-card__quote {
  font-family: 'Nunito', sans-serif;
  font-style: italic;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
  min-height: 2em;
}

/* Brand footer */
.cosmo-card__footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 5;
}

.cosmo-card__info .cosmo-card__footer {
  padding: 4px 0 0;
  margin-top: 2px;
}

.cosmo-card__footer span {
  font-family: 'Nunito', sans-serif;
  font-size: 0.5rem;
  color: rgba(255,255,255,0.35);
}

/* ---- B) FULLBLEED LAYOUT (secret_rare) ---- */

.cosmo-card__front--fullbleed {
  padding: 8px;
}

.cosmo-card__front--fullbleed .cosmo-card__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.cosmo-card__image-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.cosmo-card__front--fullbleed .cosmo-card__holo-film {
  z-index: 3;
}

/* Info overlay at bottom */
.cosmo-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 70%, transparent 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 30px 12px 10px;
  border-radius: 0 0 10px 10px;
}

.cosmo-card__overlay .cosmo-card__header {
  padding: 0 0 4px;
  border-radius: 0;
  background: none !important;
}

.cosmo-card__overlay .cosmo-card__name {
  font-size: 0.9rem;
}

.cosmo-card__overlay .cosmo-card__zodiac {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2px;
}

.cosmo-card__overlay .cosmo-card__quote {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.75);
  min-height: auto;
}

.cosmo-card__overlay .cosmo-card__footer {
  padding: 3px 0 0;
  border-top-color: rgba(255,255,255,0.1);
}

/* ---- RARITY BADGE ---- */

.rarity-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  line-height: 1.3;
}

.rarity-badge--common {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
  color: white;
}

.rarity-badge--rare {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: white;
}

.rarity-badge--ultra_rare {
  background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6);
  background-size: 300% 300%;
  animation: rainbow-shift 3s ease infinite;
  color: white;
}

.rarity-badge--secret_rare {
  background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b);
  background-size: 400% 400%;
  animation: rainbow-shift 2s ease infinite;
  color: white;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

@keyframes rainbow-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   CARD BACK
   ============================================================ */

.cosmo-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.cosmo-card__back-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   CARD FLIP
   ============================================================ */

.cosmo-card.flipped .cosmo-card__rotator {
  transform: perspective(600px) rotateY(180deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cosmo-card.flipping .cosmo-card__rotator {
  animation: cardFlip 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cardFlip {
  0% { transform: perspective(600px) rotateY(0deg) scale(1); }
  40% { transform: perspective(600px) rotateY(90deg) scale(1.05); }
  100% { transform: perspective(600px) rotateY(180deg) scale(1); }
}

/* Reverse flip: from back (180) to front (360/0) */
.cosmo-card.flip-reveal .cosmo-card__rotator {
  animation: cardFlipReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cardFlipReveal {
  0% { transform: perspective(600px) rotateY(180deg) scale(1); }
  40% { transform: perspective(600px) rotateY(270deg) scale(1.08); }
  100% { transform: perspective(600px) rotateY(360deg) scale(1); }
}

/* ============================================================
   RARITY FLASH EFFECTS
   ============================================================ */

.rarity-flash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
}

.rarity-flash--common {
  background: radial-gradient(circle, rgba(192,192,192,0.3) 0%, transparent 70%);
  animation: flashPulse 0.6s ease-out forwards;
}

.rarity-flash--rare {
  background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
  animation: flashPulse 0.8s ease-out forwards;
}

.rarity-flash--ultra_rare {
  background: linear-gradient(45deg,
    rgba(255,107,107,0.3), rgba(255,209,102,0.3),
    rgba(107,197,210,0.3), rgba(200,181,232,0.3));
  background-size: 400% 400%;
  animation: flashRainbow 1s ease-out forwards;
}

.rarity-flash--secret_rare {
  background: linear-gradient(45deg,
    rgba(255,107,107,0.5), rgba(255,209,102,0.5),
    rgba(107,197,210,0.5), rgba(200,181,232,0.5),
    rgba(255,107,157,0.5));
  background-size: 600% 600%;
  animation: flashPrismatic 1.2s ease-out forwards;
}

@keyframes flashPulse {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes flashRainbow {
  0% { opacity: 0; background-position: 0% 50%; }
  30% { opacity: 1; }
  100% { opacity: 0; background-position: 100% 50%; }
}

@keyframes flashPrismatic {
  0% { opacity: 0; background-position: 0% 50%; }
  20% { opacity: 1; }
  60% { opacity: 0.8; background-position: 100% 50%; }
  100% { opacity: 0; }
}

/* ============================================================
   PULL OVERLAY
   ============================================================ */

.cosmo-pull-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cosmo-pull-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.cosmo-pull-overlay .cosmo-card {
  margin-bottom: 24px;
}

.cosmo-pull-card-info {
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cosmo-pull-card-info.visible {
  opacity: 1;
  transform: translateY(0);
}

.cosmo-pull-card-info__name {
  font-family: 'Fredoka One', cursive;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.cosmo-pull-card-info__meta {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  text-transform: capitalize;
  margin-bottom: 16px;
}

.cosmo-pull-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

.cosmo-pull-actions.visible {
  opacity: 1;
  transform: translateY(0);
}

.cosmo-pull-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 0.85rem;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cosmo-pull-btn:active {
  transform: scale(0.95);
}

.cosmo-pull-btn--primary {
  background: var(--color-primary, #94ebff);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,107,157,0.3);
}

.cosmo-pull-btn--secondary {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}

.cosmo-pull-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
}

/* ============================================================
   HOMEPAGE COSMO CARD MENU ITEM
   ============================================================ */

.service-card-cosmo {
  grid-column: 1 / -1;
  /* Dreamy holographic pastel gradient */
  background: linear-gradient(135deg, #c8b6ff, #f0a6ca, #a0d2ff, #d0b4ff, #f7c6e0, #b8e0ff);
  background-size: 400% 400%;
  animation: cosmoHoloBg 6s ease infinite;
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 160px;
  border: 1px solid var(--cosmo-brown, #c19c8a);
  box-shadow:
    inset 0 0 0 1px var(--cosmo-gold, #fff7ae),
    inset 0 0 0 2px var(--cosmo-skyblue, #94ebff),
    0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@keyframes cosmoHoloBg {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}

.service-card-cosmo:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px var(--cosmo-gold, #fff7ae),
    inset 0 0 0 2px var(--cosmo-skyblue, #94ebff),
    0 6px 28px rgba(0,0,0,0.12);
}

.service-card-cosmo:active {
  transform: scale(0.98);
}

/* Rainbow light sweep overlay */
.service-card-cosmo__shimmer {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      110deg,
      transparent 15%,
      rgba(255,255,255,0.35) 25%,
      rgba(255,200,240,0.2) 30%,
      rgba(160,210,255,0.25) 35%,
      rgba(200,182,255,0.2) 40%,
      rgba(255,255,255,0.3) 45%,
      transparent 55%
    );
  background-size: 250% 100%;
  animation: cosmoShineSweep 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cosmoShineSweep {
  0% { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}

.service-card-cosmo__preview {
  width: 120px;
  height: 100%;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.service-card-cosmo__preview-card {
  width: 80px;
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

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

.service-card-cosmo__preview-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,215,0,0.15) 45%,
    rgba(200,181,232,0.1) 55%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: cardShimmer 3s ease-in-out infinite;
}

.service-card-cosmo__content {
  flex: 1;
  padding: 20px 20px 20px 0;
  position: relative;
  z-index: 1;
}

.service-card-cosmo__title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  color: var(--color-text, #3D2A1E);
  margin-bottom: 4px;
}

.service-card-cosmo__desc {
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  color: rgba(61,42,30,0.6);
  margin-bottom: 12px;
  line-height: 1.3;
}

.service-card-cosmo__footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-card-cosmo__price {
  font-family: 'Fredoka One', cursive;
  font-size: 0.6rem;
  color: var(--color-text-muted, #8B7B6B);
  white-space: nowrap;
}

.service-card-cosmo__cta {
  font-family: 'Fredoka One', cursive;
  font-size: 0.8rem;
  background: #FF69B4;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  box-shadow: 0 3px 12px rgba(255,105,180,0.4);
}

.service-card-cosmo__cta:hover {
  background: #e8559e;
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(255,105,180,0.5);
}

/* ============================================================
   LIBRARY GRID
   ============================================================ */

.cosmo-library-header {
  text-align: center;
  padding: 20px 16px 16px;
}

.cosmo-library-header h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  color: var(--color-text, #2D2D2D);
  margin-bottom: 4px;
}

.cosmo-library-progress {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  color: var(--color-text-muted, #888);
  margin-bottom: 12px;
}

.cosmo-library-bar {
  width: 100%;
  max-width: 300px;
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  margin: 0 auto;
  overflow: hidden;
}

.cosmo-library-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary, #94ebff), var(--color-purple, #C8B5E8));
  border-radius: 4px;
  transition: width 0.6s ease;
}

.cosmo-library-filters {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cosmo-library-filters::-webkit-scrollbar { display: none; }

/* Rarity sub-filter pills (inside Cosmo Cards tab only) */
.cosmo-rarity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
}

.cosmo-rarity-pill {
  font-family: 'Nunito', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  color: var(--color-text-muted, #8B7B6B);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cosmo-rarity-pill.active {
  background: var(--color-primary, #94ebff);
  color: var(--color-text, #3D2A1E);
  border-color: var(--color-primary, #94ebff);
}

.cosmo-filter-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cosmo-filter-btn.active {
  background: var(--color-primary, #94ebff);
  color: #fff;
  border-color: var(--color-primary, #94ebff);
}

.cosmo-library-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px;
}

@media (max-width: 768px) {
  .cosmo-library-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
  }
}

/* Library card thumbnail — uniform sizing */
.cosmo-lib-card {
  aspect-ratio: 5 / 7;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.cosmo-lib-card:active {
  transform: scale(0.95);
}

/* Collected card */
.cosmo-lib-card--collected {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  position: relative;
}

.cosmo-lib-card--collected img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover overlay with card name */
.cosmo-lib-card__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: 'Fredoka One', cursive;
  font-size: 0.8rem;
  line-height: 1.25;
  text-align: center;
  padding: 6px;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.cosmo-lib-card--collected:hover .cosmo-lib-card__name,
.cosmo-lib-card--collected.tapped .cosmo-lib-card__name {
  opacity: 1;
}

/* Rarity glow on collected */
.cosmo-lib-card--collected[data-rarity="common"] { box-shadow: 0 0 0 2px #C0C0C0, 0 2px 8px rgba(0,0,0,0.1); }
.cosmo-lib-card--collected[data-rarity="rare"] { box-shadow: 0 0 0 2px #FFD700, 0 2px 8px rgba(255,215,0,0.2); }
.cosmo-lib-card--collected[data-rarity="ultra_rare"] { box-shadow: 0 0 0 2px #FF6B9D, 0 2px 12px rgba(255,107,157,0.25); }
.cosmo-lib-card--collected[data-rarity="secret_rare"] { box-shadow: 0 0 0 2px #C8B5E8, 0 2px 16px rgba(200,181,232,0.35); }

/* Uncollected card — card-back image with overlay */
.cosmo-lib-card--locked {
  position: relative;
  overflow: hidden;
}

.cosmo-lib-card--locked__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cosmo-lib-card--locked__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0,0,0,0.35);
  border-radius: inherit;
}

.cosmo-lib-card--locked__qmark {
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  color: rgba(255,255,255,0.5);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.cosmo-lib-card--locked__rarity {
  font-family: 'Nunito', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}

.cosmo-lib-card--locked[data-rarity="common"] .cosmo-lib-card--locked__rarity { color: #ccc; background: rgba(255,255,255,0.1); }
.cosmo-lib-card--locked[data-rarity="rare"] .cosmo-lib-card--locked__rarity { color: #FFD700; background: rgba(255,215,0,0.15); }
.cosmo-lib-card--locked[data-rarity="ultra_rare"] .cosmo-lib-card--locked__rarity { color: #FF6B9D; background: rgba(255,107,157,0.15); }
.cosmo-lib-card--locked[data-rarity="secret_rare"] .cosmo-lib-card--locked__rarity { color: #C8B5E8; background: rgba(200,181,232,0.2); }

/* Detail modal */
.cosmo-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cosmo-detail-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.cosmo-detail-info {
  text-align: center;
  color: #fff;
  margin-top: 16px;
}

.cosmo-detail-info__name {
  font-family: 'Fredoka One', cursive;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.cosmo-detail-info__meta {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  text-transform: capitalize;
  margin-bottom: 6px;
}

.cosmo-detail-info__quote {
  font-family: 'Nunito', sans-serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  max-width: 300px;
  margin: 0 auto 6px;
}

.cosmo-detail-info__date {
  font-family: 'Nunito', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
}

.cosmo-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.cosmo-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   INSUFFICIENT CRUMBS
   ============================================================ */

.cosmo-no-crumbs {
  text-align: center;
  padding: 20px;
}

.cosmo-no-crumbs p {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}

/* ============================================================
   SPARKLE PARTICLES (Secret Rare)
   ============================================================ */

.cosmo-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  animation: sparkle 1.5s ease-in-out infinite;
}

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

/* ============================================================
   TOAST
   ============================================================ */

.cosmo-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  padding: 10px 20px;
  border-radius: 50px;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
}

.cosmo-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   iOS FLIP + SCROLL FIX (Session 4e, append-only)
   ============================================================ */

.cosmo-pull-overlay.active,
.cosmo-detail-overlay.active {
  touch-action: none;
  overscroll-behavior: contain;
}

.cosmo-card.flipped .cosmo-card__front {
  opacity: 0;
  pointer-events: none;
}

.cosmo-card.flip-reveal .cosmo-card__front {
  animation: frontReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

.cosmo-card.flip-reveal .cosmo-card__back {
  animation: backHide 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes frontReveal {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes backHide {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cosmo-card.revealed .cosmo-card__front {
  opacity: 1;
  pointer-events: auto;
}

.cosmo-card.revealed .cosmo-card__back {
  display: none;
}

/* ============================================================
   RARITY-SPECIFIC PULL OVERLAY BACKGROUNDS (Session 4e Round 2)
   ============================================================ */

/* Secret Rare — animated purple cosmic swirl */
.cosmo-pull-overlay[data-rarity="secret_rare"] {
  background:
    radial-gradient(ellipse at 50% 50%,
      hsla(280, 80%, 20%, 0.88) 0%,
      hsla(260, 70%, 10%, 0.95) 50%,
      rgba(0, 0, 0, 0.97) 100%);
  overflow: hidden;
}

.cosmo-pull-overlay[data-rarity="secret_rare"]::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg at 50% 50%,
    hsla(280, 90%, 60%, 0.35),
    hsla(320, 80%, 55%, 0.25),
    hsla(45, 100%, 65%, 0.30),
    hsla(280, 85%, 65%, 0.25),
    hsla(260, 90%, 55%, 0.35),
    hsla(280, 90%, 60%, 0.35));
  animation: cosmicSwirl 20s linear infinite;
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
}

.cosmo-pull-overlay[data-rarity="secret_rare"] > * {
  position: relative;
  z-index: 1;
}

@keyframes cosmicSwirl {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Ultra Rare — subtle gradient (less intense than secret) */
.cosmo-pull-overlay[data-rarity="ultra_rare"] {
  background:
    radial-gradient(ellipse at 50% 50%,
      hsla(200, 40%, 15%, 0.88) 0%,
      hsla(220, 50%, 8%, 0.95) 60%,
      rgba(0, 0, 0, 0.97) 100%);
}

/* ============================================================
   COSMO HOME PROGRESS — collection stats on home page
   ============================================================ */
.cosmo-home-progress {
  margin: 12px 0;
}
.cosmo-home-progress__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.cosmo-home-progress__count {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text);
}
.cosmo-home-progress__percent {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.cosmo-home-progress__bar {
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cosmo-home-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-purple), var(--color-card-2));
  border-radius: 999px;
  transition: width 400ms ease;
}
.cosmo-home-progress__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.cosmo-rarity-chip {
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  color: var(--color-text);
  font-weight: 500;
}
.cosmo-rarity-chip--common  { background: rgba(200, 220, 240, 0.7); }
.cosmo-rarity-chip--rare    { background: rgba(255, 200, 210, 0.7); }
.cosmo-rarity-chip--ultra   { background: rgba(210, 195, 235, 0.7); }
.cosmo-rarity-chip--secret  { background: rgba(255, 232, 160, 0.85); }