/* ============================================
   HUYỀN BÍ TAROT — MASTER STYLESHEET
   ============================================ */
:root {
  --c-void: #06000f;
  --c-deep: #0b0020;
  --c-dark: #130030;
  --c-mid: #1e0050;
  --c-purple: #6600cc;
  --c-violet: #9b30ff;
  --c-glow: #c879ff;
  --c-pale: #e8b4ff;
  --c-gold: #c9a84c;
  --c-gold-bright: #f0d060;
  --c-gold-pale: #fff3c0;
  --c-white: rgba(255, 255, 255, 0.92);
  --c-muted: rgba(255, 255, 255, 0.50);
  --card-w: 130px;
  --card-h: 220px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
select {
  touch-action: manipulation;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--c-void);
  color: var(--c-white);
  font-family: 'EB Garamond', Georgia, serif;
  position: relative;
}

/* ---- Canvases ---- */
#particleCanvas,
#lightningCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

#particleCanvas {
  z-index: 1;
}

#lightningCanvas {
  z-index: 2;
}

/* ---- Backgrounds ---- */
.bg-nebula {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 15% 10%, rgba(102, 0, 204, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 70% 90% at 85% 90%, rgba(50, 0, 120, 0.50) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(155, 48, 255, 0.10) 0%, transparent 60%);
  animation: nebulaDrift 15s ease-in-out infinite alternate;
}

@keyframes nebulaDrift {
  from {
    opacity: .8;
    transform: scale(1) rotate(0deg);
  }

  to {
    opacity: 1;
    transform: scale(1.06) rotate(1deg);
  }
}

.bg-vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(6, 0, 15, 0.7) 100%);
  pointer-events: none;
}

/* ---- Mystical Fog Layer ---- */
.bg-vignette::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55vh;
  background:
    radial-gradient(ellipse at bottom, rgba(155, 48, 255, 0.15) 0%, transparent 65%),
    linear-gradient(to top, rgba(16, 0, 32, 0.9) 0%, rgba(20, 5, 30, 0.25) 55%, transparent 100%);

  pointer-events: none;
  animation: fogDrift 16s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes fogDrift {
  0% {
    transform: scaleY(1) translateX(-3%);
    opacity: 0.6;
  }

  100% {
    transform: scaleY(1.2) translateX(3%);
    opacity: 1;

  }
}

/* ---- Large faint background sigil ---- */
.bg-sigil-wrap {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bg-sigil-svg {
  width: min(90vw, 90vh);
  height: min(90vw, 90vh);
  animation: bgSigilSpin 80s linear infinite reverse, bgSigilBreath 8s ease-in-out infinite alternate;
  opacity: 0.85;
}

@keyframes bgSigilSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes bgSigilBreath {
  from {
    opacity: 0.8;
    filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.5));
  }

  to {
    opacity: 0.4;
    filter: drop-shadow(0 0 40px rgba(155, 48, 255, 0.6));
  }
}


/* ---- Pages ---- */
.page {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-out);
}

.page--active {
  opacity: 1;
  pointer-events: all;
}

/* ============ FLOATING CARDS LAYER ============ */
.floating-cards-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.float-card {
  position: absolute;
  border-radius: 8px;
  will-change: transform, opacity;
  /* width/height set by JS from real image ratio — no overflow:hidden to avoid clipping */
}

.float-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 4px;
}

/* float-card image handled via img element in JS */

/* ============ LANDING PAGE ============ */
.landing-center {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 40px 20px;
  user-select: none;
  -webkit-user-select: none;
  animation: centerFloat 10s ease-in-out infinite alternate;
}

@keyframes centerFloat {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-12px);
  }
}

/* Sigil */
.sigil-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.sigil-svg {
  width: 100%;
  height: 100%;
  animation: sigilSpin 20s linear infinite;
  filter: drop-shadow(0 0 12px rgba(155, 48, 255, 0.6));
}

@keyframes sigilSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.sigil-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 48, 255, 0.4) 0%, rgba(200, 120, 255, 0.1) 40%, transparent 75%);
  animation: sigilBreath 3.5s ease-in-out infinite alternate;
}

@keyframes sigilBreath {

  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.7;
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(155, 48, 255, 0.6));
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
    filter: brightness(1.8) drop-shadow(0 0 50px rgba(220, 150, 255, 1));
  }
}

/* Title */
.landing-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(2rem, 6vw, 3.8rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  filter: drop-shadow(0 0 30px rgba(200, 121, 255, 0.7));
  animation: titleBreathe 6s ease-in-out infinite alternate;
}

@keyframes titleBreathe {
  0% {
    transform: scale(0.99);
    filter: drop-shadow(0 0 20px rgba(200, 121, 255, 0.5));
  }

  100% {
    transform: scale(1.02);
    filter: drop-shadow(0 0 45px rgba(220, 150, 255, 1));
  }
}

.landing-subtitle {
  font-family: 'Philosopher', serif;
  font-size: clamp(0.75rem, 1.8vw, 0.95rem);
  color: var(--c-pale);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* History button on landing */
.btn-history {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 0, 30, 0.5);
  border: 1px solid rgba(155, 48, 255, 0.25);
  border-radius: 30px;
  padding: 9px 22px;
  font-family: 'Philosopher', serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(232, 180, 255, 0.55);
  cursor: pointer;
  transition: all 0.35s var(--ease-out);
}

.btn-history:hover {
  border-color: rgba(155, 48, 255, 0.5);
  color: var(--c-pale);
  background: rgba(107, 0, 204, 0.2);
  box-shadow: 0 4px 18px rgba(107, 0, 204, 0.25);
}

.btn-history svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════
   HISTORY PANEL (slide-out from right)
══════════════════════════════════════════════ */
.history-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 0, 14, 0.6);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.history-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  width: min(560px, 96vw);
  background: linear-gradient(160deg, rgba(14, 0, 36, 0.8), rgba(8, 0, 22, 95));
  border-left: 1px solid rgba(155, 48, 255, 0.3);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(107, 0, 204, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

/* ── Floating history button (analysis page) ─────── */
.btn-history-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(14, 0, 36, 0.85);
  border: 1px solid rgba(155, 48, 255, 0.45);
  border-radius: 50px;
  color: rgba(232, 180, 255, 0.85);
  font-family: 'Philosopher', serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: pointer;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(107, 0, 204, 0.2);
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

#pageAnalysis.page--active~.btn-history-float {
  opacity: 1;
  pointer-events: all;
}

.btn-history-float:hover {
  background: rgba(107, 0, 204, 0.35);
  border-color: rgba(201, 168, 76, 0.6);
  color: var(--c-gold);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(201, 168, 76, 0.2);
  transform: translateY(-2px);
}


.history-panel.open {
  transform: translateX(0);
}

.history-panel.open~.history-overlay,
.history-overlay:has(+ .history-panel.open) {
  opacity: 1;
  pointer-events: all;
}

/* Panel open companion overlay */


.history-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 24px 18px;
  border-bottom: 1px solid rgba(155, 48, 255, 0.15);
  flex-shrink: 0;
}

.history-panel__title {
  font-family: 'Philosopher', serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--c-gold-bright);
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4);
}

.history-panel__sub {
  font-family: 'EB Garamond', serif;
  font-size: 0.82rem;
  color: rgba(232, 180, 255, 0.4);
  margin-top: 4px;
}

.history-close-btn {
  background: none;
  border: none;
  color: rgba(232, 180, 255, 0.35);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.3s, transform 0.3s;
}

.history-close-btn:hover {
  color: var(--c-gold);
  transform: scale(1.1);
  text-shadow: 0 0 10px var(--c-gold);
}

.history-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Empty state */
/* ── History delete confirmation modal ───────────── */
.hist-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);

  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hist-confirm-overlay.visible {
  opacity: 1;
}

.hist-confirm-box {
  background: linear-gradient(160deg, rgba(20, 0, 48, 0.98), rgba(10, 0, 28, 0.99));
  border: 1px solid rgba(155, 48, 255, 0.45);
  border-radius: 20px;
  padding: 36px 32px;
  max-width: 420px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(107, 0, 204, 0.2);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hist-confirm-overlay.visible .hist-confirm-box {
  transform: scale(1);
}

.hist-confirm-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.hist-confirm-title {
  font-family: 'Philosopher', serif;
  font-size: 1.1rem;
  color: rgba(232, 180, 255, 0.95);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.hist-confirm-meta {
  font-size: 0.78rem;
  color: rgba(201, 168, 76, 0.7);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.hist-confirm-q {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(232, 180, 255, 0.6);
  margin-bottom: 24px;
  line-height: 1.5;
}

.hist-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.hist-confirm-btn {
  flex: 1 1 auto;
  padding: 11px 0;
  border-radius: 50px;
  font-family: 'Philosopher', serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.25s ease;
}

.hist-confirm-btn--cancel {
  background: transparent;
  border: 1px solid rgba(155, 48, 255, 0.35);
  color: rgba(232, 180, 255, 0.7);
}

.hist-confirm-btn--cancel:hover {
  border-color: rgba(155, 48, 255, 0.7);
  color: rgba(232, 180, 255, 1);
}

.hist-confirm-btn--delete {
  background: linear-gradient(135deg, rgba(180, 30, 80, 0.8), rgba(220, 50, 50, 0.7));
  border: 1px solid rgba(220, 80, 80, 0.5);
  color: #fff;
}

.hist-confirm-btn--delete:hover {
  background: linear-gradient(135deg, rgba(200, 40, 90, 0.95), rgba(240, 60, 60, 0.9));
  box-shadow: 0 0 20px rgba(220, 50, 50, 0.4);
  transform: translateY(-1px);
}

.hist-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(232, 180, 255, 0.35);
}

.hist-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  color: rgba(155, 48, 255, 0.3);
  animation: sigilBreath 3s ease-in-out infinite alternate;
}

.hist-empty p {
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
}

.hist-empty-sub {
  font-size: 0.85rem;
  margin-top: 6px;
  opacity: 0.7;
  font-style: italic;
}

/* ============ FOCUS SCREEN ============ */
.focus-screen {
  position: fixed;
  inset: 0;
  background: rgba(15, 0, 35, 0.9);


  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;
  padding: 30px;
  text-align: center;
}

.focus-screen.active {
  opacity: 1;
  pointer-events: all;
}

.focus-text {
  font-family: 'Philosopher', serif;
  font-size: 1.15rem;
  color: var(--c-pale);
  max-width: 650px;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1.5s ease-out 0.8s, transform 1.5s ease-out 0.8s;
}

.focus-screen.active .focus-text {
  opacity: 1;
  transform: translateY(0);
}

/* Entry card */
.hist-entry {
  background: rgba(10, 0, 30, 0.7);
  border: 1px solid rgba(155, 48, 255, 0.18);
  border-radius: 16px;
  padding: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.hist-entry:hover {
  border-color: rgba(155, 48, 255, 0.4);
  box-shadow: 0 4px 20px rgba(107, 0, 204, 0.2);
}

.hist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.hist-meta {
  display: flex;
  gap: 8px;
}

.hist-theme {
  background: rgba(155, 48, 255, 0.2);
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 20px;
  padding: 3px 11px;
  font-family: 'Philosopher', serif;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--c-pale);
}

.hist-spread {
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 20px;
  padding: 3px 10px;
  font-family: 'Philosopher', serif;
  font-size: 0.62rem;
  color: var(--c-gold);
}

.hist-date {
  font-family: 'EB Garamond', serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.25);
}

.hist-name {
  font-family: 'Philosopher', serif;
  font-size: 0.78rem;
  color: var(--c-gold-bright);
  margin-bottom: 4px;
}

.hist-question {
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  color: rgba(232, 180, 255, 0.7);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hist-thumbs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.hist-thumb {
  width: 38px;
  height: 65px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(155, 48, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hist-thumb--rev {
  transform: rotate(180deg);
}

.hist-actions {
  display: flex;
  gap: 8px;
}

.hist-btn-replay,
.hist-btn-del {
  border-radius: 20px;
  padding: 6px 16px;
  font-family: 'Philosopher', serif;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.hist-btn-replay {
  background: rgba(107, 0, 204, 0.3);
  border: 1px solid rgba(155, 48, 255, 0.4);
  color: var(--c-pale);
  flex: 1 1 auto;
}

.hist-btn-replay:hover {
  background: rgba(107, 0, 204, 0.5);
  border-color: var(--c-glow);
  box-shadow: 0 4px 14px rgba(155, 48, 255, 0.3);
}

.hist-btn-del {
  background: transparent;
  border: 1px solid rgba(255, 80, 80, 0.2);
  color: rgba(255, 120, 120, 0.5);
}

.hist-btn-del:hover {
  background: rgba(255, 50, 50, 0.1);
  border-color: rgba(255, 80, 80, 0.5);
  color: rgba(255, 140, 140, 0.9);
}


.landing-rune-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0;
}

.rune {
  font-size: 1.15rem;
  color: rgba(201, 168, 76, 0.7);
  animation: runePulse 2.5s ease-in-out infinite alternate;
  text-shadow: 0 0 5px rgba(201, 168, 76, 0.3);
}

.rune:nth-child(3) {
  animation-delay: 0.8s;
}

.rune:nth-child(5) {
  animation-delay: 1.6s;
}

.rune:nth-child(7) {
  animation-delay: 2.4s;
}

@keyframes runePulse {
  from {
    color: rgba(201, 168, 76, 0.5);
    text-shadow: 0 0 5px rgba(201, 168, 76, 0.2);
  }

  to {
    color: #ffeba1;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 25px rgba(255, 215, 0, 0.5);
  }
}

.rune-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(180, 100, 255, 0.8);
  box-shadow: 0 0 8px rgba(155, 48, 255, 0.6);
  animation: dotPulse 2.5s ease-in-out infinite alternate;
}

@keyframes dotPulse {
  from {
    background: rgba(155, 48, 255, 0.6);
    box-shadow: 0 0 5px rgba(155, 48, 255, 0.4);
  }

  to {
    background: #dfa6ff;
    box-shadow: 0 0 12px #9b30ff, 0 0 20px rgba(155, 48, 255, 0.8);
  }
}

/* Begin button */
.btn-begin {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1px solid rgba(155, 48, 255, 0.5);
  border-radius: 60px;
  padding: 18px 48px;
  cursor: pointer;
  overflow: hidden;
  margin-top: 10px;
  animation: btnBreath 3.5s ease-in-out infinite;
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s, animation 0s;
}

.btn-begin:hover {
  animation-play-state: paused;
  border-color: var(--c-glow);
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 52px rgba(155, 48, 255, 0.9),
    0 0 100px rgba(107, 0, 204, 0.55),
    0 0 140px rgba(201, 168, 76, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.4);
}

.btn-begin:active {
  transform: translateY(0) scale(0.98);
}

/* ── Unified breath: shadow + border + ring all in sync ── */
@keyframes btnBreath {

  0%,
  100% {
    border-color: rgba(155, 48, 255, 0.6);
    box-shadow:
      0 0 20px rgba(155, 48, 255, 0.4),
      0 0 40px rgba(107, 0, 204, 0.2);
  }

  50% {
    border-color: rgba(220, 150, 255, 1);
    box-shadow:
      0 0 50px rgba(155, 48, 255, 0.85),
      0 0 100px rgba(107, 0, 204, 0.50),
      0 0 140px rgba(201, 168, 76, 0.2),
      0 12px 40px rgba(0, 0, 0, 0.4);
  }
}

.btn-begin__aura {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(107, 0, 204, 0.6), rgba(155, 48, 255, 0.3));
  animation: breatheAura 3.5s ease-in-out infinite;
  transition: opacity 0.4s;
}

@keyframes breatheAura {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

.btn-begin:hover .btn-begin__aura {
  opacity: 1;
}

.btn-begin__ring {
  position: absolute;
  inset: -1px;
  border-radius: 60px;
  background: linear-gradient(135deg, rgba(200, 121, 255, 0.4), rgba(201, 168, 76, 0.3), rgba(200, 121, 255, 0.4));
  animation: breatheRing 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes breatheRing {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 0.7;
  }
}

.btn-begin:hover .btn-begin__ring {
  animation: none;
  opacity: 1;
}

.btn-begin__text {
  position: relative;
  z-index: 1;
  font-family: 'Philosopher', serif;
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--c-gold-pale) !important;
}

.btn-begin__arrow {
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
  color: var(--c-glow);
  transition: transform 0.3s var(--ease-out);
}

.btn-begin:hover .btn-begin__arrow {
  transform: translateX(5px);
}

/* Auto Glow Pulse when ready */
@keyframes btnAutoGlowPulse {
  0% {
    box-shadow: 0 0 15px rgba(200, 121, 255, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 35px rgba(200, 121, 255, 1), 0 0 15px rgba(201, 168, 76, 0.6);
    transform: scale(1.04);
  }

  100% {
    box-shadow: 0 0 15px rgba(200, 121, 255, 0.4);
    transform: scale(1);
  }
}

.btn-begin.auto-glow {
  animation: btnAutoGlowPulse 2s infinite ease-in-out;
  border-color: rgba(200, 121, 255, 0.8) !important;
  background: rgba(40, 10, 60, 0.95);
  z-index: 100;
}

.btn-begin.auto-glow .btn-begin__aura {
  opacity: 1;
  background: radial-gradient(circle, rgba(200, 121, 255, 0.45) 0%, transparent 60%);
}

.btn-begin.auto-glow .btn-begin__arrow {
  animation: arrowBounce 0.8s infinite alternate ease-in-out;
  color: var(--c-gold-pale);
}

@keyframes arrowBounce {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(6px);
  }
}

.landing-hint {
  font-family: 'EB Garamond', serif;
  font-size: 0.85rem;
  color: rgba(232, 180, 255, 0.8);
  letter-spacing: 0.08em;
  font-style: italic;
  animation: hintFade 4s ease-in-out infinite alternate;
}

@keyframes hintFade {
  from {
    opacity: 0.3;
  }

  to {
    opacity: 0.7;
  }
}

/* ============ FORM OVERLAY ============ */
.form-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 0, 15, 0.2);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

.form-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.form-panel {
  width: 100%;
  max-width: 780px;
  background: linear-gradient(160deg, rgba(16, 0, 40, 0.75), rgba(8, 0, 22, 0.85));

  border: 1px solid rgba(155, 48, 255, 0.35);
  border-radius: 28px;
  padding: 56px 56px 48px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(155, 48, 255, 0.18), 0 0 60px rgba(107, 0, 204, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.form-panel::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari/Opera */
}

/* Progress bar */
.form-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(155, 48, 255, 0.15);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}

.form-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-purple), var(--c-violet), var(--c-glow));
  width: 25%;
  transition: width 0.6s var(--ease-out);
  box-shadow: 0 0 10px rgba(155, 48, 255, 0.7);
}

/* Step indicator */
.form-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 36px;
  pointer-events: none;
}

.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(155, 48, 255, 0.2);
  border: 1px solid rgba(155, 48, 255, 0.3);
  transition: all 0.4s var(--ease-out);
  cursor: default;
}

.step-dot.active {
  background: var(--c-violet);
  box-shadow: 0 0 12px rgba(155, 48, 255, 0.8);
  transform: scale(1.3);
  border-color: var(--c-glow);
}

.step-dot.done {
  background: rgba(201, 168, 76, 0.6);
  border-color: var(--c-gold);
}

.step-line {
  width: 60px;
  height: 1px;
  background: rgba(155, 48, 255, 0.2);
  flex-shrink: 0;
}

/* Close btn */
.form-close {
  position: absolute;
  top: 8px;
  /* Added 10px padding, so subtract from position */
  right: 12px;
  padding: 10px;
  background: none;
  border: none;
  color: rgba(232, 180, 255, 0.4);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s, text-shadow 0.3s;
}

.form-close:hover {
  color: var(--c-gold-bright);
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.8);
}

/* Form steps */
.form-step {
  display: none;
  animation: stepIn 0.5s var(--ease-out) forwards;
}

.form-step.active {
  display: block;
}

@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes stepOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

.step-header {
  margin-bottom: 32px;
}

.step-number {
  font-family: 'Philosopher', serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--c-gold);
  display: block;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4);
}

.step-title {
  /* font-family: 'Cinzel Decorative', serif; */
  font-size: clamp(1.4rem, 3.5vw, 2.1rem);
  font-weight: 700;
  background: linear-gradient(90deg, #fff8d6, var(--c-gold-pale), var(--c-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px rgba(200, 121, 255, 0.3));
}

.step-desc {
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  color: rgba(232, 180, 255, 0.75);
  font-style: italic;
  line-height: 1.6;
}

/* Mystical input */
.field-wrap {
  position: relative;
  margin-bottom: 28px;
}

.mystical-input {
  width: 100%;
  background: rgba(10, 0, 24, 0.75);
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 12px;
  padding: 22px 18px 8px;
  color: #fff;
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  outline: none;
  transition: border-color 0.4s, box-shadow 0.4s;
}

.mystical-input:focus {
  border-color: var(--c-glow);
  box-shadow: 0 0 15px rgba(155, 48, 255, 0.5), inset 0 0 15px rgba(201, 168, 76, 0.2);
}

.mystical-label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Philosopher', serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(232, 180, 255, 0.65);
  pointer-events: none;
  transition: all 0.3s var(--ease-out);
}

.mystical-input:focus~.mystical-label,
.mystical-input:not(:placeholder-shown)~.mystical-label {
  top: 10px;
  transform: none;
  font-size: 0.62rem;
  color: var(--c-gold);
  letter-spacing: 0.12em;
}

.mystical-textarea {
  padding-top: 24px;
  resize: none;
}

.textarea-wrap .mystical-label {
  top: 22px;
  transform: none;
}

.mystical-input[type="date"]~.mystical-label {
  top: 10px;
  transform: none;
  font-size: 0.62rem;
  color: var(--c-gold);
  letter-spacing: 0.12em;
}

.mystical-textarea:focus~.mystical-label,
.mystical-textarea:not(:placeholder-shown)~.mystical-label {
  top: 8px;
  transform: none;
  font-size: 0.62rem;
  color: var(--c-gold);
}

.input-glow-bar {
  position: absolute;
  bottom: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-purple), var(--c-violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.mystical-input:focus~.input-glow-bar {
  transform: scaleX(1);
}

.char-count {
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
  font-family: 'Philosopher', serif;
  letter-spacing: 0.06em;
}

/* ── 5 Main theme cards grid ───────────────────── */
.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  background: rgba(10, 0, 30, 0.7);
  border: 1px solid rgba(155, 48, 255, 0.22);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.32s var(--ease-out);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.theme-card:hover {
  border-color: rgba(155, 48, 255, 0.5);
  background: rgba(107, 0, 204, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(107, 0, 204, 0.25);
}

.theme-card.selected {
  border-color: var(--c-glow);
  background: rgba(107, 0, 204, 0.3);
  box-shadow: 0 0 20px rgba(155, 48, 255, 0.35), inset 0 0 14px rgba(155, 48, 255, 0.08);
}

.theme-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.32s;
}

.theme-card:hover .theme-icon-wrap {
  background: rgba(201, 168, 76, 0.22);
  border-color: rgba(240, 208, 96, 0.6);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.4);
}

.theme-card.selected .theme-icon-wrap {
  background: rgba(155, 48, 255, 0.35);
  border-color: var(--c-glow);
  box-shadow: 0 0 18px rgba(155, 48, 255, 0.6);
}

.theme-icon {
  font-size: 1.1rem;
  color: var(--c-gold-bright);
  transition: color 0.3s;
}

.theme-card:hover .theme-icon {
  color: var(--c-gold-pale);
}

.theme-card.selected .theme-icon {
  color: #fff;
}

.theme-name {
  font-family: 'Philosopher', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--c-gold-bright);
}

.theme-card.selected .theme-name {
  color: var(--c-gold-pale);
}

.theme-desc {
  font-family: 'EB Garamond', serif;
  font-size: 0.78rem;
  color: rgba(232, 180, 255, 0.7);
  font-style: italic;
  line-height: 1.3;
}

/* Skip / Bỏ Qua button */
.btn-skip-theme {
  background: transparent;
  border: 1px solid rgba(155, 48, 255, 0.22);
  border-radius: 30px;
  padding: 10px 22px;
  font-family: 'Philosopher', serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(232, 180, 255, 0.45);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.btn-skip-theme:hover {
  border-color: rgba(155, 48, 255, 0.4);
  color: rgba(232, 180, 255, 0.75);
  background: rgba(107, 0, 204, 0.08);
}

/* Sub-theme drill-down panel */
.sub-theme-panel {
  display: flex;
  flex-direction: column;
  animation: subtFadeIn 0.3s var(--ease-out) both;
  overflow: hidden;
}

@keyframes subtFadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sub-back {
  margin-bottom: 10px;
}

.sub-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: 'Philosopher', serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--c-gold);
  cursor: pointer;
  padding: 4px 0;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.sub-back-btn:hover {
  opacity: 1;
}

.sub-theme-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 48, 255, 0.3) transparent;
  padding-right: 4px;
}

/* Fix overflow: all sub-theme items must stay within container */
.sub-theme-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: rgba(10, 0, 30, 0.6);
  border: 1px solid rgba(155, 48, 255, 0.18);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}

.sub-theme-item:hover {
  border-color: rgba(155, 48, 255, 0.45);
  background: rgba(107, 0, 204, 0.18);
  /* NO translateX — prevents overflow */
}

.sub-theme-item.chosen {
  border-color: var(--c-glow);
  background: rgba(107, 0, 204, 0.28);
  box-shadow: inset 0 0 12px rgba(155, 48, 255, 0.12);
}

.sti-label {
  font-family: 'Philosopher', serif;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  color: var(--c-gold-bright);
  flex: 0 0 auto;
  white-space: nowrap;
}

.sub-theme-item.chosen .sti-label {
  color: var(--c-gold-pale);
}

.sti-desc {
  font-family: 'EB Garamond', serif;
  font-size: 0.82rem;
  color: rgba(232, 180, 255, 0.6);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  margin-left: 8px;
}

.sti-arrow {
  display: flex;
  align-items: center;
  color: rgba(155, 48, 255, 0.4);
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
  opacity: 0.7;
}

.sti-arrow svg {
  pointer-events: none;
}

.sub-theme-item:hover .sti-arrow {
  color: var(--c-glow);
  opacity: 1;
  transform: translateX(2px);
}


#step4.active {
  display: flex !important;
  flex-direction: column;
}

#step4 .step-header {
  order: 1;
}

#spreadDescriptionBox {
  order: 2;
  margin-top: 0;
  margin-bottom: 20px;
}

.spread-options {
  order: 3;
  margin-bottom: 20px;
}

#step4 .step-nav {
  order: 4;
}

.spread-options {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 30px;
  align-items: stretch;
}

/* Row 1: 1, 3, 5 — each takes 2 of 6 cols */
.spread-options .spread-card-opt:nth-child(-n+3) {
  grid-column: span 2;
}

/* Row 2: 7, 10 — each takes 3 of 6 cols */
.spread-options .spread-card-opt:nth-child(4),
.spread-options .spread-card-opt:nth-child(5) {
  grid-column: span 3;
}

.spread-options .spread-card-opt:nth-child(6) {
  grid-column: span 6;
}

.spread-card-opt {
  display: flex;
}

.spread-card-opt input[type="radio"] {
  display: none;
}

.spread-card-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  background: rgba(10, 0, 30, 0.6);
  border: 1px solid rgba(155, 48, 255, 0.18);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.35s var(--ease-out);
  text-align: center;
  flex: 1 1 auto;
}

.spread-card-opt input:checked+.spread-card-ui {
  border-color: var(--c-glow);
  background: rgba(107, 0, 204, 0.3);
  box-shadow: 0 0 20px rgba(155, 48, 255, 0.35);
}

.spread-card-ui:hover {
  border-color: rgba(155, 48, 255, 0.5);
  transform: translateY(-2px);
}

.spread-card-ui strong {
  font-family: 'Philosopher', serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--c-gold-bright);
  text-shadow: 0 0 6px rgba(240, 208, 96, 0.3);
}

.spread-card-opt input:checked+.spread-card-ui strong {
  color: var(--c-gold-pale);
}

.spread-card-ui span {
  font-family: 'EB Garamond', serif;
  font-size: 0.8rem;
  color: rgba(232, 180, 255, 0.75);
  font-style: italic;
  line-height: 1.3;
}

.spread-visual {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 44px;
  justify-content: center;
}

.mini-card {
  width: 14px;
  height: 24px;
  border-radius: 2px;
  background: linear-gradient(160deg, rgba(107, 0, 204, 0.7), rgba(155, 48, 255, 0.4));
  border: 1px solid rgba(201, 168, 76, 0.4);
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.2);
}

.mc-center {
  width: 16px;
  height: 28px;
}

/* 7-card and 10-card and 12-card use smaller mini-cards to fit visual */
.spread-vis-7 .mini-card,
.spread-vis-10 .mini-card,
.spread-vis-12 .mini-card {
  width: 10px;
  height: 18px;
}

.spread-vis-7 .mc-center,
.spread-vis-10 .mc-center {
  width: 12px;
  height: 22px;
}

/* Spread detail description box */
.spread-description-box {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: rgba(30, 0, 60, 0.4);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 12px;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: 1.0rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--c-gold-pale);
  transition: opacity 0.3s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Q-mode tabs */
.q-mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.q-tab {
  flex: 1 1 auto;
  text-align: center;
  background: transparent;
  border: 1px solid rgba(155, 48, 255, 0.25);
  border-radius: 30px;
  padding: 10px 16px;
  font-family: 'Philosopher', serif;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  color: rgba(232, 180, 255, 0.55);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.q-tab:hover {
  border-color: rgba(155, 48, 255, 0.5);
  color: var(--c-pale);
}

.q-tab.active {
  background: rgba(107, 0, 204, 0.35);
  border-color: var(--c-glow);
  color: var(--c-gold-bright);
  box-shadow: 0 0 12px rgba(155, 48, 255, 0.3);
}

/* Preset question grid */
.preset-q-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

.preset-q-btn {
  background: rgba(10, 0, 30, 0.55);
  border: 1px solid rgba(155, 48, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'EB Garamond', serif;
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(232, 180, 255, 0.82);
  cursor: pointer;
  text-align: left;
  transition: all 0.3s var(--ease-out);
}

.preset-q-btn:hover {
  border-color: rgba(155, 48, 255, 0.5);
  background: rgba(107, 0, 204, 0.2);
  color: var(--c-pale);
  transform: translateX(4px);
}

.preset-q-btn.chosen {
  border-color: var(--c-gold);
  background: rgba(107, 0, 204, 0.25);
  color: var(--c-gold-bright);
}

/* Grouped preset questions */
.preset-q-group {
  margin-bottom: 10px;
}

.preset-q-group-header {
  font-family: 'Philosopher', serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  padding: 5px 4px 5px 12px;
  border-left: 2px solid rgba(201, 168, 76, 0.5);
  margin-bottom: 6px;
  opacity: 0.75;
  text-transform: uppercase;
}

.hidden {
  display: none !important;
}


.step-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.btn-prev,
.btn-next {
  background: transparent;
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 50px;
  padding: 11px 24px;
  cursor: pointer;
  font-family: 'Philosopher', serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--c-pale);
  transition: all 0.35s var(--ease-out);
}

.btn-prev:hover {
  border-color: rgba(155, 48, 255, 0.5);
  background: rgba(155, 48, 255, 0.08);
}

.btn-next {
  background: linear-gradient(135deg, rgba(107, 0, 204, 0.7), rgba(155, 48, 255, 0.5));
  border-color: rgba(155, 48, 255, 0.5);
  color: var(--c-gold-pale);
}

.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(155, 48, 255, 0.4);
  border-color: var(--c-glow);
}

.nav-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

.btn-next:hover .nav-arrow {
  transform: translateX(4px);
}

/* Begin reading button */
.btn-begin-reading {
  position: relative;
  flex: 1 1 auto;
  background: linear-gradient(135deg, rgba(107, 0, 204, 0.8), rgba(155, 48, 255, 0.6));
  border: 1px solid rgba(200, 121, 255, 0.5);
  border-radius: 50px;
  padding: 14px 32px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s var(--ease-out);
  animation: btnReadBreath 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes btnReadBreath {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(155, 48, 255, 0.4);
    border-color: rgba(200, 121, 255, 0.5);
  }

  100% {
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(200, 121, 255, 0.8), 0 0 15px rgba(201, 168, 76, 0.3);
    border-color: rgba(201, 168, 76, 0.7);
  }
}

.btn-begin-reading:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 40px rgba(200, 121, 255, 0.9), 0 0 30px rgba(201, 168, 76, 0.5);
  border-color: var(--c-gold-bright);
}

.btn-begin-reading__aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse, rgba(200, 121, 255, 0.25) 0%, transparent 70%);
  animation: auraBreath 2.5s ease-in-out infinite alternate;
}

@keyframes auraBreath {
  from {
    opacity: .5;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: scale(1.1);
  }
}

.btn-begin-reading__text {
  position: relative;
  z-index: 1;
  font-family: 'Philosopher', serif;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  color: var(--c-gold-pale);
}

/* ============ READING PAGE ============ */
#pageReading {
  justify-content: flex-start;
  padding-top: 48px;
  gap: 8px;
}

.reading-header {
  text-align: center;
}

.reading-user-info {
  font-family: 'Philosopher', serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--c-gold);
  margin-bottom: 6px;
}

.reading-question {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--c-pale);
  max-width: 600px;
  line-height: 1.7;
}

.reading-instruction {
  font-family: 'Philosopher', serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--c-glow);
  opacity: 0.8;
  animation: instrPulse 2.5s ease-in-out infinite;
}

@keyframes instrPulse {

  0%,
  100% {
    opacity: .6;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 14px var(--c-glow);
  }
}

/* Deck area */
.deck-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 10px;
  max-width: 920px;
  width: 100%;
  perspective: 1200px;
}

/* Selected area — spaced from deck above */
.selected-area {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  padding: 0 16px;
  margin-top: 24px;
}

/* Tarot card */
.tarot-card {
  width: var(--card-w);
  height: var(--card-h);
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: transform 0.4s var(--ease-out);
  flex-shrink: 0;
}

.tarot-card:hover:not(.is-selected) {
  transform: translateY(-16px) scale(1.05) rotateY(-4deg);
  z-index: 10;
}

.tarot-card.is-selected {
  cursor: default;
  pointer-events: none;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 800px;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-out);
}

/* Flip animation — use a longer transition only during flip */
.tarot-card.flipping .card-inner {
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.tarot-card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* Hover on FLIPPED cards: combine the flip with the lift/tilt by applying to .card-inner */
.tarot-card.spread-card.flipped:hover .card-inner {
  transform: rotateY(180deg) translateZ(20px) scale(1.03);
  transition: transform 0.4s var(--ease-out);
}

.tarot-card.spread-card.flipped {
  cursor: pointer;

}

.tarot-card.spread-card.flipped:hover {
  transform: translateY(-14px) !important;
  z-index: 10;
}

.card-face,
.card-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(155, 48, 255, 0.3);
  transition: border-color 0.4s, box-shadow 0.4s, filter 0.4s, transform 0.4s;
  overflow: visible;
}

.card-back {
  background: linear-gradient(150deg, #0d0025, #1a0040, #0d0025);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(107, 0, 204, 0.35);
}

.card-back::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 7px;
}

.card-back-symbol {
  font-size: 2rem;
  color: rgba(155, 48, 255, 0.5);
  animation: backGlow 3s ease-in-out infinite alternate;
}

@keyframes backGlow {
  from {
    color: rgba(155, 48, 255, 0.3);

  }

  to {
    color: rgba(200, 121, 255, 0.9);
    filter: drop-shadow(0 0 8px rgba(155, 48, 255, 0.8));
  }
}

.card-face {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
}

.card-face img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 11px;
  display: block;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}

.card-face.card-reversed img {
  transform: rotate(180deg);
  border-radius: 0 0 11px 11px;
}

.card-caption {
  padding: 7px 8px 8px;
  background: linear-gradient(180deg, rgba(8, 0, 20, 0.92), rgba(16, 0, 40, 1));
  border-top: 1px solid rgba(155, 48, 255, 0.2);
  text-align: center;
  flex-shrink: 0;
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}

.card-caption-name {
  display: block;
  font-family: 'Philosopher', serif;
  font-size: 0.6rem;
  color: var(--c-gold-bright);
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.card-caption-en {
  display: block;
  font-family: 'EB Garamond', serif;
  font-size: 0.56rem;
  color: var(--c-pale);
  opacity: 0.6;
}

.card-orientation {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  font-size: 0.78rem;
  padding: 3px 12px;
  border-radius: 20px;
  font-family: 'Philosopher', serif;
  font-weight: bold;
  letter-spacing: 0.05em;
  transition: all 0.3s;
}

.card-orientation.up {
  background: rgba(107, 0, 204, 0.25);
  border: 1px solid rgba(155, 48, 255, 0.45);
  color: var(--c-pale);
  box-shadow: 0 0 10px rgba(107, 0, 204, 0.2);
}

.card-orientation.rev {
  background: rgba(180, 60, 30, 0.2);
  border: 1px solid rgba(255, 176, 144, 0.45);
  color: #ffb090;
  box-shadow: 0 0 10px rgba(255, 176, 144, 0.15);
}

/* Hover aura */
.tilt-wrapper {
  position: relative;
  overflow: visible !important;
}

.tarot-card:hover:not(.is-selected) .card-back {
  box-shadow: 0 0 28px 2px rgba(155, 48, 255, 0.7), 0 0 60px 4px rgba(155, 48, 255, 0.2);
}

/* Flipped card hover aura same as face-down */
.tarot-card.spread-card.flipped:hover .card-face {
  box-shadow: 0 0 28px 2px rgba(155, 48, 255, 0.7), 0 0 60px 4px rgba(155, 48, 255, 0.2);
}

/* All Cards Flipped Constant Glow */
@keyframes allFlippedConstantGlow {

  0%,
  100% {
    box-shadow: 0 0 15px 1px rgba(155, 48, 255, 0.3), 0 0 35px 2px rgba(107, 0, 204, 0.1);
  }

  50% {
    box-shadow: 0 0 30px 2px rgba(180, 100, 255, 0.5), 0 0 60px 4px rgba(155, 48, 255, 0.3);
  }
}

.selected-area.all-flipped .tarot-card.spread-card.flipped .card-face {
  animation: allFlippedConstantGlow 3.5s ease-in-out infinite alternate;
}

.selected-area.all-flipped .tarot-card.spread-card.flipped:hover .card-face {
  animation: none;
  box-shadow: 0 0 40px 3px rgba(200, 120, 255, 0.8), 0 0 80px 4px rgba(155, 48, 255, 0.4) !important;
}


/* Slot label */
.slot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: slotFadeUp 0.6s var(--ease-out) forwards;
  opacity: 0;
}

@keyframes slotFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.slot-label {
  font-family: 'Philosopher', serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.5);
  text-align: center;
}

/* Controls */
.reading-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 90;
  margin-top: 0;
  padding-top: 40px;
  padding-bottom: 30px;
  pointer-events: none;
}

.reading-controls>* {
  pointer-events: auto;
}

.btn-control {
  background: rgba(10, 0, 30, 0.8);
  border: 1px solid rgba(155, 48, 255, 0.35);
  border-radius: 50px;
  padding: 12px 28px;
  cursor: pointer;
  font-family: 'Philosopher', serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--c-pale);
  transition: all 0.35s var(--ease-out);
}

.btn-control:hover {
  border-color: rgba(155, 48, 255, 0.7);
  background: rgba(107, 0, 204, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 0, 204, 0.3);
}

.btn-control--primary {
  background: linear-gradient(135deg, rgba(107, 0, 204, 0.7), rgba(155, 48, 255, 0.5));
  border-color: rgba(200, 121, 255, 0.5);
  color: var(--c-gold-pale);
}

.btn-control--primary:hover {
  box-shadow: 0 8px 30px rgba(155, 48, 255, 0.5);
  border-color: var(--c-glow);
}

.hidden {
  display: none !important;
}

/* ============ ANALYSIS PAGE ============ */
#pageAnalysis {
  justify-content: flex-start;
  padding-top: 36px;
  padding-bottom: 180px;
}

.analysis-content {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0 16px 20px;
}

/* Analysis footer global fixed */
.analysis-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 80px 16px 24px;
  display: none;
  justify-content: center;
  background: linear-gradient(to top, rgba(10, 0, 20, 0.8) 40%, rgba(10, 0, 20, 0.55) 60%, transparent);
  z-index: 20;
  pointer-events: none;
}

.analysis-footer>* {
  pointer-events: auto;
}

#pageAnalysis.page--active~.analysis-footer {
  display: flex;
}

/* Analysis components */
.analysis-title-block {
  text-align: center;
  padding: 16px 0;
}

.analysis-main-title {
  font-family: 'Philosopher', serif;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  background: linear-gradient(135deg, var(--c-gold-pale), var(--c-glow), var(--c-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}

.analysis-divider {
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-violet), var(--c-gold), transparent);
  margin: 10px auto;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 10px 0;
}

.card-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: fadeUp 0.6s var(--ease-out) forwards;
  opacity: 0;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.card-thumb img {
  width: 88px;
  height: 152px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(155, 48, 255, 0.45);
  box-shadow: 0 4px 16px rgba(107, 0, 204, 0.4);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}

.card-thumb img:hover {
  transform: scale(1.07);
  box-shadow: 0 8px 28px rgba(155, 48, 255, 0.6);
}

.card-thumb img.rev-img {
  transform: rotate(180deg);
}

.card-thumb img.rev-img:hover {
  transform: rotate(180deg) scale(1.07);
}

.thumb-label {
  font-family: 'Philosopher', serif;
  font-size: 0.62rem;
  color: var(--c-gold-bright);
  text-align: center;
  max-width: 90px;
  line-height: 1.4;
}

.analysis-block {
  background: rgba(8, 0, 22, 0.6);
  border: 1px solid rgba(155, 48, 255, 0.18);
  border-radius: 18px;
  padding: 28px;

  animation: fadeUp 0.7s var(--ease-out) forwards;
  opacity: 0;
  position: relative;
  overflow: hidden;
}

.analysis-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-violet), var(--c-gold), transparent);
}

.block-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.15rem;
  color: var(--c-gold-bright);
  margin-bottom: 4px;
}

.block-subtitle {
  font-family: 'Philosopher', serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--c-pale);
  margin-bottom: 18px;
  opacity: 0.7;
}

.block-text {
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.83);
}

.section-label {
  font-family: 'Philosopher', serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin: 18px 0 10px;
}

.keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.kw-chip {
  background: rgba(155, 48, 255, 0.15);
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: 'EB Garamond', serif;
  font-size: 0.88rem;
  color: var(--c-pale);
  font-style: italic;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.meta-chip {
  background: rgba(107, 0, 204, 0.2);
  border: 1px solid rgba(155, 48, 255, 0.25);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: 'Philosopher', serif;
  font-size: 0.65rem;
  color: var(--c-pale);
  letter-spacing: 0.06em;
}

.aspects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.aspect-box {
  background: rgba(6, 0, 14, 0.5);
  border: 1px solid rgba(155, 48, 255, 0.18);
  border-radius: 12px;
  padding: 13px 16px;
}

.aspect-label {
  font-family: 'Philosopher', serif;
  font-size: 0.66rem;
  color: var(--c-glow);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 7px;
}

.aspect-text {
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
}

.overall-box {
  background: linear-gradient(135deg, rgba(107, 0, 204, 0.18), rgba(30, 0, 68, 0.5));
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
}

.overall-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.05rem;
  color: var(--c-gold-bright);
  margin-bottom: 12px;
}

.overall-text {
  font-family: 'EB Garamond', serif;
  font-size: 1.08rem;
  font-style: italic;
  color: var(--c-pale);
  line-height: 1.9;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(20, 0, 50, 0.3);
}

::-webkit-scrollbar-thumb {
  background: rgba(155, 48, 255, 0.4);
  border-radius: 3px;
}

/* Responsive */
@media (max-width: 640px) {
  :root {
    --card-w: 100px;
    --card-h: 170px;
  }

  .form-panel {
    padding: 36px 22px 30px;
  }

  .theme-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .spread-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .spread-options .spread-card-opt:nth-child(-n+4) {
    grid-column: span 1;
  }

  .spread-options .spread-card-opt:nth-child(n+5) {
    grid-column: span 2;
  }

  #step4.active {
    display: flex;
    flex-direction: column;
  }

  #step4 .step-header {
    order: 1;
  }

  #spreadDescriptionBox {
    order: 2;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .spread-options {
    order: 3;
    margin-bottom: 20px;
  }

  #step4 .step-nav {
    order: 4;
  }

  .aspects-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Deck cards ──────────────────────────────────────── */
.deck-card {
  transition: transform 0.35s var(--ease-out), opacity 0.4s;
}

.deck-card:hover {
  transform: translateY(-20px) scale(1.06) rotateY(-5deg);
  z-index: 20;
}

.deck-card:hover::after {
  box-shadow: 0 0 30px rgba(155, 48, 255, 0.8), 0 0 70px rgba(155, 48, 255, 0.25);
}

@keyframes deckEntry {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.85);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.deck-entry {
  animation: deckEntry 0.5s var(--ease-out) both;
}

/* ── Spread cards ────────────────────────────────────── */
@keyframes cardFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

.spread-card {
  animation: cardFloat 4.5s ease-in-out infinite;
  animation-delay: calc(var(--slot-idx, 0) * 0.7s);
}

.spread-card:not(.flipped) {
  cursor: pointer;
}

/* Hover: glow aura, no scale */
.spread-card:not(.flipped):hover {
  z-index: 20;
}

.spread-card:not(.flipped):hover .card-back {
  box-shadow: 0 0 18px 2px rgba(201, 168, 76, 0.75), 0 0 48px 4px rgba(201, 168, 76, 0.3);
}

.spread-card:not(.flipped):hover .card-inner {
  filter: brightness(1.12);
}

.spread-card.flipped {
  cursor: default;
}

.spread-card.flipped .card-back {
  box-shadow: none !important;
}

/* ── Meaning panel ───────────────────────────────────── */
.meaning-panel {
  width: var(--card-w);
  background: linear-gradient(160deg, rgba(14, 0, 36, 0.97), rgba(8, 0, 22, 0.99));
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(155, 48, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.meaning-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-violet), var(--c-gold), transparent);
}

.mp-name {
  font-family: 'Philosopher', serif;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--c-gold-bright);
  margin-bottom: 4px;
  line-height: 1.3;
}

.mp-orientation {
  display: inline-block;
  font-family: 'Philosopher', serif;
  font-size: 0.5rem;
  padding: 1px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}

.mp-orientation.up {
  background: rgba(107, 0, 204, 0.35);
  color: var(--c-pale);
}

.mp-orientation.rev {
  background: rgba(180, 60, 30, 0.3);
  color: #ffb090;
}

.mp-text {
  font-family: 'EB Garamond', serif;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 8px;
}

.mp-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.mp-kw {
  background: rgba(155, 48, 255, 0.15);
  border: 1px solid rgba(155, 48, 255, 0.25);
  border-radius: 12px;
  padding: 2px 8px;
  font-family: 'EB Garamond', serif;
  font-size: 0.72rem;
  color: var(--c-pale);
  font-style: italic;
}

.mp-aspect-label {
  font-family: 'Philosopher', serif;
  font-size: 0.58rem;
  color: var(--c-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 8px 0 4px;
}

.mp-aspect-text {
  font-family: 'EB Garamond', serif;
  font-size: 0.8rem;
  color: rgba(232, 180, 255, 0.8);
  line-height: 1.55;
  margin-bottom: 8px;
}

.mp-advice {
  font-family: 'EB Garamond', serif;
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(240, 208, 96, 0.85);
  border-top: 1px solid rgba(155, 48, 255, 0.2);
  padding-top: 8px;
  margin-top: 4px;
  line-height: 1.55;
}

/* slot-wrap vertical stack: label → card → meaning */
.slot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: slotFadeUp 0.6s var(--ease-out) forwards;
  opacity: 0;
}

/* ── Small deck cards for 78-card view ──────────────── */
:root {
  --deck-card-w: 70px;
  --deck-card-h: 120px;
}

.deck-card {
  width: var(--deck-card-w) !important;
  height: var(--deck-card-h) !important;
}

.deck-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  width: 100%;
  perspective: 1200px;
  padding: 0 20px;
}

/* ── Spread cards: size set by JS dynamically ────────── */
.spread-card {
  /* width/height injected by JS per spread count */
  flex-shrink: 0;
}

.selected-area {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  padding: 0 16px;
}

/* Caption on spread card — English name larger */
.spread-card .card-caption-name {
  font-size: 0.82rem;
  font-family: 'Philosopher', serif;
  color: var(--c-gold-bright);
}

.spread-card .card-caption-en {
  font-size: 0.68rem;
  color: rgba(232, 180, 255, 0.65);
}

.spread-card .card-orientation {
  font-size: 0.6rem;
  padding: 2px 10px;
  margin-top: 4px;
}

.spread-card .card-caption {
  padding: 8px 10px 10px;
}



/* ── Analysis two-column layout ─────────────────────── */
.ab-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.ab-img-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 20px;
}

.ab-card-img {
  width: 190px;
  height: 327px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(155, 48, 255, 0.45);
  box-shadow: 0 6px 24px rgba(107, 0, 204, 0.5);
  display: block;
}

.ab-card-img--rev {
  transform: rotate(180deg);
}

.ab-slot-label {
  font-family: 'Philosopher', serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.5);
  text-align: center;
}

.ab-content-col {
  flex: 1 1 auto;
  min-width: 0;
}

.ab-card-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--c-gold-bright);
  margin-bottom: 6px;
  line-height: 1.3;
}

.ab-card-subtitle {
  font-family: 'Philosopher', serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--c-pale);
  opacity: 0.75;
  margin-bottom: 14px;
}

.ab-orientation {
  display: inline-flex;
  align-items: center;
  font-family: 'Philosopher', serif;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 3px 12px;
  border-radius: 20px;
  transition: all 0.3s;
}

.ab-orientation.up {
  background: rgba(107, 0, 204, 0.25);
  border: 1px solid rgba(155, 48, 255, 0.45);
  color: var(--c-pale);
  box-shadow: 0 0 10px rgba(107, 0, 204, 0.2);
}

.ab-orientation.rev {
  background: rgba(180, 60, 30, 0.2);
  border: 1px solid rgba(255, 176, 144, 0.45);
  color: #ffb090;
  box-shadow: 0 0 10px rgba(255, 176, 144, 0.15);
}

.ab-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.ab-meta-chip {
  background: rgba(107, 0, 204, 0.2);
  border: 1px solid rgba(155, 48, 255, 0.25);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: 'Philosopher', serif;
  font-size: 0.7rem;
  color: var(--c-pale);
  letter-spacing: 0.06em;
}

.ab-section-label {
  font-family: 'Philosopher', serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin: 16px 0 8px;
}

.ab-text {
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.88);
}

.ab-text--aspect {
  color: rgba(232, 180, 255, 0.9);
}

.ab-text--advice {
  font-style: italic;
  color: rgba(240, 208, 96, 0.9);
}

.ab-kw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.ab-kw {
  background: rgba(155, 48, 255, 0.15);
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  color: var(--c-pale);
  font-style: italic;
}

/* mp-section label inside meaning panel */
.mp-section {
  font-family: 'Philosopher', serif;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin: 8px 0 4px;
}

/* Larger meaning panel text */
.mp-text {
  font-size: 0.88rem;
}

.mp-aspect-text {
  font-size: 0.85rem;
}

.mp-kw {
  font-size: 0.78rem;
}

/* Analysis meta lines */
.analysis-meta-line {
  font-family: 'Philosopher', serif;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--c-gold-bright);
  margin-top: 10px;
}

.analysis-question-line {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
}

/* Tap-to-read hint BELOW the card (inside slot-wrap) */
.tap-hint {
  display: inline-block;
  background: rgba(10, 0, 28, 0.88);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: 'Philosopher', serif;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(201, 168, 76, 0.95);
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.5);
  animation: tapHintPulse 1.6s ease-in-out infinite;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

@keyframes tapHintPulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 14px rgba(201, 168, 76, 0.9);
  }
}

/* ══════════════════════════════════════════════════
   MEANING MODAL
══════════════════════════════════════════════════ */
.meaning-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 0, 14, 0.55);
}

.meaning-modal-panel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(160deg, rgba(16, 0, 40, 0.98), rgba(8, 0, 22, 0.99));
  border: 1px solid rgba(155, 48, 255, 0.4);
  border-radius: 24px;
  padding: 48px 44px 42px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.85),
    0 0 60px rgba(107, 0, 204, 0.2),
    0 0 0 1px rgba(155, 48, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.meaning-modal-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, transparent, var(--c-violet), var(--c-gold), transparent);
}

.meaning-modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: rgba(232, 180, 255, 0.4);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s, transform 0.3s;
}

.meaning-modal-close:hover {
  color: var(--c-gold);
  transform: scale(1.1);
  text-shadow: 0 0 10px var(--c-gold);
}

/* ── Carousel nav arrows ──────────────────────────── */
.mm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(14, 0, 36, 0.7);
  border: 1px solid rgba(155, 48, 255, 0.35);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(232, 180, 255, 0.75);
  font-size: 1.1rem;
  cursor: pointer;

  transition: all 0.25s ease;
  z-index: 3;
}

.mm-nav--prev {
  left: -21px;
}

.mm-nav--next {
  right: -21px;
}

.mm-nav:hover:not([disabled]) {
  background: rgba(107, 0, 204, 0.4);
  border-color: rgba(201, 168, 76, 0.6);
  color: var(--c-gold);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.25);
}

.mm-nav[disabled] {
  opacity: 0.25;
  cursor: default;
}

/* ── Carousel dots ────────────────────────────────── */
.mm-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}

.mm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(155, 48, 255, 0.3);
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
}

.mm-dot.active {
  background: rgba(201, 168, 76, 0.9);
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.5);
  transform: scale(1.3);
}

.mm-dot:hover:not(.active) {
  background: rgba(155, 48, 255, 0.6);
}

/* wrapper for the scrollable card content inside carousel */
.mm-card-content {
  overflow-y: auto;
  max-height: calc(90vh - 120px);
}

/* Two-column layout inside modal */
.mm-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.mm-img-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mm-card-img {
  width: 210px;
  height: 361px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(155, 48, 255, 0.5);
  box-shadow: 0 6px 28px rgba(107, 0, 204, 0.55);
  display: block;
}

.mm-card-img--rev {
  transform: rotate(180deg);
}

.mm-slot-label {
  font-family: 'Philosopher', serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  text-align: center;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.5);
}

.mm-content {
  flex: 1 1 auto;
  min-width: 0;
}

.mm-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--c-gold-bright);
  margin-bottom: 8px;
  line-height: 1.3;
}

.mm-subtitle {
  font-family: 'Philosopher', serif;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--c-pale);
  opacity: 0.75;
  margin-bottom: 14px;
}

.mm-orient {
  display: inline-flex;
  align-items: center;
  font-family: 'Philosopher', serif;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 3px 12px;
  border-radius: 20px;
  transition: all 0.3s;
}

@media (max-width: 768px) {
  .mm-orient {
    font-size: 0.52rem !important;
    padding: 1px 4px !important;
    letter-spacing: 0;
  }

  .mm-orient svg {
    width: 9px !important;
    height: 9px !important;
    margin-right: 2px !important;
  }
}

.mm-orient.up {
  background: rgba(107, 0, 204, 0.25);
  border: 1px solid rgba(155, 48, 255, 0.45);
  color: var(--c-pale);
  box-shadow: 0 0 10px rgba(107, 0, 204, 0.2);
}

.mm-orient.rev {
  background: rgba(180, 60, 30, 0.2);
  border: 1px solid rgba(255, 176, 144, 0.45);
  color: #ffb090;
  box-shadow: 0 0 10px rgba(255, 176, 144, 0.15);
}

.mm-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.mm-chip {
  background: rgba(107, 0, 204, 0.2);
  border: 1px solid rgba(155, 48, 255, 0.25);
  border-radius: 20px;
  padding: 4px 13px;
  font-family: 'Philosopher', serif;
  font-size: 0.68rem;
  color: var(--c-pale);
  letter-spacing: 0.06em;
}

.mm-section {
  font-family: 'Philosopher', serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin: 14px 0 7px;
}

.mm-text {
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.82;
  color: rgba(255, 255, 255, 0.88);
}

.mm-text--aspect {
  color: rgba(232, 180, 255, 0.9);
}

.mm-text--advice {
  font-style: italic;
  color: rgba(240, 208, 96, 0.9);
}

.mm-kw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 4px;
}

.mm-kw {
  background: rgba(155, 48, 255, 0.15);
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: 'EB Garamond', serif;
  font-size: 0.92rem;
  color: var(--c-pale);
  font-style: italic;
}

@media (max-width: 560px) {
  .mm-layout {
    flex-direction: column;
    align-items: center;
  }

  .mm-card-img {
    width: 100px;
    height: 172px;
  }

  .meaning-modal-panel {
    padding: 32px 20px 28px;
  }
}


/* ══════════════════════════════════════════════
   DAILY LIMIT MODALS
══════════════════════════════════════════════ */
.dl-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 0, 14, 0.75);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.dl-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.dl-panel {
  width: min(460px, 92vw);
  padding: 44px 36px 36px;
  border-radius: 24px;
  text-align: center;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.dl-overlay.visible .dl-panel {
  transform: translateY(0) scale(1);
}

.dl-blocked {
  width: min(800px, 92vw);
  background: linear-gradient(160deg, rgba(20, 0, 50, 0.98), rgba(8, 0, 22, 0.99));
  border: 1px solid rgba(155, 48, 255, 0.4);
  box-shadow: 0 0 60px rgba(107, 0, 204, 0.3), 0 20px 60px rgba(0, 0, 0, 0.7);
}

.dl-warn {
  background: linear-gradient(160deg, rgba(20, 12, 0, 0.98), rgba(8, 4, 0, 0.99));
  border: 1px solid rgba(201, 168, 76, 0.4);
  box-shadow: 0 0 60px rgba(180, 130, 20, 0.25), 0 20px 60px rgba(0, 0, 0, 0.7);
}

.dl-sigil {
  font-size: 2.8rem;
  margin-bottom: 18px;
  display: block;
  color: rgba(155, 48, 255, 0.7);
  animation: sigilBreath 2.5s ease-in-out infinite alternate;
}

.dl-sigil--gold {
  color: rgba(201, 168, 76, 0.8);
}

.dl-title {
  font-family: 'Philosopher', serif;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.dl-blocked .dl-title {
  color: var(--c-pale);
}

.dl-warn .dl-title {
  color: var(--c-gold-bright);
}

.dl-body {
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(232, 180, 255, 0.8);
  margin-bottom: 10px;
}

.dl-warn .dl-body {
  color: rgba(255, 225, 160, 0.8);
}

.dl-body strong {
  color: var(--c-gold-bright);
}

.dl-hint {
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(232, 180, 255, 0.4);
  margin: 16px 0 26px;
}

.dl-warn .dl-hint {
  color: rgba(201, 168, 76, 0.45);
}

.dl-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.dl-btn {
  border-radius: 30px;
  padding: 11px 28px;
  font-family: 'Philosopher', serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  background: transparent;
  border: 1px solid rgba(155, 48, 255, 0.3);
  color: rgba(232, 180, 255, 0.6);
}

.dl-btn:hover {
  border-color: rgba(155, 48, 255, 0.5);
  color: var(--c-pale);
  background: rgba(107, 0, 204, 0.12);
}

.dl-btn--primary {
  background: linear-gradient(135deg, rgba(107, 0, 204, 0.7), rgba(155, 48, 255, 0.5));
  border-color: rgba(155, 48, 255, 0.5);
  color: var(--c-gold-bright);
}

.dl-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(155, 48, 255, 0.4);
  border-color: var(--c-glow);
}

.dl-warn .dl-btn--primary {
  background: linear-gradient(135deg, rgba(130, 90, 0, 0.7), rgba(200, 155, 30, 0.4));
  border-color: rgba(201, 168, 76, 0.5);
  color: #f0d060;
}

.dl-warn .dl-btn--primary:hover {
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.3);
  border-color: var(--c-gold-bright);
}

/* ══════════════════════════════════════════════
   PREMIUM TIERS (PAYWALL)
══════════════════════════════════════════════ */
.premium-tiers {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  text-align: left;
}

@media (max-width: 600px) {
  .premium-tiers {
    flex-direction: column;
  }
}

.pt-card {
  flex: 1 1 auto;
  background: rgba(20, 0, 40, 0.6);
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 16px;
  padding: 24px 20px;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.pt-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(155, 48, 255, 0.2);
}

.pt-card--gold {
  background: linear-gradient(145deg, rgba(30, 20, 0, 0.8), rgba(20, 0, 40, 0.9));
  border: 1px solid rgba(201, 168, 76, 0.6);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.15);
}

.pt-card--gold:hover {
  box-shadow: 0 15px 40px rgba(201, 168, 76, 0.3);
}

.pt-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(155, 48, 255, 0.8);
  color: #fff;
  font-family: 'Philosopher', serif;
  font-size: 0.7rem;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pt-badge--gold {
  background: linear-gradient(90deg, #b8860b, #ffd700);
  color: #000;
  font-weight: bold;
  border: 1px solid #fff;
}

.pt-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--c-pale);
  margin: 10px 0 6px;
  text-align: center;
}

.pt-price {
  font-family: 'EB Garamond', serif;
  font-size: 0.85rem;
  color: rgba(232, 180, 255, 0.8);
  text-align: center;
  margin-bottom: 16px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  padding-bottom: 16px;
}

.pt-price span {
  font-size: 1.4rem;
  font-weight: bold;
  font-family: 'Philosopher', serif;
}

.pt-features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ddd;
}

.pt-features li {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.dl-btn--gold {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.25), rgba(201, 168, 76, 0.1));
  border-color: rgba(201, 168, 76, 0.7);
  color: var(--c-gold-bright);
}

.dl-btn--gold:hover {
  background: rgba(201, 168, 76, 0.4);
  color: #fff;
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.4);
  border-color: var(--c-glow);
}

/* ══════════════════════════════════════════════
   CUSTOM DOB DRUM PICKER
══════════════════════════════════════════════ */
.dob-picker-wrap {
  position: relative;
  margin-bottom: 28px;
}

/* Floating label above trigger */
.dob-label {
  font-family: 'Philosopher', serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  margin-bottom: 6px;
  padding-left: 2px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Trigger button */
.dob-display {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(10, 0, 24, 0.75);
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.4s, box-shadow 0.4s;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.dob-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(155, 48, 255, 0.06), transparent 70%);
  pointer-events: none;
}

.dob-display:hover,
.dob-display.active {
  border-color: var(--c-glow);
  box-shadow: 0 0 15px rgba(155, 48, 255, 0.5), inset 0 0 15px rgba(201, 168, 76, 0.2);
}

.dob-display__icon {
  font-size: 0.85rem;
  color: var(--c-violet);
  opacity: 0.7;
  flex-shrink: 0;
  transition: color 0.3s;
}

.dob-display.active .dob-display__icon,
.dob-picker-wrap.has-value .dob-display__icon {
  color: var(--c-gold);
  opacity: 1;
}

.dob-display__text {
  flex: 1 1 auto;
  font-family: 'Philosopher', serif;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: rgba(232, 180, 255, 0.5);
  transition: color 0.3s;
}

.dob-picker-wrap.has-value .dob-display__text {
  color: var(--c-gold-bright);
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.35);
}

.dob-display__arrow {
  display: flex;
  align-items: center;
  color: rgba(155, 48, 255, 0.5);
  transition: color 0.3s, filter 0.3s;
  flex-shrink: 0;
}

.dob-display.active .dob-display__arrow,
.dob-picker-wrap.has-value .dob-display__arrow {
  color: var(--c-gold);
  filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.5));
}

/* ── DOB Backdrop ──────────────────────────────── */
.dob-backdrop {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(4, 0, 16, 0.65);


  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out);
}

.dob-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

/* ── Dropdown Panel (centered modal) ──────────── */
.dob-panel {
  position: fixed;
  /* top/left/width/transform set by JS positionPanel() */
  z-index: 500;
  background: linear-gradient(160deg, rgba(14, 0, 36, 0.98), rgba(6, 0, 18, 0.99));
  border: 1px solid rgba(155, 48, 255, 0.35);
  border-radius: 18px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(155, 48, 255, 0.1),
    0 0 60px rgba(107, 0, 204, 0.2);
  overflow: hidden;
  /* Hidden state — scale only, JS sets transform for positioning */
  opacity: 0;
  scale: 0.95;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out), scale 0.28s var(--ease-out);
}

.dob-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-violet), var(--c-gold), transparent);
}

.dob-panel.open {
  opacity: 1;
  scale: 1;
  pointer-events: all;
}


.dob-panel__header {
  padding: 14px 18px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(155, 48, 255, 0.15);
}

.dob-panel__title {
  font-family: 'Philosopher', serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--c-gold);
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.4);
  text-transform: uppercase;
}

/* ── The three drum columns ───────────────────── */
.dob-drums {
  display: flex;
  gap: 0;
  padding: 10px 10px 8px;
  position: relative;
}

/* Selection highlight band across all drums */
.dob-drums::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: var(--band-top, 78px);
  /* JS sets this precisely via alignBand() */
  height: 44px;
  background: rgba(155, 48, 255, 0.08);
  border-top: 1px solid rgba(155, 48, 255, 0.25);

  .dr-slot {
    width: 90px;
    height: 155px;
    border-radius: 12px;
    border: 1.5px dashed rgba(255, 215, 0, 0.5);
    background: linear-gradient(135deg, rgba(20, 10, 30, 0.8), rgba(10, 5, 20, 0.9));
    box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 215, 0, 0.4);
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .dr-slot:hover {
    background: linear-gradient(135deg, rgba(30, 15, 45, 0.8), rgba(20, 10, 30, 0.9)) !important;
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2), inset 0 0 20px rgba(255, 215, 0, 0.1) !important;
    color: rgba(255, 215, 0, 0.8);
    transform: translateY(-4px);
  }

  .dr-slot .dr-empty-plus {
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3));
    transition: transform 0.3s;
  }

  .dr-slot:hover .dr-empty-plus {
    transform: scale(1.2);
  }

  border-bottom: 1px solid rgba(155, 48, 255, 0.25);
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
}

.dob-drum-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.dob-drum-label {
  font-family: 'Philosopher', serif;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  color: rgba(232, 180, 255, 0.4);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.dob-drum-btn {
  background: transparent;
  border: none;
  color: rgba(155, 48, 255, 0.5);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}

.dob-drum-btn:hover {
  color: var(--c-gold);
  transform: scale(1.1);
}

.dob-drum-btn:active {
  transform: scale(0.95);
}

/* Drum scroll container */
.dob-drum {
  width: 100%;
  height: 132px;
  /* 3 items × 44px */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* Mask top and bottom fade */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.5) 20%,
      black 38%,
      black 62%,
      rgba(0, 0, 0, 0.5) 80%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.5) 20%,
      black 38%,
      black 62%,
      rgba(0, 0, 0, 0.5) 80%,
      transparent 100%);
  scrollbar-width: none;
}

.dob-drum::-webkit-scrollbar {
  display: none;
}

.dob-drum__track {
  display: flex;
  flex-direction: column;
  padding: 44px 0;
  /* top+bottom padding so first/last can center */
}

.dob-drum__item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Philosopher', serif;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: rgba(232, 180, 255, 0.35);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  white-space: nowrap;
  user-select: none;
  border-radius: 6px;
}

.dob-drum__item:hover {
  color: rgba(232, 180, 255, 0.7);
}

.dob-drum__item.active {
  color: var(--c-gold-bright);
  font-size: 1.0rem;
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
  transform: scale(1.05);
}

/* Dividers between drum columns */
.dob-drum-col:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: rgba(155, 48, 255, 0.12);
}

/* ── Footer buttons ──────────────────────────────── */
.dob-panel__footer {
  display: flex;
  gap: 10px;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(155, 48, 255, 0.15);
}

.dob-btn {
  flex: 1 1 auto;
  padding: 10px 16px;
  border-radius: 30px;
  font-family: 'Philosopher', serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  border: 1px solid rgba(155, 48, 255, 0.25);
  background: transparent;
  color: rgba(232, 180, 255, 0.5);
}

.dob-btn:hover {
  border-color: rgba(155, 48, 255, 0.45);
  color: var(--c-pale);
  background: rgba(107, 0, 204, 0.1);
}

.dob-btn--confirm {
  background: linear-gradient(135deg, rgba(107, 0, 204, 0.7), rgba(155, 48, 255, 0.5));
  border-color: rgba(155, 48, 255, 0.5);
  color: var(--c-gold-bright);
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.4);
}

.dob-btn--confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(155, 48, 255, 0.4);
  border-color: var(--c-glow);
  background: linear-gradient(135deg, rgba(130, 0, 255, 0.75), rgba(180, 80, 255, 0.55));
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 480px) {
  .dob-drum {
    height: 132px;
  }

  .dob-drum__item {
    font-size: 0.78rem;
    height: 44px;
  }

  .dob-drum__item.active {
    font-size: 0.9rem;
  }
}

/* ════════════════════════════════════════════════════
   PAGE-LOAD REVEAL ANIMATIONS
   ════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wordReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) skewY(4deg);

  }

  60% {
    opacity: 1;

  }

  100% {
    opacity: 1;
    transform: translateY(0) skewY(0deg);

  }
}

@keyframes shimmerSweep {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 300% center;
  }
}

@keyframes sigilFadeIn {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-20deg);

  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);

  }
}

/* ── Sigil (appears first) ─────────────────────────── */
.sigil-wrap {
  animation: sigilFadeIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* ── Title — per-word staggered reveal ─────────────── */
.reveal-title {
  display: flex;
  gap: 0.3em;
  flex-wrap: wrap;
  justify-content: center;
}

.title-word {
  display: inline-block;
  opacity: 0;
  /* Keep original title gradient for non-gold words */
  background: linear-gradient(135deg, var(--c-gold-pale) 0%, var(--c-glow) 45%, var(--c-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wordReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.5s + var(--wi, 0) * 0.18s);
}

/* Gold shimmer sweep on the gold words after reveal */
.title-word--gold {
  background: linear-gradient(90deg,
      var(--c-gold) 0%,
      #fff5cc 40%,
      var(--c-gold-bright) 55%,
      var(--c-gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    wordReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(0.5s + var(--wi, 0) * 0.18s) both,
    shimmerSweep 3.2s linear calc(1.4s + var(--wi, 0) * 0.18s) infinite;
}

/* ── Other elements — staggered fade-up ───────────── */
.reveal-item {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* base delay: after title finishes (≈1.4s) + stagger */
  animation-delay: calc(1.1s + var(--di, 0) * 0.15s);
}

/* ----------------------------------------------------
   AI ANALYSIS SECTION
---------------------------------------------------- */
.ai-analysis-box {
  border-color: rgba(201, 168, 76, 0.3);
}

.ai-label {
  color: var(--c-gold);
  font-family: 'Philosopher', serif;
  letter-spacing: 0.1em;
}

/* Loading state */
.ai-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 0;
  color: rgba(232, 180, 255, 0.55);
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1rem;
}

.ai-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 1);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.8), 0 0 20px rgba(155, 48, 255, 0.8);
  animation: aiPulse 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  flex-shrink: 0;
  position: relative;
}

.ai-pulse::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 1px solid rgba(201, 168, 76, 0.8);
  border-radius: 50%;
  animation: aiPulseRing 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes aiPulse {
  0% {
    transform: scale(0.7);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 20px rgba(201, 168, 76, 1), 0 0 40px rgba(155, 48, 255, 1);
  }

  100% {
    transform: scale(0.7);
    opacity: 0.8;
  }
}

@keyframes aiPulseRing {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.ai-error {
  color: rgba(255, 100, 100, 0.7);
  font-style: italic;
}

/* Login gate */
.ai-login-gate {
  text-align: center;
  padding: 28px 0;
}

.ai-login-gate p {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  color: rgba(232, 180, 255, 0.6);
  margin-bottom: 16px;
}

.ai-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Philosopher', serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ai-login-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

/* Rendered markdown */
.ai-content {
  line-height: 1.75;
}

.ai-h2 {
  font-family: 'Philosopher', serif;
  font-size: 1.05rem;
  color: var(--c-gold);
  letter-spacing: 0.08em;
  margin: 22px 0 8px;
}

.ai-h3 {
  font-family: 'Philosopher', serif;
  font-size: 0.9rem;
  color: rgba(232, 180, 255, 0.85);
  letter-spacing: 0.06em;
  margin: 16px 0 6px;
}

.ai-p {
  color: rgba(232, 180, 255, 0.75);
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  margin: 0 0 10px;
}

.ai-list {
  padding-left: 20px;
  margin: 6px 0 12px;
}

.ai-list li {
  color: rgba(232, 180, 255, 0.7);
  font-family: 'EB Garamond', serif;
  margin-bottom: 5px;
}

.ai-content strong {
  color: rgba(232, 180, 255, 0.95);
}

.ai-content em {
  color: rgba(201, 168, 76, 0.85);
  font-style: italic;
}

/* ----------------------------------------------------
   GOOGLE LOGIN MODAL
---------------------------------------------------- */
.google-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.65);

  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.google-login-overlay.visible {
  opacity: 1;
}

.google-login-box {
  background: linear-gradient(160deg, rgba(18, 0, 44, 0.98), rgba(10, 0, 26, 0.99));
  border: 1px solid rgba(155, 48, 255, 0.4);
  border-radius: 24px;
  padding: 44px 40px;
  max-width: 460px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 50px rgba(107, 0, 204, 0.25);
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.google-login-overlay.visible .google-login-box {
  transform: scale(1);
}

.google-login-icon {
  font-size: 2.4rem;
  color: var(--c-gold);
  margin-bottom: 14px;
}

.google-login-title {
  font-family: 'Philosopher', serif;
  font-size: 1.3rem;
  color: rgba(232, 180, 255, 0.95);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.google-login-desc {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  color: rgba(232, 180, 255, 0.55);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

.google-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}

.google-btn-wrap>div {
  margin: 0 auto !important;
}

.google-login-cancel {
  background: none;
  border: none;
  color: rgba(232, 180, 255, 0.35);
  font-size: 0.8rem;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.google-login-cancel:hover {
  color: rgba(232, 180, 255, 0.6);
}

/* -- User badge after login ------------------------- */
.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.5);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.2);
}

.user-logout {
  background: none;
  border: none;
  color: rgba(232, 180, 255, 0.4);
  font-size: 0.7rem;
  cursor: pointer;
  transition: color 0.2s;
}

.user-logout:hover {
  color: rgba(232, 180, 255, 0.8);
}

/* ════════════════════════════════════════════════════
   PRESET QUESTION BUTTON SPACING FIX
════════════════════════════════════════════════════ */
.preset-q-group {
  margin-bottom: 18px;
}

.preset-q-group-header {
  margin-bottom: 10px;
}

.preset-q-btn {
  margin: 5px 6px 5px 0 !important;
}

/* ════════════════════════════════════════════════════
   CAROUSEL MODAL — NAV OUTSIDE, DOTS OUTSIDE
════════════════════════════════════════════════════ */
.meaning-modal-overlay {
  flex-direction: column !important;
  align-items: center;
  gap: 14px;
}

/* Wrapper that holds [prev] [panel] [next] in a row */
.mm-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  width: 100%;
  max-width: 860px;
  justify-content: center;
}

/* Panel no longer needs overflow:visible hacks */
.mm-carousel-wrap .meaning-modal-panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* Nav buttons — simple arrow circles, no text */
.mm-nav {
  position: static !important;
  transform: none !important;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 0, 36, 0.85);
  border: 1px solid rgba(155, 48, 255, 0.4);
  color: rgba(232, 180, 255, 0.8);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition: all 0.25s ease;
  align-self: center;
}

.mm-nav--prev,
.mm-nav--next {
  left: auto !important;
  right: auto !important;
}

.mm-nav:hover:not([disabled]) {
  background: rgba(107, 0, 204, 0.45);
  border-color: rgba(201, 168, 76, 0.65);
  color: var(--c-gold);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.2);
}

.mm-nav[disabled] {
  opacity: 0.2;
  cursor: default;
}

/* Dots — below the wrap row */
.mm-dots {
  display: flex;
  gap: 9px;
  justify-content: center;
}

/* Card content — overflow clip for slide animation */
.mm-card-content {
  overflow: hidden;
}

/* ════════════════════════════════════════════════════
   BTN-BEGIN VARIANT FOR "XEM PHÂN TÍCH"
════════════════════════════════════════════════════ */
.btn-begin--analysis {
  /* Override positioning so it works inside .reading-controls */
  position: relative;
  width: auto;
  min-width: 220px;
  margin: 0 auto;
  animation: btnBreath 3.5s ease-in-out infinite;
}

/* Slightly different glow color to stand out from landing CTA */
.btn-begin--analysis.hidden {
  display: none !important;
}

/* ════════════════════════════════════════════════════
   HISTORY — BACK TO HOME BUTTON
════════════════════════════════════════════════════ */
.history-back-home {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 20px 14px;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(155, 48, 255, 0.25);
  border-radius: 50px;
  color: rgba(232, 180, 255, 0.55);
  font-family: 'Philosopher', serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.25s ease;
  width: calc(100% - 40px);
  justify-content: center;
}

.history-back-home:hover {
  background: rgba(107, 0, 204, 0.15);
  border-color: rgba(155, 48, 255, 0.5);
  color: rgba(232, 180, 255, 0.85);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — TAROT HUYỀN BÍ
   Target: ≤ 768px (tablet), ≤ 480px (phone)
════════════════════════════════════════════════════════════════ */

/* ── Utility: no-wrap on single-line elements ─────────────────── */
@media (max-width: 768px) {
  :root {
    --card-w: 72px;
    --card-h: 122px;
  }

  /* ── GLOBAL ──────────────────────────────────────────────────── */
  body {
    font-size: 14px;
  }

  /* ════════════════════════════════════════════════════════════════
     LANDING PAGE
  ════════════════════════════════════════════════════════════════ */
  .landing-hero {
    padding: 0 20px;
    justify-content: center;
    gap: 18px;
  }

  .landing-title {
    font-size: clamp(1.8rem, 9vw, 3rem);
    line-height: 1.15;
  }

  .landing-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }

  .landing-runes {
    font-size: 0.9rem;
    gap: 10px;
  }

  .landing-hint {
    font-size: 0.72rem;
  }

  /* CTA button */
  .btn-begin {
    min-width: 0;
    width: 85vw;
    max-width: 320px;
    padding: 14px 22px;
    font-size: 0.85rem;
  }

  .btn-history {
    padding: 9px 18px;
    font-size: 0.72rem;
    gap: 6px;
  }

  .btn-history svg {
    width: 14px;
    height: 14px;
  }

  /* ════════════════════════════════════════════════════════════════
     FORM MODAL
  ════════════════════════════════════════════════════════════════ */
  .form-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
  }

  .form-header {
    padding: 14px 18px 10px;
    flex-shrink: 0;
  }

  .form-header-title {
    font-size: 0.8rem;
  }

  /* Steps scrollable area */
  .form-step {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1 1 auto;
  }

  .form-step.active {
    display: flex;
    flex-direction: column;
  }

  .step-label {
    font-size: 0.95rem;
  }

  .step-hint {
    font-size: 0.75rem;
  }

  .mystical-input {
    font-size: 0.9rem;
    padding: 11px 14px;
  }

  /* Step navigation — sticky bottom */
  .step-nav,
  .form-footer {
    position: sticky;
    bottom: 0;
    /* background: rgba(11, 0, 32, 0.97); */
    border-top: 1px solid rgba(155, 48, 255, 0.2);
    padding: 10px 18px;
    display: flex;
    gap: 10px;
    padding-bottom: 10px !important;
    flex-shrink: 0;
    z-index: 5;
  }

  .btn-next,
  .btn-prev {
    padding: 11px 18px;
    font-size: 0.75rem;
    white-space: nowrap;
    flex: 1 1 auto;
  }

  .btn-next {
    flex: 2;
  }

  /* Theme grid: 3-col on mobile */
  #mainThemeGrid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .theme-card {
    padding: 10px 6px !important;
    gap: 5px !important;
  }

  .theme-icon {
    font-size: 1.2rem !important;
  }

  .theme-name {
    font-size: 0.68rem !important;
    letter-spacing: 0.04em !important;
  }

  .theme-desc {
    display: none;
  }

  /* Sub-theme list */
  .sub-theme-item {
    padding: 10px 12px !important;
  }

  .sti-label {
    font-size: 0.82rem !important;
  }

  .sti-desc {
    font-size: 0.7rem !important;
  }

  /* Spread selection: 2-col */
  .spread-options {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .spread-card-opt {
    padding: 0 !important;
  }

  .spread-card-ui {
    padding: 12px 8px !important;
  }

  .spread-title {
    font-size: 1rem !important;
  }

  .spread-desc {
    font-size: 0.68rem !important;
  }

  .spread-description-box {
    font-size: 0.7rem !important;
    padding: 12px 14px !important;
  }

  .spread-mini-cards {
    gap: 2px !important;
  }

  .spread-mini-card {
    width: 8px !important;
    height: 14px !important;
  }

  /* Q preset buttons */
  .preset-q-btn {
    padding: 7px 10px !important;
    font-size: 0.75rem !important;
    margin: 4px 4px 4px 0 !important;
  }

  .preset-q-group-header {
    font-size: 0.72rem !important;
  }

  /* Char counter */
  #charCount {
    font-size: 0.7rem;
  }

  /* ════════════════════════════════════════════════════════════════
     READING PAGE
  ════════════════════════════════════════════════════════════════ */
  #pageReading {
    padding: 6px 10px;
  }

  .reading-user-info {
    font-size: 0.72rem;
    gap: 4px;
    flex-wrap: wrap;
  }

  .reading-question {
    font-size: 0.82rem;
    padding: 8px 12px;
  }

  .reading-instruction {
    font-size: 0.78rem;
    margin: 6px 0;
  }

  /* Deck: smaller cards, exactly 10 columns grid */
  .deck-area {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important;
    gap: 4px !important;
    padding: 10px !important;
  }

  .deck-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1.63 !important;
    border-radius: 4px !important;
  }

  .deck-card .card-inner,
  .deck-card .card-back {
    border-radius: 4px !important;
  }

  /* Selected spread cards — row, small */
  .selected-area {
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .slot-wrap {
    min-width: 0;
  }

  .slot-label {
    font-size: 0.6rem !important;
    margin-bottom: 4px !important;
  }

  .card-caption {
    padding: 3px 4px !important;
  }

  .deck-card {
    width: 38px !important;
    height: 64px !important;
  }

  .card-caption-name {
    font-size: 0.55rem !important;
  }

  .card-caption-en {
    display: none !important;
  }

  .card-orientation {
    font-size: 0.5rem !important;
  }

  .tap-hint {
    font-size: 0.6rem !important;
  }

  /* Reading controls — sticky bottom */
  .reading-controls {
    order: 10;
    position: sticky;
    bottom: 0;
    align-self: stretch;
    margin-top: auto;
    padding: 10px 0 14px 0;
    /* background: linear-gradient(to top, rgba(6, 0, 15, 0.97) 80%, transparent); */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 20;
  }

  .btn-control {
    width: 100%;
    max-width: 340px;
    padding: 11px 20px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .btn-begin--analysis {
    width: 100% !important;
    max-width: 340px !important;
  }

  /* ════════════════════════════════════════════════════════════════
     MEANING MODAL (Carousel)
  ════════════════════════════════════════════════════════════════ */
  .meaning-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
    gap: 0 !important;
  }

  .mm-carousel-wrap {
    flex-direction: column !important;
    gap: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }

  .meaning-modal-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    padding: 20px 16px 16px !important;
    margin: 0 !important;
  }

  /* Nav arrows as row below content */
  .mm-nav {
    display: none !important;
  }

  /* Mobile nav bar replaces arrows */
  .mm-dots {
    order: 10;
    padding: 10px 0 14px;
    background: rgba(6, 0, 15, 0.95);
    width: 100%;
    margin: 0 !important;
  }

  /* Add swipe-left/right hint and mobile nav row */
  .mm-carousel-wrap::after {
    content: '';
    /* handled via dots */
  }

  .mm-layout {
    flex-direction: column !important;
    gap: 14px !important;
  }

  .mm-img-col {
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .mm-card-img {
    width: 70px !important;
    height: 120px !important;
    object-fit: cover;
  }

  .mm-slot-label {
    margin-top: 0 !important;
  }

  .mm-title {
    font-size: 1rem !important;
  }

  .mm-subtitle {
    font-size: 0.72rem !important;
  }

  .mm-section {
    font-size: 0.62rem !important;
    margin-top: 10px !important;
  }

  .mm-text {
    font-size: 0.82rem !important;
  }

  .mm-kw {
    font-size: 0.68rem !important;
    padding: 3px 7px !important;
  }

  .mm-chip {
    font-size: 0.62rem !important;
    padding: 3px 8px !important;
  }

  .meaning-modal-close {
    top: 10px !important;
    right: 12px !important;
    font-size: 1.3rem !important;
  }

  .mm-card-content {
    max-height: none !important;
  }

  /* ════════════════════════════════════════════════════════════════
     ANALYSIS PAGE
  ════════════════════════════════════════════════════════════════ */
  #pageAnalysis {
    padding: 10px 12px 180px;
  }

  .analysis-content {
    max-width: 100% !important;
  }

  .analysis-main-title {
    font-size: 1.2rem !important;
  }

  .analysis-meta-line {
    font-size: 0.78rem !important;
  }

  .analysis-question-line {
    font-size: 0.85rem !important;
  }

  /* Card analysis block: stacked column */
  .analysis-block {
    padding: 14px 12px !important;
    margin-bottom: 14px !important;
  }

  .ab-layout {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .ab-img-col {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }

  .ab-card-img {
    width: 65px !important;
    height: 110px !important;
    object-fit: cover;
  }

  .ab-slot-label {
    font-size: 0.62rem !important;
    margin-top: 0 !important;
  }

  .ab-card-title {
    font-size: 0.88rem !important;
  }

  .ab-card-subtitle {
    font-size: 0.7rem !important;
  }

  .ab-section-label {
    font-size: 0.62rem !important;
    margin-top: 10px !important;
  }

  .ab-text {
    font-size: 0.82rem !important;
  }

  .ab-kw {
    font-size: 0.68rem !important;
    padding: 3px 7px !important;
  }

  .ab-meta-chip {
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
  }

  .overall-box {
    padding: 16px !important;
  }

  .overall-title {
    font-size: 0.85rem !important;
  }

  .overall-text {
    font-size: 0.82rem !important;
  }

  /* AI box */
  .ai-h2 {
    font-size: 0.9rem !important;
  }

  .ai-h3 {
    font-size: 0.8rem !important;
  }

  .ai-p,
  .ai-list li {
    font-size: 0.82rem !important;
  }



  .analysis-footer .btn-control {
    width: 100%;
    max-width: 340px;
  }

  /* Floating history button on analysis */
  .btn-history-float {
    bottom: 70px !important;
    right: 14px !important;
    padding: 8px 14px !important;
    font-size: 0.72rem !important;
  }

  /* ════════════════════════════════════════════════════════════════
     HISTORY PANEL
  ════════════════════════════════════════════════════════════════ */
  .history-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    height: 88dvh !important;
    transform: translateY(100%) !important;
  }

  .history-panel.open {
    transform: translateY(0) !important;
  }

  .history-panel__header {
    padding: 16px 16px 12px !important;
  }

  .history-panel__title {
    font-size: 0.9rem !important;
  }

  .history-panel__sub {
    font-size: 0.7rem !important;
  }

  .hist-entry {
    padding: 12px !important;
  }

  .hist-entry-header {
    flex-wrap: wrap;
    gap: 4px;
  }

  .hist-theme {
    font-size: 0.68rem !important;
  }

  .hist-date {
    font-size: 0.65rem !important;
  }

  .hist-q {
    font-size: 0.78rem !important;
  }

  .hist-thumb {
    width: 28px !important;
    height: 47px !important;
  }

  .hist-actions {
    gap: 6px;
    flex-wrap: wrap;
  }

  .hist-btn {
    padding: 6px 10px !important;
    font-size: 0.68rem !important;
  }

  /* GOOGLE LOGIN MODAL */
  .google-login-box {
    width: 95vw !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 30px 24px !important;
    position: fixed;
  }

  .google-login-overlay {
    align-items: flex-end !important;
  }

  .google-login-title {
    font-size: 1.05rem !important;
  }

  .google-login-desc {
    font-size: 0.82rem !important;
  }

  /* ════════════════════════════════════════════════════════════════
     DOB PICKER MODAL
  ════════════════════════════════════════════════════════════════ */
  .dob-picker-panel {
    width: 98vw !important;
    padding: 18px 14px !important;
  }

  .dob-col-header {
    font-size: 0.68rem !important;
  }

  .dob-col-item {
    font-size: 0.88rem !important;
    height: 36px !important;
  }

  /* ════════════════════════════════════════════════════════════════
     SWIPE HINT for carousel
  ════════════════════════════════════════════════════════════════ */
  .mm-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.68rem;
    color: rgba(232, 180, 255, 0.35);
    font-family: 'EB Garamond', serif;
    font-style: italic;
    padding: 6px 0 2px;
  }
}

/* ── Extra small: 380px and below ─────────────────────────────── */
@media (max-width: 380px) {
  .landing-title {
    font-size: 1.6rem;
  }

  .btn-begin {
    width: 92vw;
    font-size: 0.78rem;
  }

  #mainThemeGrid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .theme-name {
    font-size: 0.6rem !important;
  }

  .spread-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .preset-q-btn {
    font-size: 0.7rem !important;
    padding: 6px 8px !important;
  }

  .deck-card {
    width: 38px !important;
    height: 64px !important;
  }
}


/* ════════════════════════════════════════════════════
   BTN BACK HOME — Floating above history btn
════════════════════════════════════════════════════ */
.btn-back-home-float {
  position: fixed;
  bottom: 108px;
  /* sits above .btn-history-float (bottom ~64px + gap) */
  right: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: rgba(14, 0, 36, 0.88);
  border: 1px solid rgba(155, 48, 255, 0.35);
  border-radius: 50px;
  color: rgba(232, 180, 255, 0.65);
  font-family: 'Philosopher', serif;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  cursor: pointer;

  transition: all 0.3s ease;
  z-index: 50;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.btn-back-home-float:hover {
  background: rgba(107, 0, 204, 0.3);
  border-color: rgba(201, 168, 76, 0.5);
  color: var(--c-gold);
  transform: translateY(-2px);
}

/* Only show on analysis page */
#pageAnalysis:not(.page--active)~* .btn-back-home-float,
.btn-back-home-float {
  display: none;
}

#pageAnalysis.page--active~.btn-back-home-float {
  display: flex;
}

/* ════════════════════════════════════════════════════
   MEANING MODAL — Wider panel
════════════════════════════════════════════════════ */
.mm-carousel-wrap {
  max-width: 980px !important;
}

.meaning-modal-panel {
  max-width: 860px !important;
}

/* ════════════════════════════════════════════════════
   AI LOGIN GATE — Centered; content = justify
════════════════════════════════════════════════════ */
.ai-login-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
}

.ai-login-gate p {
  text-align: center;
}

/* When AI content arrives — justify */
.ai-content {
  text-align: left;
}

.ai-content .ai-p {
  text-align: justify;
}

.ai-content .ai-h2,
.ai-content .ai-h3 {
  text-align: left;
}

@media (max-width: 768px) {
  .btn-back-home-float {
    bottom: 118px;
    right: 12px;
    padding: 8px 13px;
    font-size: 0.68rem;
  }

  .mm-carousel-wrap {
    max-width: 100vw !important;
  }

  .meaning-modal-panel {
    max-width: 100vw !important;
  }
}

/* ════════════════════════════════════════════════════
   MOBILE FORM PANEL — Bottom sheet override
   (must come after existing .form-panel mobile rule)
════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .form-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .form-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 92dvh !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden;
  }

  /* Drag handle */
  .form-panel::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 4px;
    background: rgba(155, 48, 255, 0.3);
    border-radius: 2px;
    margin: 10px auto 0;
  }

  /* Sub-theme list height taller on mobile for more items visible */
  .sub-theme-list {
    max-height: 45dvh !important;
  }

  /* Sub-theme items larger tap target */
  .sub-theme-item {
    padding: 13px 14px !important;
  }

  /* Sub-back button */
  .sub-back-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.72rem !important;
  }
}

/* ════════════════════════════════════════════════════
   PHILOSOPHER FONT — Vietnamese-safe replacement
   Use for all Vietnamese UI text that was using Cinzel
════════════════════════════════════════════════════ */
:root {
  --font-display: 'Philosopher', 'Philosopher', serif;
}

/* UI labels and elements with Vietnamese text → Philosopher */
.theme-name,
.theme-desc,
.sti-label,
.sti-desc,
.sub-back-btn,
.step-label,
.step-hint,
.preset-q-group-header,
.hist-theme,
.hist-date,
.hist-q,
.reading-user-info,
.reading-question,
.reading-instruction,
.ab-card-title,
.ab-card-subtitle,
.ab-slot-label,
.mm-slot-label,
.analysis-meta-line,
.analysis-question-line,
.history-panel__title,
.history-panel__sub,
.ai-login-gate p,
.spread-title,
.spread-desc {
  font-family: 'Philosopher', 'EB Garamond', serif !important;
}

/* ════════════════════════════════════════════════════
   FLOATING ICON BUTTONS — icon-only circles
════════════════════════════════════════════════════ */
.btn-float-icon {
  position: fixed;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(14, 0, 36, 0.88);
  border: 1px solid rgba(155, 48, 255, 0.4);
  color: rgba(232, 180, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition: all 0.3s ease;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.btn-float-icon:hover {
  background: rgba(107, 0, 204, 0.35);
  border-color: rgba(201, 168, 76, 0.6);
  color: var(--c-gold);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(155, 48, 255, 0.3);
}

/* History icon — bottom: 24px */
#btnHistoryAnalysis.btn-float-icon {
  bottom: 24px;
}

/* Home icon — bottom: 86px (above history) */
.btn-float-icon--home {
  bottom: 86px;
}

/* Share icon — bottom: 148px (above home) */
.btn-float-icon--share {
  bottom: 148px;
}

/* Hidden by default */
.btn-float-icon,
.btn-float-action {
  display: none;
}

#pageAnalysis.page--active~#btnShareReading,
#pageAnalysis.page--active~#btnHistoryAnalysis,
#pageAnalysis.page--active~#btnBackHome {
  display: flex;
}

#pageLanding.page--active~#btnTopTopics,
#pageLanding.page--active~#dailyDrawWidget {
  display: flex;
}

#pageReading.page--active~.btn-float-icon {
  display: none !important;
}

/* ════════════════════════════════════════════════════
   AI LOGIN GATE — Centered layout fix
════════════════════════════════════════════════════ */
.ai-analysis-box {
  display: flex;
  flex-direction: column;
}

.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px;
  gap: 14px;
}

.ai-login-gate {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 16px !important;
  padding: 20px 16px !important;
  width: 100% !important;
}

.ai-login-gate p {
  text-align: center !important;
  color: rgba(232, 180, 255, 0.6);
  font-style: italic;
}

.ai-login-btn {
  margin: 0 auto !important;
}

/* AI content once loaded — left-aligned with justify for paragraphs */
.ai-content {
  text-align: left;
}

.ai-content p {
  text-align: justify;
}

.ai-content h2,
.ai-content h3 {
  text-align: left;
}

/* ════════════════════════════════════════════════════
   MOBILE: Fix ab-img-col sticky overlap
════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Remove sticky so image doesn't overlap text */
  .ab-img-col {
    position: static !important;
    top: auto !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .ab-img-col .ab-card-img {
    width: 72px !important;
    height: 122px !important;
    flex-shrink: 0 !important;
  }

  .ab-layout {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Float buttons on mobile: slightly smaller, same style */
  .btn-float-icon {
    width: 46px;
    height: 46px;
    right: 14px;
  }

  #btnHistoryAnalysis.btn-float-icon {
    bottom: 18px;
  }

  .btn-float-icon--home {
    bottom: 74px;
  }

  .btn-float-icon--share {
    bottom: 130px;
  }
}

/* ════════════════════════════════════════════════════
   CLOCK ICON — inline SVG alignment
════════════════════════════════════════════════════ */
.dob-clock-icon {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 2px;
  opacity: 0.75;
}

/* ════════════════════════════════════════════════════
   READING QUESTION — larger text
════════════════════════════════════════════════════ */
.reading-q-text {
  font-family: 'EB Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-style: italic;
  color: rgba(255, 234, 160, 0.92);
  line-height: 1.5;
  text-shadow: 0 0 20px rgba(201, 168, 76, 0.35);
}

/* ════════════════════════════════════════════════════
   ANALYSIS QUESTION HERO — same style as reading
════════════════════════════════════════════════════ */
.analysis-question-hero {
  font-family: 'EB Garamond', serif;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-style: italic;
  color: rgba(255, 234, 160, 0.92);
  text-align: center;
  line-height: 1.6;
  margin-top: 10px;
  text-shadow: 0 0 24px rgba(201, 168, 76, 0.35);
}

/* ════════════════════════════════════════════════════
   NAV ARROWS — SVG alignment in buttons
════════════════════════════════════════════════════ */
.nav-arrow {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-bottom: 1px;
}

.nav-arrow svg {
  pointer-events: none;
}

.btn-begin__arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.btn-begin__arrow svg {
  pointer-events: none;
}

/* btn-next / btn-prev flex for icon alignment */
.btn-next,
.btn-prev {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE LAYOUT FIXES — Buttons center, Title break, Modal center,
   10-card full-width, Deck single row
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── LANDING: center all content ─────────────────────────── */
  .landing-hero {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .landing-title {
    text-align: center !important;
    width: 100%;
    font-size: clamp(1.8rem, 10vw, 3rem) !important;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  /* Force "Tarot" block → line break before "Huyền Bí" */
  .title-word[style*='--wi:0'] {
    display: block !important;
    color: var(--c-white);
    white-space: nowrap;
  }

  /* Huyền + Bí stay inline on same line */
  .title-word--gold {
    display: inline !important;
    white-space: nowrap;
  }

  .landing-subtitle,
  .landing-rune-row,
  .landing-hint {
    text-align: center !important;
    width: 100%;
  }

  /* Buttons — full width centered */
  .btn-begin {
    max-width: 80vw !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .btn-history {
    margin: 0 auto !important;
    text-align: center;
  }

  /* ── FORM MODAL: centered modal with scrollable content ────── */
  .form-overlay {
    align-items: center !important;
    padding: 12px !important;
  }

  .form-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px !important;
    max-height: 90dvh !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }

  /* Steps area scrollable, fills space */
  .form-step {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
  }

  /* Remove drag handle for centered modal */
  .form-panel::before {
    display: none !important;
  }

  /* ── SPREAD GRID: 10-lá should span full width ─────────────── */
  /* Keep 2-col, but last lone item (10-lá) spans all */
  .spread-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 10-lá is 5th label = last-child, span full width */
  .spread-card-opt:last-child {
    grid-column: 1 / -1 !important;
  }

  /* ── DECK: single horizontal scrollable row ─────────────────── */
  .deck-area {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 5px !important;
    padding: 8px 6px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .deck-area::-webkit-scrollbar {
    display: none;
  }

  .deck-area .deck-card {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    width: 44px !important;
    height: 75px !important;
  }
}

/* ════════════════════════════════════════════════════
   MEANING MODAL — New 2-part layout
   TOP ROW: [card image] [title + subtitle + meta]
   BOTTOM:  meanings / keywords / advice
════════════════════════════════════════════════════ */
.mm-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Top header row */
.mm-header-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.mm-header-row .mm-card-img {
  width: 110px;
  height: 188px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(155, 48, 255, 0.45);
  box-shadow: 0 4px 18px rgba(107, 0, 204, 0.5);
  flex-shrink: 0;
}

.mm-card-img--rev {
  transform: rotate(180deg);
}

.mm-card-img.mm-card-img--gold,
.mm-header-row .mm-card-img.mm-card-img--gold {
  border: 2px solid rgba(255, 215, 0, 0.6) !important;
  box-shadow: 0 4px 28px rgba(255, 215, 0, 0.45) !important;
}

.mm-header-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

/* Bottom body */
.mm-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Modal width */
.mm-carousel-wrap {
  max-width: 900px !important;
}

.meaning-modal-panel {
  max-width: 95vw !important;
  width: 95vw !important;
}

/* Slot label hidden on mobile (show on desktop only) */
@media (max-width: 768px) {
  .mm-slot-label {
    display: none !important;
  }

  .mm-header-row .mm-card-img {
    width: 80px !important;
    height: 136px !important;
  }

  .mm-carousel-wrap {
    max-width: 100vw !important;
  }

  .meaning-modal-panel {
    max-width: 96vw !important;
    width: 96vw !important;
  }
}

/* ════════════════════════════════════════════════════
   DECK — Multi-row grid, not horizontal scroll
════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .deck-area {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 44px) !important;
    justify-content: center !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    overflow-x: unset !important;
    overflow-y: auto !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    max-height: 55dvh;
  }

  .deck-area .deck-card {
    width: 100% !important;
    height: 75px !important;
    flex-shrink: unset !important;
  }
}

/* ════════════════════════════════════════════════════
   SLOT LABEL — hide "Thông Điệp Chính" on mobile
════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .slot-label {
    display: none !important;
  }
}


/* Hide the "Thông Điệp Chính —" prefix globally on mobile */
@media (max-width: 768px) {
  .ab-slot-label {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════
   SELECTED CARD SIZE
════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════
   MOBILE FIXES — batch
════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Rune row center */
  .landing-rune-row {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* 2. Title — "Tarot" block | "Huyền" + "Bí" inline on same line */
  .landing-title {
    font-size: clamp(1.65rem, 9.5vw, 2.4rem) !important;
    white-space: normal !important;
    letter-spacing: 0.02em !important;
  }

  .title-word[style*='--wi:0'] {
    display: block !important;
    white-space: nowrap !important;
  }

  .title-word--gold {
    display: inline !important;
    white-space: nowrap !important;
  }

  /* 3. Input overlap fix — increase padding-top so typed text doesn't overlap label */
  .mystical-input {
    padding: 26px 14px 10px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .mystical-label {
    font-size: 0.72rem !important;
    top: 10px !important;
    transform: none !important;
    /* Always float up on mobile so it never overlaps input text */
    color: var(--c-gold) !important;
    letter-spacing: 0.1em !important;
  }

  /* Remove the float animation — label is always at top */
  .mystical-input:focus~.mystical-label,
  .mystical-input:not(:placeholder-shown)~.mystical-label {
    top: 8px !important;
    font-size: 0.65rem !important;
  }

  /* 4. Form steps indicator — needs breathing room */
  .form-steps-indicator {
    padding: 14px 20px 10px !important;
    margin-bottom: 0 !important;
    position: relative;
    z-index: 2;
  }

  /* 5. Deck — show ALL cards, no max-height */
  .deck-area {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) !important;
    gap: 6px !important;
    padding: 10px 8px !important;
  }
}

/* ════════════════════════════════════════════════════
   TITLE GOLD GROUP — keep Huyền + Bí on same line
════════════════════════════════════════════════════ */
.title-gold-group {
  display: inline;
  white-space: nowrap;
}

@media (max-width: 768px) {

  /* Tarot = full block line 1 */
  .title-word[style*='--wi:0'] {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Huyền Bí group = block line 2, no wrap between them */
  .title-gold-group {
    display: block !important;
    white-space: nowrap !important;
  }

  .title-word--gold {
    display: inline !important;
  }
}

/* ════════════════════════════════════════════════════
   READING PAGE MOBILE — selected area visible ABOVE deck
   HTML order: selectedArea, deckArea
   So natural flow is correct — just fix sizing
════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Selected spread slots — always below header, compact */
  .selected-area {
    min-height: 0 !important;
    flex-shrink: 0;
    padding: 6px 8px !important;
    justify-content: center !important;
  }

  /* Deck below selected — full grid, scrollable vertically */
  .deck-area {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    flex: 1 1 auto;
  }
}

/* ════════════════════════════════════════════════════
   ANALYSIS BLOCK — new header-row layout (matches modal)
════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   ANALYSIS BLOCK — grid layout for desktop/mobile
════════════════════════════════════════════════════ */
.ab-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "img info"
    "img meaning"
    "body body";
  gap: 0 24px;
}

.ab-layout>.ab-card-img {
  grid-area: img;
  width: 130px;
  height: 222px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(155, 48, 255, 0.45);
  box-shadow: 0 6px 24px rgba(107, 0, 204, 0.5);
  position: static !important;
  top: auto !important;
  align-self: start;
}

.ab-card-img--rev {
  transform: rotate(180deg);
}

.ab-header-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 4px;
  padding-bottom: 8px;
}

/* Meaning below header info */
.ab-meaning {
  grid-area: meaning;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Body below everything */
.ab-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .ab-layout {
    grid-template-areas:
      "img info"
      "meaning meaning"
      "body body";
    gap: 16px 13px;
  }

  .ab-layout>.ab-card-img {
    width: 86px !important;
    height: 147px !important;
  }

  .ab-body {
    margin-top: 0;
  }
}

/* ════════════════════════════════════════════════════
   MODAL CARD IMAGE — border-radius all 4 corners
   Fix: meaning-modal-panel overflow:hidden clips img
════════════════════════════════════════════════════ */
.meaning-modal-panel {
  overflow: visible !important;
}

.mm-card-content {
  overflow: visible !important;
}

.mm-header-row .mm-card-img {
  border-radius: 10px !important;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════
   TAROT TITLE — bigger on mobile
════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .landing-title {
    font-size: clamp(2rem, 11vw, 2.8rem) !important;
  }
}

/* ════════════════════════════════════════════════════
   READING PAGE — top padding, horizontal overflow fix
════════════════════════════════════════════════════ */

/* Prevent horizontal scroll globally */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Reading header — breathing room from top */
.reading-header {
  padding-top: env(safe-area-inset-top, 12px);
  margin-top: 12px;
}

@media (max-width: 768px) {
  #pageReading {
    padding-top: max(env(safe-area-inset-top, 0px), 16px) !important;
    /* margin-bottom: 20px !important; */
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: hidden !important;
  }

  .reading-header {
    margin-top: 8px !important;
    padding: 0 16px !important;
  }

  /* Deck grid must not overflow viewport */
  .deck-area {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    gap: 6px !important;
    padding: 0 8px !important;
    /* give it nice breathing room on sides */
  }

  .deck-area .deck-card {
    width: calc(10% - 7px) !important;
    /* approx 10 columns */
    height: auto !important;
    aspect-ratio: 9/15.3 !important;
    /* basic tarot card ratio */
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ════════════════════════════════════════════════════
   DECK HIDDEN — center selected cards on screen
════════════════════════════════════════════════════ */
#pageReading.deck-hidden {
  justify-content: flex-start !important;
  align-items: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* allow scrolling and prevent top cutoff */
}

#pageReading.deck-hidden .selected-area {
  display: flex !important;
  flex: 1 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 40px 18px !important;
  padding: 20px !important;
}

#pageReading.deck-hidden .reading-header,
#pageReading.deck-hidden .reading-instruction {
  /* Keep these visible at top */
  align-self: flex-start !important;
  width: 100% !important;
}

#pageReading.deck-hidden .reading-controls {
  align-self: flex-end !important;
  width: 100% !important;
}

/* ════════════════════════════════════════════════════
   MODAL BORDER-RADIUS — ALL 4 corners rounded
   Reset any override that makes bottom corners sharp
════════════════════════════════════════════════════ */
.meaning-modal-panel {
  border-radius: 24px !important;
  overflow: hidden !important;
}

/* The ::before accent bar only spans top */
.meaning-modal-panel::before {
  border-radius: 24px 24px 0 0 !important;
}

/* Card image inside modal — needs own radius, not clipped */
.mm-card-content,
.mm-layout,
.mm-header-row {
  overflow: visible !important;
}

.mm-header-row .mm-card-img {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* ════════════════════════════════════════════════════
   STEP NAV — next button right-aligned, not centered
════════════════════════════════════════════════════ */
.step-nav {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Override the inline-flex that caused left-align */
.btn-next,
.btn-prev {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  justify-content: center !important;
  /* Remove any flex: 1 that was stretching them */
  flex: 0 0 auto !important;
}

@media (max-width: 768px) {
  .step-nav {
    /* padding: 0 18px 16px !important; */
    gap: 10px !important;
  }



  .btn-next,
  .btn-prev {
    padding: 10px 20px !important;
    font-size: 0.75rem !important;
  }
}

/* ════════════════════════════════════════════════════
   FIX TEXT ALIGN & CENTERING
════════════════════════════════════════════════════ */
.reading-instruction {
  text-align: center !important;
}

#pageReading.deck-hidden .reading-header,
#pageReading.deck-hidden .reading-instruction {
  align-self: center !important;
  /* Make sure it's centered in the flex column */
  text-align: center !important;
}

#pageReading.deck-hidden .selected-area {
  width: 100% !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════
   FIX BOX-SIZING FOR DECK-HIDDEN CONTENT ALIGNMENT
   (Stops widths from exceeding 100vw causing off-center)
════════════════════════════════════════════════════ */
#pageReading.deck-hidden * {
  box-sizing: border-box !important;
}

#pageReading.deck-hidden .reading-header,
#pageReading.deck-hidden .reading-instruction {
  align-self: center !important;
  text-align: center !important;
  width: 100% !important;
  /* Reset padding or ensure box-sizing catches it */
  padding-left: 16px !important;
  padding-right: 16px !important;
}

#pageReading.deck-hidden .reading-controls {
  align-self: center !important;
  text-align: center !important;
  width: 100% !important;
  padding: 0 16px 24px !important;
}

#pageReading.deck-hidden .selected-area {
  display: flex !important;
  flex: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  justify-content: center !important;
}

/* Spread cards mystical floating in reading view */
#pageReading.deck-hidden .spread-card {
  animation: magicalFloat 4s ease-in-out infinite;
  animation-delay: calc(var(--slot-idx, 0) * 0.4s);
  overflow: visible !important;
}

@keyframes magicalFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

.reading-instruction {
  text-align: center !important;
}

/* ════════════════════════════════════════════════════
   USER FEEDBACK FIXES
════════════════════════════════════════════════════ */

/* 1. Desktop: selectedArea below deckArea */
@media (min-width: 769px) {
  #pageReading {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* keep centered on desktop */
  }

  #selectedArea {
    order: 2;
    margin-top: 24px;
    width: 100%;
    justify-content: center;
  }

  #deckArea {
    order: 1;
    margin-top: 20px;
  }
}

/* On mobile, keep selectedArea above deckArea */
@media (max-width: 768px) {
  #deckArea {
    margin-top: 2rem;
    order: 2;
    flex-shrink: 0 !important;
  }

  #readingComboWrap {
    order: 3 !important;
    width: 100% !important;
  }

  #selectedArea {
    order: 4;
    flex-shrink: 0 !important;
  }

  /* Centering safety in deck-hidden */
  #pageReading.deck-hidden {
    padding-bottom: 100rem;
  }
}

/* Centering safety in deck-hidden */
#pageReading.deck-hidden {
  align-items: center !important;
}

#pageReading.deck-hidden .selected-area {
  justify-content: center !important;
  align-self: center !important;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 250px !important;
  /* Force extra space below 10th card */
  margin-bottom: 40px;
}

/* 2. slot-label size & margin */
.slot-label {
  font-size: 0.95rem !important;
  margin-bottom: 8px !important;
  color: var(--c-gold-pale);
}

@media (max-width: 768px) {
  .slot-label {
    font-size: 0.82rem !important;
    margin-bottom: 6px !important;
  }
}

/* 3. Modal Meaning Wider (desktop) */
@media (min-width: 769px) {
  .meaning-modal-panel {
    max-width: 1100px !important;
    width: 90vw !important;
  }
}

.ab-text,
.ai-p {
  text-align: justify !important;
}

/* 4. Button SVG vertical alignment */
.btn-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn-control svg {
  margin-left: 0 !important;
  /* using gap instead */
}

/* ════════════════════════════════════════════════════
   Fix Desktop Ordering & Reading Question Alignment
════════════════════════════════════════════════════ */
.reading-question {
  margin: 0 auto !important;
  text-align: center !important;
}

@media (min-width: 769px) {
  .reading-controls {
    order: 3;
    margin-top: 32px;
    width: 100%;
    display: flex;
    justify-content: center;
    /* position: sticky; */
    bottom: 30px;
    z-index: 100;
    pointer-events: none;
  }

  .reading-controls>* {
    pointer-events: auto;
  }
}

/* ════════════════════════════════════════════════════
   FIXES: .hidden override & reading-header centering
════════════════════════════════════════════════════ */
.hidden {
  display: none !important;
}

.btn-control.hidden,
.btn-begin.hidden,
.btn-begin--analysis.hidden,
#btnFlipAll.hidden {
  display: none !important;
}

.reading-header {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.reading-question {
  width: 100% !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════
   Fix Modal Slot Label alignment
════════════════════════════════════════════════════ */
.mm-slot-label {
  text-align: left !important;
}

/* ════════════════════════════════════════════════════
   AI ANALYSIS STYLES
════════════════════════════════════════════════════ */
.ai-h3 {
  color: var(--c-gold);
  font-size: 1.15rem;
  font-family: var(--f-serif);
  margin: 28px 0 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ai-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px 0 20px;
  color: var(--c-gold);
  font-size: 0.8rem;
  opacity: 0.65;
}

.ai-divider::before,
.ai-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.45), transparent);
  margin: 0 16px;
}

/* ════════════════════════════════════════════════════
   DICTIONARY MODAL
════════════════════════════════════════════════════ */
.dict-modal,
.cd-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
  padding: 10px;
}

.dict-modal {
  background: radial-gradient(circle at center, rgba(15, 0, 30, 0.4) 0%, rgba(0, 0, 0, 0.65) 100%);

}

.cd-modal {
  background: rgba(20, 5, 30, 0.85);
  /* Tránh chồng double-blur khi cd-modal đè lên dict-modal */
}

.dict-modal.visible,
.cd-modal.visible {
  opacity: 1;
  pointer-events: all;
}

/* ════════════════════════════════════════════════════
   DICT CARD FAN ICON
════════════════════════════════════════════════════ */
.dict-card-fan {
  position: relative;
  width: 22px;
  height: 32px;
  display: inline-block;
  margin-right: 12px;
}

.fan-card {
  position: absolute;
  width: 18px;
  height: auto;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform-origin: bottom center;
  transition: transform 0.4s var(--ease-out);
  bottom: 0;
  left: 2px;
}

.fan-card-1 {
  transform: rotate(-20deg);
  z-index: 1;
}

.fan-card-2 {
  transform: rotate(0deg);
  z-index: 3;
}

.fan-card-3 {
  transform: rotate(20deg);
  z-index: 2;
}

.btn-dict:hover .fan-card-1 {
  transform: rotate(-35deg) translateY(-4px);
}

.btn-dict:hover .fan-card-2 {
  transform: translateY(-8px);
}

.btn-dict:hover .fan-card-3 {
  transform: rotate(35deg) translateY(-4px);
}


.dict-panel,
.cd-panel {
  width: 85vw;
  max-width: 1400px;
  max-height: 90vh;
  background: rgba(8, 0, 22, 0.99);
  border: 1px solid rgba(155, 48, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 60px rgba(155, 48, 255, 0.15);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
  transform: translateY(50px) scale(0.95);
  opacity: 0;
  transition: transform 3.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

@media (max-width: 768px) {

  .dict-panel,
  .cd-panel {
    width: calc(100vw - 24px);
    max-width: 100%;
    max-height: 92vh;
    border-radius: 14px;
    overflow-x: hidden;
    box-sizing: border-box;
    transform: translateX(40px) scale(0.95);
  }

  /* Ẩn toàn bộ thanh scroll trên mobile theo yêu cầu */
  *::-webkit-scrollbar {
    display: none !important;
  }

  * {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
}

.dict-modal.visible .dict-panel,
.cd-modal.visible .cd-panel {
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

.dict-panel::before,
.cd-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-violet), var(--c-gold), var(--c-glow), var(--c-violet), transparent);
  background-size: 200% 100%;
  animation: bgGradientRunning 3s linear infinite;
  z-index: 20;
}

@keyframes bgGradientRunning {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.dict-header {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(155, 48, 255, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: rgba(10, 5, 30, 0.95);
  position: sticky;
  top: 0;
  z-index: 100;
}

.dict-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.25rem;
  color: var(--c-gold);
  margin: 0;
  white-space: nowrap;
}

.dict-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
}

.dict-search-wrap:focus-within {
  width: 200px;
  background: rgba(0, 0, 0, 0.4);
  border-color: var(--c-gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.dict-search-icon {
  position: absolute;
  left: 12px;
  color: var(--c-gold);
  pointer-events: none;
  z-index: 10;
}

.dict-search-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0 12px 0 40px;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  color: #fff;
  outline: none;
  cursor: pointer;
}

.dict-search-wrap:focus-within .dict-search-input {
  cursor: text;
}

.dict-search-input:focus {
  background: transparent;
}

.dict-search-input::placeholder {
  color: rgba(255, 215, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s;
}

.dict-search-wrap:focus-within .dict-search-input::placeholder {
  opacity: 1;
}


.dict-close,
.cd-close {
  background: none;
  border: none;
  color: rgba(232, 180, 255, 0.5);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 12px;
  margin: -6px -12px;
  transition: all 0.3s;
}

.cd-close {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 10;
}

.dict-close:hover,
.cd-close:hover {
  color: var(--c-gold);
  text-shadow: 0 0 10px var(--c-gold);
}

.dict-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.dict-group-title {
  font-family: 'Cinzel Decorative', serif;
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 20px;
  border-bottom: 1px dashed rgba(155, 48, 255, 0.3);
  padding-bottom: 8px;
}

/* ════════════════════════════════════════════════════
   CLARIFICATION MODAL CHAT
════════════════════════════════════════════════════ */
.clarify-screen {
  position: fixed;
  inset: 0;
  background: rgba(10, 0, 25, 0.95);
  /* Tối hơn một chút để tập trung */


  z-index: 100000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.clarify-screen.visible {
  opacity: 1;
  visibility: visible;
}

.clarify-container {
  width: 100%;
  max-width: 800px;
  animation: modalFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.clarify-progress {
  width: 100%;
  height: 4px;
  background: rgba(155, 48, 255, 0.2);
  border-radius: 4px;
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.clarify-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-glow), var(--c-gold));
  width: 0%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.5);
}

.cq-item {
  margin: 0 auto 30px auto;
  padding: 36px 32px;
  background: rgba(22, 14, 38, 0.65);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(201, 168, 76, 0.05);


  text-align: center;
}

.cq-text {
  font-family: 'EB Garamond', serif;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.cq-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}

.cq-btn {
  padding: 12px 0;
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 50px;
  color: var(--c-gold-pale);
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.cq-yes,
.cq-no {
  flex: 1 1 calc(50% - 6px);
  max-width: calc(50% - 6px);
}

.cq-share {
  flex: 1 1 100%;
  max-width: 100%;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: underline;
  text-underline-offset: 4px;
  border: none !important;
  background: transparent !important;
  padding: 8px 0 0 0 !important;
  margin-top: 5px;
}

.cq-share:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--c-gold) !important;
}

.cq-btn:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: rgba(201, 168, 76, 0.6);
  box-shadow: 0 0 15px rgba(201, 168, 76, 0.2);
  transform: translateY(-2px);
  color: var(--c-gold);
}

.cq-btn.active {
  background: rgba(201, 168, 76, 0.25);
  border-color: var(--c-gold);
  color: #fff;
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.4), inset 0 0 10px rgba(201, 168, 76, 0.2);
  text-shadow: 0 0 5px rgba(201, 168, 76, 0.5);
  transform: scale(0.96);
}

.dict-group-sub {
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  color: var(--c-gold-pale);
  font-style: italic;
  font-weight: 400;
}

.dict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

#dictCombos {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (min-width: 1300px) {
  #dictCombos {
    grid-template-columns: repeat(5, 1fr);
  }
}

.dict-card {
  cursor: pointer;
  text-align: center;
}

.dict-card-img-wrap {
  width: 100%;
  aspect-ratio: 384 / 667;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(155, 48, 255, 0.2);
  margin-bottom: 10px;
  position: relative;
  transition: all 0.3s;
}

.dict-card-img-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(201, 168, 76, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  z-index: 10;
  pointer-events: none;
}

.dict-card:hover .dict-card-img-wrap::after {
  animation: cardShine 0.8s ease-in-out forwards;
}

@keyframes cardShine {
  100% {
    left: 200%;
  }
}

.dict-card:hover .dict-card-img-wrap {
  border-color: rgba(201, 168, 76, 0.8);
  box-shadow: 0 0 15px rgba(201, 168, 76, 0.4);
}

.dict-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.dict-card:hover .dict-card-img-wrap img {
  transform: scale(1.05);
}

.dict-card-title {
  font-family: 'Philosopher', serif;
  font-size: 0.85rem;
  color: var(--c-gold);
  line-height: 1.2;
}

.dict-card-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  color: rgba(232, 180, 255, 0.6);
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════
   CARD DETAIL MODAL
════════════════════════════════════════════════════ */
.cd-content {
  padding: 30px;
  overflow-y: auto;
  flex: 1 1 auto;
}

@media (max-width: 768px) {
  .cd-content {
    padding: 16px 12px !important;
  }
}

.cd-layout {
  display: flex;
  gap: 30px;
}

.cd-img-col {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: max(0px, calc(45vh - 400px)) !important;
  align-self: flex-start;
}

.cd-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(155, 48, 255, 0.4);
  animation: modalCardFloat 5s ease-in-out infinite alternate;
}

@media (min-width: 769px) {
  .cd-img.cd-img--gold {
    /* border: 2px solid rgba(255, 215, 0, 0.6) !important; */
    box-shadow: 0 4px 30px rgba(255, 215, 0, 0.45) !important;
  }
}

@keyframes modalCardFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  100% {
    transform: translateY(-6px) rotate(0.5deg) scale(1.02);
  }
}

.cd-info-col {
  flex: 1 1 auto;
}

.cd-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.8rem;
  color: var(--c-glow);
  margin: 0 0 5px;
}

.cd-name-vi {
  font-family: 'Philosopher', serif;
  font-size: 1.2rem;
  color: var(--c-gold-pale);
  font-weight: normal;
}

.cd-number-arcana {
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  color: rgba(232, 180, 255, 0.8);
  font-style: italic;
  margin-bottom: 15px;
}

.cd-astro {
  display: inline-block;
  background: rgba(155, 48, 255, 0.1);
  border: 1px solid rgba(155, 48, 255, 0.3);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: 'Philosopher', serif;
  font-size: 0.85rem;
  color: var(--c-pale);
  margin-bottom: 24px;
}

.cd-astro span {
  color: var(--c-gold);
}

.cd-section {
  margin-bottom: 24px;
  background: rgba(14, 0, 36, 0.95);
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(155, 48, 255, 0.15);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .cd-section {
    padding: 10px !important;
  }
}

.cd-sec-title {
  font-family: 'Philosopher', serif;
  font-size: 1rem;
  color: var(--c-gold);
  margin: 0 0 10px;
  letter-spacing: 0.05em;
}

.cd-aspect-group {
  margin-top: 28px;
}

.cd-aspect-group-title {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--c-gold-bright);
  text-transform: uppercase;
  padding: 10px 0 8px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, rgba(8, 0, 20, 1) 80%, transparent);
  z-index: 2;
}

/* ── Dictionary Accordion ─────────────────────────── */
.cd-aspects-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cda-group {
  border: 1px solid rgba(155, 48, 255, 0.2);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10, 0, 28, 0.6);
  margin-bottom: 8px;
}

.cda-group-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}

.cda-group-btn:hover {
  background: rgba(155, 48, 255, 0.1);
}

.cda-group-label {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--c-gold-bright);
  text-transform: uppercase;
  flex: 1 1 auto;
  text-align: center;
}

.cda-group-arrow {
  font-size: 1rem;
  color: var(--c-glow);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.cda-group-body {
  border-top: 1px solid rgba(155, 48, 255, 0.15);
  padding: 6px 8px 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
}

.cda-group-body.open {
  display: flex;
  animation: cdaSlideDown 0.35s ease;
}




.cda-item-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(155, 48, 255, 0.05);
  border: 1px solid rgba(155, 48, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.cda-item-btn:hover {
  background: rgba(155, 48, 255, 0.15);
  border-color: rgba(155, 48, 255, 0.35);
}

.cda-item-label {
  font-family: 'Philosopher', serif;
  font-size: 0.83rem;
  color: var(--c-pale);
  letter-spacing: 0.04em;
}

.cda-item-arrow {
  font-size: 0.9rem;
  color: rgba(155, 48, 255, 0.6);
  flex-shrink: 0;
}

.cda-item-body {
  padding: 12px 10px;
  border-left: 2px solid rgba(155, 48, 255, 0.3);
  margin-left: 6px;
  margin-bottom: 4px;
  display: none;
}

.cda-item-body.open {
  display: block;
  animation: cdaSlideDown 0.3s ease;
}

@keyframes cdaSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cda-item-body .cd-desc {
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.cda-rev strong {
  color: #ff9090;
}

.cd-desc {
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  color: #ddd;
  line-height: 1.6;
  margin-bottom: 12px;
}

.cd-kws {
  font-family: 'Philosopher', serif;
  font-size: 0.9rem;
  color: var(--c-pale);
}

.cd-kws strong {
  color: var(--c-glow);
  font-weight: 400;
}

@media (max-width: 768px) {
  .cd-content {
    padding: 15px;
  }

  .cd-layout {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .cd-img-col {
    width: 100%;
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .cd-img {
    max-width: 220px;
    width: 100%;
  }

  .cd-info-col {
    width: 100%;
  }

  .dict-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .dict-card-img-wrap {
    margin-bottom: 6px;
  }

  .cda-item-btn {
    padding: 10px 12px;
  }

  .cda-group-body {
    padding: 4px;
  }

  .cda-item-body {
    padding: 8px 5px;
    margin-left: 2px;
  }

  .combo-entry-card {
    padding: 10px 8px !important;
    margin-bottom: 8px;
  }

  .combo-entry-card p {
    font-size: 0.9rem !important;
    line-height: 1.5;
  }

  .cd-astro {
    padding: 6px 10px;
    font-size: 0.8rem;
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .dict-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cd-content {
    padding: 10px;
  }

  .cda-item-body {
    margin-left: 0;
    border-left: 1px solid rgba(155, 48, 255, 0.2);
  }
}

/* ── Gender Custom Dropdown ─────────────────────────── */
.gender-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: linear-gradient(160deg, rgba(20, 0, 40, 0.98), rgba(10, 0, 20, 0.99));
  border: 1px solid rgba(155, 48, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(155, 48, 255, 0.1);
  overflow: hidden;
  z-index: 100;

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.gender-dropdown.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.gender-opt {
  padding: 12px 16px;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  color: var(--c-pale);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  border-bottom: 1px solid rgba(155, 48, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.gender-opt:last-child {
  border-bottom: none;
}

.gender-opt:hover,
.gender-opt.selected {
  background: rgba(155, 48, 255, 0.2);
  color: #fff;
}

.g-icon {
  font-size: 1.1rem;
  font-family: Arial, sans-serif;
  line-height: 0;
  display: inline-flex;
  align-items: center;
}

/* ── Privacy Note ──────────────────────── */
.privacy-note {
  font-family: 'EB Garamond', serif;
  font-size: 0.88rem;
  color: rgba(232, 180, 255, 0.45);
  text-align: center;
  margin-top: -12px;
  margin-bottom: 22px;
}

.privacy-link {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s;
}

.privacy-link:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(201, 168, 76, 0.6);
}

/* --- History Enhancements --- */
.history-panel {
  max-width: 650px !important;
}

/* Pagination */
.hist-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  margin-top: 10px;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
}

.hist-page-btn {
  background: rgba(30, 15, 50, 0.8);
  border: 1px solid rgba(155, 48, 255, 0.4);
  color: rgba(232, 180, 255, 0.8);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.hist-page-btn:hover:not(:disabled) {
  background: rgba(155, 48, 255, 0.3);
  color: var(--c-gold);
  border-color: var(--c-gold);
}

.hist-page-btn.active {
  background: rgba(201, 168, 76, 0.2);
  color: var(--c-gold);
  border-color: var(--c-gold);
  font-weight: bold;
}

.hist-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Date Filter Button */
.hist-date-btn {
  background: transparent;
  border: 1px dashed rgba(201, 168, 76, 0.5);
  color: rgba(201, 168, 76, 0.9);
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'EB Garamond', serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 15px;
}

.hist-date-btn:hover {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--c-gold);
  color: var(--c-gold);
}

.hist-date-btn.active {
  background: rgba(201, 168, 76, 0.25);
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  font-weight: 600;
}

/* Date Filter Modal */
.hist-date-modal {
  position: absolute;
  top: 70px;
  left: 50%;
  background: rgba(15, 5, 25, 0.95);

  border: 1px solid rgba(155, 48, 255, 0.5);
  border-radius: 8px;
  padding: 20px;
  width: 280px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(155, 48, 255, 0.2);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hist-date-modal.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.hist-date-field {
  margin-bottom: 15px;
  text-align: left;
}

.hist-date-field label {
  display: block;
  font-family: 'Philosopher', serif;
  color: var(--c-gold);
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.hist-date-field input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  background: rgba(30, 15, 50, 0.6);
  border: 1px solid rgba(155, 48, 255, 0.4);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  color-scheme: dark;
  outline: none;
  transition: border-color 0.3s;
}

.hist-date-field input[type="date"]:focus {
  border-color: var(--c-gold);
}

.hist-date-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.hist-date-actions button {
  flex: 1 1 auto;
  padding: 8px;
  border-radius: 4px;
  font-family: 'Philosopher', serif;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s;
}

.btn-date-apply {
  background: rgba(201, 168, 76, 0.2);
  color: var(--c-gold);
  border-color: rgba(201, 168, 76, 0.5) !important;
}

.btn-date-apply:hover {
  background: rgba(201, 168, 76, 0.4);
}

.btn-date-clear {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.3) !important;
}

.btn-date-clear:hover {
  background: rgba(255, 107, 107, 0.2);
}

/* ===================== DAILY DRAW ===================== */
.daily-draw-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 5, 25, 0.85);

  border: 1px solid rgba(201, 168, 76, 0.4);
  padding: 10px 15px;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(155, 48, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.daily-draw-widget:hover {
  transform: translateY(-2px);
  border-color: var(--c-gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(201, 168, 76, 0.4);
}

.daily-draw__ring {
  position: absolute;
  top: 50%;
  left: 25px;
  /* Center of icon */
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.6);
  animation: slowPulse 3s infinite alternate;
  pointer-events: none;
}

.daily-draw__icon {
  width: 32px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 2;
}

.daily-draw__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s;
}

.daily-draw__text {
  display: flex;
  flex-direction: column;
}

.daily-draw__text span {
  font-family: 'Philosopher', serif;
  font-size: 0.95rem;
  color: var(--c-gold);
  letter-spacing: 0.05em;
}

.daily-draw__text small {
  font-family: 'EB Garamond', serif;
  font-size: 0.75rem;
  color: rgba(232, 180, 255, 0.7);
  font-style: italic;
}

/* Modal Overlay */
.daily-draw-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 2, 18, 0.8);

  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.daily-draw-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.daily-draw-panel {
  background: linear-gradient(180deg, rgba(30, 15, 50, 0.95) 0%, rgba(15, 5, 25, 0.95) 100%);
  border: 1px solid rgba(201, 168, 76, 0.5);
  border-radius: 16px;
  padding: clamp(20px, 5vw, 40px) clamp(15px, 4vw, 30px);
  width: 90%;
  max-width: 550px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(155, 48, 255, 0.1);
  transform: translateY(20px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.daily-draw-panel::-webkit-scrollbar {
  width: 4px;
}

.daily-draw-panel::-webkit-scrollbar-track {
  background: transparent;
}

.daily-draw-panel::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.4);
  border-radius: 4px;
}

.daily-draw-overlay.open .daily-draw-panel {
  transform: translateY(0) scale(1);
}

.daily-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  color: rgba(201, 168, 76, 0.6);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.3s, color 0.3s;
  z-index: 20;
}

.daily-close:hover {
  color: var(--c-gold);
  transform: scale(1.1);
  text-shadow: 0 0 10px var(--c-gold);
}

.daily-title {
  font-family: 'Philosopher', serif;
  color: var(--c-gold-bright);
  font-size: 1.2rem;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.3);
}

/* Fliping Card */
.daily-card-wrap {
  width: 140px;
  height: 224px;
  margin: 0 auto 25px;
  perspective: 1000px;
  cursor: pointer;
  position: relative;
}

.daily-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.daily-card-wrap.flipped .daily-card-inner {
  transform: rotateY(180deg) scale(1.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(201, 168, 76, 0.4);
}

@keyframes dailyFlipAway {
  0% {
    transform: rotateY(180deg) scale(1.1) translateY(0);
    opacity: 1;
  }

  30% {
    transform: rotateY(165deg) scale(1.15) translateY(-20px);
    opacity: 1;
  }

  100% {
    transform: rotateY(270deg) scale(0.9) translateY(-140px);
    opacity: 0;
  }
}

.daily-card-wrap.flip-away-effect .daily-card-inner {
  animation: dailyFlipAway 0.5s ease-in forwards;
  pointer-events: none;
}

.daily-card-front,
.daily-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
}

.daily-card-front {
  border-color: rgba(201, 168, 76, 0.6);
  pointer-events: none;
  /* Just for glow effect */
}

.daily-card-front img,
.daily-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.daily-card-back {
  transform: rotateY(180deg);
  border-color: var(--c-gold);
}

.daily-hint {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(232, 180, 255, 0.8);
  margin-top: 10px;
  animation: slowPulse 2s infinite alternate;
}

.daily-result {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.6s ease;
}

.daily-result.visible {
  opacity: 1;
  max-height: 900px;
  margin-top: clamp(10px, 3vw, 20px);
  overflow: visible;
}

.daily-name {
  font-family: 'Philosopher', serif;
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 10px;
  text-shadow: 0 0 8px rgba(155, 48, 255, 0.6);
}

.daily-desc {
  font-family: 'EB Garamond', serif;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
  max-height: 25vh;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.4) transparent;
}

.daily-desc::-webkit-scrollbar {
  width: 4px;
}

.daily-desc::-webkit-scrollbar-track {
  background: transparent;
}

.daily-desc::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.4);
  border-radius: 4px;
}

/* Shimmer during fetch */
.shimmer-text {
  background: linear-gradient(90deg, rgba(232, 180, 255, 0.7) 0%, #fff 50%, rgba(232, 180, 255, 0.7) 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 2s linear infinite;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-style: italic;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* Compact Daily Widget */
.btn-float-action {
  position: fixed;
  bottom: 85px;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(15, 5, 25, 0.85);

  border: 1px solid rgba(201, 168, 76, 0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(155, 48, 255, 0.3);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1500;
  transition: all 0.3s ease;
  padding: 0;
  outline: none;
}

.btn-float-action:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: var(--c-gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 20px rgba(201, 168, 76, 0.6);
}

.btn-float-action img {
  width: 20px;
  height: 34px;
  border-radius: 2px;
  z-index: 2;
  transition: transform 0.3s;
  object-fit: contain;
}

.daily-draw__ring-mini {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.6);
  animation: slowPulse 2s infinite alternate;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════
   DAILY DRAW MODAL ENHANCEMENTS
════════════════════════════════════════════════════ */
.daily-line-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--c-violet), var(--c-gold), transparent);
}

.daily-status {
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--c-gold-pale);
  margin-top: -6px;
  margin-bottom: 15px;
  opacity: 0.9;
}

.daily-card-wrap.flipped .daily-card-back img {
  transition: filter 0.3s ease, transform 0.3s ease;
}

.daily-card-wrap.flipped .daily-card-back img:hover {
  cursor: pointer;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)) brightness(1.1);
}

/* ============================================
   GLOBAL: Disable all backdrop-filter blur
   Improves performance on all devices
   ============================================ */
/* ── Gamification: Daily Streak & Achievements ────────── */
@keyframes spinMagic {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.spin-magic-circle {
  animation: spinMagic 12s linear infinite;
  transform-origin: center;
  overflow: visible !important;
}

.mm-orient .spin-magic-circle,
.ab-orientation .spin-magic-circle,
.card-orientation .spin-magic-circle,
.daily-streak-badge .spin-magic-circle {
  margin-top: 0 !important;
  margin-right: 6px !important;
  vertical-align: middle;
  flex-shrink: 0;
}

.daily-streak-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 176, 144, 0.15);
  border: 1px solid rgba(255, 176, 144, 0.4);
  color: #ffb090;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'Philosopher', serif;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-top: -10px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  box-shadow: 0 0 10px rgba(255, 176, 144, 0.15);
}

.daily-streak-badge:hover {
  background: rgba(255, 176, 144, 0.25);
  box-shadow: 0 0 15px rgba(255, 176, 144, 0.3);
  transform: translateY(-2px);
}

.achv-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(10, 0, 20, 0.4);
  border: 1px solid rgba(155, 48, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  transition: all 0.3s;
}

.achv-unlocked {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.1), rgba(155, 48, 255, 0.15));
  border-color: rgba(201, 168, 76, 0.4);
  box-shadow: 0 4px 12px rgba(107, 0, 204, 0.2);
}

.achv-locked {
  opacity: 0.7;
}

.achv-locked .achv-icon {
  filter: grayscale(1);
}

.achv-icon {
  font-size: 1.8rem;
  color: var(--c-gold);
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.3);
}

.achv-info {
  flex: 1 1 auto;
}

.achv-name {
  font-family: 'Philosopher', serif;
  font-size: 1.1rem;
  color: var(--c-pale);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.achv-progress {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.achv-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-violet), var(--c-gold));
  border-radius: 4px;
}

.achv-progress-text {
  font-family: 'EB Garamond', serif;
  font-size: 0.75rem;
  color: var(--c-pale);
  opacity: 0.7;
  text-align: right;
}

#achievementsPanel {
  max-width: 650px;
  width: 92%;
  padding: 35px 24px;
  text-align: left;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(16, 0, 32, 0.98), rgba(6, 0, 16, 0.99));
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(201, 168, 76, 0.15);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

#achievementsPanel::-webkit-scrollbar {
  width: 5px;
}

#achievementsPanel::-webkit-scrollbar-track {
  background: rgba(20, 0, 50, 0.2);
  border-radius: 3px;
  margin: 10px 0;
}

#achievementsPanel::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.4);
  border-radius: 3px;
}

#achievementsPanel::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.7);
}

@keyframes comboFloat {
  0% {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
  }

  100% {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.2);
  }
}

@keyframes lightningSweep {
  0% {
    left: -100%;
    opacity: 0;
  }

  5% {
    opacity: 1;
    box-shadow: 0 0 30px #fff, 0 0 50px #ffd700;
  }

  20% {
    left: 100%;
    opacity: 0;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes flipShadow {
  0% {
    transform: rotateY(0deg) scale(0.9);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: rotateY(360deg) scale(1.15);
    filter: drop-shadow(0 0 35px rgba(155, 48, 255, 0.9));
  }
}

@keyframes shadowTextFade {
  0% {
    opacity: 0;
    transform: translateY(10px);
    text-shadow: 0 0 0px var(--c-glow);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 15px var(--c-glow);
  }
}

.combo-early-alert {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
  white-space: nowrap;
  animation: pulseComboAlert 2s infinite ease-in-out;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 10;
}

@keyframes pulseComboAlert {
  0% {
    transform: translate(-50%, 0) scale(0.95);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }

  50% {
    transform: translate(-50%, -5px) scale(1.05);
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.9), 0 0 15px #ffd700;
    color: #fff;
  }

  100% {
    transform: translate(-50%, 0) scale(0.95);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }
}

.combo-glow .ab-card,
.slot-wrap.combo-lightning .tarot-card {
  border-radius: 14px !important;
}

.selected-area.all-flipped .slot-wrap.combo-lightning .tarot-card.spread-card.flipped .card-face,
.slot-wrap.combo-lightning .tarot-card .card-face,
.combo-glow .ab-card {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.7), inset 0 0 15px rgba(255, 215, 0, 0.4) !important;
  animation: comboPulseAura 2.5s ease-in-out infinite alternate !important;
}

.slot-wrap {
  transition: opacity 1s, filter 1s, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dimmed-card {
  z-index: 1 !important;
}

.slot-wrap.combo-lightning {
  z-index: 100 !important;
}

/* Removed multi-color lightning surge effect as requested */

.slot-wrap.combo-lightning {
  z-index: 50 !important;
}

@keyframes comboPulseAura {
  0% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), inset 0 0 8px rgba(255, 215, 0, 0.2);
  }

  100% {
    box-shadow: 0 0 45px rgba(255, 230, 100, 0.9), inset 0 0 25px rgba(255, 215, 0, 0.6);
  }
}

.dict-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  padding: 15px 5px;
}

.dict-tabs::-webkit-scrollbar {
  display: none;
}

/* Luận Giải Thủ Công */
.dr-spread-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 215, 0, 0.2);
  color: #fff;
  transition: all 0.3s;
}

.dr-spread-opt:hover {
  background: rgba(255, 215, 0, 0.1);
}

.dr-spread-opt input {
  accent-color: var(--c-gold);
}

.dr-spread-opt input:checked+span {
  color: var(--c-gold);
  font-weight: bold;
}

.dr-slot {
  width: 90px;
  height: 155px;
  border-radius: 12px;
  border: 1.5px dashed rgba(255, 215, 0, 0.5);
  background: linear-gradient(135deg, rgba(20, 10, 30, 0.8), rgba(10, 5, 20, 0.9));
  box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255, 215, 0, 0.4);
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dr-slot:hover {
  background: linear-gradient(135deg, rgba(30, 15, 45, 0.8), rgba(20, 10, 30, 0.9)) !important;
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2), inset 0 0 20px rgba(255, 215, 0, 0.1) !important;
  color: rgba(255, 215, 0, 0.8);
  transform: translateY(-4px);
}

.dr-slot .dr-empty-plus {
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3));
  transition: transform 0.3s;
}

.dr-slot:hover .dr-empty-plus {
  transform: scale(1.2);
}

.dict-page-btn {
  background: rgba(14, 0, 36, 0.6);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: var(--c-gold);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.dict-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: rgba(255, 215, 0, 0.1);
}

.dict-page-btn:not(:disabled):hover {
  background: rgba(255, 215, 0, 0.15);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.dict-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 14px;
  padding-right: 24px !important;
}

.dict-select option {
  background: #1a0b2e;
  color: var(--c-gold);
}

@media (max-width: 768px) {
  .dict-header {
    padding: 12px 16px;
    gap: 8px;
  }

  .dict-title {
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
  }

  .dict-header-actions {
    width: 100%;
    justify-content: center !important;
    gap: 8px;
  }

  .dict-close {
    position: absolute;
    top: 5px;
    right: 5px;
    margin: 0;
    z-index: 100;
  }

  .dict-tab {
    padding: 8px 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dict-tab .tab-text {
    display: none;
  }

  .dict-tab .tab-icon {
    display: flex !important;
    margin: 0;
    transform: scale(0.85);
    /* Slightly scale down original full combo filters */
  }

  .dict-search-wrap:focus-within {
    width: 160px;
  }

  #comboFilterWrap {
    justify-content: flex-start !important;
    padding: 20px 10px !important;
  }

  .combo-chip {
    min-width: 60px;
    min-height: 56px;
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  .combo-chip .chip-cards {
    transform: scale(0.85);
  }
}

.dict-tab {
  background: rgba(20, 10, 0, 0.6);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #c9a84c;
  padding: 8px 16px;
  font-family: 'Philosopher', serif;
  font-size: 0.95rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
}

.dict-tab:hover {
  background: rgba(40, 30, 0, 0.8);
  border-color: rgba(255, 215, 0, 0.6);
}

.dict-tab.active {
  background: linear-gradient(135deg, rgba(80, 60, 0, 0.8), rgba(30, 20, 0, 0.9));
  border-color: #ffd700;
  color: #fff;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

#tabDirectRead {
  background: rgba(25, 0, 40, 0.6);
  border-color: rgba(155, 48, 255, 0.4);
  color: #e2baff;
}

#tabDirectRead:hover {
  background: rgba(45, 0, 70, 0.8);
  border-color: rgba(155, 48, 255, 0.7);
}

#tabDirectRead.active {
  background: linear-gradient(135deg, rgba(70, 0, 150, 0.8), rgba(30, 0, 80, 0.9));
  border-color: #bb66ff;
  color: #fff;
  box-shadow: 0 0 15px rgba(155, 48, 255, 0.5);
}

#tabCombos {
  position: relative;
  overflow: hidden;
  animation: breathingBorder 2s ease-in-out infinite alternate;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

@keyframes breathingBorder {
  0% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.2), inset 0 0 5px rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.4);
  }

  100% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7), inset 0 0 8px rgba(255, 215, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.8);
  }
}

#tabCombos::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255, 215, 0, 0.3) 50%, transparent);
  transform: rotate(30deg) translateX(-100%);
  animation: shineTab 4s infinite linear;
  pointer-events: none;
}

@keyframes shineTab {
  0% {
    transform: rotate(30deg) translateX(-100%);
  }

  30%,
  100% {
    transform: rotate(30deg) translateX(100%);
  }
}

#tabCombos.active {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(255, 215, 0, 0.4);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 215, 0, 0.6);
  animation: tabPulse 2s infinite alternate;
}

@keyframes tabPulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.03);
  }
}

@keyframes floatParticle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--drift), -160px) scale(0.2);
    opacity: 0;
  }
}

.combo-skeleton-card {
  height: 120px;
  background: linear-gradient(145deg, rgba(35, 25, 10, 0.4), rgba(15, 10, 5, 0.4));
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.combo-skeleton-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.05), transparent);
  animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
  100% {
    left: 150%;
  }
}

.combo-controls-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* Base order for mobile */
.dict-group-flex .dict-combos-header {
  order: 1;
}

.dict-group-flex .dict-grid {
  order: 3;
}

/* Universal order: pagination to the bottom and sticky */
.dict-group-flex .combos-pagination {
  order: 4;
  position: sticky;
  bottom: -24px;
  background: rgba(10, 5, 25, 0.95);
  padding: 15px 24px;
  margin: 20px -24px -24px -24px;
  z-index: 100;
  width: auto;
  border-top: 1px solid rgba(155, 48, 255, 0.2);
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.6);
  /* backdrop-filter: blur(10px); */
}

.dict-combo-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, rgba(35, 25, 10, 0.95), rgba(15, 10, 5, 0.95));
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

.dict-combo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, 0.8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(201, 168, 76, 0.3);
}

.dict-combo-card.five-card-combo {
  border: 1px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.1), inset 0 0 5px rgba(255, 215, 0, 0.05);
  background: linear-gradient(145deg, rgba(45, 30, 0, 0.95), rgba(20, 10, 0, 0.95));
}

.dict-combo-card.five-card-combo:hover {
  border-color: rgba(255, 230, 100, 0.8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 215, 0, 0.2), inset 0 0 5px rgba(255, 215, 0, 0.1);
  transform: translateY(-5px);
}

.dict-combo-card.five-card-combo .dict-combo-title {
  color: #fff7cc;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4), 0 0 10px rgba(255, 215, 0, 0.2);
}

.dict-combo-title {
  font-family: 'Philosopher', serif;
  font-size: 1rem;
  color: #ffd700;
  margin-bottom: 16px;
  line-height: 1.4;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.dict-combo-imgs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.dict-combo-imgs img {
  width: 44px;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.dict-combo-card.five-card-combo .dict-combo-imgs img {
  width: 46px;
}

.dict-combo-card.three-card-combo .dict-combo-imgs img {
  width: 55px;
}

.dict-combo-plus {
  color: rgba(255, 215, 0, 0.5);
  font-size: 1.1rem;
}

.combo-list-pc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .combo-list-pc {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
  }

  .combo-list-pc .combo-item-wrap {
    flex: 1 1 auto;
    min-width: 200px;
    border-top: none !important;
    border-left: 1px dashed rgba(255, 215, 0, 0.3);
    padding-top: 0 !important;
    padding-left: 20px !important;
    margin-top: 0 !important;
  }

  .combo-list-pc .combo-item-wrap:first-child {
    border-left: none;
    padding-left: 0 !important;
  }
}

.combo-result-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.combo-result-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.combo-result-text {
  text-align: center;
}

@media (min-width: 768px) {
  .combo-result-layout {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
  }

  .combo-result-cards {
    flex: 0 0 auto;
    max-width: 55%;
    flex-direction: row;
    justify-content: center;
    padding-right: 20px;
  }

  .combo-result-text {
    flex: 1;
    text-align: left !important;
    padding-left: 20px;
    border-left: 1px dashed rgba(255, 215, 0, 0.3);
  }
}

/* --- Direct Read Spread Styles --- */
.dr-spread-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.dr-spread-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  font-family: 'Philosopher', serif;
  font-size: 1.1rem;
  color: #fff;
}

.dr-spread-opt:hover {
  border-color: rgba(255, 215, 0, 0.6);
  background: rgba(255, 215, 0, 0.05);
}

.dr-spread-opt input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  display: grid;
  place-content: center;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}

.dr-spread-opt input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color: var(--c-gold);
}

.dr-spread-opt input[type="radio"]:checked {
  border-color: var(--c-gold);
}

.dr-spread-opt input[type="radio"]:checked::before {
  transform: scale(1);
}

.dr-spread-opt:has(input[type="radio"]:checked) {
  border-color: var(--c-gold);
  background: rgba(255, 215, 0, 0.1);
  color: var(--c-gold);
}

/* ── User Avatar Badge ───────────────────────────────── */
.user-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.5);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.3);
  object-fit: cover;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.user-avatar--clickable {
  cursor: pointer;
}

.user-avatar--clickable:hover {
  border-color: rgba(201, 168, 76, 0.95);
  box-shadow: 0 0 22px rgba(201, 168, 76, 0.55), 0 0 8px rgba(155, 48, 255, 0.4);
  transform: scale(1.06);
}

/* google login modal always above premium deck modal */
.google-login-overlay {
  z-index: 10010 !important;
}

/* --- Pagination & Dropdown --- */
.combos-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dict-page-btn {
  background: linear-gradient(145deg, rgba(20, 5, 30, 0.7), rgba(10, 2, 15, 0.9));
  border: 1px solid rgba(201, 168, 76, 0.25);
  color: rgba(201, 168, 76, 0.8);
  border-radius: 50%;
  /* Perfect circles */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  font-family: 'Philosopher', serif;
  font-size: 1rem;
}

.dict-page-btn:hover:not(.disabled) {
  background: linear-gradient(145deg, rgba(40, 20, 60, 0.7), rgba(20, 10, 30, 0.9));
  border-color: rgba(201, 168, 76, 0.8);
  color: #fff;
  box-shadow: 0 0 15px rgba(201, 168, 76, 0.25), 0 4px 10px rgba(0, 0, 0, 0.6);
  transform: translateY(-3px);
}

.dict-page-btn.active {
  background: linear-gradient(135deg, rgba(201, 168, 76, 1), rgba(160, 120, 30, 1));
  border: none;
  color: #100520;
  /* Dark inner text */
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  font-weight: bold;
  transform: scale(1.1);
}

.dict-page-btn.disabled {
  opacity: 0.25;
  cursor: not-allowed;
  background: transparent;
  border-color: rgba(201, 168, 76, 0.15);
  box-shadow: none;
  color: rgba(201, 168, 76, 0.4);
}

.dict-page-dots {
  background: transparent;
  border: none;
  color: rgba(232, 180, 255, 0.6);
  font-family: "Philosopher", serif;
  font-size: 1.1rem;
  padding: 0 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 20px;
}

.dict-page-info {
  color: var(--c-gold);
  font-family: "Philosopher", serif;
  font-size: 1.05rem;
  min-width: 50px;
  text-align: center;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.05);
}

.mystical-dropdown-wrap {
  position: relative;
  min-width: 170px;
  flex: 1;
  max-width: 220px;
  z-index: 100;
}

.mystical-dropdown-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(145deg, rgba(20, 5, 30, 0.8), rgba(10, 2, 15, 0.9));
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: var(--c-gold);
  padding: 10px 16px;
  border-radius: 12px;
  font-family: 'Philosopher', serif;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mystical-dropdown-display:hover {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
  background: linear-gradient(145deg, rgba(30, 10, 45, 0.9), rgba(15, 5, 25, 0.95));
}

.mystical-dropdown-display.open {
  border-color: rgba(255, 215, 0, 0.9);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.mystical-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(25, 10, 35, 0.98), rgba(10, 5, 20, 0.98));
  border: 1px solid rgba(255, 215, 0, 0.5);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 0;
  display: none;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  max-height: 220px;
  overflow-y: auto;
  /* backdrop-filter: blur(10px); */
}

.mystical-dropdown-list.open {
  display: block;
  animation: fadeInDropdown 0.2s ease forwards;
}

@keyframes fadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mystical-dropdown-item {
  padding: 12px 16px;
  color: rgba(232, 180, 255, 0.8);
  font-family: 'Philosopher', serif;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid rgba(255, 215, 0, 0.05);
}

.mystical-dropdown-item:last-child {
  border-bottom: none;
}

.mystical-dropdown-item:hover {
  background: rgba(255, 215, 0, 0.1);
  color: #fff;
  padding-left: 20px;
}

.mystical-dropdown-item.active {
  color: var(--c-gold);
  font-weight: bold;
  background: linear-gradient(90deg, rgba(80, 60, 0, 0.3), transparent);
  border-left: 3px solid var(--c-gold);
  padding-left: 13px;
  /* 16 - 3 */
}

/* -- Ritual Burn Mode (Step 3) ---------------------- */
.ritual-mode .mystical-textarea {
  background-color: #dfcdb6 !important;
  color: #3b2818 !important;
  font-family: 'EB Garamond', serif !important;
  font-style: italic;
  font-size: 1.1rem;
  border-radius: 4px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.15"/></svg>');
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 80, 0, 0.2);
  border: 1px solid #a3825a !important;
}

.ritual-mode .mystical-label {
  color: #7b4e28 !important;
}

.ritual-mode .char-count {
  color: rgba(255, 120, 30, 0.8) !important;
}

.ritual-mode#customQPanel {
  /* This transition handles the sepia/opacity change when clicking Burn */
  transform-origin: center bottom;
}

/* Combo Chips Filter Layout */
.comboFilterWrap {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
}

.combo-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(20, 10, 30, 0.7), rgba(10, 5, 15, 0.9));
  border: 1px solid rgba(201, 168, 76, 0.25);
  color: rgba(232, 224, 255, 0.7);
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.85rem;
  font-family: 'Philosopher', serif;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 0 rgba(201, 168, 76, 0);
  min-width: 80px;
  min-height: 72px;
  height: max-content;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.combo-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.combo-chip:hover {
  border-color: rgba(201, 168, 76, 0.6);
  color: #fff;
  background: linear-gradient(160deg, rgba(30, 15, 50, 0.8), rgba(15, 5, 25, 0.95));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(201, 168, 76, 0.15);
}

.combo-chip:hover::before {
  opacity: 1;
}

.combo-chip.active {
  background: linear-gradient(160deg, rgba(50, 35, 10, 0.8), rgba(20, 10, 5, 0.95));
  color: var(--c-gold);
  border-color: var(--c-gold);
  font-weight: bold;
  box-shadow: 0 0 25px rgba(201, 168, 76, 0.35), inset 0 0 12px rgba(201, 168, 76, 0.15);
  transform: translateY(-4px);
}

.combo-chip.active::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  box-shadow: 0 0 15px var(--c-gold);
}

/* Icons for cards inside chips */
.chip-cards {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  align-items: flex-end;
  justify-content: center;
  transition: all 0.3s;
}

.combo-chip:hover .chip-cards span {
  border-color: var(--c-gold);
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.6);
}

.combo-chip.active .chip-cards span {
  background: rgba(201, 168, 76, 0.4);
  border-color: #fff;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.8);
}

.chip-cards span {
  width: 12px;
  height: 18px;
  border-radius: 2px;
  background: rgba(201, 168, 76, 0.2);
  border: 1px solid rgba(201, 168, 76, 0.6);
  box-shadow: 0 0 4px rgba(201, 168, 76, 0.2);
  transition: all 0.3s;
}

.chip-cards span.mid {
  height: 22px;
  transform: translateY(-2px);
}

/* Mobile Pagination Fix */
@media (max-width: 500px) {
  .combos-pagination {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    max-width: 100%;
    white-space: nowrap;
    padding: 15px 10px;
    justify-content: flex-start !important;
    scrollbar-width: none;
  }

  .combos-pagination::-webkit-scrollbar {
    display: none;
  }

  .dict-page-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    flex-shrink: 0;
  }
}

/* Combo Thumbnail Sizes */
:root {
  --combo5-w: 35px;
  --combo3-w: 48px;
}

@media (max-width: 500px) {
  :root {
    --combo5-w: 42px;
    --combo3-w: 58px;
  }

  .dict-combo-title {
    font-size: 1.15rem !important;
    min-height: 48px !important;
  }

  .dict-combo-tag {
    font-size: 0.75rem !important;
    padding: 5px 12px !important;
  }

  .dict-combo-plus {
    font-size: 1.25rem !important;
    margin: 0 4px !important;
  }

  .dict-combo-card.five-card-combo .dict-combo-plus {
    margin: 0 1px !important;
  }
}

/* ════════════════════════════════════════════════════
   MOBILE PERFORMANCE - DISABLE DROP-SHADOW FILTERS
════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .login-sigil svg,
  .landing-title,
  .dob-display__arrow,
  .dr-empty-plus,
  .daily-card-wrap.flipped .daily-card-back img:hover {
    filter: none !important;
  }

  /* Tránh giật lag do drop-shadow bên trong keyframes */
  .btn-begin__aura,
  .pulse-ring,
  .cd-img,
  .mm-card-img {
    animation: none !important;
  }

  /* Rút gọn box-shadow phức tạp để modal mở lên (slide up) mượt mà */
  .form-panel,
  .dict-panel,
  .daily-draw-panel,
  .meaning-modal-panel,
  .premium-modal-panel {
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.8) !important;
  }

  /* Rút gọn box-shadow cho danh sách kho thẻ bài để tránh chớp panel */
  .deck-choice,
  .deck-choice.active,
  .deck-choice:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
    transform: translateZ(0) !important;
  }

  .fan-img {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  }

  /* Ẩn cuộn dọc ngang của trang chủ trên điện thoại */
  #pageLanding {
    overflow: hidden !important;
  }

  /* Kẽm z-index các nút trôi nổi xuống thấp để không đè lên Modals */
  .btn-float-icon,
  .btn-float-action,
  .daily-draw-widget,
  #btnRateAppBtn,
  #btnInstallAppBtn,
  #btnTopTopics {
    z-index: 20 !important;
  }
}

/* --- Mobile Specific Overrides: Dynamic Cards Per Row & Sticky Analysis Button --- */
@media screen and (max-width: 768px) {
  .selected-area {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  /* Đang chọn bài (deck bật): 5 thẻ 1 hàng */
  #pageReading:not(.deck-hidden) .selected-area .slot-wrap {
    width: calc(20% - 7px) !important;
    flex-shrink: 0 !important;
  }

  #pageReading.deck-hidden #deckArea {
    display: none !important;
  }

  /* Đã chọn xong (deck ẩn): thụt lề dọn chỗ và hiển thị 3 thẻ 1 hàng */
  #pageReading.deck-hidden .selected-area {
    padding-bottom: 120px !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
  }

  #pageReading.deck-hidden .selected-area .slot-wrap {
    width: calc(30% - 6px) !important;
    flex-shrink: 0 !important;
  }

  .selected-area .tarot-card {
    width: 90% !important;
    height: auto !important;
    aspect-ratio: 130 / 220 !important;
  }

  .reading-controls {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 90 !important;
    padding-top: 50px !important;
    padding-bottom: 25px !important;
    margin-top: 0 !important;
  }

  /* Tắt animation "thở" (comboFloat) của khu vực cộng hưởng trên mobile */
  .combo-alert-box {
    animation: none !important;
  }
}

/* ADDED FIXES FOR DICTIONARY HEADER ALIGNMENT AND MODAL POPUP */
@media (max-width: 768px) {
  .dict-header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .dict-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex: none !important;
    order: 3 !important;
  }

  .dict-close {
    position: static !important;
    margin: 0 !important;
    order: 2 !important;
  }

  .dict-tabs {
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

/* POPUP EFFECT FOR DICTIONARY MODAL */
@keyframes softPopup {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dict-modal.visible .dict-panel,
.dict-modal.active .dict-panel,
.premium-modal-panel {
  animation: softPopup 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Fix misalignment on PC just in case */
.dict-header,
.dict-header-actions,
.dict-tabs {
  align-items: center !important;
}

.dict-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}