/* Pregúntale al Tarot — chatbot de IA: pregunta + 3 arcanos + respuesta del tarotista. */

/* Make [hidden] win over the flex/block display rules below (otherwise the loader,
   cards and answer would show on page load despite the hidden attribute). */
.pt-app [hidden] { display: none !important; }

.pt-page { color: #f3ead2; }
.pt-header { text-align: center; margin-bottom: 1.4rem; }
.pt-header h1 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #d8b4ff;
  text-shadow: 0 0 16px rgba(216,180,255,0.45);
  margin: 0 0 .6rem;
}
.pt-intro { max-width: 62ch; margin: 0 auto; color: rgba(243,234,210,0.85); line-height: 1.55; }

.pt-app { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.3rem; }

/* ---------- Form ---------- */
.pt-form {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(216,180,255,0.28);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200,170,255,0.07), transparent 60%),
    linear-gradient(165deg, #2a1c44 0%, #150e26 100%);
}
.pt-label { font-weight: 700; color: #d8b4ff; }
.pt-input {
  width: 100%;
  padding: .8rem 1rem;
  background: rgba(20,14,30,0.6);
  border: 1px solid rgba(216,180,255,0.4);
  border-radius: 10px;
  color: #f3ead2;
  font-size: 1.02rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.pt-input:focus { outline: none; border-color: rgba(216,180,255,0.85); box-shadow: 0 0 0 3px rgba(216,180,255,0.2); }
.pt-input::placeholder { color: rgba(243,234,210,0.4); }
.pt-ask { align-self: center; min-width: 200px; font-family: 'Cinzel', 'Times New Roman', serif; letter-spacing: .04em; }
.pt-ask:disabled { opacity: .6; cursor: progress; }

/* ---------- Drawn cards ---------- */
.pt-cards { text-align: center; }
.pt-cards-label {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(216,180,255,0.7); margin: 0 0 .7rem;
}
.pt-cards-row { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.pt-card {
  width: 96px;
  margin: 0;
  animation: pt-flip .5s ease both;
  animation-delay: var(--d, 0s);
}
.pt-card img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(216,180,255,0.5);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  display: block;
}
.pt-card figcaption {
  margin-top: .35rem;
  font-size: .78rem;
  color: rgba(243,234,210,0.85);
  line-height: 1.2;
}
@keyframes pt-flip {
  0%   { transform: rotateY(90deg) translateY(8px); opacity: 0; }
  100% { transform: rotateY(0) translateY(0); opacity: 1; }
}

/* ---------- Answer (chat bubble) ---------- */
.pt-answer-bubble {
  display: flex;
  gap: .8rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px 14px 14px 4px;
  background: linear-gradient(165deg, #3a2c5e 0%, #241842 100%);
  border: 1px solid rgba(216,180,255,0.35);
  text-align: left;
}
.pt-tarotista { font-size: 1.8rem; flex: none; line-height: 1.2; }
.pt-answer-text {
  margin: 0;
  line-height: 1.6;
  color: #f3ead2;
  white-space: pre-wrap;
}
.pt-answer { display: flex; flex-direction: column; gap: .8rem; text-align: center; }

/* ---------- Preloader (shown a few seconds while consulting the oracle) ---------- */
.pt-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 1.6rem 1rem;
}
.pt-loader-spinner {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(216,180,255,0.18);
  border-top-color: #d8b4ff;
  animation: pt-spin 0.9s linear infinite;
  box-shadow: 0 0 18px rgba(216,180,255,0.35);
}
/* Crystal-ball glyph pulsing in the centre of the spinner */
.pt-loader-spinner::after {
  content: "🔮";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  animation: pt-glow 1.4s ease-in-out infinite;
}
.pt-loader-text {
  margin: 0;
  color: rgba(243,234,210,0.75);
  font-style: italic;
  animation: pt-pulse 1.4s ease-in-out infinite;
}
@keyframes pt-spin  { to { transform: rotate(360deg); } }
@keyframes pt-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes pt-glow  { 0%,100% { transform: scale(0.9); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pt-loader-spinner { animation-duration: 2.4s; }
  .pt-loader-spinner::after, .pt-loader-text { animation: none; }
}

.pt-error { text-align: center; color: #ff9999; margin: 0; }
.pt-disclaimer {
  text-align: center;
  font-size: .76rem;
  color: rgba(243,234,210,0.45);
  font-style: italic;
  margin: .2rem auto 0;
  max-width: 58ch;
}

@media (max-width: 520px) {
  .pt-ask { align-self: stretch; }
  .pt-card { width: 76px; }
}