/* boss-entrada.css — la entrada del Boss como escena: «La torre» (elegida 30-sep-2026).
 * Acompaña a games/boss/entrada-escena.js. Todo se mide en --u (1 % del ancho
 * de la ilustración), así el texto va pegado al dibujo en un móvil y en un iPad.
 * La lista de niveles del juego (#levelList, ENTRAR, reglas) sigue en el DOM,
 * oculta: la escena lee de ella y la pulsa.
 */
#scrPuerta .puerta-in { display: none; }

.bpe { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #050407; }
.bpe-fondo { position: absolute; inset: -40px; background: center / cover no-repeat;
  filter: blur(26px) brightness(.4) saturate(1.2); }
.bpe-lienzo { position: absolute; --u: 4px; --c1: #f5c563; --c2: #7fd3ff; --c3: #ff4a3d;
  transform-origin: var(--bpe-ox, 50%) var(--bpe-oy, 50%); }
.bpe-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none;
  /* los lados de la ilustración se funden con el relleno desenfocado */
  /* los bordes se funden con el relleno desenfocado (arriba en el móvil, a los lados en tablet) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 5%, #000 100%); mask-composite: intersect; }

/* ── el título, en el hueco liso del dibujo ── */
.bpe-titulo { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; gap: calc(var(--u) * .6); }
.bpe-titulo b { font: 400 calc(var(--u) * 7.2)/.95 'Archivo Black', sans-serif; letter-spacing: .02em; color: #fff4d6;
  background: linear-gradient(180deg, #fffaf0 0%, #f3d27a 48%, #b8862f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a2806) drop-shadow(0 6px 16px rgba(0,0,0,.8)); }
.bpe-kick { font: 700 max(12px, calc(var(--u) * 2.6))/1 'Special Elite', monospace; letter-spacing: .16em; white-space: nowrap; color: #d9cdb2;
  text-transform: uppercase; text-shadow: 0 2px 8px #000; }
.bpe-torre .bpe-titulo b { font-size: calc(var(--u) * 9.5); }

/* ── lo que se toca: quien examina ── */
.bpe-toque { position: absolute; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  border-radius: calc(var(--u) * 4); }
.bpe-toque[data-n="1"] { --c: var(--c1); } .bpe-toque[data-n="2"] { --c: var(--c2); } .bpe-toque[data-n="3"] { --c: var(--c3); }
.bpe-halo { position: absolute; inset: -6%; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent 80%);
  transition: opacity .2s; }
.bpe-toque:hover .bpe-halo, .bpe-toque:focus-visible .bpe-halo { opacity: .7; }
.bpe-toque:active { transform: scale(.97); }
/* bloqueado: lo de debajo se apaga a gris, con el candado encima */
.bpe-toque.bloq { cursor: default; -webkit-backdrop-filter: grayscale(1) brightness(.5); backdrop-filter: grayscale(1) brightness(.5); }
.bpe-toque.bloq::after { content: "🔒"; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-size: calc(var(--u) * 7); filter: drop-shadow(0 4px 10px #000); }

/* ── la placa lisa del dibujo, con su texto ── */
.bpe-placa { position: absolute; display: grid; place-items: center; text-align: center; pointer-events: none; overflow: hidden;
  font: 400 calc(var(--u) * 2.5)/1 'Archivo Black', sans-serif; letter-spacing: .04em; white-space: nowrap; }
.bpe-torre .bpe-placa { color: #2a1a08; font-size: max(12px, calc(var(--u) * 2.6)); }
.bpe-placa.bloq { opacity: .45; }

/* ── la ficha: nombre, dificultad y aptos ── */
.bpe-ficha { position: absolute; height: auto !important; pointer-events: none; display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * .4); text-align: center; padding: calc(var(--u) * 1) calc(var(--u) * 1.2);
  background: rgba(6, 5, 8, .72); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: calc(var(--u) * 2);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent), 0 6px 18px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bpe-ficha[data-n="1"] { --c: var(--c1); } .bpe-ficha[data-n="2"] { --c: var(--c2); } .bpe-ficha[data-n="3"] { --c: var(--c3); }
.bpe-ficha b { font: 400 max(13px, calc(var(--u) * 3))/1.05 'Archivo Black', sans-serif; color: #fff7e6; letter-spacing: .02em; }
.bpe-ficha i { font: 400 max(12px, calc(var(--u) * 2.6))/1 system-ui, sans-serif; font-style: normal; color: var(--c); letter-spacing: .12em; }
.bpe-ficha em { font: 600 max(12px, calc(var(--u) * 2.6))/1.2 'DM Sans', system-ui, sans-serif; font-style: normal; color: #d8d0c0; }
.bpe-ficha.bloq { border-color: rgba(255,255,255,.18); box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.bpe-ficha.bloq b, .bpe-ficha.bloq i { color: #9a9488; }

/* ── abajo: las reglas y la pista ── */
.bpe-pie { position: absolute; left: 7%; right: 7%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4);
  text-align: center; pointer-events: none; }
.bpe-reglas { margin: 0; font: 500 max(15px, calc(var(--u) * 3.4))/1.4 'DM Sans', system-ui, sans-serif; color: #e6dfd2; text-shadow: 0 2px 10px #000; }
.bpe-reglas b { color: #f5c563; }
.bpe-hint { margin: 0; border: 0; cursor: pointer; pointer-events: auto; font: 400 max(15px, calc(var(--u) * 3.6))/1 'Archivo Black', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #1c1405; padding: calc(var(--u) * 2) calc(var(--u) * 5); border-radius: 999px;
  background: linear-gradient(180deg, #ffe39a, #f5c563 45%, #c9952c); box-shadow: 0 0 22px rgba(245,197,99,.45), 0 8px 20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.6);
  animation: bpeLate 1.6s ease-in-out infinite; }
@keyframes bpeLate { 50% { transform: scale(1.05); box-shadow: 0 0 34px rgba(245,197,99,.7), 0 8px 20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.6); } }

/* ── ENTRADA: la cámara entra, se encienden los tres, cae el título ── */
.bpe.bpe-entra .bpe-lienzo { animation: bpeCamara 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bpeCamara { from { opacity: 0; scale: 1.14; } 60% { opacity: 1; } to { opacity: 1; scale: 1; } }
.bpe.bpe-entra .bpe-titulo { animation: bpeSlam .5s cubic-bezier(.3,1.4,.5,1) .35s both; }
@keyframes bpeSlam { 0% { opacity: 0; scale: 2.2; } 65% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }
.bpe.bpe-entra .bpe-halo { animation: bpeEnciende .7s ease-out both; }
.bpe.bpe-entra .bpe-toque[data-n="1"] .bpe-halo { animation-delay: .55s; }
.bpe.bpe-entra .bpe-toque[data-n="2"] .bpe-halo { animation-delay: .8s; }
.bpe.bpe-entra .bpe-toque[data-n="3"] .bpe-halo { animation-delay: 1.05s; animation-duration: .9s; }
@keyframes bpeEnciende { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.bpe.bpe-entra .bpe-ficha, .bpe.bpe-entra .bpe-placa { animation: bpePop .42s cubic-bezier(.3,1.5,.5,1) both; }
.bpe.bpe-entra [data-n="1"].bpe-ficha, .bpe.bpe-entra [data-n="1"].bpe-placa { animation-delay: .65s; }
.bpe.bpe-entra [data-n="2"].bpe-ficha, .bpe.bpe-entra [data-n="2"].bpe-placa { animation-delay: .9s; }
.bpe.bpe-entra [data-n="3"].bpe-ficha, .bpe.bpe-entra [data-n="3"].bpe-placa { animation-delay: 1.15s; }
@keyframes bpePop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.bpe.bpe-entra .bpe-pie { animation: bpeSube .5s cubic-bezier(.2,.9,.3,1.1) 1.35s both; }
@keyframes bpeSube { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
/* el Final Boss llega con temblor */
.bpe.bpe-entra .bpe-lienzo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 40% at 50% 40%, rgba(255,50,40,.35), transparent 70%); animation: bpeRayo .5s 1.05s ease-out both; }
@keyframes bpeRayo { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* ── al tocar: fogonazo en su color, la cámara se le echa encima, sello del nivel ── */
.bpe.bpe-va .bpe-lienzo { animation: bpeAcerca .95s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes bpeAcerca { 0% { scale: 1; } 25% { scale: .97; } 100% { scale: 1.45; } }
.bpe.bpe-va .bpe-toque:not(.bpe-elegido):not(.bloq), .bpe.bpe-va .bpe-ficha, .bpe.bpe-va .bpe-pie, .bpe.bpe-va .bpe-placa { transition: opacity .25s; opacity: .15; }
.bpe-elegido .bpe-halo { opacity: 1 !important; animation: bpeArde .45s ease-in-out infinite alternate !important; }
@keyframes bpeArde { to { scale: 1.12; } }
/* el sello sobre quien se elige (entrada-escena.js lo mete en pantalla si cae en un borde) */
.bpe-sello { position: absolute; z-index: 2; left: var(--bpe-sx, 50%); top: var(--bpe-sy, 50%); translate: -50% -50%; pointer-events: none; opacity: 0;
  font: 400 calc(var(--u) * 7)/1 'Archivo Black', sans-serif; letter-spacing: .06em; white-space: nowrap;
  color: var(--bpe-c, #f5c563); padding: calc(var(--u) * 1.2) calc(var(--u) * 3); border: calc(var(--u) * .7) solid currentColor; border-radius: calc(var(--u) * 2);
  background: rgba(6,5,8,.55); text-shadow: 0 0 18px currentColor; box-shadow: 0 0 30px color-mix(in srgb, var(--bpe-c, #f5c563) 60%, transparent); }
.bpe.bpe-va .bpe-sello { animation: bpeSello .45s cubic-bezier(.3,1.5,.5,1) .12s forwards; }
@keyframes bpeSello { 0% { opacity: 0; scale: 2.6; rotate: -14deg; } 60% { opacity: 1; scale: .92; rotate: -6deg; } 100% { opacity: 1; scale: 1; rotate: -7deg; } }
/* bloqueado: no */
.bpe-no { animation: bpeNo .38s ease both; }
@keyframes bpeNo { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

@media (prefers-reduced-motion: reduce) {
  .bpe *, .bpe .bpe-lienzo { animation: none !important; }
  .bpe.bpe-va .bpe-sello { opacity: 1; }
}