/* ============================================
   LA LLAVE DE SIETE PUERTAS
   Sistema de diseño compartido
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Spectral:ital,wght@0,300;0,400;1,300&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Paleta */
  --tinta:      #0B1026;
  --noche:      #141B3D;
  --noche-alta: #1E2750;
  --laton:      #D4A64B;
  --laton-hondo:#8A6A24;
  --opalo:      #EDE3D0;
  --rosa-humo:  #C97A8E;
  --vidrio:     #4A8C80;

  /* Tipografía */
  --display: 'Fraunces', Georgia, serif;
  --cuerpo:  'Spectral', Georgia, serif;
  --util:    'Space Mono', ui-monospace, monospace;

  /* Escala */
  --t-xl: clamp(2.6rem, 9vw, 6.5rem);
  --t-lg: clamp(1.9rem, 5.5vw, 3.4rem);
  --t-md: clamp(1.1rem, 2.4vw, 1.45rem);
  --t-sm: clamp(0.9rem, 1.7vw, 1.02rem);
  --t-xs: 0.72rem;

  --borde: 1px solid rgba(212, 166, 75, 0.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--tinta);
  color: var(--opalo);
  font-family: var(--cuerpo);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;

  /* --- iPhone --- */
  /* Sin flash azul al tocar */
  -webkit-tap-highlight-color: transparent;
  /* iOS no agranda el texto al girar el teléfono */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* El rebote de Safari no muestra fondo blanco */
  overscroll-behavior: none;
}

/* Nada de selección accidental al mantener el dedo,
   salvo en la carta y las notas, que sí se pueden copiar */
body { -webkit-user-select: none; user-select: none; }
.carta, .recuerdo__nota, .razon, p { -webkit-user-select: text; user-select: text; }

/* Controles: sin retardo de 300 ms ni zoom por doble toque */
button, a, .umbral, .puerta, .cajon__tapa, .mando button {
  touch-action: manipulation;
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}

/* Niebla ambiental de fondo — presente en todas las páginas */
.niebla {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 15%, rgba(74, 140, 128, 0.13), transparent 60%),
    radial-gradient(ellipse 60% 60% at 82% 78%, rgba(201, 122, 142, 0.11), transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(30, 39, 80, 0.55), transparent 70%);
}

/* Grano de película */
.grano {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 60;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 700ms steps(3) infinite;
}
@keyframes grano {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Tipografía ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.titulo    { font-size: var(--t-xl); }
.subtitulo { font-size: var(--t-lg); }

.italica { font-style: italic; font-variation-settings: 'SOFT' 90, 'WONK' 1; }
.laton   { color: var(--laton); }
.rosa    { color: var(--rosa-humo); }

p {
  font-size: var(--t-md);
  line-height: 1.72;
  max-width: 34ch;
}

.rotulo {
  font-family: var(--util);
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(237, 227, 208, 0.42);
}

/* ---------- Escena base ---------- */

.escena {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(clamp(1.5rem, 5vw, 4rem), env(safe-area-inset-top))
           max(clamp(1.5rem, 5vw, 4rem), env(safe-area-inset-right))
           /* espacio para el HUD + barra de gestos */
           calc(6rem + env(safe-area-inset-bottom))
           max(clamp(1.5rem, 5vw, 4rem), env(safe-area-inset-left));
  text-align: center;
}

canvas.lienzo {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
}

/* ---------- HUD de fragmentos de llave ---------- */

.hud {
  position: fixed;
  /* Por encima de la barra de gestos del iPhone */
  bottom: max(clamp(1rem, 3vw, 2rem), calc(env(safe-area-inset-bottom) + 0.7rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1.15rem;
  border: var(--borde);
  border-radius: 999px;
  background: rgba(11, 16, 38, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hud__rotulo {
  font-family: var(--util);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237, 227, 208, 0.38);
}

.hud__muescas { display: flex; gap: 0.4rem; }

.muesca {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(212, 166, 75, 0.38);
  transform: rotate(45deg);
  transition: background 500ms ease, box-shadow 500ms ease, border-color 500ms ease;
}

.muesca.llena {
  background: var(--laton);
  border-color: var(--laton);
  box-shadow: 0 0 14px rgba(212, 166, 75, 0.7);
}

/* ---------- Controles ---------- */

.umbral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2.5rem;
  padding: 0.9rem 1.9rem;
  /* Mínimo táctil recomendado por Apple */
  min-height: 44px;
  font-family: var(--util);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laton);
  background: transparent;
  border: 1px solid rgba(212, 166, 75, 0.4);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 400ms ease, color 400ms ease, border-color 400ms ease;
}

/* En pantalla táctil el :hover se queda pegado tras el toque */
@media (hover: hover) and (pointer: fine) {
  .umbral:hover {
    background: var(--laton);
    border-color: var(--laton);
    color: var(--tinta);
  }
  .umbral:hover .umbral__flecha { transform: translateX(5px); }
}

.umbral:focus-visible,
.umbral:active {
  background: var(--laton);
  border-color: var(--laton);
  color: var(--tinta);
}

.umbral[disabled] {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
}

.umbral__flecha { transition: transform 400ms ease; }

/* Accesibilidad: foco visible en todo */
:focus-visible {
  outline: 2px solid var(--laton);
  outline-offset: 4px;
}

/* ---------- Cortina de transición entre páginas ---------- */

/* Solo se usa al pasar de una puerta a la siguiente, nunca al cargar.
   Nace fuera de la pantalla: si JavaScript falla, no puede tapar nada. */
.cortina {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--tinta);
  pointer-events: none;
  transform: translateY(100%);
  will-change: transform;
}

/* ---------- Utilidades ---------- */

/* Invisible Y no clickeable: si no, tapa lo que hay debajo */
.oculto  { opacity: 0; pointer-events: none; }
.centro  { display: grid; place-items: center; }
.columna { display: flex; flex-direction: column; align-items: center; }

.pista {
  font-family: var(--util);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 227, 208, 0.3);
  margin-top: 1.6rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grano { display: none; }
}