/* KIRA · minijuegos (js/juegos.js): ENTER CODE, colección/HUNTER y DIG THE BALE.
   Directo y visual: iconos, una cifra grande y una línea de texto como mucho.
   Paleta de css/estilos.css: violeta #7A1BFF / #6B0FFF, verde gusano #A3F51F (acento), negro y platino.
   Titulares y cifras en Kira Glitch (.display), códigos en JetBrains Mono (.mono). */

/* ui4: sin iconos de caza a la vista (los juegos se encuentran en el mundo: src/secretos.js, fichas y cajón) */
@keyframes jg-pulso { 0% { box-shadow: inset 0 0 0 1px var(--gusano), 0 0 0 rgba(163, 245, 31, .6); } 100% { box-shadow: inset 0 0 0 1px transparent, 0 0 24px rgba(163, 245, 31, 0); } }
/* anillo de progreso */
.an-fondo { fill: none; stroke: rgba(169, 175, 186, .22); stroke-width: 2.5; }
.an-prog { fill: none; stroke: var(--gusano); stroke-width: 2.5; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.an-rombo { fill: none; stroke: var(--violeta-texto); stroke-width: 1.5; }
.completo .an-rombo, .es-hunter .an-rombo { fill: var(--gusano); stroke: var(--gusano); }
/* el contador del 3D (src/main.js) se muda a la colección; solo queda RESET FINDS */
body.con-juegos .hallazgos .hz-cuenta { display: none; }

/* ---------- capas (diálogos) ---------- */
.jg-capa {
  position: fixed; inset: 0 0 var(--aviso) 0; z-index: 45; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(7, 6, 10, .78);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.jg-capa[hidden] { display: none; }
.jg-terminal {
  position: relative; width: 100%; max-width: 380px; max-height: calc(100vh - 32px); overflow: auto;
  background: #0A0812; border: 1px solid var(--violeta); color: var(--platino);
  box-shadow: 0 0 0 1px var(--violeta-sombra), 0 0 40px rgba(122, 27, 255, .35);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  padding: 0 16px 16px; outline: none;
  background-image: repeating-linear-gradient(0deg, rgba(122, 27, 255, .05) 0 1px, transparent 1px 3px);
}
.jg-barra {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  margin: 0 -16px 10px; padding: 0 0 0 14px; font-size: 11px; letter-spacing: .16em;
  background: var(--violeta-hondo); color: var(--platino);
}
.jg-barra > span { display: inline-flex; align-items: center; gap: 7px; }
.jg-barra svg { width: 16px; height: 16px; }
.jg-barra .an-prog, .jg-barra .an-fondo { stroke-width: 4; }
.jg-x { width: 44px; height: 40px; border: 0; background: transparent; color: var(--platino); font-size: 22px; line-height: 1; cursor: pointer; }
.jg-x:hover, .jg-x:focus-visible { background: var(--negro); outline: none; color: var(--gusano); }
.jg-titulo { font-size: 30px; margin: 4px 0 6px; color: var(--platino); text-shadow: 3px 0 0 var(--violeta-sombra), -1px 0 0 rgba(163, 245, 31, .5); }
.jg-sub { margin: 10px 0 4px; font-size: 10px; letter-spacing: .16em; color: var(--violeta-texto); }
.jg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--violeta); background: var(--violeta-hondo);
  color: var(--platino); font: 14px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.jg-btn:hover, .jg-btn:focus-visible { background: var(--gusano); color: var(--negro); border-color: var(--gusano); outline: none; }
.jg-btn.jg-mini { padding: 0 10px; font-size: 12px; }
.jg-btn.jg-grande { width: 100%; min-height: 48px; font-size: 17px; }
.jg-ok, .jg-estado { color: var(--gusano); }
.jg-mal { color: #ff6a4d; }
.jg-ej { color: var(--teja-texto); font-style: normal; font-size: 10px; letter-spacing: 0; }

/* ---------- recompensa: cifra enorme, código y COPY ---------- */
.jg-premio {
  text-align: center; padding: 14px 10px 12px; border: 1px solid var(--gusano);
  background: radial-gradient(ellipse at 50% 25%, rgba(163, 245, 31, .14), transparent 70%), #07060A;
  /* sin chaflán: el borde se ve entero */
}
.jg-premio > svg { color: var(--gusano); width: 30px; height: 30px; }
.jg-cifra {
  margin: 0; font-size: 68px; line-height: .95; color: var(--gusano);
  text-shadow: 4px 0 0 var(--violeta-sombra), -2px 0 0 rgba(122, 27, 255, .7);
  animation: jg-cifra .7s cubic-bezier(.2, 1.4, .3, 1) both;
}
@keyframes jg-cifra {
  0% { transform: scale(2.2); opacity: 0; filter: blur(6px); }
  35% { opacity: 1; filter: none; transform: scale(.92) translateX(-4px); clip-path: inset(0 0 45% 0); }
  50% { transform: scale(1.04) translateX(3px); clip-path: inset(40% 0 0 0); }
  65% { clip-path: inset(0); }
  100% { transform: none; }
}
.jg-premio-early .jg-cifra { font-size: 46px; }
.jg-cifra-mal { font-size: 40px; color: #ff6a4d; }
.jg-alc { margin: 6px 0 10px; font-size: 10.5px; letter-spacing: .16em; color: var(--plata); text-transform: uppercase; }
.jg-premio-cod { display: flex; align-items: stretch; justify-content: center; gap: 6px; }
.jg-premio-cod > span.mono { display: inline-flex; align-items: center; padding: 0 12px; min-height: 44px; font-size: 18px; font-weight: 700; letter-spacing: .16em; color: var(--platino); border: 1px dashed rgba(163, 245, 31, .6); }
.jg-copiar { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--gusano); background: var(--gusano); color: var(--negro); font: 700 12px/1 var(--font-mono); letter-spacing: .1em; cursor: pointer; }
.jg-copiar:hover, .jg-copiar:focus-visible { background: var(--negro); color: var(--gusano); outline: none; }

/* código compacto (YOUR CODES) */
.jg-cupon { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; margin: 6px 0; padding: 0 0 0 8px; border: 1px solid rgba(163, 245, 31, .35); border-left: 3px solid var(--gusano); background: rgba(163, 245, 31, .04); }
.jg-cupon-c { font-size: 20px; font-weight: 400; color: var(--gusano); }
.jg-cupon-cod { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--platino); }
.jg-cupon-cod i { font-style: normal; font-size: 9px; letter-spacing: 0; color: var(--teja-texto); font-weight: 400; }
.jg-cupon-txt { font-size: 9px; font-weight: 400; letter-spacing: .08em; color: var(--plata); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-cupon .jg-copiar { align-self: stretch; }
.jg-cartera { margin-top: 12px; }

/* ---------- A. ENTER CODE: un campo ---------- */
.jg-form { display: flex; gap: 6px; margin: 6px 0 10px; }
.jg-form input {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 10px; border: 0; border-bottom: 2px solid var(--gusano); background: #050408;
  color: var(--platino); font-size: 24px; letter-spacing: .24em; text-transform: uppercase; caret-color: var(--gusano);
}
.jg-form input:focus { outline: none; background: rgba(163, 245, 31, .06); }
.jg-form input::placeholder { font-size: 11px; letter-spacing: .18em; color: rgba(169, 175, 186, .6); }
.jg-enviar { width: 52px; min-height: 52px; padding: 0; }
.jg-salida:empty { display: none; }
.jg-res { display: flex; flex-direction: column; gap: 10px; animation: jg-aparece .35s ease-out both; }
@keyframes jg-aparece { from { opacity: 0; transform: translateY(6px); } }
.jg-res-mal { margin: 2px 0 6px; font-size: 12px; letter-spacing: .16em; color: #ff6a4d; }
.jg-estado { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; letter-spacing: .16em; }
.jg-hall { display: flex; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--linea); background: rgba(42, 0, 102, .25); }
.jg-hall-foto { flex: none; width: 48px; height: 60px; overflow: hidden; border: 1px solid var(--violeta); display: grid; place-items: center; background: var(--panel); color: var(--violeta-texto); }
.jg-hall-foto img { width: 100%; height: 100%; object-fit: cover; }
.jg-hall-hq { width: 44px; height: 44px; background: var(--platino); color: var(--negro); font-size: 22px; }
.jg-hall-txt { display: flex; flex-direction: column; gap: 3px; }
.jg-hall-txt b { font-size: 14px; letter-spacing: .08em; color: var(--platino); }
.jg-hall-txt span { font-size: 10px; letter-spacing: .14em; color: var(--plata); }
.jg-sacude { animation: jg-sacude .35s linear; }
@keyframes jg-sacude { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ---------- B. colección ---------- */
.jg-colec .jg-terminal { text-align: center; }
.jg-col-cab { position: relative; width: 112px; height: 112px; margin: 8px auto 6px; }
.jg-col-anillo svg { display: block; }
.jg-col-anillo .an-rombo { display: none; }
.jg-col-anillo .an-fondo, .jg-col-anillo .an-prog { stroke-width: 2; }
.jg-col-n { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 36px; color: var(--platino); }
.jg-col-n small { font-size: 16px; color: var(--plata); }
.jg-col-n { grid-auto-flow: column; align-content: center; justify-content: center; }
.jg-slots { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 2px 0 14px; padding: 0; }
.jg-slots li { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid var(--violeta); }
.jg-slots li.si { background: var(--gusano); border-color: var(--gusano); box-shadow: 0 0 6px rgba(163, 245, 31, .5); }
.jg-hitos { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 112px)); justify-content: center; gap: 8px; }
.jg-hito { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 6px; border: 1px solid var(--linea); background: #07060A; color: var(--plata); }
.jg-hito:not(.ok) .jg-hito-ico { opacity: .35; }
.jg-hito.ok { border-color: rgba(163, 245, 31, .45); color: var(--platino); }
.jg-hito-ico { height: 34px; display: grid; place-items: center; }
.jg-hito-ico b { font-size: 26px; font-weight: 400; color: var(--gusano); }
.jg-hn { font-size: 10px; letter-spacing: .14em; color: var(--plata); }
.jg-hito.ok .jg-hn { color: var(--gusano); }
.jg-candado { display: grid; place-items: center; height: 44px; color: rgba(169, 175, 186, .6); }
.jg-hito .jg-copiar, .jg-hito .jg-btn { width: 100%; padding: 0 4px; font-size: 11px; }
.jg-h-hunter .jg-hito-ico { color: var(--gusano); }
.jg-col-pie { text-align: left; }
.jg-col-reset .hallazgos { position: static; display: flex; justify-content: center; margin: 10px 0 0; opacity: 1; pointer-events: auto; }
.jg-col-reset .hallazgos .hz-reset {
  min-height: 44px; padding: 0 14px; font-size: 10px; letter-spacing: .14em; color: var(--plata); background: transparent;
  border: 1px dashed rgba(181, 69, 47, .7); clip-path: none; cursor: pointer;
}
.jg-col-reset .hallazgos .hz-reset:hover, .jg-col-reset .hallazgos .hz-reset:focus-visible { color: var(--platino); background: rgba(181, 69, 47, .25); outline: none; }

/* tarjeta de hito (no bloquea): icono o cifra + una línea */
.jg-tarjeta {
  position: fixed; z-index: 44; left: 50%; bottom: calc(var(--aviso) + 14px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  width: min(340px, calc(100vw - 32px)); padding: 12px 44px 12px 14px; background: #0A0812; border: 1px solid var(--gusano);
  box-shadow: 0 0 30px rgba(163, 245, 31, .25);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.jg-tarjeta.jg-entra { animation: jg-sube .5s cubic-bezier(.2, .9, .2, 1) both; }
.jg-tarjeta[hidden] { display: none; }
.jg-tarjeta .jg-x { position: absolute; right: 0; top: 0; }
.jg-tj-ico { flex: none; min-width: 64px; display: grid; place-items: center; color: var(--gusano); }
.jg-tj-ico svg { width: 44px; height: 44px; }
.jg-tj-ico .jg-cifra { font-size: 42px; }
.jg-tj-txt { min-width: 0; }
.jg-tj-txt .jg-sub { margin: 0 0 4px; color: var(--gusano); }
.jg-tj-txt .jg-alc { margin: 0 0 6px; }
.jg-tj-txt .jg-premio-cod { justify-content: flex-start; }
.jg-tj-txt .jg-premio-cod > span.mono { font-size: 14px; padding: 0 8px; }
@keyframes jg-sube { from { transform: translate(-50%, 30px); opacity: 0; } }

/* ---------- HUNTER ---------- */
.jg-hun .jg-terminal { max-width: 400px; text-align: center; border-color: var(--gusano); box-shadow: 0 0 0 1px var(--violeta-sombra), 0 0 60px rgba(163, 245, 31, .25); }
.jg-hun .jg-barra { background: var(--gusano); color: var(--negro); }
.jg-hun .jg-x { color: var(--negro); }
.jg-hun .jg-x:hover, .jg-hun .jg-x:focus-visible { color: var(--gusano); }
.jg-linea1 { margin: 2px 0 4px; font-size: 10px; letter-spacing: .2em; color: var(--gusano); }
.jg-insignia { display: grid; place-items: center; margin: 2px auto 0; filter: drop-shadow(0 0 16px rgba(163, 245, 31, .55)); }
.jg-hunter-tit { font-size: 44px; margin: 4px 0 0; letter-spacing: .12em; }
.jg-premios { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jg-premios li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px; border: 1px solid rgba(163, 245, 31, .35); background: rgba(163, 245, 31, .04); color: var(--gusano); }
.jg-premios li b { font-size: 24px; font-weight: 400; color: var(--platino); line-height: 1; }
.jg-premios li .mono { font-size: 9px; letter-spacing: .12em; color: var(--plata); }
.jg-hform { text-align: left; }
.jg-hform input[type=email] { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--violeta); background: #050408; color: var(--platino); font-size: 15px; letter-spacing: .04em; }
.jg-hform input[type=email]::placeholder { font-size: 11px; letter-spacing: .18em; color: rgba(169, 175, 186, .6); }
.jg-hform input[type=email]:focus { outline: 2px solid var(--gusano); outline-offset: 0; }
.jg-reserva { display: flex; gap: 6px; align-items: center; border: 0; margin: 8px 0 0; padding: 0; min-width: 0; }
.jg-reserva legend { float: left; margin: 0 4px 0 0; padding: 0; font-size: 11px; letter-spacing: .1em; color: var(--violeta-texto); line-height: 44px; }
.jg-reserva label { position: relative; flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--linea); font: 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--plata); cursor: pointer; }
.jg-reserva input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.jg-reserva label:has(input:checked) { border-color: var(--gusano); color: var(--gusano); background: rgba(163, 245, 31, .08); }
.jg-reserva label:has(input:focus-visible) { outline: 2px solid var(--gusano); outline-offset: 1px; }
.jg-rgpd { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; font-size: 12px; line-height: 1.4; color: var(--platino); cursor: pointer; min-height: 44px; }
.jg-rgpd input { accent-color: var(--gusano); width: 20px; height: 20px; flex: none; margin: 0; }
.jg-legal { font-size: 10px; color: var(--plata); line-height: 1.45; margin: 4px 0 8px; text-align: left; }
.jg-legal .hueco { font-size: 10px; }
.jg-err { min-height: 16px; margin: 0 0 6px; font-size: 11px; color: #ff6a4d; }
.jg-dentro { justify-content: center; margin: 0 0 10px; }
.jg-reservado { margin: 10px 0 0; font-size: 11px; letter-spacing: .12em; color: var(--gusano); }
.jg-hun .jg-cupon { text-align: left; }

/* ritual: barrido, la insignia entra con glitch y el título se enciende */
.jg-ritual { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.jg-scan { position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(transparent, rgba(163, 245, 31, .35), transparent); }
.jg-ritual-on .jg-scan { animation: jg-barrido 1.1s cubic-bezier(.4, 0, .2, 1) .1s both; }
.jg-ritual-on .jg-insignia { animation: jg-insignia 1.2s cubic-bezier(.2, 1.4, .3, 1) .5s both; }
.jg-ritual-on .jg-hunter-tit { animation: jg-enciende 1s steps(8) 1.1s both; }
.jg-ritual-on .jg-linea1 { animation: jg-tecleo .7s steps(12) .2s both; }
.jg-ritual-on .jg-premios li { animation: jg-sube2 .45s ease-out both; }
.jg-ritual-on .jg-premios li:nth-child(1) { animation-delay: 1.5s; }
.jg-ritual-on .jg-premios li:nth-child(2) { animation-delay: 1.65s; }
.jg-ritual-on .jg-premios li:nth-child(3) { animation-delay: 1.8s; }
@keyframes jg-tecleo { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes jg-barrido { to { top: 110%; } }
@keyframes jg-insignia {
  0% { transform: scale(2.4) rotate(-30deg); opacity: 0; filter: hue-rotate(90deg); }
  30% { opacity: 1; transform: scale(.85) rotate(6deg) translateX(-6px); }
  45% { transform: scale(1.05) translateX(5px); clip-path: inset(30% 0 40% 0); }
  55% { clip-path: inset(0); }
  100% { transform: none; }
}
@keyframes jg-enciende { 0% { opacity: 0; } 30% { opacity: 1; } 40% { opacity: .2; } 60% { opacity: 1; } 70% { opacity: .4; } 100% { opacity: 1; } }
@keyframes jg-sube2 { from { opacity: 0; transform: translateY(8px); } }

/* ---------- botón DIG en la ficha ---------- */
.jg-ficha-dig { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 6px 6px 6px 10px; border: 1px dashed var(--gusano); background: rgba(163, 245, 31, .05); color: var(--gusano); }
.jg-ficha-ico { display: grid; place-items: center; }
.jg-ficha-dig p { flex: 1; margin: 0; font-size: 10px; letter-spacing: .14em; color: var(--gusano); }
.et-early { background: var(--gusano) !important; color: var(--negro) !important; border-color: var(--gusano) !important; }
.early-nota { color: var(--gusano) !important; }

/* ---------- C. DIG THE BALE ---------- */
.jg-digc .jg-terminal { max-width: 520px; padding-bottom: 14px; }
.jg-dig-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.jg-hud { margin: 0; font-size: 13px; color: var(--plata); letter-spacing: .06em; }
.jg-reloj { color: var(--gusano); font-weight: 700; font-size: 20px; }
.jg-hud.jg-prisa .jg-reloj { color: #ff6a4d; }
.jg-son { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--linea); background: transparent; color: var(--plata); cursor: pointer; }
.jg-son:focus-visible { outline: 2px solid var(--gusano); outline-offset: -2px; }
.jg-son.activo { color: var(--gusano); border-color: var(--gusano); }
.jg-son .onda, .jg-son.activo .mudo { display: none; }
.jg-son.activo .onda { display: inline; }
.jg-lienzo { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: calc(100vh - 150px); background: #07060A; border: 1px solid var(--violeta-sombra); }
.jg-cv { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
.jg-cv:active { cursor: grabbing; }
.jg-cv:focus-visible { box-shadow: inset 0 0 0 2px var(--gusano); }
.jg-dig-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 16px; }
.jg-dig-msg:empty { display: none; }
.jg-dig-fin { pointer-events: auto; width: 100%; max-width: 300px; padding: 16px; background: rgba(10, 8, 18, .92); border: 1px solid var(--violeta); text-align: center; }
.jg-dig-fin.ok { border-color: var(--gusano); box-shadow: 0 0 30px rgba(163, 245, 31, .3); }
.jg-dig-fin .jg-estado { justify-content: center; margin-bottom: 10px; }
.jg-dig-fin .jg-btn { margin-top: 12px; }
.jg-dig-fin.ok .jg-premio { border: 0; background: none; padding: 0; }
.jg-dig-dat { display: flex; justify-content: center; align-items: center; gap: 22px; color: var(--gusano); }
.jg-dig-dat > span:not(.jg-glow) { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jg-dig-dat b { font-size: 30px; font-weight: 400; color: var(--platino); line-height: 1; }
.jg-glow { width: 14px; height: 14px; transform: rotate(45deg); background: var(--gusano); box-shadow: 0 0 18px var(--gusano); animation: jg-brillo 1.6s ease-in-out infinite; }
@keyframes jg-brillo { 50% { opacity: .35; box-shadow: 0 0 6px var(--gusano); } }
.jg-dig-ini .jg-alc { margin: 12px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .jg-sacude, .jg-tarjeta, .jg-tarjeta.jg-entra, .jg-cifra, .jg-res, .jg-glow, .cj-anillo.pulso, .jg-notado,
  .jg-ritual-on .jg-scan, .jg-ritual-on .jg-insignia, .jg-ritual-on .jg-hunter-tit,
  .jg-ritual-on .jg-linea1, .jg-ritual-on .jg-premios li { animation: none !important; }
  .an-prog { transition: none; }
  .jg-scan { display: none; }
}
@media (max-width: 420px) {
  .jg-terminal { padding: 0 14px 14px; }
  .jg-barra { margin: 0 -14px 10px; }
  .jg-cifra { font-size: 58px; }
  .jg-hunter-tit { font-size: 38px; }
}