/* ==================================================================
   Interfaz durante la partida: HUD, lista de objetos, avisos, controles
   flotantes, pantalla de pausa y viñeta de presión.
   ================================================================== */

/* -------- Viñeta de presión -------- */
#vignette{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;
  transition:opacity 3s ease;
  background:radial-gradient(ellipse at center,rgba(255,170,80,.04) 34%,
    rgba(226,120,40,.18) 72%,rgba(105,45,0,.32) 100%);}
#vignette.activa{opacity:1;animation:latidoPresion 3.8s ease-in-out infinite;}
@keyframes latidoPresion{0%,100%{filter:brightness(1);}50%{filter:brightness(1.4);}}

/* -------- HUD -------- */
.hud{position:absolute;z-index:10;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);
  user-select:none;display:none;}
body.jugando .hud{display:block;}
#contador{top:18px;left:18px;font-size:24px;font-weight:700;background:var(--panel);
  padding:10px 18px;border-radius:14px;border:1px solid var(--borde);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;gap:10px;}
#contador i{color:var(--amarillo);font-size:20px;}
#contador span{color:var(--exito);}
#cronometro{top:18px;right:18px;font-size:22px;font-variant-numeric:tabular-nums;
  background:var(--panel);padding:10px 18px;border-radius:14px;border:1px solid var(--borde);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color 2s,color 2s;display:flex;align-items:center;gap:10px;}
#cronometro.presion{border-color:#ff7a26;color:#ffd9b0;background:rgba(120,40,0,.6);
  animation:latidoPresion 2.2s ease-in-out infinite;}
#brujula{top:18px;left:50%;transform:translateX(-50%);font-size:16px;
  font-weight:700;background:var(--panel);padding:5px 6px;border-radius:12px;
  border:1px solid var(--borde);display:flex;align-items:center;gap:4px;}
#brujulaTexto{min-width:38px;text-align:center;letter-spacing:3px;}
/* Flechas de giro: alternativa visible al arrastre con el botón derecho */
#brujula .giro{width:32px;height:32px;border-radius:9px;border:1px solid transparent;
  background:rgba(255,255,255,.06);color:#cdd9ee;font-size:13px;cursor:pointer;
  display:grid;place-items:center;transition:background .12s,color .12s,border-color .12s;}
#brujula .giro:hover{background:rgba(255,209,102,.16);color:var(--amarillo);
  border-color:rgba(255,209,102,.4);}
#brujula .giro:active,#brujula .giro.pulsada{background:var(--amarillo);color:#14213e;}
#nivelActualHud{top:60px;left:50%;transform:translateX(-50%);font-size:13px;
  background:rgba(20,28,48,.5);padding:5px 14px;border-radius:10px;opacity:.85;
  display:flex;align-items:center;gap:8px;}
#ayudaTab{bottom:52px;left:50%;transform:translateX(-50%);font-size:14px;background:var(--panel);
  padding:8px 16px;border-radius:10px;border:1px solid var(--borde);}
#ayudaTab.espera{color:#ffb37c;}
#ayudaControles{bottom:16px;left:50%;transform:translateX(-50%);font-size:12px;
  background:rgba(15,20,36,.55);padding:6px 14px;border-radius:10px;opacity:.85;white-space:nowrap;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;}
#ayudaControles b{color:var(--amarillo);}
#ayudaControles span{display:inline-flex;align-items:center;gap:5px;}

/* -------- Cluster de controles en juego -------- */
#ctrlJuego{position:absolute;top:64px;right:18px;z-index:11;display:none;gap:8px;}
body.jugando #ctrlJuego{display:flex;}
#ctrlJuego button{width:44px;height:44px;border-radius:12px;border:1px solid var(--borde);
  background:var(--panel);color:#fff;font-size:17px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:border-color .15s,transform .1s,color .15s;}
#ctrlJuego button:hover{border-color:var(--amarillo);color:var(--amarillo);transform:translateY(-1px);}

/* -------- Lista de objetos a memorizar -------- */
#panelLista{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);
  z-index:20;background:linear-gradient(160deg,#2b2b55ee,#1c1c3aee);border:2px solid var(--amarillo);
  border-radius:20px;padding:26px 40px;text-align:center;display:none;
  box-shadow:0 20px 60px rgba(0,0,0,.6);}
#panelLista.visible{display:block;animation:aparecer .3s ease forwards;}
@keyframes aparecer{to{transform:translate(-50%,-50%) scale(1);}}
#panelLista h2{color:var(--amarillo);margin-bottom:16px;font-size:21px;}
#panelLista ul{list-style:none;columns:2;column-gap:34px;text-align:left;}
#panelLista li{font-size:16px;padding:6px 0;break-inside:avoid;
  display:flex;align-items:center;gap:11px;}
/* Cada objeto lleva su propio icono: se memoriza la forma, no solo la palabra. */
#panelLista .li-ic{flex:0 0 26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:13px;color:var(--amarillo);background:rgba(255,209,102,.12);
  border:1px solid rgba(255,209,102,.28);}
#panelLista li.hallado{opacity:.42;}
#panelLista li.hallado .li-txt{text-decoration:line-through;}
#panelLista li.hallado .li-ic{color:var(--exito);background:rgba(124,252,154,.12);
  border-color:rgba(124,252,154,.3);}
#panelLista .tempo{margin-top:14px;font-size:13px;color:#9fd8ff;}

/* -------- Avisos -------- */
#toast{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);z-index:15;
  background:rgba(40,160,90,.92);color:#fff;font-size:17px;font-weight:600;padding:10px 26px;
  border-radius:12px;opacity:0;transition:opacity .3s;pointer-events:none;
  display:flex;align-items:center;gap:10px;}
#toast.visible{opacity:1;}

/* -------- Instrucciones previas al nivel -------- */
#instruccionesNivel{background:rgba(6,10,20,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;z-index:34;}
#instruccionesNivel.visible{display:flex;}
/* Botones de pie: volver al menú o entrar al nivel */
#instruccionesNivel .inst-botones{display:flex;gap:10px;flex-wrap:wrap;}
#instruccionesNivel .inst-botones .btn{flex:1;min-width:150px;font-size:15px;padding:13px 20px;}
#instruccionesNivel .inst-card{position:relative;max-width:560px;
  background:linear-gradient(160deg,#182642,#101a30);
  border:1px solid var(--borde);border-radius:18px;padding:26px;text-align:left;
  box-shadow:0 26px 70px rgba(0,0,0,.48);}
#instruccionesNivel h2{font-size:26px;margin-bottom:8px;color:var(--amarillo);
  display:flex;align-items:center;gap:12px;}
#instruccionesNivel p{color:#c6d5f0;line-height:1.5;margin-bottom:12px;}
#instruccionesNivel ul{list-style:none;color:#dbe6fb;line-height:1.6;margin-bottom:18px;}
/* El icono va posicionado, NO como celda flex: con `display:flex` en el <li>
   cada <b> se convertia en un item independiente y las negritas se apilaban en
   una columna propia ("Arrastra con el / botón derecho"). */
#instruccionesNivel li{position:relative;padding:5px 0 5px 30px;}
#instruccionesNivel li i{position:absolute;left:0;top:.5em;
  color:var(--amarillo);width:18px;text-align:center;}

/* -------- Pausa -------- */
#pausa{background:rgba(6,10,20,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;z-index:36;}
#pausa.visible{display:flex;}
#pausa h1{font-size:38px;color:var(--amarillo);margin-bottom:6px;
  display:flex;align-items:center;gap:14px;}
.pausa-prog{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:20px 0;}
.pausa-prog .stat{background:rgba(255,255,255,.08);border:1px solid var(--borde);border-radius:12px;
  padding:12px 22px;font-size:17px;display:flex;align-items:center;gap:10px;}
.pausa-prog .stat i{color:var(--amarillo);}
.pausa-prog .stat b{color:var(--exito);}

/* ==================================================================
   Juego con el dedo
   ================================================================== */

/* Acciones de juego, abajo a la derecha: es donde llega el pulgar sujetando el
   móvil. Las de sistema (rescate, vista, música, pausa) se quedan arriba, que se
   usan poco y así no estorban. */
#ctrlTactil{position:absolute;z-index:11;display:none;flex-direction:column;gap:10px;
  right:max(14px,env(safe-area-inset-right));
  bottom:calc(74px + env(safe-area-inset-bottom));}
body.tactil.jugando #ctrlTactil{display:flex;}
#ctrlTactil button{width:54px;height:54px;border-radius:16px;border:1px solid var(--borde);
  background:var(--panel);color:#fff;font-size:20px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:background .12s,color .12s,transform .1s;}
#ctrlTactil button:active{transform:scale(.94);}
/* Agacharse es un interruptor, no una tecla mantenida: tiene que verse encendido. */
#ctrlTactil button.activo{background:var(--amarillo);color:#14213e;border-color:transparent;}

/* -------- Tamaños mínimos para el dedo --------
   44 px es el mínimo con el que se acierta sin mirar. Las flechas de girar
   medían 32 y había que apuntar. */
body.tactil #brujula .giro{width:44px;height:44px;font-size:16px;}
body.tactil #brujula{gap:6px;padding:6px 8px;}
body.tactil #ctrlJuego button{width:48px;height:48px;font-size:18px;}
body.tactil #ctrlJuego{top:max(64px,calc(env(safe-area-inset-top) + 60px));
  right:max(14px,env(safe-area-inset-right));}

/* El resaltado al pasar por encima no existe sin ratón: sin esto los botones se
   quedan "pegados" con el color de hover después de tocarlos. */
@media (hover:none){
  #ctrlJuego button:hover{border-color:var(--borde);color:#fff;transform:none;}
  #brujula .giro:hover{background:rgba(255,255,255,.06);color:#cdd9ee;border-color:transparent;}
}

/* Sitio para el HUD sin pisar el notch ni la barra inferior. */
body.tactil #contador{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));
  font-size:19px;padding:8px 13px;}
body.tactil #cronometro{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));
  font-size:18px;padding:8px 13px;}
body.tactil #brujula{top:max(12px,env(safe-area-inset-top));}
/* Las tres alturas de abajo salen de medir el HUD en un movil de 851x393, no a
   ojo: la brujula mide 58 px con los botones de girar a tamaño de dedo, y la
   barra de ayuda 26 px en una linea. Con los valores de antes, el nombre del
   nivel se metia dentro de la brujula y el aviso de la lista encima de la ayuda. */
body.tactil #nivelActualHud{top:calc(max(12px,env(safe-area-inset-top)) + 62px);font-size:12px;}
body.tactil #ayudaControles{bottom:max(8px,env(safe-area-inset-bottom));font-size:11px;gap:12px;
  flex-wrap:nowrap;}
body.tactil #ayudaTab{bottom:calc(46px + env(safe-area-inset-bottom));font-size:12px;padding:6px 12px;}
body.tactil #toast{bottom:calc(84px + env(safe-area-inset-bottom));font-size:15px;padding:9px 20px;
  max-width:calc(100% - 130px);}

/* -------- Gira el móvil --------
   El diorama es ancho: en vertical se ve una franja tan estrecha que buscar deja
   de tener gracia. Se avisa en vez de rehacer el HUD para vertical. */
#avisoOrientacion{position:absolute;inset:0;z-index:45;display:none;
  align-items:center;justify-content:center;padding:30px;
  background:rgba(6,10,20,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#avisoOrientacion.visible{display:flex;}
.orient-caja{text-align:center;max-width:320px;}
.orient-caja i{font-size:56px;color:var(--amarillo);display:block;margin-bottom:18px;
  animation:girarMovil 2.4s ease-in-out infinite;}
.orient-caja h2{font-size:24px;margin-bottom:10px;}
.orient-caja p{color:#b9cae6;font-size:14px;line-height:1.5;}
@keyframes girarMovil{0%,40%{transform:rotate(0);}60%,100%{transform:rotate(90deg);}}
@media (prefers-reduced-motion:reduce){.orient-caja i{animation:none;}}

/* -------- Pantallas cortas --------
   Un móvil en horizontal tiene poca altura: la lista de objetos a memorizar se
   comía la pantalla entera. */
@media (max-height:520px){
  #panelLista{padding:16px 24px;max-height:88%;overflow-y:auto;}
  #panelLista h2{font-size:17px;margin-bottom:10px;}
  #panelLista li{font-size:14px;padding:4px 0;}
  #panelLista .li-ic{flex:0 0 22px;height:22px;font-size:11px;}
}