/* 3-card spread (Past / Present / Future) — Tarot Egipcio and similar */

.sp-page { padding: 2rem 0 4rem; }
.sp-page .wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.sp-header { text-align: center; margin-bottom: 1.5rem; }
.sp-header h1 { margin: 0 0 .5rem; }
.sp-intro { color: var(--text-soft, #ccc); max-width: 720px; margin: 0 auto; }

.sp-stage[hidden],
.sp-result[hidden],
.sp-error[hidden] { display: none !important; }

.sp-instruction {
  text-align: center;
  color: var(--text-soft, #ccc);
  margin: 1rem 0 1.5rem;
  font-size: .95rem;
}

.sp-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: .6rem;
  max-width: 900px;
  margin: 0 auto;
  padding: .5rem;
}

.sp-card {
  position: relative;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 81 / 152;
  transition: transform .2s ease, filter .2s ease;
}
.sp-card:hover:not(:disabled) { transform: translateY(-4px); }
.sp-card:disabled { cursor: default; }

.sp-card-back {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 2px solid rgba(218,165,32,0.55);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,210,140,0.2), transparent 55%),
    repeating-linear-gradient(45deg, rgba(218,165,32,0.06) 0 5px, transparent 5px 10px),
    linear-gradient(160deg, #3a1f00 0%, #6b3a08 50%, #1e0e00 100%);
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,0.3),
    inset 0 0 0 5px rgba(218,165,32,0.4),
    0 8px 18px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-card-back::after {
  content: "𓂀"; /* Eye of Horus */
  font-size: 1.6rem;
  color: #f1c878;
  text-shadow: 0 0 10px rgba(218,165,32,0.65);
}

.sp-card.is-picked .sp-card-back {
  filter: brightness(0.55) saturate(0.6);
  border-color: rgba(255,210,140,0.9);
}
.sp-card.is-picked::before {
  content: attr(data-position);
  position: absolute;
  inset: auto 0 0 0;
  text-align: center;
  font-size: .7rem;
  color: #f1c878;
  background: rgba(0,0,0,0.55);
  padding: 2px 0;
  text-transform: capitalize;
  border-radius: 0 0 4px 4px;
}

/* Result grid */
.sp-result { margin-top: 2rem; }
.sp-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 760px) {
  .sp-result-grid { grid-template-columns: 1fr; }
}

.sp-result-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(218,165,32,0.3);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  animation: sp-fade .4s ease;
}
@keyframes sp-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sp-result-label {
  display: inline-block;
  background: linear-gradient(135deg, #b8860b, #f1c878);
  color: #1e0e00;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: .8rem;
  margin-bottom: .8rem;
}

.sp-result-img {
  margin: 0 auto .8rem;
  width: min(160px, 70%);
  aspect-ratio: 81 / 152;
}
.sp-result-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(218,165,32,0.4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.sp-result-title {
  font-size: 1.05rem;
  margin: 0 0 .6rem;
  color: #f1c878;
}
.sp-arcano {
  display: block;
  font-size: .75rem;
  color: #b8860b;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

.sp-result-interp {
  color: var(--text, #ddd);
  font-size: .9rem;
  line-height: 1.55;
  text-align: left;
}

.sp-restart-wrap {
  text-align: center;
  margin-top: 1.5rem;
}

/* Tarot de Marsella (3 cartas) — classic medieval cream and indigo */
.sp-app[data-app="tarot-marsella-3"] .sp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,235,180,0.22), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,235,180,0.05) 0 4px, transparent 4px 9px),
    linear-gradient(160deg, #1a2065 0%, #3a4ba0 50%, #0a1235 100%);
  border-color: rgba(255,235,180,0.6);
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,0.32),
    inset 0 0 0 5px rgba(255,235,180,0.45),
    0 8px 18px rgba(10,18,53,0.6);
}
.sp-app[data-app="tarot-marsella-3"] .sp-card-back::after {
  content: "✠";
  color: #ffebb4;
  font-size: 1.7rem;
  text-shadow: 0 0 14px rgba(255,235,180,0.8);
}
.sp-app[data-app="tarot-marsella-3"] .sp-result-card {
  border-color: rgba(255,235,180,0.4);
}
.sp-app[data-app="tarot-marsella-3"] .sp-result-label {
  background: linear-gradient(135deg, #3a4ba0, #ffebb4);
  color: #0a1235;
}
.sp-app[data-app="tarot-marsella-3"] .sp-result-img img {
  border-color: rgba(255,235,180,0.5);
}
.sp-app[data-app="tarot-marsella-3"] .sp-result-title {
  color: #ffebb4;
}

/* Tarot Español (3 cartas) — Spanish deck red & gold with sword silhouette */
.sp-app[data-app="tarot-espanol-3"] .sp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,210,140,0.2), transparent 50%),
    repeating-linear-gradient(45deg, rgba(255,210,140,0.05) 0 5px, transparent 5px 11px),
    linear-gradient(160deg, #6a0a14 0%, #a01828 50%, #2a0608 100%);
  border-color: rgba(255,210,140,0.55);
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,0.32),
    inset 0 0 0 5px rgba(255,210,140,0.4),
    0 8px 18px rgba(60,5,10,0.55);
}
.sp-app[data-app="tarot-espanol-3"] .sp-card-back::after {
  content: "♠";
  color: #ffd28a;
  font-size: 1.7rem;
  text-shadow: 0 0 14px rgba(255,210,140,0.75);
}
.sp-app[data-app="tarot-espanol-3"] .sp-result-card {
  border-color: rgba(255,210,140,0.4);
}
.sp-app[data-app="tarot-espanol-3"] .sp-result-label {
  background: linear-gradient(135deg, #a01828, #ffd28a);
  color: #2a0608;
}
.sp-app[data-app="tarot-espanol-3"] .sp-result-img img {
  border-color: rgba(255,210,140,0.5);
}
.sp-app[data-app="tarot-espanol-3"] .sp-result-title {
  color: #ffd28a;
}

/* Tarot Gitano (3 cartas) — wine-burgundy Lenormand with golden crescent moon (matches the 1-card Gitano theme) */
.sp-app[data-app="tarot-gitano-3"] .sp-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.55);
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,0.32),
    inset 0 0 0 5px rgba(255,200,120,0.38),
    0 8px 18px rgba(0,0,0,0.55);
}
.sp-app[data-app="tarot-gitano-3"] .sp-card-back::after {
  content: "☾";
  color: #ffd28a;
  font-size: 1.6rem;
  text-shadow: 0 0 14px rgba(255,200,120,0.7);
}
.sp-app[data-app="tarot-gitano-3"] .sp-result-card {
  border-color: rgba(255,200,120,0.4);
}
.sp-app[data-app="tarot-gitano-3"] .sp-result-label {
  background: linear-gradient(135deg, #7a0f2b, #ffd28a);
  color: #2a0610;
}
.sp-app[data-app="tarot-gitano-3"] .sp-result-img img {
  border-color: rgba(255,200,120,0.5);
}
.sp-app[data-app="tarot-gitano-3"] .sp-result-title {
  color: #ffd28a;
}

/* Tarot del Futuro — violet/cyan futurist theme */
.sp-app[data-app="tarot-futuro"] .sp-card-back {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(180,220,255,0.25), transparent 55%),
    repeating-linear-gradient(0deg, rgba(120,210,255,0.04) 0 4px, transparent 4px 9px),
    linear-gradient(160deg, #1a0a3a 0%, #4030a0 50%, #0a0418 100%);
  border-color: rgba(180,220,255,0.6);
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,0.4),
    inset 0 0 0 5px rgba(120,210,255,0.4),
    0 8px 18px rgba(0,0,0,0.55);
}
.sp-app[data-app="tarot-futuro"] .sp-card-back::after {
  content: "✧";
  color: #b4e8ff;
  text-shadow: 0 0 12px rgba(180,230,255,0.8);
}
.sp-app[data-app="tarot-futuro"] .sp-result-card {
  border-color: rgba(120,210,255,0.4);
}
.sp-app[data-app="tarot-futuro"] .sp-result-label {
  background: linear-gradient(135deg, #4030a0, #b4e8ff);
  color: #0a0418;
}
.sp-app[data-app="tarot-futuro"] .sp-result-img img {
  border-color: rgba(120,210,255,0.5);
}
.sp-app[data-app="tarot-futuro"] .sp-result-title {
  color: #b4e8ff;
}
.sp-app[data-app="tarot-futuro"] .sp-arcano {
  color: #7da6e8;
}

.sp-error {
  text-align: center;
  color: #ff8080;
  background: rgba(255,0,0,0.1);
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
}