/* ═══════════ PORTADA «THE TOURNAMENT» (2026-10-26) ═══════════
   Adaptada del kit del diseñador (Hawk_Rush_HTML_Kit_v1, hawk-rush.css).
   · Todo cuelga de #trHome y de clases .tr-*: no toca nada del juego.
   · Se enciende con html.tr-on (lo pone siempre el script de la portada);
     sin esa clase manda la portada anterior, intacta.
   · El lienzo es 9:16 y se dimensiona con cqw (unidades del contenedor), igual que
     el kit. En pantallas más altas que 9:16 se centra y el fondo sigue por fuera;
     en PC y acostado queda una columna central (máx. 480 px).
   · Letras: Anton (cifras, PLAY) y Barlow Condensed 900 (etiquetas). El kit usaba
     Impact/Arial Black, que el iPhone no trae.
   · Imágenes en art/torneo/: las del kit recomprimidas (11 MB → 0.4 MB). */
#trHome{display:none;}
html.tr-on #inicioCard,html.tr-on #helpBtn,html.tr-on #langBtn,html.tr-on #homeBtn,
html.tr-on #lockCard,html.tr-on #screen-inicio>.stadium-strip,html.tr-on #screen-inicio>.grain,
html.tr-on #menuCanvas{display:none !important;}
html.tr-on body:has(#screen-inicio.show) #muteBtn{display:none;}   /* el silencio vive en la partida */
html.tr-on #trHome{
  display:flex;position:fixed;inset:0;z-index:40;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  justify-content:center;align-items:center;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  background:#118efa;   /* el cielo lo pinta .tr-cielo (capas animadas); este es el color de su borde de ARRIBA:
                           si el teléfono rellena la franja de la barra de estado con el fondo, que no se note */
  --tr-azul:#0056ff;--tr-rojo:#ff0806;--tr-amarillo:#ffec00;--tr-marino:#05265b;
  --tr-disp:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --tr-cond:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
/* ── EL CIELO ANIMADO (2026-10-26) ──
   Capas sacadas del fondo plano del kit con proceso de imagen (scratchpad/fondo_capas4.py):
   cielo sin rayos ni nubes, rayos propios en una capa cuadrada que gira sin destapar
   bordes, y cada nube suelta. .tr-cielo-caja repite el encuadre «cover» del fondo
   original (941×1672): todo se coloca en % de esa caja. */
.tr-cielo{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#118efa;}
.tr-cielo-caja{position:absolute;left:50%;top:28.2vh;width:max(100vw,calc(100vh*941/1672));aspect-ratio:941/1672;translate:-50% -28.2%;   /* el centro de luz siempre a la altura del logo (en PC el «cover» lo sacaba por arriba) */
  background:url('../art/torneo/tr-cielo.webp') center/100% 100% no-repeat;}
/* Rayos: centro en (49.7%, 28.2%) de la caja; radio = 77.2% del alto (= 137.2% del ancho). */
.tr-rayos{position:absolute;left:calc(49.7% - 137.2%);top:calc(28.2% - 77.2%);width:274.4%;aspect-ratio:1;max-width:none;}
.tr-brillo{position:absolute;left:49.7%;top:28.2%;width:90%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(200,250,255,.55) 0%,rgba(140,225,255,.22) 35%,rgba(120,210,255,0) 68%);}
.tr-nube{position:absolute;max-width:none;}
.tr-nube.izq{left:0;top:51.97%;width:17.64%;}
.tr-nube.der{left:86.93%;top:59.5%;width:13.07%;}
.tr-nube.viaja{opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .tr-rayos{animation:trGiro 110s linear infinite, trRayosLuz 7s ease-in-out infinite;}
  .tr-brillo{animation:trRespiraLuz 5.5s ease-in-out infinite;}
  .tr-nube.izq{animation:trNubeIzq 9s ease-in-out infinite;}
  .tr-nube.der{animation:trNubeDer 11s ease-in-out infinite 1.5s;}
  .tr-nube.viaja.v1{top:9%;width:12%;animation:trCruza 75s linear infinite;}
  .tr-nube.viaja.v2{top:44%;width:15%;animation:trCruza 110s linear infinite -48s;}
}
@keyframes trGiro{to{rotate:360deg}}
@keyframes trRayosLuz{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes trRespiraLuz{0%,100%{opacity:.55;scale:.92}50%{opacity:1;scale:1.08}}
/* Las nubes de los bordes se mecen HACIA FUERA: su corte queda siempre fuera de la vista. */
@keyframes trNubeIzq{0%,100%{translate:0 0}50%{translate:-7% -3%}}
@keyframes trNubeDer{0%,100%{translate:0 0}50%{translate:8% -4%}}
@keyframes trCruza{0%{left:104%;opacity:0}6%{opacity:.75}94%{opacity:.75}100%{left:-20%;opacity:0}}
#trHome>.tr-screen{z-index:1;}
.tr-screen{position:relative;isolation:isolate;container-type:inline-size;flex:none;
  width:min(480px,100vw,max(calc(var(--appvh,100dvh)*9/16),300px));aspect-ratio:9/16;
  margin:auto;color:#fff;font-family:var(--tr-cond);font-weight:900;}
.tr-screen img{display:block;max-width:none;user-select:none;-webkit-user-drag:none;}
.tr-screen button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;}
.tr-screen button:focus-visible{outline:3px solid #fff700;outline-offset:3px;}

/* ── Marca y decoración ── */
.tr-brand{position:absolute;z-index:4;left:21%;top:3.5%;width:58%;height:18%;margin:0;display:flex;justify-content:center;align-items:center;}
.tr-brand img{width:100%;height:100%;object-fit:contain;}
.tr-mascot{position:absolute;z-index:2;left:50%;top:14.2%;height:21%;aspect-ratio:900/533;translate:-50% 0;}
.tr-mascot img{position:absolute;inset:0;width:100%;height:100%;}
/* Recortes sobre la imagen (900×533): el cuerpo va del hombro izquierdo (x≈300) al
   derecho (x≈600) y desde la gorra; cada ala llega un poco más allá de su hombro
   para que al girar no se abra un hueco bajo el cuerpo. */
/* Las alas NO incluyen la columna de la cabeza (39%–63.5%) por encima de los hombros: antes
   cada ala era media imagen, traía su copia de cabeza y gorra, y al girar se asomaba
   («se percibe la cabeza de atrás», dueño 2026-10-26). */
.tr-ala.izq{clip-path:polygon(0 0,39% 0,39% 60%,46% 60%,46% 100%,0 100%);transform-origin:37% 62%;}
.tr-ala.der{clip-path:polygon(63.5% 0,100% 0,100% 100%,54% 100%,54% 60%,63.5% 60%);transform-origin:63% 62%;}
/* El cuerpo (fijo, encima) cubre la columna de la cabeza ENTERA y se abre en los hombros. */
.tr-cuerpo{clip-path:polygon(39% 0,63.5% 0,63.5% 52%,67% 58%,67% 100%,33% 100%,33% 58%,39% 52%);}
.tr-deco{position:absolute;z-index:3;object-fit:contain;pointer-events:none;}
.tr-chile{width:10%;height:8%;}
.tr-chile.izq{left:7%;top:4.8%;transform:rotate(-14deg);}
.tr-chile.der{right:7%;top:4.8%;transform:scaleX(-1) rotate(-10deg);}
.tr-chile.borroso{width:6%;height:6%;filter:blur(2px);opacity:.6;}
.tr-chile.b1{left:4%;top:19.5%;transform:rotate(45deg);}
.tr-chile.b2{left:12%;top:28%;transform:rotate(35deg);}
.tr-chile.b3{right:5%;top:20%;transform:rotate(-60deg);}
.tr-chile.b4{right:14%;top:30%;transform:rotate(40deg);}
.tr-papas{left:4%;top:31.5%;width:13%;height:9%;}
.tr-pizza{right:3%;top:32.8%;width:13%;height:9%;}
.tr-letrero{position:absolute;z-index:5;left:20%;top:34.3%;width:60%;height:5.3%;object-fit:fill;}
/* Comida del juego en los huecos (en % del lienzo 9:16). */
.tr-comida{height:auto;filter:drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.28));}
.tr-comida.c1{left:1.5%;top:12.5%;width:11%;rotate:-12deg;}
.tr-comida.c2{right:1.5%;top:13%;width:10.5%;rotate:14deg;}
.tr-comida.c3{left:1%;top:79.6%;width:13.5%;rotate:-16deg;}
.tr-comida.c4{right:2%;top:80%;width:11.5%;rotate:12deg;}
/* Comida LEJANA (profundidad, como los chiles borrosos): pequeña, desenfocada, semitransparente
   y DETRÁS del halcón y de los paneles (z-index 1; el halcón es 2). */
.tr-lejos{z-index:1;height:auto;filter:blur(2px);opacity:.55;}
.tr-lejos.l1{left:5%;top:6.5%;width:6.5%;rotate:-20deg;}
.tr-lejos.l2{right:21%;top:1.2%;width:5.5%;rotate:15deg;}
.tr-lejos.l3{left:22%;top:.8%;width:6.5%;rotate:-8deg;}
.tr-lejos.l4{right:5%;top:8.5%;width:6%;rotate:10deg;}
.tr-lejos.l5{left:13%;top:24.5%;width:5.5%;rotate:-18deg;}
.tr-lejos.l6{right:12%;top:25.5%;width:6%;rotate:22deg;}
/* En PC sobra cielo a los lados: ahí flota más comida (en el teléfono no se ve). */
.tr-cielo-comida{display:none;}
@media (min-width:760px) and (min-aspect-ratio:1/1){
  /* ANCLADAS A LA COLUMNA, no a la pantalla: --col mide lo mismo que el lienzo (.tr-screen),
     y cada pieza se coloca a una distancia FIJA de su borde. En un monitor ancho ya no se
     van a las orillas (dueño, 2026-10-26: «se despegan mucho de los elementos centrales»). */
  .tr-cielo-comida{display:block;position:absolute;inset:0;--col:min(480px,100vw,max(calc(var(--appvh,100dvh)*9/16),300px));}
  .tr-cielo-comida img{position:absolute;width:clamp(52px,4.4vw,78px);height:auto;opacity:.95;translate:-50% -50%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));}
  .tr-cielo-comida .cc1{left:calc(50% - var(--col)/2 - 70px);top:20%;}
  .tr-cielo-comida .cc2{left:calc(50% - var(--col)/2 - 175px);top:47%;}
  .tr-cielo-comida .cc3{left:calc(50% - var(--col)/2 - 85px);top:76%;}
  .tr-cielo-comida .cc4{left:calc(50% + var(--col)/2 + 80px);top:24%;}
  .tr-cielo-comida .cc5{left:calc(50% + var(--col)/2 + 180px);top:53%;}
  .tr-cielo-comida .cc6{left:calc(50% + var(--col)/2 + 75px);top:80%;}
  /* y otras LEJANAS (borrosas, más chicas), entre las enfocadas */
  .tr-cielo-comida [class^=lj]{width:clamp(30px,2.6vw,46px);filter:blur(2.5px);opacity:.5;}
  .tr-cielo-comida .lj1{left:calc(50% - var(--col)/2 - 140px);top:30%;}
  .tr-cielo-comida .lj2{left:calc(50% - var(--col)/2 - 40px);top:62%;}
  .tr-cielo-comida .lj3{left:calc(50% + var(--col)/2 + 150px);top:36%;}
  .tr-cielo-comida .lj4{left:calc(50% + var(--col)/2 + 45px);top:66%;}
}
/* Brillo de «The Tournament»: una capa del MISMO tamaño recortada a la silueta del letrero (mask). */
.tr-letrero-brillo{position:absolute;z-index:6;left:20%;top:34.3%;width:60%;height:5.3%;pointer-events:none;
  -webkit-mask:url('../art/torneo/the-tournament.webp') center/100% 100% no-repeat;mask:url('../art/torneo/the-tournament.webp') center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%) no-repeat;background-size:300% 100%;background-position:100% 0;}

/* ── Torneos ── */
.tr-torneos{position:absolute;left:8.5%;top:39.4%;width:83%;height:28.2%;border-radius:3.5cqw;
  background:linear-gradient(130deg,#fff,#f0f5ff 65%,#fff);padding:1cqw 2.2cqw 1.5cqw;box-shadow:0 0 1cqw #c3f6ff;}
.tr-hola{display:flex;justify-content:center;align-items:baseline;gap:2cqw;margin:0 0 1.3cqw;height:5cqw;
  color:#555866;font-size:4cqw;font-weight:900;letter-spacing:.02em;white-space:nowrap;overflow:hidden;}
.tr-hola strong{font-family:var(--tr-disp);font-weight:400;font-size:5.6cqw;line-height:1;color:var(--tr-azul);
  max-width:46cqw;overflow:hidden;text-overflow:ellipsis;}
.tr-hola small{font-size:3.4cqw;color:var(--tr-azul);}
/* «BIENVENIDO» en NEGRO y en la misma letra que el nombre, casi de su tamaño y centrado
   con él (dueño, 2026-10-26: gris, pequeño y en otra letra «parecía fuera de lugar»). */
.tr-hola{align-items:center;gap:1.8cqw;}
.tr-hola>span{font-family:var(--tr-disp);font-weight:400;font-size:4.9cqw;line-height:1;color:#0b0f1a;letter-spacing:.03em;}
.tr-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.5cqw;height:calc(100% - 6.3cqw);}
.tr-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:0;border-radius:3cqw;padding:1.4cqw;
  text-align:left;box-shadow:inset 0 .4cqw .7cqw #ffffffb0,inset 0 -.8cqw .3cqw #0006;}
.tr-card.sem{background:linear-gradient(#ff0b09,#ff100a 75%,#e00000);}
.tr-card.mes{background:linear-gradient(#0869ff,#0054e9 75%,#0042b6);}
.tr-card-head{display:flex;align-items:center;justify-content:space-between;gap:.8cqw;height:9cqw;padding:0 .4cqw 1cqw .6cqw;}
.tr-card-titulo{font-size:4.2cqw;line-height:.92;font-weight:900;letter-spacing:.01em;text-transform:uppercase;}
.tr-card-titulo small{display:block;font-size:2.7cqw;line-height:1.08;letter-spacing:.02em;}
/* El reloj del torneo, GRANDE (muestra del dueño 2026-10-26): es lo que crea urgencia. */
.tr-reloj{display:flex;align-items:center;justify-content:center;gap:.8cqw;white-space:nowrap;flex:none;min-width:15cqw;height:7.2cqw;
  padding:0 1.4cqw;border-radius:2.4cqw;background:#6c0000;font-size:3.6cqw;font-weight:900;letter-spacing:.02em;line-height:1;
  box-shadow:inset 0 .3cqw .5cqw #0005;}
.tr-card.mes .tr-reloj{background:#00267c;}
.tr-reloj img{width:4cqw;height:4cqw;}
/* La letra de la unidad (D/H/M) delgada y un poco más chica: el número manda. */
.tr-reloj .tr-u{font-style:normal;font-weight:500;font-size:.8em;margin-left:.12em;opacity:.85;}
.tr-lugar{height:12cqw;flex:none;display:flex;align-items:center;justify-content:center;border-radius:2.1cqw;background:#fff;
  color:var(--tr-azul);font-family:var(--tr-disp);font-weight:400;font-size:10.5cqw;line-height:1;}
.tr-lugar.sin{font-size:4cqw;font-family:var(--tr-cond);font-weight:900;color:#5b6475;text-align:center;padding:0 1cqw;line-height:1.05;}
.tr-premio{display:block;position:relative;flex:1;min-height:0;border-radius:2.1cqw;background:linear-gradient(#b90005,#d50000);margin-top:1cqw;overflow:hidden;}
.tr-card.mes .tr-premio{background:linear-gradient(#003697,#00266f);}
.tr-premio-linea{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;height:7.2cqw;gap:.4cqw;padding:.5cqw .8cqw 0;}
.tr-oro{width:6.1cqw;height:6.5cqw;object-fit:contain;flex:none;}
.tr-premio-linea strong{font-size:3.6cqw;letter-spacing:.01em;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.tr-flecha{width:3.2cqw;height:4.5cqw;object-fit:contain;flex:none;}
.tr-regalo{position:absolute;bottom:-.2cqw;left:50%;transform:translateX(-50%);object-fit:contain;object-position:center bottom;}
.tr-regalo.sem{width:85%;height:calc(100% - 6.1cqw);}
.tr-regalo.mes{width:70%;height:calc(100% - 5.9cqw);}

/* ── Vidas (partidas del día) ── */
.tr-vidas{position:absolute;left:8.4%;top:68.4%;width:83.2%;height:8.8%;display:grid;grid-template-columns:40% 60%;align-items:center;
  border:.2cqw solid #fff;border-radius:3cqw;background:linear-gradient(160deg,#0068e6,#00327f 80%,#006cf6);
  box-shadow:inset 0 0 1.3cqw #16caff,0 0 .8cqw #7fe9ff;}
.tr-vidas-ico{height:73%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:.4cqw solid #fff;padding:0 1.5cqw;position:relative;}
.tr-corazones{display:flex;align-items:center;justify-content:center;gap:.1cqw;width:100%;}
.tr-corazones img{width:10cqw;height:10cqw;object-fit:contain;}
.tr-banco{position:absolute;right:.4cqw;top:-1.2cqw;min-width:7cqw;height:5cqw;padding:0 1.1cqw;border-radius:3cqw;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#ffe56a,#e9b10f);color:#4a2c00;font-family:var(--tr-disp);font-weight:400;font-size:3.4cqw;
  box-shadow:0 .3cqw .6cqw #0006,inset 0 .2cqw 0 #fff8;border:.25cqw solid #fff;}
.tr-banco[hidden]{display:none;}
.tr-sin-cap{display:none;color:var(--tr-amarillo);font-size:2.9cqw;font-weight:800;white-space:nowrap;margin:-.8cqw 0 0;}
.tr-vidas-txt{padding:0 2.4cqw;text-align:center;}
.tr-hay{margin:0;font-weight:900;line-height:1.07;text-transform:uppercase;}
.tr-hay strong{display:block;color:var(--tr-amarillo);font-family:var(--tr-disp);font-weight:400;font-size:5.8cqw;letter-spacing:.02em;}
.tr-hay span{display:block;font-size:3.7cqw;white-space:nowrap;}
.tr-compartir{display:none;}
.tr-compartir p{font-size:2.7cqw;font-weight:700;white-space:nowrap;margin:0 0 1.1cqw;overflow:hidden;text-overflow:ellipsis;}
.tr-btn-share{width:100%;height:7.5cqw;background:transparent url('../art/torneo/share-play-base.webp') center/100% 100% no-repeat;border:0;
  display:flex;align-items:center;justify-content:center;gap:1cqw;padding:0 2cqw;}
.tr-btn-share>span{display:flex;align-items:center;font-family:var(--tr-disp);font-weight:400;font-size:4.4cqw;line-height:1;letter-spacing:.02em;text-shadow:.15cqw .15cqw #002b6e;white-space:nowrap;}
.tr-btn-share .amp{color:var(--tr-amarillo);font-size:5cqw;}
.tr-sim{width:4cqw;height:4cqw;object-fit:contain;}
.tr-screen[data-estado=vacio] .tr-sin-cap{display:block;}
.tr-screen[data-estado=vacio] .tr-hay{display:none;}
.tr-screen[data-estado=vacio] .tr-compartir{display:block;}   /* manual v002 pág. 4: SHARE & PLAY siempre sin vidas */
/* Sin vidas y sin «compartir da vidas»: cuándo vuelven las 3. */
.tr-manana{display:none;margin:0;font-family:var(--tr-disp);font-weight:400;font-size:4.4cqw;line-height:1.1;color:var(--tr-amarillo);letter-spacing:.02em;text-transform:uppercase;}
.tr-screen[data-estado=vacio][data-comparte="0"] .tr-manana{display:none;}   /* el manual v002 no lleva reloj */
.tr-screen[data-estado=vacio] .tr-corazones img{height:8.5cqw;}
.tr-screen[data-estado=invitado] .tr-vidas-ico .tr-corazones{opacity:.55;}
/* Sin vidas (2026-11-05): el halcón con las manos en la cara ocupa el sitio de los
   corazones vacíos y asoma por encima del borde de la franja. */
#trHome .tr-ups{display:none;}   /* con #trHome: una regla general de imágenes de la portada la volvía visible */
/* Manual v002 (pág. 4): sin halcón; tres corazones GRISES + «No lives left today». */
.tr-screen[data-estado=vacio] .tr-corazones img{filter:grayscale(1) brightness(1.15);opacity:.9;}

/* ── PLAY y barra inferior ── */
.tr-play{position:absolute;left:16.5%;top:78.4%;width:67%;height:9.1%;background:transparent url('../art/torneo/play-base.webp') center/100% 100% no-repeat;
  border:0;display:flex;align-items:center;justify-content:center;gap:3cqw;padding:0 6cqw;isolation:isolate;z-index:6;}
/* JUGAR llama la atención: un resplandor que respira DETRÁS (z-index -1 dentro de su
   propio contexto), un brillo que lo cruza con la silueta del botón (mask) y un latido. */
.tr-play::before{content:'';position:absolute;inset:-28% -9%;z-index:-1;border-radius:50%;pointer-events:none;opacity:.55;
  background:radial-gradient(ellipse at center,rgba(255,70,40,.85) 0%,rgba(255,170,40,.45) 38%,rgba(255,220,90,0) 68%);}
.tr-play::after{content:'';position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url('../art/torneo/play-base.webp') center/100% 100% no-repeat;mask:url('../art/torneo/play-base.webp') center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.8) 50%,transparent 60%) no-repeat;background-size:320% 100%;background-position:100% 0;}
.tr-play img{width:8cqw;height:8cqw;}
.tr-play span{font-family:var(--tr-disp);font-size:10.5cqw;line-height:1;font-weight:400;letter-spacing:.03em;text-shadow:0 .4cqw 0 #8a0000;}
/* HOW TO PLAY: pastilla arriba a la izquierda, mismo lenguaje que la barra de abajo
   (azul marino, borde blanco, brillo interior). Medidas en cqw de la portada. */
.tr-como{position:absolute;left:3.5%;top:2.2%;z-index:6;display:flex;align-items:center;gap:1.6cqw;height:8.4cqw;padding:0 3.2cqw 0 1.2cqw;
  border:.35cqw solid #fff;border-radius:99px;background:linear-gradient(#0848b7,#052454);box-shadow:inset 0 0 .8cqw #b5e7ff,0 1cqw 2.4cqw rgba(0,30,90,.35);
  color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.tr-como span:last-child{font-size:3.4cqw;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.tr-como-ico{display:grid;place-items:center;width:6cqw;height:6cqw;border-radius:50%;background:var(--tr-amarillo,#ffd21f);color:#0a2a6e;
  font-family:var(--tr-disp);font-size:4.4cqw;line-height:1;box-shadow:0 .4cqw 0 #b07a00;}
.tr-como:active{transform:scale(.95);}
.tr-como:focus-visible{outline:.5cqw solid var(--tr-amarillo,#ffd21f);outline-offset:.6cqw;}
.tr-nav{position:absolute;left:7%;top:88.9%;width:86%;height:8.8%;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  border:.2cqw solid #fff;border-radius:3cqw;background:linear-gradient(#0848b7,#052454);box-shadow:inset 0 0 .6cqw #b5e7ff;}
.tr-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7cqw;border:0;background:transparent;height:100%;padding:0;min-width:0;}
.tr-nav button:not(:last-child)::after{content:'';position:absolute;right:0;top:21%;height:58%;border-right:.35cqw solid #fff;}
.tr-nav img{width:8.3cqw;height:8.3cqw;object-fit:contain;}
.tr-nav span{font-size:3.1cqw;font-weight:700;white-space:nowrap;letter-spacing:.02em;}
.tr-nav button[aria-current=page]{cursor:default;}
.tr-nav button[aria-current=page] span{color:var(--tr-amarillo);}

/* ═══ VIDA (2026-10-26) ═══ Solo transform/opacity (y las propiedades sueltas
   translate/rotate, que se SUMAN a los transform que ya traen chiles y regalos).
   Todo se apaga con «reducir movimiento». */
@media (prefers-reduced-motion:no-preference){
  /* El halcón bate DOS veces y planea: así se ve vivo, no un ventilador. */
  .tr-ala.izq{animation:trAlaIzq 3.2s ease-in-out infinite;}
  .tr-ala.der{animation:trAlaDer 3.2s ease-in-out infinite;}
  .tr-mascot{animation:trPlaneo 3.2s ease-in-out infinite;}
  /* El logo flota y cada tanto le pasa un brillo que respeta su silueta. */
  .tr-brand{animation:trFlotaLogo 4.8s ease-in-out infinite;}
  .tr-brand::after{content:'';position:absolute;inset:0;pointer-events:none;
    -webkit-mask:url('../art/torneo/hawk-rush-logo.webp') center/contain no-repeat;mask:url('../art/torneo/hawk-rush-logo.webp') center/contain no-repeat;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%) no-repeat;background-size:300% 100%;
    animation:trBrillo 5.5s ease-in-out infinite 1.2s;}
  /* La comida flota, cada pieza a su ritmo. */
  .tr-papas{animation:trFlota 3.6s ease-in-out infinite;}
  .tr-comida.c1{animation:trFlota 3.9s ease-in-out infinite .3s;}
  .tr-comida.c2{animation:trFlota 4.4s ease-in-out infinite 1.2s;}
  .tr-comida.c3{animation:trFlota 4.2s ease-in-out infinite .6s;}
  .tr-comida.c4{animation:trFlota 3.7s ease-in-out infinite 1.6s;}
  .tr-cielo-comida img{animation:trFlotaCielo 6s ease-in-out infinite;}
  .tr-cielo-comida .cc2{animation-delay:-1.5s;animation-duration:7s;}.tr-cielo-comida .cc3{animation-delay:-3s;}
  .tr-cielo-comida .cc4{animation-delay:-2s;animation-duration:6.6s;}.tr-cielo-comida .cc5{animation-delay:-4s;}.tr-cielo-comida .cc6{animation-delay:-.8s;animation-duration:7.4s;}
  .tr-pizza{animation:trFlota 4.1s ease-in-out infinite .8s;}
  .tr-chile.izq,.tr-chile.der{animation:trChile 3.1s ease-in-out infinite;}
  .tr-chile.der{animation-delay:1.1s;}
  .tr-chile.borroso{animation:trDeriva 6s ease-in-out infinite;}
  .tr-lejos{animation:trDeriva 7s ease-in-out infinite;}
  .tr-lejos.l2{animation-delay:-1.4s;animation-duration:8s;}.tr-lejos.l3{animation-delay:-2.6s;}
  .tr-lejos.l4{animation-delay:-3.8s;animation-duration:7.6s;}.tr-lejos.l5{animation-delay:-5s;}.tr-lejos.l6{animation-delay:-.7s;animation-duration:8.4s;}
  .tr-chile.b2{animation-delay:1.5s;}.tr-chile.b3{animation-delay:3s;}.tr-chile.b4{animation-delay:4.2s;}
  /* Los regalos respiran y les brotan destellos. */
  .tr-regalo{animation:trRespira 2.6s ease-in-out infinite;}
  .tr-regalo.mes{animation-delay:1.3s;}
  .tr-chispa{animation:trChispa 2.8s ease-in-out infinite var(--d,0s);}
  .tr-letrero-brillo{animation:trBrillo 4.2s ease-in-out infinite 2.4s;}
  .tr-play{animation:trLatido 3s ease-in-out infinite;}
  /* Los corazones llenos PALPITAN (lub-dub), cada uno un poco después del anterior. */
  .tr-corazones img.lleno{animation:trPalpita 1.4s ease-in-out infinite;}
  .tr-corazones img.lleno:nth-child(2){animation-delay:.18s;}
  .tr-corazones img.lleno:nth-child(3){animation-delay:.36s;}
  .tr-play::before{animation:trResplandor 1.6s ease-in-out infinite;}
  .tr-play::after{animation:trBrilloBtn 3s ease-in-out infinite .4s;}
}
@keyframes trPalpita{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.16)}20%{transform:scale(.98)}28%{transform:scale(1.1)}}
@keyframes trLatido{0%,62%,100%{scale:1}68%{scale:1.06}74%{scale:.99}80%{scale:1.04}88%{scale:1}}
@keyframes trResplandor{0%,100%{opacity:.4;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes trBrilloBtn{0%,55%{background-position:100% 0}100%{background-position:0 0}}
.tr-chispa{position:absolute;z-index:3;left:var(--x);top:var(--y);width:3.6cqw;height:3.6cqw;margin:-1.8cqw 0 0 -1.8cqw;
  scale:var(--t,1);pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 22%,#fff6b8 40%,#ffd84a 70%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);}
@media (prefers-reduced-motion:reduce){.tr-chispa{opacity:.85;transform:scale(.7);}}
#trNombre.tecleando::after{content:'';display:inline-block;width:.09em;height:.82em;margin-left:.08em;vertical-align:-.04em;
  background:currentColor;animation:trCursor .6s steps(1) infinite;}
@keyframes trAlaIzq{0%,46%,100%{transform:rotate(0)}8%{transform:rotate(9deg)}17%{transform:rotate(-3deg)}26%{transform:rotate(8deg)}35%{transform:rotate(-2deg)}}
@keyframes trAlaDer{0%,46%,100%{transform:rotate(0)}8%{transform:rotate(-9deg)}17%{transform:rotate(3deg)}26%{transform:rotate(-8deg)}35%{transform:rotate(2deg)}}
@keyframes trPlaneo{0%,46%,100%{transform:translateY(0)}8%{transform:translateY(-1.4%)}17%{transform:translateY(1%)}26%{transform:translateY(-1.2%)}35%{transform:translateY(.8%)}70%{transform:translateY(-2%)}}
@keyframes trFlotaLogo{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-.9cqw) rotate(-.8deg)}70%{transform:translateY(.4cqw) rotate(.6deg)}}
@keyframes trBrillo{0%,62%{background-position:100% 0}100%{background-position:0 0}}
@keyframes trFlota{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -1.6cqw;rotate:-5deg}}
@keyframes trChile{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -1.2cqw;rotate:8deg}}
@keyframes trFlotaCielo{0%,100%{translate:-50% -50%;rotate:-8deg}50%{translate:-50% calc(-50% - 18px);rotate:8deg}}   /* lleva el centrado: translate es el mismo */
@keyframes trDeriva{0%,100%{translate:0 0}50%{translate:1cqw -2.2cqw}}
@keyframes trRespira{0%,100%{scale:1}50%{scale:1.05}}
@keyframes trChispa{0%,100%{opacity:0;transform:scale(.2) rotate(0)}18%{opacity:1;transform:scale(1) rotate(45deg)}36%{opacity:0;transform:scale(.3) rotate(90deg)}}
@keyframes trCursor{50%{opacity:0}}

/* Al subir de lugar la tarjeta late (las monedas de la partida aterrizan aquí). */
.tr-lugar.late{animation:trLate .9s ease-out;}
@keyframes trLate{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
  .tr-play:active,.tr-btn-share:active,.tr-card:active,.tr-nav button:active{transform:scale(.97);}
}
@media (prefers-reduced-motion:reduce){.tr-lugar.late{animation:none;}}

/* ── FESTEJO DE LUGAR v2 · «podio de campeón» (2026-10-26) ──
   Fondo oscuro con rayos DORADOS girando; la mascota festeja asomando por ARRIBA, detrás
   de la tarjeta; la corona (o copa) se apoya en el borde, al frente, con destellos.
   Sin fondos amarillos: tarjeta azul profunda, texto blanco grande, acentos en oro.
   El #1 se distingue por el MARCO dorado; del #2 en adelante, marco plateado-azul. */
.trf{position:fixed;inset:0;z-index:9300;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,rgba(10,40,130,.78),rgba(2,8,30,.93) 70%);opacity:0;transition:opacity .3s ease;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;color:#fff;--oro:#ffd84a;--oro2:#f5a300;}
.trf.on{opacity:1;}
.trf-rayos{position:absolute;left:50%;top:40%;width:170vmax;aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(255,216,74,.32) 0deg 7deg,rgba(255,216,74,0) 7deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 30%,transparent 62%);mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 30%,transparent 62%);}
.trf-lluvia{position:absolute;inset:0;overflow:hidden;}
/* Dos capas: la mayoría cae DETRÁS de la tarjeta y unas pocas POR DELANTE (los toques las atraviesan). */
.trf-lluvia.frente{z-index:3;pointer-events:none;}
.trf-pieza{position:absolute;top:-14%;left:var(--x);width:clamp(56px,17vw,96px);height:auto;scale:var(--z);
  animation:trfCae var(--t) cubic-bezier(.35,.1,.6,1) var(--d) infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));}
@keyframes trfCae{0%{transform:translateY(-40px) rotate(0);opacity:0}8%{opacity:1}90%{opacity:1}100%{transform:translateY(125vh) rotate(var(--g));opacity:0}}

.trf-escena{position:relative;width:min(330px,100%);padding-top:clamp(120px,36vw,150px);transform:scale(.7);opacity:0;
  transition:transform .5s cubic-bezier(.2,1.5,.4,1),opacity .3s ease;}
.trf.on .trf-escena{transform:scale(1);opacity:1;}
/* La mascota: DETRÁS de la tarjeta (z-index menor); la tarjeta le tapa de la cintura abajo. */
.trf-masc{position:absolute;left:50%;top:0;width:clamp(170px,52vw,210px);height:auto;translate:-50% 0;z-index:0;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));}
.trf-card{position:relative;z-index:1;text-align:center;padding:24px 20px 16px;border-radius:26px;
  background:linear-gradient(170deg,#1d5cff 0%,#0b38c4 45%,#062474 100%);
  box-shadow:0 0 0 3px #cfe0ff,0 0 0 6px #6f8fd6,0 22px 50px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.35);}
.trf-escena.oro .trf-card{box-shadow:0 0 0 3px #fff3b0,0 0 0 7px var(--oro2),0 0 34px rgba(255,200,40,.55),0 22px 50px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.35);}
/* Insignia con destellos. #1: la corona SOBRE LA CABEZA de la mascota (coronada).
   #2+: la copa en la esquina de la tarjeta, inclinada — así nunca tapa la camiseta. */
.trf-insignia{position:absolute;z-index:2;width:84px;height:62px;}
.trf-escena.oro .trf-insignia{left:50%;top:0;translate:-50% -52%;}
.trf-escena.plata .trf-insignia{right:-10px;top:calc(clamp(120px,36vw,150px) - 40px);width:76px;height:70px;rotate:14deg;}
.trf-escena.plata .trf-card{padding-top:26px;}
.trf-ico{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));}
.trf-insignia::after{content:'';position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url('../art/torneo/crown-gold.webp') center/contain no-repeat;mask:url('../art/torneo/crown-gold.webp') center/contain no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) no-repeat;background-size:300% 100%;background-position:100% 0;}
.trf-escena.plata .trf-insignia::after{-webkit-mask-image:url('../art/torneo/trophy-gold.webp');mask-image:url('../art/torneo/trophy-gold.webp');}
.trf-chispa{position:absolute;left:var(--x);top:var(--y);width:18px;height:18px;margin:-9px 0 0 -9px;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff 0 22%,#fff6b8 42%,#ffd84a 72%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);}
.trf-tit{font-family:'Anton',Impact,sans-serif;font-size:32px;letter-spacing:.05em;line-height:1;color:var(--oro);
  text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 18px rgba(255,200,40,.35);}
.trf-pos{font-family:'Anton',Impact,sans-serif;font-size:104px;line-height:.95;margin:4px 0 0;color:#fff;
  text-shadow:0 5px 0 #021a5c,0 0 26px rgba(120,180,255,.45);}
.trf-escena.oro .trf-pos{background:linear-gradient(#fffbe0 10%,#ffd84a 55%,#f0a000 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 5px 0 #4a2600) drop-shadow(0 0 18px rgba(255,200,40,.5));}
.trf-linea{margin-top:4px;font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#bfe0ff;}
.trf-frase{margin:14px 0 0;font-size:22px;font-weight:800;line-height:1.18;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3);}
.trf-extra{margin:10px 0 0;padding:7px 10px;border-radius:10px;background:rgba(255,216,74,.14);border:1px solid rgba(255,216,74,.45);
  font-size:15px;font-weight:800;color:var(--oro);}
.trf-cierra{display:inline-block;margin:14px 0 14px;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.28);
  font-size:14px;font-weight:800;letter-spacing:.06em;color:#dbe9ff;}
.trf-jugar{display:block;width:100%;height:56px;border:0;border-radius:16px;cursor:pointer;
  background:linear-gradient(#ff3b30,#c80000);color:#fff;font-family:'Anton',Impact,sans-serif;font-size:27px;letter-spacing:.05em;
  box-shadow:0 6px 0 #7a0000,0 10px 20px rgba(0,0,0,.35);}
.trf-jugar:active{transform:translateY(3px);box-shadow:0 3px 0 #7a0000;}
.trf-luego{margin-top:10px;background:none;border:0;color:#cfe0ff;font-family:inherit;font-weight:800;font-size:16px;text-decoration:underline;cursor:pointer;}
.trf-escena.v2{--pt:clamp(165px,47vw,200px);padding-top:var(--pt);}
/* La tarjeta tapa al halcón un poco ABAJO de donde empieza el jersey (55 % del alto en la
   corona, 66 % en la copa, que lleva el trofeo encima de la cabeza). */
.trf-escena.v2 .trf-masc{width:auto;height:calc(var(--pt) / .55);}
.trf-escena.v2.plata .trf-masc{height:calc(var(--pt) / .58);}
.trf-escena.v2 .trf-ico,.trf-escena.v2 .trf-insignia::after{display:none;}
.trf-escena.v2.plata .trf-insignia{right:auto;left:50%;top:0;width:84px;height:62px;rotate:0deg;translate:-50% -30%;}
.trf-escena.v2.plata .trf-card{padding-top:24px;}
@media (max-height:640px){ .trf-escena.v2{--pt:150px;} }
@media (prefers-reduced-motion:no-preference){
  .trf-rayos{animation:trfGira 24s linear infinite;}
  .trf-masc{animation:trfSube .7s cubic-bezier(.2,1.6,.4,1) .25s both,trfFiesta 1.3s ease-in-out 1s infinite;}
  .trf-pos{animation:trfLatePos 1.6s ease-in-out infinite .6s;}
  .trf-insignia{animation:trfInsignia 2.4s ease-in-out infinite;}
  .trf-insignia::after{animation:trfBrillo 2.6s ease-in-out infinite .5s;}
  .trf-chispa{animation:trfChispa 1.9s ease-in-out infinite var(--d);}
}
@media (prefers-reduced-motion:reduce){.trf-chispa{opacity:.9;}}
@keyframes trfGira{to{rotate:360deg}}
@keyframes trfSube{from{transform:translateY(55%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes trfFiesta{0%,100%{rotate:0deg}25%{rotate:-3.5deg}75%{rotate:3.5deg}}
@keyframes trfLatePos{0%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(1)}}
@keyframes trfInsignia{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes trfBrillo{0%,50%{background-position:100% 0}100%{background-position:0 0}}
@keyframes trfChispa{0%,100%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:1;transform:scale(1.15) rotate(45deg)}55%{opacity:0;transform:scale(.3) rotate(90deg)}}
@media (max-height:640px){ .trf-pos{font-size:84px;} .trf-frase{font-size:19px;} .trf-escena{padding-top:110px;} .trf-masc{width:160px;} .trf-escena.plata .trf-insignia{top:70px;} }
/* FESTEJO AL ESTILO DEL BANNER «GAME ON, HIGHER RANKS AWAIT» (2026-11-06): la tarjeta ya
   no es azul plano. Fondo = bar nocturno desenfocado (art/torneo/trf-fondo-{azul,oro}.webp,
   sin textos; generado por código) + marco de NEÓN como las cajas del banner: azul para
   2.º en adelante, dorado para el #1. Letra Montserrat gruesa; el número en degradado. */
.trf-escena.v2 .trf-card{border:2.5px solid #5aa8ff;border-radius:22px;
  background:#030818 url('../art/torneo/trf-fondo-azul.webp') 50% 40%/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(170,215,255,.45),inset 0 0 26px rgba(47,107,255,.5),0 0 12px #2f6bff,0 0 34px rgba(47,107,255,.65),0 24px 50px rgba(0,0,0,.6);}
.trf-escena.v2.oro .trf-card{border-color:#ffc93a;background-image:url('../art/torneo/trf-fondo-oro.webp');
  box-shadow:inset 0 0 0 1px rgba(255,235,160,.5),inset 0 0 26px rgba(255,170,30,.45),0 0 12px #ffb000,0 0 34px rgba(255,180,20,.6),0 24px 50px rgba(0,0,0,.6);}
.trf-escena.v2 .trf-tit{font-family:'Montserrat','Barlow Condensed',sans-serif;font-weight:800;font-size:15px;letter-spacing:.2em;color:#fff;
  text-shadow:0 0 10px rgba(120,180,255,.6);}
.trf-escena.v2 .trf-pos{font-family:'Montserrat','Anton',sans-serif;font-weight:900;font-size:96px;letter-spacing:-.03em;line-height:1;margin:6px 0 2px;
  background:linear-gradient(#ffffff 15%,#cfe3ff 55%,#7fb0ff 92%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 4px 0 #021a5c) drop-shadow(0 0 16px rgba(80,150,255,.7));}
.trf-escena.v2.oro .trf-pos{background-image:linear-gradient(#fffbe0 10%,#ffd84a 52%,#e89400 92%);
  filter:drop-shadow(0 4px 0 #4a2600) drop-shadow(0 0 18px rgba(255,190,30,.6));}
.trf-escena.v2 .trf-linea{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;color:#8fc3ff;}
.trf-escena.v2.oro .trf-linea{color:#ffd77a;}
.trf-escena.v2 .trf-frase{font-family:'Montserrat',sans-serif;font-weight:600;font-size:19px;line-height:1.25;color:#dff3ff;text-shadow:0 2px 6px rgba(0,0,0,.7);}
.trf-escena.v2 .trf-extra{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;background:rgba(10,8,0,.55);border-color:#ffc93a;box-shadow:0 0 10px rgba(255,190,30,.35);}
.trf-escena.v2 .trf-cierra{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;color:#cfe6ff;
  background:rgba(3,10,32,.75);border:1.5px solid rgba(90,168,255,.75);box-shadow:0 0 10px rgba(47,107,255,.45);}
.trf-escena.v2.oro .trf-cierra{border-color:rgba(255,201,58,.8);box-shadow:0 0 10px rgba(255,180,20,.4);color:#ffeab0;}
.trf-escena.v2 .trf-jugar{font-family:'Montserrat','Anton',sans-serif;font-weight:900;font-size:22px;letter-spacing:.06em;border-radius:14px;
  border:2px solid #ffe9a0;background:linear-gradient(#ffd84a,#f0a000);color:#2a1600;text-shadow:0 1px 0 rgba(255,255,255,.4);
  box-shadow:0 0 14px rgba(255,190,30,.7),0 5px 0 #8a5200,0 10px 22px rgba(0,0,0,.45);}
.trf-escena.v2 .trf-jugar:active{transform:translateY(3px);box-shadow:0 0 10px rgba(255,190,30,.6),0 2px 0 #8a5200;}
.trf-escena.v2 .trf-luego{font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:#9fc4ff;}
@media (max-height:640px){ .trf-escena.v2 .trf-pos{font-size:76px;} }
/* LÁMINA DE CHATGPT (2026-11-06): la escena completa es UNA imagen 2:3
   (art/torneo/festejo-{oro,azul}.webp: halcón + bar + marco de neón, SIN textos). Los
   textos vivos van dentro del marco: hueco medido en la imagen 1024x1536 = x 9.8-89.6 %,
   y 31.6-92 %. Letra en cqh del hueco para que quepa igual en cualquier teléfono. */
.trf-escena.v2.lam{width:min(100%,calc((100dvh - 40px) * 2 / 3),520px);aspect-ratio:2/3;padding:0;border-radius:22px;overflow:hidden;
  background:#030818 url('../art/torneo/festejo-azul.webp') 50% 50%/100% 100% no-repeat;box-shadow:0 0 30px rgba(47,107,255,.45),0 24px 60px rgba(0,0,0,.65);}
.trf-escena.v2.lam.oro{background-image:url('../art/torneo/festejo-oro.webp');box-shadow:0 0 30px rgba(255,180,20,.45),0 24px 60px rgba(0,0,0,.65);}
.trf-escena.v2.lam .trf-masc,.trf-escena.v2.lam .trf-insignia{display:none;}
.trf-escena.v2.lam .trf-card{position:absolute;left:13%;right:13%;top:33.5%;height:56.5%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;container-type:size;}
.trf-escena.v2.lam .trf-tit{font-size:min(5.2cqh,7cqw);}
.trf-escena.v2.lam .trf-pos{font-size:min(23cqh,36cqw);margin:1cqh 0 0;}
.trf-escena.v2.lam .trf-linea{font-size:min(3.8cqh,4.6cqw);margin-top:.5cqh;}
.trf-escena.v2.lam .trf-frase{font-size:min(5.6cqh,7cqw);line-height:1.2;margin:2.4cqh 0 0;}
.trf-escena.v2.lam .trf-extra{font-size:min(4cqh,5cqw);margin:2cqh 0 0;padding:1cqh 3cqw;}
.trf-escena.v2.lam .trf-cierra{font-size:min(3.7cqh,4.6cqw);margin:2.4cqh 0;padding:.8cqh 4cqw;}
.trf-escena.v2.lam .trf-jugar{flex:none;height:min(13cqh,18cqw);font-size:min(6.4cqh,8cqw);}
/* Dueño 2026-11-07: TODA la comida cae POR DELANTE de la lámina (sin bloquear toques). */
.trf:has(.trf-escena.lam) .trf-lluvia{z-index:3;pointer-events:none;}
.trf-escena.v2.lam .trf-luego{font-size:min(4.4cqh,5.2cqw);margin-top:1.6cqh;}

/* ── TOURNAMENT PRIZES (manual v001 págs. 8 y 13-14): pantalla completa, la misma que
   Prizes del portal (cliente/premios.css). Azul de Hawk Rush con rayos, pestaña activa
   roja, medallas oro / plata / bronce (arte de ChatGPT, el número va encima en código)
   y PLAY NOW rojo. CABE EN UNA PANTALLA: la columna mide el alto del teléfono, las filas
   se reparten lo que queda (las tres primeras un poco más) y su letra se mide en cqh/cqw
   de su propia fila. La comida flota, le pasa un brillo y titila una chispa. ── */
.tpz{position:fixed;inset:0;z-index:95;display:none;
  background:repeating-conic-gradient(from 0deg at 50% 16%,rgba(255,255,255,.07) 0 7deg,transparent 7deg 18deg),
             radial-gradient(90% 60% at 50% 16%,#3fb2ff 0%,#1683f2 45%,#0b58cf 100%);}
.tpz.on{display:block;animation:tpzEntra .22s ease-out;}
body:has(#tpzOv.on) #cintas{display:none;}   /* los avisos («¿Te avisamos…?») no tapan PLAY NOW mientras Premios está abierta */
@keyframes tpzEntra{from{opacity:0}to{opacity:1}}
.tpz-col{box-sizing:border-box;height:100%;max-width:480px;margin:0 auto;overflow:hidden auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:min(1.1dvh,9px);
  padding:calc(env(safe-area-inset-top,0px) + min(1.8dvh,14px)) 16px calc(env(safe-area-inset-bottom,0px) + min(2dvh,18px));color:#fff;font-family:var(--cond,'Barlow Condensed',sans-serif);}
.tpz-col > *{flex:none;}
.tpz-volver{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;padding:min(.9dvh,7px) .95rem;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#1d5fe0,#0b37a8);border:2px solid #8fc3ff;box-shadow:0 3px 0 #06205e;color:#fff;
  font:400 clamp(14px,2.1dvh,17px)/1 var(--tpz-letra);letter-spacing:.04em;text-transform:uppercase;}
.tpz-volver .ico{width:1.05em;height:1.05em;}
.tpz{--tpz-letra:'Lilita One','Anton',Impact,sans-serif;}   /* la letra redonda y gruesa del manual */
.tpz-tit{margin:0;text-align:center;font:400 min(8.2vw,4.6dvh,40px)/1 var(--tpz-letra);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;
  -webkit-text-stroke:.12em #06205e;paint-order:stroke fill;text-shadow:0 .09em 0 #06205e,0 0 18px rgba(0,30,110,.45);}
.tpz-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:18px;background:#fff;box-shadow:0 4px 0 #06205e;}
.tpz-tabs button{display:grid;place-items:center;min-height:min(6.4dvh,54px);padding:.3rem .4rem;border:0;border-radius:14px;cursor:pointer;color:#fff;
  font:400 min(4.7vw,2.4dvh,19px)/1.02 var(--tpz-letra);letter-spacing:.02em;text-transform:uppercase;-webkit-text-stroke:.1em #06205e;paint-order:stroke fill;background:linear-gradient(180deg,#123f9e,#0a2a7a);}
.tpz-tabs button[aria-selected="true"]{background:linear-gradient(180deg,#ff3b3b,#c40d14);box-shadow:inset 0 2px 0 rgba(255,255,255,.35);}
.tpz-tabs button:focus-visible{outline:3px solid #ffc928;outline-offset:2px;}
.tpz-col > .tpz-cuerpo{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:min(1dvh,8px);}
.tpz-nota{flex:none;display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0;padding:min(1dvh,8px) .8rem;border-radius:99px;
  background:linear-gradient(180deg,#fff,#dcecff);color:#0a2a7a;font-weight:700;font-size:min(4.2vw,2dvh,16px);line-height:1.2;text-align:center;box-shadow:0 3px 0 rgba(6,32,94,.45);}
.tpz-nota .ico{flex:none;width:1.35em;height:1.35em;color:#5a6b86;}
.tpz-lista{flex:1 1 auto;min-height:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:min(1dvh,8px);}
.tpz-fila{flex:1 1 0;min-height:0;max-height:100px;container-type:size;position:relative;display:grid;grid-template-columns:clamp(52px,18%,92px) minmax(0,1fr) 38%;align-items:center;
  border-radius:14px;border:2px solid #7cc0ff;background:linear-gradient(180deg,#1557dc,#0a2f8f);box-shadow:0 3px 0 #06205e;}
.tpz-fila--1,.tpz-fila--2,.tpz-fila--3{flex-grow:1.6;max-height:128px;}
.tpz-lugar{align-self:stretch;display:grid;place-items:center;padding:0 2px;font:400 max(15px,min(40cqh,8.4cqw))/1 var(--tpz-letra);text-align:center;white-space:nowrap;
  -webkit-text-stroke:.12em #06205e;paint-order:stroke fill;
  border-right:2px solid rgba(124,192,255,.55);border-radius:12px 0 0 12px;background:linear-gradient(180deg,#1b63ea,#0b3aa8);text-shadow:0 2px 0 #06205e;}
.tpz-lugar sup{font-size:.55em;vertical-align:.7em;margin-left:.04em;}
.tpz-lugar--rango{font-size:max(11px,min(30cqh,5cqw));letter-spacing:-.02em;}
.tpz-lugar--m1,.tpz-lugar--m2,.tpz-lugar--m3{border-right:0;padding:6% 4% 4%;}
.tpz-lugar--m1{background:url(../art/premios/medalla-oro.webp) center / contain no-repeat;text-shadow:0 2px 0 #8a5200,0 0 6px rgba(120,60,0,.5);}
.tpz-lugar--m2{background:url(../art/premios/medalla-plata.webp) center / contain no-repeat;text-shadow:0 2px 0 #2c5f9e,0 0 6px rgba(20,60,120,.5);}
.tpz-lugar--m3{background:url(../art/premios/medalla-bronce.webp) center / contain no-repeat;text-shadow:0 2px 0 #6b3204,0 0 6px rgba(90,40,0,.5);}
.tpz-lugar--m1 > span,.tpz-lugar--m2 > span,.tpz-lugar--m3 > span{translate:0 12%;font-size:.9em;}
.tpz-txt{display:flex;flex-direction:column;gap:2px;padding:0 3px 0 min(3cqw,11px);position:relative;z-index:1;}
.tpz-txt b{font:400 max(11px,min(28cqh,5.9cqw))/.98 var(--tpz-letra);letter-spacing:.01em;text-transform:uppercase;color:#ffc928;
  -webkit-text-stroke:.13em #06205e;paint-order:stroke fill;text-shadow:0 .08em 0 #06205e;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;padding-block:.06em;}
.tpz-txt small{font-size:max(9px,min(12.5cqh,3.1cqw));line-height:1.05;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#fff;font-weight:800;text-shadow:0 1px 0 #06205e,0 0 3px rgba(6,32,94,.6);}
.tpz-txt em{align-self:flex-start;margin-top:2px;padding:1px 7px;border-radius:99px;background:#ffc928;color:#3a2600;font-style:normal;font-weight:900;font-size:max(10px,min(14cqh,3cqw));letter-spacing:.04em;text-transform:uppercase;}
.tpz-fila--1 .tpz-txt b{color:#fff;}
.tpz-fila--1{border-color:#ffd65a;background:linear-gradient(100deg,#8a5200,#d79000 55%,#ffcc3a);}
.tpz-fila.tuyo{border-color:#ffc928;box-shadow:0 3px 0 #06205e,0 0 0 3px rgba(255,201,40,.55),0 0 18px rgba(255,201,40,.55);}
/* El texto se acomoda al alto de SU fila: alta = título en dos renglones + detalle;
   media = todo en un renglón; muy baja = solo el título. Nunca se sale de la fila. */
@container (max-height:57px){
  .tpz-txt b{font-size:max(11px,min(36cqh,5.9cqw));}        /* el nombre nunca se corta: sigue en hasta dos renglones */
  .tpz-txt small{-webkit-line-clamp:1;font-size:max(9px,min(19cqh,3cqw));}
}
/* Si el nombre ocupa dos renglones en una fila media, el detalle cede su lugar. */
@container (max-height:57px) and (max-width:330px){ .tpz-txt small{display:none;} }
@container (max-height:36px){ .tpz-txt small{display:none;} .tpz-txt b{font-size:max(11px,min(46cqh,5.6cqw));} }
.tpz-img-w{position:relative;align-self:stretch;display:block;margin:-4% 2% -4% 0;--i:0;}
.tpz-img-w img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;filter:drop-shadow(0 4px 6px rgba(0,20,70,.45));}
.tpz-img-w::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 49%,rgba(255,250,225,.3) 54%,transparent 61%) 160% 0 / 260% 100% no-repeat;
  -webkit-mask:var(--img) right center / contain no-repeat;mask:var(--img) right center / contain no-repeat;}
.tpz-img-w::before{content:"";position:absolute;z-index:2;right:18%;top:8%;width:min(22cqh,5cqw);aspect-ratio:1;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff 0 16%,rgba(255,236,160,.95) 30%,transparent 64%);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);}
.tpz-mes{flex:1 1 0;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:min(1dvh,6px);padding:min(2dvh,16px) 14px min(2.2dvh,18px);border-radius:18px;
  border:2px solid #7cc0ff;background:radial-gradient(70% 55% at 50% 55%,#2a8cff 0%,#0c48c4 55%,#0a2a7a 100%);box-shadow:0 4px 0 #06205e;text-align:center;}
.tpz-mes .tpz-lugar{position:absolute;left:10px;top:10px;border:0;border-radius:10px;padding:5px 8px;font-size:21px;}
.tpz-mes-tit{flex:none;font:400 min(9.6vw,5dvh,42px)/1 var(--tpz-letra);-webkit-text-stroke:.1em #06205e;paint-order:stroke fill;text-transform:uppercase;text-shadow:0 3px 0 #06205e;text-wrap:balance;}
.tpz-mes .tpz-img-w{flex:1 1 auto;min-height:0;width:min(86%,320px);margin:0;}
.tpz-mes .tpz-img-w img{object-position:center;filter:drop-shadow(0 0 22px rgba(120,190,255,.7));}
.tpz-mes .tpz-img-w::after{-webkit-mask-position:center;mask-position:center;}
.tpz-mes .tpz-img-w::before{width:min(9vw,3.6dvh);right:20%;top:12%;}
.tpz-mes-pie{flex:none;font-weight:700;font-size:min(4.4vw,2.1dvh,17px);}
.tpz-jugar{align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-width:min(78%,320px);cursor:pointer;
  padding:min(1.5dvh,12px) 26px;border-radius:99px;border:3px solid #fff;background:linear-gradient(180deg,#ff4545,#d00d16 60%,#a8070e);
  box-shadow:0 5px 0 #6d0006,0 10px 22px rgba(120,0,0,.35);color:#fff;font:400 min(7.4vw,3.6dvh,28px)/1 var(--tpz-letra);letter-spacing:.03em;text-transform:uppercase;text-shadow:0 2px 0 #7a0007;}
.tpz-play{width:0;height:0;border-style:solid;border-width:.5em 0 .5em .8em;border-color:transparent transparent transparent #fff;}
.tpz-jugar:active{transform:translateY(3px);box-shadow:0 2px 0 #6d0006;}
@media (prefers-reduced-motion:no-preference){
  .tpz-img-w{animation:tpzFlota 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.55s);}
  .tpz-img-w::after{animation:tpzBrillo 4.2s ease-in-out infinite;animation-delay:calc(1s + var(--i) * .45s);}
  .tpz-img-w::before{animation:tpzChispa 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * .5s);}
  .tpz-fila--1 .tpz-lugar,.tpz-mes .tpz-img-w img{animation:tpzLate 2.6s ease-in-out infinite;}
}
@keyframes tpzFlota{0%,100%{translate:0 0;rotate:0deg;}50%{translate:0 -5%;rotate:-1.5deg;}}
@keyframes tpzBrillo{0%{background-position:160% 0;}40%,100%{background-position:-60% 0;}}
@keyframes tpzChispa{0%,100%{opacity:0;scale:.3;rotate:0deg;}45%{opacity:1;scale:1;rotate:45deg;}75%{opacity:0;scale:.5;rotate:90deg;}}
@keyframes tpzLate{0%,100%{filter:drop-shadow(0 0 0 rgba(255,214,90,0));}50%{filter:drop-shadow(0 0 10px rgba(255,214,90,.85));}}
@media (prefers-reduced-motion:reduce){ .tpz.on{animation:none;} }

/* ═══ ARRANQUE SIN BLOQUES PELONES (dueño 2026-10-28) ═══
   Las tarjetas son CSS y salían al instante, antes que su arte: se veían cajas de colores
   sin diseño. Ahora la columna espera a que su arte esté descargado Y a que el script la
   haya pintado con tus datos (window.__trListo pone .tr-listo; tope 5 s desde que corre el
   script) y entra de golpe. Mientras, solo el cielo y un aro dorado. Red de seguridad: si
   el script nunca llegara, a los 12 s se muestra igual. */
html.tr-on #trHome:not(.tr-listo)>.tr-screen{opacity:0;animation:trSeguro 0s 12s forwards;}
@keyframes trSeguro{to{opacity:1}}
html.tr-on #trHome:not(.tr-listo)::after{content:'';position:fixed;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;z-index:2;
  border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:#ffd84a;opacity:0;
  animation:trAro .8s linear infinite,trAroSale .2s .3s forwards;}
@keyframes trAro{to{rotate:360deg}}
@keyframes trAroSale{to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html.tr-on #trHome.tr-listo>.tr-screen{animation:trEntra .45s cubic-bezier(.2,1.2,.4,1) both;}
}
@keyframes trEntra{from{opacity:0;scale:.96}to{opacity:1;scale:1}}

/* ═══ CELULAR ACOSTADO (dueño 2026-10-28: «no se ve bien») ═══
   El lienzo 9:16 en horizontal obligaba a hacer scroll. Aquí se parte en DOS columnas
   sin cambiar ningún tamaño: el lienzo conserva su ancho de diseño (--tr-wp, así todos
   los cqw siguen valiendo lo mismo) y solo se recolocan las piezas:
   · izquierda (x −95 %): logo, halcón, «The Tournament», chiles y comida;
   · derecha (el lienzo mismo): torneos, vidas, JUGAR y la barra, subidas 66.5 cqw.
   El «escenario» mide 111 cqw de alto (lo que ocupa la columna derecha + aire) y se centra
   en la pantalla con translate. Solo celulares: alto ≤ 560 px. */
@media (orientation:landscape) and (max-height:560px){
  html.tr-on #trHome{overflow:hidden;align-items:flex-start;justify-content:center;
    --tr-wp:min(46vw,calc((var(--appvh,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*.9));}
  #trHome>.tr-screen{width:var(--tr-wp);margin:0;
    translate:47.5% calc((var(--appvh,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--tr-wp)*1.11)/2);}
  #trHome .tr-cielo-comida{display:none;}
  #trHome .tr-chile.izq{left:-88%;top:25.5cqw;}
  #trHome .tr-chile.der{right:102%;top:25.5cqw;}
  #trHome .tr-chile.b1{left:-91%;top:51.7cqw;}
  #trHome .tr-chile.b2{left:-83%;top:66.8cqw;}
  #trHome .tr-chile.b3{right:100%;top:52.6cqw;}
  #trHome .tr-chile.b4{right:109%;top:70.3cqw;}
  #trHome .tr-papas{left:-91%;top:73.0cqw;}
  #trHome .tr-pizza{right:98%;top:75.3cqw;}
  #trHome .tr-letrero{left:-75%;top:78.0cqw;}
  #trHome .tr-letrero-brillo{left:-75%;top:78.0cqw;}
  #trHome .tr-comida.c1{left:-93.5%;top:39.2cqw;}
  #trHome .tr-comida.c2{right:96.5%;top:40.1cqw;}
  #trHome .tr-lejos.l1{left:-90%;top:28.6cqw;}
  #trHome .tr-lejos.l2{right:116%;top:19.1cqw;}
  #trHome .tr-lejos.l3{left:-73%;top:18.4cqw;}
  #trHome .tr-lejos.l4{right:100%;top:32.1cqw;}
  #trHome .tr-lejos.l5{left:-82%;top:60.6cqw;}
  #trHome .tr-lejos.l6{right:107%;top:62.3cqw;}
  #trHome .tr-brand{left:-74%;top:23.2cqw;}
  #trHome .tr-mascot{left:-45%;top:42.2cqw;}
  #trHome .tr-como{left:-88%;top:4cqw;}   /* acostado: arriba del logo, en la mitad izquierda */
  #trHome .tr-torneos{top:3.5cqw;}
  #trHome .tr-vidas{top:55.1cqw;}
  #trHome .tr-play{top:72.9cqw;}
  #trHome .tr-nav{top:91.5cqw;}
  #trHome .tr-comida.c3{left:-93%;top:92cqw;width:12%;}
  #trHome .tr-comida.c4{left:-20%;top:94cqw;width:10%;}
}

/* ═══ FESTEJO CON EL CELULAR ACOSTADO (2026-10-28) ═══
   En 390 px de alto la tarjeta vertical se salía por abajo y la comida de 96 px lo tapaba
   todo. Aquí la tarjeta se hace ancha y baja, la mascota asoma por su IZQUIERDA (no por
   arriba) y la comida se mide por el alto de la pantalla. */
@media (orientation:landscape) and (max-height:560px){
  .trf{padding:10px 16px;}
  .trf-pieza{width:clamp(38px,13vh,62px);}
  .trf-escena{width:min(500px,62vw);padding-top:0;}
  .trf-masc{left:0;top:auto;bottom:4%;width:min(190px,24vw);translate:-82% 0;}
  .trf-escena.v2 .trf-masc,.trf-escena.v2.plata .trf-masc{height:auto;width:min(200px,26vw);}
  .trf-escena.v2{padding-top:0;}
  .trf-card{padding:12px 20px 10px;}
  .trf-tit{font-size:24px;}
  .trf-pos{font-size:62px;margin-top:0;}
  .trf-escena.v2 .trf-pos{font-size:58px;}
  .trf-linea{font-size:13px;margin-top:2px;}
  .trf-frase{font-size:17px;margin-top:8px;}
  .trf-extra{margin-top:6px;padding:4px 8px;}
  .trf-cierra{margin:8px 0;}
  .trf-jugar{height:44px;}
  .trf-luego{margin-top:6px;}
  .trf-escena.oro .trf-insignia{width:64px;height:48px;}
  .trf-escena.plata .trf-insignia{top:-26px;width:58px;height:54px;}
}

/* ── LA LÁMINA de Tournament Prizes (2026-11-04): imagen completa + zonas tocables ── */
.tpz--lamina.on{display:grid;place-items:center;}   /* al centro: lo que sobra se reparte arriba y abajo */
.tpz-lam{position:relative;width:min(100vw,calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 2 / 3));aspect-ratio:2 / 3;max-height:100dvh;}
.tpz-lam[style*="height"]{aspect-ratio:auto;max-height:none;}
.tpz-lam img{display:block;width:100%;height:100%;}
.tpz-hot{position:absolute;padding:0;border:0;background:transparent;border-radius:18px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.tpz-hot:focus-visible{outline:3px solid #ffc928;outline-offset:2px;}
.tpz-hot:active{background:rgba(255,255,255,.16);}
.tpz-hot--volver{left:3%;top:1%;width:28%;height:7.5%;}
.tpz-hot--sem{left:4%;top:12.6%;width:46%;height:9.4%;}
.tpz-hot--mes{left:50%;top:12.6%;width:46%;height:9.4%;}
.tpz-hot--jugar{left:15%;top:81%;width:70%;height:10%;border-radius:99px;}
@media (prefers-reduced-motion:no-preference){ .tpz-hot--jugar{animation:tpzInvita 2.4s ease-in-out infinite;} }
@keyframes tpzInvita{0%,100%{box-shadow:0 0 0 0 rgba(255,80,80,0);}50%{box-shadow:0 0 0 6px rgba(255,255,255,.22),0 0 26px rgba(255,60,60,.55);}}
body:has(#tpzLam.on) #cintas{display:none;}

/* ── RANKS (manual v001 págs. 5-7): marco en imagen + datos en código encima ── */
.trk-ov.on{display:grid;place-items:start center;padding-top:env(safe-area-inset-top,0px);}
.trk{position:relative;container-type:inline-size;width:min(100vw,calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 901 / 1746));aspect-ratio:901 / 1746;
  font-family:'Lilita One','Anton',Impact,sans-serif;color:#0b1f5c;}
.trk-marco{display:block;width:100%;height:100%;}
.trk-yo{position:absolute;left:39.5%;top:18.5%;width:50%;height:3.8%;display:flex;align-items:center;gap:2.6cqw;font-size:4.4cqw;line-height:1;white-space:nowrap;}
.trk-yo b{font-weight:400;font-size:1.12em;}
.trk-yo i{font-style:normal;opacity:.55;}
.trk-yo a{color:#0d4fd0;text-decoration:underline;}
.trk-lista{position:absolute;left:6.5%;top:40%;width:87%;height:40.5%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  display:flex;flex-direction:column;gap:.9cqw;padding:.4cqw .2cqw;}
.trk-fila{flex:none;display:grid;grid-template-columns:15% 1fr auto;align-items:center;min-height:7.6cqw;padding:0 3.4cqw 0 1.4cqw;border-radius:2.2cqw;
  background:linear-gradient(180deg,#eef2f8,#e2e8f2);font-size:4.5cqw;line-height:1.05;}
.trk-pos{display:grid;place-items:center;}
.trk-pos img{height:8.2cqw;width:auto;}
.trk-num{display:grid;place-items:center;min-width:8cqw;height:5.6cqw;padding:0 1cqw;border-radius:1.2cqw;background:#fff;border:.35cqw solid #aab6ca;font-size:3.9cqw;}
.trk-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:9cqw;}
.trk-nom em{display:inline-block;margin-left:1.4cqw;padding:.5cqw 1.8cqw;border-radius:1.6cqw;background:#0b1f5c;color:#fff;font-style:normal;font-size:3.1cqw;vertical-align:.25em;}
.trk-pts{text-align:right;font-variant-numeric:tabular-nums;}
.trk-fila.yo{background:linear-gradient(180deg,#ffd93a,#f5b800);box-shadow:0 .5cqw 1.4cqw rgba(160,110,0,.35);}
.trk-fila.yo .trk-num{border-color:#c48d00;}
.trk-msg{margin:6cqw 4cqw;text-align:center;font-size:4.2cqw;color:#41557d;}
.trk-hot{position:absolute;padding:0;border:0;background:transparent;border-radius:3cqw;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.trk-hot:focus-visible{outline:3px solid #ffc928;outline-offset:2px;}
.trk-hot:active{background:rgba(255,255,255,.18);}
.trk-hot--sem{left:10.6%;top:12.6%;width:40.4%;height:4.8%;}
.trk-hot--mes{left:51.7%;top:12.6%;width:37.4%;height:4.8%;}
.trk-hot--volver{left:10%;top:89.2%;width:30%;height:6%;border-radius:99px;}
.trk-hot--premios{left:43.2%;top:89.2%;width:47.3%;height:6%;border-radius:99px;}
@media (prefers-reduced-motion:no-preference){ .trk-fila.yo{animation:trkYo 2.4s ease-in-out infinite;} }
@keyframes trkYo{0%,100%{box-shadow:0 .5cqw 1.4cqw rgba(160,110,0,.35);}50%{box-shadow:0 0 0 .8cqw rgba(255,217,58,.35),0 .5cqw 2.4cqw rgba(160,110,0,.5);}}
body:has(#trkOv.on) #cintas{display:none;}
#tpzLam.on,#tpzOv.on{z-index:96;}   /* PRIZES abierto desde Ranks queda encima */

/* ── DAILY SPIN (manual v001 pág. 12): marco imagen + rueda que gira encima ── */
.dsp-ov.on{display:grid;place-items:start center;padding-top:env(safe-area-inset-top,0px);}
.dsp{position:relative;container-type:inline-size;width:min(100vw,calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 940 / 1673));aspect-ratio:940 / 1673;
  font-family:'Lilita One','Anton',Impact,sans-serif;}
.dsp-marco{position:relative;z-index:2;display:block;width:100%;height:100%;pointer-events:none;}
/* centro de la rueda: 466,893 sobre 941×1671; rueda r=366, centro r=142 */
/* montaje (NOTAS_MONTAJE.txt): disco 816×816 en x=62, y=510 del marco 940×1673 */
.dsp-rueda{position:absolute;z-index:1;left:6.6%;top:30.48%;width:86.81%;aspect-ratio:1;will-change:transform;transform:rotate(0deg);}
.dsp-centro,.dsp-flecha{display:none;}   /* el marco nuevo ya trae halcón e indicador */
.dsp-centro{position:absolute;left:calc(49.52% - 15.09%);top:calc(53.44% - 8.5%);width:30.18%;aspect-ratio:1;pointer-events:none;}
.dsp-flecha{position:absolute;left:43.04%;top:27.05%;width:13.07%;pointer-events:none;filter:drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.35));}
.dsp-res{position:absolute;z-index:3;left:8%;right:8%;top:74.6%;display:flex;flex-direction:column;align-items:center;gap:.6cqw;padding:2.2cqw 3cqw;border-radius:4cqw;text-align:center;
  background:rgba(8,26,84,.88);box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.35);color:#fff;}
.dsp-res b{font-weight:400;font-size:6.2cqw;line-height:1;-webkit-text-stroke:.1em #06205e;paint-order:stroke fill;}
.dsp-res span{font-family:var(--cond,'Barlow Condensed',sans-serif);font-weight:700;font-size:4cqw;opacity:.9;}
.dsp-res[hidden]{display:none;}
.dsp-res--oro b{color:#ffd23a;}
.dsp-res--oro{animation:dspSale .5s cubic-bezier(.2,1.5,.4,1);border:.5cqw solid #ffd23a;}
@keyframes dspSale{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
.dsp-hot{position:absolute;z-index:3;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:99px;}
.dsp-hot:focus-visible{outline:3px solid #ffc928;outline-offset:2px;}
.dsp-hot:active{background:rgba(255,255,255,.18);}
.dsp-hot--volver{left:3.5%;top:3.6%;width:22.5%;height:5%;}
.dsp-hot--girar{left:10.6%;top:83.4%;width:78.9%;height:10.3%;}
.dsp--usado .dsp-hot--girar{background:rgba(20,30,60,.45);cursor:default;}   /* SPIN apagado: ya giró hoy */
.dsp--gira .dsp-hot--girar{cursor:wait;}
@media (prefers-reduced-motion:no-preference){ .dsp-ov:not(.dsp--usado):not(.dsp--gira) .dsp-hot--girar{animation:tpzInvita 2.4s ease-in-out infinite;} }
body:has(#dspOv.on) #cintas{display:none;}