/* =====================================================
   Tarot Oracle — WordPress Plugin Stylesheet
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Crimson+Pro:ital,wght@0,300;0,400;1,300&display=swap');

#tarot-oracle-app {
  --gold:           #C9A84C;
  --gold-light:     #E8C86A;
  --deep:           #0D0A1A;
  --card-bg:        #12102A;
  --mystical:       #6B4FA8;
  --mystical-light: #9B7FD4;
  --text-gold:      #E8C86A;
  --text-cream:     #F0E8D0;
  --star-clr:       #FFE082;

  background: var(--deep);
  min-height: 600px;
  padding: 2.5rem 1.5rem;
  font-family: 'Crimson Pro', Georgia, serif;
  color: var(--text-cream);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-sizing: border-box;
}

#tarot-oracle-app *, #tarot-oracle-app *::before, #tarot-oracle-app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Stars */
.to-stars-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.to-star-dot {
  position: absolute;
  background: var(--star-clr);
  border-radius: 50%;
  animation: to-twinkle var(--d, 3s) ease-in-out infinite var(--delay, 0s);
}
@keyframes to-twinkle {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50%       { opacity: 0.9; transform: scale(1.4); }
}

.to-inner { position: relative; z-index: 1; }

/* Title */
.to-title {
  text-align: center;
  font-family: 'Cinzel Decorative', 'Times New Roman', serif;
  font-size: 24px;
  color: var(--gold);
  letter-spacing: .12em;
  margin-bottom: .3rem;
  text-shadow: 0 0 20px rgba(201,168,76,.5);
}
.to-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--mystical-light);
  letter-spacing: .15em;
  font-style: italic;
  margin-bottom: 2rem;
}

/* Spread buttons */
.to-spread-selector { display: flex; justify-content: center; gap: 10px; margin-bottom: 2rem; flex-wrap: wrap; }
.to-spread-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 6px 18px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 13px;
  letter-spacing: .08em;
  cursor: pointer;
  border-radius: 20px;
  transition: all .3s;
}
.to-spread-btn:hover, .to-spread-btn.active {
  background: rgba(201,168,76,.15);
  box-shadow: 0 0 12px rgba(201,168,76,.3);
  color: var(--gold-light);
}

/* Question */
.to-question-area { text-align: center; margin-bottom: 2rem; }
.to-question-area label { display: block; font-size: 13px; color: var(--mystical-light); letter-spacing: .1em; margin-bottom: 8px; font-style: italic; }
.to-question-input {
  background: rgba(107,79,168,.1);
  border: 1px solid rgba(107,79,168,.4);
  color: var(--text-cream);
  padding: 10px 16px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 15px;
  border-radius: 4px;
  width: min(480px, 100%);
  outline: none;
  transition: border-color .3s;
}
.to-question-input::placeholder { color: rgba(240,232,208,.3); }
.to-question-input:focus { border-color: var(--gold); }

/* Draw button */
.to-draw-btn {
  display: block;
  margin: 0 auto 2.5rem;
  background: linear-gradient(135deg, rgba(201,168,76,.2), rgba(107,79,168,.2));
  border: 1px solid var(--gold);
  color: var(--gold-light);
  padding: 12px 40px;
  font-family: 'Cinzel Decorative', 'Times New Roman', serif;
  font-size: 13px;
  letter-spacing: .15em;
  cursor: pointer;
  border-radius: 3px;
  transition: all .4s;
  box-shadow: 0 0 20px rgba(201,168,76,.1);
}
.to-draw-btn:hover {
  background: linear-gradient(135deg, rgba(201,168,76,.35), rgba(107,79,168,.3));
  box-shadow: 0 0 30px rgba(201,168,76,.3);
  transform: translateY(-1px);
}
.to-draw-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Cards */
.to-cards-area { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 2.5rem; min-height: 180px; }
.to-card-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.to-card-pos-label { font-size: 11px; color: var(--mystical-light); letter-spacing: .12em; text-transform: uppercase; font-style: italic; }

.to-tarot-card {
  width: 90px; height: 150px; border-radius: 6px;
  border: 1px solid var(--gold);
  position: relative; cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,0,.2,1), box-shadow .4s;
}
.to-tarot-card.flipped { box-shadow: 0 0 25px rgba(201,168,76,.4); }
.to-card-back, .to-card-front {
  position: absolute; inset: 0; border-radius: 6px;
  backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px;
}
.to-card-back { background: var(--card-bg); overflow: hidden; }
.to-card-back-pattern {
  width: 100%; height: 100%; border-radius: 4px;
  border: 1px solid rgba(201,168,76,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: rgba(201,168,76,.5);
}
.to-card-front { background: var(--card-bg); transform: rotateY(180deg); text-align: center; gap: 4px; }
.to-card-front.reversed { transform: rotateY(180deg) rotate(180deg); }
@keyframes to-flip3d { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } }

.to-card-number { font-size: 10px; color: var(--mystical-light); letter-spacing: .1em; }
.to-card-symbol { font-size: 28px; filter: drop-shadow(0 0 6px rgba(201,168,76,.6)); line-height: 1; margin: 2px 0; }
.to-card-name { font-size: 10px; color: var(--gold); font-family: 'Cinzel Decorative', serif; letter-spacing: .05em; text-align: center; line-height: 1.3; }
.to-reversed-label { font-size: 9px; color: #E57373; font-style: italic; }

/* Divider */
.to-divider { width: 60%; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin: 0 auto 2rem; }

/* Reading */
.to-reading-area { max-width: 600px; margin: 0 auto; }
.to-reading-title { text-align: center; font-family: 'Cinzel Decorative', serif; font-size: 15px; color: var(--gold); letter-spacing: .1em; margin-bottom: 1.5rem; }
.to-card-reading {
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 6px; padding: 1.2rem 1.5rem; margin-bottom: 1rem;
  background: rgba(107,79,168,.07);
  animation: to-fadeIn .5s ease;
}
@keyframes to-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.to-reading-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: .8rem; }
.to-reading-symbol { font-size: 22px; }
.to-reading-card-name { font-family: 'Cinzel Decorative', serif; font-size: 13px; color: var(--gold); }
.to-reading-card-pos { font-size: 11px; color: var(--mystical-light); font-style: italic; }
.to-reading-text { font-size: 15px; line-height: 1.75; color: var(--text-cream); font-style: italic; }

.to-loading { text-align: center; padding: 2rem; color: var(--mystical-light); font-style: italic; font-size: 15px; animation: to-pulse 1.5s ease-in-out infinite; }
@keyframes to-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.to-overall {
  margin-top: 1.5rem; padding: 1.5rem;
  border: 1px solid rgba(201,168,76,.3); border-radius: 6px;
  background: rgba(201,168,76,.05); text-align: center;
}
.to-overall-title { font-family: 'Cinzel Decorative', serif; font-size: 13px; color: var(--gold); margin-bottom: 1rem; letter-spacing: .1em; }
.to-overall-text { font-size: 16px; line-height: 1.8; color: var(--text-cream); font-style: italic; }

.to-reset-btn {
  display: block; margin: 2rem auto 0;
  background: transparent; border: 1px solid rgba(107,79,168,.5);
  color: var(--mystical-light); padding: 8px 28px;
  font-family: 'Crimson Pro', Georgia, serif; font-size: 13px;
  letter-spacing: .1em; cursor: pointer; border-radius: 20px; transition: all .3s;
}
.to-reset-btn:hover { border-color: var(--mystical-light); background: rgba(107,79,168,.15); }

.to-error { color: #E57373; text-align: center; padding: 1rem; font-style: italic; }