/* Tema La granja: amanecer en el campo, rojo de granero, amarillo de heno y verde de pasto */
:root {
  --paper: #fdf6e6;
  --paper-2: #f2e6cc;
  --heading: #7a3a1d;
  --deep: #6b3f1d;
  --c1: #d94f3d; /* el rojo del granero (el boleto, los botones) */
  --c2: #4d8b33; /* el verde del pasto (los links, los aros) */
  --c3: #8c5a2b; /* la madera de la cerca */
  --accent: #f2b705;
  --soft: #e8c06a;
  --ink: #4a3321;
  --script: "Titan One", "Arial Black", sans-serif;
  --gate-bg:
    radial-gradient(circle at 22% 16%, rgba(242,183,5,.3), transparent 44%),
    radial-gradient(circle at 80% 84%, rgba(217,79,61,.26), transparent 46%),
    var(--deep);
  --intro-bg: linear-gradient(#5fbce8, #ffd79a 58%, #ffb86b);
  --game-bg: linear-gradient(#8fd3f4, #ffe6b0 50%, #b6dd8a);
  --invite-bg:
    radial-gradient(circle at 0% 0%, rgba(242,183,5,.22), transparent 40%),
    radial-gradient(circle at 100% 28%, rgba(77,139,51,.16), transparent 40%),
    var(--paper);
}

/* La escena tiene mucho ancho (granero + silo + molino) y poca altura: se agranda respecto
   al default (min(92vw, 560px)), con el techo en vh para no chocar con el título. */
.scene-art { width: min(106vw, 650px, 60vh); }

/* Las aspas del molino giran siempre, despacio. El transform-origin va en unidades del
   viewBox (el default de SVG es transform-box: view-box), que es el eje de las aspas. */
.gr-aspas { transform-origin: 320px 172px; }
#intro.run .gr-aspas { animation: gr-girar 9s linear infinite; }
@keyframes gr-girar { to { transform: rotate(360deg); } }

/* La veleta del techo se mece con el viento */
.gr-veleta { transform-origin: 133px 140px; }
#intro.run .gr-veleta { animation: gr-veleta 5s ease-in-out infinite; }
@keyframes gr-veleta { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(11deg); } }

/* El gallo canta a los 5,2 s: el mismo instante del revealAt, o sea cuando aparece el
   título, revientan los pétalos del canvas y suena el quiquiriquí. Echa la cabeza atrás
   y la tira adelante, dos veces.
   OJO: el <g> de afuera es el que lleva el translate del SVG y este el de la animación. Si
   se juntan en uno solo, el transform de CSS le gana al atributo y el gallo se va al 0,0.
   Por eso el origen va en coordenadas LOCALES (las patas, 14,34), no las del viewBox. */
.gr-gallo { transform-origin: 14px 34px; }
#intro.run .gr-gallo { animation: gr-cantar 1.2s 5.2s ease-out; }
@keyframes gr-cantar {
  0% { transform: rotate(0) translateY(0); }
  18% { transform: rotate(-16deg) translateY(-3px); }
  34% { transform: rotate(7deg) translateY(0); }
  54% { transform: rotate(-13deg) translateY(-2px); }
  72% { transform: rotate(5deg) translateY(0); }
  100% { transform: rotate(0) translateY(0); }
}

.gate-sub { color: var(--accent); font-family: var(--ui); font-style: normal; font-weight: 600; }
/* El amanecer es CLARO: en crema esto se perdía. Va en el café del granero. */
.intro-presents { font-family: var(--ui); font-style: normal; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7a3a1d; }

/* Letras del logo, como pintadas en la tabla del granero: el cielo del amanecer es CLARO,
   así que van oscuras con un filo crema, no al revés. */
.logo-text { font-size: clamp(1.9rem, 10vw, 3.8rem); }
.logo-text .w span { color: #8f2d22; text-shadow: 0 2px 0 #fdf6e6, 0 0 16px rgba(255,244,220,.8); }
.logo-text .w span:nth-child(3n+2) { color: #a8502a; }
.logo-tag { color: #7a3a1d; letter-spacing: .04em; }

/* En el juego las caritas caen sobre el pasto claro: el marcador va oscuro para que se lea */
#game .hud-score { background: rgba(255,255,255,.92); }

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