/* ═══════════════════════════════════════════════════
   TAARA TAROT READER v4.0.0 — Light Theme
   Scoped to #ttr-app — zero bleed into site styles
   ═══════════════════════════════════════════════════ */

/* Google Fonts loaded via wp_enqueue_style in PHP — no blocking @import */

/* ── Variables — Light Theme ──────────────────── */
#ttr-app {
  --ttr-bg:        #fdf8f0;
  --ttr-surface:   #fff9f0;
  --ttr-border:    rgba(180,130,60,0.2);
  --ttr-gold:      #8b5e1a;
  --ttr-gold2:     #b07a2a;
  --ttr-accent:    #7c3aed;
  --ttr-accent2:   #9d5ff5;
  --ttr-text:      #2d1f0e;
  --ttr-muted:     #7a6045;
  --ttr-card-w:    120px;
  --ttr-card-h:    180px;
  --ttr-radius:    14px;
  font-family: 'Crimson Pro', Georgia, serif;
  color: var(--ttr-text);
  background: var(--ttr-bg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(139,94,26,0.15), 0 1px 4px rgba(0,0,0,0.06);
  margin: 2em auto;
  max-width: 1080px;
  border: 1px solid rgba(180,130,60,0.15);
}

/* ── Hero Section ─────────────────────────────── */
.ttr-hero {
  position: relative;
  text-align: center;
  padding: 3em 2em 2.5em;
  background: linear-gradient(160deg, #fff8ed 0%, #fdf3e3 60%, #fef9f0 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--ttr-border);
}

.ttr-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(180,130,60,0.5), transparent),
    radial-gradient(1px 1px at 40% 60%, rgba(180,130,60,0.3), transparent),
    radial-gradient(1.5px 1.5px at 60% 20%, rgba(180,130,60,0.4), transparent),
    radial-gradient(1px 1px at 80% 50%, rgba(180,130,60,0.25), transparent),
    radial-gradient(1px 1px at 15% 70%, rgba(180,130,60,0.35), transparent),
    radial-gradient(1.5px 1.5px at 55% 80%, rgba(180,130,60,0.3), transparent),
    radial-gradient(1px 1px at 90% 15%, rgba(180,130,60,0.4), transparent),
    radial-gradient(1px 1px at 70% 90%, rgba(180,130,60,0.25), transparent),
    radial-gradient(1px 1px at 35% 45%, rgba(180,130,60,0.35), transparent),
    radial-gradient(1.5px 1.5px at 5% 90%, rgba(180,130,60,0.3), transparent);
  pointer-events: none;
  animation: ttr-twinkle 4s ease-in-out infinite alternate;
}

@keyframes ttr-twinkle {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

.ttr-hero::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(180,130,60,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ttr-oracle-icon {
  font-size: 3.2em;
  display: block;
  margin-bottom: .3em;
  filter: drop-shadow(0 0 12px rgba(139,94,26,0.4));
  animation: ttr-pulse-icon 3s ease-in-out infinite;
}

@keyframes ttr-pulse-icon {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 12px rgba(139,94,26,0.4)); }
  50%       { transform: scale(1.07); filter: drop-shadow(0 0 22px rgba(139,94,26,0.65)); }
}

.ttr-hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5em, 4vw, 2.4em);
  font-weight: 700;
  color: var(--ttr-gold);
  margin: 0 0 .35em;
  letter-spacing: .06em;
  text-shadow: 0 1px 8px rgba(139,94,26,0.2);
}

.ttr-hero-sub {
  font-size: 1.05em;
  color: var(--ttr-muted);
  margin: 0 0 1.4em;
  font-style: italic;
}

/* ── Progress Bar ─────────────────────────────── */
.ttr-progress-wrap {
  padding: 1em 2em .5em;
  background: var(--ttr-surface);
  border-bottom: 1px solid var(--ttr-border);
}

.ttr-progress-label {
  font-size: .9em;
  color: var(--ttr-muted);
  margin-bottom: .5em;
  text-align: center;
  font-family: 'Cinzel', serif;
  letter-spacing: .05em;
}

.ttr-progress-bar {
  height: 5px;
  background: rgba(139,94,26,0.1);
  border-radius: 10px;
  overflow: hidden;
  max-width: 400px;
  margin: 0 auto;
}

.ttr-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ttr-accent), var(--ttr-gold));
  border-radius: 10px;
  transition: width .4s ease;
}

/* ── Buttons ──────────────────────────────────── */
.ttr-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: 'Cinzel', serif;
  font-size: .9em;
  letter-spacing: .06em;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  padding: .6em 1.6em;
  transition: all .25s ease;
  text-decoration: none;
}

.ttr-btn-icon { font-size: 1.1em; }

.ttr-btn-primary {
  background: linear-gradient(135deg, #c8972a 0%, #b07a1a 50%, #9a6615 100%);
  color: #fff;
  font-size: 1em;
  padding: .75em 2.2em;
  box-shadow: 0 4px 18px rgba(139,94,26,0.35);
  border: 1px solid rgba(139,94,26,0.2);
}

.ttr-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(139,94,26,0.45);
  background: linear-gradient(135deg, #d4a030 0%, #b87d1e 50%, #a06d18 100%);
}

.ttr-btn-primary:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.ttr-btn-primary.ttr-ready {
  animation: ttr-btn-glow 2s ease-in-out infinite;
  background: linear-gradient(135deg, #7c3aed 0%, #9d5ff5 50%, #7c3aed 100%);
  box-shadow: 0 4px 20px rgba(124,58,237,0.4);
}

@keyframes ttr-btn-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(124,58,237,0.4); }
  50%       { box-shadow: 0 4px 38px rgba(124,58,237,0.75), 0 0 16px rgba(139,94,26,0.2); }
}

/* ── Card Grid ────────────────────────────────── */
.ttr-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ttr-card-w), 1fr));
  gap: 1em;
  padding: 1.5em;
  background: var(--ttr-bg);
}

/* ── Individual Card ──────────────────────────── */
.ttr-card-wrap {
  perspective: 900px;
}

.ttr-card {
  width: 100%;
  height: var(--ttr-card-h);
  cursor: pointer;
  position: relative;
  border-radius: var(--ttr-radius);
  outline: none;
}

.ttr-card:focus-visible .ttr-card-inner {
  box-shadow: 0 0 0 3px var(--ttr-accent), 0 0 20px rgba(124,58,237,0.3);
}

.ttr-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1), box-shadow .3s;
  border-radius: var(--ttr-radius);
}

.ttr-card:hover .ttr-card-inner {
  transform: translateY(-5px) rotateY(6deg);
  box-shadow: 0 12px 28px rgba(139,94,26,0.2), 0 0 16px rgba(124,58,237,0.15);
}

.ttr-card.ttr-flipped .ttr-card-inner {
  transform: rotateY(180deg);
}
.ttr-card.ttr-flipped:hover .ttr-card-inner {
  transform: rotateY(180deg) translateY(-4px);
}

/* Card faces */
.ttr-card-back,
.ttr-card-front {
  position: absolute;
  inset: 0;
  border-radius: var(--ttr-radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Back face — warm ivory with gold pattern */
.ttr-card-back {
  background: linear-gradient(145deg, #fdf0d8, #f5e0b8);
  border: 1px solid rgba(180,130,60,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(139,94,26,0.05);
}

.ttr-card-back-pattern {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(180,130,60,0.07) 0px, rgba(180,130,60,0.07) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(-45deg, rgba(180,130,60,0.05) 0px, rgba(180,130,60,0.05) 1px, transparent 1px, transparent 12px);
  border: 6px solid rgba(180,130,60,0.15);
  border-radius: calc(var(--ttr-radius) - 2px);
  margin: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ttr-back-mandala {
  font-size: 2.8em;
  color: rgba(180,130,60,0.4);
  text-align: center;
  animation: ttr-rotate-mandala 12s linear infinite;
  user-select: none;
}

@keyframes ttr-rotate-mandala {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Front face — uses card's own color, light treatment */
.ttr-card-front {
  transform: rotateY(180deg);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--card-color, #7c3aed) 55%, #fff),
    color-mix(in srgb, var(--card-color, #7c3aed) 30%, #fff9f0)
  );
  border: 1px solid rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2em;
  padding: .6em .4em;
  text-align: center;
}

.ttr-card-front::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: calc(var(--ttr-radius) - 4px);
  pointer-events: none;
}

.ttr-card-number {
  font-family: 'Cinzel', serif;
  font-size: .75em;
  color: rgba(0,0,0,0.5);
  letter-spacing: .1em;
}

.ttr-card-symbol {
  font-size: 2em;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  line-height: 1.2;
}

.ttr-card-name {
  font-family: 'Cinzel', serif;
  font-size: .68em;
  font-weight: 600;
  color: #1a1010;
  letter-spacing: .03em;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}

.ttr-card-selected-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  background: var(--ttr-gold);
  color: #fff;
  border-radius: 50%;
  font-size: .75em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: opacity .2s, transform .25s;
}

.ttr-card.ttr-selected .ttr-card-selected-badge {
  opacity: 1;
  transform: scale(1);
}

.ttr-card.ttr-selected .ttr-card-inner {
  box-shadow: 0 0 0 3px var(--ttr-gold), 0 6px 20px rgba(139,94,26,0.25);
}

/* Disabled cards */
.ttr-card-wrap.ttr-disabled .ttr-card {
  cursor: not-allowed;
  opacity: .4;
}
.ttr-card-wrap.ttr-disabled .ttr-card:hover .ttr-card-inner {
  transform: none;
}

/* ── Action button wrap ───────────────────────── */
.ttr-action-wrap {
  text-align: center;
  padding: 1.5em 1em 1em;
  background: var(--ttr-bg);
}

/* ── Selected Cards Display ───────────────────── */
.ttr-selected-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
  padding: 0 1.5em 1em;
  background: var(--ttr-bg);
  min-height: 0;
  transition: min-height .3s;
}

.ttr-selected-tag {
  background: rgba(139,94,26,0.1);
  border: 1px solid rgba(139,94,26,0.25);
  border-radius: 20px;
  padding: .3em .85em;
  font-size: .82em;
  color: var(--ttr-gold);
  font-family: 'Cinzel', serif;
  letter-spacing: .04em;
  animation: ttr-tag-in .3s ease;
}

@keyframes ttr-tag-in {
  from { opacity:0; transform: translateY(6px) scale(.9); }
  to   { opacity:1; transform: none; }
}

/* ── Reading Output ───────────────────────────── */
.ttr-reading-output {
  background: var(--ttr-surface);
  border-top: 1px solid var(--ttr-border);
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s ease;
}

.ttr-reading-output.ttr-visible {
  max-height: 9999px;
}

.ttr-reading-inner {
  padding: 2em 2.5em 2.5em;
  max-width: 780px;
  margin: 0 auto;
}

/* Loading spinner */
.ttr-loading {
  text-align: center;
  padding: 3em 1em;
}

.ttr-spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(139,94,26,0.15);
  border-top-color: var(--ttr-gold);
  border-radius: 50%;
  margin: 0 auto 1em;
  animation: ttr-spin .8s linear infinite;
}

@keyframes ttr-spin {
  to { transform: rotate(360deg); }
}

.ttr-loading-text {
  font-family: 'Cinzel', serif;
  color: var(--ttr-muted);
  font-size: .95em;
  letter-spacing: .06em;
}

/* Reading content */
.ttr-reading-content .ttr-reading-header {
  text-align: center;
  margin-bottom: 2em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--ttr-border);
}

.ttr-reading-content .ttr-reading-header h2 {
  font-family: 'Cinzel', serif;
  color: var(--ttr-gold);
  font-size: 1.4em;
  letter-spacing: .06em;
  margin: .3em 0;
}

.ttr-reading-content .ttr-reading-header p {
  color: var(--ttr-muted);
  font-style: italic;
  font-size: .95em;
}

.ttr-reading-content .ttr-cards-drawn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
  margin-bottom: 1em;
}

.ttr-reading-content .ttr-drawn-tag {
  background: linear-gradient(135deg, rgba(139,94,26,0.12), rgba(124,58,237,0.08));
  border: 1px solid rgba(139,94,26,0.25);
  border-radius: 20px;
  padding: .3em .9em;
  font-size: .82em;
  color: var(--ttr-gold);
  font-family: 'Cinzel', serif;
  letter-spacing: .04em;
}

/* Reading body */
.ttr-reading-opening,
.ttr-card-reading,
.ttr-closing {
  margin-bottom: 1.5em;
}

.ttr-reading-body h3,
.ttr-reading-opening h3,
.ttr-card-reading h3,
.ttr-closing h3 {
  font-family: 'Cinzel', serif;
  color: var(--ttr-gold);
  font-size: 1.05em;
  letter-spacing: .05em;
  margin: 1.5em 0 .5em;
  border-left: 3px solid var(--ttr-accent);
  padding-left: .75em;
}

.ttr-reading-body p,
.ttr-reading-opening p,
.ttr-card-reading p,
.ttr-closing p {
  color: var(--ttr-text);
  line-height: 1.85;
  font-size: 1.05em;
  margin: 0 0 .8em;
}

.ttr-card-reading {
  background: rgba(139,94,26,0.04);
  border: 1px solid rgba(139,94,26,0.1);
  border-radius: 12px;
  padding: 1.2em 1.4em;
  margin-bottom: 1em;
}

.ttr-pos-desc {
  color: var(--ttr-muted) !important;
  font-size: .95em !important;
  font-style: italic;
  margin-bottom: .6em !important;
}

.ttr-guidance {
  color: var(--ttr-gold) !important;
  font-weight: 600;
  font-style: italic;
  border-top: 1px solid var(--ttr-border);
  padding-top: .6em;
  margin-top: .6em !important;
}

.ttr-question-note {
  background: rgba(124,58,237,0.06);
  border-left: 3px solid var(--ttr-accent);
  padding: .7em 1em;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--ttr-muted) !important;
}

.ttr-reading-body strong { color: var(--ttr-gold2); font-weight: 600; }



.ttr-error-msg {
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.2);
  color: #b91c1c;
  border-radius: 10px;
  padding: 1em 1.4em;
  font-size: .95em;
  text-align: center;
}

/* ── User Info Form ───────────────────────────── */
.ttr-greeting {
  position: relative;
  text-align: center;
  padding: 2.5em 2em 2em;
  background: linear-gradient(160deg, #fff8ed 0%, #fdf3e3 60%, #fef9f0 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--ttr-border);
}

.ttr-info-form {
  padding: 2em 2.5em 2.5em;
  background: var(--ttr-surface);
  border-top: 1px solid var(--ttr-border);
}

.ttr-form-intro {
  color: var(--ttr-muted);
  font-size: .95rem;
  margin: 0 0 1.5em;
  text-align: center;
  opacity: .85;
}

.ttr-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.ttr-form-field {
  margin-bottom: 20px;
}

.ttr-form-label {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ttr-gold);
  letter-spacing: .06em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.ttr-req { color: #dc2626; }

.ttr-form-input {
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(180,130,60,0.25);
  border-radius: 8px;
  color: var(--ttr-text);
  font-size: .95rem;
  font-family: 'Crimson Pro', Georgia, serif;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
  appearance: auto;
  -webkit-appearance: auto;
}

.ttr-form-input:focus {
  outline: none;
  border-color: var(--ttr-gold2);
  box-shadow: 0 0 0 3px rgba(180,130,60,0.12);
}

.ttr-form-input::placeholder {
  color: #b8a585;
  opacity: .8;
}

.ttr-form-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .6;
}

.ttr-form-select { cursor: pointer; }

.ttr-form-error {
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: 8px;
  color: #b91c1c;
  font-size: .9rem;
  padding: 10px 14px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.ttr-form-submit-row {
  margin-top: 8px;
  text-align: center;
}

.ttr-form-submit-row .ttr-btn { min-width: 240px; }

.ttr-btn.ttr-loading-btn {
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Mobile ───────────────────────────────────── */
@media (max-width: 640px) {
  #ttr-app { --ttr-card-w: 90px; --ttr-card-h: 138px; --ttr-radius: 10px; }
  .ttr-hero  { padding: 2em 1em 1.5em; }
  .ttr-deck  { gap: .6em; padding: 1em; }
  .ttr-reading-inner { padding: 1.5em 1em; }
  .ttr-hero-title    { font-size: 1.4em; }
  .ttr-card-symbol   { font-size: 1.6em; }
  .ttr-card-name     { font-size: .6em; }
  .ttr-info-form     { padding: 1.5em 1.2em 2em; }
  .ttr-form-grid     { grid-template-columns: 1fr; }
  .ttr-card-reading  { padding: .9em 1em; }
}