/* ============================================
   VARIABLES
   ============================================ */
:root {
  --bg:        #07070a;
  --surface:   #0e0d12;
  --text:      #EDE8E0;
  --muted:     #7A7468;
  --red:       #7a1515;
  --red-logo:  #AA0000;
  --gold:      #C8B08A;
  --gold-dim:  #6B5B45;
  --border:    rgba(200,176,138,0.12);
  --cream:     #F0EAE0;
  --font-title:  'Cinzel Decorative', 'Cinzel', serif;
  --font-ui:     'Cinzel', serif;
  --font-body:   'Cormorant Garamond', Georgia, serif;

  /* Ancho de los bloques de contenido (Historia, Galería, Gameplay...). */
  --content-width: clamp(1100px, 68vw, 1500px);

  /* Duración única de la transición del lightbox (abrir/cerrar y cambiar de imagen). */
  --lightbox-fade: 0.35s;

  /* Viñeteado que usan los ::before de Historia y Gameplay (centro
     transparente, oscuro hacia los bordes, sobre su wallpaper). */
  --vignette: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 0%, rgba(5,4,8,0.98) 100%);

  /* Mismo color que --surface, pero con algo de transparencia — para
     las tarjetas de texto (Historia, Gameplay, Wishlist/Demo) */
  --surface-alpha: rgba(14, 13, 18, 0.85);
}