/* Card-pick - shared structural styles for deck-style divination apps.
   Theming (card-back gradient, accent colour) lives in per-app CSS overrides. */

.cp-page { padding-top: 2rem; }
.cp-header { max-width: 720px; margin: 0 auto 2rem; }
.cp-intro { color: var(--text-dim); max-width: 60ch; margin: 0 auto; }

.cp-app {
  background: linear-gradient(180deg, rgba(11,4,55,0.55) 0%, rgba(20,8,60,0.35) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.cp-app::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 350px at 50% -10%, rgba(255,61,166,0.15), transparent 65%),
    radial-gradient(500px 350px at 90% 110%, rgba(0,224,255,0.15), transparent 60%);
  pointer-events: none;
}
.cp-app > * { position: relative; }

.cp-instruction {
  text-align: center; color: var(--text-dim);
  font-size: 1.05rem; margin: 0 0 1.6rem;
}

.cp-deck {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.4rem, 1vw, .9rem);
  perspective: 1200px;
}
.cp-card {
  --w: clamp(80px, 11vw, 130px);
  width: var(--w);
  aspect-ratio: 253 / 342;
  border: 0; padding: 0; background: transparent;
  cursor: pointer; position: relative;
  border-radius: 10px;
  transition: transform .25s ease, filter .2s;
  animation: cp-deal .55s ease both;
  animation-delay: calc(var(--i, 1) * 70ms);
}
.cp-card:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 4px; }
.cp-card:hover { transform: translateY(-10px) rotate(-1deg); }
.cp-card:active { transform: translateY(-6px); }

.cp-card-back {
  position: absolute; inset: 0; border-radius: 10px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.18), transparent 50%),
    linear-gradient(135deg, #1c0f6e 0%, #5b1d99 50%, #ff3da6 100%);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,0.06),
    inset 0 0 0 7px rgba(255,255,255,0.1),
    0 14px 28px rgba(0,0,0,0.45);
  overflow: hidden;
}
.cp-card-back::before {
  content: ""; position: absolute; inset: 8px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,216,74,0.5) 0 4px, transparent 4px),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.2) 0 2px, transparent 2px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 6px, transparent 6px 12px);
}
.cp-card-back::after {
  content: "✶"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--accent-4); font-size: calc(var(--w) * 0.4); opacity: .8;
  text-shadow: 0 0 12px rgba(255,216,74,0.6);
}

.cp-app[data-state="loading"] .cp-card,
.cp-app[data-state="revealed"] .cp-card { pointer-events: none; }

.cp-app[data-state="loading"] .cp-deck { animation: cp-shuffle .45s ease-in-out 2; }
@keyframes cp-shuffle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-1deg); }
  75% { transform: translateX(6px) rotate(1deg); }
}

.cp-card.is-picked {
  transform: translateY(-14px) scale(1.04);
  filter: drop-shadow(0 18px 30px rgba(255,61,166,0.4));
  z-index: 2;
}
.cp-card.is-faded { opacity: 0.45; filter: grayscale(0.4) brightness(0.85); }

@keyframes cp-deal {
  from { transform: translateY(40px) rotate(-6deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0); opacity: 1; }
}

/* Force `hidden` attribute to win over display: grid/flex (HTML5 hidden
   maps to display:none, but explicit display rules below would otherwise override it). */
.cp-result[hidden],
.cp-error[hidden],
.cp-stage[hidden] { display: none !important; }

.cp-result {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  margin-top: 1.5rem;
  animation: cp-fade .4s ease;
}
@keyframes cp-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cp-result-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  background: #0c0420;
  animation: cp-flipin .8s cubic-bezier(.2,.7,.3,1.2);
  transform-style: preserve-3d;
}
@keyframes cp-flipin {
  0%   { transform: rotateY(180deg) scale(.9); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
.cp-result-card img { width: 100%; height: auto; display: block; }

.cp-result-body h2 {
  background: var(--grad-1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .4rem;
}
.cp-result-body h3 {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--accent-3);
  margin-top: 1.3em; margin-bottom: .4em;
  font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
}
.cp-result-symbolism {
  color: var(--text-dim);
  font-style: italic;
  border-left: 3px solid var(--accent-1);
  padding: .2rem .9rem;
  margin: .4rem 0 1rem;
}
.cp-result-symbolism:empty,
.cp-result-interpretation:empty { display: none; }
.cp-result-interpretation { color: var(--text); line-height: 1.7; }

.cp-error {
  margin-top: 1rem; padding: .9rem 1rem;
  background: rgba(255,85,102,0.12); border: 1px solid rgba(255,85,102,0.4);
  border-radius: 10px; color: #ffd0d4; text-align: center;
}

@media (max-width: 640px) {
  .cp-result {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
  }
  .cp-result-card { max-width: 70vw; }
}
@media (max-width: 480px) {
  .cp-deck { gap: .25rem; }
}

/* Optional vote badge for yes/no apps (only present in some templates) */
.cp-result-vote {
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 1.4rem;
  margin: 0 0 1rem;
  color: #fff;
  background: #888;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}
.cp-result-vote[data-vote="si"]     { background: linear-gradient(135deg, #2a9d3e, #5fcf6f); color: #052a0a; }
.cp-result-vote[data-vote="no"]     { background: linear-gradient(135deg, #c52121, #ef5757); color: #2a0606; }
.cp-result-vote[data-vote="dudosa"] { background: linear-gradient(135deg, #d68a0c, #ffc15c); color: #2a1700; }
.cp-result-vote[hidden] { display: none !important; }

/* Per-app overrides via [data-app="..."] on .cp-app */

/* Tarot Sí o No (1 carta) — Rider-Waite deck, classic indigo theme with golden glow */
.cp-app[data-app="tarot-siono-1"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,220,140,0.2), transparent 50%),
    repeating-linear-gradient(45deg, rgba(255,220,140,0.04) 0 5px, transparent 5px 11px),
    linear-gradient(160deg, #1a1c5a 0%, #3a3f9a 50%, #0a0c2a 100%);
  border-color: rgba(255,220,140,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.32),
    inset 0 0 0 7px rgba(255,220,140,0.4),
    0 14px 28px rgba(0,0,0,0.55);
}
.cp-app[data-app="tarot-siono-1"] .cp-card-back::after {
  content: "?";
  color: #ffd66e;
  font-size: 2rem;
  font-weight: 800;
  text-shadow: 0 0 14px rgba(255,220,140,0.75), 0 2px 0 rgba(0,0,0,0.45);
}
.cp-app[data-app="tarot-siono-1"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,220,140,0.5));
}

/* Oráculo Azul — deep ocean blue with luminous star */
.cp-app[data-app="oraculo-azul"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(180,220,255,0.25), transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(120,180,255,0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(120,180,255,0.18) 0 2px, transparent 3px),
    linear-gradient(160deg, #0a1f5a 0%, #1845a8 50%, #06154a 100%);
  border-color: rgba(180,220,255,0.5);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.25),
    inset 0 0 0 7px rgba(180,220,255,0.3),
    0 14px 28px rgba(0,0,0,0.5);
}
.cp-app[data-app="oraculo-azul"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(180,220,255,0.55) 0 5px, transparent 6px),
    repeating-linear-gradient(45deg, rgba(180,220,255,0.05) 0 6px, transparent 6px 12px);
  border-color: rgba(180,220,255,0.4);
}
.cp-app[data-app="oraculo-azul"] .cp-card-back::after {
  content: "✦";
  color: #cce7ff;
  text-shadow: 0 0 16px rgba(180,220,255,0.7), 0 2px 0 rgba(0,0,0,0.4);
}
.cp-app[data-app="oraculo-azul"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(120,180,255,0.5));
}

.cp-app[data-app="tarot-animales"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.15), transparent 50%),
    linear-gradient(135deg, #1f3a1a 0%, #3a7d2a 45%, #ffb347 100%);
}
.cp-app[data-app="tarot-animales"] .cp-card-back::after {
  content: "🐾";
  color: #fff5d6;
  text-shadow: 0 0 14px rgba(58,125,42,0.65);
}
.cp-app[data-app="tarot-animales"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(58,125,42,0.45));
}

/* Tarot Poker — casino green felt with classic playing-card diamond pattern */
.cp-app[data-app="tarot-poker"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.18), transparent 50%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.12) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.10) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #0a3a1e 0%, #1a5f33 50%, #062c14 100%);
  border-color: rgba(220,30,30,0.5);
  box-shadow:
    inset 0 0 0 5px rgba(0,0,0,0.3),
    inset 0 0 0 6px rgba(220,30,30,0.4),
    inset 0 0 0 7px rgba(255,255,255,0.1),
    0 14px 28px rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-poker"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,30,30,0.4) 0 5px, transparent 6px),
    repeating-linear-gradient(30deg, rgba(255,255,255,0.04) 0 4px, transparent 4px 9px);
  border-color: rgba(220,30,30,0.3);
}
.cp-app[data-app="tarot-poker"] .cp-card-back::after {
  content: "♠♥♦♣";
  color: #f5f5dc;
  font-size: calc(var(--w) * 0.22);
  letter-spacing: -0.05em;
  text-shadow: 0 0 8px rgba(0,0,0,0.7), 0 2px 0 rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-poker"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(220,30,30,0.35));
}

/* Tarot Español — red velvet with gold filigree (baraja española classic) */
.cp-app[data-app="tarot-espanol"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,215,100,0.22), transparent 50%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.10) 0 3px, transparent 3px 8px),
    linear-gradient(160deg, #6b0f1a 0%, #a01829 50%, #4a0a12 100%);
  border-color: rgba(255,215,100,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.18),
    inset 0 0 0 7px rgba(255,215,100,0.3),
    0 14px 28px rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-espanol"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,215,100,0.55) 0 5px, transparent 6px),
    radial-gradient(circle at 25% 25%, rgba(255,215,100,0.3) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 25%, rgba(255,215,100,0.3) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 75%, rgba(255,215,100,0.3) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,215,100,0.3) 0 3px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(255,215,100,0.06) 0 6px, transparent 6px 12px);
  border-color: rgba(255,215,100,0.4);
}
.cp-app[data-app="tarot-espanol"] .cp-card-back::after {
  content: "♠";
  color: #ffd966;
  text-shadow: 0 0 14px rgba(255,217,102,0.6), 0 2px 0 rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-espanol"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,217,102,0.4));
}

/* Tarot Rúnico — dark wood with carved bone-white rune */
.cp-app[data-app="tarot-runico"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,240,200,0.18), transparent 50%),
    repeating-linear-gradient(82deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #3a2310 0%, #5b3a1f 50%, #2c1808 100%);
}
.cp-app[data-app="tarot-runico"] .cp-card-back::before {
  background:
    repeating-linear-gradient(95deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 50%, rgba(255,240,200,0.15) 0 4px, transparent 5px);
}
.cp-app[data-app="tarot-runico"] .cp-card-back::after {
  content: "ᛟ";
  color: #e8d5a8;
  text-shadow: 0 0 14px rgba(232,213,168,0.5), 0 2px 0 rgba(0,0,0,0.4);
}
.cp-app[data-app="tarot-runico"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(232,213,168,0.35));
}

/* Tarot Español Sí o No — golden parchment with red wax-seal accents */
.cp-app[data-app="tarot-espanol-siono"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.18), transparent 50%),
    repeating-linear-gradient(45deg, rgba(120,60,0,0.12) 0 4px, transparent 4px 10px),
    linear-gradient(160deg, #d9a648 0%, #c98a2c 50%, #8a5a18 100%);
  border-color: rgba(180,30,30,0.55);
  box-shadow:
    inset 0 0 0 5px rgba(120,60,0,0.3),
    inset 0 0 0 6px rgba(180,30,30,0.45),
    inset 0 0 0 7px rgba(255,235,180,0.2),
    0 14px 28px rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-espanol-siono"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(180,30,30,0.5) 0 6px, transparent 7px),
    radial-gradient(circle at 30% 30%, rgba(120,60,0,0.3) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, rgba(120,60,0,0.3) 0 2px, transparent 3px),
    repeating-linear-gradient(60deg, rgba(120,60,0,0.06) 0 5px, transparent 5px 11px);
  border-color: rgba(180,30,30,0.35);
}
.cp-app[data-app="tarot-espanol-siono"] .cp-card-back::after {
  content: "?";
  color: #b41818;
  font-weight: 900;
  font-family: 'Cinzel', Georgia, serif;
  text-shadow: 0 0 12px rgba(255,235,180,0.6), 0 2px 0 rgba(0,0,0,0.4);
}
.cp-app[data-app="tarot-espanol-siono"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(180,30,30,0.45));
}

/* Tarot de los Números — deep purple with golden cosmic glyph */
.cp-app[data-app="tarot-numeros"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,220,140,0.22), transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(255,220,140,0.12) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(255,220,140,0.12) 0 3px, transparent 4px),
    linear-gradient(160deg, #2a0d4d 0%, #4a1880 50%, #1a0633 100%);
  border-color: rgba(255,220,140,0.5);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.25),
    inset 0 0 0 7px rgba(255,220,140,0.28),
    0 14px 28px rgba(0,0,0,0.55);
}
.cp-app[data-app="tarot-numeros"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,220,140,0.5) 0 5px, transparent 6px),
    repeating-linear-gradient(0deg, rgba(255,220,140,0.04) 0 6px, transparent 6px 14px),
    repeating-linear-gradient(90deg, rgba(255,220,140,0.04) 0 6px, transparent 6px 14px);
  border-color: rgba(255,220,140,0.35);
}
.cp-app[data-app="tarot-numeros"] .cp-card-back::after {
  content: "∞";
  color: #ffdc8c;
  font-family: 'Cinzel', Georgia, serif;
  text-shadow: 0 0 14px rgba(255,220,140,0.6), 0 2px 0 rgba(0,0,0,0.45);
}
.cp-app[data-app="tarot-numeros"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,220,140,0.4));
}
/* Numbers cards are PNG with transparency — keep result card background dark for contrast */
.cp-app[data-app="tarot-numeros"] .cp-result-card {
  background: linear-gradient(160deg, #2a0d4d 0%, #1a0633 100%);
}
.cp-app[data-app="tarot-numeros"] .cp-result-card img {
  padding: 1.2rem;
  box-sizing: border-box;
}

/* Tarot Celta — forest green with Ogham triskelion */
.cp-app[data-app="tarot-celta"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(180,220,140,0.22), transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(140,180,90,0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(140,180,90,0.18) 0 3px, transparent 4px),
    repeating-linear-gradient(60deg, rgba(0,0,0,0.10) 0 3px, transparent 3px 8px),
    linear-gradient(160deg, #1a4a2a 0%, #2d6a3a 50%, #0d2a18 100%);
  border-color: rgba(180,220,140,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.28),
    inset 0 0 0 7px rgba(180,220,140,0.4),
    0 14px 28px rgba(0,0,0,0.55);
}
.cp-app[data-app="tarot-celta"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(180,220,140,0.5) 0 6px, transparent 7px),
    repeating-linear-gradient(120deg, rgba(180,220,140,0.05) 0 5px, transparent 5px 11px);
  border-color: rgba(180,220,140,0.4);
}
.cp-app[data-app="tarot-celta"] .cp-card-back::after {
  content: "᚜";
  color: #b4dc8c;
  text-shadow: 0 0 14px rgba(180,220,140,0.6), 0 2px 0 rgba(0,0,0,0.45);
}
.cp-app[data-app="tarot-celta"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(180,220,140,0.45));
}

/* Tarot de las Brujas — dark violet Wicca with crescent moon */
.cp-app[data-app="tarot-brujas"] .cp-card-back {
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(200,160,255,0.25), transparent 55%),
    radial-gradient(circle at 25% 70%, rgba(255,255,255,0.07) 0 2px, transparent 4px),
    radial-gradient(circle at 75% 30%, rgba(255,255,255,0.07) 0 2px, transparent 4px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0 2px, transparent 4px),
    linear-gradient(160deg, #1a0a2e 0%, #4a2070 50%, #100520 100%);
  border-color: rgba(200,160,255,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.4),
    inset 0 0 0 7px rgba(200,160,255,0.42),
    0 14px 28px rgba(40,15,80,0.6);
}
.cp-app[data-app="tarot-brujas"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(200,160,255,0.5) 0 5px, transparent 7px),
    repeating-linear-gradient(45deg, rgba(200,160,255,0.05) 0 5px, transparent 5px 11px);
  border-color: rgba(200,160,255,0.4);
}
.cp-app[data-app="tarot-brujas"] .cp-card-back::after {
  content: "☾";
  color: #d8b0ff;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(200,160,255,0.85), 0 2px 0 rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-brujas"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(200,160,255,0.55));
}

/* Tarot Osho Zen — minimalist bamboo green with yin-yang */
.cp-app[data-app="tarot-osho"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220,240,200,0.22), transparent 55%),
    repeating-linear-gradient(0deg, rgba(150,200,140,0.05) 0 4px, transparent 4px 9px),
    linear-gradient(160deg, #1a3a2a 0%, #3a6a4a 50%, #0a1a12 100%);
  border-color: rgba(220,240,200,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.32),
    inset 0 0 0 7px rgba(220,240,200,0.4),
    0 14px 28px rgba(0,30,15,0.55);
}
.cp-app[data-app="tarot-osho"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,240,200,0.5) 0 5px, transparent 7px),
    repeating-linear-gradient(45deg, rgba(220,240,200,0.05) 0 5px, transparent 5px 11px);
  border-color: rgba(220,240,200,0.45);
}
.cp-app[data-app="tarot-osho"] .cp-card-back::after {
  content: "☯";
  color: #dcf0c8;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(220,240,200,0.75), 0 2px 0 rgba(0,0,0,0.4);
}
.cp-app[data-app="tarot-osho"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(220,240,200,0.55));
}

/* Tarot de los Ángeles — heavenly sky-blue with golden seraphic wings */
.cp-app[data-app="tarot-angeles"] .cp-card-back {
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255,240,180,0.3), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.1) 0 3px, transparent 5px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.1) 0 3px, transparent 5px),
    linear-gradient(160deg, #6a9bd8 0%, #a3c4ee 50%, #4878b8 100%);
  border-color: rgba(255,240,180,0.6);
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,0.18),
    inset 0 0 0 7px rgba(255,240,180,0.5),
    0 14px 28px rgba(50,80,140,0.5);
}
.cp-app[data-app="tarot-angeles"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0 5px, transparent 7px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 4px, transparent 4px 9px);
  border-color: rgba(255,240,180,0.5);
}
.cp-app[data-app="tarot-angeles"] .cp-card-back::after {
  content: "✟";
  color: #fff5d0;
  font-size: 1.8rem;
  text-shadow: 0 0 16px rgba(255,240,180,0.85), 0 2px 0 rgba(0,0,0,0.3);
}
.cp-app[data-app="tarot-angeles"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,240,180,0.6));
}

/* Tarot Esotérico de Kier — deep violet gabinete with golden fleur-de-lis */
.cp-app[data-app="tarot-esoterico"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,200,90,0.18), transparent 50%),
    repeating-linear-gradient(60deg, rgba(255,200,90,0.04) 0 5px, transparent 5px 12px),
    linear-gradient(160deg, #2a0a4a 0%, #5a1a8a 50%, #150525 100%);
  border-color: rgba(255,200,90,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.35),
    inset 0 0 0 7px rgba(255,200,90,0.4),
    0 14px 28px rgba(0,0,0,0.6);
}
.cp-app[data-app="tarot-esoterico"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,200,90,0.5) 0 5px, transparent 6px),
    repeating-linear-gradient(30deg, rgba(255,200,90,0.05) 0 5px, transparent 5px 11px);
  border-color: rgba(255,200,90,0.45);
}
.cp-app[data-app="tarot-esoterico"] .cp-card-back::after {
  content: "⚜";
  color: #ffc85a;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(255,200,90,0.8), 0 2px 0 rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-esoterico"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,200,90,0.5));
}

/* Tarot Illuminati — black & gold with All-Seeing Eye in a triangle */
.cp-app[data-app="tarot-illuminati"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,200,90,0.2), transparent 50%),
    repeating-linear-gradient(30deg, rgba(255,200,90,0.05) 0 6px, transparent 6px 13px),
    linear-gradient(160deg, #0a0a0a 0%, #2a2218 50%, #050505 100%);
  border-color: rgba(255,200,90,0.6);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.5),
    inset 0 0 0 7px rgba(255,200,90,0.45),
    0 14px 28px rgba(0,0,0,0.7);
}
.cp-app[data-app="tarot-illuminati"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 60%, rgba(255,200,90,0.55) 0 4px, transparent 5px),
    repeating-linear-gradient(60deg, rgba(255,200,90,0.06) 0 4px, transparent 4px 9px);
  border-color: rgba(255,200,90,0.5);
}
.cp-app[data-app="tarot-illuminati"] .cp-card-back::after {
  content: "△";
  color: #ffc85a;
  font-size: 2.2rem;
  text-shadow: 0 0 18px rgba(255,200,90,0.85), 0 2px 0 rgba(0,0,0,0.6);
}
.cp-app[data-app="tarot-illuminati"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,200,90,0.55));
}

/* Tarot Rider-Waite — classic indigo with golden pentagram (Smith-Waite tradition) */
.cp-app[data-app="tarot-rider"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,210,140,0.18), transparent 50%),
    repeating-linear-gradient(0deg, rgba(255,210,140,0.05) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, rgba(255,210,140,0.05) 0 3px, transparent 3px 7px),
    linear-gradient(160deg, #1a1f5e 0%, #3a3f9a 50%, #0a0f2e 100%);
  border-color: rgba(255,210,140,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.32),
    inset 0 0 0 7px rgba(255,210,140,0.4),
    0 14px 28px rgba(0,0,0,0.55);
}
.cp-app[data-app="tarot-rider"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,210,140,0.5) 0 5px, transparent 6px),
    repeating-linear-gradient(45deg, rgba(255,210,140,0.06) 0 5px, transparent 5px 10px);
  border-color: rgba(255,210,140,0.45);
}
.cp-app[data-app="tarot-rider"] .cp-card-back::after {
  content: "✶";
  color: #ffd28a;
  text-shadow: 0 0 16px rgba(255,210,140,0.75), 0 2px 0 rgba(0,0,0,0.45);
}
.cp-app[data-app="tarot-rider"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,210,140,0.5));
}

/* Tarot Gitano — wine-burgundy Lenormand with golden crescent moon */
.cp-app[data-app="tarot-gitano"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,200,120,0.18), transparent 50%),
    repeating-linear-gradient(45deg, rgba(255,200,120,0.04) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #4a0a1d 0%, #7a0f2b 50%, #2a0610 100%);
  border-color: rgba(255,200,120,0.5);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.3),
    inset 0 0 0 7px rgba(255,200,120,0.35),
    0 14px 28px rgba(0,0,0,0.55);
}
.cp-app[data-app="tarot-gitano"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,200,120,0.5) 0 4px, transparent 5px),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,200,120,0.06) 0 4px, transparent 4px 8px);
  border-color: rgba(255,200,120,0.45);
}
.cp-app[data-app="tarot-gitano"] .cp-card-back::after {
  content: "☾";
  color: #ffd28a;
  text-shadow: 0 0 14px rgba(255,200,120,0.65), 0 2px 0 rgba(0,0,0,0.4);
}
.cp-app[data-app="tarot-gitano"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,200,120,0.5));
}

/* Tarot de los Sueños — midnight blue dreamscape with moon-and-stars */
.cp-app[data-app="tarot-suenos"] .cp-card-back {
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,0.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 22%, rgba(220,200,255,0.8) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 38% 70%, rgba(255,255,255,0.7) 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 80% 65%, rgba(220,200,255,0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 90%, rgba(255,255,255,0.6) 0 0.8px, transparent 1.2px),
    radial-gradient(120% 80% at 50% 0%, rgba(150,120,220,0.25), transparent 60%),
    linear-gradient(170deg, #0a0438 0%, #1f0a6a 50%, #060128 100%);
  border-color: rgba(180,150,240,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.28),
    inset 0 0 0 7px rgba(180,150,240,0.35),
    0 14px 28px rgba(0,0,0,0.6);
}
.cp-app[data-app="tarot-suenos"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,200,255,0.55) 0 5px, transparent 6px),
    repeating-linear-gradient(45deg, rgba(180,150,240,0.04) 0 6px, transparent 6px 12px);
  border-color: rgba(180,150,240,0.4);
}
.cp-app[data-app="tarot-suenos"] .cp-card-back::after {
  content: "☾";
  color: #dccaff;
  text-shadow: 0 0 16px rgba(220,200,255,0.7), 0 2px 0 rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-suenos"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(150,120,220,0.5));
}

/* Tarot Persa — deep teal Persian carpet with crescent moon */
.cp-app[data-app="tarot-persa"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220,180,80,0.22), transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(220,180,80,0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(220,180,80,0.18) 0 3px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.12) 0 4px, transparent 4px 10px),
    linear-gradient(160deg, #0d4a4a 0%, #166666 50%, #06302e 100%);
  border-color: rgba(220,180,80,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.28),
    inset 0 0 0 7px rgba(220,180,80,0.4),
    0 14px 28px rgba(0,0,0,0.55);
}
.cp-app[data-app="tarot-persa"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,180,80,0.5) 0 6px, transparent 7px),
    radial-gradient(circle at 25% 25%, rgba(220,180,80,0.3) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(220,180,80,0.3) 0 3px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(220,180,80,0.06) 0 4px, transparent 4px 10px);
  border-color: rgba(220,180,80,0.4);
}
.cp-app[data-app="tarot-persa"] .cp-card-back::after {
  content: "☪";
  color: #dcb450;
  text-shadow: 0 0 14px rgba(220,180,80,0.6), 0 2px 0 rgba(0,0,0,0.45);
}
.cp-app[data-app="tarot-persa"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(220,180,80,0.45));
}

/* Tarot Hebreo — ancient parchment with mystical aleph */
.cp-app[data-app="tarot-hebreo"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(230,200,150,0.28), transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(140,100,60,0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(140,100,60,0.18) 0 2px, transparent 3px),
    linear-gradient(160deg, #d4b88a 0%, #b8965e 50%, #6a4c20 100%);
  border-color: rgba(70,40,10,0.6);
  box-shadow:
    inset 0 0 0 6px rgba(70,40,10,0.3),
    inset 0 0 0 7px rgba(230,200,150,0.4),
    0 14px 28px rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-hebreo"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(70,40,10,0.45) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, rgba(230,200,150,0.2) 0 12px, transparent 14px),
    repeating-linear-gradient(30deg, rgba(70,40,10,0.06) 0 5px, transparent 5px 12px);
  border-color: rgba(70,40,10,0.4);
}
.cp-app[data-app="tarot-hebreo"] .cp-card-back::after {
  content: "א";
  color: #4a2c0a;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(230,200,150,0.7), 0 2px 0 rgba(0,0,0,0.35);
}
.cp-app[data-app="tarot-hebreo"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(140,100,60,0.45));
}

/* Tarot del Trabajo — corporate slate-and-bronze with briefcase accent */
.cp-app[data-app="tarot-trabajo"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200,160,80,0.22), transparent 50%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.15) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #2a3a4a 0%, #3d556f 50%, #1a2530 100%);
  border-color: rgba(180,140,70,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.28),
    inset 0 0 0 7px rgba(180,140,70,0.4),
    0 14px 28px rgba(0,0,0,0.55);
}
.cp-app[data-app="tarot-trabajo"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(200,160,80,0.55) 0 6px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(200,160,80,0.05) 0 5px, transparent 5px 13px);
  border-color: rgba(180,140,70,0.35);
}
.cp-app[data-app="tarot-trabajo"] .cp-card-back::after {
  content: "⚙";
  color: #c8a050;
  text-shadow: 0 0 12px rgba(200,160,80,0.6), 0 2px 0 rgba(0,0,0,0.45);
}
.cp-app[data-app="tarot-trabajo"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(200,160,80,0.45));
}

/* Tarot del Amor — soft rose with gold heart accent */
.cp-app[data-app="tarot-amor"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,220,235,0.3), transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(255,180,200,0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(255,180,200,0.18) 0 3px, transparent 4px),
    linear-gradient(160deg, #c1265c 0%, #e84785 50%, #7a163c 100%);
  border-color: rgba(255,215,140,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.18),
    inset 0 0 0 7px rgba(255,215,140,0.35),
    0 14px 28px rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-amor"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,215,140,0.5) 0 6px, transparent 7px),
    radial-gradient(circle at 25% 25%, rgba(255,220,235,0.35) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,220,235,0.35) 0 3px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(255,215,140,0.06) 0 5px, transparent 5px 11px);
  border-color: rgba(255,215,140,0.4);
}
.cp-app[data-app="tarot-amor"] .cp-card-back::after {
  content: "♥";
  color: #ffd98c;
  text-shadow: 0 0 14px rgba(255,217,140,0.7), 0 2px 0 rgba(0,0,0,0.45);
}
.cp-app[data-app="tarot-amor"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(232,71,133,0.45));
}

/* Tarot de Marsella — vintage cream-and-blue medieval parchment */
.cp-app[data-app="tarot-marsella"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,240,200,0.22), transparent 50%),
    repeating-linear-gradient(0deg, rgba(0,40,90,0.10) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(90deg, rgba(0,40,90,0.10) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #ecdca8 0%, #d2b87a 50%, #8a6a3a 100%);
  border-color: rgba(35,70,140,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(140,90,40,0.25),
    inset 0 0 0 7px rgba(35,70,140,0.4),
    0 14px 28px rgba(0,0,0,0.5);
}
.cp-app[data-app="tarot-marsella"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(35,70,140,0.55) 0 6px, transparent 7px),
    radial-gradient(circle at 25% 25%, rgba(140,90,40,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 25%, rgba(140,90,40,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 75%, rgba(140,90,40,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(140,90,40,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(35,70,140,0.05) 0 5px, transparent 5px 11px);
  border-color: rgba(35,70,140,0.35);
}
.cp-app[data-app="tarot-marsella"] .cp-card-back::after {
  content: "✠";
  color: #1f3c80;
  font-family: 'Cinzel', Georgia, serif;
  text-shadow: 0 0 10px rgba(255,240,200,0.7), 0 2px 0 rgba(0,0,0,0.35);
}
.cp-app[data-app="tarot-marsella"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(35,70,140,0.4));
}

/* Inverted card rotation — used by tarot-espanol-siono */
.cp-result-img.cp-result-img--inverted {
  transform: rotate(180deg);
  transition: transform .4s ease;
}

/* Tarot Astrológico — night sky with golden stars */
.cp-app[data-app="tarot-astrologico"] .cp-card-back {
  background:
    radial-gradient(circle at 22% 28%, rgba(255,224,140,0.9) 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 68% 22%, rgba(255,255,255,0.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 70%, rgba(255,224,140,0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 65%, rgba(255,255,255,0.7) 0 .8px, transparent 1.2px),
    radial-gradient(circle at 50% 90%, rgba(255,224,140,0.75) 0 1px, transparent 1.5px),
    radial-gradient(120% 80% at 50% 0%, rgba(120,80,255,0.25), transparent 60%),
    linear-gradient(160deg, #0a0e3a 0%, #1a1b6e 40%, #3a0f7a 100%);
}
.cp-app[data-app="tarot-astrologico"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,224,140,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(60deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 14px);
}
.cp-app[data-app="tarot-astrologico"] .cp-card-back::after {
  content: "✦";
  color: #ffe066;
  text-shadow: 0 0 14px rgba(255,224,102,0.7);
}
.cp-app[data-app="tarot-astrologico"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,224,102,0.45));
}

/* Oráculo de la Sibila — antique cream parchment with ancient laurel wreath ❦ (19th-century French petit Lenormand) */
.cp-app[data-app="oraculo-sibila"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,235,180,0.32), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(140,90,30,0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(140,90,30,0.16) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(140,90,30,0.07) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #d4b884 0%, #efe0b4 50%, #8a5d1f 100%);
  border-color: rgba(80,40,10,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(80,40,10,0.32),
    inset 0 0 0 7px rgba(255,235,180,0.45),
    0 14px 28px rgba(80,40,10,0.5);
}
.cp-app[data-app="oraculo-sibila"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(80,40,10,0.5) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,235,180,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,235,180,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(80,40,10,0.06) 0 5px, transparent 5px 11px);
  border-color: rgba(80,40,10,0.4);
}
.cp-app[data-app="oraculo-sibila"] .cp-card-back::after {
  content: "❦";
  color: #5a3a08;
  font-size: 2rem;
  text-shadow: 0 0 14px rgba(255,235,180,0.85), 0 2px 0 rgba(255,255,200,0.4);
}
.cp-app[data-app="oraculo-sibila"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(140,90,30,0.55));
}

/* Oráculo de las Gemas — purple amethyst gradient with diamond ◆ facet shine (32-gemstone oracle) */
.cp-app[data-app="oraculo-gemas"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220,180,255,0.4), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.18) 0 3px, transparent 5px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.18) 0 3px, transparent 5px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 3px, transparent 3px 8px),
    linear-gradient(160deg, #5a2a8a 0%, #9d6ddc 50%, #2a1050 100%);
  border-color: rgba(220,180,255,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.32),
    inset 0 0 0 7px rgba(220,180,255,0.5),
    0 14px 28px rgba(40,16,80,0.6);
}
.cp-app[data-app="oraculo-gemas"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(220,180,255,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(220,180,255,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(220,180,255,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(220,180,255,0.5);
}
.cp-app[data-app="oraculo-gemas"] .cp-card-back::after {
  content: "◆";
  color: #e8d4ff;
  font-size: 1.9rem;
  text-shadow: 0 0 18px rgba(220,180,255,0.95), 0 2px 0 rgba(40,16,80,0.5);
}
.cp-app[data-app="oraculo-gemas"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(157,109,220,0.65));
}

/* Oráculo de los Ángeles — celestial sky-white with luminous cross ✟ (36-card angel oracle) */
.cp-app[data-app="oraculo-angeles"] .cp-card-back {
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255,250,230,0.42), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.18) 0 3px, transparent 5px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.18) 0 3px, transparent 5px),
    linear-gradient(160deg, #b6cae8 0%, #e8efff 50%, #6a87b4 100%);
  border-color: rgba(255,245,200,0.7);
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,0.25),
    inset 0 0 0 7px rgba(255,245,200,0.55),
    0 14px 28px rgba(60,90,150,0.5);
}
.cp-app[data-app="oraculo-angeles"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.65) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,245,200,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,245,200,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(0deg, rgba(255,245,200,0.07) 0 4px, transparent 4px 10px);
  border-color: rgba(255,245,200,0.55);
}
.cp-app[data-app="oraculo-angeles"] .cp-card-back::after {
  content: "✟";
  color: #fff5c8;
  font-size: 2rem;
  text-shadow: 0 0 18px rgba(255,245,200,1), 0 2px 0 rgba(60,90,150,0.4);
}
.cp-app[data-app="oraculo-angeles"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,245,200,0.7));
}

/* Oráculo de las Flores — rose-pink floral garden with botanical fleur ❀ (54 flower botanical oracle) */
.cp-app[data-app="oraculo-flores"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,240,250,0.36), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(180,90,140,0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(180,90,140,0.18) 0 3px, transparent 4px),
    repeating-linear-gradient(60deg, rgba(150,40,90,0.10) 0 4px, transparent 4px 10px),
    linear-gradient(160deg, #d870a5 0%, #f0a8c8 50%, #8a2058 100%);
  border-color: rgba(255,240,250,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(120,30,70,0.28),
    inset 0 0 0 7px rgba(255,240,250,0.5),
    0 14px 28px rgba(120,30,70,0.5);
}
.cp-app[data-app="oraculo-flores"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,240,250,0.55) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,240,250,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,240,250,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(255,240,250,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(255,240,250,0.45);
}
.cp-app[data-app="oraculo-flores"] .cp-card-back::after {
  content: "❀";
  color: #fff0fa;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(255,200,230,0.95), 0 2px 0 rgba(120,30,70,0.5);
}
.cp-app[data-app="oraculo-flores"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(240,168,200,0.6));
}

/* Oráculo de la Suerte — emerald-clover green with four-leaf clover ✦ (folk luck oracle) */
.cp-app[data-app="oraculo-suerte"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220,255,180,0.32), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(255,230,140,0.2) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(255,230,140,0.2) 0 3px, transparent 4px),
    repeating-linear-gradient(60deg, rgba(20,80,30,0.12) 0 4px, transparent 4px 10px),
    linear-gradient(160deg, #0d6a2a 0%, #1f9a3e 50%, #053818 100%);
  border-color: rgba(255,230,140,0.6);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.32),
    inset 0 0 0 7px rgba(255,230,140,0.45),
    0 14px 28px rgba(5,40,20,0.6);
}
.cp-app[data-app="oraculo-suerte"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,230,140,0.55) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(220,255,180,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(220,255,180,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(255,230,140,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(255,230,140,0.45);
}
.cp-app[data-app="oraculo-suerte"] .cp-card-back::after {
  content: "✦";
  color: #ffe680;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(255,230,140,0.95), 0 2px 0 rgba(0,0,0,0.45);
}
.cp-app[data-app="oraculo-suerte"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(31,154,62,0.55));
}

/* Oráculo Tibetano (Mo) — Himalayan crimson-saffron with dharma wheel ☸ (Tibetan Buddhist divination) */
.cp-app[data-app="oraculo-tibetano"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,210,120,0.28), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(255,210,120,0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(255,210,120,0.18) 0 3px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(80,15,15,0.15) 0 4px, transparent 4px 10px),
    linear-gradient(160deg, #8a1a1a 0%, #b83a1f 50%, #4a0a0a 100%);
  border-color: rgba(255,210,120,0.6);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.35),
    inset 0 0 0 7px rgba(255,210,120,0.5),
    0 14px 28px rgba(60,5,5,0.6);
}
.cp-app[data-app="oraculo-tibetano"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,210,120,0.55) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,210,120,0.3) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,210,120,0.3) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(255,210,120,0.06) 0 5px, transparent 5px 11px);
  border-color: rgba(255,210,120,0.45);
}
.cp-app[data-app="oraculo-tibetano"] .cp-card-back::after {
  content: "☸";
  color: #ffd278;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(255,210,120,0.85), 0 2px 0 rgba(0,0,0,0.5);
}
.cp-app[data-app="oraculo-tibetano"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(184,58,31,0.5));
}

/* Oráculo Belline — ivory-gold mystical antique with five-pointed star (1860s French esoteric oracle) */
.cp-app[data-app="oraculo-belline"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,240,200,0.32), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(120,80,30,0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(120,80,30,0.16) 0 2px, transparent 3px),
    repeating-linear-gradient(30deg, rgba(120,80,30,0.08) 0 4px, transparent 4px 10px),
    linear-gradient(160deg, #e8d3a0 0%, #c8a868 50%, #7a5418 100%);
  border-color: rgba(120,80,30,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(70,40,10,0.28),
    inset 0 0 0 7px rgba(255,240,200,0.5),
    0 14px 28px rgba(70,40,10,0.45);
}
.cp-app[data-app="oraculo-belline"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(120,80,30,0.5) 0 6px, transparent 7px),
    radial-gradient(circle at 25% 25%, rgba(255,240,200,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,240,200,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(60deg, rgba(120,80,30,0.06) 0 5px, transparent 5px 11px);
  border-color: rgba(120,80,30,0.4);
}
.cp-app[data-app="oraculo-belline"] .cp-card-back::after {
  content: "★";
  color: #5a3a08;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(255,240,200,0.85), 0 2px 0 rgba(255,255,200,0.4);
}
.cp-app[data-app="oraculo-belline"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(200,168,104,0.55));
}

/* Tarot Dorado — luxurious champagne-gold with crowned star (same deck as Illuminati but golden visuals) */
.cp-app[data-app="tarot-dorado"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,220,0.35), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(255,240,180,0.2) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(255,240,180,0.2) 0 3px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(120,80,20,0.10) 0 4px, transparent 4px 10px),
    linear-gradient(160deg, #b8860b 0%, #f5d76e 45%, #8c6510 100%);
  border-color: rgba(120,80,20,0.7);
  box-shadow:
    inset 0 0 0 6px rgba(120,80,20,0.35),
    inset 0 0 0 7px rgba(255,240,180,0.6),
    0 14px 32px rgba(120,80,20,0.55);
}
.cp-app[data-app="tarot-dorado"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(120,80,20,0.5) 0 5px, transparent 6px),
    radial-gradient(circle at 25% 25%, rgba(255,240,180,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,240,180,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(60deg, rgba(120,80,20,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(120,80,20,0.4);
}
.cp-app[data-app="tarot-dorado"] .cp-card-back::after {
  content: "✺";
  color: #5a3a08;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(255,240,180,0.95), 0 2px 0 rgba(255,255,200,0.6);
}
.cp-app[data-app="tarot-dorado"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(245,215,110,0.65));
}

/* Oráculo GE — ivory & deep teal vintage French oracle (Marcel Picard, 19th c.) with fleur-de-lys ⚜ */
.cp-app[data-app="oraculo-ge"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(240,232,200,0.35), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(220,205,160,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(220,205,160,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(20,70,80,0.07) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #0e4a55 0%, #1c6a78 45%, #082930 100%);
  border-color: rgba(240,232,200,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(10,40,50,0.45),
    inset 0 0 0 7px rgba(240,232,200,0.55),
    0 14px 28px rgba(8,40,48,0.55);
}
.cp-app[data-app="oraculo-ge"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(240,232,200,0.55) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(240,232,200,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(240,232,200,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(240,232,200,0.06) 0 5px, transparent 5px 11px);
  border-color: rgba(240,232,200,0.45);
}
.cp-app[data-app="oraculo-ge"] .cp-card-back::after {
  content: "⚜";
  color: #f0e8c8;
  font-size: 2rem;
  text-shadow: 0 0 14px rgba(240,232,200,0.85), 0 2px 0 rgba(10,40,50,0.6);
}
.cp-app[data-app="oraculo-ge"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(28,106,120,0.6));
}

/* Oráculo del Amor — rosa-rojo cardiaco con corazón ♥ (52 cartas, mecánica 1 carta) */
.cp-app[data-app="oraculo-amor"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,200,220,0.42), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(255,160,190,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(255,160,190,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(180,30,80,0.08) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #c8326a 0%, #e8709a 50%, #8a1648 100%);
  border-color: rgba(255,200,220,0.7);
  box-shadow:
    inset 0 0 0 6px rgba(120,20,60,0.4),
    inset 0 0 0 7px rgba(255,220,235,0.55),
    0 14px 28px rgba(120,20,60,0.55);
}
.cp-app[data-app="oraculo-amor"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,220,235,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,200,220,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,200,220,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(255,220,235,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(255,220,235,0.5);
}
.cp-app[data-app="oraculo-amor"] .cp-card-back::after {
  content: "♥";
  color: #ffe0ec;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(255,200,220,0.95), 0 2px 0 rgba(120,20,60,0.6);
}
.cp-app[data-app="oraculo-amor"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(200,50,106,0.65));
}

/* The Answer Deck — índigo místico con ❓ (146 entradas = 73 × derecha/invertida) */
.cp-app[data-app="oraculo-answer-deck"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(180,160,255,0.36), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(220,210,255,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(220,210,255,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(80,60,160,0.08) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #2a1860 0%, #5a3eb8 50%, #100628 100%);
  border-color: rgba(180,160,255,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(40,20,90,0.45),
    inset 0 0 0 7px rgba(200,180,255,0.55),
    0 14px 28px rgba(20,10,60,0.55);
}
.cp-app[data-app="oraculo-answer-deck"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,210,255,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(180,160,255,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(180,160,255,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(220,210,255,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(220,210,255,0.5);
}
.cp-app[data-app="oraculo-answer-deck"] .cp-card-back::after {
  content: "?";
  color: #e0d4ff;
  font-size: 2.2rem;
  font-weight: bold;
  text-shadow: 0 0 18px rgba(200,180,255,0.95), 0 2px 0 rgba(40,20,90,0.6);
}
.cp-app[data-app="oraculo-answer-deck"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(90,62,184,0.65));
}

/* Oráculo I Ching del Amor — bronce/sepia imperial chino con yin-yang ☯ (64 hexagramas) */
.cp-app[data-app="oraculo-iching-amor"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,220,170,0.36), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(180,120,60,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(180,120,60,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(120,60,20,0.08) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #6b3410 0%, #b8762e 50%, #2a1408 100%);
  border-color: rgba(255,220,170,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(80,40,10,0.45),
    inset 0 0 0 7px rgba(255,230,190,0.55),
    0 14px 28px rgba(60,30,10,0.6);
}
.cp-app[data-app="oraculo-iching-amor"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,230,190,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,220,170,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,220,170,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(255,230,190,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(255,230,190,0.5);
}
.cp-app[data-app="oraculo-iching-amor"] .cp-card-back::after {
  content: "☯";
  color: #f5e6b8;
  font-size: 2.1rem;
  text-shadow: 0 0 16px rgba(255,220,170,0.95), 0 2px 0 rgba(80,40,10,0.6);
}
.cp-app[data-app="oraculo-iching-amor"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(184,118,46,0.65));
}

/* Oráculo Geomancia — tierra/ocre con cuadrícula de puntos (16 figuras geománticas latinas) */
.cp-app[data-app="oraculo-geomancia"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200,170,120,0.36), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(140,90,50,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(140,90,50,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(80,50,20,0.10) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #4a3018 0%, #8a5a30 50%, #1a0e04 100%);
  border-color: rgba(220,190,140,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(60,35,15,0.45),
    inset 0 0 0 7px rgba(220,190,140,0.55),
    0 14px 28px rgba(40,20,5,0.6);
}
.cp-app[data-app="oraculo-geomancia"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,190,140,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(220,190,140,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(220,190,140,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(220,190,140,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(220,190,140,0.5);
}
.cp-app[data-app="oraculo-geomancia"] .cp-card-back::after {
  content: "\2237";
  color: #e6c890;
  font-size: 2.3rem;
  text-shadow: 0 0 16px rgba(220,190,140,0.95), 0 2px 0 rgba(60,35,15,0.6);
}
.cp-app[data-app="oraculo-geomancia"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(138,90,48,0.65));
}

/* Oráculo I Ching general — laca china roja imperial con trigrama Qián ☰ dorado (64 hexagramas Wade-Giles) */
.cp-app[data-app="oraculo-iching"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,200,140,0.32), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(200,120,60,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(200,120,60,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(120,20,20,0.08) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #8a1a1a 0%, #c8362e 50%, #3a0808 100%);
  border-color: rgba(255,210,150,0.7);
  box-shadow:
    inset 0 0 0 6px rgba(80,10,10,0.45),
    inset 0 0 0 7px rgba(255,210,150,0.55),
    0 14px 28px rgba(60,5,5,0.6);
}
.cp-app[data-app="oraculo-iching"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,210,150,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,200,140,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,200,140,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(255,210,150,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(255,210,150,0.5);
}
.cp-app[data-app="oraculo-iching"] .cp-card-back::after {
  content: "\2630";
  color: #f5d088;
  font-size: 2.1rem;
  text-shadow: 0 0 16px rgba(255,210,150,0.95), 0 2px 0 rgba(80,10,10,0.6);
}
.cp-app[data-app="oraculo-iching"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(200,54,46,0.65));
}

/* Oráculo Sí o No — azul medianoche / blanco lunar con balance ⚖ (decisión binaria) */
.cp-app[data-app="oraculo-sino"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220,230,255,0.32), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(220,230,255,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(220,230,255,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #0a1a4a 0%, #2a3a78 50%, #02061a 100%);
  border-color: rgba(220,230,255,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(5,12,40,0.45),
    inset 0 0 0 7px rgba(220,230,255,0.55),
    0 14px 28px rgba(5,12,40,0.6);
}
.cp-app[data-app="oraculo-sino"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,230,255,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(220,230,255,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(220,230,255,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(220,230,255,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(220,230,255,0.5);
}
.cp-app[data-app="oraculo-sino"] .cp-card-back::after {
  content: "\2696";
  color: #e6ecff;
  font-size: 2.1rem;
  text-shadow: 0 0 16px rgba(220,230,255,0.95), 0 2px 0 rgba(5,12,40,0.6);
}
.cp-app[data-app="oraculo-sino"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(42,58,120,0.65));
}

/* Oráculo de la Sabiduría — ámbar/burdeos sapiencial con rosetón ✺ (sabiduría ancestral, pergamino) */
.cp-app[data-app="oraculo-sabiduria"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,220,150,0.32), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(200,150,80,0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(200,150,80,0.2) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(100,40,20,0.10) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #5a1818 0%, #a85a28 50%, #2a0808 100%);
  border-color: rgba(255,220,150,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(40,10,5,0.45),
    inset 0 0 0 7px rgba(255,220,150,0.55),
    0 14px 28px rgba(40,10,5,0.6);
}
.cp-app[data-app="oraculo-sabiduria"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,220,150,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,220,150,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,220,150,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(255,220,150,0.06) 0 5px, transparent 5px 11px);
  border-color: rgba(255,220,150,0.5);
}
.cp-app[data-app="oraculo-sabiduria"] .cp-card-back::after {
  content: "\273A";
  color: #ffd890;
  font-size: 2.1rem;
  text-shadow: 0 0 16px rgba(255,220,150,0.95), 0 2px 0 rgba(40,10,5,0.6);
}
.cp-app[data-app="oraculo-sabiduria"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(168,90,40,0.6));
}

/* Oráculo Gaia — verde bosque / esmeralda Madre Tierra con hoja botánica ❦ (naturaleza, ecología sagrada) */
.cp-app[data-app="oraculo-gaia"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200,255,180,0.30), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(180,140,80,0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(180,140,80,0.2) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(20,60,30,0.12) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #1a4a28 0%, #2e7848 50%, #051f10 100%);
  border-color: rgba(220,255,200,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(5,30,15,0.45),
    inset 0 0 0 7px rgba(220,255,200,0.55),
    0 14px 28px rgba(5,30,15,0.6);
}
.cp-app[data-app="oraculo-gaia"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,255,200,0.55) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(220,255,200,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(220,255,200,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(220,255,200,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(220,255,200,0.5);
}
.cp-app[data-app="oraculo-gaia"] .cp-card-back::after {
  content: "\2766";
  color: #d8ffc0;
  font-size: 2.1rem;
  text-shadow: 0 0 16px rgba(200,255,180,0.95), 0 2px 0 rgba(5,30,15,0.6);
}
.cp-app[data-app="oraculo-gaia"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(46,120,72,0.6));
}

/* Oráculo de la Abundancia — oro champán / verde jade con diamante ◈ (prosperidad, fortuna material) */
.cp-app[data-app="oraculo-abundancia"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,240,180,0.34), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(255,220,140,0.22) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(255,220,140,0.22) 0 3px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(120,90,20,0.10) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #0e5a3a 0%, #d4a838 50%, #053820 100%);
  border-color: rgba(255,240,180,0.7);
  box-shadow:
    inset 0 0 0 6px rgba(60,40,8,0.40),
    inset 0 0 0 7px rgba(255,240,180,0.6),
    0 14px 32px rgba(60,40,8,0.55);
}
.cp-app[data-app="oraculo-abundancia"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,240,180,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,220,140,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,220,140,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(60deg, rgba(255,240,180,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(255,240,180,0.45);
}
.cp-app[data-app="oraculo-abundancia"] .cp-card-back::after {
  content: "\25C8";
  color: #fff0b0;
  font-size: 2.1rem;
  text-shadow: 0 0 18px rgba(255,240,180,0.95), 0 2px 0 rgba(60,40,8,0.55);
}
.cp-app[data-app="oraculo-abundancia"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(212,168,56,0.65));
}

/* Oráculo de los Mensajes — pergamino marfil con sello bermellón y sobre ✉ (78 cartas × 10 variantes) */
.cp-app[data-app="oraculo-mensajes"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,250,230,0.42), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(140,90,60,0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(140,90,60,0.18) 0 2px, transparent 3px),
    repeating-linear-gradient(30deg, rgba(120,70,40,0.08) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #f5ead0 0%, #e8d5a8 50%, #8a6438 100%);
  border-color: rgba(120,70,40,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(80,40,20,0.32),
    inset 0 0 0 7px rgba(255,250,230,0.55),
    0 14px 28px rgba(80,40,20,0.45);
}
.cp-app[data-app="oraculo-mensajes"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(180,40,30,0.55) 0 8px, transparent 10px),
    radial-gradient(circle at 25% 25%, rgba(255,250,230,0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,250,230,0.45) 0 3px, transparent 4px),
    repeating-linear-gradient(60deg, rgba(120,70,40,0.06) 0 5px, transparent 5px 11px);
  border-color: rgba(120,70,40,0.4);
}
.cp-app[data-app="oraculo-mensajes"] .cp-card-back::after {
  content: "\2709";
  color: #5a2a18;
  font-size: 2rem;
  text-shadow: 0 0 14px rgba(255,250,230,0.85), 0 2px 0 rgba(255,240,210,0.6);
}
.cp-app[data-app="oraculo-mensajes"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(232,213,168,0.65));
}

/* Oráculo de los Símbolos — índigo cósmico / dorado con geometría sagrada (PNG transparentes → fondo oscuro en resultado) */
.cp-app[data-app="oraculo-simbolos"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220,180,255,0.30), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(255,220,150,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(255,220,150,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(60deg, rgba(80,40,140,0.10) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #1a0a3a 0%, #4a2880 50%, #08041a 100%);
  border-color: rgba(255,220,150,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(15,5,35,0.5),
    inset 0 0 0 7px rgba(255,220,150,0.5),
    0 14px 28px rgba(15,5,35,0.6);
}
.cp-app[data-app="oraculo-simbolos"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,220,150,0.6) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(220,180,255,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(220,180,255,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(255,220,150,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(255,220,150,0.5);
}
.cp-app[data-app="oraculo-simbolos"] .cp-card-back::after {
  content: "\232C";
  color: #ffd890;
  font-size: 2.2rem;
  text-shadow: 0 0 18px rgba(255,220,150,0.95), 0 2px 0 rgba(15,5,35,0.6);
}
.cp-app[data-app="oraculo-simbolos"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(74,40,128,0.7));
}
/* PNG transparentes (gray+alpha) → fondo oscuro contrastado para el resultado */
.cp-app[data-app="oraculo-simbolos"] .cp-result-card {
  background: radial-gradient(120% 100% at 50% 0%, #2a1458 0%, #0a0420 100%);
}
.cp-app[data-app="oraculo-simbolos"] .cp-result-card img {
  padding: 1.2rem;
  box-sizing: border-box;
}

/* Oráculo Wicca — verde bosque profundo / oro pentagrama con triqueta (42 cartas de brujería celta-europea) */
.cp-app[data-app="oraculo-wicca"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220,255,200,0.30), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(180,140,80,0.20) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(180,140,80,0.20) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(10,40,20,0.12) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #0a3a1a 0%, #1c6a38 50%, #04140a 100%);
  border-color: rgba(220,200,140,0.6);
  box-shadow:
    inset 0 0 0 6px rgba(5,20,10,0.5),
    inset 0 0 0 7px rgba(220,200,140,0.5),
    0 14px 28px rgba(5,20,10,0.6);
}
.cp-app[data-app="oraculo-wicca"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,200,140,0.55) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(220,255,200,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(220,255,200,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(220,200,140,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(220,200,140,0.5);
}
.cp-app[data-app="oraculo-wicca"] .cp-card-back::after {
  content: "\26E4"; /* ⛤ pentagram */
  color: #ffd890;
  font-size: 2.2rem;
  text-shadow: 0 0 18px rgba(220,200,140,0.95), 0 2px 0 rgba(5,20,10,0.6);
}
.cp-app[data-app="oraculo-wicca"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(28,106,56,0.65));
}

/* Runas del Amor — pergamino nórdico envejecido / sangre vikinga con runa Fehu ᚠ (24 Futhark Antiguo, amor) */
.cp-app[data-app="runas-amor"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,220,180,0.28), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(120,40,30,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(120,40,30,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(60,20,15,0.10) 0 4px, transparent 4px 11px),
    linear-gradient(160deg, #6a2418 0%, #a04030 50%, #2a0a05 100%);
  border-color: rgba(255,220,180,0.6);
  box-shadow:
    inset 0 0 0 6px rgba(40,12,8,0.5),
    inset 0 0 0 7px rgba(255,220,180,0.5),
    0 14px 28px rgba(40,12,8,0.6);
}
.cp-app[data-app="runas-amor"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,220,180,0.55) 0 6px, transparent 8px),
    radial-gradient(circle at 25% 25%, rgba(255,220,180,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, rgba(255,220,180,0.4) 0 3px, transparent 4px),
    repeating-linear-gradient(30deg, rgba(255,220,180,0.07) 0 5px, transparent 5px 11px);
  border-color: rgba(255,220,180,0.5);
}
.cp-app[data-app="runas-amor"] .cp-card-back::after {
  content: "\16A0"; /* ᚠ Fehu */
  color: #ffd8b0;
  font-size: 2.2rem;
  text-shadow: 0 0 18px rgba(255,220,180,0.95), 0 2px 0 rgba(40,12,8,0.6);
}
.cp-app[data-app="runas-amor"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(160,64,48,0.65));
}
/* Las PNG de las runas tienen fondo claro/transparente con el glifo grabado: damos un fondo oscuro al resultado */
.cp-app[data-app="runas-amor"] .cp-result-card {
  background: radial-gradient(120% 100% at 50% 0%, #4a1a12 0%, #1a0604 100%);
}
.cp-app[data-app="runas-amor"] .cp-result-card img {
  padding: 1.2rem;
  box-sizing: border-box;
}

/* Oráculo Horas Espejo — celeste nocturno con reloj dorado (las 11:11 angélicas) */
.cp-app[data-app="oraculo-horas-espejo"] .cp-card-back {
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,0.85) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 68% 22%, rgba(255,224,140,0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 70%, rgba(255,255,255,0.7) 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 80% 65%, rgba(255,224,140,0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 50% 90%, rgba(255,255,255,0.6) 0 0.8px, transparent 1.2px),
    radial-gradient(140% 90% at 50% 0%, rgba(120,150,255,0.25), transparent 55%),
    linear-gradient(170deg, #0a1240 0%, #1a3380 45%, #050828 100%);
  border-color: rgba(255,220,140,0.55);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,0.32),
    inset 0 0 0 7px rgba(255,220,140,0.4),
    0 14px 28px rgba(0,0,30,0.6);
}
.cp-app[data-app="oraculo-horas-espejo"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,220,140,0.55) 0 5px, transparent 6px),
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,220,140,0.18) 0deg 2deg,
      transparent 2deg 30deg);
  border-color: rgba(255,220,140,0.45);
}
.cp-app[data-app="oraculo-horas-espejo"] .cp-card-back::after {
  content: "✦";
  color: #ffe066;
  font-size: 2rem;
  text-shadow: 0 0 16px rgba(255,224,102,0.85), 0 2px 0 rgba(0,0,0,0.5);
}
.cp-app[data-app="oraculo-horas-espejo"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,224,102,0.55));
}
/* Las cartas de Horas Espejo son fotografías a color: cuadro oscuro elegante */
.cp-app[data-app="oraculo-horas-espejo"] .cp-result-card {
  background: linear-gradient(160deg, #0a1240 0%, #050828 100%);
}

/* Oráculo de los Números Angelicales — celeste-dorado angelical con estrella ✴ luminosa (91 números angelicales) */
.cp-app[data-app="oraculo-numeros"] .cp-card-back {
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255,240,180,0.32), transparent 55%),
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 75% 25%, rgba(255,240,180,0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 50% 75%, rgba(255,255,255,0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 18% 70%, rgba(255,240,180,0.4) 0 1px, transparent 1.4px),
    radial-gradient(circle at 82% 65%, rgba(255,255,255,0.4) 0 1px, transparent 1.4px),
    linear-gradient(165deg, #4a6db8 0%, #7ea0d8 50%, #1a2f70 100%);
  border-color: rgba(255,235,170,0.7);
  box-shadow:
    inset 0 0 0 6px rgba(20,40,90,0.4),
    inset 0 0 0 7px rgba(255,235,170,0.55),
    0 14px 28px rgba(20,30,80,0.55);
}
.cp-app[data-app="oraculo-numeros"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,235,170,0.5) 0 6px, transparent 8px),
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,235,170,0.15) 0deg 3deg,
      transparent 3deg 28deg);
  border-color: rgba(255,235,170,0.5);
}
.cp-app[data-app="oraculo-numeros"] .cp-card-back::after {
  content: "\2734"; /* ✴ — estrella de ocho puntas */
  color: #fff0b8;
  font-size: 2.2rem;
  text-shadow: 0 0 18px rgba(255,235,170,0.95), 0 2px 0 rgba(20,30,80,0.55);
}
.cp-app[data-app="oraculo-numeros"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(255,235,170,0.55));
}

/* Oráculo de los Animales — verde sabana profundo con huella 🐾 marfil (36 animales tótem, oráculo francés tradicional) */
.cp-app[data-app="oraculo-animales"] .cp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(220,200,140,0.32), transparent 55%),
    radial-gradient(circle at 22% 28%, rgba(180,160,100,0.28) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 65%, rgba(180,160,100,0.28) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 80%, rgba(180,160,100,0.22) 0 2px, transparent 3px),
    repeating-linear-gradient(35deg, rgba(60,40,15,0.10) 0 3px, transparent 3px 9px),
    linear-gradient(165deg, #2a4a28 0%, #5a7a3a 50%, #1a2810 100%);
  border-color: rgba(220,200,140,0.65);
  box-shadow:
    inset 0 0 0 6px rgba(30,40,15,0.45),
    inset 0 0 0 7px rgba(220,200,140,0.55),
    0 14px 28px rgba(20,30,10,0.6);
}
.cp-app[data-app="oraculo-animales"] .cp-card-back::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(220,200,140,0.5) 0 5px, transparent 7px),
    radial-gradient(circle at 30% 35%, rgba(220,200,140,0.35) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, rgba(220,200,140,0.35) 0 2px, transparent 3px);
  border-color: rgba(220,200,140,0.5);
}
.cp-app[data-app="oraculo-animales"] .cp-card-back::after {
  content: "\1F43E"; /* 🐾 — huellas */
  color: #e6d090;
  font-size: 1.9rem;
  text-shadow: 0 0 16px rgba(220,200,140,0.85), 0 2px 0 rgba(30,40,15,0.6);
}
.cp-app[data-app="oraculo-animales"] .cp-card.is-picked {
  filter: drop-shadow(0 18px 30px rgba(180,160,100,0.6));
}
/* Las cartas de animales son fotografías a color: marco verde oscuro elegante */
.cp-app[data-app="oraculo-animales"] .cp-result-card {
  background: linear-gradient(160deg, #2a4a28 0%, #1a2810 100%);
}