/* =====================================================
   WOLIN v5 — AI Chat + Location-Based Fortune Teller
   Oracle character images, location themes, passport system,
   WOLIN cabinet frame, GSAP transitions, typewriter,
   AI chat interface
   ===================================================== */

@import url('./base.css');

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Cinzel reserved for the SAPPHIRE wordmark only — it's the logo, not a system font. */
  --font-logo: 'Cinzel Decorative', 'Cinzel', 'Georgia', serif;
  --font-display: 'Fraunces', 'Cormorant Garamond', 'Georgia', serif;
  --font-heading: 'Fraunces', 'Cinzel', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  /* Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Dark Mystical Palette */
  --color-bg:             #06060c;
  --color-surface:        #0c0c16;
  --color-surface-2:      #12122a;
  --color-surface-offset: #0a0a18;
  --color-border:         rgba(212, 175, 55, 0.12);
  --color-border-strong:  rgba(212, 175, 55, 0.28);
  --color-border-glow:    rgba(212, 175, 55, 0.5);
  --color-divider:        rgba(255, 255, 255, 0.05);

  /* Text */
  --color-text:           #e8e4d9;
  --color-text-muted:     #9a9488;
  --color-text-faint:     #5a564d;

  /* Gold Accent */
  --color-gold:           #d4af37;
  --color-gold-light:     #f0d060;
  --color-gold-pale:      #e8cc6e;
  --color-gold-dim:       #9a7b1a;
  --color-gold-glow:      rgba(212, 175, 55, 0.5);

  /* Purple Mystical */
  --color-purple:         #6b3fa0;
  --color-purple-deep:    #2a1050;
  --color-purple-dim:     #3d2266;
  --color-purple-glow:    rgba(107, 63, 160, 0.35);

  /* Crystal */
  --color-crystal:        #7ec8e3;
  --color-crystal-glow:   rgba(126, 200, 227, 0.3);

  /* Spicy mode */
  --color-spicy:          #e63946;
  --color-spicy-glow:     rgba(230, 57, 70, 0.35);

  /* Location accent (overridden by JS for themed locations) */
  --color-accent:         var(--color-gold);
  --color-accent-glow:    var(--color-gold-glow);

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* ── Global ── */
body {
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  position: relative;
}

/* ── Particle Canvas (full-screen background) ── */
#particleCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── App Container ── */
.app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-4) var(--space-6);
  max-width: 440px;
  margin: 0 auto;
}

/* ── Screens ── */
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
}

.screen.active {
  display: flex;
  opacity: 1;
}

/* ═════════════════════════════════════════
   ORACLE CHARACTER — WOLIN Cabinet Frame
   ═════════════════════════════════════════ */
.oracle-cabinet {
  position: relative;
  width: 240px;
  margin: var(--space-3) auto var(--space-2);
}

.cabinet-frame {
  position: relative;
  width: 100%;
  padding: 8px;
  background: linear-gradient(180deg, #c9a227 0%, #8a6914 20%, #d4af37 50%, #8a6914 80%, #c9a227 100%);
  border-radius: 16px;
  box-shadow:
    0 0 40px rgba(212, 175, 55, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Decorative corners */
.cabinet-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 2;
}

.cabinet-corner::before {
  content: '✦';
  font-size: 14px;
  color: #f0d060;
  text-shadow: 0 0 8px rgba(240, 208, 96, 0.6);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cabinet-corner-tl { top: -4px; left: -4px; }
.cabinet-corner-tr { top: -4px; right: -4px; }
.cabinet-corner-bl { bottom: -4px; left: -4px; }
.cabinet-corner-br { bottom: -4px; right: -4px; }

.oracle-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a14;
}

.oracle-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.6s ease;
}

.oracle-image-next {
  opacity: 0;
  z-index: 1;
}

/* Inner glow overlay on image */
.oracle-image-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
              linear-gradient(to bottom, transparent 60%, rgba(6, 6, 12, 0.7) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Animated glow pulse around cabinet */
.cabinet-frame::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  background: transparent;
  box-shadow:
    0 0 30px rgba(212, 175, 55, 0.12),
    0 0 60px rgba(107, 63, 160, 0.06);
  animation: cabinetGlow 4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes cabinetGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Cabinet base */
.cabinet-base {
  width: 70%;
  margin: 0 auto;
  height: 12px;
  position: relative;
}

.cabinet-base-gold {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #8a6914, #3d2d10);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ── Mini cabinet (question + result + chat screens) ── */
.oracle-cabinet-mini {
  width: 140px;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.cabinet-frame-mini {
  padding: 5px;
  border-radius: 12px;
}

.oracle-cabinet-mini .cabinet-corner { display: none; }
.oracle-cabinet-mini .cabinet-base { display: none; }

.cabinet-frame-mini::after {
  inset: -4px;
  border-radius: 14px;
}

/* ── Location Badge ── */
.location-badge {
  display: none; /* shown only when location is set */
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: rgba(12, 12, 22, 0.7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  margin-bottom: var(--space-2);
}

.location-badge.visible {
  display: flex;
}

.location-badge-icon {
  font-size: 0.85rem;
}

/* ── Ornate Decorative Borders ── */
.ornate-line {
  width: 100%;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-3) 0;
  opacity: 0.6;
}

.ornate-line::before,
.ornate-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.ornate-line svg {
  margin: 0 var(--space-3);
  width: 24px;
  height: 24px;
  fill: var(--color-gold);
  opacity: 0.7;
}

/* ── Logo ── */
.logo-section {
  text-align: center;
  margin-bottom: var(--space-1);
}

.logo-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.06em;
  text-shadow:
    0 0 20px rgba(212, 175, 55, 0.3),
    0 2px 4px rgba(0,0,0,0.5);
  margin-bottom: var(--space-1);
  line-height: 1.2;
}

.logo-subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ── Mystical Tagline (the oracle "speaks") ── */
.oracle-speaks {
  text-align: center;
  min-height: 3.2em;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-3);
}

.oracle-speaks-text {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-gold-pale);
  font-style: italic;
  line-height: 1.6;
  opacity: 0.85;
}

.oracle-speaks-text .cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--color-gold);
  margin-left: 2px;
  animation: blink 0.8s step-end infinite;
  vertical-align: text-bottom;
}

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

/* ── Adult Mode Toggle ── */
.mode-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  background: rgba(12, 12, 22, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: all 0.4s var(--ease-out);
  backdrop-filter: blur(8px);
}

.mode-toggle-wrap.adult-active {
  border-color: rgba(230, 57, 70, 0.3);
  background: rgba(230, 57, 70, 0.06);
}

.toggle-track {
  width: 40px;
  height: 22px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.toggle-track.on {
  background: var(--color-spicy);
  border-color: rgba(230, 57, 70, 0.5);
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s var(--ease-out);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.toggle-track.on .toggle-thumb {
  transform: translateX(18px);
}

.mode-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mode-label-spicy {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.05em;
  transition: all 0.3s;
}
.adult-active .mode-label-spicy {
  color: var(--color-spicy);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(230, 57, 70, 0.4);
}

/* Social proof bar */
.social-proof-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.social-proof-item:empty { display: none; }
.social-proof-item:empty + .social-proof-dot { display: none; }
.social-proof-dot { opacity: 0.5; }

/* ═════════════════════════════════════════
   READING OPTION CARDS
   ═════════════════════════════════════════ */
.reading-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: var(--space-4);
}

.reading-card {
  position: relative;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, rgba(12,12,22,0.9) 0%, rgba(18,18,42,0.7) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.4s var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

/* Gold shimmer sweep on hover */
.reading-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.06), transparent);
  transition: left 0.6s var(--ease-out);
  pointer-events: none;
}

.reading-card:hover::after {
  left: 120%;
}

.reading-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    0 0 30px rgba(212, 175, 55, 0.06),
    inset 0 1px 0 rgba(212, 175, 55, 0.08);
}

.reading-card:active {
  transform: translateY(-1px);
}

.reading-card-icon {
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, rgba(107, 63, 160, 0.06) 100%);
  border: 1px solid rgba(212, 175, 55, 0.15);
  position: relative;
  z-index: 1;
}

.reading-card-content {
  position: relative;
  z-index: 1;
  flex: 1;
}

.reading-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

.reading-card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.reading-card-price {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-gold-light);
  white-space: nowrap;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.reading-card.premium .reading-card-title {
  color: var(--color-spicy);
}

.reading-card.premium .reading-card-price {
  color: #ff6b7a;
}

.reading-card.premium .reading-card-icon {
  background: radial-gradient(circle, rgba(230, 57, 70, 0.1) 0%, rgba(107, 63, 160, 0.06) 100%);
  border-color: rgba(230, 57, 70, 0.2);
}

/* ═════════════════════════════════════════
   FEATURED CHAT CARD — Gold Shimmer
   ═════════════════════════════════════════ */
.reading-card-featured {
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(135deg, rgba(18, 14, 6, 0.95) 0%, rgba(30, 22, 8, 0.85) 50%, rgba(18, 14, 6, 0.95) 100%);
  border: 2px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-2xl);
  position: relative;
}

.reading-card-featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dim), var(--color-gold-light), var(--color-gold-dim), var(--color-gold));
  background-size: 300% 300%;
  animation: shimmerBorder 4s ease-in-out infinite;
  z-index: -1;
  opacity: 0.6;
}

@keyframes shimmerBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.reading-card-featured:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    0 0 40px rgba(212, 175, 55, 0.12),
    inset 0 1px 0 rgba(212, 175, 55, 0.15);
}

/* Animated shimmer inside featured card */
.reading-card-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.08), rgba(240,208,96,0.04), transparent);
  animation: cardShimmerSweep 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes cardShimmerSweep {
  0%, 60%, 100% { left: -100%; }
  30% { left: 150%; }
}

.reading-card-icon-featured {
  width: 58px;
  height: 58px;
  min-width: 58px;
  font-size: 1.8rem;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, rgba(107, 63, 160, 0.08) 100%);
  border: 2px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
}

.reading-card-title-featured {
  font-size: var(--text-lg) !important;
  letter-spacing: 0.03em !important;
}

/* ═════════════════════════════════════════
   ORACLE PASSPORT — Venue Badge Grid
   ═════════════════════════════════════════ */
.passport-section {
  width: 100%;
  margin-bottom: var(--space-6);
}

.passport-header {
  text-align: center;
  margin-bottom: var(--space-5);
}

.passport-header-icon {
  font-size: 1.6rem;
  display: block;
  margin-bottom: var(--space-2);
}

.passport-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.passport-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.passport-explainer {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  max-width: 30ch;
  margin: 0 auto var(--space-4);
  line-height: 1.5;
}

.passport-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.passport-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background: rgba(12, 12, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.passport-badge.locked {
  opacity: 0.35;
  filter: grayscale(1);
  cursor: pointer;
}
.passport-badge.locked:hover {
  transform: scale(1.05);
  transition: transform 0.2s;
}

.passport-badge.visited {
  border-color: var(--color-border-strong);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.06), rgba(12, 12, 22, 0.8));
  opacity: 1;
  filter: none;
}

.passport-badge.visited::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.passport-badge.current {
  border-color: var(--color-accent);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.12);
  animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.08); }
  50% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.18); }
}

.passport-badge-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.passport-badge-name {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  line-height: 1.3;
  font-weight: 600;
}

.passport-badge.visited .passport-badge-name {
  color: var(--color-gold-pale);
}

.passport-badge-check {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.passport-badge.visited .passport-badge-check {
  opacity: 1;
}

/* Passport upsell */
.passport-upsell {
  text-align: center;
  padding: var(--space-4);
  background: linear-gradient(145deg, rgba(42, 16, 80, 0.15), rgba(12, 12, 22, 0.6));
  border: 1px solid rgba(107, 63, 160, 0.12);
  border-radius: var(--radius-xl);
}

.passport-upsell-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.passport-upsell-price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-crystal);
  margin-bottom: var(--space-3);
  text-shadow: 0 0 15px rgba(126, 200, 227, 0.2);
}

.btn-sm {
  padding: var(--space-2) var(--space-5);
  width: auto;
  display: inline-flex;
}

/* ── Subscription Upsell ── */
.sub-upsell {
  width: 100%;
  padding: var(--space-5);
  background: linear-gradient(145deg, rgba(42,16,80,0.2), rgba(12,12,22,0.8));
  border: 1px solid rgba(107, 63, 160, 0.15);
  border-radius: var(--radius-xl);
  text-align: center;
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
}

.sub-upsell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-purple), var(--color-gold-dim), var(--color-purple), transparent);
}

.sub-upsell-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.sub-upsell-price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-crystal);
  margin-bottom: var(--space-1);
  text-shadow: 0 0 20px rgba(126,200,227,0.2);
}

.sub-upsell-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ── How It Works ── */
.how-it-works {
  width: 100%;
  padding: var(--space-5) var(--space-4);
  margin-bottom: var(--space-6);
  text-align: center;
}
.how-it-works-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-gold-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}
.how-it-works-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}
.how-it-works-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.how-it-works-step strong {
  color: var(--color-spicy);
}
.how-it-works-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--color-gold-dim);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Buttons ── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s var(--ease-out);
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(135deg, #8a6914, var(--color-gold), #c9a227);
  color: #0a0a0f;
  border-color: var(--color-gold);
  box-shadow:
    0 0 20px rgba(212, 175, 55, 0.15),
    0 4px 16px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Animated shine sweep on primary button */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
  0%, 70%, 100% { left: -100%; }
  40% { left: 150%; }
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 40px rgba(212, 175, 55, 0.25),
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: rgba(12,12,22,0.8);
  color: var(--color-text);
  border-color: var(--color-border);
  backdrop-filter: blur(6px);
}

.btn-secondary:hover {
  border-color: var(--color-border-strong);
  background: rgba(212, 175, 55, 0.06);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-gold-dim);
  border-color: transparent;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
}

.btn-ghost:hover {
  color: var(--color-gold);
  background: rgba(212, 175, 55, 0.06);
}

/* ── Question Input ── */
.question-section {
  width: 100%;
  margin-bottom: var(--space-5);
}

.question-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
  text-align: center;
}

.question-input {
  width: 100%;
  padding: var(--space-4);
  background: rgba(12,12,22,0.8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--text-base);
  text-align: center;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  outline: none;
  backdrop-filter: blur(6px);
}

.question-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.1), 0 0 0 1px rgba(212,175,55,0.15);
}

.question-input::placeholder {
  color: var(--color-text-faint);
  font-style: italic;
}

/* Names input for love */
.names-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  margin-bottom: var(--space-5);
}

.heart-divider {
  font-size: 1.4rem;
  color: var(--color-spicy);
  animation: heartBeat 1.5s ease-in-out infinite;
  text-shadow: 0 0 15px rgba(230,57,70,0.3);
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ── Fortune Reveal ── */
.fortune-reveal {
  width: 100%;
  text-align: center;
  padding: var(--space-4) 0;
  position: relative;
  overflow: hidden;
}

/* ── Reveal Orb (golden burst before fortune text) ── */
.reveal-orb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.8), rgba(107,63,160,0.4), transparent);
  box-shadow:
    0 0 40px rgba(212,175,55,0.6),
    0 0 80px rgba(212,175,55,0.3),
    0 0 120px rgba(107,63,160,0.15);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 10;
}

/* ── Reveal Particles ── */
.reveal-particle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 6px rgba(212,175,55,0.6);
  pointer-events: none;
  z-index: 10;
}

/* ── Sound Toggle ── */
.sound-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(12,12,22,0.8);
  border: 1px solid rgba(212,175,55,0.2);
  color: var(--color-text-muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
  padding: 0;
  line-height: 1;
}

.sound-toggle:hover {
  border-color: rgba(212,175,55,0.4);
  background: rgba(12,12,22,0.95);
}

.fortune-answer {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-gold);
  text-shadow:
    0 0 30px rgba(212, 175, 55, 0.4),
    0 0 60px rgba(212, 175, 55, 0.15);
  margin-bottom: var(--space-3);
}

.fortune-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-text);
  line-height: 1.55;
  max-width: 32ch;
  margin: 0 auto var(--space-5);
  font-style: italic;
  letter-spacing: 0.005em;
  opacity: 0.95;
}

/* Typewriter text inside fortune */
.typewriter-text {
  display: inline;
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--color-gold);
  margin-left: 1px;
  animation: blink 0.7s step-end infinite;
  vertical-align: text-bottom;
}

/* Lucky numbers */
.fortune-lucky-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.lucky-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-right: var(--space-1);
}

.lucky-number {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(12,12,22,0.8) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-gold-light);
  text-shadow: 0 0 8px rgba(212,175,55,0.3);
}

/* Love compat */
.compat-section {
  width: 100%;
  margin-bottom: var(--space-5);
}

.compat-score {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-spicy), #ff6b7a, var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 0 20px rgba(230,57,70,0.2));
  animation: scoreGlow 2s ease-in-out infinite;
}

@keyframes scoreGlow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }
  50% { filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.6)) drop-shadow(0 0 80px rgba(230, 57, 70, 0.2)); }
}

.compat-bar-track {
  width: 80%;
  margin: 0 auto var(--space-4);
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.compat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-spicy), #ff6b7a, var(--color-gold));
  border-radius: var(--radius-full);
  transition: width 2s var(--ease-out);
  width: 0;
  box-shadow: 0 0 12px rgba(230,57,70,0.3);
}

/* ── Share Card ── */
.share-card {
  width: 100%;
  margin-bottom: var(--space-4);
}

.share-card-capture {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto var(--space-4);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(145deg, #0c0c1a 0%, #12102a 40%, #1a0e2a 70%, #0c0c1a 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.share-card-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(107, 63, 160, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.share-card-inner {
  position: relative;
  text-align: center;
}

.share-card-oracle-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.5));
}

.share-card-brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-gold);
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.share-card-number {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-5);
}

.share-card-fortune {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: var(--space-5);
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

.share-card-location {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.share-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.share-actions .btn { flex: 1; }

/* ── Price Display ── */
.price-display {
  text-align: center;
  margin-bottom: var(--space-5);
}

.price-amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-gold);
  text-shadow: 0 0 20px rgba(212,175,55,0.25);
}

.price-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  letter-spacing: 0.04em;
}

/* ── Loading / Channeling ── */
.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

.loading-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 20%, rgba(6,6,12,0.7) 60%, rgba(6,6,12,0.95) 100%);
  pointer-events: none;
  z-index: 0;
}

.loading-orb-container {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: var(--space-8);
  z-index: 1;
}

.loading-orb-outer {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid rgba(107, 63, 160, 0.3);
  animation: orbOuterSpin 8s linear infinite;
}

.loading-orb-middle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.15) 0%, transparent 70%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  animation: orbPulse 2.5s ease-in-out infinite;
}

.loading-orb-core {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.6) 0%, rgba(107, 63, 160, 0.8) 50%, rgba(6,6,12,0.9) 100%);
  box-shadow: 
    0 0 40px rgba(212, 175, 55, 0.4),
    0 0 80px rgba(107, 63, 160, 0.3),
    0 0 120px rgba(107, 63, 160, 0.1);
  animation: orbCorePulse 1.5s ease-in-out infinite;
}

.loading-orb-flare {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px 4px rgba(255,255,255,0.6);
  transform: translate(-50%, -50%);
  animation: orbFlare 3s ease-in-out infinite;
}

@keyframes orbOuterSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes orbCorePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 60px rgba(212,175,55,0.6), 0 0 120px rgba(107,63,160,0.4); }
}

@keyframes orbFlare {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(2); }
}

.loading-text {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 1;
  animation: loadingTextPulse 2.5s ease-in-out infinite;
}

@keyframes loadingTextPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.loading-funfact {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-gold-dim);
  text-align: center;
  max-width: 30ch;
  margin: var(--space-6) auto 0;
  line-height: 1.5;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.loading-funfact.visible {
  opacity: 1;
}

/* ── Back button ── */
.back-btn {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(12,12,22,0.7);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
  z-index: 10;
  backdrop-filter: blur(8px);
}

.back-btn:hover {
  border-color: var(--color-border-strong);
  color: var(--color-gold);
  box-shadow: 0 0 15px rgba(212,175,55,0.1);
}

/* ── Age Gate ── */
.age-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 12, 0.95);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-6);
}

.age-gate-overlay.hidden { display: none; }

.age-gate-box {
  max-width: 340px;
  text-align: center;
}

.age-gate-icon { font-size: 2.5rem; margin-bottom: var(--space-4); }

.age-gate-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-spicy);
  margin-bottom: var(--space-3);
}

.age-gate-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.age-gate-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Footer ── */
.site-footer {
  margin-top: auto;
  padding-top: var(--space-6);
  text-align: center;
  width: 100%;
}

.site-footer a {
  color: var(--color-text-faint);
  text-decoration: none;
  font-size: var(--text-xs);
  transition: color 0.2s var(--ease-out);
  letter-spacing: 0.04em;
}

.site-footer a:hover { color: var(--color-text-muted); }

/* ═════════════════════════════════════════
   CHAT SCREEN — Screen 5
   ═════════════════════════════════════════ */

/* Chat screen uses compact mini cabinet */
#screenChat .oracle-cabinet-mini {
  margin-top: var(--space-10);
  margin-bottom: var(--space-2);
  width: 100px;
}

.chat-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  text-align: center;
}

/* Chat messages container */
.chat-messages {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 200px;
  max-height: 50vh;
  background: radial-gradient(ellipse at 50% 50%, rgba(12, 12, 26, 0.3) 0%, rgba(6, 6, 12, 0.1) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-2);
  margin-bottom: var(--space-3);
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.2) transparent;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.2);
  border-radius: 4px;
}

/* Message bubbles */
.chat-bubble {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
  position: relative;
  animation: bubbleIn 0.3s var(--ease-out);
}

@keyframes bubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Oracle messages — left aligned */
.chat-bubble-oracle {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(12, 12, 26, 0.95), rgba(18, 18, 42, 0.85));
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  color: var(--color-text);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
}

.chat-bubble-oracle-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-gold);
  letter-spacing: 0.06em;
  font-weight: 600;
}

.chat-bubble-oracle-name::before {
  content: '🔮';
  font-size: 0.75rem;
}

.chat-bubble-oracle-text {
  font-family: var(--font-body);
}

/* User messages — right aligned */
.chat-bubble-user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
}

/* Typing indicator */
.chat-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, rgba(12, 12, 26, 0.95), rgba(18, 18, 42, 0.85));
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
  animation: bubbleIn 0.3s var(--ease-out);
}

.chat-typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  animation: typingPulse 1.4s ease-in-out infinite;
}

.chat-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingPulse {
  0%, 60%, 100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Chat input bar */
.chat-input-bar {
  width: 100%;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgba(12, 12, 22, 0.8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  margin-bottom: var(--space-2);
}

.chat-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.chat-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.08);
}

.chat-input::placeholder {
  color: var(--color-text-faint);
  font-style: italic;
}

.chat-send-btn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-gold-dim), var(--color-gold));
  border: none;
  border-radius: var(--radius-lg);
  color: #0a0a0f;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}

.chat-send-btn svg {
  width: 20px;
  height: 20px;
}

.chat-send-btn:hover {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
}

.chat-send-btn:active {
  transform: translateY(0);
}

.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Chat footer needs to be at the bottom */
.site-footer-chat {
  padding-top: var(--space-2);
}

/* ═════════════════════════════════════════
   SPICY MODE — Red accent overrides
   ═════════════════════════════════════════ */
body.spicy-mode .cabinet-frame {
  background: linear-gradient(180deg, #c92727 0%, #8a1414 20%, #e63946 50%, #8a1414 80%, #c92727 100%);
  box-shadow:
    0 0 40px rgba(230, 57, 70, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.spicy-mode .cabinet-frame::after {
  box-shadow:
    0 0 30px rgba(230, 57, 70, 0.15),
    0 0 60px rgba(230, 57, 70, 0.06);
}

body.spicy-mode .cabinet-corner::before {
  color: #ff6b7a;
  text-shadow: 0 0 8px rgba(255, 107, 122, 0.6);
}

body.spicy-mode .cabinet-base-gold {
  background: linear-gradient(180deg, #8a1414, #3d1010);
}

body.spicy-mode .oracle-image-glow {
  background: radial-gradient(ellipse at 50% 30%, rgba(230, 57, 70, 0.1) 0%, transparent 60%),
              linear-gradient(to bottom, transparent 60%, rgba(6, 6, 12, 0.7) 100%);
}

body.spicy-mode .ornate-line::before,
body.spicy-mode .ornate-line::after {
  background: linear-gradient(90deg, transparent, var(--color-spicy), transparent);
}

body.spicy-mode .ornate-line svg {
  fill: var(--color-spicy);
}

body.spicy-mode .logo-title {
  color: var(--color-spicy);
  text-shadow:
    0 0 20px rgba(230, 57, 70, 0.3),
    0 2px 4px rgba(0,0,0,0.5);
}

body.spicy-mode .oracle-speaks-text {
  color: #ff8a93;
}

body.spicy-mode .oracle-speaks-text .cursor {
  background: var(--color-spicy);
}

/* Spicy mode chat overrides */
body.spicy-mode .chat-bubble-oracle {
  border-left-color: var(--color-spicy);
}

body.spicy-mode .chat-bubble-oracle-name {
  color: #ff6b7a;
}

body.spicy-mode .chat-typing {
  border-left-color: var(--color-spicy);
}

body.spicy-mode .chat-typing-dot {
  background: var(--color-spicy);
}

body.spicy-mode .chat-send-btn {
  background: linear-gradient(135deg, #8a1414, var(--color-spicy));
}

body.spicy-mode .chat-send-btn:hover {
  background: linear-gradient(135deg, var(--color-spicy), #ff6b7a);
  box-shadow: 0 4px 16px rgba(230, 57, 70, 0.2);
}

body.spicy-mode .chat-input:focus {
  border-color: var(--color-spicy);
  box-shadow: 0 0 15px rgba(230, 57, 70, 0.08);
}

body.spicy-mode .reading-card-featured {
  border-color: rgba(230, 57, 70, 0.35);
}

body.spicy-mode .reading-card-featured::before {
  background: linear-gradient(135deg, var(--color-spicy), #8a1414, #ff6b7a, #8a1414, var(--color-spicy));
  background-size: 300% 300%;
  animation: shimmerBorder 4s ease-in-out infinite;
}

body.spicy-mode .reading-card-featured:hover {
  border-color: var(--color-spicy);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    0 0 40px rgba(230, 57, 70, 0.12);
}

body.spicy-mode .chat-title {
  color: #ff6b7a;
}

/* ── Utilities ── */
.text-center { text-align: center; }
.w-full { width: 100%; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* ═════════════════════════════════════════
   LOCATION THEMES — Dodgers
   ═════════════════════════════════════════ */
body.loc-dodgers {
  --color-accent: #005A9C;
  --color-accent-glow: rgba(0, 90, 156, 0.35);
}

body.loc-dodgers .cabinet-frame {
  background: linear-gradient(180deg, #005A9C 0%, #003d6b 20%, #0070c0 50%, #003d6b 80%, #005A9C 100%);
  box-shadow:
    0 0 40px rgba(0, 90, 156, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body.loc-dodgers .cabinet-frame::after {
  box-shadow:
    0 0 30px rgba(0, 90, 156, 0.15),
    0 0 60px rgba(0, 90, 156, 0.06);
}

body.loc-dodgers .cabinet-corner::before {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

body.loc-dodgers .cabinet-base-gold {
  background: linear-gradient(180deg, #003d6b, #001a33);
}

body.loc-dodgers .logo-title {
  color: #fff;
  text-shadow:
    0 0 20px rgba(0, 90, 156, 0.5),
    0 2px 4px rgba(0,0,0,0.5);
}

body.loc-dodgers .logo-subtitle {
  color: #6bb4e8;
}

body.loc-dodgers .location-badge {
  border-color: rgba(0, 90, 156, 0.3);
  color: #6bb4e8;
}

body.loc-dodgers .reading-card-title {
  color: #6bb4e8;
}

body.loc-dodgers .reading-card-price {
  color: #fff;
}

body.loc-dodgers .reading-card:hover {
  border-color: rgba(0, 90, 156, 0.4);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    0 0 30px rgba(0, 90, 156, 0.1);
}

body.loc-dodgers .ornate-line::before,
body.loc-dodgers .ornate-line::after {
  background: linear-gradient(90deg, transparent, #005A9C, transparent);
}

body.loc-dodgers .ornate-line svg {
  fill: #005A9C;
}

body.loc-dodgers .passport-badge.current {
  border-color: #005A9C;
  box-shadow: 0 0 20px rgba(0, 90, 156, 0.15);
}

/* Dodgers + Spicy overrides spicy colors */
body.loc-dodgers.spicy-mode .cabinet-frame {
  background: linear-gradient(180deg, #c92727 0%, #8a1414 20%, #e63946 50%, #8a1414 80%, #c92727 100%);
}

/* ═════════════════════════════════════════
   CHAT STARTER CHIPS
   ═════════════════════════════════════════ */
.chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  justify-content: center;
}

/* When chips appear at the top (before greeting), add a subtle label */
.chat-starters-top {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(212, 175, 55, 0.08);
  margin-bottom: var(--space-2);
}
.chat-starters-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: var(--space-1);
}
.chat-starters-top .chat-starter-chip {
  text-align: center;
  white-space: normal;
  font-size: var(--text-sm);
}

.chat-starter-chip {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-gold-pale);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-interactive);
  white-space: nowrap;
  line-height: 1.3;
}

.chat-starter-chip:hover {
  background: var(--color-surface);
  border-color: var(--color-gold-dim);
  color: var(--color-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.12);
}

.chat-starter-chip:active {
  transform: scale(0.97);
}

/* Spicy mode chip styling */
.spicy-mode .chat-starter-chip {
  border-color: rgba(230, 57, 70, 0.2);
  color: #f0a0a8;
}

.spicy-mode .chat-starter-chip:hover {
  border-color: rgba(230, 57, 70, 0.4);
  color: #f5c5ca;
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.12);
}

.share-card-location:empty {
  display: none;
}

/* ═════════════════════════════════════════
   VENUE ACCENT COLOR SYSTEM
   ═════════════════════════════════════════ */
.has-accent .location-badge {
  border-color: var(--color-accent-loc);
  box-shadow: 0 0 15px color-mix(in srgb, var(--color-accent-loc) 20%, transparent);
}

.has-accent .location-badge-icon {
  color: var(--color-accent-loc);
}

.has-accent .cabinet-frame {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-loc) 70%, #000) 0%,
    color-mix(in srgb, var(--color-accent-loc) 40%, #000) 20%,
    var(--color-accent-loc) 50%,
    color-mix(in srgb, var(--color-accent-loc) 40%, #000) 80%,
    color-mix(in srgb, var(--color-accent-loc) 70%, #000) 100%
  );
}

.has-accent .cabinet-corner::before {
  background: var(--color-accent-loc);
}

.has-accent .cabinet-base-gold {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-accent-loc) 60%, #000),
    var(--color-accent-loc),
    color-mix(in srgb, var(--color-accent-loc) 60%, #000)
  );
}

.has-accent .ornate-line::before,
.has-accent .ornate-line::after {
  background: linear-gradient(90deg, transparent, var(--color-accent-loc), transparent);
}

.has-accent .ornate-line svg {
  fill: var(--color-accent-loc);
}

.has-accent .reading-card:hover {
  border-color: color-mix(in srgb, var(--color-accent-loc) 40%, transparent);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    0 0 30px color-mix(in srgb, var(--color-accent-loc) 10%, transparent);
}

.has-accent .reading-card-featured {
  border-color: color-mix(in srgb, var(--color-accent-loc) 30%, transparent);
}

.has-accent .reading-card-featured:hover {
  border-color: color-mix(in srgb, var(--color-accent-loc) 50%, transparent);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    0 0 40px color-mix(in srgb, var(--color-accent-loc) 15%, transparent);
}

.has-accent .passport-badge.current {
  border-color: var(--color-accent-loc);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent-loc) 15%, transparent);
}

.has-accent .share-card-capture {
  border-color: color-mix(in srgb, var(--color-accent-loc) 40%, transparent);
}

.has-accent .share-card-brand {
  color: var(--color-accent-loc);
}

/* Spicy mode overrides accent */
.has-accent.spicy-mode .cabinet-frame {
  background: linear-gradient(180deg, #c92727 0%, #8a1414 20%, #e63946 50%, #8a1414 80%, #c92727 100%);
}

/* ═════════════════════════════════════════
   EASTER EGG TOAST
   ═════════════════════════════════════════ */
.easter-egg-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 320px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(107, 63, 160, 0.9), rgba(42, 16, 80, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 16px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(107, 63, 160, 0.3);
  pointer-events: none;
}

/* ═════════════════════════════════════════
   LOVE ORACLE — Heart Particles
   ═════════════════════════════════════════ */
.love-particle {
  position: absolute;
  font-size: 1.2rem;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 0 4px rgba(230, 57, 70, 0.5));
}

/* ═════════════════════════════════════════
   SINGLES MODE
   ═════════════════════════════════════════ */
.singles-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.singles-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.singles-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.singles-vibe-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.singles-vibe-btn {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.singles-vibe-btn.active {
  border-color: var(--color-spicy);
  color: var(--color-text);
  background: rgba(230, 57, 70, 0.1);
  box-shadow: 0 0 12px rgba(230, 57, 70, 0.15);
}
.singles-selfie-input {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.singles-count {
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-spicy);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.singles-your-checkin {
  background: rgba(230, 57, 70, 0.08);
  border: 1px solid rgba(230, 57, 70, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}
.singles-your-checkin .nickname {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.singles-your-checkin .vibe {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.singles-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.singles-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.singles-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
}
.singles-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.singles-card-info {
  flex: 1;
}
.singles-card-nickname {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text);
}
.singles-card-vibe {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.singles-card-time {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.singles-match-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(230, 57, 70, 0.4);
  background: rgba(230, 57, 70, 0.1);
  color: var(--color-spicy);
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.singles-match-btn:hover {
  background: rgba(230, 57, 70, 0.2);
}
/* Matchmaker result toast */
.matchmaker-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 340px;
  width: 90%;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.9), rgba(160, 30, 50, 0.95));
  border: 1px solid rgba(255, 200, 200, 0.3);
  border-radius: 16px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-style: italic;
  text-align: center;
  line-height: 1.6;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 30px rgba(230, 57, 70, 0.3);
}
.matchmaker-toast-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-gold-light);
  margin-bottom: var(--space-2);
  font-style: normal;
}
/* Reading card variant for singles */
.reading-card-singles {
  border-color: rgba(230, 57, 70, 0.3);
}
.reading-card-singles .reading-card-title {
  color: var(--color-spicy);
}
.reading-card-singles .reading-card-price {
  color: var(--color-spicy);
  font-size: var(--text-sm);
}
.reading-card-price-free {
  color: #4ade80 !important;
  font-weight: 600;
}
/* Singles teaser state (clean mode) */
.singles-teaser {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.singles-teaser .reading-card-title {
  color: var(--color-text-muted) !important;
}
.singles-teaser .reading-card-desc {
  color: var(--color-text-faint);
  font-style: italic;
}
.singles-teaser .reading-card-price-free {
  color: var(--color-text-faint) !important;
}
.singles-teaser:hover {
  opacity: 0.8;
  border-color: rgba(230, 57, 70, 0.2) !important;
}

/* ═════════════════════════════════════════
   VISITOR COUNT BADGE
   ═════════════════════════════════════════ */
.visitor-count-badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-crystal);
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  background: rgba(126, 200, 227, 0.06);
  border: 1px solid rgba(126, 200, 227, 0.15);
  border-radius: var(--radius-full);
  display: inline-block;
}

/* ═════════════════════════════════════════
   LOGIN / USER PROFILE
   ═════════════════════════════════════════ */
.login-section {
  text-align: center;
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.login-prompt-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.user-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: var(--space-3);
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}
.user-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ═════════════════════════════════════════
   NOTIFICATION TOAST
   ═════════════════════════════════════════ */
.notification-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 340px;
  width: 90%;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(12, 12, 26, 0.95), rgba(24, 18, 50, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(212, 175, 55, 0.15);
}
.nudge-toast {
  border-color: rgba(230, 57, 70, 0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(230, 57, 70, 0.2);
}
.notification-toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.notification-toast-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
}

/* ═════════════════════════════════════════
   NUDGE BUTTONS
   ═════════════════════════════════════════ */
.singles-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex-shrink: 0;
}
.singles-nudge-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(230, 57, 70, 0.4);
  background: rgba(230, 57, 70, 0.1);
  color: var(--color-spicy);
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.singles-nudge-btn:hover {
  background: rgba(230, 57, 70, 0.2);
}
.nudge-sent {
  opacity: 0.6;
  border-color: rgba(212, 175, 55, 0.3);
  color: var(--color-gold-dim);
}
.nudge-mutual {
  border-color: rgba(212, 175, 55, 0.6) !important;
  color: var(--color-gold) !important;
  background: rgba(212, 175, 55, 0.15) !important;
  animation: pulseGlow 1.5s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
  50% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); }
}

/* ═════════════════════════════════════════
   MATCH CHAT
   ═════════════════════════════════════════ */

/* Matches list in Singles screen */
.singles-matches {
  margin-bottom: var(--space-4);
}
.singles-matches-header {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
.singles-matches-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.match-preview-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(230, 57, 70, 0.08);
  border: 1px solid rgba(230, 57, 70, 0.2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
}
.match-preview-card:hover {
  background: rgba(230, 57, 70, 0.15);
  border-color: rgba(230, 57, 70, 0.4);
}
.match-preview-avatar {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.match-preview-info {
  flex: 1;
  min-width: 0;
}
.match-preview-name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.match-preview-last {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-preview-badge {
  background: var(--color-spicy);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Match Chat Screen */
.match-chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4) var(--space-3);
}
.match-chat-avatar {
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(230, 57, 70, 0.5));
}
.match-chat-info {
  flex: 1;
}
.match-chat-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.match-chat-expires {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.match-chat-icebreaker {
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.1), rgba(212, 175, 55, 0.08));
  border: 1px solid rgba(230, 57, 70, 0.2);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-spicy);
  font-style: italic;
  line-height: 1.5;
}
.match-chat-icebreaker::before {
  content: 'Sapphire says ask:';
  display: block;
  font-style: normal;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-pale);
  margin-bottom: 6px;
  opacity: 0.85;
}
.match-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 200px;
  max-height: calc(100vh - 300px);
}
.match-msg {
  max-width: 80%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  word-break: break-word;
}
.match-msg-me {
  align-self: flex-end;
  background: rgba(230, 57, 70, 0.2);
  border: 1px solid rgba(230, 57, 70, 0.3);
  color: var(--color-text);
  border-bottom-right-radius: var(--radius-sm);
}
.match-msg-them {
  align-self: flex-start;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--color-text);
  border-bottom-left-radius: var(--radius-sm);
}
.match-msg-sender {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.match-msg-time {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  opacity: 0.7;
}
.match-chat-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-8) var(--space-4);
  font-style: italic;
}
.match-chat-input-wrap {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.match-chat-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid rgba(230, 57, 70, 0.3);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.2s;
}
.match-chat-input:focus {
  border-color: var(--color-spicy);
}
.match-chat-input::placeholder {
  color: var(--color-text-muted);
}
.match-chat-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-spicy);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.match-chat-send:hover {
  background: #c0313e;
  transform: scale(1.05);
}
.match-chat-send:active {
  transform: scale(0.95);
}
#screenMatchChat.active {
  flex-direction: column;
}
.match-chat-drink-bar {
  display: flex;
  justify-content: center;
  padding: 0 var(--space-4) var(--space-2);
}
.match-drink-btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(230, 57, 70, 0.08));
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.match-drink-btn:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(230, 57, 70, 0.15));
  border-color: rgba(212, 175, 55, 0.5);
  transform: scale(1.03);
}
.match-drink-btn:active { transform: scale(0.97); }

/* ═════════════════════════════════════════
   PAYWALL SCREEN
   ═════════════════════════════════════════ */
.paywall-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-4) var(--space-6);
  max-width: 380px;
  margin: 0 auto;
}
.paywall-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
  animation: coreGlow 2s ease-in-out infinite;
}
.paywall-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-gold);
  margin-bottom: var(--space-3);
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
}
.paywall-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}
.paywall-features {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  text-align: left;
}
.paywall-feature {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.1);
  border-radius: var(--radius-lg);
}
.paywall-price {
  margin-bottom: var(--space-5);
}
.paywall-price-amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-gold);
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
}
.paywall-price-period {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.paywall-cta {
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(135deg, var(--color-gold-dim), var(--color-gold));
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
}
.paywall-cta:hover {
  box-shadow: 0 6px 30px rgba(212, 175, 55, 0.35);
  transform: translateY(-2px);
}

/* ── Paywall Auth Buttons ── */
.paywall-auth {
  text-align: center;
  margin-bottom: var(--space-6);
}
.paywall-auth-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.paywall-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full, 50px);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.auth-btn-google {
  background: #fff;
  color: #3c4043;
}
.auth-btn-apple {
  background: #000;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── Account Badge ── */
.account-badge {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.account-badge:hover {
  border-color: var(--color-gold);
  box-shadow: 0 2px 15px rgba(212, 175, 55, 0.3);
}
.account-badge-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Account Panel ── */
.account-panel {
  position: fixed;
  top: calc(var(--space-4) + 48px);
  left: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  z-index: 100;
  min-width: 240px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.account-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.account-panel-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(212, 175, 55, 0.3);
}
.account-panel-name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 600;
}
.account-panel-email {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.account-panel-status {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  text-align: center;
  margin-bottom: var(--space-4);
}
.account-panel-status.subscriber {
  color: var(--color-gold);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.15);
}

/* ── Desktop ── */
@media (min-width: 600px) {
  .app { padding: var(--space-8) var(--space-6) var(--space-10); }
  .oracle-cabinet { width: 280px; }
  .oracle-cabinet-mini { width: 160px; }
  #screenChat .oracle-cabinet-mini { width: 120px; }
  .chat-messages { max-height: 55vh; }
}

/* ── PWA Install Banner ── */
.install-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 380px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(12, 12, 26, 0.97), rgba(24, 18, 50, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10001;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(107, 63, 160, 0.15);
}
.install-banner-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}
.install-banner-text {
  flex: 1;
  min-width: 0;
}
.install-banner-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 600;
}
.install-banner-desc {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.install-banner-btn {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.install-banner-btn:hover {
  background: var(--color-gold-light);
}
.install-banner-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  color: var(--color-text-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* ═════════════════════════════════════════
   UX OVERHAUL — Wow Factor Additions
   ═════════════════════════════════════════ */

/* ── Entrance Glow ── */
.entrance-glow {
  position: absolute;
  inset: -20px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.4) 0%, transparent 70%);
  pointer-events: none;
  z-index: 10;
}

/* ── Spicy Mode — Enhanced body state ── */
body.spicy-mode .logo-title {
  text-shadow: 0 0 30px rgba(230, 57, 70, 0.3);
}

body.spicy-mode .oracle-speaks-text {
  color: rgba(230, 150, 160, 0.7);
}

body.spicy-mode .cursor {
  background: var(--color-spicy);
}

body.spicy-mode .ornate-line svg {
  fill: var(--color-spicy);
  filter: drop-shadow(0 0 4px rgba(230, 57, 70, 0.4));
}

/* ── Smaller Footer ── */
.site-footer-sm {
  padding: var(--space-3) 0 var(--space-4);
}

.site-footer-sm span {
  font-size: 0.65rem !important;
  opacity: 0.3;
  letter-spacing: 0.1em;
}

/* ── Reading Card Polish ── */
.reading-card-featured {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(107, 63, 160, 0.1) 50%, rgba(212, 175, 55, 0.15) 100%) !important;
}

.reading-card:not(.reading-card-featured) {
  border-left: 3px solid transparent;
  transition: border-color 0.3s, transform 0.2s;
}

.reading-card:not(.reading-card-featured):hover {
  border-left-color: var(--color-gold);
}

/* ── Restored coreGlow (used by paywall icon) ── */
@keyframes coreGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(212,175,55,0.3); transform: translate(-50%,-50%) scale(1); }
  50% { box-shadow: 0 0 25px rgba(212,175,55,0.5); transform: translate(-50%,-50%) scale(1.15); }
}

/* ── Venue Inquiry ── */
.venue-trigger {
  display: block;
  margin: 0 auto var(--space-4);
  background: none;
  border: none;
  color: var(--color-text-faint);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
  letter-spacing: 0.05em;
}
.venue-trigger:hover { color: var(--color-gold-dim); }
.venue-inquiry {
  max-width: 340px;
  margin: var(--space-6) auto;
  padding: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.venue-inquiry-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-gold);
  text-align: center;
  margin-bottom: var(--space-2);
}
.venue-inquiry-desc {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-4);
}
.venue-inquiry-success {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-gold);
  text-align: center;
}

/* ── Onboarding Overlay ── */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 12, 0.95);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.onboarding-card {
  max-width: 380px;
  width: 100%;
  text-align: center;
  padding: var(--space-6) var(--space-5);
}
.onboarding-icon { font-size: 3rem; margin-bottom: var(--space-3); filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.5)); }
.onboarding-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-gold);
  margin-bottom: var(--space-2);
  text-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
}
.onboarding-tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  font-style: italic;
}
.onboarding-features {
  text-align: left;
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.onboarding-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-lg);
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.08);
}
.onboarding-feature-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.onboarding-feature strong {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-gold);
  display: block;
  margin-bottom: 2px;
}
.onboarding-feature span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.onboarding-free {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
}
/* Onboarding flow demo */
.onboarding-demo {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-4);
  background: rgba(230, 57, 70, 0.06);
  border: 1px solid rgba(230, 57, 70, 0.15);
  border-radius: var(--radius-lg);
}
.onboarding-demo-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-spicy);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: var(--space-3);
}
.onboarding-demo-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.demo-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: demoPulse 2.5s ease-in-out infinite;
}
.demo-step-1 { animation-delay: 0s; }
.demo-step-2 { animation-delay: 0.4s; }
.demo-step-3 { animation-delay: 0.8s; }
.demo-step-4 { animation-delay: 1.2s; }
@keyframes demoPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
}
.demo-step-icon {
  font-size: 1.4rem;
}
.demo-step-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.demo-arrow {
  color: rgba(230, 57, 70, 0.4);
  font-size: var(--text-sm);
}
.onboarding-demo-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  margin-top: var(--space-3);
  font-style: italic;
}

/* ═════════════════════════════════════════
   BADGE PREVIEW MODAL
   ═════════════════════════════════════════ */
.badge-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 12, 0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.badge-preview-card {
  max-width: 300px;
  width: 100%;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.badge-preview-image {
  width: 200px;
  height: auto;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  border: 2px solid var(--color-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.badge-preview-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.badge-preview-status {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

/* Quick Fortune Button */
.quick-fortune-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) auto var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.08);
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.3s;
  animation: subtlePulse 3s ease-in-out infinite;
}
.quick-fortune-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.5);
  transform: scale(1.03);
}
.quick-fortune-btn:active { transform: scale(0.97); }
.quick-fortune-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  50% { box-shadow: 0 0 20px 2px rgba(212, 175, 55, 0.15); }
}
.spicy-mode .quick-fortune-btn {
  border-color: rgba(230, 57, 70, 0.3);
  background: rgba(230, 57, 70, 0.08);
  color: var(--color-spicy);
}
.quick-fortune-icon { font-size: 1.1rem; }
.quick-fortune-result {
  text-align: center;
  padding: var(--space-4) var(--space-6);
  margin: 0 auto var(--space-3);
  max-width: 340px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
  font-style: italic;
  border-left: 2px solid rgba(212, 175, 55, 0.3);
}
.spicy-mode .quick-fortune-result {
  border-left-color: rgba(230, 57, 70, 0.3);
}
.quick-fortune-number {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
  font-style: normal;
}

/* Singles screen polish */
.singles-live-count {
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-spicy);
  padding: var(--space-2) 0 var(--space-3);
}
.singles-live-count:empty { display: none; }
.singles-anon-note {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
  font-style: italic;
}

/* Singles Hero */
.singles-hero {
  text-align: center;
  padding: 60px var(--space-4) var(--space-2) var(--space-4);
}
.singles-hero-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 0 15px rgba(230, 57, 70, 0.4));
}
.singles-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-spicy);
  margin-bottom: var(--space-2);
  text-shadow: 0 0 20px rgba(230, 57, 70, 0.3);
}
.singles-hero-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Singles Form Card */
.singles-form-card {
  margin: 0 var(--space-4);
  padding: var(--space-5);
  background: rgba(230, 57, 70, 0.05);
  border: 1px solid rgba(230, 57, 70, 0.15);
  border-radius: var(--radius-lg);
}
.singles-form-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.singles-form-label + .singles-form-label,
.singles-vibe-options + .singles-form-label {
  margin-top: var(--space-4);
}
.singles-nickname-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(230, 57, 70, 0.25);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}
.singles-nickname-input:focus {
  border-color: var(--color-spicy);
}
.singles-nickname-input::placeholder {
  color: var(--color-text-faint);
}
.singles-vibe-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.singles-vibe-btn {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(230, 57, 70, 0.15);
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.singles-vibe-btn:hover {
  background: rgba(230, 57, 70, 0.08);
  border-color: rgba(230, 57, 70, 0.3);
}
.singles-vibe-btn.active {
  background: rgba(230, 57, 70, 0.15);
  border-color: var(--color-spicy);
  color: var(--color-text);
}
.singles-checkin-btn {
  width: 100%;
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: none;
  background: var(--color-spicy);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.singles-checkin-btn:hover { background: #c0313e; transform: scale(1.02); }
.singles-checkin-btn:active { transform: scale(0.98); }

/* How it works (in Singles screen) */
.singles-how-it-works {
  margin: var(--space-5) var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.singles-hiw-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.4;
}
.singles-hiw-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(230, 57, 70, 0.1);
  border: 1px solid rgba(230, 57, 70, 0.2);
  color: var(--color-spicy);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Live count styling override */
.singles-live-count {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4) var(--space-3);
  line-height: 1.5;
}

/* ═══════════════════════════════════════
   VISUAL POLISH PASS — April 2026
   ═══════════════════════════════════════ */

/* Card depth — layered shadows for premium feel */
.reading-card {
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 1px rgba(212, 175, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reading-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.reading-card-featured {
  box-shadow: 
    0 4px 20px rgba(212, 175, 55, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.reading-card-featured:active {
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.1);
}

/* Subtitle readability */
.logo-subtitle {
  letter-spacing: 0.08em !important;
  font-size: var(--text-xs) !important;
  opacity: 0.7;
}

/* Social proof — more visible */
.social-proof-bar {
  color: var(--color-text-muted) !important;
  font-size: var(--text-xs);
  opacity: 0.8;
}

/* Quick fortune button — more presence */
.quick-fortune-btn {
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-8);
  border-width: 1.5px;
}

/* Chat screen polish */
#screenChat.active {
  flex-direction: column;
}
#screenChat .chat-messages {
  flex: 1;
  min-height: 300px;
}
#screenChat .site-footer {
  display: none;
}
.chat-title {
  font-size: var(--text-base) !important;
  margin-bottom: var(--space-3);
}
.chat-input-bar {
  padding: var(--space-3) var(--space-4) var(--space-5);
}
.chat-input {
  font-size: var(--text-base);
}

/* Love reading screen polish */
#screenQuestion .site-footer {
  display: none;
}

/* Singles Mode — elevate form card */
.singles-form-card {
  box-shadow: 
    0 4px 24px rgba(230, 57, 70, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.singles-nickname-input {
  font-size: var(--text-base);
  padding: var(--space-4);
}
.singles-vibe-btn {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}
.singles-checkin-btn {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-6);
  box-shadow: 0 4px 16px rgba(230, 57, 70, 0.25);
}
.singles-checkin-btn:hover {
  box-shadow: 0 6px 24px rgba(230, 57, 70, 0.35);
}

/* Singles how-it-works — bigger and clearer */
.singles-hiw-step {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}
.singles-hiw-num {
  width: 24px;
  height: 24px;
  font-size: var(--text-sm);
}

/* Hide footer on sub-screens — only show on home */
#screenSingles > .site-footer,
#screenResult > .site-footer,
#screenQuestion > .site-footer,
#screenChat > .site-footer,
#screenLoading > .site-footer,
#screenPaywall > .site-footer,
#screenMatchChat > .site-footer {
  display: none !important;
}

/* ── Sub-screen layout: tighten top padding so hero appears immediately ── */
#screenSingles,
#screenChat,
#screenQuestion,
#screenResult {
  padding-top: var(--space-2);
}

/* Compact mini cabinet on sub-screens (was margin-top: var(--space-10) creating ~80px gap) */
#screenQuestion .oracle-cabinet-mini,
#screenResult .oracle-cabinet-mini {
  margin-top: 56px;
  margin-bottom: var(--space-2);
  width: 110px;
}

#screenChat .oracle-cabinet-mini {
  margin-top: 56px;
  margin-bottom: var(--space-1);
  width: 80px;
}

/* Singles hero: remove the wasteful 60px top padding */
.singles-hero {
  padding: 56px var(--space-4) var(--space-2) var(--space-4) !important;
}

/* Fade typewriter cursor when paused (no longer typing) */
.oracle-speaks-text .cursor.cursor-paused {
  animation: cursorFadeOut 0.6s ease forwards;
}
.typewriter-cursor.typewriter-cursor-fade {
  animation: cursorFadeOut 0.6s ease forwards;
}
@keyframes cursorFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Match chat send button depth */
.match-chat-send {
  box-shadow: 0 2px 10px rgba(230, 57, 70, 0.3);
}

/* Passport section — less shouty */
.passport-title {
  font-size: var(--text-lg) !important;
}

/* Oracle image frame polish */
.oracle-cabinet {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(212, 175, 55, 0.06);
}
.adult-active .oracle-cabinet {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(230, 57, 70, 0.08);
}

/* Unfiltered mode cards — red shadow depth */
.adult-active .reading-card {
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 1px rgba(230, 57, 70, 0.15);
}
.adult-active .reading-card-featured {
  box-shadow: 
    0 4px 20px rgba(230, 57, 70, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Better press states across the board */
.btn:active, button:active {
  transform: scale(0.97);
}
.btn-primary:active {
  filter: brightness(0.9);
}

/* Smooth all transitions */
.screen {
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Chat typing indicator */
.chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) auto;
  width: fit-content;
}
.chat-typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-faint);
  animation: typingDot 1.4s ease-in-out infinite;
}
.chat-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}

/* Empty icon containers — hide them cleanly */
.reading-card-icon:empty,
.onboarding-icon:empty,
.passport-header-icon:empty,
.share-card-oracle-icon:empty,
.paywall-icon:empty,
.singles-hero-icon:empty,
.match-chat-avatar:empty,
.match-preview-avatar:empty,
.notification-toast-icon:empty,
.location-badge-icon:empty {
  display: none;
}

/* Onboarding feature icons — styled as roman numerals */
.onboarding-feature-icon {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-gold-dim) !important;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Age gate icon styled as text */
.age-gate-icon {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  color: var(--color-spicy) !important;
  letter-spacing: 0.05em;
}

/* Chat card online status */
.chat-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: #4ade80;
  margin-top: var(--space-2);
}
.online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Singles interest banner */
.singles-interest-banner {
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.15), rgba(212, 175, 55, 0.08));
  border: 1px solid rgba(230, 57, 70, 0.3);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-spicy);
  text-align: center;
  animation: interestPulse 2s ease-in-out infinite;
}
@keyframes interestPulse {
  0%, 100% { border-color: rgba(230, 57, 70, 0.3); }
  50% { border-color: rgba(230, 57, 70, 0.6); box-shadow: 0 0 15px rgba(230, 57, 70, 0.1); }
}

/* Singles browse cards — dating profile feel */
.singles-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  margin: 0 var(--space-4) var(--space-2);
  background: rgba(230, 57, 70, 0.04);
  border: 1px solid rgba(230, 57, 70, 0.12);
  border-radius: var(--radius-lg);
  transition: all 0.2s;
}
.singles-card:hover {
  background: rgba(230, 57, 70, 0.08);
  border-color: rgba(230, 57, 70, 0.25);
}
.singles-card-nickname {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 2px;
}
.singles-card-vibe {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-spicy);
  opacity: 0.9;
}
.singles-card-meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: 2px;
}
.singles-nudge-btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid rgba(230, 57, 70, 0.4);
  background: transparent;
  color: var(--color-spicy);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.singles-nudge-btn:hover {
  background: rgba(230, 57, 70, 0.15);
  border-color: var(--color-spicy);
}
.singles-nudge-btn:active { transform: scale(0.95); }
.singles-nudge-btn.nudge-sent {
  opacity: 0.5;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
}
.singles-nudge-btn.nudge-mutual {
  background: var(--color-spicy);
  color: #fff;
  border-color: var(--color-spicy);
  opacity: 1;
}
.singles-empty-state {
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  padding: var(--space-8) var(--space-4);
}

/* ═════════════════════════════════════════
   LOVE READING — Sapphire prompt + brighter UI
   ═════════════════════════════════════════ */
.love-section {
  text-align: center;
}
.love-sapphire-prompt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-gold-pale);
  font-style: italic;
  line-height: 1.4;
  margin: 0 auto var(--space-3);
  max-width: 32ch;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.18);
  letter-spacing: 0.01em;
}
.spicy-mode .love-sapphire-prompt {
  color: #f5c5ca;
  text-shadow: 0 0 20px rgba(230, 57, 70, 0.2);
}
.love-sapphire-attrib {
  display: inline-block;
  margin-top: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.7;
}
.spicy-mode .love-sapphire-attrib {
  color: var(--color-spicy);
}
.names-row-stacked {
  grid-template-columns: 1fr;
  gap: var(--space-2);
  justify-items: center;
}
.names-row-stacked .heart-divider {
  font-size: 1.8rem;
  text-shadow: 0 0 22px rgba(230, 57, 70, 0.5);
  animation: heartBeatLove 1.2s ease-in-out infinite;
}
@keyframes heartBeatLove {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(230,57,70,0.4)); }
  25% { transform: scale(1.25); }
  40% { transform: scale(1.05); }
  60% { transform: scale(1.3); filter: drop-shadow(0 0 14px rgba(230,57,70,0.7)); }
}
.love-name-input {
  text-align: center;
  font-size: var(--text-base);
}

/* Brighten the Reveal My Fate CTA on love screen */
#loveInput:not([style*="display:none"]) ~ #payBtn,
#loveInput[style=""] ~ #payBtn {
  /* fallback selector — most reliable is the body-level mode */
}
body.love-active #payBtn {
  background: linear-gradient(135deg, #e63946 0%, #d4af37 100%) !important;
  color: #fff !important;
  box-shadow:
    0 0 30px rgba(230, 57, 70, 0.4),
    0 4px 18px rgba(212, 175, 55, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  animation: lovePulse 2.4s ease-in-out infinite;
}
@keyframes lovePulse {
  0%, 100% { box-shadow: 0 0 30px rgba(230,57,70,0.4), 0 4px 18px rgba(212,175,55,0.25), inset 0 1px 0 rgba(255,255,255,0.2); }
  50%      { box-shadow: 0 0 50px rgba(230,57,70,0.65), 0 6px 28px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
}

/* ═════════════════════════════════════════
   LOVE CARD on home — heart pulse
   ═════════════════════════════════════════ */
.reading-card[data-reading="love"] {
  position: relative;
  overflow: hidden;
}
.reading-card[data-reading="love"]::before {
  content: '♥';
  position: absolute;
  top: 50%;
  right: var(--space-4);
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--color-spicy);
  opacity: 0.55;
  text-shadow: 0 0 14px rgba(230, 57, 70, 0.5);
  animation: loveCardPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes loveCardPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.5; }
  40% { transform: translateY(-50%) scale(1.18); opacity: 0.85; }
}

/* ═════════════════════════════════════════
   SINGLES CARD on home — live presence dot
   ═════════════════════════════════════════ */
.singles-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(230, 57, 70, 0.12);
  border: 1px solid rgba(230, 57, 70, 0.3);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffb4bc;
}
.singles-live-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5566;
  box-shadow: 0 0 8px #ff5566;
  animation: liveDotPulse 1.4s ease-in-out infinite;
}
@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* ═════════════════════════════════════════
   FORTUNE COUNTER (live activity, urgency)
   ═════════════════════════════════════════ */
.fortune-activity-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: var(--space-2) auto var(--space-3);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.15);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-pale);
  max-width: fit-content;
}
.fortune-activity-strip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 10px #ffd166;
  animation: liveDotPulse 1.6s ease-in-out infinite;
}
.spicy-mode .fortune-activity-strip {
  background: rgba(230, 57, 70, 0.06);
  border-color: rgba(230, 57, 70, 0.2);
  color: #ffb4bc;
}
.spicy-mode .fortune-activity-strip::before {
  background: #ff5566;
  box-shadow: 0 0 10px #ff5566;
}

/* ═════════════════════════════════════════
   PASSPORT — first-timer pitch styling
   ═════════════════════════════════════════ */
.passport-pitch {
  margin: 0 auto var(--space-4);
  padding: var(--space-3) var(--space-4);
  max-width: 32ch;
  background: rgba(212, 175, 55, 0.05);
  border: 1px dashed rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-gold-pale);
  text-align: center;
}

/* ═════════════════════════════════════════
   SHARE / SEND TO FRIEND CTA (post-fortune)
   ═════════════════════════════════════════ */
.send-to-friend-bar {
  width: 100%;
  margin: var(--space-3) 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(230, 57, 70, 0.04));
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  text-align: center;
  animation: sendBarFadeIn 0.6s ease;
}
@keyframes sendBarFadeIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.send-to-friend-text {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-pale);
}
.send-to-friend-btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--color-gold), #b58c1a);
  color: #1a1208;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
  transition: all 0.2s;
}
.send-to-friend-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(212, 175, 55, 0.4);
}
.send-to-friend-btn:active { transform: scale(0.97); }
.spicy-mode .send-to-friend-btn {
  background: linear-gradient(135deg, var(--color-spicy), #a02230);
  color: #fff;
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.35);
}

/* ═════════════════════════════════════════
   SINGLES — enhanced empty states
   ═════════════════════════════════════════ */
.singles-empty-state.singles-empty-firstin {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(230, 57, 70, 0.04));
  border: 1px dashed rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-lg);
  font-style: normal;
}
.singles-empty-state.singles-empty-waiting {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: rgba(212, 175, 55, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: var(--radius-lg);
  font-style: normal;
  position: relative;
}
.singles-empty-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-gold-pale);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}
.singles-empty-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 36ch;
  margin: 0 auto;
}
.singles-empty-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 12px #4ade80;
  margin: 0 auto var(--space-3);
  animation: liveDotPulse 1.6s ease-in-out infinite;
}

/* ═════════════════════════════════════════
   INTEREST BANNER — one-tap nudge back
   ═════════════════════════════════════════ */
.singles-interest-banner {
  padding: var(--space-3) var(--space-4);
}
.interest-banner-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: #fff;
  margin-bottom: var(--space-2);
  text-align: center;
}
.interest-banner-text strong {
  color: #ffd166;
  font-weight: 700;
}
.spicy-mode .interest-banner-text strong {
  color: #ff8f9a;
}
.interest-banner-action {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, #e63946, #d4af37);
  color: #1a1208;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(230, 57, 70, 0.3);
  transition: all 0.2s;
  animation: interestBtnPulse 1.8s ease-in-out infinite;
}
.interest-banner-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(230, 57, 70, 0.4);
}
.interest-banner-action:active { transform: scale(0.97); }
@keyframes interestBtnPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(230,57,70,0.3); }
  50% { box-shadow: 0 4px 24px rgba(230,57,70,0.55); }
}

/* ═════════════════════════════════════════
   MATCH CHAT — pre-filled icebreaker style
   ═════════════════════════════════════════ */
.match-chat-input-prefill {
  color: #c9b673 !important;
  font-style: italic;
  background: rgba(212, 175, 55, 0.05) !important;
}
.match-chat-input-prefill:focus {
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
}

/* ═════════════════════════════════════════
   SINGLES — Browse-before-commit redesign
   ═════════════════════════════════════════ */

/* Sticky bottom CTA: "You're invisible right now" */
.singles-checkin-cta {
  position: sticky;
  bottom: var(--space-3);
  margin: var(--space-4) auto var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.18), rgba(212, 175, 55, 0.12));
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 24px rgba(230, 57, 70, 0.2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 50;
}
.singles-checkin-cta-text {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-soft);
}
.singles-checkin-cta-text strong {
  color: #ffd166;
  font-weight: 700;
}
.spicy-mode .singles-checkin-cta-text strong {
  color: #ff8f9a;
}
.singles-checkin-cta-btn {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--color-spicy), var(--color-gold));
  color: #1a1208;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
  transition: transform 0.15s, box-shadow 0.2s;
  animation: ctaPulseAttract 2.4s ease-in-out infinite;
}
.singles-checkin-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.45);
}
.singles-checkin-cta-btn:active { transform: scale(0.97); }
@keyframes ctaPulseAttract {
  0%, 100% { box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3); }
  50% { box-shadow: 0 4px 24px rgba(230, 57, 70, 0.5); }
}

/* Bottom sheet for check-in */
.singles-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 4, 16, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 100;
}
.singles-sheet-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.singles-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5) var(--space-6);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 101;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
  max-height: 85vh;
  overflow-y: auto;
}
.singles-sheet.active {
  transform: translateY(0);
}
.singles-sheet-handle {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  margin: 0 auto var(--space-4);
}
.singles-sheet-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-gold-pale);
  margin: 0 0 var(--space-2);
  text-align: center;
}
.singles-sheet-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  text-align: center;
  line-height: 1.5;
}
.singles-nickname-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.singles-nickname-row .singles-nickname-input {
  flex: 1;
  margin-bottom: 0;
}
.singles-nickname-shuffle {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-gold);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.singles-nickname-shuffle:hover {
  background: rgba(212, 175, 55, 0.1);
  transform: rotate(-90deg);
}
.singles-nickname-shuffle:active {
  transform: rotate(-180deg) scale(0.9);
}

/* "Send a Drink" button styling */
.singles-nudge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.singles-nudge-icon {
  font-size: 1.1em;
  display: inline-block;
  transform: translateY(-1px);
}
.singles-nudge-btn-locked {
  /* Visually identical — same affordance. The auth happens after tap. */
  position: relative;
}

/* ═════════════════════════════════════════
   FIND SIGNAL — the bridge to IRL
   ═════════════════════════════════════════ */
.find-signal-banner {
  margin: var(--space-3) 0 var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.12), rgba(212, 175, 55, 0.08));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 32px rgba(230, 57, 70, 0.2);
}
.find-signal-banner::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #e63946, #d4af37, #e63946);
  background-size: 200% 200%;
  border-radius: var(--radius-lg);
  z-index: -1;
  animation: findSignalShimmer 4s ease infinite;
  opacity: 0.6;
}
@keyframes findSignalShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.find-signal-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-pale);
  margin-bottom: var(--space-2);
  opacity: 0.85;
}
.find-signal-emojis {
  font-size: 3.2rem;
  line-height: 1.1;
  letter-spacing: 0.1em;
  margin: var(--space-2) 0;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  animation: findSignalPop 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes findSignalPop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.find-signal-instruction {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* ═════════════════════════════════════════
   FINAL POLISH — drink-sent state, teaser pill, spell timer
   ═════════════════════════════════════════ */

/* Drink-sent state on the singles card */
.singles-card-drink-sent {
  border-color: rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.12);
}
.singles-card-drink-sent .singles-card-vibe::after {
  content: ' · drink sent ';
  color: var(--color-gold-pale);
  font-style: italic;
  opacity: 0.85;
}
.singles-card-matched {
  border-color: rgba(230, 57, 70, 0.6) !important;
  box-shadow: 0 0 32px rgba(230, 57, 70, 0.25);
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.06), rgba(212, 175, 55, 0.04));
}
.singles-nudge-btn.nudge-sent {
  background: rgba(212, 175, 55, 0.12) !important;
  color: var(--color-gold-pale) !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
  cursor: default;
  opacity: 0.85;
}
.singles-nudge-btn.nudge-mutual {
  background: linear-gradient(135deg, var(--color-spicy), var(--color-gold)) !important;
  color: #1a1208 !important;
  border-color: transparent !important;
  font-weight: 700;
  animation: matchPulse 1.4s ease-in-out infinite;
}
@keyframes matchPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(230, 57, 70, 0.4); }
  50% { box-shadow: 0 0 24px rgba(230, 57, 70, 0.7); }
}

/* Singles teaser pill on home — visible in clean mode */
.singles-teaser-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: var(--space-2) auto var(--space-3);
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.14), rgba(212, 175, 55, 0.1));
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--color-gold-pale);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  width: fit-content;
  max-width: 100%;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.18);
  animation: teaserPulse 3s ease-in-out infinite;
}
.singles-teaser-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(230, 57, 70, 0.3);
}
.singles-teaser-pill:active { transform: scale(0.97); }
.singles-teaser-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5566;
  box-shadow: 0 0 10px #ff5566;
  animation: liveDotPulse 1.6s ease-in-out infinite;
}
.singles-teaser-arrow {
  font-weight: 700;
  font-size: 1.1em;
  opacity: 0.7;
}
@keyframes teaserPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(230, 57, 70, 0.18); }
  50% { box-shadow: 0 4px 22px rgba(230, 57, 70, 0.35); }
}

/* Match Spell Timer — soft urgency in match chat */
.match-spell-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 var(--space-4) var(--space-2);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--color-gold-pale);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  letter-spacing: 0.02em;
  transition: all 0.4s;
}
.match-spell-icon {
  font-size: 1em;
  display: inline-block;
  animation: spellSparkle 2.4s ease-in-out infinite;
}
@keyframes spellSparkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.match-spell-timer-urgent {
  background: rgba(230, 57, 70, 0.12);
  border-color: rgba(230, 57, 70, 0.35);
  color: #ff8f9a;
  animation: urgentBlink 1s ease-in-out infinite;
}
@keyframes urgentBlink {
  0%, 100% { box-shadow: 0 0 0 rgba(230, 57, 70, 0); }
  50% { box-shadow: 0 0 16px rgba(230, 57, 70, 0.3); }
}
.match-spell-timer-after {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  opacity: 0.75;
}
.match-spell-timer-after .match-spell-icon {
  animation: none;
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════
   THE CLINK — "we met in person" CTA, fully CSS-drawn animation
   No emoji. Two glasses tilt and meet, flash, sparks fly.
   ═══════════════════════════════════════════════════════════ */
.clink-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: calc(100% - var(--space-8));
  margin: var(--space-3) var(--space-4) var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(230, 57, 70, 0.06));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-lg);
  color: var(--color-gold-pale);
  cursor: pointer;
  font-family: var(--font-body);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.3s, border-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.clink-cta:hover {
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.18);
}
.clink-cta:active { transform: scale(0.98); }
.clink-cta:disabled { cursor: default; }

.clink-label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-pale);
  position: relative;
  z-index: 2;
}
.clink-sublabel {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-muted);
  position: relative;
  z-index: 2;
}

/* The stage that holds the two glasses */
.clink-stage {
  position: relative;
  width: 110px;
  height: 56px;
  margin-bottom: 4px;
}

/* Each glass is a CSS shape: bowl (cocktail v) + stem + base */
.clink-glass {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0.5, 1.4);
}
.clink-bowl {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 22px solid transparent;
  border-top: 22px solid var(--color-gold-pale);
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
  position: relative;
}
/* Liquid surface inside the bowl */
.clink-bowl::after {
  content: '';
  position: absolute;
  top: -22px;
  left: -10px;
  width: 20px;
  height: 4px;
  background: linear-gradient(180deg, #ffe082, #d4af37);
  border-radius: 50% 50% 0 0;
  opacity: 0.85;
}
.clink-stem {
  width: 2px;
  height: 16px;
  background: var(--color-gold-pale);
  margin-top: -2px;
}
.clink-base {
  width: 16px;
  height: 3px;
  background: var(--color-gold-pale);
  border-radius: 2px;
}

.clink-glass-left  { left: 18px; transform: rotate(-15deg); }
.clink-glass-right { right: 18px; transform: rotate(15deg); }

/* Gentle resting wobble so the button feels alive */
.clink-cta:not(:disabled):not(.clink-cta-firing) .clink-glass-left  { animation: clinkIdleLeft  3s ease-in-out infinite; }
.clink-cta:not(:disabled):not(.clink-cta-firing) .clink-glass-right { animation: clinkIdleRight 3s ease-in-out infinite; }
@keyframes clinkIdleLeft  { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(-19deg); } }
@keyframes clinkIdleRight { 0%, 100% { transform: rotate(15deg);  } 50% { transform: rotate(19deg);  } }

/* The flash that pops between the glasses on impact */
.clink-flash {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe082 30%, transparent 70%);
  transform: translate(-50%, 0) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* Sparks that fan out from the impact point */
.clink-spark {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 6px #ffd166;
  transform: translate(-50%, 0) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* FIRING state — glasses meet, flash, sparks spray */
.clink-cta-firing .clink-glass-left,
.clink-cta-firing .clink-glass-right {
  animation: none;
}
.clink-cta-firing .clink-glass-left  { animation: clinkLeftMeet  0.7s cubic-bezier(0.4, 0, 0.2, 1.6) forwards; }
.clink-cta-firing .clink-glass-right { animation: clinkRightMeet 0.7s cubic-bezier(0.4, 0, 0.2, 1.6) forwards; }
.clink-cta-firing .clink-flash       { animation: clinkFlash    0.5s ease-out 0.45s forwards; }
.clink-cta-firing .clink-spark-1     { animation: spark 0.9s ease-out 0.5s forwards; --tx: -34px; --ty: -22px; }
.clink-cta-firing .clink-spark-2     { animation: spark 0.9s ease-out 0.5s forwards; --tx: -22px; --ty: -30px; }
.clink-cta-firing .clink-spark-3     { animation: spark 0.9s ease-out 0.5s forwards; --tx:  -8px; --ty: -34px; }
.clink-cta-firing .clink-spark-4     { animation: spark 0.9s ease-out 0.5s forwards; --tx:   8px; --ty: -34px; }
.clink-cta-firing .clink-spark-5     { animation: spark 0.9s ease-out 0.5s forwards; --tx:  22px; --ty: -30px; }
.clink-cta-firing .clink-spark-6     { animation: spark 0.9s ease-out 0.5s forwards; --tx:  34px; --ty: -22px; }

@keyframes clinkLeftMeet {
  0%   { transform: rotate(-15deg) translateX(0); }
  60%  { transform: rotate(2deg)   translateX(8px); }
  75%  { transform: rotate(-6deg)  translateX(2px); }
  100% { transform: rotate(-15deg) translateX(0); }
}
@keyframes clinkRightMeet {
  0%   { transform: rotate(15deg)  translateX(0); }
  60%  { transform: rotate(-2deg)  translateX(-8px); }
  75%  { transform: rotate(6deg)   translateX(-2px); }
  100% { transform: rotate(15deg)  translateX(0); }
}
@keyframes clinkFlash {
  0%   { transform: translate(-50%, 0) scale(0);   opacity: 0; }
  30%  { transform: translate(-50%, 0) scale(8);   opacity: 1; }
  60%  { transform: translate(-50%, 0) scale(12);  opacity: 0.6; }
  100% { transform: translate(-50%, 0) scale(16);  opacity: 0; }
}
@keyframes spark {
  0%   { transform: translate(-50%, 0) scale(0); opacity: 0; }
  20%  { transform: translate(-50%, 0) scale(1.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), var(--ty)) scale(0); opacity: 0; }
}

/* CONFIRMED state — glasses sit content, gold border glows */
.clink-cta-confirmed {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(74, 222, 128, 0.08)) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
  cursor: default;
  animation: confirmedGlow 2.4s ease-in-out infinite;
}
.clink-cta-confirmed .clink-glass-left,
.clink-cta-confirmed .clink-glass-right {
  animation: none !important;
}
.clink-cta-confirmed .clink-glass-left  { transform: rotate(-8deg); }
.clink-cta-confirmed .clink-glass-right { transform: rotate(8deg); }
.clink-cta-confirmed .clink-bowl { border-top-color: #ffd166; }
.clink-cta-confirmed .clink-stem,
.clink-cta-confirmed .clink-base { background: #ffd166; }
@keyframes confirmedGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
  50%      { box-shadow: 0 0 32px rgba(212, 175, 55, 0.35); }
}

/* ═══════════════════════════════════════════════════════════
   CHAMPAGNE POP — fullscreen overlay on mutual confirmation
   ═══════════════════════════════════════════════════════════ */
.champagne-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at center, rgba(20, 8, 30, 0.92), rgba(0, 0, 0, 0.96));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: champOverlayIn 0.4s ease-out;
  cursor: pointer;
  overflow: hidden;
}
.champagne-overlay-out {
  animation: champOverlayOut 0.4s ease-in forwards;
}
@keyframes champOverlayIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes champOverlayOut { from { opacity: 1; } to { opacity: 0; } }

.champagne-burst {
  position: relative;
  width: 100%;
  max-width: 360px;
  text-align: center;
  padding: 0 var(--space-4);
}

/* CSS-drawn champagne bottle that shakes then launches its cork */
.champagne-bottle {
  position: relative;
  width: 60px;
  height: 140px;
  margin: 0 auto var(--space-3);
  animation: bottleShake 0.5s ease-in-out 2;
}
.champagne-bottle-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 100px;
  background: linear-gradient(180deg, #1a3322 0%, #0f1f15 100%);
  border-radius: 6px 6px 4px 4px;
  box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.champagne-bottle-body::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 8px;
  right: 8px;
  height: 28px;
  background: linear-gradient(135deg, #d4af37 0%, #a8862c 100%);
  border-radius: 2px;
}
.champagne-bottle-neck {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  background: linear-gradient(180deg, #1a3322 0%, #0f1f15 100%);
  border-radius: 4px 4px 0 0;
}
.champagne-bottle-cork {
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 14px;
  background: linear-gradient(180deg, #c89968 0%, #8d6a3f 100%);
  border-radius: 3px 3px 1px 1px;
  animation: corkVanish 0.1s ease-in 0.6s forwards;
}

/* The cork that launches at the top */
.champagne-cork-flying {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 14px;
  background: linear-gradient(180deg, #c89968 0%, #8d6a3f 100%);
  border-radius: 3px 3px 1px 1px;
  transform: translate(-50%, -100px) scale(0);
  opacity: 0;
  animation: corkLaunch 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

@keyframes bottleShake {
  0%, 100% { transform: translateX(0)    rotate(0); }
  20%      { transform: translateX(-3px) rotate(-2deg); }
  40%      { transform: translateX(3px)  rotate(2deg); }
  60%      { transform: translateX(-2px) rotate(-1deg); }
  80%      { transform: translateX(2px)  rotate(1deg); }
}
@keyframes corkVanish {
  to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}
@keyframes corkLaunch {
  0%   { transform: translate(-50%, 0)     scale(0)   rotate(0);    opacity: 0; }
  10%  { transform: translate(-50%, -40px)  scale(1)  rotate(45deg);  opacity: 1; }
  60%  { transform: translate(-50%, -260px) scale(1)  rotate(360deg); opacity: 1; }
  100% { transform: translate(-50%, -320px) scale(0.6) rotate(720deg); opacity: 0; }
}

.champagne-confetti {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  border-radius: 1px;
  animation: confettiFall 2s ease-in 0.6s forwards;
  opacity: 0;
  transform: translateY(-20px) rotate(0);
  --rot: 0deg;
}
@keyframes confettiFall {
  0%   { opacity: 0; transform: translateY(-20px) rotate(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(110vh) rotate(var(--rot)); }
}

.champagne-headline {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: #fff;
  margin-top: var(--space-3);
  text-shadow: 0 0 24px rgba(212, 175, 55, 0.6), 0 0 48px rgba(230, 57, 70, 0.3);
  animation: headlineRise 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s both;
  letter-spacing: -0.01em;
}
.champagne-sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-gold-pale);
  margin-top: var(--space-2);
  animation: headlineRise 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both;
}
@keyframes headlineRise {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Reduced-motion users — keep the celebration but kill the violence */
@media (prefers-reduced-motion: reduce) {
  .clink-cta-firing .clink-glass-left,
  .clink-cta-firing .clink-glass-right,
  .champagne-bottle,
  .champagne-cork-flying,
  .champagne-confetti,
  .clink-cta:not(:disabled):not(.clink-cta-firing) .clink-glass-left,
  .clink-cta:not(:disabled):not(.clink-cta-firing) .clink-glass-right {
    animation: none !important;
  }
  .champagne-confetti { display: none; }
}

/* ═══════════════════════════════════════════
   RETURNING VISITOR — welcome-back, outcome prompt, archive
   ═══════════════════════════════════════════ */

/* Welcome-back card on home */
.welcome-back-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(147, 51, 234, 0.08));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  animation: welcomeBackIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes welcomeBackIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.welcome-back-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.18);
}
.welcome-back-eye {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 8%, #d4af37 9% 22%, transparent 23%),
              radial-gradient(ellipse 60% 28% at 50% 50%, #1a1208 0 100%),
              radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.4) 0 100%);
  position: relative;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.3), inset 0 0 8px rgba(0, 0, 0, 0.5);
  animation: eyeBlink 5s ease-in-out infinite;
}
@keyframes eyeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 98% { transform: scaleY(0.1); }
}
.welcome-back-body { flex: 1; min-width: 0; }
.welcome-back-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-gold-pale);
  letter-spacing: 0.005em;
  font-style: italic;
  margin-bottom: 2px;
}
.welcome-back-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.welcome-back-arrow {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--color-gold);
  opacity: 0.6;
}

/* "Did Sapphire predict it?" outcome prompt */
.outcome-prompt {
  margin: var(--space-3) var(--space-4);
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.12), rgba(212, 175, 55, 0.06));
  border: 1px solid rgba(147, 51, 234, 0.35);
  border-radius: var(--radius-lg);
  text-align: center;
  animation: welcomeBackIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.outcome-prompt-quote {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-text-soft);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}
.outcome-prompt-question {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-pale);
  margin-bottom: var(--space-3);
}
.outcome-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-2);
}
.outcome-btn {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s;
}
.outcome-btn:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
.outcome-btn:active { transform: scale(0.97); }
.outcome-btn-yes  { border-color: rgba(212, 175, 55, 0.4); color: #ffd166; }
.outcome-btn-yes:hover  { background: rgba(212, 175, 55, 0.12); border-color: var(--color-gold); }
.outcome-btn-sort { border-color: rgba(147, 51, 234, 0.4); color: #c89cff; }
.outcome-btn-sort:hover { background: rgba(147, 51, 234, 0.12); }
.outcome-btn-no   { border-color: rgba(230, 57, 70, 0.4); color: #ff8f9a; }
.outcome-btn-no:hover { background: rgba(230, 57, 70, 0.12); }
.outcome-prompt-skip {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  cursor: pointer;
  opacity: 0.7;
}
.outcome-prompt-skip:hover { opacity: 1; }
.outcome-thanks {
  padding: var(--space-3);
  text-align: center;
  animation: outcomeFadeIn 0.4s ease;
}
@keyframes outcomeFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.outcome-thanks-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-gold-pale);
  font-style: italic;
  margin-bottom: 4px;
}
.outcome-thanks-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* My Readings (personal archive) screen */
.my-readings-hero {
  padding: 56px var(--space-4) var(--space-3);
  text-align: center;
}
.my-readings-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-gold-pale);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.my-readings-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 36ch;
  margin: 0 auto;
}
.my-readings-list {
  padding: var(--space-3) var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.my-readings-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}
.my-readings-empty-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-gold-pale);
  font-style: italic;
  margin-bottom: 6px;
}
.my-readings-empty-sub { font-size: var(--text-sm); }
.my-readings-loading,
.my-readings-error {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  font-style: italic;
  color: var(--color-text-muted);
}

.reading-card-archive {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s;
}
.reading-card-archive:hover {
  border-color: rgba(212, 175, 55, 0.35);
  transform: translateY(-1px);
}
.reading-card-archive-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.reading-card-archive-type {
  color: var(--color-gold);
  font-weight: 700;
}
.reading-card-archive-num,
.reading-card-archive-ago,
.reading-card-archive-loc {
  opacity: 0.85;
}
.reading-card-archive-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-text-soft);
  font-variant-caps: normal;
  text-transform: none;
  letter-spacing: 0.005em;
}
.reading-card-archive-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.reading-outcome-cta {
  background: none;
  border: 1px dashed rgba(212, 175, 55, 0.35);
  color: var(--color-gold-pale);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.reading-outcome-cta:hover {
  border-style: solid;
  background: rgba(212, 175, 55, 0.08);
}
.reading-outcome {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 700;
}
.reading-outcome-yes  { background: rgba(212, 175, 55, 0.15); color: #ffd166; border: 1px solid rgba(212, 175, 55, 0.4); }
.reading-outcome-sort_of { background: rgba(147, 51, 234, 0.15); color: #c89cff; border: 1px solid rgba(147, 51, 234, 0.4); }
.reading-outcome-no   { background: rgba(230, 57, 70, 0.12); color: #ff8f9a; border: 1px solid rgba(230, 57, 70, 0.3); }

/* My Readings screen needs the standard back-button room */
#screenMyReadings {
  padding-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════
   SINGLES HERO CTA — the headline at brewsbros venues
   ═══════════════════════════════════════════════════════ */
.singles-hero-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: calc(100% - var(--space-8));
  margin: var(--space-3) var(--space-4) var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(230, 57, 70, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(212, 175, 55, 0.10) 0%, rgba(230, 57, 70, 0.14) 100%);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.3s, border-color 0.3s;
  box-shadow:
    0 0 0 rgba(230, 57, 70, 0),
    0 6px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: singlesHeroPulse 2.6s ease-in-out infinite;
}
@keyframes singlesHeroPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(230, 57, 70, 0), 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  50%      { box-shadow: 0 0 36px rgba(230, 57, 70, 0.35), 0 8px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}
.singles-hero-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.7);
}
.singles-hero-cta:active { transform: scale(0.99); }

/* Faint shimmer that sweeps across when idle */
.singles-hero-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: heroShimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroShimmer {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}

.singles-hero-livebar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffb4bc;
  position: relative;
  z-index: 2;
}
.singles-hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5566;
  box-shadow: 0 0 12px #ff5566;
  animation: liveDotPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.singles-hero-headline {
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
  text-shadow: 0 0 24px rgba(230, 57, 70, 0.25);
  position: relative;
  z-index: 2;
}
.singles-hero-sub {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-soft);
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 2;
}
.singles-hero-action {
  align-self: flex-start;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--color-spicy), var(--color-gold));
  color: #1a1208;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);
  position: relative;
  z-index: 2;
  transition: transform 0.15s;
}
.singles-hero-cta:hover .singles-hero-action { transform: translateX(2px); }

/* Demote the Quick Fortune button on home so Singles wins the eye */
.singles-hero-cta + .quick-fortune-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--color-gold-pale);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  padding: 12px 18px;
  text-transform: uppercase;
}
.singles-hero-cta + .quick-fortune-btn:hover {
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.06);
}

/* ═══════════════════════════════════════════════════════
   VISUAL POLISH v17 — depth, materials, atmosphere, craft
   Goal: stop looking like a toy. Start looking like a film.
   ═══════════════════════════════════════════════════════ */

/* ── Atmospheric vignette + fog over the entire app ── */
.app::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Top fog — heavy at top, fades down */
    linear-gradient(180deg, rgba(6, 6, 12, 0.85) 0%, rgba(6, 6, 12, 0) 22%),
    /* Bottom fog — heavy at bottom, fades up */
    linear-gradient(0deg,   rgba(6, 6, 12, 0.92) 0%, rgba(6, 6, 12, 0) 28%),
    /* Radial vignette — corners darker, center clear */
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(6, 6, 12, 0) 30%, rgba(6, 6, 12, 0.55) 100%),
    /* Subtle warm haze around mid-screen — like a stage spot */
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(212, 175, 55, 0.04) 0%, transparent 70%);
}
body.spicy-mode .app::before {
  background:
    linear-gradient(180deg, rgba(10, 4, 6, 0.85) 0%, rgba(10, 4, 6, 0) 22%),
    linear-gradient(0deg,   rgba(10, 4, 6, 0.92) 0%, rgba(10, 4, 6, 0) 28%),
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(10, 4, 6, 0) 30%, rgba(10, 4, 6, 0.6) 100%),
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(230, 57, 70, 0.05) 0%, transparent 70%);
}
/* Fog and grain are position:fixed pseudo-elements — they form their own stacking context.
   No need to override children positioning. */

/* ── Type hierarchy now that Fraunces is the display face ── */
.reading-card-title,
.reading-card-title-featured {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.reading-card-featured .reading-card-title-featured {
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.welcome-back-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.singles-hero-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.015em;
}
.outcome-prompt-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* ── CARDS: real material — layered shadow, inner highlight, edge ── */
.reading-card {
  background:
    /* Soft inner glow at top — looks like light catching */
    radial-gradient(ellipse 80% 100% at 50% -20%, rgba(212, 175, 55, 0.06), transparent 60%),
    linear-gradient(155deg, rgba(20, 18, 36, 0.92) 0%, rgba(10, 9, 20, 0.95) 60%, rgba(8, 7, 16, 0.97) 100%);
  border: 1px solid rgba(212, 175, 55, 0.18);
  box-shadow:
    /* Tight bottom shadow — sits on the surface */
    0 1px 0 rgba(0, 0, 0, 0.5),
    /* Soft floor shadow */
    0 6px 18px rgba(0, 0, 0, 0.45),
    /* Inner highlight at top */
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    /* Inner shadow at bottom — gives depth */
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}
.reading-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 18px 38px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(212, 175, 55, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.reading-card-featured {
  background:
    radial-gradient(ellipse 100% 100% at 50% -10%, rgba(240, 208, 96, 0.08), transparent 55%),
    linear-gradient(155deg, #14110a 0%, #1c1708 50%, #100c06 100%) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 10px 28px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(212, 175, 55, 0.08),
    inset 0 1px 0 rgba(255, 220, 130, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
}
/* Kill the animated gold ::before halo entirely — it was painting over the card body.
   The card now relies on its border + shadow alone for definition. */
.reading-card-featured::before {
  display: none !important;
}
.reading-card-featured .reading-card-desc {
  color: #d8cda5;
}
.reading-card-featured .reading-card-pill,
.reading-card-featured .live-indicator,
.reading-card-featured [class*="online"] {
  color: #ffd86b;
}

/* Welcome-back card — same depth language */
.welcome-back-card {
  background:
    radial-gradient(ellipse 100% 80% at 50% -10%, rgba(212, 175, 55, 0.16), transparent 60%),
    linear-gradient(155deg, rgba(24, 20, 38, 0.94), rgba(14, 10, 24, 0.96));
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 8px 22px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.welcome-back-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 14px 32px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* Singles hero — bigger material presence, less "sticker" */
.singles-hero-cta {
  background:
    /* Spotlight from above */
    radial-gradient(ellipse 130% 90% at 50% -10%, rgba(230, 57, 70, 0.28), transparent 55%),
    /* Warm body */
    linear-gradient(155deg, rgba(60, 18, 28, 0.92) 0%, rgba(40, 12, 18, 0.96) 55%, rgba(24, 8, 12, 0.98) 100%);
  border: 1px solid rgba(255, 180, 110, 0.4);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 14px 38px rgba(0, 0, 0, 0.55),
    0 0 0 rgba(230, 57, 70, 0),
    inset 0 1px 0 rgba(255, 220, 200, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
@keyframes singlesHeroPulse {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.55),
      0 14px 38px rgba(0, 0, 0, 0.55),
      0 0 0 rgba(230, 57, 70, 0),
      inset 0 1px 0 rgba(255, 220, 200, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.55),
      0 16px 44px rgba(0, 0, 0, 0.6),
      0 0 48px rgba(230, 57, 70, 0.4),
      inset 0 1px 0 rgba(255, 220, 200, 0.20),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  }
}

/* ── LUCKY NUMBER TOKENS — minted gold coins, not flat circles ── */
.lucky-number {
  width: 42px;
  height: 42px;
  background:
    /* Inner circle ridge */
    radial-gradient(circle at 50% 35%, rgba(255, 240, 180, 0.55) 0%, rgba(255, 240, 180, 0) 35%),
    /* Body — brushed gold gradient */
    linear-gradient(155deg, #f0d060 0%, #d4af37 35%, #9a7b1a 70%, #c9a227 100%);
  border: 1px solid #d4af37;
  color: #2a1a04;
  text-shadow: 0 1px 0 rgba(255, 230, 160, 0.6);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  box-shadow:
    /* Engraved rim */
    inset 0 0 0 1px rgba(255, 240, 180, 0.35),
    inset 0 1px 1px rgba(255, 255, 220, 0.5),
    inset 0 -2px 3px rgba(80, 50, 0, 0.5),
    /* Drop shadow on the surface */
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(212, 175, 55, 0.25);
  transform: rotate(-2deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.lucky-number:nth-child(even) { transform: rotate(2deg); }
.lucky-number:hover { transform: rotate(0) translateY(-2px) scale(1.06); }
.fortune-lucky-numbers .lucky-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-gold-pale);
  text-transform: none;
  margin-right: var(--space-2);
}

/* ── BACK BUTTON — crafted, chevron, glow lift ── */
.back-btn {
  width: 40px;
  height: 40px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(155deg, rgba(20, 16, 36, 0.85), rgba(10, 8, 20, 0.85));
  border: 1px solid rgba(212, 175, 55, 0.22);
  color: var(--color-gold-pale);
  font-size: 0;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.back-btn::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(2px) rotate(45deg);
  border-radius: 1px;
  transition: transform 0.25s var(--ease-out);
}
.back-btn:hover {
  border-color: rgba(212, 175, 55, 0.55);
  color: var(--color-gold-light);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 6px 22px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.back-btn:hover::before { transform: translateX(0) rotate(45deg); }
.back-btn:active::before { transform: translateX(-1px) rotate(45deg); }
/* Hide any old text label inside back button cleanly */
.back-btn > * { display: none !important; }

/* ── "TAP FOR A FORTUNE" — handwritten ink, character ── */
.quick-fortune-btn {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 12px 26px 13px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  background:
    radial-gradient(ellipse 100% 80% at 50% -20%, rgba(212, 175, 55, 0.10), transparent 60%),
    linear-gradient(155deg, rgba(22, 18, 38, 0.85), rgba(12, 9, 24, 0.9));
  color: var(--color-gold-pale);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.quick-fortune-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(240, 208, 96, 0.10) 50%, transparent 65%);
  transform: translateX(-100%);
  pointer-events: none;
  animation: tapShimmer 4s ease-in-out infinite;
}
@keyframes tapShimmer {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}
.quick-fortune-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.6);
  color: var(--color-gold-light);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(212, 175, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── MODE TOGGLE — cinematic dual-state, less iOS-pill ── */
.mode-toggle-wrap {
  gap: var(--space-4);
  padding: 8px 14px 8px 16px;
  background: rgba(8, 8, 16, 0.65);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mode-toggle-wrap.adult-active {
  border-color: rgba(230, 57, 70, 0.5);
  background: rgba(20, 6, 10, 0.7);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 4px 18px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(230, 57, 70, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mode-label,
.mode-label-spicy {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
.mode-label { color: var(--color-text-muted); }
.adult-active .mode-label { color: var(--color-text-faint); }
.adult-active .mode-label-spicy {
  color: #ff8a93;
  font-weight: 500;
  text-shadow: 0 0 12px rgba(230, 57, 70, 0.4);
}
.toggle-track {
  width: 44px;
  height: 24px;
  background:
    radial-gradient(ellipse 50% 100% at 50% 100%, rgba(0,0,0,0.4), transparent 70%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.toggle-track.on {
  background:
    radial-gradient(ellipse 50% 100% at 50% 100%, rgba(0,0,0,0.4), transparent 70%),
    linear-gradient(135deg, #c5283a, #e63946 50%, #ff5566);
  border-color: rgba(230, 57, 70, 0.6);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 14px rgba(230, 57, 70, 0.4);
}
.toggle-thumb {
  width: 18px;
  height: 18px;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0%, #f0e8d8 60%, #d8c89a 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.15);
}
.toggle-track.on .toggle-thumb { transform: translateX(20px); }

/* ── Subtle grain overlay on the whole app — film texture ── */
.app::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Default-scan / unsupported-venue teaser — same visual language as the
   hero, but passive. No CTA, no pulse, cooler palette. Informs rather than
   invites, because there's nothing clickable yet. ── */
.singles-default-teaser {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: var(--space-6) auto var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-5);
  text-align: left;
  border-radius: 18px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background:
    radial-gradient(ellipse 110% 80% at 50% -10%, rgba(120, 140, 200, 0.08), transparent 60%),
    linear-gradient(155deg, rgba(18, 16, 32, 0.92) 0%, rgba(10, 9, 22, 0.95) 60%, rgba(8, 7, 18, 0.97) 100%);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 8px 22px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.singles-default-teaser .singles-hero-livebar {
  margin-bottom: var(--space-2);
  opacity: 0.85;
}
.singles-default-teaser .singles-hero-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-gold-pale);
  margin-bottom: var(--space-2);
}
.singles-default-teaser .singles-hero-sub {
  font-family: var(--font-body, var(--font-display));
  font-size: 0.95rem;
  line-height: 1.5;
  color: #b8b4c8;
  margin: 0;
}
.singles-hero-live-dot--muted {
  background: rgba(200, 200, 220, 0.35) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ── v25 hero brand framing ──
   The wordmark + venue line + product-truth subtitle below the cabinet.
   Goal: feels intentional and premium on mobile — not generic. */
.logo-venue-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--color-gold-pale);
  text-align: center;
  margin: 0.25rem 0 0.4rem;
  opacity: 0.85;
  text-transform: none;
}
.logo-venue-line[hidden] { display: none; }
body.spicy-mode .logo-venue-line {
  color: #ffb4be;
  text-shadow: 0 0 14px rgba(230, 57, 70, 0.35);
}

/* ── v25 spicy-mode atmospheric layer.
   Goes beyond the existing accent-color swap — warmer light bath, hero
   vignette glow, slightly heavier fog. "Almost NSFW, still classy." ── */
body.spicy-mode .oracle-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(230, 57, 70, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 0%,  rgba(180, 30, 50, 0.18), transparent 70%);
  mix-blend-mode: screen;
  z-index: 2;
}
body.spicy-mode .logo-title {
  text-shadow:
    0 0 12px rgba(230, 57, 70, 0.4),
    0 0 30px rgba(230, 57, 70, 0.2);
}
body.spicy-mode .logo-subtitle {
  color: #ffc8cd;
  letter-spacing: 0.06em;
}
/* Stronger overall fog tint when spicy is on */
body.spicy-mode .app::before {
  background:
    linear-gradient(180deg, rgba(14, 4, 8, 0.88) 0%, rgba(14, 4, 8, 0) 22%),
    linear-gradient(0deg,   rgba(14, 4, 8, 0.94) 0%, rgba(14, 4, 8, 0) 28%),
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(14, 4, 8, 0) 30%, rgba(14, 4, 8, 0.62) 100%),
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(230, 57, 70, 0.07) 0%, transparent 70%);
}

/* ── v26 inclusive preference chips ──
   Used in the Singles check-in sheet for "Open to meeting" and "I am."
   Smaller and lower-key than the vibe options because they're optional. */
.singles-pref-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.singles-pref-btn {
  flex: 0 1 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(20, 16, 36, 0.55);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.singles-pref-btn:hover {
  border-color: rgba(212, 175, 55, 0.42);
  color: var(--color-gold-pale);
}
.singles-pref-btn.active {
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(212, 175, 55, 0.14);
  color: var(--color-gold-light);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.spicy-mode .singles-pref-btn.active {
  border-color: rgba(230, 57, 70, 0.7);
  background: rgba(230, 57, 70, 0.14);
  color: #ffc8cd;
  box-shadow: 0 0 16px rgba(230, 57, 70, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.singles-form-label-aside {
  font-size: 0.78em;
  color: var(--color-text-faint);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* ── v26 "Leaving this bar" confirm sheet ──
   Mirrors the existing check-in bottom-sheet pattern. */
.singles-leave-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 90;
}
.singles-leave-backdrop.is-open { opacity: 1; pointer-events: auto; }
.singles-leave-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 420px;
  padding: 16px 20px 28px;
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(212, 175, 55, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(18, 14, 28, 0.98), rgba(8, 6, 16, 0.98));
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 91;
}
.singles-leave-sheet.is-open { transform: translate(-50%, 0); }
.singles-leave-confirm {
  background: linear-gradient(155deg, rgba(40, 12, 18, 0.95), rgba(60, 18, 28, 0.95)) !important;
  border-color: rgba(255, 180, 110, 0.5) !important;
  color: #ffe7d2 !important;
}
.singles-leave-confirm:hover {
  border-color: rgba(255, 180, 110, 0.85) !important;
}

/* ── v27 Room chat: tabs, feed, composer, mod sheet, report picker ──
   The Room is venue-wide, presence-gated chat. Visual system mirrors
   the v17+ Sapphire surface — gold accents on velvet, soft glow,
   never neon. Spicy-mode shifts the highlight to romantic red. */

/* Tab toggle (Who's Here / The Room) */
.singles-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: 18px auto 14px;
  max-width: 360px;
  background: rgba(20, 16, 36, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.singles-tab {
  flex: 1;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.singles-tab:hover { color: var(--color-gold-pale); }
.singles-tab.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06));
  color: var(--color-gold-light);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.spicy-mode .singles-tab.active {
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.18), rgba(230, 57, 70, 0.06));
  color: #ffc8cd;
  box-shadow: 0 0 14px rgba(230, 57, 70, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.singles-tab-pane { display: none; }
.singles-tab-pane.is-active { display: block; animation: fadeInPane 0.25s ease both; }
@keyframes fadeInPane { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Room chat container */
.room-chat {
  position: relative;
  min-height: 220px;
  max-height: 52vh;
  padding: 14px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212, 175, 55, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(18, 14, 30, 0.7), rgba(10, 8, 18, 0.85));
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.room-chat-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 48vh;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}
.room-chat-feed::-webkit-scrollbar { width: 6px; }
.room-chat-feed::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.25); border-radius: 999px; }

.room-chat-empty,
.room-chat-locked {
  text-align: center;
  padding: 24px 12px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
}
.room-chat-empty-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-gold-pale);
  margin: 0 0 6px;
}
.room-chat-empty-sub { margin: 0; opacity: 0.85; }
.room-chat-locked p { margin: 0; }

/* Individual room message */
.room-msg {
  position: relative;
  align-self: flex-start;
  max-width: 88%;
  padding: 9px 13px 10px;
  background: rgba(28, 22, 48, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 14px 14px 14px 4px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  animation: roomMsgIn 0.25s ease both;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.room-msg:hover { border-color: rgba(212, 175, 55, 0.3); }
.room-msg--self {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.06));
  border-color: rgba(212, 175, 55, 0.32);
  border-radius: 14px 14px 4px 14px;
  color: var(--color-gold-light);
}
body.spicy-mode .room-msg--self {
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.18), rgba(230, 57, 70, 0.06));
  border-color: rgba(230, 57, 70, 0.4);
  color: #ffd2d6;
}
.room-msg-nick {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-gold);
  margin: 0 0 2px;
  opacity: 0.9;
}
.room-msg--self .room-msg-nick { color: var(--color-gold-light); opacity: 1; }
.room-msg-body {
  display: block;
  margin: 0;
  white-space: pre-wrap;
}
@keyframes roomMsgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Composer */
.room-composer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: stretch;
}
.room-composer input[type="text"] {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(20, 16, 36, 0.7);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.room-composer input[type="text"]:focus {
  outline: none;
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.room-composer input[type="text"]::placeholder { color: var(--color-text-faint); }
.room-composer input[type="text"]:disabled { opacity: 0.55; cursor: not-allowed; }
.room-composer-send {
  flex-shrink: 0;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08));
  color: var(--color-gold-light);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}
.room-composer-send:hover { border-color: rgba(212, 175, 55, 0.7); transform: translateY(-1px); }
.room-composer-send:active { transform: translateY(0); }
.room-composer-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
body.spicy-mode .room-composer-send {
  border-color: rgba(230, 57, 70, 0.5);
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.22), rgba(230, 57, 70, 0.08));
  color: #ffd2d6;
}

/* Helper / toast strip */
.room-chat-rules {
  margin: 10px 4px 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-faint);
  text-align: center;
  opacity: 0.85;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.room-chat-rules.is-toast {
  color: var(--color-gold-pale);
  opacity: 1;
}
body.spicy-mode .room-chat-rules.is-toast { color: #ffc8cd; }

/* ── v27 Mod / Report bottom sheets ──
   Mirrors .singles-sheet visually but lives at higher z-index so it can
   open over the check-in sheet if needed. */
.singles-mod-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 4, 16, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 110;
}
.singles-mod-backdrop.active { opacity: 1; pointer-events: auto; }
.singles-mod-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5) var(--space-6);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border-top: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 111;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55);
  max-height: 85vh;
  overflow-y: auto;
}
.singles-mod-sheet.active { transform: translateY(0); }
.singles-mod-action {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: rgba(20, 16, 36, 0.7);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.singles-mod-action:hover {
  background: rgba(28, 22, 48, 0.85);
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-1px);
}
.singles-mod-action:active { transform: translateY(0); }
#singlesModReportBtn {
  border-color: rgba(255, 180, 110, 0.4);
  color: #ffe7d2;
}
#singlesModReportBtn:hover {
  border-color: rgba(255, 180, 110, 0.7);
  background: rgba(60, 26, 18, 0.6);
}
.report-reason-options { margin: 6px 0 12px; justify-content: center; }
.report-reason-options .singles-pref-btn { font-size: 0.84rem; }
#reportNotes {
  resize: vertical;
  min-height: 64px;
  font-family: var(--font-body);
}

/* ── v28 Sign-in hero + Account card (Session D) ──
   Lives at the top of the My Readings screen. Anonymous visitors see the
   hero; signed-in users see the account-card. Visual system mirrors v17+
   Sapphire surface — gold-on-velvet, soft glow, never neon. */

.signin-hero {
  position: relative;
  margin: 14px 0 22px;
  padding: 22px 22px 18px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212, 175, 55, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(28, 22, 48, 0.85), rgba(14, 10, 22, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 22px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-align: center;
  overflow: hidden;
}
.signin-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
}
.signin-hero-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.85;
  margin-bottom: 6px;
}
.signin-hero-title {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--color-gold-light);
  margin: 0 0 10px;
  line-height: 1.25;
  letter-spacing: 0.005em;
}
.signin-hero-sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 auto 16px;
  max-width: 360px;
}
.signin-hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  max-width: 320px;
  margin: 0 auto;
}
.signin-hero-buttons .auth-btn {
  width: 100%;
}
.signin-hero-fineprint {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--color-text-faint);
  opacity: 0.85;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
body.spicy-mode .signin-hero {
  border-color: rgba(230, 57, 70, 0.32);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(230, 57, 70, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(40, 18, 28, 0.85), rgba(14, 10, 22, 0.95));
}
body.spicy-mode .signin-hero-eyebrow,
body.spicy-mode .signin-hero-title { color: #ffd2d6; }

/* Account card (signed-in state) */
.account-card {
  margin: 14px 0 22px;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, rgba(28, 22, 48, 0.85), rgba(14, 10, 22, 0.92));
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.account-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.account-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.18);
  flex-shrink: 0;
}
.account-card-id { min-width: 0; flex: 1; }
.account-card-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-gold-light);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-card-email {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 14px;
}
.account-card-stat {
  text-align: center;
  padding: 12px 8px;
  background: rgba(20, 16, 36, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 12px;
}
.account-card-stat-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-gold);
  line-height: 1.1;
}
.account-card-stat-label {
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--color-text-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}
.account-card-signout {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  opacity: 0.85;
}
.account-card-signout:hover { opacity: 1; color: var(--color-gold-pale); }

/* v28 Post-match sign-in nudge sheet (one-time, dismissible) */
.signin-postmatch-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 4, 16, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 120;
}
.signin-postmatch-backdrop.active { opacity: 1; pointer-events: auto; }
.signin-postmatch-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 22px 28px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212, 175, 55, 0.10), transparent 70%),
    linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 121;
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.signin-postmatch-sheet.active { transform: translateY(0); }
.signin-postmatch-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-gold-light);
  margin: 6px 0 8px;
  letter-spacing: 0.01em;
}
.signin-postmatch-sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 auto 18px;
  max-width: 360px;
}
.signin-postmatch-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  max-width: 320px;
  margin: 0 auto;
}
.signin-postmatch-buttons .auth-btn { width: 100%; }
.signin-postmatch-buttons .btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--color-text-muted);
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.signin-postmatch-buttons .btn-ghost:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ── v29 Trust anchors (the "is this sketchy?" fix) ──
   Three small chips and a venue-affiliation line that answer the 3-second
   trust question for a stranger who just scanned a QR. The chips appear
   under the SAPPHIRE wordmark; the affiliation line appears only on real
   venue scans. Both are styled to feel like Sapphire's voice (gold-on-velvet,
   slightly luminous, never neon) without competing with the hero. */

.trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin: 10px auto 0;
  max-width: 380px;
  padding: 0 8px;
}
.trust-chip {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-gold-pale);
  padding: 4px 10px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 999px;
  background: rgba(20, 16, 36, 0.55);
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}
.trust-chip:hover { opacity: 1; }
body.spicy-mode .trust-chip {
  color: #ffd2d6;
  border-color: rgba(230, 57, 70, 0.32);
}

.venue-affiliation {
  margin: 12px auto 0;
  max-width: 340px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  opacity: 0.85;
  line-height: 1.5;
}
body.spicy-mode .venue-affiliation { color: rgba(255, 210, 214, 0.85); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .quick-fortune-btn::before,
  .singles-hero-cta::after,
  .lucky-number { animation: none !important; }
  .singles-tab-pane.is-active,
  .room-msg { animation: none !important; }
  .singles-mod-sheet,
  .signin-postmatch-sheet { transition: none !important; }
}

/* =====================================================
   v31 MODERNIZATION PASS — May 2026
   Goal: kill the "early-internet" feel a first-time visitor
   reported. Three lanes:
     1) Real desktop layout (two-column hero ≥1024px)
     2) Typography reset (sans for UI, serif only for soul)
     3) Hierarchy + spine fix (top bar, primary CTA, calmer chrome)
   All changes are additive overrides at the bottom of the file
   so the v30 baseline stays intact as a fallback. No HTML
   structure required — selectors target existing IDs/classes.
   ===================================================== */

/* ── 31.0 Kill the blinking text cursor on the typewriter tagline.
   That little 1998 "|" was sabotaging the whole vibe. JS still writes
   to a sibling text node; we just stop showing the cursor span. ── */
.oracle-speaks-text .cursor { display: none !important; }

/* ── 31.1 Site-wide chrome spine — a slim, modern top bar.
   We don't have a header element in the HTML, so we draw it with a
   fixed pseudo-bar on body::before. Position is content-shift-safe
   because the .app already has top padding ≥ 16px on mobile and 32px+
   on desktop. The bar reads "Sapphire · venue" and is the only place
   that uses the Cinzel wordmark at chrome scale. ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: linear-gradient(180deg, rgba(8, 6, 16, 0.92), rgba(8, 6, 16, 0.0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
  pointer-events: none;
  z-index: 50;
}

/* The actual wordmark spine — sits on top of the gradient bar.
   Built from the existing .location-badge so we don't need to add HTML.
   We promote it to top-fixed and give it real left/right positioning. */
.location-badge {
  position: fixed !important;
  top: 14px !important;
  left: 16px !important;
  right: auto;
  z-index: 51;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(18, 14, 32, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-pale);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.location-badge.visible { opacity: 1; transform: translateY(0); }

/* Inject a wordmark prefix into the badge so it reads:
   "SAPPHIRE  ·  Brews Brothers Burbank". Pure CSS, no HTML change. */
.location-badge::before {
  content: 'SAPPHIRE';
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  padding-right: 8px;
  margin-right: 4px;
  border-right: 1px solid rgba(212, 175, 55, 0.28);
}

/* When no venue is set, .location-badge gets the .visible class removed
   by the existing JS — but we still want the brand spine on the default
   scan. Force-show with a default that says just "SAPPHIRE · The Oracle". */
.location-badge:not(.visible) {
  opacity: 1;
  transform: translateY(0);
}
.location-badge:not(.visible) .location-badge-name { display: none; }
.location-badge:not(.visible)::before { border-right: none; padding-right: 0; }

/* Sound toggle sits opposite the brand spine on the right side of the bar. */
.sound-toggle {
  top: 12px !important;
  right: 14px !important;
  z-index: 51;
  width: 36px !important;
  height: 36px !important;
  background: rgba(18, 14, 32, 0.78) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  backdrop-filter: blur(8px);
}

/* Account badge — also lives on the top bar, between brand and sound. */
.account-badge {
  top: 10px !important;
  right: 60px !important;
  left: auto !important;
  z-index: 51;
}

/* Add room at the top of every screen so content doesn't collide with the bar */
.app { padding-top: 64px !important; }
.screen { padding-top: 0; }

/* ── 31.2 Typography reset — sans for UI, serif only for soul.
   Every chip, button, body sentence, caption, and form label
   moves to Inter. We preserve the Cinzel wordmark, Fraunces for
   the fortune itself, and italic Fraunces for Sapphire's own
   spoken lines. That's it. ── */
html, body {
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Trust chips: sans, lighter weight, less shouty */
.trust-chip {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  color: var(--color-text-muted) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  opacity: 0.85 !important;
}

/* Logo subtitle — kill the all-caps tracked-out serif kerning */
.logo-subtitle {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-text-faint) !important;
  opacity: 0.7;
}

/* Wordmark — keep gold but tone down the Word-Art letter-spacing */
.logo-title {
  letter-spacing: 0.04em !important;
  text-shadow:
    0 0 24px rgba(212, 175, 55, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Venue affiliation line — quieter, smaller, sans */
.venue-affiliation {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: var(--color-text-faint) !important;
  opacity: 0.7;
  margin-top: 6px;
}

/* Sapphire's spoken line — still italic Fraunces (the soul), but smaller
   and less luminous so the eye finds the CTA below it first */
.oracle-speaks-text {
  font-size: 13px !important;
  opacity: 0.7 !important;
  line-height: 1.55 !important;
  max-width: 32ch;
  margin: 0 auto;
}

/* Section headers — sans micro-eyebrow style */
.passport-title,
.how-it-works-title,
.my-readings-title,
.venue-inquiry-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
  text-shadow: none !important;
}
.passport-subtitle, .passport-explainer,
.my-readings-sub, .venue-inquiry-desc {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--color-text-muted) !important;
  opacity: 0.78;
}

/* Reading cards — sans titles + smaller, calmer body */
.reading-card-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.reading-card-desc {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--color-text-muted) !important;
}
.reading-card-title-featured {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* How It Works steps — sans body */
.how-it-works-step {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--color-text-muted) !important;
}

/* Mode toggle labels — sans, no italic */
.mode-label, .mode-label-spicy {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Social proof bar — sans, tabular */
.social-proof-bar {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  font-variant-numeric: tabular-nums;
}

/* Singles hero CTA — keep the red gradient (it's the loudest moment
   on purpose) but switch the type to sans so it doesn't read as a
   serif headline poster */
.singles-hero-headline {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.005em !important;
}
.singles-hero-sub {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.singles-hero-action {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.singles-hero-live-text {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* Passport tile labels — sans, smaller, less library-card */
.passport-grid .passport-tile-name,
.passport-grid .passport-name,
.passport-grid .passport-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

/* Site footer — sans micro */
.site-footer {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  opacity: 0.55;
}

/* ── 31.3 Primary CTA hierarchy fix.
   Make the "Tap for a fortune" button the loudest, most obvious
   action on the venue page. It was an italic outline pill; now
   it's a real gold-gradient button that reads as the primary
   call-to-action. The singles-hero-cta still gets to be red
   (because it IS the loud moment when applicable), but fortune
   leads the hierarchy. ── */
.quick-fortune-btn {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  min-height: 54px;
  min-width: 240px;
  border-radius: 999px !important;
  border: 1px solid rgba(212, 175, 55, 0.55) !important;
  color: #1a1208 !important;
  background:
    linear-gradient(180deg, #f0d060 0%, #d4af37 55%, #b88e1c 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 10px 28px rgba(212, 175, 55, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.45) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  margin: var(--space-2) auto var(--space-4);
  display: inline-block;
  position: relative;
}
.quick-fortune-btn:hover {
  transform: translateY(-1px);
  color: #0f0a04 !important;
  background:
    linear-gradient(180deg, #f5d878 0%, #ddb73e 55%, #b88e1c 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 14px 34px rgba(212, 175, 55, 0.28),
    0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
.quick-fortune-btn:active { transform: translateY(0); }

/* The shimmer ::before sweep was nice but now reads as gold-on-gold
   noise on the solid-gold button. Tone it down to a subtle highlight. */
.quick-fortune-btn::before {
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%) !important;
  opacity: 0.6;
}

/* Onboarding CTA + age-gate primary buttons get the same treatment
   so the gold primary feels consistent everywhere. */
.btn-primary {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1a1208 !important;
}
.btn-primary:not(.singles-checkin-btn):not(.paywall-cta) {
  background:
    linear-gradient(180deg, #f0d060 0%, #d4af37 55%, #b88e1c 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.55) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── 31.4 Spacing & rhythm.
   The page felt like a list because every section sat 1rem from the next.
   Real apps have rhythm: 32-48px between unrelated blocks, 8-16px within. ── */
.reading-options { margin-top: var(--space-8) !important; }
.passport-section { margin-top: var(--space-12) !important; }
.how-it-works { margin-top: var(--space-12) !important; }
.venue-inquiry, .venue-trigger { margin-top: var(--space-10) !important; }
.singles-hero-cta { margin-top: var(--space-6) !important; }

/* Calmer ornate dividers — keep them but shrink so they're punctuation,
   not architecture */
.ornate-line {
  margin: var(--space-6) auto !important;
  opacity: 0.6;
}
.ornate-line svg { width: 14px !important; height: 14px !important; }

/* ── 31.5 Passport grid: stop showing 14 grey "locked" tiles.
   Show a max of 6 by default with a "Show all" toggle. JS doesn't
   need to change — pure CSS truncation with a fade on the 6th row. ── */
@media (max-width: 1023px) {
  .passport-grid {
    max-height: 420px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
    position: relative;
  }
  .passport-grid.expanded {
    max-height: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ── 31.6 The Big One: real desktop layout. ──
   ≥1024px: two-column hero. Left = portrait + brand spine.
   Right = scrollable action surface (fortune + chat + singles +
   passport + how-it-works). The portrait sticks while the right
   column scrolls. Below 1024px, everything stays single-column
   exactly as it was — mobile is untouched. */
@media (min-width: 1024px) {

  /* Wider canvas, real breathing room around the column */
  .app {
    max-width: 1180px !important;
    padding: 88px 56px 64px !important;
    align-items: stretch !important;
  }

  /* Bigger top bar gradient on desktop */
  body::before { height: 72px; }
  .location-badge { top: 22px !important; left: 32px !important; font-size: 12px; padding: 8px 14px 8px 12px; }
  .sound-toggle { top: 18px !important; right: 28px !important; }
  .account-badge { top: 16px !important; right: 78px !important; }

  /* CSS grid two-column on the home screen ONLY.
     Other screens (chat, fortune, singles) stay centered single-column
     because they're focused tasks, not the marketing surface. */
  #screenHome.active {
    display: grid !important;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 72px;
    row-gap: 0;
    align-items: start;
    width: 100%;
  }

  /* LEFT COLUMN — portrait + brand framing.
     Sticky so it stays visible while the right column scrolls. */
  #screenHome .oracle-cabinet,
  #screenHome .logo-section,
  #screenHome .oracle-speaks {
    grid-column: 1;
  }
  #screenHome .oracle-cabinet {
    grid-row: 1;
    width: 360px !important;
    margin: 0 auto var(--space-4) !important;
    position: sticky;
    top: 88px;
  }
  #screenHome .logo-section {
    grid-row: 2;
    text-align: center;
  }
  #screenHome .oracle-speaks {
    grid-row: 3;
    text-align: center;
  }

  /* Bigger wordmark on desktop — it has room to breathe now */
  #screenHome .logo-title { font-size: clamp(2.6rem, 4vw, 3.6rem) !important; }

  /* RIGHT COLUMN — everything else, in order, in a single scroll surface */
  #screenHome > *:not(.oracle-cabinet):not(.logo-section):not(.oracle-speaks):not(.location-badge):not(.account-badge):not(.account-panel):not(.signin-postmatch-backdrop):not(.signin-postmatch-sheet):not(footer.site-footer):not(.badge-preview-overlay) {
    grid-column: 2;
  }

  /* The right column needs a soft container so it doesn't float in space */
  #screenHome .quick-fortune-btn,
  #screenHome .quick-fortune-result,
  #screenHome .mode-toggle-wrap,
  #screenHome .social-proof-bar,
  #screenHome .fortune-activity-strip,
  #screenHome .reading-options,
  #screenHome .singles-hero-cta,
  #screenHome .singles-default-teaser,
  #screenHome .welcome-back-card,
  #screenHome .outcome-prompt,
  #screenHome .passport-section,
  #screenHome .how-it-works,
  #screenHome .venue-inquiry,
  #screenHome .venue-trigger,
  #screenHome .ornate-line {
    width: 100%;
    max-width: 560px;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Pin the primary CTA at the top of the right column with proper presence */
  #screenHome .quick-fortune-btn {
    margin-top: 8px !important;
    margin-bottom: var(--space-6) !important;
    font-size: 16px !important;
    padding: 18px 36px !important;
    min-width: 280px;
  }

  /* Reading cards: side-by-side when there's room */
  #screenHome .reading-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  #screenHome .reading-card-featured { padding: var(--space-5) var(--space-5); }

  /* Passport grid uses the desktop room — 5 columns, all tiles visible */
  @media (min-width: 1024px) {
    #screenHome .passport-grid {
      max-height: none !important;
      -webkit-mask-image: none !important;
              mask-image: none !important;
      grid-template-columns: repeat(5, 1fr) !important;
      gap: 12px !important;
    }
  }

  /* Footer spans both columns at the bottom */
  #screenHome > footer.site-footer {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  /* Cabinet on desktop — wider frame */
  .oracle-cabinet { width: 360px; }
  .cabinet-frame { padding: 10px; border-radius: 20px; }

  /* Atmospheric edge glow on the wide page so it doesn't feel abandoned */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 60% 50% at 15% 30%, rgba(107, 63, 160, 0.10), transparent 70%),
      radial-gradient(ellipse 50% 40% at 85% 65%, rgba(212, 175, 55, 0.06), transparent 70%);
    z-index: 0;
  }
}

/* ── 31.7 Ultra-wide: even more breathing room (≥1440) ── */
@media (min-width: 1440px) {
  .app { max-width: 1280px !important; padding: 96px 80px 72px !important; }
  #screenHome.active { column-gap: 96px; }
}

/* ── 31.8 Non-home screens on desktop: keep them focused and centered,
   but widen the canvas so they don't feel like a phone screenshot ── */
@media (min-width: 1024px) {
  #screenQuestion.active,
  #screenLoading.active,
  #screenResult.active,
  #screenChat.active,
  #screenSingles.active,
  #screenMatchChat.active,
  #screenMyReadings.active,
  #screenPaywall.active {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
  }
  #screenChat .chat-messages { max-height: 62vh; }
}

/* ── 31.9 Smaller fixes that show up on both breakpoints ── */

/* The "More locations coming" line under the passport — sans, smaller */
.passport-section + p,
.passport-section p[style*="text-align:center"] {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Venue inquiry trigger — looks like a quiet text link, not a button */
.venue-trigger {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-text-faint) !important;
  background: transparent !important;
  border: none !important;
  padding: var(--space-3) !important;
  opacity: 0.7;
}
.venue-trigger:hover { opacity: 1; color: var(--color-gold-pale) !important; }

/* Welcome-back card — sans, lower-key */
.welcome-back-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.welcome-back-sub {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: 12px !important;
}

/* Onboarding modal — sans body so the welcome flow is calmer */
.onboarding-feature strong {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.onboarding-feature span {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--color-text-muted) !important;
}
.onboarding-tagline {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: italic;
  font-size: 13px !important;
  opacity: 0.75;
}
.onboarding-free {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

/* Sign-in hero on My Readings — match the modern sans aesthetic */
.signin-hero-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.signin-hero-sub, .signin-hero-fineprint, .signin-hero-eyebrow {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
}

/* Post-match nudge sheet — sans */
.signin-postmatch-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.signin-postmatch-sub {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Fortune text — KEEPS Fraunces serif (this is the soul) but bumps size
   slightly so it reads as the hero content of the result screen */
.fortune-reveal,
.fortune-text,
.chat-bubble-oracle,
.share-card-fortune {
  font-family: var(--font-display) !important; /* Fraunces */
}

/* ── 31.10 Final cleanup: hide the "Tap a badge to discover it." pitch
   on the venue page (it's redundant — the explainer above already says it)
   and ditto for redundant separator stars between sections.
   Pure visual de-noise. ── */
.passport-pitch { display: none !important; }

/* ═══════════════════════════════════════════════
   v31 PATCH 1 — corrections from preview review
   ═══════════════════════════════════════════════ */

/* PATCH 1.1 — Brand spine readability.
   v1 was too low-contrast: gold-pale 11px on dark-purple read as a smudge.
   Switch to bright gold wordmark + cream venue text, increase size,
   add a real solid background and a soft drop-shadow on text. */
.location-badge,
.location-badge:not(.visible) {
  background: rgba(28, 20, 48, 0.96) !important;
  border: 1px solid rgba(212, 175, 55, 0.55) !important;
  color: #f4ead0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 14px 8px 12px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 6px 22px rgba(0, 0, 0, 0.7),
    0 0 28px rgba(212, 175, 55, 0.18) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.location-badge::before {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f5d878 !important;
  letter-spacing: 0.20em !important;
  text-shadow: 0 0 14px rgba(245, 216, 120, 0.45), 0 1px 2px rgba(0, 0, 0, 0.6);
  border-right: 1px solid rgba(212, 175, 55, 0.4) !important;
  padding-right: 10px !important;
  margin-right: 6px !important;
}
.location-badge-name {
  color: #f4ead0 !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Soft gradient bar — only there for top edge framing, NOT to fade the spine.
   The badge has its own opaque background; the bar is decorative. */
body::before {
  background: linear-gradient(180deg, rgba(8, 6, 16, 0.8) 0%, rgba(8, 6, 16, 0.2) 70%, rgba(8, 6, 16, 0) 100%) !important;
  height: 48px !important;
  z-index: 49 !important;  /* below the badge (z=51) */
}
@media (min-width: 1024px) {
  body::before { height: 64px !important; }
}

/* PATCH 1.2 — kill the all-caps tracked subtitle on the venue page.
   It's been replaced upstream by the trust chips + venue-affiliation line,
   so we don't need a second eyebrow saying "FORTUNES. LOVE READINGS."
   Hide it; it adds nothing and reads as 90s caps-locked stock. */
.logo-subtitle { display: none !important; }

/* PATCH 1.3 — Desktop sticky-portrait z-index bug.
   The sticky .oracle-cabinet was floating ABOVE the wordmark below it
   when scrolling. Lower its z-index and bump the logo-section so the
   wordmark stays on its own row visually. Also stop the cabinet from
   sticking on the home screen entirely on the new desktop layout —
   it's prettier when the whole left column flows together. */
@media (min-width: 1024px) {
  #screenHome .oracle-cabinet {
    position: static !important;  /* override the earlier sticky */
    top: auto !important;
    z-index: 1;
  }
  /* Instead of sticky portrait, sticky the WHOLE left column.
     We do this by making the left grid cell its own sub-grid. */
  #screenHome .logo-section { position: relative; z-index: 2; }
  #screenHome .oracle-speaks { position: relative; z-index: 2; }
}

/* PATCH 1.4 — Desktop right-column padding so the first element (the
   ornate-line or fortune button) doesn't sit at y=0 above where the
   portrait visually begins. Push it down to align with the cabinet's
   top edge for a cleaner two-column read. */
@media (min-width: 1024px) {
  #screenHome > .ornate-line:first-of-type {
    display: none;  /* the divider before the fortune CTA was awkward in two-col */
  }
  #screenHome .quick-fortune-btn {
    margin-top: 24px !important;  /* aligns with cabinet's top inner padding */
  }
}

/* PATCH 1.5 — Mobile: above-the-fold improvement.
   The portrait is gorgeous but too tall — first-time visitors don't see
   the fortune CTA at all without scrolling. Shrink the cabinet a touch
   on phones, and lift the fortune button just below it. */
@media (max-width: 1023px) {
  .oracle-cabinet { width: 200px !important; margin-top: 8px !important; }
  .logo-title { font-size: clamp(1.9rem, 7vw, 2.4rem) !important; margin-bottom: 4px !important; }
  .trust-chips { margin-top: 8px !important; gap: 6px !important; }
  .quick-fortune-btn {
    margin-top: 18px !important;
    margin-bottom: 22px !important;
  }
  /* Pull the oracle-speaks (italic tagline) tighter — it can be small */
  .oracle-speaks { min-height: 0 !important; margin: 6px auto 4px !important; }
}

/* PATCH 1.6 — Desktop right column needs visible content above the fold.
   The fortune button + a quiet "or talk to her" affordance + the social
   proof line should all be visible without scrolling. Tighten spacing. */
@media (min-width: 1024px) {
  #screenHome .mode-toggle-wrap { margin-top: 16px !important; margin-bottom: 0 !important; }
  #screenHome .social-proof-bar { margin-top: 10px !important; margin-bottom: 18px !important; }
  #screenHome .reading-options { margin-top: 20px !important; }
  #screenHome .ornate-line { margin: 14px auto !important; }
}

/* PATCH 1.7 — Account badge wasn't getting the new chrome treatment.
   Make it match the spine so the whole top bar feels designed. */
.account-badge {
  background: rgba(20, 14, 36, 0.92) !important;
  border: 1px solid rgba(212, 175, 55, 0.42) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 18px rgba(0, 0, 0, 0.55) !important;
}

/* PATCH 1.8 — Mobile: the brand spine left edge was sitting too close to
   the screen edge. Bring it in 4px and constrain width so it doesn't
   wrap to two lines on long venue names. */
@media (max-width: 1023px) {
  .location-badge { left: 12px !important; top: 10px !important; max-width: calc(100vw - 80px); }
  .sound-toggle { top: 10px !important; right: 10px !important; }
}

/* PATCH 1.9 — Reading-card hierarchy on desktop.
   The featured "Talk to Sapphire" card had a near-invisible gold tint;
   give it a clear secondary-card look so the eye finds it as the
   secondary action after fortune. */
@media (min-width: 1024px) {
  #screenHome .reading-card-featured {
    background:
      linear-gradient(180deg, rgba(28, 22, 50, 0.6), rgba(18, 14, 36, 0.7)) !important;
    border: 1px solid rgba(212, 175, 55, 0.22) !important;
  }
  #screenHome .reading-card-featured:hover {
    border-color: rgba(212, 175, 55, 0.45) !important;
    transform: translateY(-1px);
  }
}


/* =====================================================
   v32 \u2014 MENU INTELLIGENCE styles
   Two new "Ask Sapphire" cards on venues with a menu file.
   The fortune button gets a "demoted" variant when these are shown.
   ===================================================== */

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 18px auto 24px;
}

.menu-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  background:
    linear-gradient(180deg, rgba(28, 22, 50, 0.85) 0%, rgba(18, 14, 36, 0.92) 100%);
  color: var(--color-text);
  font-family: 'Inter', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 0 0 0 rgba(212, 175, 55, 0);
}

.menu-action-card:hover,
.menu-action-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(212, 175, 55, 0.62);
  background:
    linear-gradient(180deg, rgba(38, 28, 64, 0.92) 0%, rgba(22, 16, 42, 0.96) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 28px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(212, 175, 55, 0.18);
  outline: none;
}

.menu-action-card:active { transform: translateY(0); }

.menu-action-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 12px;
}

.menu-action-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu-action-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--color-gold-light);
  line-height: 1.2;
}

.menu-action-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.35;
  opacity: 0.88;
}

.menu-action-arrow {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--color-gold);
  opacity: 0.6;
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-action-card:hover .menu-action-arrow,
.menu-action-card:focus-visible .menu-action-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* Color the food card slightly differently so it doesn't look like
   a duplicate of the drink card */
.menu-action-card.menu-action-food .menu-action-icon {
  background: rgba(220, 140, 80, 0.10);
  border-color: rgba(220, 140, 80, 0.32);
}
.menu-action-card.menu-action-food:hover .menu-action-title,
.menu-action-card.menu-action-food:focus-visible .menu-action-title {
  color: #f2c690;
}

/* Demoted fortune button \u2014 when menu cards are present, the fortune CTA
   shrinks to a small secondary action below the main reading-options.
   Keeps fortunes discoverable without being the headline. */
.quick-fortune-btn.demoted {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  padding: 8px 16px !important;
  min-height: auto !important;
  min-width: auto !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  margin: 8px auto 16px !important;
  opacity: 0.78;
}
.quick-fortune-btn.demoted::before { display: none !important; }
.quick-fortune-btn.demoted:hover {
  opacity: 1;
  color: var(--color-gold-light) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Desktop: menu-actions live in the right column of the two-column hero */
@media (min-width: 1024px) {
  #screenHome .menu-actions {
    margin-top: 24px !important;
    margin-bottom: 20px !important;
  }
  /* On desktop, the v31 #screenHome rule force-bumps the fortune button to
     min-width: 280px and padding: 18px 36px. Override for the demoted variant. */
  #screenHome .quick-fortune-btn.demoted {
    min-width: 180px !important;
    max-width: 280px;
    padding: 8px 18px !important;
    font-size: 11px !important;
    margin-top: 16px !important;
  }
}