/* ============================================================
   ESTILOS COMPARTIDOS DE PUZZLES — engine-escape
   Todo se dimensiona con unidades de contenedor (cqmin, cqw, cqh)
   dentro de .pz-escenario, así cada puzzle escala solo a
   cualquier teléfono, en vertical u horizontal.
   ============================================================ */
:root {
  --fondo: #0b0b0d; --panel: #17171b; --superficie: #222228; --acento: #c9b37e;
  --texto: #ece8df; --tenue: #8f8a80; --peligro: #c0392b; --exito: #4caf7a;
  --fuente-titulos: Georgia, serif; --fuente-texto: system-ui, sans-serif;
  --toque: 44px;
}

/* ---------- Capa del puzzle (pantalla completa) ---------- */
.pz-capa {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column;
  background: var(--fondo);
  color: var(--texto); font-family: var(--fuente-texto);
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  opacity: 0; transition: opacity .22s ease;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: contain;
}
.pz-capa.pz-visible { opacity: 1; }
.pz-cabecera { display: flex; align-items: center; gap: 8px; min-height: var(--toque); flex: 0 0 auto; }
.pz-titulo {
  flex: 1; min-width: 0; font-family: var(--fuente-titulos); color: var(--acento);
  font-size: clamp(15px, 2.6vmin + 6px, 24px); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pz-cerrar {
  width: var(--toque); height: var(--toque); flex: 0 0 auto; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acento) 60%, transparent); background: var(--panel);
  color: var(--acento); font-size: 20px; cursor: pointer;
}
.pz-instrucciones {
  margin: 2px 0 6px; flex: 0 0 auto; color: var(--tenue); text-align: center;
  font-size: clamp(12px, 1.6vmin + 6px, 16px); line-height: 1.3;
}
.pz-escenario {
  position: relative; flex: 1 1 auto; min-height: 0; container-type: size;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  touch-action: none;
}
.pz-pie { flex: 0 0 auto; min-height: 30px; display: flex; align-items: center; justify-content: center; }
.pz-estado { font-weight: 700; letter-spacing: .06em; text-align: center; font-size: clamp(13px, 1.6vmin + 7px, 18px); min-height: 1.3em; }
.pz-estado-exito { color: var(--exito); }
.pz-estado-error { color: var(--peligro); }
.pz-resuelto .pz-escenario { animation: pz-brillo 1s ease; }
.pz-error-carga { color: var(--peligro); padding: 20px; text-align: center; }

@keyframes pz-brillo { 0% { filter: none; } 30% { filter: drop-shadow(0 0 18px var(--exito)) brightness(1.25); } 100% { filter: none; } }
.pz-sacudir { animation: pz-sacudir .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes pz-sacudir { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }
@keyframes pz-pulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .pz-sacudir, .pz-resuelto .pz-escenario { animation: none; } }

/* ---------- Bloques de construcción ---------- */
.pz-centro { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqmin; }
.pz-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2cqmin; }
.pz-col { display: flex; flex-direction: column; align-items: center; gap: 2cqmin; }
.pz-panel {
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  border-radius: 2cqmin; padding: 3cqmin; box-shadow: 0 1.5cqmin 5cqmin rgba(0,0,0,.45);
}
.pz-btn {
  min-width: var(--toque); min-height: var(--toque); padding: 0 1.2em;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: 1px solid var(--acento); border-radius: 10px; background: var(--superficie); color: var(--acento);
  font: 700 clamp(14px, 3.4cqmin, 22px) var(--fuente-texto); letter-spacing: .05em; cursor: pointer;
  touch-action: manipulation; transition: transform .08s, background .15s, color .15s;
}
.pz-btn:active { transform: scale(.94); }
.pz-btn:disabled { opacity: .4; pointer-events: none; }
.pz-btn-primario { background: var(--acento); color: var(--fondo); }
.pz-btn-redondo { border-radius: 50%; padding: 0; width: max(var(--toque), 10cqmin); height: max(var(--toque), 10cqmin); }
.pz-pantalla {
  font-family: "Courier New", ui-monospace, monospace; background: #050806; color: #7dffb0;
  border: 2px solid #1d2a22; border-radius: 1.2cqmin; padding: 1.5cqmin 3cqmin;
  font-size: clamp(16px, 6cqmin, 44px); letter-spacing: .2em; text-align: center; min-width: 40cqmin;
  text-shadow: 0 0 8px rgba(125,255,176,.6);
}
.pz-entrada {
  min-height: var(--toque); width: min(80cqw, 520px); padding: .4em .7em; border-radius: 10px;
  border: 2px solid var(--acento); background: var(--fondo); color: var(--texto);
  font: 700 clamp(16px, 5cqmin, 30px) var(--fuente-texto); text-align: center; outline: none;
  -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.pz-cuadricula { display: grid; gap: 1.2cqmin; touch-action: none; }
.pz-celda {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  background: var(--superficie); border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  border-radius: 1.2cqmin; color: var(--texto); cursor: pointer; font-weight: 700;
  transition: background .15s, transform .08s, box-shadow .15s;
}
.pz-celda:active { transform: scale(.95); }
.pz-celda.pz-activa { background: var(--acento); color: var(--fondo); box-shadow: 0 0 2cqmin color-mix(in srgb, var(--acento) 60%, transparent); }
.pz-seleccionado { outline: 3px solid var(--acento); outline-offset: 2px; }
.pz-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  min-height: var(--toque); padding: .2em .8em; border-radius: 999px; background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent); color: var(--texto);
  font-size: clamp(13px, 3.2cqmin, 20px); cursor: pointer; touch-action: none;
}
.pz-etiqueta { color: var(--tenue); font-size: clamp(11px, 2.6cqmin, 16px); text-transform: uppercase; letter-spacing: .1em; }
.pz-grande { font-size: clamp(18px, 7cqmin, 56px); font-weight: 700; }
.pz-lienzo { display: block; touch-action: none; max-width: 100%; max-height: 100%; }
.pz-fantasma { position: fixed; z-index: 2000; pointer-events: none; opacity: .9; margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.6); transform-origin: center; }
.pz-arrastrando { opacity: .35; }
.pz-scroll { overflow: auto; touch-action: pan-y; max-height: 100%; width: 100%; }

/* Explicación de un acertijo (aparece tras fallar) */
.pz-pie { gap: 10px; flex-wrap: wrap; }
.pz-explica { min-height: 38px; font-size: 14px; border-style: dashed; }
.pz-explicacion {
  position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5;
  width: min(520px, calc(100% - 24px)); max-height: 60%; overflow-y: auto; padding: 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--acento); box-shadow: 0 12px 40px rgba(0,0,0,.6); text-align: center;
}
.pz-explicacion p { margin: 0 0 12px; line-height: 1.45; font-size: clamp(14px, 1.5vmin + 9px, 18px); white-space: pre-line; -webkit-user-select: text; user-select: text; }