/* Tema Bolos: boliche de noche, madera clara y neón */
:root {
  --paper: #fdf6ff;
  --paper-2: #ecd9f5;
  --heading: #2a1150;
  --deep: #120a26;
  --c1: #ff3d8b; /* neón rosa (la bola, el boleto) */
  --c2: #22d3ee; /* neón cian (los aros, los links) */
  --c3: #b4762f; /* la madera de la pista */
  --accent: #ffd23f;
  --soft: #c9a7f5;
  --ink: #2b1c4d;
  --script: "Alfa Slab One", "Arial Black", serif;
  --gate-bg:
    radial-gradient(circle at 20% 15%, rgba(34,211,238,.28), transparent 42%),
    radial-gradient(circle at 80% 85%, rgba(255,61,139,.30), transparent 45%),
    var(--deep);
  --intro-bg: radial-gradient(ellipse at 50% 120%, #3a1d6b, #170c2e 55%, #0a0518);
  --game-bg: radial-gradient(ellipse at 30% 0%, #2b1552, #120a26 55%, #08040f);
  --invite-bg:
    radial-gradient(circle at 0% 0%, rgba(255,61,139,.16), transparent 40%),
    radial-gradient(circle at 100% 30%, rgba(34,211,238,.16), transparent 40%),
    var(--paper);
}

/* La escena, más grande que el default (min(92vw, 560px)) porque la pista y los pinos
   quedaban chicos y apretados contra el borde de abajo. Se agranda solo acá, no en
   base.css, para no tocar las otras 12 temáticas.
   El tercer valor (60vh) es un techo en el ALTO: sin él la escena se come el lugar del
   título y en el celular se tocaban. Si se cambia cualquiera de estos números hay que
   cambiar el mismo cálculo en el theme.js (la constante S), que alinea el brillo del canvas. */
.scene-art { width: min(118vw, 720px, 60vh); }

/* El letrero y la pista viven abajo, así que el título se sube para no chocar con ellos.
   Con place-content: center, el padding de abajo corre el contenido hacia arriba. */
.intro-title { padding-bottom: 16vh; }

.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 letrero de la escena, encendido y con el parpadeo de un tubo viejo */
.neon { filter: drop-shadow(0 0 5px #ff3d8b) drop-shadow(0 0 14px rgba(255,61,139,.65)); }
#intro.run .neon { animation: neon-flicker 4s .5s steps(1, end) infinite; }
@keyframes neon-flicker {
  0%, 86%, 100% { opacity: 1; }
  88% { opacity: .3; }
  90% { opacity: 1; }
  93% { opacity: .45; }
  95% { opacity: 1; }
}

/* El strike: los pinos se caen a los 5,2 s, que es el revealAt de la temática, o sea justo
   cuando la bola del canvas llega y aparece el título. La mitad se va para cada lado para
   que no parezca que se empujan entre ellos. */
/* La bola: entra rodando desde abajo (fuera de la pantalla) y llega a los pinos a los 5,2 s,
   achicándose para vender la profundidad. Termina justo cuando los pinos se caen. */
.ball { transform-box: fill-box; transform-origin: 50% 50%; }
#intro.run .ball { animation: ball-roll 4s 1.2s cubic-bezier(.42,.02,.58,.98) forwards; }
@keyframes ball-roll {
  from { transform: translate(0, 0) scale(1) rotate(0deg); }
  to { transform: translate(0, -226px) scale(.3) rotate(560deg); }
}

/* Cada pino va envuelto en un <g> que es el que gira: animar el <use> directamente hacía
   que rotara sobre un origen raro y saliera volando para cualquier lado. */
.pins .p { transform-box: fill-box; transform-origin: 50% 100%; }
#intro.run .pins .p { animation: pin-fall 1.15s 5.2s cubic-bezier(.3,.8,.4,1) forwards; }
#intro.run .pins .p:nth-child(even) { animation-name: pin-fall-r; }
@keyframes pin-fall { to { transform: translate(-16px, 8px) rotate(-74deg); opacity: .34; } }
@keyframes pin-fall-r { to { transform: translate(16px, 8px) rotate(74deg); opacity: .34; } }

/* Letras del logo en neón */
.logo-text { font-size: clamp(2rem, 11vw, 4.2rem); column-gap: .3em; }
.logo-text .w { gap: .03em; }
.logo-text .w span { color: #fff; text-shadow: 0 0 6px currentColor, 0 0 20px #ff3d8b, 0 0 38px #ff3d8b; }
.logo-text .w span:nth-child(3n+1) { color: #ffe6f2; text-shadow: 0 0 6px #fff, 0 0 20px #ff3d8b, 0 0 38px #ff3d8b; }
.logo-text .w span:nth-child(3n+2) { color: #dffbff; text-shadow: 0 0 6px #fff, 0 0 20px #22d3ee, 0 0 38px #22d3ee; }
.logo-tag { color: var(--accent); letter-spacing: .04em; }

/* En el juego las caritas caen sobre la pista, así que el marcador y el salto van claros */
#game .hud-score { background: rgba(255,255,255,.92); }
#game .skip-btn { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }

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