/* Tema El árbol de Navidad: sala clara de mañana, verde pino, rojo y dorado.
   A propósito es la Navidad CLARA, para que no se parezca a "Navidad en la nieve",
   que es la de noche. */
:root {
  --paper: #fffaf3;
  --paper-2: #f0e6d8;
  --heading: #15402f;
  /* claro, no oscuro: es el fondo del <body> y la base del gate */
  --deep: #f7eee1;
  --c1: #c62f3c; /* el rojo (el boleto, los lazos) — un punto más oscuro para que lea sobre claro */
  --c2: #2f8f5b; /* el verde del árbol (los links, los aros) */
  --c3: #b5763a; /* la madera tibia */
  --accent: #c9922e; /* dorado oscurecido: el #ffd166 sobre crema no se leía */
  --soft: #8a7256;
  --ink: #3a2016;
  --script: "Mountains of Christmas", "Georgia", serif;
  --gate-bg:
    radial-gradient(circle at 24% 16%, rgba(47,143,91,.16), transparent 46%),
    radial-gradient(circle at 76% 82%, rgba(198,47,60,.16), transparent 48%),
    var(--deep);
  --intro-bg: radial-gradient(ellipse at 50% 86%, #fffdf8, #f6ead8 46%, #e4d8c6);
  --game-bg: linear-gradient(#fdf4e6, #f6ead8 58%, var(--paper));
  --invite-bg:
    radial-gradient(circle at 0% 0%, rgba(47,143,91,.14), transparent 40%),
    radial-gradient(circle at 100% 28%, rgba(198,47,60,.12), transparent 40%),
    var(--paper);
}

/* La escena de esta temática es el árbol ENTERO, de piso a techo, así que es mucho más
   grande que el default (min(92vw, 560px)) y además usa un viewBox más alto (400x440).
   El tercer valor (52vh) es un techo en el ALTO: como el alto sale de width * 1.1, sin él
   en una pantalla corta el árbol se comía el título.
   ⚠️ Si se cambia cualquiera de estos tres números hay que cambiar el mismo cálculo en
   theme.js (la constante S), que es lo que alinea el resplandor y los destellos. */
/* La sombra del default es un azul frío que sobre el crema se ve sucio: acá va tibia. */
.scene-art {
  width: min(112vw, 540px, 52vh);
  filter: drop-shadow(0 6px 24px rgba(120,80,40,.18));
}

/* El árbol ocupa de la mitad para abajo, así que el título se sube bien arriba para no
   quedar encima de las ramas (mismo truco que Bolos, pero más marcado). */
.intro-title { padding-bottom: 42vh; }

/* Las luces y la estrella se encienden a los 5,2 s, que es el revealAt: el árbol prende
   justo cuando entra el título y revienta la purpurina del canvas. */
.luces { opacity: 0; }
#intro.run .luces { animation: ab-luces .6s 5.2s forwards; }
@keyframes ab-luces { to { opacity: 1; } }
/* Ya encendidas, laten despacio como una serie de verdad; las de abajo van a destiempo */
#intro.run .luces circle { animation: ab-latir 2.2s 5.8s ease-in-out infinite; }
#intro.run .luces circle:nth-child(even) { animation-delay: 6.9s; }
@keyframes ab-latir { 50% { opacity: .4; } }

.gate-sub { color: var(--c2); font-family: var(--ui); font-style: normal; font-weight: 600; }
.intro-presents { font-family: var(--ui); font-style: normal; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

/* El logo va en verde pino con sombrita, NO en crema con brillo: sobre el fondo claro
   el texto luminoso de la versión oscura desaparecía. */
.logo-text .w span { color: #15402f; text-shadow: 0 2px 0 rgba(255,255,255,.7), 0 4px 14px rgba(120,80,40,.22); }
.logo-text .w span:nth-child(3n+2) { color: #c62f3c; }
.logo-tag { color: var(--c1); letter-spacing: .04em; }

/* El juego es claro: el marcador vuelve al papel con borde, como las temáticas de día */
#game .hud-score { background: var(--paper); }

.tc-stub { background: var(--c1); }
.ticket-card { border-color: var(--c2); }