/* boss-fin.css — el veredicto del Boss como escena (22-sep-2026).
   Acompaña a games/boss/escena-fin.js. Los tamaños van en `em` sobre el
   font-size que el módulo calcula a partir del ancho del hueco del dibujo: así
   el certificado se lee igual en un móvil de 360 y en un iPad.
   Copiado de games/dev-boss.html, que es donde Nico aprobó estas pantallas. */

/* La escena tapa el fondo de siempre del juego, que ya no pinta nada. */
body.bfin-on #scrFin > .bg,
body.bfin-on #scrFin > .bg-veil { opacity: 0; }

.bfin-escena {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-position: center center; background-size: cover;
  background-color: #07060a;
}
.bfin-anc { position: absolute; z-index: 2; pointer-events: none; display: grid; place-items: center; }

/* La lámina del certificado viejo sobra: el veredicto que se aprobó es una
   columna —rótulo, nota, frase, cifras y botones— sobre la ilustración. */
body.bfin-on #finIn > .fin-cert { display: none !important; }
/* Y el retrato del examinador tampoco: en las pantallas que se aprobaron la
   ilustración ES la escena, y el muñeco encima tapaba las cifras. */
body.bfin-on #finIn > .fin-boss { display: none !important; }

/* ── Arriba: el nivel y el rótulo en 3D ──────────────────────────────────── */
.bfin-cab {
  position: absolute; left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 4; pointer-events: none; text-align: center;
  padding: 0 16px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.bfin-cab .bfin-niv {
  margin: 0; font: 800 12px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #f3d27a;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
}
/* El rótulo es una imagen; `.veredicto` sigue siendo el nodo que el juego
   golpea (slam + onda), solo que sin letra propia. */
.bfin-cab .veredicto.bfin-rot {
  display: block !important; margin: 0;
  width: min(88%, 420px); height: clamp(66px, 19vw, 104px);
  color: transparent !important; text-shadow: none !important; -webkit-text-stroke: 0;
  /* el rótulo del juego es texto con degradado recortado (background-clip:text):
     hay que devolver el recorte a la caja o la imagen se recorta contra una
     letra de cuerpo 0 y no se ve nada. La imagen la pone escena-fin.js. */
  background: none center center / contain no-repeat;
  -webkit-background-clip: border-box; background-clip: border-box;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.75));
  font-size: 0; line-height: 0;
}
.bfin-cab .fin-quote {
  margin: 2px 0 0; max-width: 30ch;
  font: italic 600 15px/1.3 Georgia, 'Times New Roman', serif; color: #efe6d4;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
}

body.bfin-on #scrFin .fin-in { position: relative; z-index: 3; }

/* ── En medio: la nota, en su chapa ──────────────────────────────────────── */
.bfin-nota {
  width: 100%; height: 100%; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: .12em;
  background: linear-gradient(180deg, #fbf6ea, #e9dcc0);
  box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(0,0,0,.14);
  color: #2a2013; position: relative;
  font-family: 'Syne', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(30px, 9vw, 46px); line-height: 1;
  opacity: 0; animation: bfinSello .4s .85s cubic-bezier(.2,1.6,.4,1) forwards;
}
.bfin-nota i { font-style: normal; opacity: .4; font-weight: 700; margin: 0 .06em; }
.bfin-nota em {
  position: absolute; left: 8px; right: 8px; bottom: 9px; text-align: center;
  font: 800 max(12px, .2em)/1.2 'DM Sans', system-ui, sans-serif; font-style: normal;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(42,32,19,.62);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.bfin-on:not(.bfin-apto) .bfin-nota { background: linear-gradient(180deg, #f6eee6, #e2d2c6); }

@keyframes bfinSello {
  from { opacity: 0; transform: scale(1.7); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bfin-nota { animation: none; opacity: 1; }
}

/* Lo que el juego pinta debajo (frase, cifras, near-miss, revisión y botones)
   cae sobre la ilustración: sin velo, el texto blanco no se lee. El velo es una
   capa propia y NO el fondo de #finIn, que ocupa la pantalla entera y taparía
   también el rótulo y la nota, que es justo lo que hay que ver. */
.bfin-velo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,6,10,0) 0, rgba(8,6,10,.78) 54px, rgba(8,6,10,.94) 140px, rgba(8,6,10,.97) 100%);
}
body.bfin-on #scrFin .fin-in { padding-bottom: 18px; }
body.bfin-on #finIn > .fin-quote { color: #f3e7cf; text-shadow: 0 2px 10px rgba(0,0,0,.9); }

/* ── Desbloqueo de nivel (opción 2: la puerta con la llave) ───────────────── */
.bunlock {
  position: fixed; inset: 0; z-index: 2147481000;
  opacity: 0; transition: opacity .32s ease-out;
  background: #07060a;
}
.bunlock.on { opacity: 1; }
.bunlock-esc { position: absolute; inset: 0; background-repeat: no-repeat; }
/* La placa de latón de la puerta lleva el número del nivel que se abre. */
.bunlock-placa {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', system-ui, sans-serif; font-weight: 900; color: #3b2a10;
  text-shadow: 0 1px 0 rgba(255,240,180,.7);
  opacity: 0; animation: bfinSello .45s .5s cubic-bezier(.2,1.6,.4,1) forwards;
}
.bunlock-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(7,6,10,0), rgba(7,6,10,.86) 44%, rgba(7,6,10,.97));
}
.bunlock-t {
  margin: 0; font: 900 clamp(20px, 6vw, 28px)/1.1 'Syne', system-ui, sans-serif;
  letter-spacing: .01em; text-align: center;
  background: linear-gradient(180deg, #fff6d6, #f3d27a 45%, #c9952c 72%, #8a5f10);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #4a3407) drop-shadow(0 8px 14px rgba(0,0,0,.6));
}
.bunlock .cta { width: min(92%, 420px); }
.bunlock-luego {
  background: none; border: 0; color: #a79c8a; font: 700 .9rem/1 system-ui, sans-serif;
  padding: 8px 12px; cursor: pointer; text-decoration: underline;
}

/* ── El certificado (opción 1 · montaje 3) ────────────────────────────────
   Se gana superando el Final Boss con un 95 %. El vídeo llena la pantalla y el
   pie aparece cuando termina: mientras corre no hay nada que leer, que es lo
   que hace que se mire. */
.bcert {
  position: fixed; inset: 0; z-index: 2147481200;
  background: #000; opacity: 0; transition: opacity .32s ease-out;
  display: grid; place-items: center;
}
.bcert.on { opacity: 1; }
/* el «!» de avisar de un fallo va por encima de todo: mientras corre el
   certificado se aparta, igual que Volver y el sonido, que quedan debajo */
body.bcert-on .vp-fb-btn { visibility: hidden !important; } /* controles-juego.css fija la opacidad con !important */
/* `cover` recortaba los lados y se comía las puntas de ENHORABUENA y de la
   tarjeta: el vídeo se ve entero, con su banda negra arriba y abajo. */
.bcert-video { width: 100%; height: 100%; object-fit: contain; }
.bcert-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  /* velo para que el titular y el botón se lean sobre el suelo de la escena */
  background: linear-gradient(180deg, rgba(4,6,12,0), rgba(4,6,12,.96) 38%, rgba(4,6,12,.99));
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s ease-out, transform .45s cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
}
.bcert.fin .bcert-pie { opacity: 1; transform: none; pointer-events: auto; }
.bcert .cta { width: min(92%, 420px); margin-top: 6px; }
.bcert-tit {
  display: block; max-width: 440px; text-align: center;
  font: 800 clamp(1.15rem, 5.4vw, 1.6rem)/1.2 'Syne', system-ui, sans-serif;
  color: #eaf4ff; text-shadow: 0 2px 16px rgba(0,0,0,.95); text-wrap: balance;
}
.bcert-sub {
  margin: 0; max-width: 440px; text-align: center;
  font: 600 clamp(15px, 4vw, 1.12rem)/1.4 'DM Sans', system-ui, sans-serif;
  color: #c8d8e8; text-shadow: 0 2px 14px rgba(0,0,0,1); text-wrap: balance;
}

/* ── Al bajar por la revisión (29-sep) ────────────────────────────────────
   El rótulo, la frase y la nota van fijos arriba y #finIn se desplaza por
   debajo: el texto de la revisión subía y se leía encima del «NO APTO».
   Ahora lo que sube se desvanece al llegar al borde de abajo de la chapa
   (--bfin-corte lo pone escena-fin.js). Arriba no se ve nada que se mueva. */
body.bfin-on #scrFin .fin-in {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--bfin-corte, 0px), #000 calc(var(--bfin-corte, 0px) + 22px));
          mask-image: linear-gradient(180deg, transparent 0, transparent var(--bfin-corte, 0px), #000 calc(var(--bfin-corte, 0px) + 22px));
}

/* la etiqueta «Por qué» de la revisión medía 10 px (correccion.css la deja en
   max(10px, .66em)); en el veredicto del Boss, nunca por debajo de 12 (1-oct) */
#scrFin .corr-h { font-size: max(12px, .66em); }