/* La Ofrenda y la Onda de la Princesa (y la cabecera de cada juego). */

/* ═════════ Comunes ═════════ */
.of-titulo, .on-titulo {
  position: absolute; left: 40px; top: 18px;
  font-family: 'Jacquard 24', serif; font-size: 96px; line-height: 1; color: #ffe27a;
  text-shadow: 5px 5px 0 var(--tinta), 0 0 30px rgba(255, 200, 80, .35); transition: opacity .3s, visibility .3s;
}
.of-fase, .on-fase {
  position: absolute; left: 50%; top: 140px; transform: translateX(-50%); white-space: nowrap;
  font-size: 40px; font-weight: 700; color: #fff4dc; text-shadow: 4px 4px 0 var(--tinta);
}
.of-fase:empty, .on-fase:empty { display: none; }
.of-reloj, .on-reloj {
  position: absolute; right: 50px; top: 24px; min-width: 150px; text-align: center;
  font-family: 'Silkscreen', monospace; font-size: 76px; line-height: 1; color: #fff; background: #2a1030; padding: 14px 18px 18px;
  box-shadow: 0 0 0 6px #ff5aa0, 0 0 0 12px var(--tinta);
}
@keyframes ofGira { to { transform: rotate(360deg); } }
@keyframes ofCara { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ═════════ La Ofrenda ═════════ */
#ofrenda { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
#ofrenda .oculto { opacity: 0; visibility: hidden; }

/* la galería: los dibujos ya puntuados, colgados con pinzas de una cuerda (arriba) */
.of-galeria { position: absolute; left: 0; top: 0; width: 1440px; height: 260px; transition: opacity .3s, visibility .3s; }
.of-galeria .cuerda { position: absolute; left: 36px; right: 30px; top: -4px; height: 74px; border-bottom: 6px solid #5a3418;
  border-radius: 0 0 50% 50% / 0 0 34px 34px; filter: drop-shadow(0 3px 0 var(--tinta)); }
.of-galeria .hueco { position: absolute; width: 96px; margin-left: -48px; transform-origin: 50% 0; display: flex; flex-direction: column; align-items: center; }
.of-galeria .pinza { display: block; width: 10px; height: 22px; background: #b07a44; box-shadow: 0 0 0 3px var(--tinta); margin-bottom: -8px; position: relative; z-index: 1; }
.of-galeria .mini-marco { padding: 6px; background: linear-gradient(135deg, #fff0a0, #b07a1c 45%, #eabb4c 60%, #6e420e); box-shadow: 0 0 0 3px var(--tinta), 0 6px 0 3px rgba(0, 0, 0, .35); }
.of-galeria .mini-marco img, .of-galeria .mini-marco canvas { display: block; width: 72px; height: 72px; background: #fbf6ea; }
.of-galeria .pct { margin-top: 8px; font-family: 'Silkscreen', monospace; font-size: 32px; line-height: 1; color: var(--c); background: rgba(24, 10, 34, .92); padding: 2px 6px 5px; box-shadow: 0 0 0 3px var(--tinta); }

/* el dibujo, en su marco dorado de pixel art (sale de la mochila) */
.of-cuadro { position: absolute; left: 700px; top: 262px; width: 560px; height: 560px; transition: opacity .2s, visibility .2s; }
.of-rayos { position: absolute; left: 50%; top: 50%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 226, 122, .22) 0 10deg, rgba(255, 226, 122, 0) 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: ofGira 14s linear infinite; }
.of-marco { position: absolute; inset: 0; background-size: 560px 560px; image-rendering: pixelated;
  filter: drop-shadow(0 16px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 40px rgba(255, 220, 120, .45)); }
.of-lienzo { position: absolute; left: 44px; top: 44px; width: 472px; height: 472px; background: #fbf6ea; }
.of-lienzo img, .of-lienzo canvas { display: block; width: 472px; height: 472px; }
.of-grieta { position: absolute; left: 44px; top: 44px; width: 472px; height: 472px; image-rendering: pixelated; opacity: 0; }
.of-grieta.visible { opacity: 1; }
/* el sello del LILIMETER sobre el dibujo */
.of-sello { position: absolute; left: 50%; top: 46%; z-index: 3; transform: translate(-50%, -50%) rotate(-14deg); padding: 6px 30px 14px; white-space: nowrap;
  border: 10px solid var(--c); color: var(--c); font-family: 'Jacquard 24', serif; font-size: 110px; line-height: 1;
  background: rgba(20, 8, 26, .55); text-shadow: 4px 4px 0 var(--tinta); box-shadow: 0 0 0 5px var(--tinta), inset 0 0 0 5px var(--tinta); }
.of-sello.grande { font-size: 150px; border-width: 14px; }
/* la placa de debajo: de quién es, cómo se llama, lo que cobra */
.of-placa { position: absolute; left: 980px; top: 846px; transform: translateX(-50%); min-width: 560px; padding: 8px 30px 12px; text-align: center;
  background: rgba(30, 12, 40, .94); box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 5px #f0c048, 0 12px 0 6px rgba(0, 0, 0, .35); transition: opacity .2s, visibility .2s; }
.of-quien { font-size: 34px; font-weight: 700; color: #c8b8e0; white-space: nowrap; }
.of-nombre { font-size: 48px; font-weight: 700; color: #fff4dc; text-shadow: 3px 3px 0 var(--tinta); white-space: nowrap; }
.of-nombre:empty { display: none; }
.of-premio { font-family: 'Silkscreen', monospace; font-size: 34px; color: #ffe27a; margin-top: 4px; }
.of-premio:empty { display: none; }

/* el termómetro del amor (junto al espejo de la princesa) */
.of-termo { position: absolute; left: 1530px; top: 590px; width: 132px; height: 450px; transition: opacity .25s, visibility .25s; }
.of-termo canvas { position: absolute; left: 0; top: 0; width: 132px; height: 450px; image-rendering: pixelated; }
.of-termo .marcas span { position: absolute; right: 150px; transform: translateY(-50%); white-space: nowrap; font-size: 32px; font-weight: 700; color: #ffd0e6; text-shadow: 3px 3px 0 var(--tinta); }
.of-termo .apuestas { position: absolute; left: 140px; top: 0; width: 250px; height: 100%; }
.of-termo .apuestas .cara { position: absolute; width: 60px; height: 60px; image-rendering: pixelated;
  filter: drop-shadow(3px 0 0 var(--tinta)) drop-shadow(-3px 0 0 var(--tinta)) drop-shadow(0 3px 0 var(--tinta)); animation: ofCara .25s steps(4) backwards; }
.of-termo .apuestas .cara.gana { z-index: 2; transform: scale(1.45);
  filter: drop-shadow(4px 0 0 #ffe27a) drop-shadow(-4px 0 0 #ffe27a) drop-shadow(0 4px 0 #ffe27a) drop-shadow(0 -4px 0 #ffe27a); }
.of-termo .valor { position: absolute; left: 66px; top: -80px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.of-termo .valor b { font-family: 'Pixelify Sans', sans-serif; font-weight: 700; font-size: 68px; line-height: 1; color: #ffe27a; text-shadow: 5px 5px 0 var(--tinta); }
.of-termo .valor b small { font-size: .6em; margin-left: 4px; }
.of-termo .valor span { font-size: 38px; font-weight: 700; color: #ff9ac8; text-shadow: 4px 4px 0 var(--tinta); }
.of-termo .valor span:empty { display: none; }

/* «¿Cuánto le dará?» (abajo a la izquierda, junto al héroe) */
.of-apuesta { position: absolute; left: 40px; bottom: 46px; max-width: 620px; padding: 10px 22px 12px; font-size: 34px; font-weight: 700; color: #7ae05a; background: rgba(30, 12, 40, .94); box-shadow: 0 0 0 5px var(--tinta), inset 0 0 0 4px #7ae05a; }
.of-apuesta:empty { display: none; }

/* el primer plano de la princesa (sale de su espejo, grande) */
.of-reaccion { position: absolute; left: 1572px; top: 330px; width: 396px; height: 396px; z-index: 6; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;
  background: radial-gradient(#3a1a50, #12081c); box-shadow: 0 0 0 10px #eabb4c, 0 0 0 16px #6e420e, 0 0 0 22px var(--tinta), 0 0 60px 20px rgba(255, 120, 200, .45); }
.of-reaccion canvas { display: block; width: 396px; height: 396px; image-rendering: pixelated; }

/* el podio del final */
.of-podio { position: absolute; left: 50%; top: 250px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 44px; transition: opacity .3s, visibility .3s; }
.of-podio .puesto { display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(90px); transition: opacity .25s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.of-podio .puesto.sube { opacity: 1; transform: none; }
.of-podio .puesto.p1::before { content: ''; width: 96px; height: 64px; margin-bottom: 10px; background: #ffe27a;
  clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); filter: drop-shadow(0 0 16px rgba(255, 226, 122, .8)); }
.of-podio .cuadrito { padding: 10px; background: linear-gradient(135deg, #fff0a0, #b07a1c 45%, #eabb4c 60%, #6e420e); box-shadow: 0 0 0 4px var(--tinta), 0 10px 0 4px rgba(0, 0, 0, .35); }
.of-podio .cuadrito img, .of-podio .cuadrito canvas { display: block; width: 220px; height: 220px; background: #fbf6ea; }
.of-podio .p1 .cuadrito img, .of-podio .p1 .cuadrito canvas { width: 300px; height: 300px; }
.of-podio .quien { margin-top: 10px; font-size: 40px; font-weight: 700; color: #fff4dc; text-shadow: 3px 3px 0 var(--tinta); white-space: nowrap; }
.of-podio .pct { font-family: 'Silkscreen', monospace; font-size: 34px; color: #ffe27a; }
.of-podio .peana { width: 260px; margin-top: 8px; display: grid; place-items: center; background: linear-gradient(#8e5c30, #4a2c18); box-shadow: 0 0 0 5px var(--tinta), inset 0 5px 0 #b07a44; }
.of-podio .peana b { font-family: 'Jacquard 24', serif; font-weight: 400; font-size: 88px; line-height: 1; color: #ffe27a; text-shadow: 4px 4px 0 var(--tinta); }
.of-podio .p1 .peana { height: 190px; }
.of-podio .p2 .peana { height: 130px; }
.of-podio .p2 .peana b { color: #d8d8e8; }
.of-podio .p3 .peana { height: 90px; }
.of-podio .p3 .peana b { color: #e0a060; }

/* ═════════ La Onda de la Princesa: la Rueda del Juglar ═════════ */
#onda { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
#onda .oculto { opacity: 0; visibility: hidden; }
.on-titulo { color: #e8a0ff; text-shadow: 5px 5px 0 var(--tinta), 0 0 30px rgba(220, 120, 255, .35); }
/* el tema, en un pergamino que se despliega */
.on-perga { position: absolute; left: 780px; top: 128px; transform: translateX(-50%); display: flex; align-items: center; height: 102px; }
.on-perga .rollo { width: 30px; height: 102px; background-size: 30px 102px; image-rendering: pixelated; position: relative; z-index: 1; }
.on-perga .papel { height: 84px; max-width: 0; overflow: hidden; background-size: 96px 84px; image-rendering: pixelated; transition: max-width .45s steps(9); display: flex; align-items: center; }
.on-perga.abierto .papel { max-width: 1100px; }
.on-perga .tema { padding: 0 38px 4px; white-space: nowrap; font-family: 'Jacquard 24', serif; font-size: 64px; line-height: 1; color: #3a1a10; }
/* la rueda (pixel art a 3×) */
.on-rueda { position: absolute; left: 330px; top: 236px; width: 900px; height: 660px; }
.on-rueda canvas { display: block; width: 900px; height: 660px; image-rendering: pixelated; }
/* los dos extremos, como banderolas debajo de cada lado de la rueda */
.on-extremo { position: absolute; top: 906px; max-width: 480px; padding: 8px 22px 10px; font-size: 42px; font-weight: 700; color: #fff;
  box-shadow: 0 0 0 5px var(--tinta), 0 10px 0 5px rgba(0, 0, 0, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-extremo:empty { display: none; }
.on-extremo.izq { right: 1170px; background: linear-gradient(#5a3ac8, #3a1a8a); }
.on-extremo.der { left: 990px; background: linear-gradient(#e0702a, #a8400e); }
.on-extremo.entra.izq { animation: onIzq .35s steps(6) both; }
.on-extremo.entra.der { animation: onDer .35s steps(6) both; }
@keyframes onIzq { from { transform: translateX(-500px); } }
@keyframes onDer { from { transform: translateX(500px); } }
.on-fase { left: 780px; top: auto; bottom: 26px; background: rgba(24, 10, 34, .88); padding: 6px 22px 10px; box-shadow: 0 0 0 5px var(--tinta); }
/* «¡En la onda!» (arriba, donde estaba el pergamino, que en la revelación se cierra) */
.on-banner { position: absolute; left: 780px; top: 126px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 18px; padding: 10px 30px 10px 16px; white-space: nowrap;
  background: linear-gradient(90deg, #3a0a4a, #8a2aa8); color: #fff; font-size: 44px; font-weight: 700;
  box-shadow: 0 0 0 6px var(--tinta), 0 0 0 12px #ffe27a, 0 0 0 18px var(--tinta); transition: opacity .2s, visibility .2s; }
.on-banner .cara { width: 72px; height: 72px; image-rendering: pixelated; }
/* lo que dice el juglar */
.on-bocata { position: absolute; left: 40px; top: 170px; max-width: 470px; padding: 14px 22px 18px; background: #fff4dc; color: var(--tinta);
  font-size: 38px; font-weight: 700; line-height: 1.15; box-shadow: 0 0 0 5px var(--tinta); transform-origin: 30% 100%; transition: opacity .2s, visibility .2s; }
.on-bocata::after { content: ''; position: absolute; left: 150px; bottom: -26px; width: 30px; height: 26px; background: #fff4dc; clip-path: polygon(0 0, 100% 0, 20% 100%); }
/* la clasificación de la Onda */
.on-tabla { position: absolute; right: 30px; top: 172px; width: 590px; padding: 8px 12px 12px; background: rgba(24, 10, 34, .9); box-shadow: 0 0 0 6px var(--tinta), inset 0 0 0 5px #b070ff; }
.on-tabla .cab { font-family: 'Jacquard 24', serif; font-size: 52px; line-height: 1; color: #e8a0ff; text-align: center; margin: 2px 0 6px; text-shadow: 4px 4px 0 var(--tinta); }
.on-fila { position: relative; display: grid; grid-template-columns: 40px 52px 1fr 120px 110px; align-items: center; gap: 8px; height: 56px; padding: 0 6px; }
.on-fila:nth-child(odd) { background: rgba(255, 255, 255, .04); }
.on-fila .pos { font-family: 'Silkscreen', monospace; font-size: 32px; color: #b8a8d8; text-align: right; }
.on-fila .cara { width: 48px; height: 48px; image-rendering: pixelated; }
.on-fila .nom { font-size: 34px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-fila .pts { font-family: 'Silkscreen', monospace; font-size: 32px; text-align: right; color: #fff4dc; }
.on-fila .estado { text-align: center; font-family: 'Silkscreen', monospace; font-size: 32px; line-height: 1; }
.on-fila .estado .pensando { font-style: normal; color: #8a7aa8; animation: onPiensa 1s steps(3) infinite; }
@keyframes onPiensa { 50% { opacity: .35; } }
.on-fila .estado .lacre { width: 54px; height: 54px; image-rendering: pixelated; animation: onLacre .3s steps(4) both; }
@keyframes onLacre { from { transform: scale(2.6) rotate(-30deg); opacity: 0; } 70% { transform: scale(.9); opacity: 1; } }
.on-fila .estado.gana { color: #f0c048; animation: onPunto .4s steps(5) both; }
.on-fila .estado.oro { color: #ffe04a; text-shadow: 0 0 12px rgba(255, 224, 74, .8); }
.on-fila .estado.nada { color: #6a5a80; }
@keyframes onPunto { from { transform: scale(2); } }
.on-fila.lider .nom, .on-fila.lider .pts { color: #ffe27a; }
.on-fila.lider .nom::before { content: ''; display: inline-block; width: 30px; height: 22px; margin-right: 8px; background: #ffe27a;
  clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); }
.on-fila.campeon { background: rgba(255, 226, 122, .18) !important; box-shadow: inset 0 0 0 4px #ffe27a; }

/* ═════════ La cabecera de cada juego (cine.js, cartelJuego), como en los Jackbox ═════════ */
.cartel-juego { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(40, 14, 56, .7), rgba(8, 3, 14, .96) 70%); animation: cjEntra .3s steps(4) both; }
.cartel-juego.fuera { animation: cjSale .4s steps(4) both; }
@keyframes cjEntra { from { opacity: 0; } }
@keyframes cjSale { to { opacity: 0; transform: scale(1.15); } }
.cj-rayos { position: absolute; left: 50%; top: 50%; width: 2600px; height: 2600px; margin: -1300px 0 0 -1300px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c) 30%, transparent) 0 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%);
  animation: ofGira 16s linear infinite; }
.cj-titulo { font-family: 'Jacquard 24', serif; font-size: 160px; line-height: 1; color: #fff4dc; white-space: nowrap;
  text-shadow: 8px 0 var(--tinta), -8px 0 var(--tinta), 0 8px var(--tinta), 0 -8px var(--tinta), 0 18px 0 var(--c); }
.cj-titulo span { display: inline-block; animation: cjLetra .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes cjLetra { from { transform: translateY(-620px) rotate(-18deg); } 70% { transform: translateY(20px) scaleY(.85); } }
.cj-sub { margin-top: 40px; padding: 10px 34px 14px; font-size: 48px; font-weight: 700; color: var(--tinta); background: var(--c);
  box-shadow: 0 0 0 6px var(--tinta), 0 12px 0 6px rgba(0, 0, 0, .35); animation: cjSub .35s steps(5) both; animation-delay: .7s; }
@keyframes cjSub { from { transform: scale(0) rotate(-6deg); } }
.cj-chispa { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; background: #fff4dc; opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: cjChispa 1.2s steps(4) infinite; animation-delay: var(--d); }
@keyframes cjChispa { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } }