/* ── Force sticky navigation to work by using overflow-x: clip instead of hidden ── */
html, body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
/* ─── SANDRA v3.1 CSS — Olistico/Astrale ─────────────────────────────────
   Fixes: nebula bg, tarot horizontal, sign grid with images, constellation canvas,
   recipe with real food images, holistic animations, professional layout
*/

/* ─── FONTS ──────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ─── ROOT VARS ──────────────────────────────────────────────────────────────── */
:root {
  --bg: #07090e;
  --card: rgba(15,23,42,0.8);
  --card-hover: rgba(22,34,60,0.9);
  --border: rgba(212,175,55,0.14);
  --border-hover: rgba(212,175,55,0.35);
  --gold: #d4af37;
  --gold-bright: #f0cc50;
  --gold-dim: rgba(212,175,55,0.12);
  --gold-glow: rgba(212,175,55,0.25);
  --indigo: #6366f1;
  --violet: #8b5cf6;
  --rose: #f43f5e;
  --emerald: #10b981;
  --sky: #38bdf8;
  --text: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-gold: 0 0 20px rgba(212,175,55,0.2);
  --font-heading: 'Cinzel', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { background: var(--bg); color: var(--text); font-family: var(--font-body); }

/* ─── ANIMATED STAR FIELD ─────────────────────────────────────────────────────── */
.star-field {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.star {
  position: absolute; border-radius: 50%; background: white;
  animation: twinkle var(--dur, 3s) var(--delay, 0s) infinite ease-in-out;
}
@keyframes twinkle {
  0%,100% { opacity: var(--min-op, 0.1); transform: scale(1); }
  50%      { opacity: var(--max-op, 0.7); transform: scale(1.3); }
}

/* ─── NEBULA BACKGROUND ─────────────────────────────────────────────────────── */
.nebula-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.nebula-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
  animation: nebulaFloat 20s ease-in-out infinite;
}
.orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%);
  top: -100px; left: -100px; animation-delay: 0s; }
.orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(139,92,246,0.05) 0%, transparent 70%);
  bottom: -50px; right: 0; animation-delay: -7s; }
.orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(212,175,55,0.04) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: -14s; }
@keyframes nebulaFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-20px) scale(1.05); }
  66% { transform: translate(-20px,30px) scale(0.95); }
}

/* ─── PAGE LAYOUT — Fluid Dynamic Desktop-First ────────────────────────────────── */
.sandra-page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 6px 28px 60px !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .sandra-page {
    padding: 6px 14px 40px !important;
  }
}

/* ─── HABITAT UNIFIED USER CAPSULE & MENU ────────────────────────────── */
.shell-header__user,
.shell-user-capsule {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.user-btn:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

.user-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.user-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.avatar--sm,
.user-capsule-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}

.user-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 220px !important;
  background: rgba(13, 18, 29, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.6) !important;
  padding: 8px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: all 150ms ease !important;
  z-index: 1000 !important;
}

.user-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.user-menu__header {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 6px;
}

.user-menu__name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}

.user-menu__role {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: capitalize;
  margin-top: 2px;
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 0.82rem;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  font-family: inherit;
}

.user-menu__item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.user-menu__item.danger {
  color: #f87171;
}

.user-menu__item.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.user-menu__item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.8;
}

.user-menu .divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 0;
}

/* ─── SANDRA HERO ──────────────────────────────────────────────────────────────── */
.sandra-hero {
  text-align: center; padding: 40px 0 32px; position: relative;
}
.sandra-hero-mandala {
  width: 140px; height: 140px; margin: 0 auto 20px;
  animation: rotateMandala 60s linear infinite;
}
@keyframes rotateMandala { to{transform:rotate(360deg);} }
.sandra-hero-title {
  font-family: var(--font-heading); font-size: 2.8rem; letter-spacing: 0.15em;
  background: linear-gradient(135deg, var(--gold) 0%, #fff 50%, var(--gold-bright) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 8px;
}
.sandra-hero-subtitle {
  font-size: 0.85rem; color: var(--text-secondary); letter-spacing: 0.1em; text-transform: uppercase;
}
.sandra-hero-divider {
  width: 120px; height: 1px; background: linear-gradient(90deg,transparent,var(--gold),transparent);
  margin: 20px auto 0;
}

/* ─── NAVIGATION ────────────────────────────────────────────────────────────────── */
.sandra-nav {
  display: flex; gap: 4px; overflow-x: auto; padding: 4px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 99px; margin-bottom: 32px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sandra-nav::-webkit-scrollbar { display: none; }
.subtab-btn {
  flex-shrink: 0; display: flex; align-items: center; gap: 5px;
  padding: 8px 16px; border: none; background: transparent; color: var(--text-secondary);
  border-radius: 99px; cursor: pointer; font-size: 0.8rem; font-weight: 600;
  font-family: var(--font-body); transition: all 0.2s; white-space: nowrap;
}
.subtab-btn:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.subtab-btn.active { background: var(--gold-dim); color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }
.tab-icon { font-size: 1rem; }

/* ─── SECTION TRANSITIONS ─────────────────────────────────────────────────────── */
.sandra-section { display: none; animation: none; }
.sandra-section.visible { display: block !important; animation: sectionIn 0.4s ease both; }
@keyframes sectionIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.section-heading { font-family: var(--font-heading); font-size: 1.3rem; color: var(--gold); margin-bottom: 6px; }
.section-subheading { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 24px; }

/* ─── SHARED COMPONENTS & STANDARDIZED BUTTON SYSTEM ───────────────────────── */
.s-heading { font-family: var(--font-heading); font-size: 1.1rem; color: var(--gold-bright); margin: 16px 0 8px; }

.loading-cosmic {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 48px 20px;
}
.loading-mandala { width: 80px; height: 80px; }
.loading-text { font-size: 0.88rem; color: var(--text-secondary); text-align: center; }

.error-box {
  padding: 14px 18px; background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.25); border-radius: var(--radius-md);
  color: var(--rose); font-size: 0.88rem;
}

.sandra-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: rgba(22,34,60,0.95); border: 1px solid var(--border);
  color: var(--text); padding: 10px 20px; border-radius: 99px; font-size: 0.85rem;
  z-index: 9999; transition: transform 0.3s ease; white-space: nowrap;
  backdrop-filter: blur(8px);
}
.sandra-toast.visible { transform: translateX(-50%) translateY(0); }

.btn-cosmic,
.btn-cosmic-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  background: linear-gradient(135deg, var(--gold) 0%, #b38f28 50%, var(--violet) 100%) !important;
  color: #07090e !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 20px var(--gold-glow) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.btn-cosmic:hover,
.btn-cosmic-full:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 28px rgba(212, 175, 55, 0.55) !important;
  filter: brightness(1.12) !important;
  color: #000000 !important;
}

.btn-cosmic:active,
.btn-cosmic-full:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px var(--gold-glow) !important;
}

.btn-cosmic:disabled,
.btn-cosmic-full:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(0.5) !important;
}

.btn-cosmic-full {
  width: 100% !important;
}

/* ── MASTER 2: UTILITY / SELECTOR / MODIFIER BUTTON (Master: Tema Natale in Pulsantiera) ── */
.subtab-btn,
.btn-outline,
.btn-utility-master,
.btn-action,
.btn-rotate-card,
#section-tarot .btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: none !important;
}

.subtab-btn:hover,
.btn-outline:hover,
.btn-utility-master:hover,
.btn-action:hover,
.btn-rotate-card:hover,
#section-tarot .btn-outline:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.subtab-btn.active,
.btn-outline.active,
.btn-outline.active-spread,
.btn-utility-master.active,
.btn-action.active,
#section-tarot .btn-outline.active-spread {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(99, 102, 241, 0.2) 100%) !important;
  border-color: var(--gold) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px var(--gold-glow) !important;
}

.subtab-btn:active,
.btn-outline:active,
.btn-utility-master:active,
.btn-action:active,
.btn-rotate-card:active,
#section-tarot .btn-outline:active {
  transform: translateY(0) !important;
}

.btn-close-detail {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-close-detail:hover {
  background: rgba(244, 63, 94, 0.15) !important;
  border-color: rgba(244, 63, 94, 0.5) !important;
  color: #ff6b81 !important;
}

/* ─── ASPECTS ─────────────────────────────────────────────────────────────────── */
.asp-list { display: flex; flex-direction: column; gap: 8px; }
.asp-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; font-size: 0.82rem;
}
.asp-sym { font-size: 1.1rem; flex-shrink: 0; }
.asp-planets { color: var(--text); font-weight: 600; flex: 1; min-width: 120px; }
.asp-name { font-size: 0.78rem; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.asp-name.asp-good { background: rgba(16,185,129,0.15); color: var(--emerald); }
.asp-name.asp-tense { background: rgba(244,63,94,0.15); color: var(--rose); }
.asp-name.asp-neutral { background: rgba(212,175,55,0.15); color: var(--gold); }
.asp-sym.asp-good { color: var(--emerald); }
.asp-sym.asp-tense { color: var(--rose); }
.asp-sym.asp-neutral { color: var(--gold); }
.asp-orb { font-size: 0.72rem; color: var(--text-muted); }
.asp-nature { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; }

/* ─── ALMANAC ─────────────────────────────────────────────────────────────────── */
.alm-celestial-header {
  display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(99,102,241,0.04));
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px;
  margin-bottom: 20px;
}
.alm-sun-moon { display: flex; align-items: flex-start; gap: 16px; flex: 1; min-width: 200px; }
.alm-celestial-orb {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(212,175,55,0.3); position: relative; overflow: visible;
}
.alm-orb-glow {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, transparent 70%);
  animation: orbPulse 3s ease-in-out infinite;
}
.alm-moon-glow { background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%); }
@keyframes orbPulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.15);opacity:1} }
.alm-orb-symbol { font-size: 1.8rem; position: relative; z-index: 1; }
.alm-celestial-info { flex: 1; }
.alm-sign-big { font-family: var(--font-heading); font-size: 1.3rem; color: var(--gold-bright); margin-bottom: 4px; }
.alm-sign-detail { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 8px; }
.alm-desc-text { font-size: 0.85rem; color: var(--text); line-height: 1.65; }
.alm-divider-v { width: 1px; background: var(--border); flex-shrink: 0; min-height: 80px; }

.alm-moon-phase-bar { margin-bottom: 20px; padding: 16px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.alm-phase-track { height: 12px; background: rgba(255,255,255,0.06); border-radius: 6px; position: relative; margin-bottom: 8px; overflow: visible; }
.alm-phase-fill { height: 100%; background: linear-gradient(90deg, var(--violet), var(--gold)); border-radius: 6px; transition: width 1s ease; }
.alm-phase-emoji { position: absolute; top: -10px; font-size: 1.5rem; transform: translateX(-50%); }
.alm-phase-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); margin-top: 18px; }

.alm-section-card { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 16px; transition: border-color 0.2s; }
.alm-section-card:hover { border-color: var(--border-hover); }
.alm-section-icon { font-size: 1.5rem; flex-shrink: 0; }
.alm-section-body { flex: 1; }
.alm-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); font-weight: 600; margin-bottom: 8px; }
.alm-text { font-size: 0.88rem; color: var(--text); line-height: 1.7; }
.alm-history-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.alm-history-list li { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; padding-left: 16px; position: relative; }
.alm-history-list li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 0.6rem; top: 4px; }

.alm-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media(max-width:480px){ .alm-cards-2{grid-template-columns:1fr;} }
.alm-mini-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.alm-mini-gold { background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(99,102,241,0.04)); border-color: rgba(212,175,55,0.2); }
.alm-mini-icon { font-size: 1.4rem; margin-bottom: 10px; }
.alm-mini-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 6px; }
.alm-mini-value { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.4; }
.alm-mini-sub { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; font-style: italic; }
.alm-mini-quote { font-size: 0.88rem; color: var(--text); font-style: italic; line-height: 1.6; }

/* ─── HOROSCOPE ──────────────────────────────────────────────────────────────────── */
.horo-header {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 20px; padding: 32px 24px;
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(212,175,55,0.04), rgba(139,92,246,0.06));
  border: 1px solid rgba(212,175,55,0.15);
}
.horo-header-bg {
  position: absolute; inset: 0; opacity: 0.3;
  background: radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.2) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(139,92,246,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.horo-date-badge {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--gold); margin-bottom: 16px; position: relative;
}
.horo-luminary-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 16px; position: relative; }
.horo-luminary { text-align: center; }
.horo-lum-symbol { font-size: 2.4rem; margin-bottom: 6px; }
.horo-lum-sign { font-family: var(--font-heading); font-size: 1.1rem; color: var(--gold-bright); }
.horo-lum-pos { font-size: 0.78rem; color: var(--text-secondary); }
.horo-luminary-sep { opacity: 0.5; animation: rotateMandala 20s linear infinite; }
.horo-transits { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; position: relative; }
.transit-pill { font-size: 0.76rem; padding: 4px 10px; background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.2); color: var(--gold); border-radius: 99px; }

.horo-overview { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 20px; }
.horo-overview-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.horo-overview-text { font-size: 0.9rem; color: var(--text); line-height: 1.8; }

/* ─── ULTRA-COMPACT GEOMETRIC TRANSITS & ASPECTS CARD ──────────────────────── */
.geo-dynamics-card {
  background: var(--card, rgba(15, 23, 42, 0.94));
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius-md, 12px);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.geo-dynamics-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright, #f9d976), transparent);
}

.geo-dyn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}
.geo-dyn-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading, "Cinzel", serif);
  font-size: 0.88rem;
  color: var(--gold-bright, #f9d976);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.geo-dyn-symbol {
  font-size: 0.95rem;
}
.geo-dyn-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.geo-badge-tag {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-bright, #f9d976);
}
.geo-dyn-date {
  font-size: 0.74rem;
  color: var(--text-secondary, #94a3b8);
}

/* Geometric Aspects Grid: 2 or 3 columns of compact mathematical chips */
.geo-dyn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
@media (min-width: 680px) {
  .geo-dyn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .geo-dyn-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.geo-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 0.78rem;
  transition: transform 0.15s, border-color 0.15s;
}
.geo-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(212, 175, 55, 0.3);
}
.geo-chip.asp-good {
  border-left: 3px solid var(--emerald, #10b981);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.07), rgba(255, 255, 255, 0.015));
}
.geo-chip.asp-tense {
  border-left: 3px solid var(--rose, #f43f5e);
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.07), rgba(255, 255, 255, 0.015));
}
.geo-chip.asp-karmic {
  border-left: 3px solid #a855f7;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.07), rgba(255, 255, 255, 0.015));
}
.geo-chip.asp-neutral {
  border-left: 3px solid var(--gold, #d4af37);
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.07), rgba(255, 255, 255, 0.015));
}

.geo-chip-pair {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
}
.geo-chip-psym {
  color: var(--gold-bright, #f9d976);
  font-size: 0.85rem;
}
.geo-chip-pname {
  font-size: 0.78rem;
}
.geo-chip-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
}
.geo-chip-op.asp-good { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.geo-chip-op.asp-tense { background: rgba(244, 63, 94, 0.2); color: #fb7185; }
.geo-chip-op.asp-karmic { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.geo-chip-op.asp-neutral { background: rgba(212, 175, 55, 0.2); color: var(--gold-bright); }

.geo-chip-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
}
.geo-chip-nature {
  font-size: 0.7rem;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}
.geo-chip-orb {
  color: var(--text-muted, #64748b);
  font-size: 0.68rem;
}

/* Bottom Ribbon */
.geo-dyn-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
  padding-top: 6px;
  border-top: 1px dashed rgba(212, 175, 55, 0.12);
}
.geo-footer-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.geo-footer-item strong {
  color: var(--gold, #d4af37);
}
.geo-footer-sep {
  color: rgba(212, 175, 55, 0.3);
}
.geo-footer-climate em {
  color: var(--text, #e2e8f0);
}

.horo-aspects-card { display: none !important; }
.horo-card-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; }

.horo-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); font-weight: 600; margin-bottom: 16px; }

/* Signs Grid — Images */
.horo-signs-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 24px;
}
@media(min-width:500px){ .horo-signs-grid{grid-template-columns:repeat(4,1fr);} }
@media(min-width:700px){ .horo-signs-grid{grid-template-columns:repeat(6,1fr);} }
.sign-card-v3 {
  aspect-ratio: 3/4; border-radius: var(--radius-sm); overflow: hidden;
  position: relative; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid transparent; background: rgba(15,23,42,0.6);
}
.sign-card-v3:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,0.5); border-color: rgba(212,175,55,0.3); }
.sign-card-selected { border-color: var(--gold) !important; box-shadow: 0 0 20px var(--gold-glow) !important; }
.sign-card-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 0.4s;
}
.sign-card-v3:hover .sign-card-img { transform: scale(1.08); }
.sign-card-overlay {
  position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,9,14,0.92) 0%, rgba(7,9,14,0.3) 60%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 8px;
  text-align: center;
}
.sign-card-symbol { font-size: 1.4rem; margin-bottom: 2px; }
.sign-card-name { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.sign-card-dates { font-size: 0.6rem; color: var(--text-secondary); display: none; }
@media(min-width:600px){ .sign-card-dates{display:block;} }

/* Sign Detail */
.horo-sign-detail { margin-bottom: 20px; }
.sign-detail-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sign-detail-hero { height: 220px; background-size: cover; background-position: center; position: relative; }
.sign-detail-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,9,14,0.95) 0%, rgba(7,9,14,0.2) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.sign-detail-symbol { font-size: 2.5rem; margin-bottom: 4px; }
.sign-detail-name { font-family: var(--font-heading); font-size: 1.6rem; color: var(--gold-bright); }
.sign-detail-meta { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }
.sign-detail-body { padding: 20px 24px; }

/* Barometer */
.sign-baro { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.baro-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
.baro-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 6px; }
.baro-stars { font-size: 1rem; color: var(--gold); margin-bottom: 4px; letter-spacing: -1px; }
.baro-desc { font-size: 0.72rem; color: var(--text-secondary); }

/* Sign sections */
.sign-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sign-section:last-of-type { border-bottom: none; }
.sign-section-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); font-weight: 600; margin-bottom: 8px; }
.sign-text { font-size: 0.88rem; color: var(--text); line-height: 1.75; }

/* Holistic grid */
.sign-holistic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.holo-item { display: flex; align-items: flex-start; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm); padding: 12px; }
.holo-item-full { grid-column: 1/-1; background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(139,92,246,0.04)); border-color: rgba(212,175,55,0.15); }
.holo-icon { font-size: 1.3rem; flex-shrink: 0; }
.holo-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 3px; }
.holo-value { font-size: 0.88rem; color: var(--text); font-weight: 500; }
.holo-mantra { font-size: 0.9rem; color: var(--gold-bright); font-style: italic; }
.holo-chip { font-size: 0.75rem; padding: 4px 10px; background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.15); color: var(--text-secondary); border-radius: 99px; }

.horo-actions-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ─── TAROCCHI ─────────────────────────────────────────────────────────────────── */
.tarot-stage { min-height: 200px; }
.tarot-spread-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--gold); text-align: center; margin-bottom: 20px; font-weight: 600;
}

/* HORIZONTAL CARDS ROW */
.tarot-cards-row {
  display: flex; gap: 12px; overflow-x: auto; padding: 8px 4px 20px;
  justify-content: flex-start; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(212,175,55,0.2) transparent;
}
@media(min-width:600px){ .tarot-cards-row{justify-content:center;} }

/* Card 3D flip */
.tarot-card-v3 { flex-shrink:0; width:150px; height:250px; cursor:pointer; perspective:1000px; transition:transform 0.25s ease; }
.tarot-card-v3:hover { transform: translateY(-6px); }

.tarot-card-inner-v3 {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.tarot-card-v3.tarot-flipped .tarot-card-inner-v3 { transform: rotateY(180deg); }

.tarot-card-back-v3, .tarot-card-front-v3 {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.tarot-card-back-v3 {
  background: linear-gradient(145deg, #1a0533, #0d1642);
  border: 2px solid rgba(212,175,55,0.4);
  display: flex; align-items: center; justify-content: center;
}
.tarot-back-pattern { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.tarot-svg-art { width: 100%; height: 100%; }
.tarot-back-label {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-heading); font-size: 0.55rem; letter-spacing: 0.3em;
  color: rgba(212,175,55,0.5); white-space: nowrap;
}

.tarot-card-front-v3 {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #0d1642, #1a0533);
  border: 2px solid rgba(212,175,55,0.5);
  display: flex; flex-direction: column;
}
.tarot-card-info-v3 {
  padding: 8px 8px 10px;
  background: linear-gradient(to top, rgba(7,9,14,0.9) 0%, transparent 100%);
  position: absolute; bottom: 0; left: 0; right: 0;
}
.tarot-card-name-v3 { font-size: 0.68rem; font-weight: 700; color: var(--gold-bright); text-align: center; line-height: 1.3; margin-bottom: 2px; }
.tarot-card-pos-v3 { font-size: 0.6rem; color: var(--text-secondary); text-align: center; }
.tarot-reversed-badge { font-size: 0.6rem; color: var(--rose); text-align: center; margin: 2px 0; }
.tarot-card-kws { font-size: 0.58rem; color: var(--text-muted); text-align: center; }

.tarot-hint { text-align: center; font-size: 0.78rem; color: var(--gold); opacity: 0.7; margin-bottom: 16px; }
.tarot-question-wrap { margin-bottom: 14px; }
.tarot-q-input {
  width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); font-size: 0.9rem; font-family: var(--font-body);
  transition: border-color 0.2s;
}
.tarot-q-input:focus { outline: none; border-color: var(--gold); }
.tarot-q-input::placeholder { color: var(--text-muted); }

/* ─── TAROT ORACLE V3 (Bento Layout & Dark Celestial Glass) ─────────────────── */
.oracle-box {
  background: var(--card, rgba(15, 23, 42, 0.94));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-xl, 20px);
  padding: 26px 22px;
  margin-bottom: 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 24px rgba(212, 175, 55, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.oracle-box::before {
  content: ;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright, #f9d976), transparent);
}

/* Header & Meta */
.oracle-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
}
.oracle-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.oracle-crystal-orb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(249, 217, 118, 0.4), rgba(212, 175, 55, 0.12) 60%, rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(212, 175, 55, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
  animation: orbPulse 4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes orbPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(212, 175, 55, 0.22); transform: scale(1); }
  50% { box-shadow: 0 0 24px rgba(249, 217, 118, 0.45); transform: scale(1.04); }
}
.oracle-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.oracle-main-title {
  font-family: var(--font-heading, Cinzel, serif);
  font-size: 1.2rem;
  color: var(--gold-bright, #f9d976);
  letter-spacing: 0.04em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.oracle-spread-badge {
  font-size: 0.78rem;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}
.oracle-meta-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.oracle-question-badge {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--gold-bright, #f9d976);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

/* Drawn Cards Chips */
.oracle-cards-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.15);
}
.oracle-card-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  color: var(--text, #e2e8f0);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.oracle-card-chip strong {
  color: var(--gold, #d4af37);
  font-weight: 600;
}
.oracle-card-chip .rev-tag {
  color: #f87171;
  font-size: 0.72rem;
  padding: 1px 4px;
  background: rgba(239, 68, 68, 0.12);
  border-radius: 4px;
}

/* Bento Grid */
.oracle-bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (min-width: 860px) {
  .oracle-bento-grid {
    grid-template-columns: 1fr 1fr;
  }
  .oracle-bento-card.full-width {
    grid-column: 1 / -1;
  }
}

/* Bento Card Style */
.oracle-bento-card {
  background: rgba(10, 15, 28, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--radius-lg, 14px);
  padding: 20px;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(10px);
}
.oracle-bento-card:hover {
  border-color: rgba(212, 175, 55, 0.42);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.oracle-bento-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.oracle-bento-icon {
  font-size: 1.25rem;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright, #f9d976);
  flex-shrink: 0;
}
.oracle-bento-title {
  font-family: var(--font-heading, Cinzel, serif);
  font-size: 0.96rem;
  color: var(--gold-bright, #f9d976);
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}
.oracle-bento-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  margin-left: auto;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.oracle-bento-body {
  font-size: 0.88rem;
  line-height: 1.82;
  color: var(--text, #e2e8f0);
}
.oracle-bento-body p {
  margin-bottom: 12px;
}
.oracle-bento-body p:last-child {
  margin-bottom: 0;
}

/* Transformative Action Card (Highlight) */
.oracle-bento-card.transform-card {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.09) 0%, rgba(15, 23, 42, 0.92) 100%);
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: inset 0 0 24px rgba(212, 175, 55, 0.05), 0 8px 30px rgba(0, 0, 0, 0.45);
}
.oracle-bento-card.transform-card .oracle-bento-icon {
  background: rgba(212, 175, 55, 0.22);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}
.oracle-bento-card.transform-card .oracle-bento-title {
  color: var(--gold-bright, #f9d976);
}

/* Sub-callouts for Luce and Ombra */
.oracle-subcallout {
  border-radius: 10px;
  padding: 14px;
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.75;
}
.oracle-subcallout.luce {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  border-top: 1px solid rgba(245, 158, 11, 0.15);
  border-right: 1px solid rgba(245, 158, 11, 0.15);
  border-bottom: 1px solid rgba(245, 158, 11, 0.15);
}
.oracle-subcallout.ombra {
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #818cf8;
  border-top: 1px solid rgba(99, 102, 241, 0.15);
  border-right: 1px solid rgba(99, 102, 241, 0.15);
  border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}
.oracle-subcallout-title {
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
}
.oracle-subcallout.luce .oracle-subcallout-title {
  color: #fbbf24;
}
.oracle-subcallout.ombra .oracle-subcallout-title {
  color: #a5b4fc;
}

/* Card details list */
.oracle-cards-detail {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  padding-top: 16px;
}
.oracle-card-detail {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
}
.ocd-name { font-size: 0.85rem; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.ocd-meaning { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; }

/* ─── NATAL CHART ────────────────────────────────────────────────────────────── */
.natal-hero {
  height: 200px; border-radius: var(--radius-lg); background-size: cover;
  background-position: center; position: relative; overflow: hidden;
  margin-bottom: 20px; background-color: rgba(15,23,42,0.8);
}
.natal-hero-content {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(7,9,14,0.9) 0%, rgba(7,9,14,0.4) 100%);
  display: flex; flex-direction: column; justify-content: center; padding: 28px;
}
.natal-hero-symbol { font-size: 2.5rem; margin-bottom: 6px; }
.natal-hero-name { font-family: var(--font-heading); font-size: 1.6rem; color: var(--gold-bright); margin-bottom: 4px; }
.natal-hero-meta { font-size: 0.78rem; color: var(--text-secondary); }

.natal-body { display: flex; flex-direction: column; gap: 20px; }
.natal-key-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media(min-width:560px){ .natal-key-grid{grid-template-columns:repeat(4,1fr);} }
.natal-key-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px; text-align: center; transition: border-color 0.2s;
}
.natal-key-card:hover { border-color: var(--border-hover); }
.natal-key-icon { font-size: 1.4rem; margin-bottom: 6px; }
.natal-key-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 4px; }
.natal-key-value { font-size: 1rem; font-weight: 700; color: var(--gold-bright); margin-bottom: 3px; }
.natal-key-sub { font-size: 0.72rem; color: var(--text-secondary); }

.natal-elem-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.natal-elem-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.elem-bar-row { display: flex; align-items: center; gap: 10px; }
.elem-bar-label { font-size: 0.8rem; color: var(--text); width: 80px; flex-shrink: 0; }
.elem-bar-track { flex: 1; height: 10px; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; }
.elem-bar-fill { height: 100%; border-radius: 5px; transition: width 1.2s ease; }
.elem-bar-pct { font-size: 0.78rem; color: var(--text-secondary); width: 36px; text-align: right; }

.natal-section-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); font-weight: 600; }
.natal-planets { display: flex; flex-direction: column; gap: 6px; }
.planet-pill {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; font-size: 0.85rem; transition: border-color 0.2s;
}
.planet-pill:hover { border-color: rgba(212,175,55,0.2); }
.planet-emoji { font-size: 1.1rem; flex-shrink: 0; }
.planet-name { font-weight: 600; color: var(--text); min-width: 90px; }
.planet-pos { color: var(--text-secondary); flex: 1; }
.planet-house { font-size: 0.72rem; color: var(--gold); background: var(--gold-dim); padding: 2px 6px; border-radius: 4px; }
.retro { font-size: 0.72rem; color: var(--rose); }

.natal-houses { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
@media(min-width:500px){ .natal-houses{grid-template-columns:repeat(4,1fr);} }
.house-tile { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px; text-align: center; }
.house-num { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px; }
.house-sign { font-size: 0.88rem; font-weight: 600; color: var(--gold-bright); }
.house-deg { font-size: 0.72rem; color: var(--text-secondary); }

.natal-monograph {
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(212,175,55,0.04));
  border: 1px solid rgba(212,175,55,0.15); border-radius: var(--radius-lg); padding: 24px;
}
.natal-monograph-label { font-family: var(--font-heading); font-size: 1rem; color: var(--gold); text-align: center; margin-bottom: 16px; letter-spacing: 0.1em; }
.natal-monograph-text { font-size: 0.9rem; color: var(--text); line-height: 1.85; }
.natal-monograph-text p { margin-bottom: 12px; }

/* ─── FORMS ──────────────────────────────────────────────────────────────────── */
.astral-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media(max-width:480px){ .form-grid{grid-template-columns:1fr;} }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-weight: 600; }
.form-input {
  padding: 11px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 0.9rem;
  font-family: var(--font-body); transition: border-color 0.2s;
}
.form-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
.form-input::placeholder { color: var(--text-muted); }
select.form-input { cursor: pointer; }
select.form-input option { background: #0f172a; }

/* ─── CONSTELLATION CANVAS ─────────────────────────────────────────────────────── */
.constellation-canvas-el {
  width: 100%; max-width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--border); display: block;
  box-shadow: 0 0 40px rgba(139,92,246,0.15), inset 0 0 60px rgba(0,0,0,0.5);
  cursor: grab;
}
.constellation-canvas-el:active { cursor: grabbing; }
#constellation-canvas { margin-bottom: 16px; }

.const-findings { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px; }
.const-findings-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
.const-findings-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.const-findings-list li { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; padding-left: 14px; position: relative; }
.const-findings-list li::before { content: "→"; position: absolute; left: 0; color: var(--violet); }
.const-oracle { background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(99,102,241,0.05)); border: 1px solid rgba(139,92,246,0.2); border-radius: var(--radius-lg); padding: 24px; }
.const-oracle-icon { font-size: 2rem; text-align: center; margin-bottom: 10px; }
.const-oracle-label { font-family: var(--font-heading); font-size: 1rem; color: var(--gold-bright); text-align: center; margin-bottom: 14px; }
.const-oracle-text { font-size: 0.9rem; color: var(--text); line-height: 1.8; }
.const-oracle-text p { margin-bottom: 12px; }

/* ─── CUISINE ───────────────────────────────────────────────────────────────────── */
.recipe-card-v3 { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--card); margin-bottom: 20px; }
.recipe-hero-img { height: 240px; background-size: cover; background-position: center; position: relative; }
.recipe-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,9,14,0.95) 0%, rgba(7,9,14,0.3) 70%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
}
.recipe-day-badge { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 6px; font-weight: 600; }
.recipe-title { font-family: var(--font-heading); font-size: 1.4rem; color: white; margin-bottom: 6px; }
.recipe-intent { font-size: 0.85rem; color: rgba(255,255,255,0.7); font-style: italic; }
.recipe-body-v3 { padding: 22px 24px; }
.recipe-meta-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.recipe-pill { font-size: 0.75rem; padding: 4px 10px; background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.18); color: var(--gold); border-radius: 99px; }
.recipe-section-v3 { margin-bottom: 18px; }
.recipe-sec-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.recipe-ingredients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media(max-width:400px){ .recipe-ingredients-grid{grid-template-columns:1fr;} }
.recipe-ing-item { font-size: 0.85rem; color: var(--text-secondary); padding: 6px 10px; background: rgba(255,255,255,0.03); border-radius: 7px; }
.recipe-proc-text { font-size: 0.9rem; color: var(--text); line-height: 1.75; }
.recipe-elixir-v3 { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(52,211,153,0.03)); border: 1px solid rgba(16,185,129,0.15); border-radius: var(--radius-md); padding: 14px; margin-top: 16px; }
.recipe-elixir-icon { font-size: 1.4rem; flex-shrink: 0; }
.recipe-elixir-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--emerald); font-weight: 600; margin-bottom: 4px; }
.recipe-elixir-text { font-size: 0.88rem; color: var(--text); }
.recipe-sandra-tip { font-size: 0.82rem; color: var(--text-secondary); font-style: italic; text-align: right; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.05); }

/* ─── GRID HELPERS ──────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
@media(max-width:560px){ .grid-2{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr 1fr;} }

/* ═══════════════════════════════════════════════════════════════
   PATCH v3.5 — Hero compatto (1/3 altezza) + Nav sticky
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: da verticale grande a orizzontale compatto ─────────── */
.sandra-hero {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding: 8px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  text-align: left !important;
  background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(22,34,60,0.85) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Luminaries right widget in Hero */
.sandra-hero-luminaries {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10, 15, 28, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 10px;
  padding: 4px 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.hero-lum-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-lum-icon {
  font-size: 1.35rem;
  line-height: 1;
}
.hero-lum-data {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.hero-lum-sign {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-bright, #f9d976);
  letter-spacing: 0.02em;
}
.hero-lum-deg {
  font-size: 0.68rem;
  color: var(--text-secondary, #94a3b8);
}
.hero-lum-sep {
  width: 1px;
  height: 24px;
  background: rgba(212, 175, 55, 0.2);
}

@media (max-width: 768px) {
  .sandra-hero {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .sandra-hero-luminaries {
    width: 100%;
    justify-content: space-around;
    margin-left: 0;
  }
}

/* Mandala ridotto a 48px */
.sandra-hero-mandala {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  animation: rotateMandala 60s linear infinite;
}

/* Testo hero compatto */
.sandra-hero-title {
  font-size: 1.4rem !important;
  letter-spacing: 0.2em !important;
  margin: 0 0 2px 0 !important;
}

.sandra-hero-subtitle {
  font-size: 0.7rem !important;
  margin-bottom: 0 !important;
  letter-spacing: 0.08em !important;
}

/* Divider nascosto in layout orizzontale */
.sandra-hero-divider {
  display: none !important;
}

/* Testo raggruppato verticalmente */
.sandra-hero-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── Nav sticky — singola riga su desktop/tablet con scorrimento touch fluido ───────── */
.sandra-nav {
  position: sticky !important;
  top: 56px !important;          /* sotto l'habitat shell header */
  z-index: 90 !important;
  background: rgba(7, 9, 14, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 9999px !important;
  padding: 5px 12px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.sandra-nav::-webkit-scrollbar {
  display: none !important;
}
@media (min-width: 1200px) {
  .sandra-nav {
    justify-content: center !important;
  }
}
@media (max-width: 960px) {
  .sandra-nav {
    border-radius: 9999px !important;
    padding: 5px 10px !important;
    gap: 5px !important;
  }
}
.subtab-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 7px 13px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

/* Su mobile la hero va in colonna ma sempre compatta */
@media (max-width: 480px) {
  .sandra-hero {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 14px 16px !important;
  }
  .sandra-hero-subtitle {
    font-size: 0.62rem !important;
  }
}
/* ═══════════════════════════════════════════════════════════════ */

/* ═══ OFIUCO — 13° Segno ══════════════════════════════════════════════════ */
.ofiuco-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; margin-bottom: 20px;
  border: 2px solid rgba(212,175,55,0.4);
  box-shadow: 0 0 30px rgba(212,175,55,0.15), 0 8px 32px rgba(0,0,0,0.5);
  transition: transform 0.3s, box-shadow 0.3s;
  height: 200px;
}
.ofiuco-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 50px rgba(212,175,55,0.3), 0 12px 40px rgba(0,0,0,0.6);
  border-color: var(--gold);
}
.ofiuco-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 30%;
  transition: transform 0.5s;
}
.ofiuco-card:hover .ofiuco-img { transform: scale(1.04); }
.ofiuco-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(7,9,14,0.75) 0%,
    rgba(7,9,14,0.4) 50%,
    rgba(7,9,14,0.7) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.ofiuco-badge {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--gold); background: rgba(212,175,55,0.15);
  border: 1px solid rgba(212,175,55,0.3); border-radius: 99px;
  padding: 4px 14px; margin-bottom: 10px;
}
.ofiuco-title {
  font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700;
  color: white; letter-spacing: 0.2em; margin-bottom: 6px;
  text-shadow: 0 0 30px rgba(212,175,55,0.5);
}
.ofiuco-dates {
  font-size: 0.82rem; color: rgba(255,255,255,0.8); margin-bottom: 10px;
}
.ofiuco-hint {
  font-size: 0.72rem; color: var(--gold); opacity: 0.8;
  animation: pulse 2.5s ease-in-out infinite;
}
.ofiuco-detail-panel { margin-bottom: 20px; }
/* ═════════════════════════════════════════════════════════════════════════ */

/* ── Etimologia Ofiuco ───────────────────────────────────────────────────── */
.ofiuco-etymology { background: linear-gradient(135deg,rgba(99,102,241,0.05),rgba(212,175,55,0.03)); border-radius: var(--radius-md); padding: 16px !important; border: 1px solid rgba(212,175,55,0.12) !important; }
.etymology-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 10px; }
@media(min-width:560px){ .etymology-grid{ grid-template-columns: 1fr 1fr; } }
.etym-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-sm); padding: 14px; }
.etym-word { font-family: var(--font-heading); font-size: 1rem; color: var(--gold-bright); margin-bottom: 4px; }
.etym-origin { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; font-style: italic; }
.etym-meaning { font-size: 0.82rem; color: var(--text); line-height: 1.6; margin-bottom: 6px; }
.etym-chain { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.65; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 6px; }

/* ── Spread Selector Buttons — coerenti con Master Tema Natale ──────────── */
/* Spread styles are handled globally by .btn-outline / .subtab-btn master */

/* Spread selection wrapper */
.tarot-spread-selector {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-bottom: 20px;
}

/* Question input — coerente */
#section-tarot .form-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 10px; color: var(--text);
  font-family: var(--font-body); font-size: 0.9rem;
  padding: 12px 16px; width: 100%; box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#section-tarot .form-input:focus {
  outline: none;
  border-color: rgba(139,92,246,0.6);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}
#section-tarot .form-label {
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;
  display: block;
}

/* Stage */
.tarot-stage { overflow-x: auto; padding: 16px 0 8px; }
.tarot-cards-row {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 8px 4px 16px; min-width: min-content;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════════════════════
   TAROT REAL IMAGES & LIGHTBOX ZOOM MODAL
   ═════════════════════════════════════════════════════════════════════════════ */

/* Front card real image */
.tarot-card-front-v3 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  transform: rotateY(180deg) !important;
  background: linear-gradient(145deg, #0d1642, #1a0533) !important;
  border: 2px solid rgba(212,175,55,0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.tarot-card-art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
}

.tarot-has-img .tarot-card-info-v3 {
  background: linear-gradient(to top, rgba(7,9,14,0.96) 0%, rgba(7,9,14,0.72) 48%, transparent 100%) !important;
  padding: clamp(6px, 1vw, 12px) clamp(6px, 1vw, 10px) clamp(8px, 1.2vw, 14px) !important;
}
.tarot-card-name-v3 {
  font-size: clamp(0.72rem, 1.05vw, 0.96rem) !important;
  font-weight: 700 !important; color: var(--gold-bright) !important;
  text-align: center !important; line-height: 1.3 !important; margin-bottom: 3px !important;
}
.tarot-card-pos-v3 {
  font-size: clamp(0.6rem, 0.8vw, 0.76rem) !important;
  color: var(--text-secondary) !important; text-align: center !important;
}
.tarot-reversed-badge {
  font-size: clamp(0.62rem, 0.8vw, 0.78rem) !important;
  color: var(--rose) !important; text-align: center !important; margin: 2px 0 !important;
  font-weight: 600 !important;
}
.tarot-card-kws {
  font-size: clamp(0.58rem, 0.75vw, 0.72rem) !important;
  color: var(--text-muted) !important; text-align: center !important;
}
.tarot-card-zoom-btn {
  width: clamp(28px, 2.4vw, 36px) !important;
  height: clamp(28px, 2.4vw, 36px) !important;
  font-size: clamp(0.75rem, 1vw, 0.95rem) !important;
}

.tarot-card-zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 14, 28, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.6);
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  z-index: 5;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.tarot-card-zoom-btn:hover {
  background: rgba(212, 175, 55, 0.25);
  border-color: var(--gold-bright);
  transform: scale(1.18);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.5);
}

/* Lightbox Modal */
.tarot-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 7, 15, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tarot-modal-backdrop.is-active {
  display: flex;
  opacity: 1;
}

.tarot-modal-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(17, 24, 43, 0.98), rgba(9, 13, 24, 0.99));
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 60px rgba(212, 175, 55, 0.18), 0 25px 70px rgba(0, 0, 0, 0.85);
  border-radius: 24px;
  padding: 32px;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.3) transparent;
}

.tarot-modal-backdrop.is-active .tarot-modal-container {
  transform: scale(1) translateY(0);
}

.tarot-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 10;
}

.tarot-modal-close:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: rotate(90deg) scale(1.1);
}

.tarot-modal-content {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 36px;
  align-items: center;
}

@media (max-width: 800px) {
  .tarot-modal-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .tarot-modal-container {
    padding: 22px 18px;
  }
}

.tarot-modal-card-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.tarot-modal-card-frame {
  width: 100%;
  max-width: 330px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.85), 0 0 40px rgba(99, 102, 241, 0.3);
  border: 2px solid rgba(212, 175, 55, 0.6);
  background: #080c18;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-modal-img {
  width: 100%;
  height: auto;
  aspect-ratio: 9/16;
  object-fit: contain;
  display: block;
  background: #080c18;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-modal-svg-wrap {
  width: 100%;
  aspect-ratio: 9/16;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0e1e;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tarot-modal-svg-wrap svg {
  width: 100%;
  height: 100%;
}

.tarot-modal-card-frame.is-rotated .tarot-modal-img,
.tarot-modal-card-frame.is-rotated .tarot-modal-svg-wrap {
  transform: rotate(180deg);
}

.btn-rotate-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--gold-bright);
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 0.84rem;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(6px);
}

.btn-rotate-card:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);
}

.tarot-modal-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tarot-modal-tag {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 99px;
  padding: 4px 14px;
  display: inline-block;
  margin-bottom: 8px;
}

.tarot-modal-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: #fff;
  margin: 0 0 6px 0;
  letter-spacing: 0.05em;
  text-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
}

.tarot-modal-pos {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.tarot-modal-badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.modal-badge-status {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.modal-badge-upright {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
}

.modal-badge-reversed {
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid rgba(244, 63, 94, 0.45);
  color: #fb7185;
}

.modal-badge-element {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #c7d2fe;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 8px;
}

.modal-section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 700;
}

.modal-section-desc {
  font-size: 0.96rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

.tarot-modal-keywords {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-kw-pill {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #c7d2fe;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 0.82rem;
}

.modal-meaning-box {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.tarot-modal-footer {
  margin-top: 8px;
  display: flex;
  gap: 12px;
}

/* ═══ TAROT CARD 3D FLIP & DYNAMIC RESPONSIVE EXPANSION ═════════════════════ */
.tarot-stage {
  width: 100% !important;
  overflow-x: auto !important;
  padding: 12px 0 24px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(212, 175, 55, 0.3) transparent !important;
}

.tarot-cards-row {
  display: flex !important;
  gap: clamp(14px, 2vw, 28px) !important;
  padding: 16px 10px 28px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 320px !important;
}

.tarot-card-v3 {
  flex-shrink: 0 !important;
  width: clamp(170px, 14vw, 235px) !important;
  height: clamp(290px, 24vw, 400px) !important;
  cursor: pointer !important;
  perspective: 1200px !important;
  -webkit-perspective: 1200px !important;
  position: relative !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

@media (max-width: 1024px) {
  .tarot-card-v3 {
    width: clamp(140px, 16vw, 185px) !important;
    height: clamp(240px, 27vw, 315px) !important;
  }
}

@media (max-width: 768px) {
  .tarot-card-v3 {
    width: clamp(115px, 26vw, 150px) !important;
    height: clamp(195px, 44vw, 255px) !important;
  }
}

@media (max-width: 480px) {
  .tarot-card-v3 {
    width: clamp(100px, 28vw, 130px) !important;
    height: clamp(170px, 48vw, 220px) !important;
  }
  .tarot-cards-row {
    gap: 8px !important;
    padding: 8px 4px 16px !important;
  }
}

.tarot-card-v3:hover {
  transform: translateY(-8px) scale(1.02) !important;
}

.tarot-card-inner-v3 {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tarot-card-v3.tarot-flipped .tarot-card-inner-v3,
.tarot-card-v3.tarot-reversed.tarot-flipped .tarot-card-inner-v3 {
  transform: rotateY(180deg) !important;
}

.tarot-card-v3.tarot-reversed .tarot-card-art-img,
.tarot-card-v3.tarot-reversed .tarot-svg-art {
  transform: rotate(180deg) !important;
}

.tarot-card-back-v3 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  background: linear-gradient(145deg, #1a0533, #0d1642) !important;
  border: 2px solid rgba(212,175,55,0.45) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tarot-card-front-v3 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: rotateY(180deg) !important;
  background: linear-gradient(145deg, #0d1642, #1a0533) !important;
  border: 2px solid rgba(212,175,55,0.65) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
  display: flex !important;
  flex-direction: column !important;
}

.tarot-card-art-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px !important;
  display: block !important;
}

.tarot-svg-art {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ==========================================================================
   UNIFIED HABITAT SHELL HEADER — 3-COLUMN CSS GRID (DEAD CENTER)
   ========================================================================== */
.shell-header,
.habitat-shell-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  background: rgba(7, 9, 14, 0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .shell-header,
  .habitat-shell-header {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }
}

/* 1. Left Zone — Brand Logo */
.shell-header__left {
  grid-column: 1 !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.shell-header__logo,
.shell-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  font-size: 16px !important;
  transition: opacity 0.2s ease !important;
  white-space: nowrap !important;
}

.shell-header__logo svg,
.shell-brand svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #d4af37 !important;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4)) !important;
  flex-shrink: 0 !important;
}

.shell-header__brand-title,
.brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
  font-size: 16px !important;
}

/* 2. Center Zone — Navigation Pill Bar (Mathematically Dead Center) */
.shell-header__center {
  grid-column: 2 !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.shell-header__nav,
.shell-nav-pill {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .shell-header__center {
    display: none !important;
  }
}

.nav-tab,
.nav-pill-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.nav-tab:hover,
.nav-pill-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.nav-tab.active,
.nav-pill-item.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(99, 102, 241, 0.2) 100%) !important;
  border: 1px solid #d4af37 !important;
  font-weight: 600 !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25) !important;
}

/* 3. Right Zone — User Capsule */
.shell-header__right {
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.shell-header__user,
.shell-user-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}

.user-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  padding: 4px 12px 4px 6px !important;
  color: #f1f5f9 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
}

.user-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
}

.user-btn svg {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.7 !important;
  transition: transform 0.2s ease !important;
}

.user-btn[aria-expanded=true] svg {
  transform: rotate(180deg) !important;
}

.avatar--sm,
.user-capsule-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--sandra-gold, #d4af37) !important;
  background: radial-gradient(circle, #312e81 0%, #07090e 100%) !important;
  color: var(--sandra-gold, #d4af37) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
  flex-shrink: 0 !important;
}

.user-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 220px !important;
  background: rgba(13, 18, 29, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.6) !important;
  padding: 8px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: all 150ms ease !important;
  z-index: 1000 !important;
}

.user-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* ─── AUTH MODAL ─────────────────────────────────────────────────────────── */
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 11, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 20px;
  animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(145deg, rgba(22, 34, 60, 0.98), rgba(12, 17, 29, 0.98));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 40px var(--gold-glow);
  position: relative;
  color: var(--text);
}

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-modal-close:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  transform: rotate(90deg);
}

.auth-modal-header {
  text-align: center;
  margin-bottom: 22px;
}

.auth-modal-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
  color: var(--gold-bright);
  filter: drop-shadow(0 0 12px var(--gold-glow));
}

.auth-modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: var(--gold-bright);
  margin-bottom: 6px;
}

.auth-modal-header p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   TAROT REDESIGN: I TAROCCHI DI VETRO DI SANDRA (SHOWCASE, ALTAR & CARDS)
   ========================================================================== */

/* 1. Deck Showcase Card */
.tarot-deck-showcase {
  background: linear-gradient(135deg, rgba(26, 16, 48, 0.75) 0%, rgba(13, 22, 66, 0.65) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  margin-bottom: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  position: relative !important;
  overflow: hidden !important;
}

.tarot-deck-showcase::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  right: -20% !important;
  width: 320px !important;
  height: 320px !important;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.tds-visual {
  flex-shrink: 0 !important;
  width: 105px !important;
  height: 150px !important;
  position: relative !important;
  perspective: 600px !important;
}

.tds-deck-stack {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.tds-card-layer {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  background: linear-gradient(145deg, #18082e, #0c163b) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.3s ease !important;
}

.tds-layer-3 {
  transform: rotate(-8deg) translate(-8px, -4px) !important;
  opacity: 0.5 !important;
}

.tds-layer-2 {
  transform: rotate(5deg) translate(6px, -2px) !important;
  opacity: 0.75 !important;
}

.tds-layer-1 {
  transform: rotate(-1deg) !important;
  z-index: 3 !important;
  border-color: rgba(212, 175, 55, 0.8) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 20px rgba(212, 175, 55, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.tarot-deck-showcase:hover .tds-layer-3 {
  transform: rotate(-12deg) translate(-12px, -6px) !important;
}
.tarot-deck-showcase:hover .tds-layer-2 {
  transform: rotate(8deg) translate(9px, -3px) !important;
}

.tds-mandala {
  font-size: 1.7rem !important;
  color: var(--gold-bright) !important;
  text-shadow: 0 0 12px var(--gold-glow) !important;
}

.tds-glass-label {
  font-family: var(--font-heading) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.25em !important;
  color: rgba(212, 175, 55, 0.9) !important;
}

.tds-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.tds-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 12px !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--gold-bright) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
}

.tds-title {
  font-family: var(--font-heading) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
  letter-spacing: 0.02em !important;
}

.tds-desc {
  font-size: 0.88rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
}

.tds-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.tds-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
}

.tds-chip strong {
  color: var(--gold-bright) !important;
}

/* 2. Tarot Altar Card & Spreads */
.tarot-altar-card {
  background: rgba(13, 16, 28, 0.7) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  margin-bottom: 22px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.tac-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--gold-bright) !important;
  margin-bottom: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.tac-icon {
  font-size: 1.25rem !important;
}

.tarot-spread-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.tarot-spread-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 14px 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  color: var(--text) !important;
  position: relative !important;
}

.tarot-spread-btn:hover {
  background: rgba(212, 175, 55, 0.09) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

.tarot-spread-btn.active,
.tarot-spread-btn.active-spread {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.22) 0%, rgba(139, 92, 246, 0.16) 100%) !important;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.tsb-icon {
  font-size: 1.6rem !important;
  margin-bottom: 5px !important;
  filter: drop-shadow(0 2px 6px rgba(212, 175, 55, 0.35)) !important;
}

.tsb-title {
  font-family: var(--font-heading) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 3px !important;
}

.tsb-sub {
  font-size: 0.72rem !important;
  color: var(--text-muted) !important;
  line-height: 1.3 !important;
}

.tac-question-row {
  margin-top: 4px !important;
}

.tac-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.tac-q-icon {
  position: absolute !important;
  left: 16px !important;
  font-size: 1.15rem !important;
  pointer-events: none !important;
  opacity: 0.75 !important;
}

.tac-question-input {
  width: 100% !important;
  padding: 13px 18px 13px 48px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-family: var(--font-body) !important;
  transition: all 0.25s ease !important;
}

.tac-question-input:focus {
  border-color: var(--gold-bright) !important;
  outline: none !important;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.28) !important;
  background: rgba(0, 0, 0, 0.55) !important;
}

/* 3. Empty Altar (Initial Mystical State) */
.tarot-empty-altar {
  text-align: center !important;
  padding: 42px 20px !important;
  background: radial-gradient(ellipse at center, rgba(32, 18, 58, 0.45) 0%, rgba(10, 12, 20, 0.7) 80%) !important;
  border: 1px dashed rgba(212, 175, 55, 0.3) !important;
  border-radius: 16px !important;
  margin: 10px 0 !important;
  backdrop-filter: blur(10px) !important;
}

.tea-deck-fan {
  position: relative !important;
  width: 220px !important;
  height: 140px !important;
  margin: 0 auto 20px !important;
}

.tea-card-fan {
  position: absolute !important;
  width: 78px !important;
  height: 120px !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  background: linear-gradient(145deg, #1b0736, #0a153d) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  left: calc(50% - 39px) !important;
  bottom: 10px !important;
  transform-origin: bottom center !important;
}

.tea-c1 { transform: rotate(-24deg) translateX(-36px) !important; opacity: 0.55 !important; }
.tea-c2 { transform: rotate(-12deg) translateX(-18px) !important; opacity: 0.8 !important; }
.tea-c3 {
  transform: rotate(0deg) !important;
  z-index: 5 !important;
  border-color: rgba(212, 175, 55, 0.85) !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.tea-c4 { transform: rotate(12deg) translateX(18px) !important; opacity: 0.8 !important; }
.tea-c5 { transform: rotate(24deg) translateX(36px) !important; opacity: 0.55 !important; }

.tarot-empty-altar:hover .tea-c1 { transform: rotate(-30deg) translateX(-45px) !important; }
.tarot-empty-altar:hover .tea-c2 { transform: rotate(-15deg) translateX(-22px) !important; }
.tarot-empty-altar:hover .tea-c4 { transform: rotate(15deg) translateX(22px) !important; }
.tarot-empty-altar:hover .tea-c5 { transform: rotate(30deg) translateX(45px) !important; }

.tea-mandala {
  font-size: 1.5rem !important;
  color: var(--gold-bright) !important;
  text-shadow: 0 0 10px var(--gold-glow) !important;
}

.tea-label {
  font-family: var(--font-heading) !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  color: rgba(212, 175, 55, 0.8) !important;
}

.tea-title {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--gold-bright) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.03em !important;
}

.tea-subtitle {
  font-size: 0.88rem !important;
  color: var(--text-muted) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  line-height: 1.5 !important;
}

/* 4. Enriched Card Front Styles */
.tarot-glass-glare {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 35%, transparent 60%) !important;
  z-index: 3 !important;
}

.tarot-pos-badge-top {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: 48px !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  pointer-events: none !important;
}

.tarot-pos-pill {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(7, 9, 14, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: var(--gold-bright) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  max-width: 75% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tarot-element-badge {
  padding: 3px 7px !important;
  border-radius: 6px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
}

.elem-fuoco {
  background: rgba(239, 68, 68, 0.28) !important;
  border: 1px solid rgba(248, 113, 113, 0.55) !important;
  color: #fca5a5 !important;
}

.elem-acqua {
  background: rgba(59, 130, 246, 0.28) !important;
  border: 1px solid rgba(96, 165, 250, 0.55) !important;
  color: #93c5fd !important;
}

.elem-aria {
  background: rgba(168, 85, 247, 0.28) !important;
  border: 1px solid rgba(192, 132, 252, 0.55) !important;
  color: #e9d5ff !important;
}

.elem-terra {
  background: rgba(34, 197, 94, 0.28) !important;
  border: 1px solid rgba(74, 222, 128, 0.55) !important;
  color: #86efac !important;
}

.elem-maggiore {
  background: rgba(212, 175, 55, 0.3) !important;
  border: 1px solid rgba(251, 191, 36, 0.6) !important;
  color: #fef08a !important;
}

.tarot-card-info-v3 {
  padding: 12px 10px 12px !important;
  background: linear-gradient(to top, rgba(7, 9, 14, 0.96) 0%, rgba(7, 9, 14, 0.8) 75%, transparent 100%) !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.tarot-card-name-v3 {
  font-family: var(--font-heading) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-align: center !important;
  line-height: 1.25 !important;
  margin-bottom: 2px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.tarot-card-archetype-v3 {
  font-size: 0.65rem !important;
  color: var(--gold-bright) !important;
  text-align: center !important;
  font-style: italic !important;
  margin-bottom: 3px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.tarot-state-reversed {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.18) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  display: inline-block !important;
  margin: 2px auto 4px !important;
}

.tarot-state-upright {
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  display: inline-block !important;
  margin: 2px auto 4px !important;
}

.tarot-card-kws {
  font-size: 0.62rem !important;
  color: var(--text-muted) !important;
  text-align: center !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tarot-deck-showcase {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 18px !important;
  }
  .tds-chips {
    justify-content: center !important;
  }
  .tarot-spread-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .tarot-spread-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   TEMA NATALE REDESIGN: INTERWOVEN BENTO, KARMIC & VOCATIONAL DASHBOARD
   ========================================================================== */

/* 1. Compact Hero Header */
.natal-hero-compact {
  background: linear-gradient(135deg, rgba(22, 16, 42, 0.8) 0%, rgba(13, 20, 52, 0.75) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 16px !important;
  padding: 18px 24px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(14px) !important;
}

.nhc-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.nhc-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, rgba(13, 16, 28, 0.9) 70%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.3) !important;
}

.nhc-name {
  font-family: var(--font-heading) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 4px !important;
  letter-spacing: 0.02em !important;
}

.nhc-meta {
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.nhc-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.nhc-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 20px !important;
  font-size: 0.78rem !important;
  color: var(--text) !important;
}

.nhc-pill strong {
  color: var(--gold-bright) !important;
}

/* 2. Primary Nexus Grid (4 Pillars & Elements) */
.natal-nexus-grid {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.natal-pillars-card,
.natal-elem-card {
  background: rgba(13, 16, 28, 0.7) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
}

.npc-header,
.nec-header,
.nkc-header,
.nvc-header,
.ndm-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--gold-bright) !important;
  margin-bottom: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.npc-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.npc-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  transition: all 0.25s ease !important;
}

.npc-item:hover {
  background: rgba(212, 175, 55, 0.08) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  transform: translateY(-2px) !important;
}

.npc-item-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}

.npc-item-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
}

.npc-item-badge {
  font-size: 0.7rem !important;
  color: var(--gold-bright) !important;
  background: rgba(212, 175, 55, 0.12) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

.npc-item-value {
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

.npc-item-sub {
  font-size: 0.74rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.35 !important;
}

/* Elements Card */
.nec-bars {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.nec-bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.nec-bar-label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  width: 78px !important;
  flex-shrink: 0 !important;
}

.nec-bar-track {
  flex: 1 !important;
  height: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.nec-bar-fill {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 1s ease !important;
}

.nec-bar-pct {
  font-size: 0.78rem !important;
  color: var(--text-secondary) !important;
  width: 38px !important;
  text-align: right !important;
  font-weight: 600 !important;
}

.nec-footer-badges {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nec-badge-pill {
  font-size: 0.78rem !important;
  color: var(--text-secondary) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(212, 175, 55, 0.18) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}

.nec-badge-pill strong {
  color: var(--gold-bright) !important;
}

/* 3. Interwoven Karmic & Vocational Row */
.natal-interwoven-row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.natal-karmic-card {
  background: linear-gradient(135deg, rgba(32, 16, 52, 0.75) 0%, rgba(14, 18, 48, 0.7) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
}

.natal-vocational-card {
  background: linear-gradient(135deg, rgba(16, 28, 56, 0.75) 0%, rgba(13, 34, 46, 0.7) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
}

.nkc-box,
.nvc-box {
  background: rgba(0, 0, 0, 0.28) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nkc-box:last-child,
.nvc-box:last-child {
  margin-bottom: 0 !important;
}

.nkc-box-head,
.nvc-box-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.nkc-tag,
.nvc-tag {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.tag-south { color: #fca5a5 !important; }
.tag-north { color: #86efac !important; }
.tag-chiron { color: #d8b4fe !important; }
.tag-mc { color: var(--gold-bright) !important; }
.tag-trig { color: #38bdf8 !important; }
.tag-triad { color: #fde047 !important; }

.nkc-pos,
.nvc-pos {
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
}

.nkc-desc,
.nvc-desc {
  font-size: 0.84rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
}

.nkc-desc strong,
.nvc-desc strong {
  color: #ffffff !important;
}

/* 4. Schematic Data Matrix (Bodies, Houses, Aspects) */
.natal-matrix-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.natal-matrix-col {
  background: rgba(13, 16, 28, 0.7) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  backdrop-filter: blur(12px) !important;
}

.natal-bodies-chips {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

.nbc-chip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  transition: border-color 0.2s !important;
}

.nbc-chip:hover {
  border-color: rgba(212, 175, 55, 0.3) !important;
}

.nbc-name {
  font-weight: 600 !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.nbc-pos {
  color: var(--gold-bright) !important;
  font-weight: 600 !important;
}

.nbc-house {
  font-size: 0.68rem !important;
  color: var(--text-muted) !important;
}

.natal-houses-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.nhg-tile {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  text-align: center !important;
}

.nhg-tile.angular {
  border-color: rgba(212, 175, 55, 0.45) !important;
  background: rgba(212, 175, 55, 0.05) !important;
}

.nhg-num {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 2px !important;
}

.nhg-sign {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--gold-bright) !important;
}

.nhg-deg {
  font-size: 0.7rem !important;
  color: var(--text-secondary) !important;
}

/* Aspects Matrix */
.natal-aspects-card {
  grid-column: span 2 !important;
  background: rgba(13, 16, 28, 0.7) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  backdrop-filter: blur(12px) !important;
}

.natal-aspects-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.nac-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
}

.nac-chip.asp-trine {
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #bae6fd !important;
}

.nac-chip.asp-sextile {
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #a7f3d0 !important;
}

.nac-chip.asp-conj {
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: var(--gold-bright) !important;
}

.nac-chip.asp-square {
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: #fecaca !important;
}

.nac-chip.asp-opp {
  border-color: rgba(244, 114, 182, 0.4) !important;
  color: #fbcfe8 !important;
}

/* 5. Monograph Bento Chapters */
.natal-monograph-bento {
  margin-bottom: 24px !important;
}

.nmb-header-main {
  text-align: center !important;
  margin-bottom: 20px !important;
}

.nmb-badge-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 14px !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 20px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: var(--gold-bright) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 8px !important;
}

.nmb-title-main {
  font-family: var(--font-heading) !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.nmb-chapter {
  background: linear-gradient(135deg, rgba(16, 20, 36, 0.75) 0%, rgba(10, 13, 24, 0.7) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
}

.nmb-chapter-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.nmb-chapter-icon {
  font-size: 1.4rem !important;
}

.nmb-chapter-title {
  font-family: var(--font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--gold-bright) !important;
  margin: 0 !important;
  letter-spacing: 0.03em !important;
}

.nmb-chapter-body {
  font-size: 0.92rem !important;
  color: var(--text) !important;
  line-height: 1.8 !important;
}

.nmb-chapter-body h4 {
  font-family: var(--font-heading) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: var(--gold-bright) !important;
  margin: 16px 0 8px !important;
}

.nmb-chapter-body p {
  margin-bottom: 12px !important;
}

.nmb-chapter-body p:last-child {
  margin-bottom: 0 !important;
}

.nmb-chapter-body ul {
  padding-left: 18px !important;
  margin-bottom: 12px !important;
}

.nmb-chapter-body li {
  margin-bottom: 6px !important;
}

/* Responsive */
@media (max-width: 900px) {
  .natal-nexus-grid,
  .natal-interwoven-row,
  .natal-matrix-grid {
    grid-template-columns: 1fr !important;
  }
  .natal-aspects-card {
    grid-column: span 1 !important;
  }
}

@media (max-width: 600px) {
  .npc-grid,
  .natal-bodies-chips,
  .natal-houses-grid {
    grid-template-columns: 1fr !important;
  }
  .natal-hero-compact {
    padding: 14px !important;
  }
}

/* ─── ENHANCED CONSTELLATION MODULE STYLES ───────────────────────────────── */

/* 1. Educational Guide Cards */
.const-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.const-guide-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  backdrop-filter: blur(12px);
  transition: transform 0.2s, border-color 0.2s;
}
.const-guide-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.35);
}
.cgc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}
.cgc-icon {
  font-size: 1.3rem;
}
.cgc-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--gold-bright);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.cgc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cgc-list li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cgc-badge {
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}

/* 2. Constellation Stage Container */
.constellation-stage-box {
  max-width: 720px;
  margin: 0 auto 24px;
  background: rgba(10, 14, 26, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.06);
}
.stage-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.stage-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.legend-chip {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.legend-chip.self { border-color: rgba(99, 102, 241, 0.5); color: #a5b4fc; }
.legend-chip.padre { border-color: rgba(14, 165, 233, 0.5); color: #7dd3fc; }
.legend-chip.madre { border-color: rgba(236, 72, 153, 0.5); color: #f472b6; }
.legend-chip.antenato { border-color: rgba(16, 185, 129, 0.5); color: #6ee7b7; }
.legend-chip.sintomo { border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; }

/* 3. Canvas Element */
.constellation-canvas-el {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212, 175, 55, 0.25);
  display: block;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8), 0 4px 20px rgba(0, 0, 0, 0.4);
  cursor: grab;
  background: #06080e;
}
.constellation-canvas-el:active {
  cursor: grabbing;
}
.canvas-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  margin-bottom: 16px;
}

/* 4. Controls Pills */
.const-controls-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
}
.btn-member-pill {
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-member-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
}
.btn-reset-pill {
  padding: 7px 12px;
  font-size: 0.78rem;
  border-radius: 20px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-reset-pill:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.5);
}

/* 5. Response Bento Cards */
.const-response-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}
.const-bento-hero {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.cbh-icon {
  font-size: 2.4rem;
  flex-shrink: 0;
}
.cbh-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.cbh-topic {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.const-findings-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.const-findings-title {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.const-findings-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.const-finding-item {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--violet);
}

.const-bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.const-bento-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: var(--radius-md);
  padding: 20px;
}
.const-bento-card.full-width {
  grid-column: 1 / -1;
}
.cbc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cbc-header span:first-child {
  font-size: 1.25rem;
}
.cbc-header h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--gold);
  margin: 0;
}
.cbc-body {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.7;
}
.cbc-body p {
  margin-bottom: 12px;
}
.cbc-body p:last-child {
  margin-bottom: 0;
}

/* Ritual Quotes Highlight */
.const-ritual-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.const-ritual-quote {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.09), rgba(15, 23, 42, 0.6));
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  color: #fff;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   ORACLO DELLE SIBILLE — STILI DEDICATI SANDRA V3
   Washi Paper, Lanterne di Luce & Trasparenza Artistica
   ========================================================================== */

/* 1. Deck Showcase Card */
.sibille-deck-showcase {
  background: linear-gradient(135deg, rgba(35, 20, 30, 0.8) 0%, rgba(18, 22, 45, 0.75) 50%, rgba(20, 35, 30, 0.8) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
}

.sibille-deck-showcase::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 15% 50%, rgba(251, 191, 36, 0.15), transparent 60%) !important;
  pointer-events: none !important;
}

.sds-visual {
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 110px !important;
}

.sds-lantern-orb {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 235, 170, 0.9) 0%, rgba(245, 158, 11, 0.4) 60%, rgba(0, 0, 0, 0.2) 100%) !important;
  border: 2px solid rgba(251, 191, 36, 0.6) !important;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  animation: lanternPulse 4s ease-in-out infinite alternate !important;
}

@keyframes lanternPulse {
  0% { transform: scale(0.97); box-shadow: 0 0 25px rgba(245, 158, 11, 0.4); }
  100% { transform: scale(1.03); box-shadow: 0 0 45px rgba(251, 191, 36, 0.7); }
}

.sds-lantern-sym {
  font-size: 2.4rem !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)) !important;
}

.sds-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.sds-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
}

.sds-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.45rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.sds-desc {
  font-size: 0.9rem !important;
  color: #cbd5e1 !important;
  line-height: 1.55 !important;
  margin-bottom: 14px !important;
}

.sds-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.sds-chip {
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

.chip-cuori { border-color: rgba(244, 114, 182, 0.4) !important; color: #fbcfe8 !important; background: rgba(244, 114, 182, 0.1) !important; }
.chip-quadri { border-color: rgba(251, 191, 36, 0.4) !important; color: #fef08a !important; background: rgba(251, 191, 36, 0.1) !important; }
.chip-fiori { border-color: rgba(52, 211, 153, 0.4) !important; color: #a7f3d0 !important; background: rgba(52, 211, 153, 0.1) !important; }
.chip-picche { border-color: rgba(129, 140, 248, 0.4) !important; color: #c7d2fe !important; background: rgba(129, 140, 248, 0.1) !important; }

/* 2. Sibille Cards Layout (Dimensioni e proporzioni identiche ai Tarocchi) */
.sibille-card-v3 {
  width: 220px !important;
  height: 350px !important;
  perspective: 1200px !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
}

.sibille-card-v3:hover {
  transform: translateY(-10px) scale(1.02) !important;
  z-index: 10 !important;
}

.sibille-card-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  transform-style: preserve-3d !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

.sibille-card-inner.sibille-is-flipped {
  transform: rotateY(180deg) !important;
}

.sibille-card-back, .sibille-card-front {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Card Back */
.sibille-card-back {
  background: radial-gradient(circle at 50% 40%, #1e1b4b 0%, #0f172a 75%, #020617 100%) !important;
  border: 2px solid rgba(212, 175, 55, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.8) !important;
}

.sibille-back-pattern {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.sibille-back-lantern {
  font-size: 3rem !important;
  filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.6)) !important;
}

.sibille-back-label {
  font-family: 'Cinzel', serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.15em !important;
}

.sibille-back-sub {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  letter-spacing: 0.25em !important;
}

/* Card Front: TRASPARENZA & ARTE PIENA AL 100% */
.sibille-card-front {
  background: #0f172a !important;
  transform: rotateY(180deg) !important;
  border: 2px solid rgba(212, 175, 55, 0.5) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.sibille-suit-cuori .sibille-card-front { border-color: rgba(244, 114, 182, 0.6) !important; box-shadow: 0 0 25px rgba(244, 114, 182, 0.3) !important; }
.sibille-suit-quadri .sibille-card-front { border-color: rgba(251, 191, 36, 0.6) !important; box-shadow: 0 0 25px rgba(251, 191, 36, 0.35) !important; }
.sibille-suit-fiori .sibille-card-front { border-color: rgba(52, 211, 153, 0.6) !important; box-shadow: 0 0 25px rgba(52, 211, 153, 0.3) !important; }
.sibille-suit-picche .sibille-card-front { border-color: rgba(129, 140, 248, 0.6) !important; box-shadow: 0 0 25px rgba(129, 140, 248, 0.35) !important; }

/* The artwork occupies 100% of the card height & width */
.sibille-card-art-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sibille-card-v3:hover .sibille-card-art-img {
  transform: scale(1.05) !important;
}

/* Header badge with subtle glassmorphic transparency */
.sibille-pos-badge-top {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 4 !important;
}

.sibille-pos-pill {
  background: rgba(15, 23, 42, 0.72) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 3px 10px !important;
  border-radius: 14px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  max-width: 140px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Fascia Inferiore Sfumata Trasparente (Non nasconde l'opera) */
.sibille-card-info-glass {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 3 !important;
  padding: 28px 12px 10px !important;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.65) 60%, transparent 100%) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  text-align: center !important;
  transition: background 0.3s ease !important;
}

.sibille-card-v3:hover .sibille-card-info-glass {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.75) 65%, transparent 100%) !important;
}

.sibille-card-title-glass {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #fff !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sibille-card-sub-glass {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.72rem !important;
  color: #cbd5e1 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

.sibille-card-hint-glass {
  font-size: 0.62rem !important;
  color: #fbbf24 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  opacity: 0.9 !important;
}

/* 3. Cruscotto Deterministico di Sintesi Astrale */
.sibille-calc-dashboard {
  animation: fadeIn 0.4s ease-out !important;
}

.sibille-det-card {
  background: linear-gradient(135deg, rgba(20, 20, 35, 0.95) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

.sdc-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-bottom: 16px !important;
  margin-bottom: 18px !important;
}

.sdc-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.sdc-badge-icon {
  font-size: 1.8rem !important;
}

.sdc-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
}

.sdc-subtitle {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
}

.sdc-harmony-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  border: 2px solid !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

.sdc-harmony-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.sdc-harmony-lbl {
  font-size: 0.62rem !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  letter-spacing: 0.05em !important;
  margin-top: 2px !important;
}

.sdc-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.sdc-box {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
}

.sdc-box-title {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 10px !important;
}

.sdc-dominant-val {
  font-family: 'Cinzel', serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.sdc-box-desc {
  font-size: 0.82rem !important;
  color: #cbd5e1 !important;
  line-height: 1.45 !important;
}

.sdc-suits-bars {
  margin-top: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.sdc-bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.72rem !important;
}

.sdc-bar-label {
  min-width: 90px !important;
  font-weight: 600 !important;
}

.sdc-bar-track {
  flex: 1 !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.sdc-bar-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width 0.6s ease !important;
}

.sdc-bar-pct {
  font-family: 'JetBrains Mono', monospace !important;
  color: #94a3b8 !important;
  min-width: 32px !important;
  text-align: right !important;
}

.sdc-guida-content {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-bottom: 10px !important;
}

.sdc-guida-thumb {
  width: 55px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  flex-shrink: 0 !important;
}

.sdc-guida-name {
  font-family: 'Cinzel', serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.sdc-guida-rank {
  font-size: 0.75rem !important;
  color: #fbbf24 !important;
  margin-bottom: 4px !important;
}

.sdc-guida-counsel {
  font-size: 0.78rem !important;
  color: #cbd5e1 !important;
  font-style: italic !important;
  line-height: 1.35 !important;
}

.sdc-guida-meta {
  font-size: 0.7rem !important;
  color: #64748b !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
  padding-top: 8px !important;
}

.sdc-sentence-box {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-size: 0.85rem !important;
  color: #f1f5f9 !important;
  line-height: 1.45 !important;
  margin-bottom: 10px !important;
}

.sdc-sentence-box strong {
  color: #fbbf24 !important;
}

.sdc-verdict-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #38bdf8 !important;
}

.svt-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
}

.sdc-cta-row {
  display: flex !important;
  justify-content: center !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 16px !important;
}

/* Modal lightbox */
.sibille-modal-full-img {
  max-width: 100% !important;
  max-height: 75vh !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.8) !important;
  border: 2px solid rgba(212, 175, 55, 0.4) !important;
}

.sibille-narrative-text {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: #e2e8f0 !important;
}

.sibille-narrative-text h3 {
  font-family: 'Cinzel', serif !important;
  font-size: 1.1rem !important;
  color: #fbbf24 !important;
  margin: 16px 0 8px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
  padding-bottom: 4px !important;
}

/* Responsive */
@media (max-width: 768px) {
  .sibille-deck-showcase {
    flex-direction: column !important;
    text-align: center !important;
    padding: 18px !important;
  }
  .sds-chips {
    justify-content: center !important;
  }
  .sdc-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .sibille-card-v3 {
    width: 185px !important;
    height: 300px !important;
  }
}

/* ==========================================================================
   PETIT LENORMAND — STILI DEDICATI SANDRA V3
   Madreperla, Argento Lunare & Sintassi Combinatoria
   ========================================================================== */

/* 1. Deck Showcase Card */
.lenormand-deck-showcase {
  background: linear-gradient(135deg, rgba(20, 30, 48, 0.85) 0%, rgba(36, 59, 85, 0.8) 50%, rgba(15, 23, 42, 0.9) 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.35) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
}

.lenormand-deck-showcase::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 15% 50%, rgba(186, 230, 253, 0.2), transparent 60%) !important;
  pointer-events: none !important;
}

.lds-visual {
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 110px !important;
}

.lds-pearl-orb {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(203, 213, 225, 0.6) 50%, rgba(71, 85, 105, 0.4) 100%) !important;
  border: 2px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 0 35px rgba(186, 230, 253, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  animation: pearlGlow 4s ease-in-out infinite alternate !important;
}

@keyframes pearlGlow {
  0% { box-shadow: 0 0 25px rgba(186, 230, 253, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.6); transform: scale(0.98); }
  100% { box-shadow: 0 0 45px rgba(224, 242, 254, 0.8), inset 0 0 25px rgba(255, 255, 255, 0.95); transform: scale(1.02); }
}

.lds-pearl-sym {
  font-size: 2.5rem !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) !important;
}

.lds-info {
  flex-grow: 1 !important;
}

.lds-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(226, 232, 240, 0.12) !important;
  border: 1px solid rgba(226, 232, 240, 0.3) !important;
  color: #e2e8f0 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.lds-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 8px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.lds-desc {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #cbd5e1 !important;
  margin-bottom: 14px !important;
}

.lds-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.lds-chip {
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* 2. Lenormand Card 3D Stage */
.lenormand-cards-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 20px 10px !important;
}

.lenormand-card-v3 {
  width: 205px !important;
  height: 330px !important;
  perspective: 1000px !important;
  cursor: pointer !important;
  position: relative !important;
  user-select: none !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.lenormand-card-v3:hover {
  transform: translateY(-8px) scale(1.02) !important;
  z-index: 10 !important;
}

.lenormand-card-inner-v3 {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

.lenormand-card-v3.lenormand-flipped .lenormand-card-inner-v3 {
  transform: rotateY(180deg) !important;
}

/* Back of the Card (Mother-of-pearl & Silver) */
.lenormand-card-back-v3 {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 50%, #090d16 100%) !important;
  border: 2px solid rgba(226, 232, 240, 0.4) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 0 30px rgba(186, 230, 253, 0.15) !important;
}

.lenormand-card-back-v3::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  border: 1px solid rgba(226, 232, 240, 0.25) !important;
  border-radius: 10px !important;
  pointer-events: none !important;
}

.lenormand-back-orb {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(203, 213, 225, 0.3) 60%, transparent 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2rem !important;
  box-shadow: 0 0 20px rgba(186, 230, 253, 0.5) !important;
  margin-bottom: 12px !important;
}

.lenormand-back-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px rgba(186, 230, 253, 0.5) !important;
}

.lenormand-back-sub {
  font-size: 0.65rem !important;
  color: #94a3b8 !important;
  letter-spacing: 0.08em !important;
  margin-top: 4px !important;
}

/* Front of the Card (100% visible artwork!) */
.lenormand-card-front-v3 {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  transform: rotateY(180deg) !important;
  border-radius: 16px !important;
  background: #090d16 !important;
  border: 2px solid rgba(226, 232, 240, 0.45) !important;
  overflow: hidden !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7) !important;
  display: flex !important;
  flex-direction: column !important;
}

.lenormand-card-art-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  transition: transform 0.4s ease !important;
}

.lenormand-card-v3:hover .lenormand-card-art-img {
  transform: scale(1.04) !important;
}

/* Top Badge Row */
.lenormand-pos-badge-top {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.lenormand-pos-pill {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(226, 232, 240, 0.4) !important;
  color: #f8fafc !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  max-width: 140px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Transparent Sleek Bottom Glass Overlay */
.lenormand-card-info-glass {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.75) 55%, transparent 100%) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 24px 10px 10px !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: center !important;
}

.lenormand-card-title-line {
  font-family: 'Cinzel', serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.lenormand-card-meta-line {
  font-size: 0.72rem !important;
  color: #93c5fd !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* 3. Deterministic Dashboard */
.lenormand-calc-dashboard {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(9, 13, 24, 0.98)) !important;
  border: 1px solid rgba(226, 232, 240, 0.35) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   FUTHARK ANTICO & LA RUNA BIANCA — STILI DEDICATI SANDRA V3
   Ossidiana, Ametista Sacra & I Tre Aettir delle Norne
   ========================================================================== */

/* 1. Deck Showcase Card */
.rune-deck-showcase {
  background: linear-gradient(135deg, rgba(30, 15, 45, 0.9) 0%, rgba(18, 12, 36, 0.85) 50%, rgba(10, 8, 20, 0.95) 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
}

.rune-deck-showcase::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 15% 50%, rgba(168, 85, 247, 0.22), transparent 60%) !important;
  pointer-events: none !important;
}

.rds-visual {
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 110px !important;
}

.rds-amethyst-orb {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(233, 213, 255, 0.95) 0%, rgba(168, 85, 247, 0.5) 55%, rgba(59, 7, 100, 0.6) 100%) !important;
  border: 2px solid rgba(192, 132, 252, 0.8) !important;
  box-shadow: 0 0 35px rgba(168, 85, 247, 0.65), inset 0 0 20px rgba(255, 255, 255, 0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  animation: amethystPulse 4s ease-in-out infinite alternate !important;
}

@keyframes amethystPulse {
  0% { box-shadow: 0 0 25px rgba(168, 85, 247, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.5); transform: scale(0.98); }
  100% { box-shadow: 0 0 45px rgba(192, 132, 252, 0.85), inset 0 0 25px rgba(255, 255, 255, 0.9); transform: scale(1.02); }
}

.rds-rune-sym {
  font-size: 2.5rem !important;
  color: #faf5ff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 24px rgba(168, 85, 247, 0.8) !important;
}

.rds-info {
  flex-grow: 1 !important;
}

.rds-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  color: #d8b4fe !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.rds-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 8px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.rds-desc {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #cbd5e1 !important;
  margin-bottom: 14px !important;
}

.rds-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.rds-chip {
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(30, 20, 50, 0.6) !important;
  border: 1px solid rgba(192, 132, 252, 0.25) !important;
  color: #f1f5f9 !important;
}

/* 2. Runic 3D Stage & Stone Tiles */
.rune-cards-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  padding: 24px 10px !important;
}

.rune-stone-v3 {
  width: 215px !important;
  height: 330px !important;
  perspective: 1000px !important;
  cursor: pointer !important;
  position: relative !important;
  user-select: none !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.rune-stone-v3:hover {
  transform: translateY(-8px) scale(1.02) !important;
  z-index: 10 !important;
}

.rune-stone-inner-v3 {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

.rune-stone-v3.rune-flipped .rune-stone-inner-v3 {
  transform: rotateY(180deg) !important;
}

/* Back of Runic Tile (Obsidian with Vegvisir/Runic Ring) */
.rune-stone-back-v3 {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 50% 50%, #201335 0%, #0d0718 60%, #05030a 100%) !important;
  border: 2px solid rgba(192, 132, 252, 0.35) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 0 35px rgba(168, 85, 247, 0.2) !important;
}

.rune-stone-back-v3::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border: 1px dashed rgba(192, 132, 252, 0.25) !important;
  border-radius: 12px !important;
  pointer-events: none !important;
}

.rune-back-symbol {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(30, 15, 45, 0.8) 70%) !important;
  border: 1px solid rgba(192, 132, 252, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2rem !important;
  color: #e9d5ff !important;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.4) !important;
  margin-bottom: 12px !important;
}

.rune-back-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #e9d5ff !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.6) !important;
}

.rune-back-sub {
  font-size: 0.68rem !important;
  color: #a855f7 !important;
  letter-spacing: 0.08em !important;
  margin-top: 4px !important;
}

/* Front of Runic Tile (Obsidian & Amethyst Cutout Stone) */
.rune-stone-front-v3 {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  transform: rotateY(180deg) !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 50% 40%, #170d2b 0%, #0d061a 60%, #05020a 100%) !important;
  border: 2px solid rgba(192, 132, 252, 0.45) !important;
  overflow: hidden !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(168, 85, 247, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.rune-stone-art-img {
  width: 90% !important;
  height: 82% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 25px rgba(168, 85, 247, 0.45)) !important;
  transition: transform 0.4s ease !important;
  margin-top: -10px !important;
}

.rune-stone-v3:hover .rune-stone-art-img {
  transform: scale(1.06) !important;
  filter: drop-shadow(0 0 35px rgba(192, 132, 252, 0.7)) !important;
}

/* Top Badge Row */
.rune-pos-badge-top {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.rune-pos-pill {
  background: rgba(13, 6, 26, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  color: #faf5ff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  max-width: 145px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.rune-rev-tag {
  background: rgba(239, 68, 68, 0.25) !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: #fca5a5 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  margin-left: 4px !important;
}

/* Transparent Sleek Bottom Glass Overlay */
.rune-stone-info-glass {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(to top, rgba(13, 6, 26, 0.95) 0%, rgba(13, 6, 26, 0.75) 60%, transparent 100%) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 20px 10px 10px !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: center !important;
}

.rune-stone-title-line {
  font-family: 'Cinzel', serif !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

.rune-stone-meta-line {
  font-size: 0.72rem !important;
  color: #c084fc !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* 3. Deterministic Dashboard */
.rune-calc-dashboard {
  background: linear-gradient(145deg, rgba(20, 10, 35, 0.95), rgba(10, 5, 20, 0.98)) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   SANDRA ORACLE 4-WAY HARMONIZATION (TAROCCHI, SIBILLE, LENORMAND, RUNE)
   Exact identical geometry, layout, buttons, and responsive breakpoints.
   ========================================================================== */

/* 1. Deck Showcase Cards */
.tarot-deck-showcase,
.sibille-deck-showcase,
.lenormand-deck-showcase,
.rune-deck-showcase {
  min-height: 160px !important;
  padding: 24px 28px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-bottom: 22px !important;
  backdrop-filter: blur(14px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .tarot-deck-showcase,
  .sibille-deck-showcase,
  .lenormand-deck-showcase,
  .rune-deck-showcase {
    flex-direction: column !important;
    text-align: center !important;
    padding: 18px 20px !important;
    gap: 16px !important;
  }
}

.tds-visual,
.sds-visual,
.lds-visual,
.rds-visual {
  width: 110px !important;
  height: 110px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tds-info,
.sds-info,
.lds-info,
.rds-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.tds-badge,
.sds-badge,
.lds-badge,
.rds-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  width: fit-content !important;
}

@media (max-width: 768px) {
  .tds-badge,
  .sds-badge,
  .lds-badge,
  .rds-badge {
    margin: 0 auto !important;
  }
}

.tds-title,
.sds-title,
.lds-title,
.rds-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  letter-spacing: 0.03em !important;
  color: #ffffff !important;
}

.tds-desc,
.sds-desc,
.lds-desc,
.rds-desc {
  font-size: 0.90rem !important;
  line-height: 1.6 !important;
  color: #cbd5e1 !important;
  margin: 0 !important;
}

.tds-chips,
.sds-chips,
.lds-chips,
.rds-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

@media (max-width: 768px) {
  .tds-chips,
  .sds-chips,
  .lds-chips,
  .rds-chips {
    justify-content: center !important;
  }
}

.tds-chip,
.sds-chip,
.lds-chip,
.rds-chip {
  padding: 4px 11px !important;
  border-radius: 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* 2. Consultation Altar & Spread Controls */
.tarot-altar-card {
  padding: 24px !important;
  border-radius: 18px !important;
  margin-bottom: 22px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(226, 232, 240, 0.15) !important;
  box-sizing: border-box !important;
}

.tac-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
  color: #f8fafc !important;
  letter-spacing: 0.04em !important;
}

.tarot-spread-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

@media (max-width: 900px) {
  .tarot-spread-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .tarot-spread-grid {
    grid-template-columns: 1fr !important;
  }
}

.tarot-spread-btn {
  min-height: 96px !important;
  padding: 14px 10px !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tsb-icon {
  font-size: 1.45rem !important;
  line-height: 1 !important;
}

.tsb-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  color: #ffffff !important;
}

.tsb-sub {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
}

/* Form Row & Input Wrap */
.tac-form-row {
  margin-top: 6px !important;
}

.tac-label {
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  margin-bottom: 8px !important;
}

.tac-label-hint {
  font-weight: 400 !important;
  color: #94a3b8 !important;
  margin-left: 8px !important;
  font-size: 0.76rem !important;
}

.tac-input-wrap {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.tac-input-wrap .form-input,
.tac-input-wrap .tac-question-input {
  flex: 1 !important;
  height: 46px !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  font-size: 0.90rem !important;
  background: rgba(10, 15, 30, 0.7) !important;
  border: 1px solid rgba(226, 232, 240, 0.2) !important;
  color: #f8fafc !important;
  box-sizing: border-box !important;
}

.tac-input-wrap .btn-cosmic-small {
  height: 46px !important;
  padding: 0 20px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

/* 3. Cards Stage & Unified Dimensions */
.tarot-stage {
  margin-bottom: 22px !important;
  min-height: 380px !important;
}

.tarot-cards-row,
#sibille-cards-row,
#lenormand-cards-row,
.rune-cards-row,
#sigilli-cards-row,
.sigilli-cards-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  padding: 20px 10px 28px !important;
  min-height: 360px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

/* CARD GEOMETRY: 100% IDENTICAL ACROSS ALL 4 */
.tarot-card-v3,
.sibille-card-v3,
.lenormand-card-v3,
.rune-stone-v3 {
  width: 210px !important;
  height: 335px !important;
  border-radius: 16px !important;
  perspective: 1200px !important;
  -webkit-perspective: 1200px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.tarot-card-v3:hover,
.sibille-card-v3:hover,
.lenormand-card-v3:hover,
.rune-stone-v3:hover {
  transform: translateY(-8px) scale(1.02) !important;
}

@media (max-width: 1024px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 175px !important;
    height: 280px !important;
  }
}

@media (max-width: 768px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 145px !important;
    height: 232px !important;
  }
}

@media (max-width: 480px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 120px !important;
    height: 195px !important;
  }
}

/* 4. Action Buttons (Evoca / Interpreta) */
#tarot-interpret-btn,
#sibille-interpret-btn,
#lenormand-interpret-btn,
#rune-interpret-btn,
.oracle-interpret-btn {
  width: 100% !important;
  max-width: 460px !important;
  margin: 26px auto 0 !important;
  display: block !important;
  height: 52px !important;
  line-height: 50px !important;
  padding: 0 28px !important;
  font-size: 0.95rem !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  font-family: 'Cinzel', serif !important;
  text-align: center !important;
  text-transform: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#tarot-interpret-btn:hover,
#sibille-interpret-btn:hover,
#lenormand-interpret-btn:hover,
#rune-interpret-btn:hover,
.oracle-interpret-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55) !important;
}

/* ==========================================================================
   I 64 SIGILLI DI SANDRA — STILI DEDICATI
   Blu Notte Reale, Filigrana d'Oro 24k & Geometria Armonizzata
   ========================================================================== */

/* 1. Deck Showcase Card */
.sigilli-deck-showcase {
  background: linear-gradient(135deg, rgba(8, 16, 38, 0.95) 0%, rgba(14, 28, 64, 0.9) 50%, rgba(5, 10, 24, 0.98) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 18px !important;
  padding: 24px 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-bottom: 22px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) !important;
}

.sigilli-deck-showcase::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 18% 50%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 85% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 55%) !important;
  pointer-events: none !important;
}

.sigilli-deck-showcase::after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.sigilli-seal-orb {
  width: 105px !important;
  height: 105px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #1e3a8a 0%, #0a1329 70%, #030712 100%) !important;
  border: 2px solid rgba(212, 175, 55, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.3) !important;
  position: relative !important;
}

.sigilli-seal-sym {
  font-size: 2.5rem !important;
  color: #fbbf24 !important;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.8)) !important;
}

/* Chips delle 8 Famiglie */
.fam-chip-origine   { background: rgba(56, 189, 248, 0.15) !important; border-color: rgba(56, 189, 248, 0.4) !important; color: #bae6fd !important; }
.fam-chip-essenza   { background: rgba(251, 191, 36, 0.15) !important; border-color: rgba(251, 191, 36, 0.4) !important; color: #fef08a !important; }
.fam-chip-legame    { background: rgba(244, 114, 182, 0.15) !important; border-color: rgba(244, 114, 182, 0.4) !important; color: #fbcfe8 !important; }
.fam-chip-desiderio { background: rgba(232, 121, 249, 0.15) !important; border-color: rgba(232, 121, 249, 0.4) !important; color: #f5d0fe !important; }
.fam-chip-prova     { background: rgba(248, 113, 113, 0.15) !important; border-color: rgba(248, 113, 113, 0.4) !important; color: #fecaca !important; }
.fam-chip-mutamento { background: rgba(52, 211, 153, 0.15) !important; border-color: rgba(52, 211, 153, 0.4) !important; color: #a7f3d0 !important; }
.fam-chip-destino   { background: rgba(129, 140, 248, 0.15) !important; border-color: rgba(129, 140, 248, 0.4) !important; color: #c7d2fe !important; }
.fam-chip-soglia    { background: rgba(192, 132, 252, 0.15) !important; border-color: rgba(192, 132, 252, 0.4) !important; color: #e9d5ff !important; }

/* 2. Card 3D Component */
.sigilli-card-v3 {
  width: 210px !important;
  height: 335px !important;
  border-radius: 16px !important;
  perspective: 1200px !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.sigilli-card-v3:hover {
  transform: translateY(-8px) scale(1.02) !important;
}

.sigilli-card-inner {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  border-radius: 16px !important;
}

.sigilli-card-v3.sigillo-flipped .sigilli-card-inner,
.sigilli-card-inner.sigillo-is-flipped {
  transform: rotateY(180deg) !important;
}

/* Dorso: Blu Notte Reale & Sigillo d'Oro */
.sigilli-card-back {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at 50% 45%, #0f2042 0%, #060d1f 70%, #030712 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(212, 175, 55, 0.15) !important;
  overflow: hidden !important;
}

.sigilli-card-back::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 12px !important;
  pointer-events: none !important;
}

.sigilli-back-pattern {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 2 !important;
}

.sigilli-back-emblem {
  font-size: 2.6rem !important;
  color: #fbbf24 !important;
  filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.7)) !important;
}

.sigilli-back-label {
  font-family: 'Cinzel', serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  color: #f8fafc !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

.sigilli-back-sub {
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  color: #fbbf24 !important;
  text-transform: uppercase !important;
}

/* Fronte: Arte Blu e Oro 24k Piena */
.sigilli-card-front {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  background: #060c1d !important;
  border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  transform: rotateY(180deg) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 20px rgba(212, 175, 55, 0.25) !important;
}

.sigilli-card-art-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  transition: transform 0.4s ease !important;
}

.sigilli-card-v3:hover .sigilli-card-art-img {
  transform: scale(1.04) !important;
}

/* Badge Posizione Superiore */
.sigilli-pos-badge-top {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.sigilli-pos-pill {
  pointer-events: auto !important;
  background: rgba(8, 16, 38, 0.82) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  color: #fef08a !important;
  padding: 3px 9px !important;
  border-radius: 12px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  white-space: nowrap !important;
  max-width: 155px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Fascia Inferiore Trasparente */
.sigilli-card-info-glass {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 12px 10px 10px !important;
  background: linear-gradient(to top, rgba(5, 10, 24, 0.94) 0%, rgba(5, 10, 24, 0.8) 65%, transparent 100%) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 10 !important;
  text-align: center !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

.sigilli-card-title-glass {
  font-family: 'Cinzel', serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: 2px !important;
}

.sigilli-card-meta-glass {
  font-size: 0.72rem !important;
  color: #fbbf24 !important;
  font-weight: 600 !important;
}

.sigilli-card-hint-glass {
  font-size: 0.65rem !important;
  color: #94a3b8 !important;
  margin-top: 3px !important;
  letter-spacing: 0.03em !important;
}

.sigilli-card-res-tag {
  font-size: 0.66rem !important;
  color: #fef08a !important;
  background: rgba(212, 175, 55, 0.22) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  margin: 4px auto 2px auto !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  max-width: 90% !important;
  display: block !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Dashboard Deterministica & Risonanza Astrale */
.sigilli-calc-dashboard {
  background: linear-gradient(135deg, rgba(8, 16, 38, 0.92) 0%, rgba(13, 24, 56, 0.85) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

.sigilli-res-bar-wrap {
  background: rgba(255, 255, 255, 0.08) !important;
  height: 8px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin: 8px 0 10px !important;
}

.sigilli-res-bar-fill {
  background: linear-gradient(90deg, #38bdf8 0%, #fbbf24 100%) !important;
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 1s ease !important;
}

/* ─── SINTESI ASTROMANTICA WORKFLOW STYLES ────────────────────────── */
.astromantica-step-box {
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.astromantica-step-box:hover {
  border-color: rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}
.astromantica-step-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.astromantica-step-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1e3a8a, #d4af37) !important;
  color: #ffffff !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
  flex-shrink: 0 !important;
}
.astromantica-step-title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #f8fafc !important;
  letter-spacing: 0.03em !important;
}
.astromantica-step-desc {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}
.astromantica-inputs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}
.astromantica-inputs-grid .form-group {
  margin-bottom: 0 !important;
}
.astromantica-inputs-grid .form-label {
  font-size: 0.76rem !important;
  color: #cbd5e1 !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.astromantica-inputs-grid .form-input {
  width: 100% !important;
  padding: 9px 12px !important;
  background: rgba(3, 7, 18, 0.65) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
  font-size: 0.85rem !important;
  box-sizing: border-box !important;
}
.astromantica-inputs-grid .form-input:focus {
  border-color: #fbbf24 !important;
  outline: none !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.3) !important;
}
.astromantica-question-wrap input {
  width: 100% !important;
  padding: 12px 16px !important;
  background: rgba(3, 7, 18, 0.65) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  font-size: 0.9rem !important;
  box-sizing: border-box !important;
}
.astromantica-question-wrap input:focus {
  border-color: #fbbf24 !important;
  outline: none !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
}

/* ─── SACRED GEOMETRIES PER LA SINTESI ASTROMANTICA ─── */
.sigilli-geo-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 14px auto 26px !important;
  perspective: 1500px !important;
}

.sigilli-geo-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 22px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

.sigilli-geo-triangle .sigilli-geo-row-top {
  margin-bottom: 2px !important;
}

.sigilli-geo-pentagon .sigilli-geo-row {
  margin: 2px 0 !important;
}

.sigilli-geo-heptagram .sigilli-geo-row {
  margin: 2px 0 !important;
}

@media (max-width: 768px) {
  .sigilli-geo-wrap {
    gap: 14px !important;
  }
  .sigilli-geo-row {
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .sigilli-geo-wrap {
    gap: 10px !important;
  }
  .sigilli-geo-row {
    gap: 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERACTIVE 3D DECK SHUFFLER & DEAL ANIMATION (SANDRA UNIFIED SYSTEM)
   ══════════════════════════════════════════════════════════════════════════ */

.deck-shuffler-stage {
  max-width: 680px;
  margin: 16px auto 28px;
  padding: 10px 16px;
  text-align: center;
  perspective: 1200px;
  -webkit-perspective: 1200px;
  animation: fadeIn 0.4s ease forwards;
}

.deck-shuffler-header {
  margin-bottom: 22px;
}

.deck-shuffler-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #fef08a;
  margin-bottom: 8px;
  font-family: 'Cinzel', serif;
}

.deck-shuffler-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  color: #f8fafc;
  margin: 4px 0 6px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.deck-shuffler-sub {
  font-size: 0.86rem;
  color: #94a3b8;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.deck-shuffler-interactive-zone {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  padding: 28px 20px 24px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 45%, rgba(30, 58, 138, 0.22) 0%, rgba(15, 23, 42, 0.45) 60%, rgba(3, 7, 18, 0.2) 100%);
  border: 1px dashed rgba(212, 175, 55, 0.3);
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.deck-shuffler-interactive-zone:hover {
  border-color: rgba(212, 175, 55, 0.65);
  background: radial-gradient(circle at 50% 45%, rgba(30, 58, 138, 0.35) 0%, rgba(15, 23, 42, 0.55) 60%, rgba(3, 7, 18, 0.3) 100%);
  box-shadow: 0 0 35px rgba(212, 175, 55, 0.18), inset 0 0 25px rgba(30, 58, 138, 0.2);
  transform: translateY(-2px);
}

.deck-shuffler-interactive-zone:active {
  transform: scale(0.99);
}

/* ─── 3D DECK ASSEMBLY ─── */
.deck-3d-assembly {
  width: clamp(165px, 15vw, 215px);
  height: clamp(275px, 24vw, 355px);
  position: relative;
  margin: 10px auto 26px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: deckHoverFloat 4.2s ease-in-out infinite;
  transition: transform 0.4s ease;
}

@keyframes deckHoverFloat {
  0%, 100% {
    transform: translateY(0px) rotateX(15deg) rotateY(-8deg);
  }
  50% {
    transform: translateY(-12px) rotateX(11deg) rotateY(7deg);
  }
}

/* Glow Aura underneath */
.deck-3d-glow {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22) 0%, rgba(30, 58, 138, 0.15) 50%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 1;
}

/* Base stack (thick realistic cards block with gold gilded edge) */
.deck-base-stack {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #0d1322;
  box-shadow:
    0 1px 0 #d4af37,
    0 2px 0 #a17f22,
    0 3px 0 #d4af37,
    0 4px 0 #80651c,
    0 5px 0 #b38f2a,
    0 6px 0 #665016,
    0 7px 0 #d4af37,
    0 8px 0 #4d3c10,
    0 9px 0 #d4af37,
    0 10px 0 #332709,
    0 18px 35px rgba(0, 0, 0, 0.85),
    0 0 28px rgba(212, 175, 55, 0.25);
  z-index: 2;
}

/* Riffle Packets Left & Right */
.deck-wing-packet {
  position: absolute;
  width: 78%;
  height: 96%;
  top: 2%;
  border-radius: 12px;
  overflow: hidden;
  z-index: 4;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.deck-wing-left {
  left: 3%;
  transform-origin: bottom left;
  animation: riffleLeftWing 2.8s ease-in-out infinite;
}

.deck-wing-right {
  right: 3%;
  transform-origin: bottom right;
  animation: riffleRightWing 2.8s ease-in-out infinite 0.15s;
}

.deck-wing-packet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes riffleLeftWing {
  0%, 100% {
    transform: translateX(0px) translateY(0) rotateZ(0deg) rotateY(0deg);
  }
  25% {
    transform: translateX(-42px) translateY(-10px) rotateZ(-7deg) rotateY(20deg);
  }
  50% {
    transform: translateX(-16px) translateY(-3px) rotateZ(-2deg) rotateY(8deg);
  }
  75% {
    transform: translateX(-48px) translateY(-12px) rotateZ(-9deg) rotateY(24deg);
  }
}

@keyframes riffleRightWing {
  0%, 100% {
    transform: translateX(0px) translateY(0) rotateZ(0deg) rotateY(0deg);
  }
  25% {
    transform: translateX(42px) translateY(-8px) rotateZ(7deg) rotateY(-20deg);
  }
  50% {
    transform: translateX(16px) translateY(-2px) rotateZ(2deg) rotateY(-8deg);
  }
  75% {
    transform: translateX(48px) translateY(-10px) rotateZ(9deg) rotateY(-24deg);
  }
}

/* ─── ACTIVELY SHUFFLING FRONT CARDS (TOP CYCLE) ─── */
.deck-layer-card {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  background: #0f172a;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.deck-layer-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deck-layer-base {
  z-index: 5;
  border-color: rgba(212, 175, 55, 0.35);
}

.deck-front-cycle-1 {
  z-index: 10;
  animation: frontCycleOne 3.2s ease-in-out infinite;
}

.deck-front-cycle-2 {
  z-index: 8;
  animation: frontCycleTwo 3.2s ease-in-out infinite;
}

.deck-front-cycle-3 {
  z-index: 12;
  animation: frontRiffleFlutter 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.7s;
}

@keyframes frontCycleOne {
  0% {
    transform: translate3d(0, 0, 14px) rotate(0deg);
    opacity: 1;
    z-index: 11;
  }
  18% {
    transform: translate3d(-56px, -18px, 32px) rotate(-10deg) rotateY(18deg);
    opacity: 1;
    z-index: 11;
  }
  38% {
    transform: translate3d(-64px, -6px, 20px) rotate(-13deg) rotateY(22deg);
    opacity: 0.95;
    z-index: 11;
  }
  52% {
    transform: translate3d(-18px, 12px, -2px) rotate(-4deg);
    opacity: 0.75;
    z-index: 6;
  }
  68% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0.45;
    z-index: 6;
  }
  82% {
    transform: translate3d(14px, 4px, 6px) rotate(2deg);
    opacity: 0.9;
    z-index: 10;
  }
  100% {
    transform: translate3d(0, 0, 14px) rotate(0deg);
    opacity: 1;
    z-index: 11;
  }
}

@keyframes frontCycleTwo {
  0% {
    transform: translate3d(18px, 10px, -2px) rotate(4deg);
    opacity: 0.65;
    z-index: 6;
  }
  18% {
    transform: translate3d(-10px, 4px, 6px) rotate(-2deg);
    opacity: 0.85;
    z-index: 9;
  }
  36% {
    transform: translate3d(0, 0, 14px) rotate(0deg);
    opacity: 1;
    z-index: 11;
  }
  54% {
    transform: translate3d(56px, -18px, 32px) rotate(10deg) rotateY(-18deg);
    opacity: 1;
    z-index: 11;
  }
  72% {
    transform: translate3d(64px, -6px, 20px) rotate(13deg) rotateY(-22deg);
    opacity: 0.95;
    z-index: 11;
  }
  86% {
    transform: translate3d(22px, 8px, -1px) rotate(4deg);
    opacity: 0.75;
    z-index: 6;
  }
  100% {
    transform: translate3d(18px, 10px, -2px) rotate(4deg);
    opacity: 0.65;
    z-index: 6;
  }
}

@keyframes frontRiffleFlutter {
  0% {
    transform: translate3d(-42px, -24px, 28px) rotate(-14deg);
    opacity: 0;
  }
  12% {
    opacity: 0.95;
    transform: translate3d(-20px, -12px, 24px) rotate(-7deg);
  }
  28% {
    opacity: 0.95;
    transform: translate3d(24px, 10px, 20px) rotate(8deg);
  }
  40% {
    opacity: 0;
    transform: translate3d(48px, 18px, 10px) rotate(12deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(-42px, -24px, 28px) rotate(-14deg);
  }
}

.deck-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.35) 50%, transparent 75%);
  pointer-events: none;
  animation: sheenSweep 3.6s ease-in-out infinite;
}

@keyframes sheenSweep {
  0% {
    transform: translateX(-160%) rotate(20deg);
  }
  40%, 100% {
    transform: translateX(260%) rotate(20deg);
  }
}

/* ─── STOPPED / SQUARED STATE ─── */
.deck-shuffler-stage.is-stopped .deck-3d-assembly {
  animation: none !important;
  transform: translateY(0) rotateX(10deg) rotateY(0deg) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) !important;
}

.deck-shuffler-stage.is-stopped .deck-wing-packet,
.deck-shuffler-stage.is-stopped .deck-front-cycle-2,
.deck-shuffler-stage.is-stopped .deck-front-cycle-3 {
  animation: none !important;
  transform: translate3d(0, 0, 0) rotate(0deg) !important;
  opacity: 0 !important;
  transition: all 0.3s ease !important;
}

.deck-shuffler-stage.is-stopped .deck-front-cycle-1 {
  animation: none !important;
  transform: translate3d(0, 0, 14px) rotate(0deg) scale(1.02) !important;
  opacity: 1 !important;
  box-shadow: 0 0 45px rgba(212, 175, 55, 0.8), 0 14px 40px rgba(0, 0, 0, 0.85) !important;
  transition: all 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) !important;
}

.deck-shuffler-stage.is-stopped .btn-deck-cut {
  background: linear-gradient(135deg, #10b981, #047857) !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.5) !important;
}

/* ─── ACTION PROMPT & CUT BUTTON ─── */
.deck-action-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 10;
}

.btn-deck-cut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.85) 0%, rgba(212, 175, 55, 0.45) 100%);
  border: 1px solid rgba(212, 175, 55, 0.65);
  color: #fef08a;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.28);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-deck-cut:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95) 0%, rgba(212, 175, 55, 0.65) 100%);
  border-color: #fde047;
  color: #ffffff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 32px rgba(212, 175, 55, 0.5);
}

.deck-hint-sub {
  font-size: 0.78rem;
  color: #cbd5e1;
  letter-spacing: 0.02em;
}

/* ─── CARD DEALING FLY-IN ANIMATION ─── */
@keyframes dealCardFlyIn {
  0% {
    opacity: 0;
    transform: translateY(70px) scale(0.6) rotateX(24deg);
  }
  65% {
    opacity: 1;
    transform: translateY(-8px) scale(1.03) rotateX(-5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

.card-dealt-anim {
  animation: dealCardFlyIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

/* ─── CARD BACK ARTWORK IMAGE ─── */
.card-back-artwork-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block !important;
}

.rune-stone-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0.92;
}

/* ─── PENTAGON & HEPTAGRAM SACRED GEOMETRY ENHANCEMENT ─── */
.sigilli-geo-pentagon .sigilli-card-v3,
.sigilli-geo-heptagram .sigilli-card-v3 {
  width: 175px !important;
  height: 280px !important;
}

#sigilli-cards-stage {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
  scroll-margin-top: 110px !important;
  overflow: visible !important;
}

.deck-layer-card,
.deck-wing-packet {
  background: radial-gradient(circle at 50% 40%, #1e3a8a 0%, #0f172a 70%, #030712 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.2) !important;
}

/* ==========================================================================
   SANDRA COSMIC BRAND HEADER & AUTH WIDGETS
   ========================================================================== */
.sandra-brand-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.5rem;
  background: rgba(10, 8, 20, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.sandra-brand-left {
  display: flex;
  align-items: center;
}

.sandra-brand-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.2s ease;
}
.sandra-brand-logo:hover {
  opacity: 0.9;
}

.sandra-brand-glyph {
  font-size: 1.35rem;
  color: var(--sandra-gold, #d4af37);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  animation: pulseGlyph 4s ease-in-out infinite;
}

@keyframes pulseGlyph {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(212,175,55,0.4)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(212,175,55,0.85)); }
}

.sandra-brand-meta {
  display: flex;
  flex-direction: column;
}

.sandra-brand-name {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, #fff 30%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.sandra-brand-tagline {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.85);
  font-weight: 500;
}

.sandra-brand-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sandra-header-guest {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sandra-guest-pill {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  letter-spacing: 0.04em;
}

.btn-sandra-auth {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(99, 102, 241, 0.25));
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.38rem 0.95rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-sandra-auth:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), rgba(99, 102, 241, 0.4));
  border-color: var(--sandra-gold, #d4af37);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
  transform: translateY(-1px);
}

.sandra-header-user-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

@keyframes pulseAlert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.btn-admin-pill {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(212, 175, 55, 0.25));
  border: 1px solid rgba(168, 85, 247, 0.7);
  color: #e9d5ff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-admin-pill:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.5), rgba(212, 175, 55, 0.4));
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
  transform: translateY(-1px);
}

.sandra-user-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
}

.user-avatar-sm {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.2);
  color: var(--sandra-gold, #d4af37);
  border-radius: 50%;
  font-size: 0.65rem;
}

.user-name-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f1f5f9;
}

.btn-logout-icon {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-logout-icon:hover {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   CASA VIII SECTION STYLING (COMPACT & OPTIMIZED RHYTHM)
   ========================================================================== */
#section-casa8 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1rem 1rem 2.5rem 1rem;
}

.casa8-hero {
  text-align: center;
  padding: 2.25rem 1.5rem 2rem 1.5rem;
  background: radial-gradient(circle at 50% 15%, rgba(99, 102, 241, 0.18), rgba(12, 10, 24, 0.75) 70%),
              linear-gradient(180deg, rgba(20, 16, 38, 0.85) 0%, rgba(10, 8, 20, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(212, 175, 55, 0.2);
}

.casa8-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.casa8-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 1rem;
  border-radius: 9999px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: var(--sandra-gold, #d4af37);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 0.85rem;
}

.casa8-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 0.4rem 0;
  background: linear-gradient(135deg, #fff 20%, #d4af37 60%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
  line-height: 1.1;
}

.casa8-tagline {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.casa8-lead {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.92);
  max-width: 780px;
  margin: 0 auto 0.75rem auto;
}

.casa8-sublead {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(203, 213, 225, 0.8);
  max-width: 760px;
  margin: 0 auto 1.5rem auto;
}

.casa8-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-casa8-gold {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #0b0914;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.65rem 1.65rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
  transition: all 0.25s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.btn-casa8-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.55);
  filter: brightness(1.1);
}

.btn-casa8-outline {
  background: rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.btn-casa8-outline:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--sandra-gold, #d4af37);
  transform: translateY(-2px);
}

.c8-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sandra-gold, #d4af37);
  margin-bottom: 0.35rem;
  text-align: center;
}

.c8-section-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 600;
  text-align: center;
  color: #fff;
  margin: 0 0 1.5rem 0;
  letter-spacing: 0.05em;
}

/* --- I 3 Pilastri --- */
.casa8-pillars-section {
  margin-bottom: 2.25rem;
}

.casa8-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.c8-pillar-card {
  background: rgba(22, 18, 38, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  padding: 1.35rem 1.25rem;
  backdrop-filter: blur(12px);
  transition: all 0.25s ease;
  position: relative;
}
.c8-pillar-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 18px rgba(212, 175, 55, 0.15);
}

.c8-pillar-icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.c8-pillar-title {
  font-family: 'Cinzel', serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 0.55rem;
  letter-spacing: 0.02em;
}

.c8-pillar-text {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(215, 225, 235, 0.9);
  margin: 0;
}

/* --- Bento Grid with Faded Card Watermarks --- */
.casa8-tools-section {
  margin-bottom: 2.25rem;
}

.casa8-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.c8-bento-card {
  position: relative;
  overflow: hidden;
  background: rgba(22, 18, 38, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 16px;
  padding: 1.25rem 1.25rem;
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 190px;
}

.c8-bento-span-2 {
  grid-column: span 2;
}

.c8-bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(212, 175, 55, 0.2);
}

.c8-card-bg {
  position: absolute;
  right: -10px;
  bottom: -15px;
  width: 125px;
  height: 185px;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  pointer-events: none;
  border-radius: 10px;
  filter: contrast(130%) grayscale(15%);
  mask-image: radial-gradient(circle at 75% 75%, rgba(0,0,0,1) 40%, transparent 95%);
  -webkit-mask-image: radial-gradient(circle at 75% 75%, rgba(0,0,0,1) 40%, transparent 95%);
  transition: all 0.35s ease;
}

.c8-bento-card:hover .c8-card-bg {
  opacity: 0.3;
  transform: scale(1.05) rotate(-2deg);
  filter: contrast(140%) grayscale(0%);
}

.c8-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.c8-card-icon {
  font-size: 1.5rem;
}

.c8-card-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sandra-gold, #d4af37);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
}

.c8-card-title {
  font-family: 'Cinzel', serif;
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.45rem 0;
  letter-spacing: 0.03em;
}

.c8-card-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(215, 225, 235, 0.9);
  margin: 0 0 1rem 0;
  position: relative;
  z-index: 1;
}

.c8-card-footer {
  margin-top: auto;
}

.c8-card-action {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sandra-gold, #d4af37);
  letter-spacing: 0.04em;
  transition: transform 0.2s ease;
  display: inline-block;
}
.c8-bento-card:hover .c8-card-action {
  transform: translateX(4px);
  color: #fff;
}

/* ==========================================================================
   FASCIA TIPO SINDACO (GIALLA / ORO) — METODO PROPRIETARIO SANDRA
   ========================================================================== */
.c8-card-sigilli {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  background: linear-gradient(145deg, rgba(28, 20, 42, 0.95), rgba(46, 30, 15, 0.92)) !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.12) !important;
  position: relative;
  overflow: hidden;
}

.c8-card-sigilli:hover {
  border-color: rgba(251, 191, 36, 0.9) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 0 30px rgba(245, 158, 11, 0.35) !important;
}

.c8-mayor-sash-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 195px;
  height: 195px;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
}

.c8-mayor-sash {
  position: absolute;
  top: 38px;
  right: -52px;
  width: 245px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fffbeb 0%, #fef08a 15%, #facc15 50%, #eab308 78%, #ca8a04 100%);
  color: #160a02;
  text-align: center;
  font-family: 'Cinzel', serif, system-ui;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  padding: 6px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 16px rgba(234, 179, 8, 0.45);
  border-top: 1.5px solid rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid rgba(161, 98, 7, 0.85);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.c8-mayor-sash::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.c8-mayor-sash::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: rgba(146, 64, 14, 0.4);
}

/* --- Guida Pratica & Deontologia --- */
.casa8-guide-section {
  margin-bottom: 2.25rem;
}

.casa8-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 1100px) {
  .casa8-guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .casa8-guide-grid {
    grid-template-columns: 1fr;
  }
}

.c8-guide-box {
  background: rgba(22, 18, 38, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  padding: 1.35rem 1.25rem;
  backdrop-filter: blur(12px);
  position: relative;
}

.c8-guide-num {
  font-family: 'Cinzel', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: rgba(212, 175, 55, 0.4);
  margin-bottom: 0.35rem;
  line-height: 1;
}

.c8-guide-heading {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem 0;
}

.c8-guide-p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(215, 225, 235, 0.9);
  margin: 0;
}

.c8-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: rgba(241, 245, 249, 0.92);
  line-height: 1.45;
}

.c8-feat-check {
  color: var(--sandra-gold, #d4af37);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}

.c8-rate-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
}

.c8-rate-currency {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sandra-gold, #d4af37);
}

.c8-rate-amount {
  font-family: 'Cinzel', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.c8-rate-period {
  font-size: 0.88rem;
  color: rgba(203, 213, 225, 0.7);
}

.c8-rate-alt {
  font-size: 0.84rem;
  color: rgba(212, 175, 55, 0.9);
  margin-top: 0.35rem;
}

.btn-large {
  font-size: 0.95rem;
  padding: 0.85rem 2.25rem;
  border-radius: 12px;
}

/* ==========================================================================
   SANDRA MODALS (ACCESSO, PROFILO)
   ========================================================================== */
.sandra-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(7, 5, 16, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem !important;
}

.sandra-modal-overlay.active {
  display: flex !important;
}

.sandra-modal-card {
  width: 100%;
  max-width: 500px;
  background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15), rgba(16, 13, 30, 0.96) 75%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.18);
  max-height: 90vh;
  overflow-y: auto;
}

.sandra-modal-card.modal-large {
  max-width: 880px;
}

.sandra-modal-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s ease;
}
.sandra-modal-close:hover {
  color: #fff;
}

.sandra-modal-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--sandra-gold, #d4af37);
  text-align: center;
  margin-bottom: 0.45rem;
}

.sandra-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 0 0.45rem 0;
}

.sandra-modal-subtitle {
  font-size: 0.85rem;
  color: rgba(203, 213, 225, 0.85);
  text-align: center;
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}

/* Register Tab Highlight */
.smt-tab-register-highlight {
  position: relative;
}

/* Prominent Registration Callout in Login view */
.sandra-auth-need-register-box {
  margin-top: 1.35rem;
  padding: 1.1rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.09), rgba(124, 58, 237, 0.14));
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.sanr-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.sanr-badge-pill {
  background: #d4af37;
  color: #0d091a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.sanr-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.sanr-text {
  font-size: 0.8rem;
  color: rgba(226, 232, 240, 0.9);
  line-height: 1.45;
  margin: 0 0 0.9rem 0;
}
.btn-sandra-open-reg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, #d4af37, #f59e0b);
  border: none;
  border-radius: 8px;
  color: #0d091a;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
}
.btn-sandra-open-reg:hover {
  background: linear-gradient(135deg, #f59e0b, #d4af37);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.45);
}

/* Registration Header Intro */
.sandra-auth-reg-intro {
  margin-bottom: 1rem;
  text-align: center;
  padding: 0.75rem 0.9rem;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
}
.sari-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.sari-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
}
.sari-text {
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.85);
  line-height: 1.35;
  margin: 0;
}

/* Switch back to login link */
.sandra-auth-already-account {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: rgba(203, 213, 225, 0.75);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.btn-sandra-switch-login-link {
  background: transparent;
  border: none;
  color: var(--sandra-gold, #d4af37);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.btn-sandra-switch-login-link:hover {
  color: #fde047;
}

.sandra-modal-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.4rem;
}

.smt-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}
.smt-tab.active {
  color: var(--sandra-gold, #d4af37);
  border-bottom-color: var(--sandra-gold, #d4af37);
}

.sandra-field-group {
  margin-bottom: 0.85rem;
  text-align: left;
}

.sandra-field-group label {
  display: block;
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.85);
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.sandra-field-group input {
  width: 100%;
  background: rgba(10, 8, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  color: #fff;
  font-size: 0.88rem;
  transition: border-color 0.2s ease;
}
.sandra-field-group input:focus {
  outline: none;
  border-color: var(--sandra-gold, #d4af37);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
}

.btn-full {
  width: 100%;
  justify-content: center;
  margin-top: 0.4rem;
}

.sandra-form-error {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 0.55rem;
  font-size: 0.8rem;
  margin-bottom: 0.85rem;
  text-align: center;
}

.sandra-form-success {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  padding: 0.55rem;
  font-size: 0.8rem;
  margin-bottom: 0.85rem;
  text-align: center;
}

.smt-divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1rem 0 0.65rem 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
}
.smt-divider::before, .smt-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.btn-sso-unified {
  display: block;
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.65rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-bottom: 0.65rem;
}
.btn-sso-unified:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-continue-guest {
  background: transparent;
  border: none;
  color: rgba(203, 213, 225, 0.6);
  font-size: 0.78rem;
  cursor: pointer;
  margin-top: 0.4rem;
  text-decoration: underline;
  transition: color 0.2s ease;
}
.btn-continue-guest:hover {
  color: rgba(203, 213, 225, 0.95);
}

/* Admin Users Table */
.admin-toolbar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-toolbar input {
  flex: 1;
  background: rgba(10, 8, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  color: #fff;
  font-size: 0.85rem;
}

.admin-users-table-wrap {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow-x: auto;
  margin-bottom: 0.85rem;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  text-align: left;
}

.admin-users-table th {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(212, 175, 55, 0.9);
  font-weight: 700;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.admin-users-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 240, 0.9);
}

.admin-users-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.admin-toast {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #4ade80;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  text-align: center;
  margin-top: 0.65rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .casa8-pillars-grid, .casa8-guide-grid {
    grid-template-columns: 1fr;
  }
  .casa8-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .c8-bento-span-2 {
    grid-column: span 2;
  }

}

@media (max-width: 640px) {
  .sandra-brand-header {
    padding: 0.5rem 0.85rem;
  }
  .sandra-guest-pill {
    display: none;
  }
  .casa8-bento-grid {
    grid-template-columns: 1fr;
  }
  .c8-bento-span-2 {
    grid-column: span 1;
  }
}
/* ==========================================================================
   CASA VIII CINEMATIC ORACLE THEATER & SPREAD SIMULATOR (IMPACT PRO)
   ========================================================================== */

.casa8-cinematic-wrapper {
  margin: 1.75rem 0 2.5rem 0;
  position: relative;
  width: 100%;
}

/* Header del Teatro */
.c8-cinematic-header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.c8-sim-status-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.15);
}

.c8-sim-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981, 0 0 20px #10b981;
  animation: c8-pulse-green 1.5s infinite;
}

@keyframes c8-pulse-green {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.c8-cinematic-title {
  font-family: 'Cinzel', serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  margin: 0.25rem 0 0.5rem 0;
  background: linear-gradient(135deg, #ffffff 30%, #fef08a 70%, #d4af37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.c8-cinematic-sub {
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.95rem;
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Deck Selector Pills */
.c8-sim-deck-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 1.25rem auto 1.5rem auto;
  max-width: 980px;
}

.c8-sim-deck-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #cbd5e1;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}

.c8-sim-deck-btn:hover {
  border-color: rgba(212, 175, 55, 0.8);
  color: #fef08a;
  background: rgba(30, 41, 59, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

.c8-sim-deck-btn.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(245, 158, 11, 0.2));
  border-color: #facc15;
  color: #fff;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
}

.c8-sim-deck-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #facc15;
  opacity: 0.6;
}

.c8-sim-deck-btn.active .c8-sim-deck-dot {
  opacity: 1;
  box-shadow: 0 0 8px #facc15;
}

.c8-sim-prop-tag {
  background: #facc15;
  color: #1a0b02;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  margin-left: 4px;
}

/* STAGE DEL TEATRO (Glass Neon Container con sfondo AI) */
.casa8-sim-stage {
  position: relative;
  min-height: 520px;
  border-radius: 20px;
  overflow: hidden;
  background: #070913;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 175, 55, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  perspective: 1200px;
}

/* Cosmic AI Background */
.c8-sim-stage-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/branding/oracle_spread_cinematic.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity: 0.42;
  transition: opacity 0.8s ease, transform 12s ease-in-out;
  transform: scale(1.02);
  z-index: 1;
}

.casa8-sim-stage:hover .c8-sim-stage-bg {
  transform: scale(1.06);
}

.c8-sim-stage-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 20%, rgba(5, 7, 15, 0.85) 75%, #05070f 100%);
  z-index: 2;
  pointer-events: none;
}

/* Grid & Rune overlay layer */
.c8-sim-stage-grid {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 65%),
    linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  z-index: 2;
  pointer-events: none;
}

/* Stage Top Bar (Info fase in tempo reale) */
.c8-sim-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(180deg, rgba(10, 14, 28, 0.85) 0%, rgba(10, 14, 28, 0) 100%);
}

.c8-sim-phase-indicator {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.c8-sim-phase-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fef08a;
  letter-spacing: 0.05em;
  text-shadow: 0 0 15px rgba(254, 240, 138, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

.c8-sim-phase-sub {
  font-size: 0.78rem;
  color: rgba(203, 213, 225, 0.85);
  font-family: 'JetBrains Mono', monospace;
}

/* Indicatori di Step 1-4 */
.c8-sim-steps-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.c8-sim-step-pill {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #94a3b8;
  font-size: 0.78rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.c8-sim-step-pill:hover {
  border-color: #fef08a;
  color: #fff;
  background: rgba(51, 65, 85, 0.8);
}

.c8-sim-step-pill.active {
  background: #facc15;
  border-color: #fef08a;
  color: #0f172a;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.6);
  transform: scale(1.1);
}

/* STAGE ARENA (Centro della simulazione) */
.c8-sim-arena {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}

/* CARTE NELL'ARENA */
.c8-sim-cards-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  width: 100%;
  max-width: 860px;
  perspective: 1000px;
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Singolo Slot Carta */
.c8-sim-slot {
  position: relative;
  width: 175px;
  height: 290px;
  perspective: 1000px;
  transition: all 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.c8-sim-slot-pos {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  z-index: 6;
  transition: all 0.4s ease;
}

/* Carta 3D Flipper */
.c8-sim-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.c8-sim-card-front,
.c8-sim-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  background: #0f172a;
}

.c8-sim-card-front img,
.c8-sim-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c8-sim-card-back {
  transform: rotateY(0deg);
  border-color: rgba(212, 175, 55, 0.35);
  background: linear-gradient(135deg, #1e1b4b, #0f172a);
}

.c8-sim-card-front {
  transform: rotateY(180deg);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.35);
}

/* Card Info Pill al fondo dello slot */
.c8-sim-card-meta {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
  width: 115%;
  text-align: center;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.c8-sim-card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c8-sim-card-sub {
  font-size: 0.7rem;
  color: #fef08a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
}

/* =========================================================
   COMPORTAMENTO NELLE 4 FASI DINAMICHE
   ========================================================= */

/* --- FASE 1: MESCOLA E ORBITA --- */
.phase-1 .c8-sim-cards-container {
  gap: 0;
  transform: translateY(10px) rotateX(15deg);
}

.phase-1 .c8-sim-slot:nth-child(1) {
  transform: translateX(45px) rotateZ(-12deg) scale(0.95);
  z-index: 1;
}

.phase-1 .c8-sim-slot:nth-child(2) {
  transform: translateX(0) rotateZ(0deg) scale(1);
  z-index: 3;
}

.phase-1 .c8-sim-slot:nth-child(3) {
  transform: translateX(-45px) rotateZ(12deg) scale(0.95);
  z-index: 2;
}

.phase-1 .c8-sim-card-inner {
  transform: rotateY(0deg); /* Dorso visibile */
  animation: c8-shuffle-riffle 1.8s infinite ease-in-out;
}

.phase-1 .c8-sim-slot-pos,
.phase-1 .c8-sim-card-meta {
  opacity: 0;
  transform: translate(-50%, 10px);
}

@keyframes c8-shuffle-riffle {
  0% { transform: translateY(0) rotateY(0deg); }
  50% { transform: translateY(-16px) rotateY(15deg) scale(1.03); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4); }
  100% { transform: translateY(0) rotateY(0deg); }
}

/* --- FASE 2: DISPOSIZIONE NELLA GEOMETRIA SACRA --- */
.phase-2 .c8-sim-cards-container {
  gap: 2.2rem;
  transform: translateY(0) rotateX(0deg);
}

.phase-2 .c8-sim-slot {
  transform: translateX(0) scale(1);
}

.phase-2 .c8-sim-card-inner {
  transform: rotateY(180deg); /* Fronte svelato */
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.phase-2 .c8-sim-slot-pos {
  opacity: 1;
  transform: translate(-50%, 0);
}

.phase-2 .c8-sim-card-meta {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- FASE 3: INGRANDIMENTO 3D ARCHETIPICO --- */
.phase-3 .c8-sim-cards-container {
  gap: 2.5rem;
}

.phase-3 .c8-sim-card-inner {
  transform: rotateY(180deg);
}

.phase-3 .c8-sim-slot:not(.c8-is-focal) {
  opacity: 0.45;
  transform: scale(0.88) translateY(10px);
  filter: blur(1.5px);
}

.phase-3 .c8-is-focal {
  transform: scale(1.36) translateY(-14px) rotateY(-8deg) rotateX(5deg);
  z-index: 20;
}

.phase-3 .c8-is-focal .c8-sim-card-front {
  border-color: #fef08a;
  box-shadow: 0 0 50px rgba(245, 158, 11, 0.8), 0 0 80px rgba(212, 175, 55, 0.4);
  animation: c8-focal-pulse 2s infinite alternate ease-in-out;
}

.phase-3 .c8-is-focal .c8-sim-slot-pos {
  background: #facc15;
  color: #1a0b02;
  font-weight: 800;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.8);
  transform: translate(-50%, -6px);
}

.phase-3 .c8-is-focal .c8-sim-card-meta {
  opacity: 1;
  transform: translate(-50%, 14px) scale(0.85);
}

@keyframes c8-focal-pulse {
  0% { box-shadow: 0 0 35px rgba(245, 158, 11, 0.6), 0 0 60px rgba(212, 175, 55, 0.3); }
  100% { box-shadow: 0 0 55px rgba(245, 158, 11, 0.9), 0 0 90px rgba(212, 175, 55, 0.5); }
}

/* --- FASE 4: CANALIZZAZIONE QUANTISTICA & SOVRAIMPRESSIONE HUD --- */
.phase-4 .c8-sim-cards-container {
  gap: 1.8rem;
  transform: translateY(-38px) scale(0.88);
  opacity: 0.65;
}

.phase-4 .c8-sim-card-inner {
  transform: rotateY(180deg);
}

/* SOVRAIMPRESSIONE HUD (Typewriter & Sintesi Trascendente) */
.c8-sim-hud-overlay {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  width: 90%;
  max-width: 780px;
  background: rgba(11, 15, 29, 0.94);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: 14px;
  padding: 1.25rem 1.6rem;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(212, 175, 55, 0.25);
  backdrop-filter: blur(14px);
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c8-sim-hud-overlay.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.c8-sim-hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.c8-sim-hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  color: #facc15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c8-sim-hud-metrics {
  display: flex;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: #94a3b8;
}

.c8-sim-hud-metric-val {
  color: #38bdf8;
  font-weight: 700;
}

.c8-sim-hud-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #f1f5f9;
  min-height: 60px;
}

.c8-sim-cursor {
  display: inline-block;
  width: 7px;
  height: 15px;
  background: #facc15;
  margin-left: 4px;
  vertical-align: middle;
  animation: c8-blink 0.8s infinite;
}

@keyframes c8-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* STAGE BOTTOM CONTROLS */
.c8-sim-bottombar {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.4rem;
  background: linear-gradient(0deg, rgba(8, 12, 22, 0.95) 0%, rgba(8, 12, 22, 0) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.c8-sim-btn-ctrl {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #e2e8f0;
  font-size: 0.8rem;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.c8-sim-btn-ctrl:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #fef08a;
  border-color: #facc15;
}

.c8-sim-cta-direct {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #fef08a;
  color: #1a0b02;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.48rem 1.15rem;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
  transition: all 0.25s ease;
}

.c8-sim-cta-direct:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.6);
}

/* ==========================================================================
   SEZIONE 2: GALLERIA DEI MAZZI STESI SUL TAVOLO SACRO (ISOMETRIC SPREADS)
   ========================================================================== */

.c8-decks-spread-showcase {
  margin: 3rem 0 2rem 0;
  position: relative;
}

.c8-spread-showcase-card {
  background: radial-gradient(circle at 50% 0%, rgba(30, 27, 75, 0.7) 0%, rgba(10, 14, 28, 0.95) 75%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 20px;
  padding: 2.2rem 1.8rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  position: relative;
}

.c8-spread-altar-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.4);
  margin-bottom: 2rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
}

.c8-spread-altar-hero img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.c8-spread-altar-hero:hover img {
  transform: scale(1.03);
}

.c8-spread-altar-caption {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 1.5rem;
  background: linear-gradient(0deg, rgba(6, 8, 16, 0.95) 20%, rgba(6, 8, 16, 0) 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.c8-altar-tag {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.c8-altar-desc {
  font-size: 0.86rem;
  color: rgba(226, 232, 240, 0.85);
  max-width: 600px;
}

/* Griglia dei Ventagli di Carte Esclusive */
.c8-fans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.c8-fan-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 14px;
  padding: 1.35rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.c8-fan-box:hover {
  border-color: rgba(212, 175, 55, 0.6);
  background: rgba(20, 29, 52, 0.75);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.15);
}

.c8-fan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.c8-fan-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fef08a;
}

.c8-fan-badge {
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #fef08a;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}

/* Ventaglio 3D delle Carte */
.c8-fan-cards-row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 190px;
  perspective: 800px;
  padding: 0.5rem 0;
}

.c8-fan-mini-card {
  width: 95px;
  height: 155px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  margin-left: -32px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  background: #0f172a;
}

.c8-fan-mini-card:first-child {
  margin-left: 0;
}

.c8-fan-mini-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c8-fan-mini-card:hover {
  transform: translateY(-20px) scale(1.18) rotateZ(0deg) !important;
  z-index: 15;
  box-shadow: 0 15px 35px rgba(245, 158, 11, 0.5), 0 0 25px rgba(212, 175, 55, 0.6);
  border-color: #fef08a;
}

/* Angoli e rotazioni a ventaglio */
.c8-fan-mini-card:nth-child(1) { transform: rotateZ(-12deg) translateY(6px); }
.c8-fan-mini-card:nth-child(2) { transform: rotateZ(-6deg) translateY(2px); }
.c8-fan-mini-card:nth-child(3) { transform: rotateZ(0deg) translateY(0); }
.c8-fan-mini-card:nth-child(4) { transform: rotateZ(6deg) translateY(2px); }
.c8-fan-mini-card:nth-child(5) { transform: rotateZ(12deg) translateY(6px); }

.c8-fan-footer {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: rgba(203, 213, 225, 0.85);
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 900px) {
  .c8-fans-grid {
    grid-template-columns: 1fr;
  }
  .casa8-sim-stage {
    min-height: 580px;
  }
  .c8-sim-cards-container {
    gap: 1rem;
  }
  .c8-sim-slot {
    width: 125px;
    height: 210px;
  }
  .phase-3 .c8-is-focal {
    transform: scale(1.2) translateY(-10px);
  }
  .c8-sim-hud-overlay {
    width: 95%;
    bottom: 50px;
    padding: 1rem;
  }
  .c8-sim-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  .c8-sim-deck-pills {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .c8-sim-slot {
    width: 95px;
    height: 160px;
  }
  .c8-sim-slot-pos {
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
  }
  .c8-spread-altar-hero img {
    height: 240px;
  }
}

/* ==========================================================================
   ENHANCED CARD GEOMETRY (+50% ENLARGEMENT) & ANTI-OVERLAP ARCHITECTURE
   ========================================================================== */

/* 1. SPREAD ROWS (UNIFIED HORIZONTAL LAYOUT ACROSS ALL 5 SYSTEMS) */
.tarot-cards-row,
.sigilli-cards-row,
#sigilli-cards-row,
#tarot-cards-row,
#sibille-cards-row,
#lenormand-cards-row,
#rune-stones-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  padding: 24px 10px 36px !important;
  min-height: 540px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

/* 2. CARD CONTAINERS (+50% LARGER: 315px x 500px on desktop) */
.tarot-card-v3,
.sibille-card-v3,
.lenormand-card-v3,
.rune-stone-v3,
.sigilli-card-v3 {
  width: 315px !important;
  height: 500px !important;
  border-radius: 18px !important;
  perspective: 1200px !important;
  -webkit-perspective: 1200px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.tarot-card-v3:hover,
.sibille-card-v3:hover,
.lenormand-card-v3:hover,
.rune-stone-v3:hover,
.sigilli-card-v3:hover {
  transform: translateY(-10px) scale(1.025) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.4) !important;
}

/* 3. TOP BADGES (CLEAN SINGLE HORIZONTAL ROW, NEVER OVERLAPPING CONTENT) */
.tarot-pos-badge-top,
.sibille-pos-badge-top,
.lenormand-pos-badge-top,
.rune-pos-badge-top,
.sigilli-pos-badge-top {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 8 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: none !important;
}

.tarot-pos-pill,
.sibille-pos-pill,
.lenormand-pos-pill,
.rune-pos-pill,
.sigilli-pos-pill {
  padding: 4px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #e2e8f0 !important;
  background: rgba(7, 10, 20, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 70% !important;
}

.tarot-card-zoom-btn {
  pointer-events: auto !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(7, 10, 20, 0.85) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  color: #fef08a !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

.tarot-card-zoom-btn:hover {
  transform: scale(1.15) !important;
  border-color: #facc15 !important;
  background: rgba(212, 175, 55, 0.25) !important;
}

/* 4. BOTTOM INFO PANELS (AERODYNAMIC GRADIENT, NO OVERLAP WITH TOP BADGE) */
.tarot-card-info-v3,
.sibille-card-info-glass,
.lenormand-card-info-v3,
.rune-stone-info-v3,
.sigilli-card-info-glass {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 8 !important;
  padding: 14px 14px 16px !important;
  background: linear-gradient(to top, rgba(5, 7, 15, 0.97) 0%, rgba(5, 7, 15, 0.85) 65%, transparent 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 3px !important;
  max-height: 140px !important;
}

.tarot-card-name-v3,
.sibille-card-title-glass,
.sigilli-card-title-glass {
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.tarot-card-archetype-v3,
.sibille-card-sub-glass,
.sigilli-card-sub-glass {
  font-size: 0.78rem !important;
  color: #fef08a !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.tarot-state-upright,
.tarot-state-reversed {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  display: inline-block !important;
  margin: 2px auto !important;
  line-height: 1.2 !important;
}

.tarot-card-kws {
  font-size: 0.74rem !important;
  color: #cbd5e1 !important;
  line-height: 1.35 !important;
  max-width: 95% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 5. RESPONSIVE BREAKPOINTS (PRESERVE +50% PROPORTIONS & PERFECT AIR ROOM) */
@media (max-width: 1400px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 280px !important;
    height: 445px !important;
  }
}

@media (max-width: 1024px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 240px !important;
    height: 380px !important;
  }
  .tarot-card-name-v3,
  .sibille-card-title-glass,
  .sigilli-card-title-glass {
    font-size: 0.92rem !important;
  }
}

@media (max-width: 768px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 195px !important;
    height: 310px !important;
  }
  .tarot-card-info-v3,
  .sibille-card-info-glass,
  .sigilli-card-info-glass {
    padding: 10px 8px 12px !important;
    max-height: 110px !important;
  }
  .tarot-card-name-v3,
  .sibille-card-title-glass,
  .sigilli-card-title-glass {
    font-size: 0.82rem !important;
  }
  .tarot-card-archetype-v3,
  .sibille-card-sub-glass,
  .sigilli-card-sub-glass {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 480px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 155px !important;
    height: 245px !important;
  }
  .tarot-card-name-v3,
  .sibille-card-title-glass,
  .sigilli-card-title-glass {
    font-size: 0.74rem !important;
  }
  .tarot-card-kws {
    display: none !important;
  }
}

/* ==========================================================================
   SURGICAL CARD ACCURACY & MICROMETRIC MARGIN ARCHITECTURE (v20261003_v3)
   ========================================================================== */

/* 1. SPREAD ROWS (PERFECT HORIZONTAL FLEX ALIGNMENT) */
.tarot-cards-row,
.sigilli-cards-row,
#sigilli-cards-row,
#tarot-cards-row,
#sibille-cards-row,
#lenormand-cards-row,
#rune-cards-row,
#rune-stones-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  padding: 24px 10px 36px !important;
  min-height: 520px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

/* 2. CARD CONTAINERS (EXACT 2:3 ASPECT RATIO - 320px x 480px DESKTOP) */
.tarot-card-v3,
.sibille-card-v3,
.lenormand-card-v3,
.rune-stone-v3,
.sigilli-card-v3 {
  width: 320px !important;
  height: 480px !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 16px !important;
  perspective: 1200px !important;
  -webkit-perspective: 1200px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 2px solid rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(212, 175, 55, 0.2) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

/* Per-Deck Distinctive Sacred Glow & Borders */
.sibille-suit-cuori, .sibille-card-v3.sibille-suit-cuori { border-color: rgba(244, 114, 182, 0.6) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(244, 114, 182, 0.25) !important; }
.sibille-suit-quadri, .sibille-card-v3.sibille-suit-quadri { border-color: rgba(251, 191, 36, 0.6) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(251, 191, 36, 0.3) !important; }
.sibille-suit-fiori, .sibille-card-v3.sibille-suit-fiori { border-color: rgba(52, 211, 153, 0.6) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(52, 211, 153, 0.25) !important; }
.sibille-suit-picche, .sibille-card-v3.sibille-suit-picche { border-color: rgba(129, 140, 248, 0.6) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(129, 140, 248, 0.3) !important; }
.lenormand-card-v3 { border-color: rgba(226, 232, 240, 0.55) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(226, 232, 240, 0.2) !important; }
.rune-stone-v3 { border-color: rgba(192, 132, 252, 0.55) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(168, 85, 247, 0.25) !important; }

.tarot-card-v3:hover,
.sibille-card-v3:hover,
.lenormand-card-v3:hover,
.rune-stone-v3:hover,
.sigilli-card-v3:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 35px rgba(212, 175, 55, 0.45) !important;
}

/* 3. CARD INNERS (FLAWLESS 3D ROTATION) */
.tarot-card-inner-v3,
.sibille-card-inner,
.lenormand-card-inner-v3,
.rune-stone-inner-v3,
.sigilli-card-inner {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  border-radius: 16px !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tarot-card-v3.tarot-flipped .tarot-card-inner-v3,
.tarot-card-v3.flipped .tarot-card-inner-v3,
.tarot-card-v3[data-flipped="true"] .tarot-card-inner-v3,
.tarot-card-inner-v3.tarot-is-flipped,
.tarot-card-v3.tarot-reversed.tarot-flipped .tarot-card-inner-v3,
.sibille-card-inner.sibille-is-flipped,
.sibille-card-v3.sibille-flipped .sibille-card-inner,
.sibille-card-v3.flipped .sibille-card-inner,
.sibille-card-v3[data-flipped="true"] .sibille-card-inner,
.lenormand-card-v3.lenormand-flipped .lenormand-card-inner-v3,
.lenormand-card-v3.flipped .lenormand-card-inner-v3,
.lenormand-card-v3[data-flipped="true"] .lenormand-card-inner-v3,
.rune-stone-v3.rune-flipped .rune-stone-inner-v3,
.rune-stone-v3.flipped .rune-stone-inner-v3,
.rune-stone-v3[data-flipped="true"] .rune-stone-inner-v3,
.sigilli-card-v3.sigillo-flipped .sigilli-card-inner,
.sigilli-card-v3.flipped .sigilli-card-inner,
.sigilli-card-v3[data-flipped="true"] .sigilli-card-inner {
  transform: rotateY(180deg) !important;
}

/* 4. CARD BACKS (MICROMETRIC FULL BLEED ALIGNMENT) */
.tarot-card-back-v3,
.sibille-card-back,
.lenormand-card-back-v3,
.rune-stone-back-v3,
.sigilli-card-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: rotateY(0deg) !important;
  background: #080c18 !important;
  display: block !important;
}

/* Eliminate clashing pseudo-element borders that break artwork alignment */
.sibille-card-back::before,
.lenormand-card-back-v3::before,
.rune-stone-back-v3::before,
.sigilli-card-back::before {
  display: none !important;
  content: none !important;
}

/* Card Back Image fills 100% edge-to-edge without any distortion or offset */
.card-back-artwork-img,
.rune-stone-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 5. CARD FRONTS (MICROMETRIC FULL BLEED ALIGNMENT) */
.tarot-card-front-v3,
.sibille-card-front,
.lenormand-card-front-v3,
.rune-stone-front-v3,
.sigilli-card-front {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: rotateY(180deg) !important;
  background: #080c18 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card Front Artworks occupy 100% edge-to-edge */
.tarot-card-art-img,
.sibille-card-art-img,
.lenormand-card-art-img,
.sigilli-card-art-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  z-index: 1 !important;
  transition: transform 0.4s ease !important;
}

/* Rune Front Artwork (Normalized Obsidian Stones) */
.rune-stone-front-v3 {
  background: radial-gradient(circle at 50% 45%, #1f1438 0%, #0d0718 65%, #05020a 100%) !important;
}

.rune-stone-art-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 16px !important;
  display: block !important;
  margin: 0 !important;
  padding: 10px !important;
  border: none !important;
  z-index: 1 !important;
  filter: drop-shadow(0 0 25px rgba(168, 85, 247, 0.55)) !important;
  transition: transform 0.4s ease !important;
}

.tarot-card-v3:hover .tarot-card-art-img,
.sibille-card-v3:hover .sibille-card-art-img,
.lenormand-card-v3:hover .lenormand-card-art-img,
.rune-stone-v3:hover .rune-stone-art-img,
.sigilli-card-v3:hover .sigilli-card-art-img {
  transform: scale(1.035) !important;
}

/* 6. TOP BADGES (CLEAN SINGLE HORIZONTAL ROW, NEVER OVERLAPPING CONTENT) */
.tarot-pos-badge-top,
.sibille-pos-badge-top,
.lenormand-pos-badge-top,
.rune-pos-badge-top,
.sigilli-pos-badge-top {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: none !important;
}

.tarot-pos-pill,
.sibille-pos-pill,
.lenormand-pos-pill,
.rune-pos-pill,
.sigilli-pos-pill {
  padding: 4px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #f8fafc !important;
  background: rgba(7, 10, 20, 0.88) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  border-radius: 99px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  white-space: nowrap !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: auto !important;
}

.tarot-card-zoom-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(7, 10, 20, 0.85) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  color: #fbbf24 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}
.tarot-card-zoom-btn:hover {
  transform: scale(1.12) !important;
  background: rgba(212, 175, 55, 0.25) !important;
}

/* 7. BOTTOM GLASS INFO PANELS */
.tarot-card-info-v3,
.sibille-card-info-glass,
.lenormand-card-info-glass,
.rune-card-info-glass,
.sigilli-card-info-glass {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 12px 10px 10px !important;
  background: linear-gradient(to top, rgba(5, 7, 15, 0.96) 0%, rgba(5, 7, 15, 0.82) 65%, transparent 100%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  z-index: 10 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  max-height: 135px !important;
}

.tarot-card-name-v3,
.sibille-card-title-glass,
.lenormand-card-title-glass,
.rune-stone-name,
.sigilli-card-title-glass {
  font-family: 'Cinzel', serif !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* 8. LIGHTBOX ZOOM MODAL (EXACT 2:3 PROPORTIONS - ZERO BLACK BARS) */
.tarot-modal-card-frame {
  max-width: 360px !important;
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 2px solid rgba(212, 175, 55, 0.7) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 35px rgba(212, 175, 55, 0.3) !important;
  background: #080c18 !important;
}

.tarot-modal-img,
.sibille-modal-img,
.lenormand-modal-img,
.rune-modal-img,
.sigilli-modal-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 16px !important;
  background: #080c18 !important;
}

/* 9. RESPONSIVE BREAKPOINTS (PRESERVE EXACT 2:3 PROPORTIONS) */
@media (max-width: 1400px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 280px !important;
    height: 420px !important;
  }
}

@media (max-width: 1024px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 240px !important;
    height: 360px !important;
  }
  .tarot-card-name-v3,
  .sibille-card-title-glass,
  .sigilli-card-title-glass {
    font-size: 0.92rem !important;
  }
}

@media (max-width: 768px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 190px !important;
    height: 285px !important;
  }
  .tarot-card-info-v3,
  .sibille-card-info-glass,
  .sigilli-card-info-glass {
    padding: 10px 8px 10px !important;
    max-height: 110px !important;
  }
  .tarot-card-name-v3,
  .sibille-card-title-glass,
  .sigilli-card-title-glass {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 480px) {
  .tarot-card-v3,
  .sibille-card-v3,
  .lenormand-card-v3,
  .rune-stone-v3,
  .sigilli-card-v3 {
    width: 150px !important;
    height: 225px !important;
  }
  .tarot-card-name-v3,
  .sibille-card-title-glass,
  .sigilli-card-title-glass {
    font-size: 0.74rem !important;
  }
  .tarot-card-kws {
    display: none !important;
  }
}

/* ==========================================================================
   DYNAMIC CALL-TO-ACTION HIGHLIGHT & PULSE FOR ORACLE INTERPRETATION BUTTONS
   ========================================================================== */
@keyframes cosmic-pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.85), 0 4px 18px rgba(212, 175, 55, 0.4);
    transform: scale(1);
    border-color: rgba(212, 175, 55, 0.8);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(212, 175, 55, 0), 0 8px 32px rgba(212, 175, 55, 0.8);
    transform: scale(1.035);
    border-color: #fef08a;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0), 0 4px 18px rgba(212, 175, 55, 0.4);
    transform: scale(1);
    border-color: rgba(212, 175, 55, 0.8);
  }
}

.btn-action-highlight {
  animation: cosmic-pulse-glow 1.6s infinite ease-in-out !important;
  position: relative !important;
  border-color: #facc15 !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.5) 0%, rgba(147, 51, 234, 0.6) 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}
.btn-action-highlight:hover {
  transform: scale(1.05) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.7) 0%, rgba(168, 85, 247, 0.8) 100%) !important;
  box-shadow: 0 0 35px rgba(212, 175, 55, 0.9) !important;
}

/* --- Responso in streaming: il testo appare mentre Sandra scrive --- */
.sandra-stream-live { display: none; }
.loading-cosmic.is-streaming { align-items: stretch; }
.loading-cosmic.is-streaming .loading-mandala { width: 40px; height: 40px; margin: 0 auto 6px; }
.loading-cosmic.is-streaming .sandra-stream-live {
  display: block;
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 12px;
  padding: 16px 18px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(235, 232, 245, 0.95);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
}
.sandra-stream-cursor {
  display: inline-block;
  margin-left: 4px;
  color: #d4af37;
  animation: sandraCursor 1s ease-in-out infinite;
}
@keyframes sandraCursor { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

/* I pulsanti delle azioni (Evoca, Salva, Condividi, PDF, Nuova stesa) restano nascosti
   finché non c è un responso: la regola .btn-cosmic { display: inline-flex !important }
   vinceva sul display:none scritto nella pagina e li mostrava sempre. */
.btn-cosmic[style*="display:none"],
.btn-cosmic[style*="display: none"],
.btn-cosmic-full[style*="display:none"],
.btn-cosmic-full[style*="display: none"] { display: none !important; }

/* ===== Carta del Giorno · Altare (in cima alla home) ===== */
.cdg-altare { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid rgba(212,175,55,.28); min-height: 540px;
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; margin-bottom: 2rem;
  background: linear-gradient(90deg, rgba(7,6,15,.25), rgba(7,6,15,.92) 55%), url("/assets/img/branding/oracle_spread_cinematic.jpg") center/cover; }
.cdg-lato-carta { padding: 50px 20px; }
.cdg-lato-testo { padding: 50px clamp(20px, 4vw, 54px) 50px 10px; }
.cdg-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px; border-radius: 999px; background: rgba(212,175,55,.1);
  border: 1px solid rgba(212,175,55,.45); color: #d4af37; font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.cdg-titolo { font-family: 'Cinzel', serif; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 18px 0 6px;
  font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; background: linear-gradient(135deg, #fff 20%, #d4af37 60%, #f59e0b 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 22px rgba(212,175,55,.25)); }
.cdg-data { font-family: 'Cinzel', serif; color: #e9dcae; font-size: clamp(1rem, 2.2vw, 1.25rem); letter-spacing: .06em; }
.cdg-invito { font-family: 'Cinzel', serif; color: #f0cc50; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; margin-top: 14px; }
.cdg-carta { width: 220px; height: 330px; perspective: 1200px; cursor: pointer; position: relative; margin: 0 auto; }
.cdg-carta::before { content: ""; position: absolute; inset: -40px; border-radius: 50%; z-index: 0; filter: blur(10px);
  background: radial-gradient(circle, rgba(240,204,80,.38), rgba(139,92,246,.18) 45%, transparent 70%); animation: cdgRespiro 3.6s ease-in-out infinite; }
@keyframes cdgRespiro { 0%,100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.05); } }
.cdg-dentro { position: relative; z-index: 1; width: 100%; height: 100%; transition: transform 1.3s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.cdg-carta.cdg-girata .cdg-dentro { transform: rotateY(180deg); }
.cdg-carta:not(.cdg-girata) .cdg-dentro { animation: cdgFluttua 4.5s ease-in-out infinite; }
@keyframes cdgFluttua { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.cdg-dentro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; backface-visibility: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(212,175,55,.5); }
.cdg-dentro img.cdg-fronte { transform: rotateY(180deg); }
.cdg-responso { margin-top: 22px; opacity: 0; transform: translateY(14px); transition: opacity 1s .4s, transform 1s .4s; }
.cdg-altare.cdg-rivelata .cdg-responso { opacity: 1; transform: none; }
.cdg-altare:not(.cdg-rivelata) .cdg-responso { pointer-events: none; }
.cdg-nome { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 4vw, 2.4rem); color: #fff; letter-spacing: .08em; margin: 0; }
.cdg-testo { color: #d6d3e6; font-size: 1.02rem; line-height: 1.65; }
.cdg-consiglio { font-family: 'Cinzel', serif; color: #f0cc50; font-size: 1.15rem; margin: 12px 0 0; }
.cdg-azioni { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.cdg-bottone { font-weight: 700; font-size: .98rem; color: #1a1205; background: linear-gradient(135deg, #f0cc50, #c99a2e); border: 0;
  border-radius: 14px; padding: 14px 24px; cursor: pointer; box-shadow: 0 0 24px rgba(240,204,80,.25); }
.cdg-bottone.cdg-secondario { background: transparent; color: #f0cc50; border: 1px solid rgba(212,175,55,.55); box-shadow: none; }
/* Animazioni dell'Altare: ruota zodiacale, stelle e nebulosa (ferme con "riduci movimento") */
.cdg-altare::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fffc, transparent), radial-gradient(1.2px 1.2px at 32% 64%, #fff9, transparent),
    radial-gradient(1.8px 1.8px at 58% 12%, #f0cc50dd, transparent), radial-gradient(1.1px 1.1px at 72% 44%, #fffa, transparent),
    radial-gradient(1.5px 1.5px at 88% 78%, #fffb, transparent), radial-gradient(1.3px 1.3px at 46% 86%, #f0cc50bb, transparent),
    radial-gradient(1px 1px at 6% 52%, #fff9, transparent), radial-gradient(1.4px 1.4px at 94% 26%, #fffb, transparent),
    radial-gradient(1.2px 1.2px at 22% 92%, #fff8, transparent), radial-gradient(1.6px 1.6px at 66% 70%, #f0cc50aa, transparent);
  animation: cdgStelle 5s ease-in-out infinite alternate; }
@keyframes cdgStelle { from { opacity: .35; } to { opacity: 1; } }
.cdg-altare::after { content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 30% 40%, rgba(139,92,246,.28), transparent 40%), radial-gradient(circle at 70% 65%, rgba(212,175,55,.16), transparent 42%),
              radial-gradient(circle at 45% 80%, rgba(56,189,248,.12), transparent 35%);
  animation: cdgNebulosa 26s ease-in-out infinite alternate; }
@keyframes cdgNebulosa { from { transform: translate(-4%, -3%) rotate(0deg); } to { transform: translate(4%, 3%) rotate(8deg); } }
.cdg-lato-carta, .cdg-lato-testo { position: relative; z-index: 1; }
.cdg-lato-carta::before { content: ""; position: absolute; left: 50%; top: 50%; width: 440px; height: 440px; margin: -220px 0 0 -220px;
  pointer-events: none; z-index: 0; opacity: .75; filter: drop-shadow(0 0 8px rgba(240,204,80,.35));
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><circle cx='200' cy='200' r='190' fill='none' stroke='%23d4af37' stroke-opacity='.55' stroke-width='1.2'/><circle cx='200' cy='200' r='150' fill='none' stroke='%23d4af37' stroke-opacity='.35' stroke-width='.8' stroke-dasharray='3 6'/><circle cx='200' cy='200' r='120' fill='none' stroke='%23a78bfa' stroke-opacity='.3' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='244.0' y='35.8' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♈︎</text><line x1='200.0' y1='50.0' x2='200.0' y2='10.0' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='320.2' y='79.8' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♉︎</text><line x1='275.0' y1='70.1' x2='295.0' y2='35.5' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='364.2' y='156.0' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♊︎</text><line x1='329.9' y1='125.0' x2='364.5' y2='105.0' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='364.2' y='244.0' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♋︎</text><line x1='350.0' y1='200.0' x2='390.0' y2='200.0' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='320.2' y='320.2' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♌︎</text><line x1='329.9' y1='275.0' x2='364.5' y2='295.0' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='244.0' y='364.2' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♍︎</text><line x1='275.0' y1='329.9' x2='295.0' y2='364.5' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='156.0' y='364.2' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♎︎</text><line x1='200.0' y1='350.0' x2='200.0' y2='390.0' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='79.8' y='320.2' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♏︎</text><line x1='125.0' y1='329.9' x2='105.0' y2='364.5' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='35.8' y='244.0' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♐︎</text><line x1='70.1' y1='275.0' x2='35.5' y2='295.0' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='35.8' y='156.0' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♑︎</text><line x1='50.0' y1='200.0' x2='10.0' y2='200.0' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='79.8' y='79.8' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♒︎</text><line x1='70.1' y1='125.0' x2='35.5' y2='105.0' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/><text font-family='DejaVu Sans, Segoe UI Symbol, Noto Sans Symbols, serif' x='156.0' y='35.8' font-size='22' fill='%23f0cc50' fill-opacity='.8' text-anchor='middle' dominant-baseline='central'>♓︎</text><line x1='125.0' y1='70.1' x2='105.0' y2='35.5' stroke='%23d4af37' stroke-opacity='.45' stroke-width='.8'/></svg>") center/contain no-repeat; animation: cdgRuota 90s linear infinite; }
@keyframes cdgRuota { to { transform: rotate(360deg); } }
.cdg-carta { z-index: 1; }
@media (max-width: 820px) { .cdg-lato-carta::before { width: 340px; height: 340px; margin: -170px 0 0 -170px; } }
@media (prefers-reduced-motion: reduce) {
  .cdg-altare::before, .cdg-altare::after, .cdg-lato-carta::before, .cdg-carta::before, .cdg-carta:not(.cdg-girata) .cdg-dentro { animation: none; }
}
@media (max-width: 820px) {
  .cdg-altare { grid-template-columns: 1fr; text-align: center;
    background: linear-gradient(180deg, rgba(7,6,15,.35), rgba(7,6,15,.95) 50%), url("/assets/img/branding/oracle_spread_cinematic.jpg") top/cover; }
  .cdg-lato-testo { padding: 0 20px 44px; }
  .cdg-azioni { justify-content: center; }
}