/* ───────── El Castillo Trampa (el juego final) ───────── */
#torre { position: absolute; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; background: #05020a; }
#torre .oculto { display: none; }
.tr-cv { position: absolute; inset: 0; width: 1920px; height: 1080px; image-rendering: pixelated; }

/* los nombres encima de cada uno */
.tr-nombres { position: absolute; inset: 0; }
.tr-nombre {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: 'Silkscreen', monospace; font-size: 17px; line-height: 1; color: #fff;
  padding: 2px 5px 3px; background: var(--c); box-shadow: 0 0 0 3px #1c1024;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}
.tr-nombre::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--c); }

.tr-titulo {
  position: absolute; left: 34px; top: 22px;
  font-family: 'Jacquard 24', serif; font-size: 58px; line-height: 1; color: #ff6a8a;
  text-shadow: 4px 4px 0 #1c1024, 0 0 24px rgba(255, 40, 80, .45);
}
.tr-reloj { position: absolute; right: 150px; top: 18px; }
.tr-reloj .crono { width: 196px; height: 165px; }

/* la torre a la derecha: lo que ha subido cada uno (y la Corona arriba) */
.tr-torre { position: absolute; right: 26px; top: 120px; bottom: 120px; width: 96px; }
.tr-barra {
  position: absolute; left: 42px; top: 30px; bottom: 0; width: 12px;
  background: linear-gradient(#ffd04a, #c8203a 30%, #5a0a14); box-shadow: 0 0 0 4px #1c1024;
}
.tr-meta {
  position: absolute; left: 26px; top: -8px; width: 44px; height: 32px;
  background: #ffd04a; clip-path: polygon(0 100%, 0 25%, 25% 60%, 50% 0, 75% 60%, 100% 25%, 100% 100%);
  filter: drop-shadow(0 0 10px rgba(255, 208, 74, .9));
}
.tr-marca {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: #1c1024; box-shadow: 0 0 0 3px var(--c); transition: bottom .25s linear;
}
.tr-marca canvas { width: 34px; height: auto; image-rendering: pixelated; }
.tr-marca.muerto { filter: grayscale(1) brightness(.5); }

/* Islam se ríe (todos creen que las trampas son suyas) */
.tr-islam { position: absolute; left: 34px; bottom: 34px; display: flex; align-items: flex-end; gap: 14px; }
.tr-islam > canvas { width: 150px; height: 150px; image-rendering: pixelated; background: radial-gradient(circle, #5a0a14, #1c1024); box-shadow: 0 0 0 5px #1c1024, inset 0 0 0 5px #ff3a5a; }
.tr-bocata { background: #fff4dc; color: #1c1024; padding: 12px 18px 14px; box-shadow: 0 0 0 4px #1c1024; margin-bottom: 40px; }
.tr-bocata b { display: block; font-family: 'Silkscreen', monospace; font-size: 40px; color: #c8203a; }
.tr-bocata span { font-size: 26px; }
.tr-islam.va { animation: trIslam .5s steps(5); }
@keyframes trIslam { from { transform: translateY(240px); } 60% { transform: translateY(-14px); } }

/* los avisos grandes (3, 2, 1, ¡YA!, la Corona, las trampas, las zonas) */
.tr-aviso {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 5; /* (por encima de la clasificación y de la torre) */
  font-family: 'Jacquard 24', serif; font-size: 96px; line-height: 1; text-align: center; white-space: nowrap;
  color: #fff4dc; text-shadow: 6px 6px 0 #1c1024, 0 0 30px rgba(255, 60, 90, .6);
}
.tr-aviso.va { animation: trAviso .45s steps(5); }
@keyframes trAviso { from { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
.tr-aviso.cuenta { font-family: 'Silkscreen', monospace; font-size: 220px; color: #ffd04a; }
.tr-aviso.ya { color: #6af07a; }
.tr-aviso.grande { font-size: 110px; color: #ff6a8a; }
.tr-aviso.oro { color: #ffd04a; text-shadow: 6px 6px 0 #1c1024, 0 0 40px rgba(255, 208, 74, .8); }
.tr-aviso.zona { top: 16%; font-size: 64px; color: #ffd0e8; background: rgba(28, 16, 36, .82); padding: 14px 34px 18px; box-shadow: 0 0 0 5px #ff6a8a; }
.tr-aviso.trampa { top: 22%; font-family: 'Silkscreen', monospace; font-size: 70px; color: #ffd04a; }

/* cómo se juega (en el calentamiento) */
.tr-ayuda {
  position: absolute; left: 50%; top: 110px; transform: translateX(-50%); width: 1400px; text-align: center;
  background: rgba(20, 10, 30, .92); box-shadow: 0 0 0 5px #1c1024, inset 0 0 0 3px #ff6a8a; padding: 18px 28px 22px; color: #fff4dc;
}
.tr-teclas { font-size: 34px; }
.tr-teclas b { display: inline-block; font-family: 'Silkscreen', monospace; font-size: 30px; color: #1c1024; background: #ffd04a; padding: 2px 10px 4px; margin: 0 6px 0 18px; box-shadow: 0 4px 0 #8a5a10; }
.tr-consejo { margin-top: 12px; font-size: 30px; color: #c8b8e0; }
.tr-consejo b { color: #ffd04a; }

/* la tabla final (a la izquierda) y los premios de la subida (a la derecha) */
.tr-resultados {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8, 3, 14, .88); animation: cjEntra .3s steps(4) both;
}
.tr-resultados h2 { margin: 0 0 18px; font-family: 'Jacquard 24', serif; font-weight: 400; font-size: 88px; color: #ffd04a; text-shadow: 5px 5px 0 #1c1024; }
.tr-res-cuerpo { display: grid; grid-template-columns: auto 660px; gap: 56px; align-items: start; }
.tr-filas { display: grid; grid-template-columns: 1fr; gap: 7px; }
.tr-fila {
  display: grid; grid-template-columns: 54px 52px 250px 110px 150px; align-items: center; gap: 12px;
  background: #231334; box-shadow: 0 0 0 4px #1c1024, inset 6px 0 0 var(--c); padding: 2px 16px 2px 10px;
  font-size: 32px; color: #fff4dc; animation: trFila .35s steps(4) both;
}
.tr-fila .pos { font-family: 'Silkscreen', monospace; font-size: 28px; color: #ffd04a; text-align: center; }
.tr-fila .cara canvas { width: 46px; height: auto; image-rendering: pixelated; }
.tr-premios { display: flex; flex-direction: column; gap: 16px; }
.tr-premio {
  display: grid; grid-template-columns: 76px 1fr 66px; align-items: center; gap: 14px; padding: 10px 18px 12px 12px;
  background: linear-gradient(90deg, #3a1c4a, #231334); box-shadow: 0 0 0 4px #1c1024, inset 0 0 0 3px #ffd04a, inset 10px 0 0 var(--c);
  animation: trPremio .45s steps(5) both;
}
.tr-premio .ico { font-size: 58px; text-align: center; line-height: 1; }
.tr-premio small { display: block; font-family: 'Silkscreen', monospace; font-size: 26px; color: #ffd04a; }
.tr-premio b { display: block; font-weight: 400; font-size: 40px; line-height: 1.05; color: #fff4dc; }
.tr-premio i { display: block; font-style: normal; font-size: 28px; color: #c8b8e0; }
.tr-premio .cara canvas { width: 62px; height: auto; image-rendering: pixelated; }
@keyframes trPremio { from { transform: scale(1.7) rotate(-5deg); opacity: 0; } }
.tr-fila .alt { font-family: 'Silkscreen', monospace; font-size: 26px; color: #c8b8e0; text-align: right; }
.tr-fila .pts { font-family: 'Silkscreen', monospace; font-size: 30px; color: #ffd04a; text-align: right; }
.tr-fila.corona { background: #4a3410; box-shadow: 0 0 0 4px #1c1024, 0 0 0 9px #ffd04a; }
@keyframes trFila { from { transform: translateX(-60px); opacity: 0; } }
.tr-pocion { font-size: 34px; color: #f0a0ff; }

/* la ventanita del que va primero (cuando se escapa por arriba de la pantalla) */
.tr-pip { position: absolute; right: 150px; top: 200px; background: #1c1024; box-shadow: 0 0 0 5px #1c1024, 0 0 0 9px var(--c, #ffd04a); }
.tr-pip canvas { display: block; width: 400px; height: 272px; image-rendering: pixelated; }
.tr-pip-cab { font-family: 'Silkscreen', monospace; font-size: 22px; color: #fff4dc; background: var(--c, #ffd04a); padding: 4px 10px 6px; text-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
/* en la presentación (la cámara baja por la torre) solo se ve la torre */
#torre.intro .tr-torre, #torre.intro .tr-reloj, #torre.intro .tr-titulo, #torre.intro .tr-nombres { visibility: hidden; }

/* la carrera en 3D: los textos de los golpes (¡PLOF!, ¡COCIDO!…) y los nombres que se encogen con la distancia */
.cr-textos { position: absolute; inset: 0; }
.cr-texto { position: absolute; transform: translate(-50%, -100%); font-family: 'Silkscreen', monospace; font-size: 34px; white-space: nowrap; text-shadow: 3px 3px 0 #1c1024, -2px -2px 0 #1c1024; }
.carrera3d .tr-nombre { transform-origin: 50% 100%; }

/* la ola de sangre a los talones del grupo: un resplandor rojo que sube por abajo cuanto más cerca está */
.cr-sangre { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none; opacity: var(--k, 0);
  background: linear-gradient(to top, rgba(160, 0, 12, calc(.25 + var(--k, 0) * .7)), rgba(160, 0, 12, 0)); }
.cr-sangre i { position: absolute; left: -40px; right: -40px; bottom: 0; height: calc(20px + var(--k, 0) * 90px);
  background: radial-gradient(ellipse 60px 34px at 30px 0, transparent 0 60%, #b0000c 62%) repeat-x 0 0 / 120px 100%;
  animation: crOla 1.2s linear infinite; image-rendering: pixelated; }
@keyframes crOla { to { transform: translateX(-120px); } }

/* la carrera: la ventanita del que va primero (se pinta en el mismo lienzo; aquí, el marco y el nombre) */
.cr-pip { position: absolute; box-shadow: 0 0 0 5px #1c1024, 0 0 0 9px var(--c, #ffd04a); pointer-events: none; }
.cr-pip .tr-pip-cab { position: absolute; left: -9px; top: -46px; white-space: nowrap; }

/* ── la torre nueva (02-10-2026) ── */
/* las rayas de velocidad (como en el anime): salen por los bordes cuanto más deprisa van */
.cr-velocidad {
  position: absolute; inset: -60px; pointer-events: none; opacity: calc(var(--k, 0) * .8);
  background: repeating-conic-gradient(from 2deg at 50% 46%, transparent 0deg 5.4deg, rgba(255, 244, 220, .55) 5.4deg 6deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 46%, transparent 55%, #000 100%);
  mask-image: radial-gradient(ellipse 60% 56% at 50% 46%, transparent 55%, #000 100%);
  animation: crVelocidad .16s steps(2) infinite;
}
@keyframes crVelocidad { 50% { transform: rotate(2.6deg); } }

/* la torre de la derecha: los colores de cada círculo y la sangre que sube por debajo */
#torre .tr-barra { background: #2a1830; }
.tr-tramo { position: absolute; left: 0; right: 0; opacity: .85; }
.tr-nivel { position: absolute; left: -7px; right: -7px; bottom: 0; height: 0; z-index: 1; background: linear-gradient(#ff3a3a, #8a0010); box-shadow: 0 0 14px rgba(255, 40, 40, .8); }
.tr-marca { z-index: 2; }

/* la clasificación en directo (los cinco primeros y, abajo, el último) */
.tr-clasi { position: absolute; right: 142px; top: 196px; width: 360px; height: 400px; }
.tr-fila-c {
  position: absolute; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; gap: 10px; padding-right: 12px;
  background: rgba(20, 10, 30, .84); box-shadow: 0 0 0 3px #1c1024, inset 7px 0 0 var(--c);
  font-size: 32px; color: #fff4dc; transition: transform .3s ease, opacity .25s;
}
.tr-fila-c .n { width: 52px; text-align: center; font-family: 'Silkscreen', monospace; font-size: 28px; color: #ffd04a; }
.tr-fila-c .cara canvas { display: block; width: 40px; height: auto; image-rendering: pixelated; }
.tr-fila-c b { flex: 1; min-width: 0; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr-fila-c .o { font-size: 30px; }
.tr-fila-c.muerto { filter: grayscale(1) brightness(.55); }
#torre.intro .tr-clasi { visibility: hidden; }

/* el suceso que está pasando (¡TERREMOTO!…), arriba, con lo que le queda */
.tr-suceso {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%); text-align: center; padding: 8px 28px 12px;
  background: rgba(60, 10, 34, .92); box-shadow: 0 0 0 4px #1c1024, inset 0 0 0 3px #ff6a8a;
}
.tr-suceso b { font-family: 'Silkscreen', monospace; font-weight: 400; font-size: 40px; color: #ffd04a; white-space: nowrap; }
.tr-suceso i { display: block; height: 8px; margin-top: 6px; background: #ff6a8a; transform-origin: left; transform: scaleX(var(--k, 1)); }
.tr-suceso:not(.activo) b { animation: trParpadeo .3s steps(2) infinite; }
@keyframes trParpadeo { 50% { opacity: .35; } }
.tr-aviso.suceso { top: 30%; font-family: 'Silkscreen', monospace; font-size: 84px; color: #ffd04a; text-shadow: 6px 6px 0 #1c1024, 0 0 40px rgba(255, 140, 40, .8); }

/* el locutor: una línea abajo con lo que va pasando */
.tr-locutor {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); max-width: 1320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 38px; color: #fff4dc; background: rgba(20, 10, 30, .92); padding: 10px 30px 12px;
  box-shadow: 0 0 0 4px #1c1024, inset 0 0 0 3px #ffd04a;
}
.tr-locutor.va { animation: trLocutor .32s steps(4); }
@keyframes trLocutor { from { transform: translateX(-50%) translateY(50px); opacity: 0; } }