/* Relieve (28-10-2026): la capa «premium» encima del sistema «Pop con caramelo». No cambia colores, letras, textos ni medidas:
   añade textura, luz y profundidad, y va la última de las hojas (index.html), así que pisa con la misma especificidad.
   · Fondo (.fondo, detrás de todo): luz de estudio arriba, viñeta del color del canto, una trama por pantalla que se desvanece
     hacia arriba y dos manchas de luz que se mueven muy despacio. En las de tomate, además, rayos de concurso girando.
   · Grano (.grano, encima de todo y sin toques): como papel impreso. Una capa fija y quieta: no cuesta nada al desplazar.
   Solo se anima transform/opacity (y translate/rotate/scale); con «reducir movimiento», todo quieto. */

:root{
  --luz-a:.2;                        /* la luz de estudio de arriba (blanco) */
  --trama:none;                      /* el dibujo de cada pantalla (capas de background) */
  --trama-op:.5;
  --trama-mask:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 30%,transparent 62%);
  --sombra:rgba(10,6,36,.42);        /* la sombra blanda de contacto, debajo del canto */
  --luz-arriba:radial-gradient(120% 60% at 50% -8%,rgba(255,255,255,var(--luz-a)) 0%,rgba(255,255,255,0) 72%);
  --vin:color-mix(in srgb,var(--d) 70%,transparent); /* la viñeta de los bordes, del color del canto */
}

/* ---------- el fondo ---------- */
.fondo{
  position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;overflow:hidden;pointer-events:none;
  contain:layout paint;
}
.fondo > i{position:absolute;inset:0;display:block}
.fondo-luz{
  background:var(--luz-arriba),radial-gradient(150% 88% at 50% 18%,rgba(10,6,36,0) 58%,rgba(10,6,36,.16) 100%);
  background:var(--luz-arriba),radial-gradient(150% 88% at 50% 18%,transparent 58%,var(--vin) 100%);
}
.fondo-trama{
  background:var(--trama);opacity:var(--trama-op);
  -webkit-mask-image:var(--trama-mask);mask-image:var(--trama-mask);
}
/* los rayos de concurso (solo tomate): un abanico de luz que gira muy despacio detrás del titular */
.fondo > .fondo-rayos{
  display:none;inset:auto;left:50%;top:-30vmin;width:160vmin;height:160vmin;margin-left:-80vmin;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.11) 0deg 7.5deg,rgba(255,255,255,0) 7.5deg 15deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,rgba(0,0,0,.5) 55%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 18%,rgba(0,0,0,.5) 55%,transparent 100%);
  animation:rayos-giro 150s linear infinite;
}
@keyframes rayos-giro{to{rotate:360deg}}
/* dos manchas de luz y de sombra que van y vienen, lejos de arriba (allí está el marcador) */
.fondo::before,.fondo::after{content:"";position:absolute;width:92vmin;height:92vmin;border-radius:50%}
.fondo::before{
  left:-34vmin;bottom:-26vmin;
  background:radial-gradient(closest-side,rgba(255,255,255,.17),rgba(255,255,255,0));
  animation:mancha-a 21s ease-in-out infinite alternate;
}
.fondo::after{
  right:-38vmin;top:40%;
  background:radial-gradient(closest-side,rgba(10,6,36,.12),rgba(10,6,36,0));
  background:radial-gradient(closest-side,color-mix(in srgb,var(--d) 60%,transparent),transparent);
  animation:mancha-b 26s ease-in-out infinite alternate;
}
@keyframes mancha-a{to{translate:24vmin -16vmin;scale:1.18}}
@keyframes mancha-b{to{translate:-20vmin 14vmin;scale:.88}}

/* el grano, encima de todo (debajo solo quedan el menú del ensayo y los avisos) */
.grano{
  position:fixed;left:0;right:0;top:-10vh;bottom:-10vh;z-index:990;pointer-events:none;
  background:url("../assets/img/grano.png") 0 0/64px 64px;opacity:.4;
}

/* en los anuncios (vídeo a pantalla completa) el grano baja: que se vea el anuncio, no el papel */
html[data-step^="ad"] .grano{opacity:.18}

/* el marcador fijo de arriba tapa el fondo con su color: lleva la misma luz, a la misma escala, para que no se vea la costura */
#hud{background:var(--luz-arriba) 50% 0/100vw 100vh no-repeat,var(--bg);background-size:100vw 100lvh}
html.is-ensayo body:has(> #hud:empty)::after{
  background:url("../assets/img/grano.png") 0 0/64px 64px,var(--luz-arriba) 50% 0/100vw 100vh no-repeat,var(--bg);
  background-size:64px 64px,100vw 100lvh;
}

/* ---------- una trama por pantalla ---------- */
/* tomate (inicio, bienvenida y final): trama de puntos abajo y los rayos */
html[data-step="intro"],html[data-step="welcome"],html[data-step="end"]{
  --trama:radial-gradient(circle,var(--d) 0 2.3px,transparent 2.9px) 0 0/15px 15px,
          radial-gradient(circle,var(--d) 0 2.3px,transparent 2.9px) 7.5px 7.5px/15px 15px;
  --trama-op:.55;
}
html[data-step="intro"] .fondo-rayos,html[data-step="welcome"] .fondo-rayos,html[data-step="end"] .fondo-rayos{display:block}
/* cobalto (caja fuerte, ruleta y mapa): puntos de trama de cómic, más gordos */
html[data-step="safe"],html[data-step="p2"],html[data-step="p4"]{
  --trama:radial-gradient(circle,var(--cobalto-dd) 0 3px,transparent 3.6px) 0 0/18px 18px,
          radial-gradient(circle,var(--cobalto-dd) 0 3px,transparent 3.6px) 9px 9px/18px 18px;
  --trama-op:.5;
}
/* lima (el test): rayas de caramelo en diagonal */
html[data-step="p1"]{
  --trama:repeating-linear-gradient(-45deg,var(--lima-d) 0 9px,transparent 9px 24px);
  --trama-op:.32;
  --trama-mask:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 35%,transparent 75%);
}
/* menta (la línea del tiempo): papel de agenda */
html[data-step="p3"]{
  --trama:linear-gradient(var(--menta-d) 1.5px,transparent 1.5px) 0 0/24px 24px,
          linear-gradient(90deg,var(--menta-d) 1.5px,transparent 1.5px) 0 0/24px 24px;
  --trama-op:.36;
  --trama-mask:linear-gradient(to top,transparent 0,transparent 130px,#000 230px,rgba(0,0,0,.55) 60%,transparent 88%);
}
/* menta y girasol llevan un pie fijo con su color plano (el botón de comprobar): ahí abajo no hay trama, ni viñeta, ni mancha */
html[data-step="p3"],html[data-step="p6"]{--vin:transparent}
html[data-step="p3"] .fondo::before,html[data-step="p6"] .fondo::before{bottom:auto;top:26%}
/* girasol (la música): los surcos de un disco, desde la esquina de abajo */
html[data-step="p6"]{
  --trama:repeating-radial-gradient(circle at 100% 72%,transparent 0 10px,var(--girasol-d) 10px 12px);
  --trama-op:.3;
  --trama-mask:radial-gradient(110% 70% at 100% 72%,#000 18%,transparent 72%);
}
/* tinta (el Wrapped y los anuncios): cielo de estrellas que titila */
html[data-step="p5"],html[data-step="ad1"],html[data-step="ad2"],html[data-step="ad3"]{
  --trama:radial-gradient(circle,#fff 0 1px,transparent 1.6px) 0 0/37px 41px,
          radial-gradient(circle,var(--anil) 0 1.3px,transparent 1.9px) 13px 19px/53px 47px,
          radial-gradient(circle,var(--girasol) 0 1px,transparent 1.6px) 29px 7px/71px 67px;
  --trama-op:.55;
  --trama-mask:linear-gradient(to top,#000 0%,rgba(0,0,0,.7) 50%,rgba(0,0,0,.25) 100%);
  --luz-a:.07;
}
html[data-step="p5"] .fondo-trama,html[data-step^="ad"] .fondo-trama{animation:titila 4.6s ease-in-out infinite alternate}
@keyframes titila{from{opacity:.25}to{opacity:.6}}
/* la cámara oculta: líneas de monitor y mucha viñeta */
html[data-step="cam"]{
  --trama:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px);
  --trama-op:1;--trama-mask:none;--luz-a:.06;
}
/* crema (los recuerdos): papel de álbum con su punteado */
html[data-step="r1"],html[data-step="r2"]{
  --trama:radial-gradient(circle,#D9B98A 0 1.5px,transparent 2px) 0 0/20px 20px;
  --trama-op:.6;--luz-a:.5;
  --trama-mask:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 40%,transparent 80%);
}
/* chicle (el rasca, las revelaciones y la Cartera): corazones */
html:has(.prize-screen),html:has(#app > [class^="rv"]){
  --trama:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23E35E9E'%3E%3Cpath d='M15 24C8.6 19.2 5.4 15.5 5.4 11.2a5.3 5.3 0 0 1 9.6-3.1 5.3 5.3 0 0 1 9.6 3.1c0 4.3-3.2 8-9.6 12.8z'/%3E%3Cpath d='M45 54c-6.4-4.8-9.6-8.5-9.6-12.8a5.3 5.3 0 0 1 9.6-3.1 5.3 5.3 0 0 1 9.6 3.1c0 4.3-3.2 8-9.6 12.8z'/%3E%3C/g%3E%3C/svg%3E") 0 0/60px 60px;
  --trama-op:.42;--luz-a:.24;
  --trama-mask:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 40%,transparent 80%);
}

@media (prefers-reduced-motion:reduce){
  .fondo::before,.fondo::after,.fondo > .fondo-rayos,.fondo-trama{animation:none !important}
}

/* =====================================================================================================================
   RELIEVE: lo que se toca es caramelo (brillo arriba, filo de luz, canto con su línea de contacto y una sombra blanda debajo);
   las hojas de leche, papel con curva; los marcos de fotos y vídeos, con su cristal.
   ===================================================================================================================== */
/* la sombra blanda de cada pantalla: del color del canto, no gris */
html[data-step="intro"],html[data-step="welcome"],html[data-step="end"]{--sombra:rgba(110,18,4,.5)}
html[data-step="safe"],html[data-step="p2"],html[data-step="p4"]{--sombra:rgba(8,14,84,.6)}
html[data-step="p1"]{--sombra:rgba(58,80,0,.42)}
html[data-step="p3"]{--sombra:rgba(0,72,44,.42)}
html[data-step="p6"]{--sombra:rgba(122,74,0,.42)}
html[data-step="r1"],html[data-step="r2"]{--sombra:rgba(96,62,20,.34)}
html[data-step="p5"],html[data-step^="ad"],html[data-step="cam"]{--sombra:rgba(0,0,0,.6)}
html:has(.prize-screen),html:has(#app > [class^="rv"]){--sombra:rgba(128,18,72,.45)}

/* ---------- botones gorditos: caramelo ---------- */
.btn{
  background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 50%,rgba(10,6,36,.08) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(10,6,36,.12),
    0 var(--canto) 0 var(--edge),0 calc(var(--canto) + 1.5px) 0 rgba(10,6,36,.2),0 calc(var(--canto) + 14px) 20px -10px var(--sombra);
}
/* el reflejo de caramelo: una píldora de luz arriba, por encima del color pero por debajo de la letra (isolation + z-index -1) */
.btn{isolation:isolate}
.btn::after{
  content:"";position:absolute;z-index:-1;left:18px;right:18px;top:4px;height:40%;border-radius:var(--r-pill);pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,0));
}
.btn:active:not(:disabled),.btn.is-down{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(10,6,36,.1),
    0 0 0 var(--edge),0 0 0 rgba(10,6,36,0),0 3px 8px -4px var(--sombra);
}
.btn:disabled{box-shadow:0 var(--canto) 0 var(--edge)}

/* «Desliza para empezar»: el carril hundido con su brillo que pasa, y el tirador de caramelo */
.swipe{box-shadow:inset 0 5px 0 var(--tinta-d),inset 0 -2px 0 rgba(255,255,255,.08),0 2px 0 rgba(255,255,255,.18),0 14px 22px -12px var(--sombra)}
.swipe::after{
  content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;width:38%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.14) 50%,rgba(255,255,255,0));
  transform:translateX(-110%);animation:swipe-brillo 3.6s cubic-bezier(.5,0,.3,1) 1.4s infinite;
}
@keyframes swipe-brillo{0%{transform:translateX(-110%)}55%,100%{transform:translateX(300%)}}
.swipe.is-dragging::after,.swipe.is-done::after{opacity:0}
.swipe-knob{
  background-image:radial-gradient(90% 60% at 50% 12%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(10,6,36,.12),0 5px 0 var(--girasol-d),0 6.5px 0 rgba(10,6,36,.25),0 12px 14px -6px rgba(0,0,0,.45);
}

/* teclas y botones de cada prueba: el mismo caramelo, cada uno con su canto */
.quiz-option,.quiz-step,.wheel-btn,.ruleta-key,.map-chip,.quiz-joker{
  background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 45%,rgba(231,220,203,.35) 100%);
}
.quiz-option{box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--lima-d),0 6.5px 0 rgba(10,6,36,.14),0 16px 18px -10px var(--sombra)}
.quiz-step{box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--lima-d),0 6.5px 0 rgba(10,6,36,.14),0 14px 16px -10px var(--sombra)}
.quiz-joker{box-shadow:inset 0 2px 0 #fff,0 var(--canto) 0 var(--d),0 calc(var(--canto) + 1.5px) 0 rgba(10,6,36,.14),0 16px 18px -10px var(--sombra)}
.wheel-btn{box-shadow:inset 0 2px 0 #fff,0 5px 0 #14259A,0 6.5px 0 rgba(10,6,36,.25),0 14px 16px -8px var(--sombra)}
.ruleta-key{box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--leche-d),0 5.5px 0 rgba(10,6,36,.3)}
.map-chip{box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--cobalto-d),0 6.5px 0 rgba(10,6,36,.25),0 14px 16px -8px var(--sombra)}
.mus-play,.np-toggle,.ad-sound,.rec-sound{background-image:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%)}
.mus-play{box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 var(--canto) 0 var(--tinta-d),0 calc(var(--canto) + 14px) 20px -10px var(--sombra)}

/* ---------- hojas de leche: papel con curva (luz arriba, un poco de sombra abajo), su canto y su sombra ---------- */
.intro-text,.welcome-text,.end-prize,.quiz-card,.mus-card,.tl-front,.ruleta-rules li,.ruleta-msg:not(.is-bad):not(.is-ok),.quiz-reveal,.map-result:not(.is-near),.rvp-card{
  background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 28%,rgba(231,220,203,0) 62%,rgba(231,220,203,.42) 100%);
}
.intro-text,.welcome-text,.end-prize{
  box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 rgba(231,220,203,.65),0 var(--canto) 0 var(--d),0 calc(var(--canto) + 1.5px) 0 rgba(10,6,36,.12),
    0 calc(var(--canto) + 18px) 28px -14px var(--sombra);
}
.quiz-card{box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 rgba(231,220,203,.65),0 var(--canto) 0 var(--lima-d),0 calc(var(--canto) + 1.5px) 0 rgba(10,6,36,.12),0 calc(var(--canto) + 18px) 28px -14px var(--sombra)}
/* la tarjeta del test, ya contestada: de tinta si acierta, con su aro tomate si falla; las dos siguen teniendo volumen */
.quiz-card.is-answered.is-ok{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.14),0 6px 0 var(--tinta-d),0 22px 28px -14px var(--sombra)}
.quiz-card.is-answered.is-bad{
  background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 28%,rgba(231,220,203,0) 62%,rgba(231,220,203,.42) 100%);
  box-shadow:inset 0 0 0 3px var(--tomate),0 6px 0 var(--lima-d),0 22px 28px -14px var(--sombra);
}
.mus-card{box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--girasol-d),0 6.5px 0 rgba(10,6,36,.12),0 16px 20px -12px var(--sombra)}
.tl-front{box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--menta-d),0 6.5px 0 rgba(10,6,36,.12),0 16px 20px -12px var(--sombra)}
.ruleta-rules li{box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--cobalto-d),0 14px 18px -10px var(--sombra)}
.rvp-card{box-shadow:inset 0 2px 0 #fff,0 8px 0 var(--chicle-d),0 9.5px 0 rgba(10,6,36,.12),0 24px 28px -14px var(--sombra)}

/* las tarjetas de tinta (marcador, reproductor, escenas): un filo de luz arriba y su sombra */
.hud{
  background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.25),0 5px 0 var(--tinta-d),0 16px 22px -12px var(--sombra);
}
.hud-money b{text-shadow:0 2px 0 rgba(0,0,0,.35)}
.hud-track{box-shadow:inset 0 2px 3px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.1)}
.hud-segs i{background-image:linear-gradient(180deg,rgba(255,255,255,.45) 0 28%,rgba(255,255,255,0) 30%)}
.np{
  background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.14),0 var(--canto) 0 var(--tinta-d),0 calc(var(--canto) + 18px) 26px -14px var(--sombra);
}
.np-art{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.12)}
/* la tarjeta de Home pegada abajo en el final mientras no suena (end.css): su relieve y una sombra que la despega de lo de debajo */
.end-home.is-stuck .np{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.14),0 var(--canto) 0 var(--tinta-d),0 18px 34px -10px rgba(29,20,66,.55)}
.rv-scene{box-shadow:0 0 0 4px #fff,0 10px 0 4px var(--chicle-d),0 11.5px 0 4px rgba(10,6,36,.12),0 28px 32px -14px var(--sombra)}
.chat{box-shadow:0 var(--canto) 0 var(--tinta-d),0 calc(var(--canto) + 16px) 24px -12px var(--sombra)}
.pause-chat .chat{box-shadow:0 var(--canto) 0 rgba(10,6,36,.25),0 calc(var(--canto) + 16px) 24px -12px var(--sombra)}

/* ---------- marcos de fotos y vídeos: papel fotográfico, cristal y profundidad ---------- */
.wb-photo,.pause-photo,.map-photo,.end-photo:not(.is-video){background-image:linear-gradient(180deg,#fff 0%,#fff 55%,#F2ECE2 100%)}
.wb-photo{position:relative;box-shadow:inset 0 -2px 0 rgba(10,6,36,.06),0 6px 0 var(--tomate-d),0 7.5px 0 rgba(10,6,36,.14),0 20px 24px -12px var(--sombra)}
.pause-photo{position:relative;box-shadow:inset 0 -2px 0 rgba(10,6,36,.06),0 7px 0 var(--d),0 8.5px 0 rgba(10,6,36,.12),0 24px 28px -14px var(--sombra)}
.map-photo{position:relative;transform:none;rotate:-3deg;box-shadow:inset 0 -2px 0 rgba(10,6,36,.06),0 6px 0 var(--cobalto-d),0 7.5px 0 rgba(10,6,36,.2),0 18px 22px -10px var(--sombra)}
.pause-shot{position:relative;box-shadow:0 0 0 4px #fff,0 9px 0 4px var(--d),0 10.5px 0 4px rgba(10,6,36,.12),0 26px 30px -14px var(--sombra)}
.rec{box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(10,6,36,.06),0 11px 0 5px var(--d),0 12.5px 0 5px rgba(10,6,36,.14),0 30px 34px -14px var(--sombra)}
.end-photo{position:relative;box-shadow:inset 0 -2px 0 rgba(10,6,36,.06),0 7px 0 var(--tomate-d),0 8.5px 0 rgba(10,6,36,.14),0 28px 32px -14px var(--sombra)}
.end-photo.is-video{
  background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 30%,rgba(10,6,36,0) 70%,rgba(10,6,36,.18));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(10,6,36,.25),0 7px 0 var(--cobalto-dd),0 8.5px 0 rgba(10,6,36,.25),0 30px 34px -14px var(--sombra);
}
.end-photo video,.end-photo img{box-shadow:0 0 0 1.5px rgba(10,6,36,.18)}
.end-polaroid{
  background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 32%,rgba(10,6,36,0) 70%,rgba(10,6,36,.12));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(10,6,36,.14),0 7px 0 var(--fr-d,var(--girasol-d)),0 8.5px 0 rgba(10,6,36,.16),0 22px 24px -12px var(--sombra);
}
.end-pic{box-shadow:inset 0 0 0 1.5px rgba(10,6,36,.2)}
.map-box{box-shadow:0 0 0 4px #fff,0 10px 0 4px var(--cobalto-d),0 11.5px 0 4px rgba(10,6,36,.25),0 28px 32px -14px var(--sombra)}
.cam-screen{box-shadow:0 0 0 6px var(--tinta-2),0 0 0 7.5px rgba(255,255,255,.08),0 12px 0 6px #000,0 30px 40px -10px rgba(0,0,0,.7)}
/* el cristal del monitor: un reflejo en diagonal encima de las líneas */
.cam-screen::after{
  background:linear-gradient(128deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 34%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.45));
}
/* el boleto del rasca: una sombra blanda debajo del canto (sin filtros: un degradado) */
.ticket-stage{position:relative}
.ticket-stage::before{
  content:"";position:absolute;left:6%;right:6%;bottom:-26px;height:46px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--sombra),transparent);opacity:.9;
}
.ticket{background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 22%,rgba(231,220,203,0) 70%,rgba(231,220,203,.5) 100%)}

/* el cristal de las fotos: un reflejo que se mueve con el dedo (ui/fx.js pone --gx, --gy y --glare) */
.wb-photo::after,.pause-photo::after,.pause-shot::after,.rec::after,.end-photo::after,.end-polaroid::after,.map-photo::after,.pass::after,.np::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(85% 65% at var(--gx,28%) var(--gy,6%),rgba(255,255,255,.38),rgba(255,255,255,0) 62%);
  opacity:var(--glare,.4);transition:opacity .5s ease;
}
.rec::after{z-index:3;background:linear-gradient(124deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 30%),radial-gradient(85% 65% at var(--gx,28%) var(--gy,6%),rgba(255,255,255,.3),rgba(255,255,255,0) 62%)}
.pass{position:relative}

/* =====================================================================================================================
   VIDA (ui/fx.js): muelles al soltar, pegatinas que flotan y brillan, fotos que se inclinan hacia el dedo y la cortina entre pantallas
   ===================================================================================================================== */
:root{--muelle:cubic-bezier(.3,1.65,.45,1)}

/* al soltar, lo que se hunde vuelve con un muelle (y el botón gordo, además, se aplasta un pelín al pulsarlo) */
.btn{transition:transform .36s var(--muelle),box-shadow .36s var(--muelle),background-color .12s,opacity .2s ease,scale .36s var(--muelle)}
.btn:active:not(:disabled),.btn.is-down{scale:.985}
.quiz-option{transition:transform .34s var(--muelle),box-shadow .34s var(--muelle),opacity .2s,background-color .15s}
.quiz-joker,.mus-play{transition:transform .34s var(--muelle),box-shadow .34s var(--muelle),opacity .2s}
.quiz-step{transition:transform .34s var(--muelle),box-shadow .34s var(--muelle)}
.wheel-btn,.ruleta-key{transition:transform .34s var(--muelle),box-shadow .34s var(--muelle),background-color .1s}
.map-chip{transition:opacity .2s,transform .34s var(--muelle),box-shadow .34s var(--muelle),background-color .15s}
:is(.btn,.quiz-option,.quiz-joker,.mus-play,.quiz-step,.wheel-btn,.ruleta-key,.map-chip):active:not(:disabled){transition-duration:.05s;transition-timing-function:ease-out}

/* las pegatinas: flotan despacio (translate), se apartan del dedo (transform, ui/fx.js) y les cruza un destello de vinilo */
.stk{transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform 1s cubic-bezier(.2,.8,.2,1);animation:stk-flota 7s ease-in-out infinite}
.stk:nth-of-type(2n){animation-duration:8.6s;animation-delay:-2.8s}
.stk:nth-of-type(3n){animation-duration:6.1s;animation-delay:-4.4s}
@keyframes stk-flota{0%,100%{translate:0 0}50%{translate:0 -7px}}
.stk .stk-glint{animation:stk-glint 7s cubic-bezier(.5,0,.3,1) 1.6s infinite}
.stk:nth-of-type(2n) .stk-glint{animation-delay:4.4s}
@keyframes stk-glint{0%,64%{transform:translateX(0)}100%{transform:translateX(230px)}}

/* fotos, pases y tarjetas: se inclinan hacia el dedo y vuelven con muelle (las entradas de estos marcos pasan a translate/scale/rotate
   sueltos, para dejarle el transform a la inclinación) */
.fx-tilt{transform:perspective(800px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .8s var(--muelle)}
.fx-tilt.is-tilting{transition:transform .14s ease-out}
.end-polaroid.is-in{animation-name:pol-in-r,pol-sway}
@keyframes pol-in-r{0%{opacity:0;translate:0 -46px;scale:.82;rotate:calc(var(--rot,-2deg) - 10deg)}100%{opacity:1;translate:0 0;scale:1;rotate:var(--rot,-2deg)}}
.pause-photo{animation-name:pause-drop-r}
@keyframes pause-drop-r{0%{translate:0 -30px;rotate:-10.2deg;opacity:0}100%{translate:0 0;rotate:-2.2deg;opacity:1}}
.pause-shot,.end-prize{animation-name:rise-r}
@keyframes rise-r{0%{translate:0 22px;opacity:0}100%{translate:0 0;opacity:1}}

/* la cortina entre pantallas: el color de antes tapa un instante y el de la pantalla nueva sale del dedo con su canto */
.fx-cortina{
  position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:980;overflow:hidden;
  background:var(--bg);transition:opacity .34s ease;
}
.fx-cortina.is-out{opacity:0;pointer-events:none}
.fx-mancha{
  position:absolute;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--d);
  transform:scale(0);animation:fx-mancha .47s cubic-bezier(.65,0,.35,1) forwards;will-change:transform;
}
@keyframes fx-mancha{to{transform:scale(var(--k,12))}}
#app.fx-hold *,#app.fx-hold *::before,#app.fx-hold *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  .stk,.stk .stk-glint,.swipe::after{animation:none !important}
  .stk,.fx-tilt{transition:none}
  .stk,.fx-tilt{transform:none}
}

/* =====================================================================================================================
   CELEBRACIÓN: titulares con volumen, corazones que suben (final y premios), chispas al ganar, virutas y rayos en el rasca
   ===================================================================================================================== */
/* los titulares sobre el color de la pantalla: letras gordas con su canto (el color hondo de la pantalla) y una sombra blanda */
.t-hero{text-shadow:0 1px 0 var(--d),0 2px 0 var(--d),0 3px 0 var(--d),0 4px 0 var(--d),0 12px 16px var(--sombra)}
.t-xl,.end-lead,.end-making-title,.wallet-title,.mus-stake,.quiz-question,.map-question,.tl-hint,.wb-line,.stub-msg{
  text-shadow:0 1px 0 var(--d),0 2px 0 var(--d),0 3px 0 var(--d),0 10px 14px var(--sombra);
}
.t-l,.t-m{text-shadow:0 1px 0 var(--d),0 2px 0 var(--d),0 8px 12px var(--sombra)}
.end-text{text-shadow:0 2px 0 var(--d),0 10px 18px var(--sombra)}

/* corazones que suben despacio, en dos capas (cerca, más grandes y rápidos; lejos, pequeños y lentos): el final y los premios */
.fondo > .fondo-corazones{
  display:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 16%,#000 46%,transparent 86%);
  mask-image:linear-gradient(to top,transparent 0,#000 16%,#000 46%,transparent 86%);
}
html[data-step="end"] .fondo-corazones,html:has(.prize-screen) .fondo-corazones,html:has(#app > [class^="rv"]) .fondo-corazones{display:block}
.fondo-corazones::before,.fondo-corazones::after{
  content:"";position:absolute;left:0;right:0;top:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='240' viewBox='0 0 180 240'%3E%3Cdefs%3E%3Cpath id='h' d='M50 90C21 69 6 53 6 33 6 18 17 8 30 8c9 0 16 5 20 12 4-7 11-12 20-12 13 0 24 10 24 25 0 20-15 36-44 57z'/%3E%3C/defs%3E%3Cuse href='%23h' transform='translate(18 30) rotate(-12 13 13) scale(.27)' fill='%23fff' fill-opacity='.6'/%3E%3Cuse href='%23h' transform='translate(118 112) rotate(10 9 9) scale(.19)' fill='%23FFC530'/%3E%3Cuse href='%23h' transform='translate(62 196) rotate(-4 7 7) scale(.14)' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E");
  will-change:transform;
}
.fondo-corazones::before{height:calc(100% + 240px);background-size:180px 240px;animation:corazones-suben 15s linear infinite}
.fondo-corazones::after{height:calc(100% + 160px);background-size:120px 160px;background-position:60px 40px;opacity:.6;animation:corazones-suben-lejos 22s linear infinite}
@keyframes corazones-suben{to{transform:translateY(-240px)}}
@keyframes corazones-suben-lejos{to{transform:translateY(-160px)}}

/* el dinero ganado: dos chispas que se le pegan, como pegatinas */
.quiz-gain{position:relative}
.quiz-gain::before,.quiz-gain::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;background:var(--girasol);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C55 38 62 45 98 50 62 55 55 62 50 98 45 62 38 55 2 50 38 45 45 38 50 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C55 38 62 45 98 50 62 55 55 62 50 98 45 62 38 55 2 50 38 45 45 38 50 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:gain-chispa .8s cubic-bezier(.2,1.6,.4,1) .2s both;
}
.quiz-gain::before{left:-13px;top:-11px}
.quiz-gain::after{right:-10px;bottom:-8px;width:15px;height:15px;background:#fff;animation-delay:.34s}
@keyframes gain-chispa{0%{transform:scale(0) rotate(-60deg);opacity:0}100%{transform:none;opacity:1}}

/* el rasca: virutas de la capa al rascar (ui/scratch.js) y, al destapar un premio, rayos de luz girando detrás */
.scratch-flake{
  position:absolute;z-index:3;width:7px;height:5px;margin:-2px 0 0 -3px;border-radius:1.5px;pointer-events:none;
  background:#3F5BF2;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  animation:viruta .74s cubic-bezier(.25,.5,.5,1) forwards;
}
.scratch-flake:nth-of-type(3n){width:5px;height:4px;background:#2438C9}
@keyframes viruta{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx,8px),64px) rotate(var(--r,180deg));opacity:0}}
.scratch-result::before{
  content:"";position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,197,48,.42) 0deg 9deg,rgba(255,197,48,0) 9deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 22%,transparent 100%);mask-image:radial-gradient(closest-side,#000 22%,transparent 100%);
  transition:opacity .6s ease .2s;
}
.scratch-text{position:relative}
.scratch:has(.scratch-canvas.gone) .scratch-result::before,.scratch:not(:has(.scratch-canvas)) .scratch-result::before{opacity:1;animation:rayos-giro 26s linear infinite}
.scratch-result:has(.is-none)::before,.scratch-result:has(.scratch-photo)::before{display:none}

@media (prefers-reduced-motion:reduce){
  .fondo-corazones::before,.fondo-corazones::after,.scratch-result::before{animation:none !important}
  .quiz-gain::before,.quiz-gain::after{animation:none}
}

/* =====================================================================================================================
   ÚLTIMOS TOQUES: píldoras, huecos hundidos, pases de la Cartera, el Wrapped y las notas
   ===================================================================================================================== */
/* las píldoras de tinta (rótulos): un filo de luz y un canto fino */
.chip,.end-logo,.welcome-text .welcome-lead{
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 0 rgba(10,6,36,.28);
}
.ruleta-intro-kicker{box-shadow:inset 0 -2px 0 rgba(10,6,36,.08),0 3px 0 rgba(10,6,36,.25)}
/* lo hundido (ventanas de la caja fuerte, pistas, campos de texto, el medidor de la música): más hondo arriba, un filo de luz abajo */
.wheel-window,.safe-label,.ruleta-clue{background-image:linear-gradient(180deg,rgba(10,6,36,.22),rgba(10,6,36,0) 45%,rgba(255,255,255,.05))}
.wheel-window{box-shadow:inset 0 5px 0 var(--cobalto-dd),inset 0 -1.5px 0 rgba(255,255,255,.14),0 1.5px 0 rgba(255,255,255,.12)}
.safe-label,.ruleta-clue{box-shadow:inset 0 4px 0 var(--cobalto-dd),inset 0 -1.5px 0 rgba(255,255,255,.12),0 1.5px 0 rgba(255,255,255,.1)}
.mus-input,.ruleta-input{background-image:linear-gradient(180deg,rgba(231,220,203,.5),rgba(255,255,255,0) 40%)}
.mus-steps{background-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0) 50%);box-shadow:inset 0 5px 0 var(--tinta-d),0 1.5px 0 rgba(255,255,255,.3)}
.mus-steps li.is-now{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 var(--girasol-d)}
/* la ruleta: los marcadores de dinero con brillo y canto, y la rueda con su cúpula de luz (no gira: va encima del disco) */
.ruleta-cell{
  background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 52%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(10,6,36,.1),0 4px 0 rgba(10,6,36,.24),0 14px 16px -10px var(--sombra);
}
.ruleta-wheel::after{
  content:"";position:absolute;inset:1.6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.3),rgba(255,255,255,0) 44%),
    radial-gradient(circle at 50% 50%,rgba(10,6,36,0) 64%,rgba(10,6,36,.2) 100%);
}
/* el tablero de la ruleta: un bisel de luz alrededor de las bombillas */
.ruleta-frame{box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.35),0 6px 0 var(--tinta-d),0 24px 30px -14px var(--sombra)}
.ruleta-keys{box-shadow:inset 0 4px 0 var(--tinta-d),0 1.5px 0 rgba(255,255,255,.14)}

/* los pases de la Cartera: brillo de plástico arriba y su sombra blanda */
.pass{
  background-image:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 38%,rgba(10,6,36,0) 70%,rgba(10,6,36,.06) 100%);
  box-shadow:0 0 0 3px #fff,0 7px 0 3px var(--pd),0 8.5px 0 3px rgba(10,6,36,.12),0 22px 26px -12px var(--sombra);
}
.pass-vale{background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 45%)}
.pass-thumb{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.2),0 2px 0 rgba(10,6,36,.25)}

/* el Wrapped: la tarjeta de stories con su canto y su sombra sobre el cielo de estrellas */
.wrp-host{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 6px 0 var(--tinta-d),0 30px 40px -16px rgba(0,0,0,.7)}

/* notas y avisos sueltos */
.cam-outro,.pause-note{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 5px 0 rgba(10,6,36,.22),0 18px 22px -12px var(--sombra)}
.ad-chip,.ad-sound{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 4px 0 rgba(0,0,0,.35)}
.ad-sound{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),0 4px 0 var(--girasol-d),0 10px 14px -6px rgba(0,0,0,.5)}