/* ==========================================================================
   MAYFAIR SCANDALS: THE DANBURY COURT AFFAIR
   Regency High Society Cold Case & Whodunit Stylesheet
   Theme: Pastel Silks, Antique Gilt Ormolu, Aged Parchment & Claret Wax
   ========================================================================== */

:root {
  /* --- The Signature Bridgerton & Regency Palette --- */
  /* 1. Rosa Viejo (Dusty Old Rose) - Society Roses & Romance */
  --color-rosa-viejo: #c48b9f;
  --color-rosa-viejo-bright: #d8a7b1;
  --color-rosa-viejo-tint: #f8edf1;
  --color-rosa-viejo-shade: #4a1e29;

  /* 2. Violetas / Morado (Wisteria & Royal Violet) - Lady Danbury & Mayfair Wisteria */
  --color-violeta: #8b6fa8;
  --color-violeta-bright: #a58bc2;
  --color-violeta-tint: #f2ebfa;
  --color-violeta-shade: #2d173d;

  /* 3. Crema y Marfil (Antique Cream & Pearl Vellum) - Grand Ballrooms & Broadsheets */
  --color-crema: #faf6ed;
  --color-crema-aged: #f3ebd9;
  --color-crema-shadow: #d7c59e;

  /* 4. Blanco Puro & Seda (Court Presentation White & Lace) - The Season's Diamond */
  --color-blanco: #ffffff;
  --color-blanco-seda: #f8f8fc;
  --color-blanco-perla: #f1f2f6;

  /* 5. Oro de Mayfair (Imperial Gilt Gold & Ormolu) - Aristocratic Luxury */
  --color-oro: #d4af37;
  --color-oro-brillante: #f0d57e;
  --color-oro-quemado: #a88422;
  --gold-glow: rgba(240, 213, 126, 0.4);

  /* 6. Plata Esterlina & Diamante (Sterling Silver & Platinum) - Tiaras & Evening Finery */
  --color-plata: #cbd5e1;
  --color-plata-brillante: #f1f5f9;
  --color-plata-sombra: #64748b;

  /* 7. Azul Bridgerton / Wedgwood - Signature Family Hue */
  --color-azul-bridgerton: #7998b0;
  --color-azul-wedgwood: #b4d3e5;
  --color-azul-marino: #162035;

  /* --- Legacy Compatible Color Aliases --- */
  --color-powder-blue: var(--color-azul-wedgwood);
  --color-dusty-rose: var(--color-rosa-viejo);
  --color-lilac: var(--color-violeta);
  --color-champagne: var(--color-oro-brillante);
  --gold-primary: var(--color-oro);
  --gold-burnished: var(--color-oro-brillante);
  --gold-deep: var(--color-oro-quemado);
  --gold-border: rgba(212, 175, 55, 0.45);

  /* --- Ballroom Darkness & Surfaces in Authentic Bridgerton Palette --- */
  --bg-ballroom-night: #130a1c; /* Deep Wisteria Midnight */
  --bg-ballroom-velvet: #1c1028; /* Royal Wisteria Velvet */
  --bg-card-panel: #241434; /* Deep Amethyst Chamber Card */
  --parchment-cream: var(--color-crema);
  --parchment-aged: var(--color-crema-aged);
  --parchment-shadow: var(--color-crema-shadow);
  --ink-regency: #1e1713;
  --ink-faded: #4d3e33;

  /* --- Carmine & Old Rose Wax Seal Accents --- */
  --wax-red-base: #a84b65; /* Dusty Rose / Carmine wax */
  --wax-red-bright: #d86985;
  --wax-red-shadow: #5c182a;
  --wax-gold-base: #d4af37;

  /* --- Font Stacks --- */
  --font-pinyon: 'Pinyon Script', cursive;
  --font-cinzel: 'Cinzel', serif;
  --font-playfair: 'Playfair Display', serif;
  --font-garamond: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
}

body {
  background: radial-gradient(ellipse at 50% 0%, #28143a 0%, #170c24 50%, #0d0615 100%) fixed;
  color: var(--color-crema);
  font-family: var(--font-garamond);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  selection-background-color: var(--color-oro-quemado);
  selection-color: var(--color-crema);
}

/* Atmospheric Candlelight Glow Overlay */
.candlelight-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at 50% 12%, rgba(240, 213, 126, 0.12) 0%, rgba(196, 139, 159, 0.06) 45%, transparent 75%);
  animation: candleFlicker 6s infinite alternate ease-in-out;
}

/* Bridgerton Palette Component Styles */
.regency-card {
  background: linear-gradient(165deg, #221332 0%, #180d24 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(223, 190, 118, 0.25);
  border-radius: 16px;
}

.regency-card-rose {
  background: linear-gradient(165deg, #2a152d 0%, #1c0e22 100%);
  border: 1.5px solid rgba(196, 139, 159, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(196, 139, 159, 0.15);
  border-radius: 16px;
}

.regency-card-silver {
  background: linear-gradient(165deg, #1c142b 0%, #150f22 100%);
  border: 1.5px solid rgba(203, 213, 225, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(203, 213, 225, 0.2);
  border-radius: 16px;
}

.btn-gilt-gold {
  background: linear-gradient(135deg, #d4af37 0%, #f0d57e 50%, #b8932c 100%);
  color: #130a1c !important;
  font-family: var(--font-cinzel);
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
  transition: all 0.2s ease;
}

.btn-gilt-gold:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

.btn-dusty-rose {
  background: linear-gradient(135deg, #c48b9f 0%, #9c5c74 100%);
  color: #ffffff !important;
  font-family: var(--font-cinzel);
  font-weight: 700;
  border: 1px solid rgba(240, 213, 126, 0.4);
  box-shadow: 0 4px 15px rgba(196, 139, 159, 0.35);
  transition: all 0.2s ease;
}

.btn-dusty-rose:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(196, 139, 159, 0.5);
}

.badge-dusty-rose {
  background: rgba(196, 139, 159, 0.25);
  color: #f8edf1;
  border: 1px solid rgba(196, 139, 159, 0.6);
  font-family: var(--font-cinzel);
}

.badge-royal-violet {
  background: rgba(139, 111, 168, 0.25);
  color: #f2ebfa;
  border: 1px solid rgba(139, 111, 168, 0.6);
  font-family: var(--font-cinzel);
}

.badge-gilt-gold {
  background: rgba(212, 175, 55, 0.25);
  color: #f0d57e;
  border: 1px solid rgba(212, 175, 55, 0.6);
  font-family: var(--font-cinzel);
}

.badge-sterling-silver {
  background: rgba(203, 213, 225, 0.2);
  color: #cbd5e1;
  border: 1px solid rgba(203, 213, 225, 0.5);
  font-family: var(--font-cinzel);
}

.badge-silk-white {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-family: var(--font-cinzel);
}

@keyframes candleFlicker {
  0% { opacity: 0.8; transform: scale(1); }
  33% { opacity: 0.95; transform: scale(1.01); }
  66% { opacity: 0.7; transform: scale(0.99); }
  100% { opacity: 1; transform: scale(1.02); }
}

/* Floating Gold Dust Spores */
.gold-particle {
  position: fixed;
  width: 3px;
  height: 3px;
  background: var(--gold-burnished);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.25;
  filter: drop-shadow(0 0 3px var(--gold-glow));
  animation: floatDrift 16s infinite linear;
  z-index: 2;
}

@keyframes floatDrift {
  0% { transform: translateY(105vh) translateX(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.45; }
  85% { opacity: 0.35; }
  100% { transform: translateY(-5vh) translateX(50px) rotate(360deg); opacity: 0; }
}

/* Vintage Broadsheet Parchment Styling */
.parchment-sheet {
  position: relative;
  background-color: var(--parchment-aged);
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 80%),
    radial-gradient(circle at 10% 20%, rgba(139, 90, 43, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(115, 68, 25, 0.12) 0%, transparent 60%);
  color: var(--ink-regency);
  border-radius: 4px;
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.55),
    inset 0 0 50px rgba(115, 75, 30, 0.22),
    inset 0 0 10px rgba(80, 45, 15, 0.35);
  border: 1px solid rgba(160, 120, 60, 0.35);
}

.parchment-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: inset 0 0 25px 6px rgba(92, 54, 18, 0.38);
}

/* 3D Wax Seal Stamp Component */
.wax-seal-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--wax-red-bright) 0%, var(--wax-red-base) 55%, var(--wax-red-shadow) 100%);
  border: 2px solid rgba(135, 24, 34, 0.85);
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.5),
    inset 0 3px 5px rgba(255, 255, 255, 0.35),
    inset 0 -4px 8px rgba(0, 0, 0, 0.6),
    0 0 0 4px rgba(184, 38, 53, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
  position: relative;
  user-select: none;
}

.wax-seal-btn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 
    0 12px 20px rgba(0, 0, 0, 0.6),
    inset 0 3px 5px rgba(255, 255, 255, 0.45),
    inset 0 -4px 8px rgba(0, 0, 0, 0.6),
    0 0 15px rgba(217, 165, 179, 0.4);
}

.wax-seal-btn:active {
  transform: scale(0.95) rotate(-3deg);
}

/* Carriage Arrival Banner Toast */
.carriage-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  width: calc(100% - 32px);
  max-width: 480px;
  background: var(--bg-card-panel);
  border: 1px solid var(--gold-burnished);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8), 0 0 25px var(--gold-glow);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 100;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.carriage-banner.active {
  transform: translateX(-50%) translateY(0);
}

/* Navigation Tabs */
.nav-tab-btn {
  position: relative;
  transition: all 0.25s ease;
}

.nav-tab-btn.active {
  color: var(--gold-burnished);
  background-color: rgba(200, 162, 93, 0.15);
  border-color: var(--gold-burnished);
}

.nav-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-burnished), transparent);
}

/* Typography Utility Classes */
.font-cinzel { font-family: var(--font-cinzel); }
.font-pinyon { font-family: var(--font-pinyon); }
.font-playfair { font-family: var(--font-playfair); }
.font-garamond { font-family: var(--font-garamond); }

/* Card Flip for Suspect Secret Dossiers */
.flip-card {
  perspective: 1000px;
}

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

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

.flip-card-front, .flip-card-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0e0a14;
}

::-webkit-scrollbar-thumb {
  background: #3a2a46;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-primary);
}

/* =========================================================================
   MEMORIAL PORTRAIT & MOURNING FRAME STYLES
   ========================================================================= */
.memorial-card {
  position: relative;
  background: radial-gradient(circle at 50% 30%, #201524 0%, #110c17 100%);
  border: 2px solid #524028;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(212, 175, 55, 0.15);
}

.mourning-frame {
  position: relative;
  border: 4px double #d4af37;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 6px 18px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.mourning-ribbon {
  position: absolute;
  top: 14px;
  left: -32px;
  transform: rotate(-45deg);
  background: linear-gradient(180deg, #2b232a 0%, #120f13 100%);
  color: #dfbe76;
  border-top: 1px solid #d4af37;
  border-bottom: 1px solid #d4af37;
  font-family: var(--font-cinzel);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 36px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
  z-index: 10;
  text-shadow: 0 1px 2px #000;
}

.deceased-badge {
  background: linear-gradient(90deg, #18090b, #440d17, #18090b);
  border: 1px solid #871822;
  color: #fca5a5;
  font-family: var(--font-cinzel);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* =========================================================================
   CINEMATIC PRESENTATION & CAMERA SHOT CHANGES
   ========================================================================= */
.cinematic-stage {
  position: relative;
  background: #000;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid #c5a059;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(212, 175, 55, 0.2);
}

.camera-shot-container {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  background: #08050c;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .camera-shot-container {
    height: 440px;
  }
}

@media (min-width: 1024px) {
  .camera-shot-container {
    height: 480px;
  }
}

/* Ambient Blurred Backdrop Layer */
.camera-shot-backdrop {
  position: absolute;
  inset: -15%;
  width: 130%;
  height: 130%;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.35);
  opacity: 0.65;
  transition: background-image 0.8s ease-in-out;
  pointer-events: none;
}

/* Foreground Full Uncropped Photo - 100% of the picture is visible */
.cinematic-foreground-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  border: 2px solid var(--color-oro);
  box-shadow: 0 0 35px rgba(212, 175, 55, 0.45), 0 20px 45px rgba(0, 0, 0, 0.85);
  transition: opacity 0.6s ease-in-out;
}

/* Subtle Ken Burns Effects on the Foreground Photo without cropping */
.cinematic-foreground-img.shot-wide {
  animation: photoSlowZoom 10s infinite alternate ease-in-out;
}

.cinematic-foreground-img.shot-closeup {
  animation: photoSlowPan 10s infinite alternate ease-in-out;
}

.cinematic-foreground-img.shot-dutch {
  animation: photoSlowTilt 10s infinite alternate ease-in-out;
}

.cinematic-foreground-img.shot-exterior {
  animation: photoSlowPull 10s infinite alternate ease-in-out;
}

@keyframes photoSlowZoom {
  0% { transform: scale(0.97); }
  100% { transform: scale(1.03); }
}

@keyframes photoSlowPan {
  0% { transform: scale(1.0) translateY(-1%); }
  100% { transform: scale(1.03) translateY(1%); }
}

@keyframes photoSlowTilt {
  0% { transform: scale(1.0) rotate(-0.75deg); }
  100% { transform: scale(1.02) rotate(0.75deg); }
}

@keyframes photoSlowPull {
  0% { transform: scale(1.03); }
  100% { transform: scale(0.97); }
}

/* Legacy support for background mode */
.camera-shot-bg {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.8s ease-in-out;
}

/* Cinematic Auto-Advance Progress Track */
.cinematic-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(19, 10, 28, 0.95);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  z-index: 20;
}

.cinematic-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #c48b9f, #d4af37, #f0d57e);
  box-shadow: 0 0 10px #f0d57e;
  transition: width 0.1s linear;
}

.cinematic-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.75) 85%, #000 100%);
  pointer-events: none;
}

.cinematic-subtitle-box {
  background: linear-gradient(180deg, rgba(14, 10, 20, 0.85) 0%, rgba(14, 10, 20, 0.98) 100%);
  border-top: 1px solid #c5a059;
  backdrop-filter: blur(8px);
}

.scene-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #c5a059;
  background-color: transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.scene-dot.active {
  background-color: #dfbe76;
  box-shadow: 0 0 10px #dfbe76;
  transform: scale(1.25);
}

/* =========================================================================
   INTERACTIVE ESTATE MAP & VISUAL HOTSPOT PINS
   ========================================================================= */
.estate-hotspot-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 25;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.estate-hotspot-pin:hover {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 35;
}

.estate-hotspot-pin.active-pin {
  transform: translate(-50%, -50%) scale(1.22);
  z-index: 35;
}

.estate-hotspot-pin.active-pin .pin-circle {
  box-shadow: 0 0 25px #f0d57e, 0 0 45px rgba(212, 175, 55, 0.85);
  border-color: #f0d57e;
  background: #2b183c;
}

.pin-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #d4af37;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #1c1028;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 175, 55, 0.4);
  transition: all 0.25s ease;
  position: relative;
}

@media (min-width: 640px) {
  .pin-circle {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

.pin-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  white-space: nowrap;
  font-family: var(--font-cinzel);
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(14, 10, 20, 0.94);
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: #faf6ed;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  transition: all 0.2s ease;
}

@media (max-width: 639px) {
  /* On mobile, full pin labels overlap each other and cover the map */
  .pin-label {
    display: none !important;
  }
  .estate-hotspot-pin.active-pin .pin-label {
    display: block !important;
    font-size: 9px !important;
    padding: 1px 6px !important;
    z-index: 45 !important;
    margin-top: 3px !important;
  }
  .pin-circle {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
  }
}

@media (min-width: 640px) {
  .pin-label {
    font-size: 11px;
  }
}

.crime-scene-ping {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.45);
  animation: pingCustom 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes pingCustom {
  75%, 100% {
    transform: scale(1.85);
    opacity: 0;
  }
}

.estate-floorplan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .estate-floorplan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .estate-floorplan-grid {
    grid-template-columns: 1fr;
  }
}

.chamber-tile {
  background: #191222;
  border: 1px solid #3d2c4e;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.chamber-tile:hover {
  border-color: #c5a059;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(197, 160, 89, 0.2);
}

.chamber-tile.active-chamber {
  background: linear-gradient(135deg, #2a1b38 0%, #1c1326 100%);
  border: 2px solid #dfbe76;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 20px rgba(223, 190, 118, 0.35);
}

.crime-scene-pulse {
  animation: pulseCrimeScene 2s infinite;
}

@keyframes pulseCrimeScene {
  0% { box-shadow: 0 0 0 0 rgba(184, 38, 53, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(184, 38, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 38, 53, 0); }
}

/* =========================================================================
   REGENCY PARLOR CHARADE & ENIGMA SNUFFBOX
   ========================================================================= */
.snuffbox-container {
  background: radial-gradient(circle at 40% 30%, #302636 0%, #18111f 100%);
  border: 2px solid #c5a059;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(223, 190, 118, 0.1);
}

.charade-parchment {
  background: #fbf7ee;
  color: #1e1713;
  border-radius: 8px;
  border: 1px solid #d4c59e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0 15px rgba(160, 120, 60, 0.15);
  font-family: var(--font-garamond);
}

/* Print Optimization for Etsy Buyers */
/* ==========================================================================
   INTERACTIVE REGENCY BALLROOM DANCE FLOOR & CARNET DE BAL PUNCH
   ========================================================================== */
.ballroom-stage-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 2px solid #d4af37;
  background-color: #0d0714;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.9), 0 0 25px rgba(212, 175, 55, 0.25);
}

.ballroom-dancefloor-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 50%;
  will-change: transform;
}

.ballroom-dancer-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 25;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.ballroom-dancer-pin:hover {
  transform: translate(-50%, -50%) scale(1.15);
  filter: drop-shadow(0 0 12px rgba(240, 213, 126, 0.9));
}

.ballroom-dancer-pin.active-dancer {
  transform: translate(-50%, -50%) scale(1.22);
  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 1));
}

.ballroom-dancer-pin.active-dancer .dancer-pin-circle {
  background: linear-gradient(135deg, #f0d57e, #d4af37);
  color: #130a1c;
  border-color: #ffffff;
  box-shadow: 0 0 20px rgba(240, 213, 126, 0.9);
}

.dancer-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 2px solid rgba(212, 175, 55, 0.7);
  animation: dancerRadar 2.2s infinite ease-out;
  pointer-events: none;
}

@keyframes dancerRadar {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Carnet de Bal: Realistic Punch Hole Effect */
.carnet-punch-hole {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: radial-gradient(circle at 40% 40%, #0d0714 50%, #241434 90%);
  border: 2px dashed #871822;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(255, 255, 255, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.carnet-punch-hole.punched {
  background: #0d0714;
  border: 2px solid #d4af37;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.95), 0 0 8px rgba(212, 175, 55, 0.6);
  animation: punchHoleSnap 0.35s ease-out;
}

@keyframes punchHoleSnap {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}

/* Gilded Regency Wax Stamp Drop Animation */
.wax-seal-punched-badge {
  background: radial-gradient(circle at 35% 35%, #b82635 0%, #871822 55%, #4a0d13 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.8), 0 0 12px rgba(184, 38, 53, 0.5);
  border: 1px solid #d4af37;
  animation: waxStampDrop 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes waxStampDrop {
  0% { transform: scale(1.8) rotate(-15deg); opacity: 0; }
  70% { transform: scale(0.92) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .candlelight-overlay, .gold-particle, header, nav, #carriage-arrival-toast, #cinematic-prologue-modal {
    display: none !important;
  }
  .parchment-sheet {
    box-shadow: none !important;
    border: 1px solid #999 !important;
  }
}

/* ==========================================================================
   LIGHT THEME: "BRIDGERTON LETTER" (Antique Cream, Rosa Viejo, Oro, Violeta)
   Toggled by setting data-theme="light" on <html> (see Settings panel).
   Rather than rewriting every Tailwind utility class in the markup, this
   block re-skins the app by matching the literal utility class strings that
   Tailwind already renders into the DOM (arbitrary-hex classes AND named
   stone-palette classes) — this covers both the static HTML and everything
   rendered dynamically by app.js / miniGames.js from a single place.
   Suspect signature colors (pastelColor/accentColor inline styles), semantic
   status badges (red/emerald/amber), and already-parchment-colored elements
   (torn letter board, charade verse, dance-card carnet slots, certificate)
   are intentionally left untouched — they already read correctly as aged
   paper props in both themes.
   ========================================================================== */
[data-theme="light"] {
  --v-bg-1: #fbf5e8;        /* primary panel/card surface */
  --v-bg-2: #f2e6c9;        /* nested/secondary surface (deeper cream) */
  --v-text-heading: #241a12; /* was cream/white text on dark chrome */
  --v-text-secondary: #5b5142; /* was stone-300/400/cbd5e1 secondary text */
  --v-text-gold: #8a6a1f;   /* was bright gold text on dark chrome */
  --v-border-soft: #d9c9a0; /* soft warm border replacing dark stone borders */
}

[data-theme="light"] body {
  background: radial-gradient(ellipse at 50% 0%, #fdf8ec 0%, #f6ecd4 55%, #eddfb8 100%) fixed;
  color: var(--ink-regency);
}

[data-theme="light"] ::-webkit-scrollbar-track { background: var(--v-bg-2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbb27a; }

/* -- Panel / card background surfaces --------------------------------- */
[data-theme="light"] [class*="bg-[#0e0a14]"],
[data-theme="light"] [class*="bg-[#130a1c]"],
[data-theme="light"] [class*="bg-[#160b24]"],
[data-theme="light"] [class*="bg-[#180f24]"],
[data-theme="light"] [class*="bg-[#181222]"],
[data-theme="light"] [class*="bg-[#1c1028]"],
[data-theme="light"] [class*="bg-[#0d0714]"],
[data-theme="light"] [class*="bg-[#0c0714]"],
[data-theme="light"] [class*="bg-[#100b16]"],
[data-theme="light"] [class*="bg-[#110c17]"],
[data-theme="light"] [class*="bg-[#120c18]"],
[data-theme="light"] [class*="bg-[#1c1524]"],
[data-theme="light"] [class*="bg-stone-800"],
[data-theme="light"] [class*="bg-stone-900"] {
  background-color: var(--v-bg-1) !important;
}

/* Low-opacity black/60 pills are used as small CHROME badges (audio toolbar,
   estate-map room indicator, reset-zoom button, alibi tag) rather than as
   overlays sitting directly on a photograph — those photo-overlay badges use
   higher opacities (70-95%) and are intentionally left dark in both themes. */
[data-theme="light"] [class*="bg-black/60"] {
  background-color: var(--v-bg-2) !important;
}

[data-theme="light"] [class*="bg-[#20182c]"],
[data-theme="light"] [class*="bg-[#241434]"],
[data-theme="light"] [class*="bg-[#241535]"],
[data-theme="light"] [class*="bg-[#2a1b38]"],
[data-theme="light"] [class*="bg-[#2b1c34]"],
[data-theme="light"] [class*="bg-[#301c22]"],
[data-theme="light"] [class*="bg-[#332030]"],
[data-theme="light"] [class*="bg-[#3d1822]"],
[data-theme="light"] [class*="bg-[#3d2030]"],
[data-theme="light"] [class*="bg-[#3d2415]"] {
  background-color: var(--v-bg-2) !important;
}

/* -- Dark chrome GRADIENTS (banners, eavesdrop card, solved-puzzle ribbons):
      flatten to a solid cream tier instead of trying to override Tailwind's
      --tw-gradient-* stops individually ------------------------------------ */
[data-theme="light"] [class*="from-[#1c1524]"],
[data-theme="light"] [class*="to-[#1c1524]"],
[data-theme="light"] [class*="from-[#2e1927]"],
[data-theme="light"] [class*="to-[#251833]"],
[data-theme="light"] [class*="from-[#1c1028]"],
[data-theme="light"] [class*="to-[#130a1c]"],
[data-theme="light"] [class*="via-[#130a1c]"] {
  background-image: none !important;
  background-color: var(--v-bg-1) !important;
}

[data-theme="light"] [class*="from-[#241434]"],
[data-theme="light"] [class*="from-[#201018]"],
[data-theme="light"] [class*="via-[#2d1723]"],
[data-theme="light"] [class*="to-[#201018]"] {
  background-image: none !important;
  background-color: var(--v-bg-2) !important;
}

/* -- Gold heading / label text ----------------------------------------- */
[data-theme="light"] [class*="text-[#dfbe76]"],
[data-theme="light"] [class*="text-[#f0d57e]"],
[data-theme="light"] [class*="text-[#d4af37]"],
[data-theme="light"] [class*="text-[#c5a059]"] {
  color: var(--v-text-gold) !important;
}

/* -- Cream/white headings on dark chrome -> dark ink -------------------- */
[data-theme="light"] [class*="text-[#fbf7ee]"],
[data-theme="light"] [class*="text-[#faf6ed]"] {
  color: var(--v-text-heading) !important;
}

/* -- Secondary/body text (was light gray on dark chrome) ---------------- */
[data-theme="light"] [class*="text-[#cbd5e1]"],
[data-theme="light"] [class*="text-stone-200"],
[data-theme="light"] [class*="text-stone-300"],
[data-theme="light"] [class*="text-stone-400"],
[data-theme="light"] [class*="text-stone-500"] {
  color: var(--v-text-secondary) !important;
}

/* -- Pale/bright semantic status text (feedback messages, hint boxes,
      analysis text) that was legible on dark chrome but reads as low- or
      zero-contrast once its parent surface flips to cream. Small self-
      contained badges that carry their OWN dark bg-*-950 alongside this
      text (e.g. "CIPHER SOLVED") stay perfectly readable with a darker
      shade too, so a single darkened value is safe for both cases. ------- */
[data-theme="light"] [class*="text-emerald-300"],
[data-theme="light"] [class*="text-emerald-400"] { color: #15803d !important; }
[data-theme="light"] [class*="text-amber-200"],
[data-theme="light"] [class*="text-amber-300"],
[data-theme="light"] [class*="text-amber-400"] { color: #92400e !important; }
[data-theme="light"] [class*="text-red-200"],
[data-theme="light"] [class*="text-red-300"],
[data-theme="light"] [class*="text-red-400"] { color: #b91c1c !important; }
[data-theme="light"] [class*="text-purple-200"],
[data-theme="light"] [class*="text-purple-300"] { color: #6b21a8 !important; }
[data-theme="light"] [class*="text-cyan-300"] { color: #0e7490 !important; }
[data-theme="light"] [class*="text-rose-400"] { color: #be123c !important; }

/* -- Per-suspect "wardrobe color" chips in the Case Briefing quick gallery:
      these are translucent tints paired with pale text, tuned for a dark
      card behind them — flip each to a solid, saturated chip so the color
      identity stays legible (and more eye-catching) on a cream card. ----- */
[data-theme="light"] [class*="bg-white/20"] {
  background-color: #e2e2e2 !important;
  color: #3a3a3a !important;
  border-color: #a8a8a8 !important;
}
[data-theme="light"] [class*="bg-[#cbd5e1]/20"] {
  background-color: #cbd5e1 !important;
  color: #1e293b !important;
  border-color: #94a3b8 !important;
}
[data-theme="light"] [class*="bg-[#c48b9f]/25"],
[data-theme="light"] [class*="bg-[#c48b9f]/20"] {
  background-color: #c48b9f !important;
  color: #3d1424 !important;
  border-color: #a8687e !important;
}
[data-theme="light"] [class*="bg-[#8b6fa8]/25"] {
  background-color: #8b6fa8 !important;
  color: #fdf9ff !important;
  border-color: #6f5686 !important;
}
[data-theme="light"] [class*="bg-[#d4af37]/25"] {
  background-color: #d4af37 !important;
  color: #2b1c00 !important;
  border-color: #a8842a !important;
}

/* -- Confirmed-used named components with hardcoded dark surfaces ------ */
[data-theme="light"] .chamber-tile {
  background: var(--v-bg-1);
  border-color: var(--v-border-soft, #d9c9a0);
}
[data-theme="light"] .chamber-tile.active-chamber {
  background: linear-gradient(135deg, var(--v-bg-2) 0%, var(--v-bg-1) 100%);
}
[data-theme="light"] .snuffbox-container {
  background: radial-gradient(circle at 40% 30%, var(--v-bg-2) 0%, var(--v-bg-1) 100%);
}
[data-theme="light"] .memorial-card {
  background: radial-gradient(circle at 50% 30%, var(--v-bg-1) 0%, var(--v-bg-2) 100%);
}
[data-theme="light"] .cinematic-stage,
[data-theme="light"] .camera-shot-container {
  background: #0d0a08 !important; /* the cinematic film stage intentionally stays theatre-dark in both themes */
}
[data-theme="light"] .ballroom-stage-viewport {
  background-color: var(--v-bg-1);
}
[data-theme="light"] .carriage-banner {
  background: var(--v-bg-1);
  border-color: var(--color-oro);
}
[data-theme="light"] .pin-circle {
  background: var(--v-bg-1);
}
[data-theme="light"] .pin-label {
  background: rgba(251, 245, 232, 0.94);
  color: var(--v-text-heading);
}

/* -- Settings panel theme-choice cards ----------------------------------- */
.settings-choice-btn { opacity: 0.55; }
.settings-choice-btn.settings-choice-active {
  opacity: 1;
  border-color: var(--color-oro) !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35);
}

/* ==========================================================================
   SUSPECT PORTRAIT & DOSSIER STYLES (Both Themes)
   Ensures portraits remain fully luminous & visible in both Light & Dark modes,
   while providing seamless tonal integration with card surfaces and typography.
   ========================================================================== */
.suspect-portrait-overlay {
  background: linear-gradient(to top, rgba(24, 18, 34, 0.92) 0%, rgba(24, 18, 34, 0.45) 24%, transparent 55%);
  pointer-events: none;
}

[data-theme="light"] .suspect-portrait-overlay {
  background: linear-gradient(to top, rgba(251, 245, 232, 0.95) 0%, rgba(251, 245, 232, 0.50) 24%, transparent 55%) !important;
}

[data-theme="light"] .suspect-card-name {
  text-shadow: none !important;
  filter: none !important;
}

/* Archetype Badge on Portrait: crisp contrast against character background */
[data-theme="light"] .archetype-badge {
  background-color: rgba(26, 18, 12, 0.85) !important;
  color: #faf6ed !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
}

/* Case Briefing Quick Suspect Lineup */
[data-theme="light"] .suspect-lineup-item {
  background-color: var(--v-bg-1) !important;
  border-color: #d9c9a0 !important;
  box-shadow: 0 2px 8px rgba(36, 26, 18, 0.08) !important;
}

[data-theme="light"] .suspect-lineup-item:hover {
  border-color: var(--color-oro) !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25) !important;
}

[data-theme="light"] .suspect-lineup-item img {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="light"] .suspect-lineup-item img[alt="Lady Cecily"] {
  border-color: #94a3b8 !important; /* Sterling Silver lace border for high contrast on cream */
}

/* Group Character Selector Modal & Party Banner */
[data-theme="light"] [data-pick="cecily"] img,
[data-theme="light"] #group-party-banner img[alt*="Cecily"] {
  border-color: #94a3b8 !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS: ESTATE MAP & BALLROOM FLOOR
   ========================================================================== */
.map-tall-view {
  height: 520px !important;
}

@media (max-width: 639px) {
  /* Ballroom Dance Floor: hide all non-active dancer nametags so the painting is clear */
  .dancer-pin-nametag {
    display: none !important;
  }
  .ballroom-dancer-pin.active-dancer .dancer-pin-nametag {
    display: block !important;
    font-size: 9px !important;
    padding: 1px 6px !important;
    z-index: 45 !important;
    margin-top: 2px !important;
  }
  .dancer-pin-circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   SUSPECT PORTRAIT LIGHTBOX MODAL
   ========================================================================== */
#suspect-lightbox-modal {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

[data-theme="light"] #lightbox-card-container {
  background-color: var(--v-bg-1) !important;
  border-color: var(--color-oro) !important;
}

[data-theme="light"] #lightbox-card-container > div:first-child {
  background-color: var(--v-bg-2) !important;
}

[data-theme="light"] #lightbox-card-container > div:last-child {
  background-color: var(--v-bg-1) !important;
  background-image: none !important;
}

[data-theme="light"] #lightbox-suspect-name {
  color: var(--v-text-heading) !important;
}

[data-theme="light"] #lightbox-suspect-quote {
  color: var(--v-text-secondary) !important;
}