/* tarot.css — Tarot Reading page styles for BirthChartNumbers.com */

/* ── Hero ───────────────────────────────────────────────────── */
.tarot-hero {
  position: relative; z-index: 1;
  min-height: 52vh;
  display: flex; align-items: center; justify-content: center;
  padding: 96px 24px 56px; text-align: center; overflow: hidden;
}
.tarot-hero-content { max-width: 640px; margin: 0 auto; position: relative; z-index: 2; }
.hero-back {
  display: inline-block; margin-bottom: 8px;
  font-size: 13px; color: var(--text-muted);
  text-decoration: none; letter-spacing: 0.5px;
  transition: color var(--transition);
}
.hero-back:hover { color: var(--accent-purple); }
.tarot-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem,6vw,4rem);
  font-weight: 700; letter-spacing: 2px; line-height: 1.05;
  margin-bottom: 16px;
}
.tarot-sub {
  font-size: 1.05rem; color: var(--text-muted);
  line-height: 1.7; max-width: 520px; margin: 0 auto;
}

/* Floating card backs in hero */
.hero-float-cards { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hfc {
  position: absolute;
  width: 56px; height: 88px;
  background: linear-gradient(145deg,#1a0845,#0d1526);
  border: 1px solid rgba(192,132,252,0.28);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: rgba(192,132,252,0.35);
  animation: hfcFloat 8s ease-in-out infinite;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.hfc1 { top:18%; left:8%;  animation-delay:0s;    animation-duration:7s;  transform:rotate(-15deg); }
.hfc2 { top:55%; left:4%;  animation-delay:1.2s;  animation-duration:9s;  transform:rotate(10deg); }
.hfc3 { top:20%; right:9%; animation-delay:0.6s;  animation-duration:8s;  transform:rotate(18deg); }
.hfc4 { top:60%; right:5%; animation-delay:1.8s;  animation-duration:7.5s;transform:rotate(-8deg); }
.hfc5 { top:38%; left:50%; margin-left:-28px; animation-delay:0.3s; animation-duration:10s; transform:rotate(5deg); opacity:.4; }
@keyframes hfcFloat {
  0%,100% { transform: translateY(0) rotate(var(--r,0deg)); }
  50%      { transform: translateY(-18px) rotate(var(--r,0deg)); }
}
/* Override individual rotation with CSS var */
.hfc1 { --r:-15deg; } .hfc2 { --r:10deg; } .hfc3 { --r:18deg; } .hfc4 { --r:-8deg; } .hfc5 { --r:5deg; }

/* ── Steps layout ───────────────────────────────────────────── */
.tarot-section { position: relative; z-index: 1; padding: 56px 0; }
.step-hdr {
  display: flex; align-items: flex-start; gap: 20px; margin-bottom: 36px;
}
.step-num {
  font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1;
  color: rgba(192,132,252,0.25); flex-shrink: 0;
}
.step-title {
  font-family: var(--font-display); font-size: clamp(1.1rem,2.5vw,1.5rem);
  font-weight: 700; color: var(--text-primary); margin-bottom: 6px; letter-spacing: 0.5px;
}
.step-sub { font-size: 0.9rem; color: var(--text-muted); }

/* ── Category pills ─────────────────────────────────────────── */
.category-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
}
.cat-pill {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition);
  font-family: var(--font-body); text-align: left;
}
.cat-pill:hover {
  border-color: var(--cc, var(--accent-purple));
  background: color-mix(in srgb, var(--cc, var(--accent-purple)) 8%, transparent);
  transform: translateY(-2px);
}
.cat-pill.selected {
  border-color: var(--cc, var(--accent-purple));
  background: color-mix(in srgb, var(--cc, var(--accent-purple)) 14%, transparent);
  box-shadow: 0 0 0 1px var(--cc,var(--accent-purple)), 0 8px 24px rgba(0,0,0,0.3);
}
/* Selected color glow using the CSS custom property */
.cat-pill.selected { box-shadow: 0 0 0 1px var(--cc), 0 6px 20px rgba(0,0,0,0.3); }
.cat-icon { font-size: 22px; flex-shrink: 0; }
.cat-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }

/* ── Spread grid ────────────────────────────────────────────── */
.spread-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;
}
.spread-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-card); padding: 20px 16px;
  cursor: pointer; transition: all var(--transition); text-align: left;
  font-family: var(--font-body); display: flex; flex-direction: column; gap: 10px;
}
.spread-card:hover {
  border-color: rgba(192,132,252,0.4);
  background: rgba(192,132,252,0.04);
  transform: translateY(-3px);
}
.spread-card.selected {
  border-color: var(--accent-purple);
  background: rgba(192,132,252,0.1);
  box-shadow: 0 0 0 1px rgba(192,132,252,0.4), 0 8px 24px rgba(192,132,252,0.15);
}
.sc-top { display: flex; flex-direction: column; gap: 2px; }
.sc-name {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  color: var(--text-primary); letter-spacing: 0.5px;
}
.sc-subtitle { font-size: 11px; color: var(--accent-purple); font-weight: 600; letter-spacing: 0.5px; }
.sc-preview {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; min-height: 32px; flex-wrap: wrap;
}
.sp-mini {
  display: inline-block; width: 14px; height: 22px;
  background: rgba(192,132,252,0.2); border: 1px solid rgba(192,132,252,0.4);
  border-radius: 3px; font-size: 0; line-height: 0;
}
.sp-diamond-p, .sp-cross-p { text-align: center; font-size: 11px; color: rgba(192,132,252,0.6); line-height: 1.4; }
.sc-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; flex: 1; }
.sc-footer { display: flex; justify-content: space-between; align-items: center; }
.sc-count { font-size: 11px; color: var(--accent-purple); font-weight: 600; }
.sc-time  { font-size: 10px; color: var(--text-muted); }

/* ── Mood selector ──────────────────────────────────────────── */
.mood-selector {
  display: flex; gap: 10px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap;
}
.mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--card-bg); border: 1px solid var(--card-border);
  cursor: pointer; transition: all var(--transition); font-family: var(--font-body);
  min-width: 72px;
}
.mood-btn:hover { border-color: rgba(192,132,252,0.3); transform: translateY(-2px); }
.mood-btn.selected {
  border-color: var(--accent-purple);
  background: rgba(192,132,252,0.1);
  box-shadow: 0 0 0 1px rgba(192,132,252,0.3);
}
.mood-emoji { font-size: 22px; }
.mood-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; }

/* ── Draw button ────────────────────────────────────────────── */
.draw-center { text-align: center; padding: 8px 0; }
.draw-main-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; width: 240px; height: 68px;
  background: linear-gradient(135deg, #7c3aed, #c084fc);
  border-radius: 34px; border: none; cursor: pointer;
  font-family: var(--font-body);
  box-shadow: 0 4px 24px rgba(192,132,252,0.25);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  opacity: 0.45;
}
.draw-main-btn.active { opacity: 1; }
.draw-main-btn.active:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(192,132,252,0.4); }
.draw-main-btn.active { animation: drawPulse 2.5s ease-in-out infinite; }
.draw-main-btn:disabled { cursor: not-allowed; animation: none; }
@keyframes drawPulse {
  0%,100% { box-shadow: 0 4px 24px rgba(192,132,252,0.25); }
  50%      { box-shadow: 0 4px 40px rgba(192,132,252,0.5); }
}
.draw-glow {
  position: absolute; inset: -2px; border-radius: 36px;
  background: linear-gradient(135deg, #7c3aed, #c084fc, #38bdf8);
  filter: blur(8px); opacity: 0; z-index: -1;
  transition: opacity var(--transition);
}
.draw-main-btn.active:hover .draw-glow { opacity: 0.5; }
.draw-inner {
  display: flex; align-items: center; gap: 10px; position: relative; z-index: 1;
}
.draw-icon  { font-size: 22px; }
.draw-label { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
.draw-hint  { margin-top: 14px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.3px; }

/* ── Shuffle overlay ────────────────────────────────────────── */
.shuffle-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7,11,20,0.96);
  display: flex; align-items: center; justify-content: center;
}
.shuffle-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.shuffle-cards-anim { position: relative; width: 160px; height: 80px; }
.sh-card {
  position: absolute;
  width: 52px; height: 80px;
  background: linear-gradient(145deg,#1a0845,#0d1526);
  border: 1px solid rgba(192,132,252,0.4); border-radius: 6px;
  animation: shShuffle 1.9s ease-in-out infinite;
}
.sh1 { left:0;   animation-delay:0s;    }
.sh2 { left:27px;animation-delay:0.08s; }
.sh3 { left:54px;animation-delay:0.16s; }
.sh4 { left:81px;animation-delay:0.24s; }
.sh5 { left:108px;animation-delay:0.32s; }
@keyframes shShuffle {
  0%,100% { transform:translateY(0) rotate(0deg); opacity:0.6; }
  25%     { transform:translateY(-30px) rotate(-6deg); opacity:1; }
  50%     { transform:translateY(-8px) rotate(3deg); opacity:0.8; }
  75%     { transform:translateY(-20px) rotate(-2deg); opacity:1; }
}
.shuffle-text {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--text-muted); letter-spacing: 1px;
}

/* ── Card stage ─────────────────────────────────────────────── */
.card-stage-section { position: relative; z-index: 1; padding: 24px 0 16px; }
.card-stage {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 20px; flex-wrap: wrap;
  padding: 40px 24px 24px; min-height: 280px;
}
.flip-hint { text-align: center; font-size: 14px; color: var(--text-muted); letter-spacing: 0.5px; padding: 8px 0 24px; }

/* Card slot wrapper */
.card-slot { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ── 3D card flip ───────────────────────────────────────────── */
.card-scene {
  width: 120px; height: 200px;
  perspective: 1000px; cursor: pointer; position: relative;
}
.card-inner {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);
  position: relative;
}
.card-inner.flipped { transform: rotateY(180deg); }

.card-back, .card-face {
  position: absolute; inset: 0; border-radius: 12px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

/* Sacred geometry card back */
.card-back {
  background: linear-gradient(145deg,#1a0845 0%,#0d1526 60%,#0c1a3a 100%);
  border: 1px solid rgba(192,132,252,0.35);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.cbg-geo {
  position: absolute; inset: 0; pointer-events: none;
}
.cbg-geo::before, .cbg-geo::after {
  content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(192,132,252,0.15);
}
.cbg-geo::before { inset: 12px; }
.cbg-geo::after  { inset: 28px; }
/* Additional inner ring via card-back::before */
.card-back::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(192,132,252,0.18); border-radius: 8px; pointer-events: none;
}
/* Cross lines via box-shadow trick */
.card-back::after {
  content: ''; position: absolute;
  width: 1px; height: 80%; top: 10%;
  background: rgba(192,132,252,0.1);
  left: 50%;
  box-shadow: -28px 0 0 rgba(192,132,252,0.07), 28px 0 0 rgba(192,132,252,0.07);
}
.cbg-glyph {
  font-size: 36px; position: relative; z-index: 2;
  color: rgba(192,132,252,0.45);
  text-shadow: 0 0 24px rgba(192,132,252,0.45);
  animation: glyphPulse 3s ease-in-out infinite alternate;
}
@keyframes glyphPulse {
  from { opacity:0.35; text-shadow:0 0 12px rgba(192,132,252,0.3); }
  to   { opacity:0.7;  text-shadow:0 0 36px rgba(192,132,252,0.6); }
}

/* Card face */
.card-face {
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.cfi { /* card face inner */
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 12px 10px 10px;
}
.cf-num {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; color: rgba(255,255,255,0.55);
  align-self: flex-start;
  background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 999px;
  min-height: 16px;
}
.cf-emoji { font-size: 44px; line-height: 1; }
.cf-bottom { width: 100%; text-align: center; }
.cf-suit   { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.45); margin-bottom: 3px; }
.cf-name   { font-family: var(--font-display); font-size: 0.64rem; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1.2; }
.cf-rev    { font-size: 8px; color: rgba(251,113,133,0.8); letter-spacing: 0.5px; margin-top: 3px; }

/* Flip glow effect */
.card-scene.flip-glow .card-inner { filter: drop-shadow(0 0 18px rgba(192,132,252,0.6)); }

/* Card position label */
.card-pos-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-muted); text-align: center;
  max-width: 120px; line-height: 1.3;
}

/* ── Diamond layout (5-card relationship) ─────────────────── */
.diamond-layout { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dl-row { display: flex; gap: 16px; justify-content: center; }

/* ── Celtic Cross layout ───────────────────────────────────── */
.cc-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.cc-cross  { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cc-cross-top, .cc-cross-bot { display: flex; justify-content: center; }
.cc-cross-mid { display: flex; align-items: center; gap: 8px; }
.cc-center { position: relative; width: 120px; height: 200px; }
.cc-crossing {
  position: absolute; inset: 0;
  transform: rotate(90deg);
  transform-origin: center center;
  opacity: 0.85;
}
.cc-staff { display: flex; flex-direction: column; gap: 8px; align-items: center; }

/* ── Layout row (3–4 cards in a row) ────────────────────────── */
.layout-row { gap: 24px; }

/* Present card accent */
.layout-row .card-slot:nth-child(2) .card-scene {
  filter: drop-shadow(0 0 12px rgba(192,132,252,0.2));
  transform: translateY(-12px);
}

/* ── Interpretations ────────────────────────────────────────── */
.interp-section { padding: 24px 0 64px; position: relative; z-index: 1; }

.interp-header { text-align: center; margin-bottom: 44px; padding: 0 24px; }
.interp-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem,4vw,2.4rem);
  font-weight: 700; letter-spacing: 1px; margin-bottom: 10px;
}
.interp-meta     { font-size: 13px; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 8px; }
.interp-disclaimer { font-size: 12px; color: var(--text-muted); opacity: 0.7; }

.interp-card {
  background: var(--card-bg); backdrop-filter: var(--blur-card); -webkit-backdrop-filter: var(--blur-card);
  border: 1px solid var(--card-border); border-radius: var(--radius-card);
  padding: 32px; box-shadow: var(--shadow-card);
  border-left: 4px solid var(--ia, var(--accent-purple));
  margin-bottom: 20px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.interp-card.visible { opacity: 1; transform: translateY(0); }

.ic-header {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px;
}
.ic-emoji-lg { font-size: 44px; line-height: 1; flex-shrink: 0; }
.ic-header-meta { flex: 1; }
.ic-position-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 4px; }
.ic-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.orient-pill {
  display: inline-block; font-size: 11px; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 999px;
}
.orient-up  { background: rgba(52,211,153,0.12); color:#34d399; border:1px solid rgba(52,211,153,0.25); }
.orient-rev { background: rgba(251,113,133,0.12); color:#fb7185; border:1px solid rgba(251,113,133,0.25); }
.ic-arcana-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); padding: 4px 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--card-border);
  border-radius: 999px; white-space: nowrap; align-self: flex-start; flex-shrink: 0;
}

.ic-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ic-kw {
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
}

.ic-interp {
  color: var(--text-muted); font-size: 0.97rem; line-height: 1.8;
  margin-bottom: 22px;
}

.ic-guidance { margin-bottom: 16px; }
.ic-g-title, .ic-w-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent-purple); margin-bottom: 10px;
}
.ic-w-title { color: var(--accent-blue); }
.ic-g-list, .ic-w-list {
  list-style: none; display: flex; flex-direction: column; gap: 8px;
}
.ic-g-list li, .ic-w-list li {
  font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;
  padding-left: 20px; position: relative;
}
.ic-g-list li::before { content: '✦'; position: absolute; left: 0; font-size: 10px; color: var(--accent-purple); top: 3px; }
.ic-w-list li::before { content: '◦'; position: absolute; left: 0; font-size: 13px; color: var(--accent-blue); top: 1px; }

.ic-watch { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }

/* Yes/No card variant */
.yn-card { text-align: center; }
.yn-answer { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 20px; }
.yn-card-row { display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 20px; }
.yn-detail { font-size: 1rem; color: var(--text-muted); line-height: 1.75; max-width: 480px; margin: 0 auto 16px; }

/* ── Reading summary ─────────────────────────────────────────── */
.reading-summary {
  background: linear-gradient(135deg, rgba(192,132,252,0.08), rgba(56,189,248,0.06));
  border: 1px solid rgba(192,132,252,0.2);
  border-radius: var(--radius-card); padding: 36px;
  margin-bottom: 20px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reading-summary.visible { opacity: 1; transform: translateY(0); }
.rs-title {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 12px; letter-spacing: 0.5px;
  text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; color: var(--accent-purple);
}
.rs-text { color: var(--text-muted); font-size: 0.97rem; line-height: 1.8; margin-bottom: 24px; }
.next-steps { background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); padding: 20px; }
.ns-title {
  font-family: var(--font-display); font-size: 1rem; color: var(--accent-gold);
  margin-bottom: 12px; letter-spacing: 0.5px;
}
.ns-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ns-list li {
  font-size: 0.92rem; color: var(--text-muted); line-height: 1.65;
  padding-left: 22px; position: relative;
}
.ns-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent-gold); font-weight: 700; }

/* ── Draw again ──────────────────────────────────────────────── */
.draw-again-wrap { text-align: center; padding: 32px 0 8px; }
.da-label { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; letter-spacing: 0.5px; }
.da-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.da-btn {
  padding: 14px 28px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  font-family: var(--font-body); border: none;
}
.da-btn:hover { transform: translateY(-2px); }
.da-btn--primary {
  background: linear-gradient(135deg, #7c3aed, #c084fc);
  color: #fff; box-shadow: 0 4px 20px rgba(192,132,252,0.3);
}
.da-btn--primary:hover { box-shadow: 0 8px 32px rgba(192,132,252,0.45); }
.da-btn--secondary {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
}

/* ── History ─────────────────────────────────────────────────── */
.history-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.hi-item {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 16px 20px;
}
.hi-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.hi-spread { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-right: 8px; }
.hi-cat    { font-size: 11px; color: var(--accent-purple); background: rgba(192,132,252,0.1); padding: 2px 8px; border-radius: 999px; }
.hi-date   { font-size: 11px; color: var(--text-muted); }
.hi-cards  { display: flex; gap: 8px; flex-wrap: wrap; }
.hi-card   { font-size: 22px; cursor: default; }
.clear-btn {
  padding: 10px 20px; background: rgba(251,113,133,0.1);
  border: 1px solid rgba(251,113,133,0.25); border-radius: var(--radius-sm);
  color: var(--accent-rose); font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); transition: background var(--transition);
}
.clear-btn:hover { background: rgba(251,113,133,0.2); }

/* ── Suits info grid ─────────────────────────────────────────── */
.suits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 48px; }
.suit-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-card); padding: 24px;
  border-left: 3px solid var(--sc, var(--accent-purple));
}
.suit-icon { font-size: 26px; margin-bottom: 10px; display: block; }
.suit-name { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.suit-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.tfaq-wrap { display: flex; flex-direction: column; gap: 10px; }
.tfaq-item { border: 1px solid var(--card-border); border-radius: var(--radius-sm); overflow: hidden; }
.tfaq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; text-align: left;
  color: var(--text-primary); font-size: 0.95rem; font-weight: 500;
  background: var(--card-bg); transition: background var(--transition);
  cursor: pointer; border: none; font-family: var(--font-body);
}
.tfaq-q:hover { background: rgba(255,255,255,0.04); }
.tfaq-chev { font-size: 20px; color: var(--text-muted); transition: transform var(--transition); flex-shrink: 0; }
.tfaq-item.open .tfaq-chev { transform: rotate(45deg); }
.tfaq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  background: rgba(255,255,255,0.02);
}
.tfaq-item.open .tfaq-a { max-height: 600px; }
.tfaq-a p { padding: 16px 22px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.75; }

/* ── Share modal ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(7,11,20,0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-box {
  background: var(--bg-secondary);
  border: 1px solid rgba(192,132,252,0.3); border-radius: var(--radius-card);
  padding: 36px; max-width: 480px; width: 100%;
  position: relative; box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: var(--text-muted);
  font-size: 14px; cursor: pointer; border: none; font-family: var(--font-body);
  transition: background var(--transition); display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: rgba(255,255,255,0.15); }
.modal-title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 20px;
}
.share-card-preview {
  background: linear-gradient(145deg,#0d1526,#1a2542);
  border: 1px solid rgba(192,132,252,0.25); border-radius: 12px;
  padding: 24px; margin-bottom: 20px; text-align: center;
}
.scr-brand   { font-family: var(--font-display); font-size: 11px; color: var(--accent-purple); letter-spacing: 2px; margin-bottom: 6px; }
.scr-type    { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; }
.scr-spread  { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.scr-cat     { font-size: 12px; color: var(--accent-purple); margin-bottom: 16px; }
.scr-cards   { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.scr-row     { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-muted); }
.scr-date    { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.scr-url     { font-size: 10px; color: var(--accent-purple); letter-spacing: 0.5px; }
.modal-actions { display: flex; gap: 10px; margin-bottom: 16px; }
.modal-action-btn {
  flex: 1; padding: 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); border: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.modal-action-btn:hover { transform: translateY(-1px); }
.mab--gold   { background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.3); color: var(--accent-gold); }
.mab--purple { background: rgba(192,132,252,0.15); border: 1px solid rgba(192,132,252,0.3); color: var(--accent-purple); }
.share-textarea {
  width: 100%; min-height: 80px; padding: 12px; resize: vertical;
  background: rgba(255,255,255,0.04); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px;
  font-family: var(--font-body); line-height: 1.5;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .spread-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 860px) {
  .category-grid { grid-template-columns: repeat(2,1fr); }
  .spread-grid   { grid-template-columns: repeat(2,1fr); }
  .suits-grid    { grid-template-columns: repeat(2,1fr); }
  .cc-layout     { flex-direction: column; align-items: center; }
  .cc-staff      { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 600px) {
  .category-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .spread-grid   { grid-template-columns: 1fr 1fr; gap: 8px; }
  .suits-grid    { grid-template-columns: 1fr; }
  .cat-pill      { padding: 10px 12px; }
  .cat-icon      { font-size: 18px; }
  .cat-label     { font-size: 12px; }
  .card-scene    { width: 90px; height: 150px; }
  .cf-emoji      { font-size: 32px; }
  .cbg-glyph     { font-size: 26px; }
  .card-stage    { gap: 12px; padding: 24px 12px; }
  .dl-row        { gap: 10px; }
  .layout-row .card-slot:nth-child(2) .card-scene { transform: none; }
  .step-hdr      { flex-direction: column; gap: 8px; }
  .step-num      { font-size: 2rem; }
  .mood-btn      { padding: 10px 12px; min-width: 58px; }
  .draw-main-btn { width: 200px; height: 58px; }
  .da-btns       { flex-direction: column; align-items: center; }
  .da-btn        { width: 100%; max-width: 260px; }
  .ic-header     { flex-direction: column; gap: 10px; }
  .cc-cross-mid  { gap: 4px; }
}
@media (max-width: 400px) {
  .card-scene { width: 75px; height: 125px; }
  .cf-emoji   { font-size: 26px; }
  .cf-name    { font-size: 0.55rem; }
}

/* ── Moon Phase Banner ──────────────────────────────────────── */
.moon-banner {
  padding: 10px 0 0;
}
.moon-banner-inner {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(192,132,252,0.07); border: 1px solid rgba(192,132,252,0.2);
  border-radius: 999px; padding: 7px 18px;
  font-size: 13px;
}
.moon-phase-icon { font-size: 16px; }
.moon-phase-name { font-weight: 700; color: var(--text-primary); }
.moon-sep        { color: var(--text-muted); }
.moon-tagline    { color: var(--text-muted); }

/* ── Card of the Day ───────────────────────────────────────── */
.cotd-section { padding: 28px 0 8px; }
.cotd-card {
  background: linear-gradient(135deg, rgba(192,132,252,0.07) 0%, rgba(56,189,248,0.05) 100%);
  border: 1px solid rgba(192,132,252,0.22);
  border-radius: var(--radius-card); overflow: hidden;
}
.cotd-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px 12px; border-bottom: 1px solid rgba(192,132,252,0.12);
}
.cotd-title { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; color: var(--accent-purple); text-transform: uppercase; }
.cotd-date  { font-size: 11px; color: var(--text-muted); }
.cotd-body  { display: flex; gap: 20px; align-items: center; padding: 18px 22px; }
.cotd-viz   { flex-shrink: 0; }
.cotd-emoji { font-size: 52px; line-height: 1; display: block; }
.cotd-info  { flex: 1; }
.cotd-name  { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.cotd-arcana-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 8px; }
.cotd-kws   { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.cotd-msg   { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin: 0; }
.cotd-footer { padding: 10px 22px 14px; font-size: 11px; color: var(--text-muted); opacity: 0.7; border-top: 1px solid rgba(192,132,252,0.08); }

/* ── Intention Setting ─────────────────────────────────────── */
.intention-wrap { margin-bottom: 28px; }
.intention-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.intention-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.intention-opt   { font-size: 11px; color: var(--text-muted); background: rgba(255,255,255,0.05); border: 1px solid var(--card-border); border-radius: 999px; padding: 1px 8px; }
.intention-input {
  width: 100%; max-width: 600px; padding: 12px 16px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 0.92rem; font-family: var(--font-body); line-height: 1.5;
  transition: border-color var(--transition);
  display: block; margin: 0 auto;
}
.intention-input:focus { outline: none; border-color: rgba(192,132,252,0.5); }
.intention-input::placeholder { color: var(--text-muted); opacity: 0.6; }

/* ── Reading Intention Display ─────────────────────────────── */
.reading-intention {
  background: rgba(192,132,252,0.06); border: 1px solid rgba(192,132,252,0.18);
  border-radius: var(--radius-sm); padding: 16px 22px; margin-bottom: 20px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reading-intention.visible { opacity: 1; transform: translateY(0); }
.ri-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-purple); display: block; margin-bottom: 5px; }
.ri-text  { font-size: 0.95rem; color: var(--text-primary); font-style: italic; margin: 0; line-height: 1.6; }
.ri-text::before { content: '"'; }
.ri-text::after  { content: '"'; }

/* ── Moon Reading Note (in summary) ───────────────────────── */
.moon-reading-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(192,132,252,0.06); border: 1px solid rgba(192,132,252,0.15);
  border-radius: var(--radius-sm); padding: 14px 18px; margin: 20px 0;
}
.mrn-icon  { font-size: 22px; flex-shrink: 0; line-height: 1.3; }
.mrn-phase { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-purple); display: block; margin-bottom: 4px; }
.mrn-text  { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* ── Favourite Heart Button ────────────────────────────────── */
.fav-btn {
  background: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; font-size: 16px;
  color: var(--text-muted); flex-shrink: 0; align-self: flex-start;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  margin-left: auto;
}
.fav-btn:hover      { color: #fb7185; border-color: rgba(251,113,133,0.35); background: rgba(251,113,133,0.08); }
.fav-btn--active    { color: #fb7185 !important; border-color: rgba(251,113,133,0.45) !important; background: rgba(251,113,133,0.1) !important; }
/* In yn-card, position the button absolutely in top-right */
.yn-card { position: relative; }
.yn-card .fav-btn { position: absolute; top: 16px; right: 16px; }

/* ── Journaling ────────────────────────────────────────────── */
.journal-section {
  background: rgba(255,255,255,0.02); border: 1px solid var(--card-border);
  border-radius: var(--radius-card); padding: 28px 32px; margin-bottom: 20px;
}
.journal-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.journal-icon   { font-size: 26px; line-height: 1; }
.journal-title  { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.journal-sub    { font-size: 11px; color: var(--text-muted); }
.journal-textarea {
  width: 100%; min-height: 120px; padding: 14px 16px; resize: vertical;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 0.92rem; font-family: var(--font-body); line-height: 1.6;
  transition: border-color var(--transition); box-sizing: border-box;
}
.journal-textarea:focus { outline: none; border-color: rgba(192,132,252,0.4); }
.journal-textarea::placeholder { color: var(--text-muted); opacity: 0.55; }
.journal-footer     { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.journal-saved-msg  { font-size: 11px; color: #34d399; }
.journal-count      { font-size: 11px; color: var(--text-muted); }

/* ── Favourites Section ────────────────────────────────────── */
.favorites-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.fav-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  position: relative;
}
.fav-emoji      { font-size: 30px; flex-shrink: 0; }
.fav-info       { flex: 1; min-width: 0; }
.fav-name       { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-arcana-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 2px 0 6px; }
.fav-kws        { display: flex; flex-wrap: wrap; gap: 4px; }
.fav-remove-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 12px; padding: 4px; flex-shrink: 0; line-height: 1;
  transition: color var(--transition);
}
.fav-remove-btn:hover { color: var(--accent-rose); }

/* ── Responsive additions ──────────────────────────────────── */
@media (max-width: 600px) {
  .cotd-body   { gap: 14px; }
  .cotd-emoji  { font-size: 40px; }
  .cotd-name   { font-size: 1.1rem; }
  .cotd-header { padding: 12px 16px 10px; }
  .cotd-body   { padding: 14px 16px; }
  .intention-input { max-width: 100%; }
  .journal-section { padding: 20px; }
  .favorites-grid { grid-template-columns: 1fr 1fr; }
  .moon-banner-inner { font-size: 12px; padding: 6px 14px; }
}