/* Escáner y recompensa de las llaves. Marca OMOW x Rosana: cian y rojo sobre negro; la llave y el logro, en oro. */
@font-face {
  font-family: 'Lilita One';
  src: url('lilita-one-latin.woff2') format('woff2');
  font-display: block;
}

:root {
  --fx-cian: #00ccff;
  --fx-cian-hondo: #0089b3;
  --fx-rojo: #ff0000;
  --fx-rojo-hondo: #a30000;
  --fx-oro: #ffc933;
  --fx-oro-claro: #fff1a8;
  --fx-oro-hondo: #e08a00;
  --fx-tinta: #06121a;           /* contorno de las letras: negro con el azul del cian */
  --fx-blanco: #ffffff;
  --fx-gorda: 'Lilita One', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  --fx-z-hud: 10;
  --fx-z-recompensa: 50;
}

/* ───────── Escáner (cámara) ───────── */
.esc { position: fixed; inset: 0; z-index: var(--fx-z-hud); pointer-events: none; color: var(--fx-blanco); font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.esc-visor {
  position: absolute; left: 50%; top: 45%;
  width: min(88vw, calc(58vh * 16 / 9)); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%); overflow: hidden; border-radius: 6px;
}
.esc-lineas { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 204, 255, 0.07) 0 1px, transparent 1px 4px); }
.esc-barrido {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: linear-gradient(to bottom, transparent 62%, rgba(0, 204, 255, 0.10) 88%, rgba(0, 204, 255, 0.38) 99%, var(--fx-cian) 100%);
  animation: esc-barrer 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.esc-barrido::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--fx-blanco);
  box-shadow: 0 0 8px 2px var(--fx-cian), 0 0 26px 6px rgba(0, 204, 255, 0.55);
}
@keyframes esc-barrer { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.esc-esq { position: absolute; width: 13%; aspect-ratio: 1; border: 0 solid var(--fx-cian); filter: drop-shadow(0 0 6px rgba(0, 204, 255, 0.8)); transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1), border-color 0.15s; animation: esc-respirar 1.6s ease-in-out infinite; }
.esc-esq.ai { top: 0; left: 0; border-top-width: 5px; border-left-width: 5px; border-top-left-radius: 10px; --dx: -1; --dy: -1; }
.esc-esq.ad { top: 0; right: 0; border-top-width: 5px; border-right-width: 5px; border-top-right-radius: 10px; --dx: 1; --dy: -1; }
.esc-esq.bi { bottom: 0; left: 0; border-bottom-width: 5px; border-left-width: 5px; border-bottom-left-radius: 10px; --dx: -1; --dy: 1; }
.esc-esq.bd { bottom: 0; right: 0; border-bottom-width: 5px; border-right-width: 5px; border-bottom-right-radius: 10px; --dx: 1; --dy: 1; }
@keyframes esc-respirar { 50% { transform: translate(calc(var(--dx) * -3px), calc(var(--dy) * -3px)); } }

/* Fijado: las esquinas se cierran sobre la imagen, destello rojo → blanco y el láser se congela en oro */
.esc.fijado .esc-esq { animation: none; border-color: var(--fx-rojo); transform: translate(calc(var(--dx) * -14px), calc(var(--dy) * -14px)) scale(0.9); }
.esc.fijado .esc-barrido { animation-play-state: paused; }
.esc.fijado .esc-barrido::after { background: var(--fx-oro-claro); box-shadow: 0 0 10px 3px var(--fx-oro), 0 0 30px 8px rgba(255, 201, 51, 0.6); }
.esc.fijado .esc-visor::after { content: ''; position: absolute; inset: 0; background: var(--fx-blanco); animation: esc-destello 0.35s ease-out forwards; }
@keyframes esc-destello { from { opacity: 0.75; } to { opacity: 0; } }

.esc-arriba { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; justify-content: center; gap: 10px; }
.esc-ficha { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(6, 18, 26, 0.62); border: 2px solid rgba(0, 204, 255, 0.55); }
.esc-ficha svg { width: 26px; height: 26px; fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2.2; }
.esc-ficha.hecha { background: var(--fx-oro); border-color: var(--fx-tinta); animation: esc-pop 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); }
.esc-ficha.hecha svg { stroke: var(--fx-tinta); fill: var(--fx-oro-claro); }
@keyframes esc-pop { from { transform: scale(0.2); } }

.esc-abajo { position: absolute; left: 16px; right: 16px; bottom: max(28px, env(safe-area-inset-bottom)); text-align: center; display: grid; gap: 4px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6); }
.esc-titulo { margin: 0; font: 28px/1.05 var(--fx-gorda); letter-spacing: 0.01em; color: var(--fx-blanco); }
.esc-abajo #estado { margin: 0; font-size: 16px; color: rgba(255, 255, 255, 0.92); }

/* ───────── Escucha (oído) ───────── */
.esc.oido .esc-visor { display: none; }
.esc-ondas { position: absolute; left: 50%; top: 44%; width: min(62vw, 42vh); aspect-ratio: 1; transform: translate(-50%, -50%); --nivel: 0; }
.esc-onda { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--fx-cian); opacity: 0; animation: esc-onda 2.4s ease-out infinite; }
.esc-onda:nth-child(2) { animation-delay: 0.8s; }
.esc-onda:nth-child(3) { animation-delay: 1.6s; }
@keyframes esc-onda { from { transform: scale(0.35); opacity: 0.9; } to { transform: scale(1); opacity: 0; } }
.esc-nucleo {
  position: absolute; inset: 30%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2de0ff, var(--fx-cian) 45%, var(--fx-cian-hondo));
  border: 4px solid var(--fx-tinta); box-shadow: 0 6px 0 var(--fx-tinta), 0 0 calc(18px + var(--nivel) * 60px) rgba(0, 204, 255, 0.75);
  transform: scale(calc(1 + var(--nivel) * 0.18)); transition: transform 0.08s linear;
}
.esc-nucleo svg { width: 46%; height: 46%; fill: var(--fx-tinta); }
.esc.oido.sincro .esc-onda { border-color: var(--fx-oro); }
.esc.oido.sincro .esc-nucleo { background: radial-gradient(circle at 35% 30%, var(--fx-oro-claro), var(--fx-oro) 45%, var(--fx-oro-hondo)); box-shadow: 0 6px 0 var(--fx-tinta), 0 0 calc(18px + var(--nivel) * 60px) rgba(255, 201, 51, 0.8); }

/* ───────── Recompensa ───────── */
.rec { position: fixed; inset: 0; z-index: var(--fx-z-recompensa); display: grid; place-items: center; overflow: hidden; color: var(--fx-blanco); font-family: var(--fx-gorda); }
.rec-fondo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 31%, rgba(0, 60, 90, 0.55), rgba(0, 0, 0, 0.9) 62%); animation: rec-aparecer 0.25s ease-out both; }
.rec-rayos {
  position: absolute; left: 50%; top: 31%; width: 190vmax; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(0, 204, 255, 0.34) 0deg 7deg, transparent 7deg 18deg, rgba(255, 255, 255, 0.16) 18deg 22deg, transparent 22deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, 0.85) 18%, transparent 46%);
          mask: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, 0.85) 18%, transparent 46%);
  animation: rec-rayos-entrar 0.7s cubic-bezier(0.2, 1, 0.3, 1) both, rec-girar 22s linear infinite; will-change: rotate, scale;
}
@keyframes rec-rayos-entrar { from { scale: 0; } }
@keyframes rec-girar { to { rotate: 360deg; } }
.rec-halo { position: absolute; left: 50%; top: 31%; width: min(92vw, 58vh); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 241, 168, 0.75), rgba(255, 201, 51, 0.32) 32%, transparent 66%); animation: rec-latir 1.6s ease-in-out 0.7s infinite; }
@keyframes rec-latir { 50% { scale: 1.08; opacity: 0.85; } }
.rec-llave { position: absolute; left: 50%; top: 31%; width: min(84vw, 52vh); aspect-ratio: 1; translate: -50% -50%; }
.rec-chispas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rec-destello { position: absolute; inset: 0; background: var(--fx-blanco); opacity: 0; pointer-events: none; }
.rec.aterriza .rec-destello { animation: rec-flash 0.22s ease-out; }
@keyframes rec-flash { from { opacity: 0.85; } to { opacity: 0; } }
.rec.aterriza .rec-escena { animation: rec-temblor 0.28s linear; }
@keyframes rec-temblor { 20% { translate: -7px 4px; } 40% { translate: 6px -5px; } 60% { translate: -4px -3px; } 80% { translate: 3px 3px; } }
.rec-escena { position: absolute; inset: 0; }

.rec-texto { position: absolute; left: 16px; right: 16px; top: calc(31% + min(31vw, 20vh)); display: grid; justify-items: center; gap: 14px; text-align: center; }
.rec-titulo { position: relative; margin: 0; font: 400 clamp(38px, 11.5vw, 68px)/0.98 var(--fx-gorda); letter-spacing: 0.01em; text-wrap: balance; opacity: 0; }
.rec-titulo::before {            /* capa trasera: contorno grueso y sombra de bloque, como un sello */
  content: attr(data-texto); position: absolute; inset: 0; z-index: -1;
  color: var(--fx-tinta); -webkit-text-stroke: 0.2em var(--fx-tinta); text-shadow: 0 0.12em 0 var(--fx-tinta), 0 0.2em 0.3em rgba(0, 0, 0, 0.55);
}
.rec-titulo span {               /* capa delantera: oro con brillo arriba */
  background: linear-gradient(180deg, var(--fx-oro-claro) 0%, var(--fx-oro) 46%, var(--fx-oro-hondo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rec.aterriza .rec-titulo { animation: rec-sello 0.42s cubic-bezier(0.2, 1.5, 0.35, 1) 0.12s both; }
@keyframes rec-sello { from { opacity: 0; transform: scale(2.6) rotate(-8deg); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1) rotate(-3deg); } }

.rec-cinta {
  position: relative; padding: 10px 40px 12px; background: linear-gradient(180deg, #ff3b3b, var(--fx-rojo) 55%, var(--fx-rojo-hondo));
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
  font: 400 clamp(19px, 5.4vw, 26px)/1 var(--fx-gorda); color: var(--fx-blanco); transform: scaleX(0) rotate(-2deg);
  text-shadow: 0 2px 0 var(--fx-tinta), 2px 0 0 var(--fx-tinta), -2px 0 0 var(--fx-tinta), 0 -2px 0 var(--fx-tinta), 0 4px 0 var(--fx-tinta);
}
.rec.aterriza .rec-cinta { animation: rec-cinta 0.36s cubic-bezier(0.2, 1.6, 0.4, 1) 0.45s both; }
@keyframes rec-cinta { from { transform: scaleX(0) rotate(-2deg); } to { transform: scaleX(1) rotate(-2deg); } }

.rec-sub { margin: 0; max-width: 30ch; font: 500 17px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; color: rgba(255, 255, 255, 0.92); opacity: 0; }
.rec.aterriza .rec-sub { animation: rec-aparecer 0.3s ease-out 0.75s both; }

.rec-boton {
  width: auto; min-width: 220px; min-height: 56px; margin-top: 6px; padding: 10px 28px; border: 3px solid var(--fx-tinta); border-radius: 16px;
  background: linear-gradient(180deg, #5ee2ff, var(--fx-cian) 50%); color: var(--fx-tinta); font: 400 24px/1 var(--fx-gorda);
  box-shadow: 0 6px 0 var(--fx-cian-hondo), 0 6px 0 3px var(--fx-tinta); cursor: pointer; opacity: 0; pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.rec.aterriza .rec-boton { animation: rec-pop 0.35s cubic-bezier(0.3, 1.8, 0.5, 1) 1s both; pointer-events: auto; }
.rec-boton:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--fx-cian-hondo), 0 2px 0 3px var(--fx-tinta); }
.rec-boton:focus-visible { outline: 3px solid var(--fx-blanco); outline-offset: 5px; }
@keyframes rec-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes rec-aparecer { from { opacity: 0; } to { opacity: 1; } }
.rec.saliendo { animation: rec-salir 0.25s ease-in forwards; }
@keyframes rec-salir { to { opacity: 0; transform: scale(1.04); } }

@media (orientation: landscape) and (max-height: 520px) {
  .rec-rayos, .rec-halo, .rec-llave { left: 30%; top: 50%; }
  .rec-llave { width: min(46vw, 78vh); }
  .rec-texto { left: 52%; right: 16px; top: 50%; translate: 0 -50%; }
}

/* Movimiento reducido: sin giros, zoom, temblor ni confeti; todo aparece con un fundido */
@media (prefers-reduced-motion: reduce) {
  .esc-barrido, .esc-esq, .esc-onda { animation: none !important; }
  .esc-barrido { transform: translateY(-50%); }
  .rec-rayos { animation: rec-aparecer 0.25s ease-out both; }
  .rec-halo { animation: none; }
  .rec.aterriza .rec-escena { animation: none; }
  .rec.aterriza .rec-titulo, .rec.aterriza .rec-cinta, .rec.aterriza .rec-sub, .rec.aterriza .rec-boton { animation: rec-aparecer 0.25s ease-out both; }
  .rec.aterriza .rec-cinta { transform: scaleX(1) rotate(-2deg); }
  .rec.aterriza .rec-titulo { transform: rotate(-3deg); }
}

/* Mientras dura la celebración no se transparenta el texto del escáner */
body:has(.rec) .esc { opacity: 0; transition: opacity 0.2s; }