/* CAJA FUERTE · acceso oculto al Universo 11 de Argian.
   Namespace propio (#caja / .caja-*). No toca ningún selector de vitrina.css
   ni de la experiencia de /u11/, que vive en su propio documento. */

#caja[hidden]{display:none}
#caja{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  background:#04050ae8; backdrop-filter:blur(10px);
  font-family:Inter,system-ui,sans-serif; color:#E8E2D6;
  animation:cajaEntra .32s ease both;
}
@keyframes cajaEntra{from{opacity:0}to{opacity:1}}

.caja-panel{
  position:relative; width:min(420px,100%);
  padding:28px 26px 22px;
  background:linear-gradient(#14131A,#0C0C11 70%,#171320);
  border:1px solid #3A3348; border-radius:6px;
  box-shadow:inset 0 1px 0 #ffffff10, 0 30px 80px #000a;
}
.caja-panel:before{
  content:''; position:absolute; inset:6px; border:1px solid #ffffff0c;
  border-radius:3px; pointer-events:none;
}
.caja-rotulo{
  font-size:8px; letter-spacing:.26em; color:#8D8296; margin:0 0 14px;
  display:flex; justify-content:space-between; gap:12px;
}
.caja-panel h2{
  font-family:Anton,Impact,sans-serif; font-weight:400;
  font-size:clamp(26px,7vw,34px); line-height:1; letter-spacing:.01em;
  margin:0 0 16px; color:#F0E9DC;
}
.caja-enigma{
  margin:0 0 20px; font-size:12.5px; line-height:1.8; color:#B9AFBD;
}
.caja-enigma b{display:block; font-weight:500; color:#D9C79E; margin-top:10px}

.caja-digitos{display:flex; gap:10px; justify-content:center; margin:0 0 16px}
.caja-digitos i{
  width:52px; height:64px; border-radius:4px; font-style:normal;
  display:grid; place-items:center;
  font-family:Anton,Impact,sans-serif; font-size:30px; color:#F2E9D8;
  background:#08080C; border:1px solid #4A4156;
  box-shadow:inset 0 6px 18px #0009;
  transition:border-color .2s, box-shadow .2s;
}
.caja-digitos i.lleno{border-color:#D9C79E; box-shadow:inset 0 6px 18px #0009, 0 0 14px #d9c79e22}
#caja.mal .caja-digitos{animation:cajaFalla .4s}
#caja.mal .caja-digitos i{border-color:#B6494E}
@keyframes cajaFalla{20%{transform:translateX(-9px)}45%{transform:translateX(8px)}70%{transform:translateX(-5px)}100%{transform:translateX(0)}}
#caja.bien .caja-digitos i{border-color:#7FCB8E; box-shadow:0 0 22px #7fcb8e33}

/* Campo real: invisible pero enfocable, para que el teclado del móvil abra. */
.caja-campo{
  position:absolute; opacity:0; pointer-events:none;
  width:1px; height:1px; left:-9999px;
}

.caja-teclado{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px}
.caja-teclado button{
  font:500 19px/1 Inter,system-ui,sans-serif; color:#E4DCCB;
  background:#16151C; border:1px solid #3B3446; border-radius:4px;
  padding:14px 0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .15s, border-color .15s;
}
.caja-teclado button:hover{background:#211E2A; border-color:#584d67}
.caja-teclado button:active{background:#2C2738}
.caja-teclado button.aux{font-size:12px; letter-spacing:.14em; color:#9B90A4}

.caja-aviso{font-size:10.5px; line-height:1.6; color:#8B8194; min-height:17px; margin:0; text-align:center}
#caja.mal .caja-aviso{color:#C9757A}
#caja.bien .caja-aviso{color:#8FD39C}

@media (max-width:420px){
  .caja-digitos i{width:46px; height:56px; font-size:26px}
  .caja-panel{padding:22px 18px 18px}
}
@media (prefers-reduced-motion:reduce){
  #caja,#caja.mal .caja-digitos{animation:none}
}

/* Blanco táctil de la puerta. La marca mide 15 px de alto y el pulgar no
   acierta; el relleno crece el área sensible y el margen negativo la devuelve
   a su sitio, así que no se mueve ni un píxel de lo que se ve. */
.marca{padding:12px 10px; margin:-12px -10px}