/* Pantalla de la ruleta del Duelo · «Rotonda» (games/duelo/ruleta-escena.js),
   la que eligió Nico el 30-sep-2026. La rueda es la isleta de una rotonda vista
   desde arriba; arriba, la placa del marcador (azul = tú, --rc = el color de
   la dificultad de tu rival); al caer, la franja diagonal del color del tema
   (--tc) y el nombre letra a letra.
   Solo se anima transform/opacity. Letra ≥15 px de lectura, ≥12 px etiquetas. */

#screenS4.rl{ position:fixed; inset:0; padding:0; gap:0; justify-content:flex-start; align-items:stretch; overflow:hidden; isolation:isolate;
  background:#060608; color:#f2f2f7; --rc:#ffb020; --azul:#3b82f6; --pop:cubic-bezier(.3,1.6,.5,1); --cae:cubic-bezier(.2,.9,.3,1.25);
  font-family:'DM Sans',system-ui,sans-serif; }
#screenS4.rl .s4-title, #screenS4.rl .s4-hint, #screenS4.rl .arena-bg{ display:none; }
/* el cartel de wheel.js no se enseña: el tema lo estampa la franja */
#screenS4.rl .s4-banner{ display:none !important; }
#screenS4.rl .du-abandon{ z-index:30; }
.rl > *{ position:relative; z-index:2; }

/* ═════════ la escena: la rueda sobre su isleta pintada ═════════ */
.rl .rl-fondo{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.rl .rl-fondo::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,6,8,.7), transparent 20%, transparent 82%, rgba(6,6,8,.6)); }
.rl .rl-escena{ position:absolute; max-width:none; user-select:none; pointer-events:none; }
.rl .rl-zona{ position:absolute; inset:0; z-index:5; }
.rl .rl-zona > *{ position:absolute; margin:0; }
.rl .s4-wheel-mount{ z-index:5; }
.rl .s4-wheel-mount::before{ display:none; }
/* la sombra con filter se recalculaba al girar: fuera (el aro no se mueve,
   pero sin filtro la capa del plato no tiene nada que repintar) */
.rl .s4-wheel-svg{ filter:none; }
.rl .rl-capa{ pointer-events:none; z-index:6; }

/* luces que corren por el aro mientras gira */
.rl-luces{ position:absolute; inset:-4%; border-radius:50%; opacity:0; transition:opacity 200ms ease-out;
  -webkit-mask:radial-gradient(circle, transparent 64.5%, #000 65.5%, #000 68.5%, transparent 69.5%);
          mask:radial-gradient(circle, transparent 64.5%, #000 65.5%, #000 68.5%, transparent 69.5%); }
.rl-luces i{ position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, #fff6d8 0deg 2.5deg, #ffb347 2.5deg 4.5deg, transparent 4.5deg 11.25deg); will-change:transform; }
.rl-gira .rl-luces{ opacity:.95; }
.rl-gira .rl-luces i{ animation:rlCorre .22s linear infinite; }
@keyframes rlCorre{ to{ transform:rotate(11.25deg); } }
/* onda del color del tema al caer */
.rl-onda{ position:absolute; inset:0; border-radius:50%; opacity:0; box-shadow:0 0 0 6px var(--tc,#ffd36b), 0 0 40px 10px var(--tc,#ffd36b); }
.rl-onda.on{ animation:rlOnda 700ms ease-out; }
@keyframes rlOnda{ 0%{ opacity:.95; transform:scale(.95); } 100%{ opacity:0; transform:scale(1.5); } }
/* la mano que enseña a girar (se va al primer toque) */
.rl-mano{ position:absolute; right:-2%; bottom:6%; width:20%; aspect-ratio:1; opacity:0;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)); animation:rlMano 1.9s ease-in-out 1.3s infinite; }
.rl-mano svg{ width:100%; height:100%; }
@keyframes rlMano{
  0%{ opacity:0; transform:translate(10%,20%) rotate(12deg); }
  15%{ opacity:1; transform:translate(0,0) rotate(0); }
  55%{ opacity:1; transform:translate(-80%,-95%) rotate(-28deg); }
  75%,100%{ opacity:0; transform:translate(-95%,-110%) rotate(-32deg); } }
.rl-tocado .rl-mano{ animation:none; opacity:0; }

/* ═════════ el marcador: TÚ n · VS · n RIVAL (con su cara) ═════════ */
.rl .rl-marcador{ position:absolute; z-index:7; left:50%; top:calc(env(safe-area-inset-top,0px) + 62px); transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; white-space:nowrap; }
.rl-lado{ display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:8px; transform:skewX(-8deg); background:rgba(4,4,8,.72); }
.rl-lado > *{ transform:skewX(8deg); }
.rl-lado.azul{ border:2px solid var(--azul); box-shadow:0 0 14px -4px var(--azul); }
.rl-lado.rival{ border:2px solid var(--rc); box-shadow:0 0 14px -4px var(--rc); }
.rl-lado b{ font:800 italic clamp(.94rem,3.9vw,1.15rem)/1 'Syne',sans-serif; text-transform:uppercase; color:#fff; }
.rl-lado em{ font:800 italic clamp(1.3rem,5.6vw,1.8rem)/1 'Syne',sans-serif; color:#fff; }
.rl-lado.azul em{ text-shadow:2px 2px 0 #1d4fb8; }
.rl-lado.rival em{ text-shadow:2px 2px 0 color-mix(in srgb, var(--rc) 80%, #000); }
.rl-vs{ font:800 italic clamp(.94rem,3.9vw,1.2rem)/1 'Syne',sans-serif; color:#f6d06a; text-shadow:2px 2px 0 #6b4a10; }
.rl-cara{ position:relative; display:block; flex:none; width:clamp(30px,8.4vw,42px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:2px solid var(--rc); background:linear-gradient(180deg, color-mix(in srgb, var(--rc) 55%, #0a0a10), #0a0a10); }
.rl-cara img{ position:absolute; left:50%; top:4%; height:300%; width:auto; max-width:none; transform:translateX(-50%); }
/* en tablet, la placa crece con la pantalla */
@media (min-width:700px){ .rl .rl-marcador{ zoom:1.35; } }
@media (min-width:1000px){ .rl .rl-marcador{ zoom:1.6; } }

/* ═════════ al caer: la franja del color del tema y el nombre letra a letra ═════════ */
.rl .rl-franja, .rl .rl-sello{ position:absolute; left:-10%; right:-10%; top:var(--franja-y,38%); height:clamp(70px,13dvh,160px); margin-top:calc(clamp(70px,13dvh,160px) / -2); pointer-events:none; }
.rl .rl-franja{ z-index:8; transform:rotate(-9deg) translateX(-120%); opacity:0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--tc) 85%, #000), var(--tc) 30%, var(--tc) 70%, color-mix(in srgb, var(--tc) 85%, #000));
  box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 0 40px var(--tc), 0 18px 30px rgba(0,0,0,.6); }
.rl .rl-franja::before{ content:""; position:absolute; inset:0; opacity:.25;
  background:repeating-linear-gradient(-62deg, transparent 0 18px, #fff 18px 21px, transparent 21px 44px); }
.rl .rl-franja.on{ animation:rlFranja 380ms cubic-bezier(.2,.9,.3,1.1) forwards; }
@keyframes rlFranja{ from{ opacity:1; transform:rotate(-9deg) translateX(-120%); } to{ opacity:1; transform:rotate(-9deg) translateX(0); } }
.rl .rl-sello{ left:0; right:0; z-index:9; display:flex; align-items:center; justify-content:center; transform:rotate(-9deg); }
.rl .rl-sello b{ font-family:'Syne',system-ui,sans-serif; font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:-.01em; white-space:nowrap;
  font-size:clamp(2.4rem,15vw,7rem); line-height:1; transform:skewX(-8deg); opacity:0; color:#fff; -webkit-text-stroke:.03em #140c02;
  text-shadow:.05em .05em 0 color-mix(in srgb, var(--tc) 60%, #000), 0 0 .4em rgba(0,0,0,.5); }
.rl .rl-sello.on b{ opacity:1; }
.rl .rl-sello.on b i{ display:inline-block; font-style:normal; animation:rlLetra 340ms var(--pop) both; animation-delay:calc(80ms + var(--k) * var(--paso, 40ms)); }
@keyframes rlLetra{ 0%{ opacity:0; transform:translateY(-160%) scale(1.6); } 60%{ opacity:1; transform:translateY(6%) scale(.95); } 100%{ opacity:1; transform:none; } }

/* ═════════ entrada: la escena se asienta, la placa baja y la isleta gira a su sitio ═════════ */
.rl.rl-entra .rl-marcador{ animation:rlBaja .45s var(--cae) .1s both; }
@keyframes rlBaja{ from{ opacity:0; transform:translate(-50%,-80%); } to{ opacity:1; transform:translate(-50%,0); } }
.rl.rl-entra .rl-escena{ animation:rlEscena .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rlEscena{ from{ opacity:0; transform:scale(1.08); } to{ opacity:1; transform:none; } }
.rl.rl-entra .rl-zona > .s4-wheel-mount, .rl.rl-entra .rl-zona > .rl-capa{ animation:rlIsleta .6s var(--pop) .3s both; }
@keyframes rlIsleta{ from{ opacity:0; transform:scale(.3) rotate(-120deg); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  #screenS4.rl *, #screenS4.rl{ animation:none !important; transition:none !important; }
  .rl-mano{ opacity:1; }
  .rl .rl-franja.on{ opacity:1; transform:rotate(-9deg); }
}