:root {
  --ink: #0a0707;
  --bone: #ece4d9;
  --bone-dim: #6f6862;
  --blood: #d20a1e;
}

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

html, body { height: 100%; }

body {
  background: radial-gradient(120% 90% at 50% 40%, #190c0b 0%, var(--ink) 60%);
  color: var(--bone);
  font-family: "Space Mono", ui-monospace, monospace;
  overflow: hidden;
}

/* --- grano y vignette ------------------------------------------------ */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 600ms steps(2) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); }
  50% { transform: translate(-3%, 2%); }
  100% { transform: translate(2%, -2%); }
}
.vignette {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  box-shadow: inset 0 0 240px 70px #000;
}

/* --- la puerta ------------------------------------------------------- */
.gate {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 56px; padding: 32px;
}

.sigil {
  width: clamp(120px, 32vw, 168px);
  filter: drop-shadow(0 0 38px rgba(210, 10, 30, 0.45));
  animation: breathe 5.5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.92; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-3px) scale(1.012); }
}

/* campo de código */
.code {
  position: relative;
  width: min(280px, 70vw);
  display: flex; flex-direction: column; align-items: center;
}
.code__input {
  width: 100%;
  background: transparent; border: none; outline: none;
  color: var(--bone); text-align: center;
  font-family: inherit; font-size: 0.95rem;
  letter-spacing: 0.5em; text-indent: 0.5em; text-transform: lowercase;
  padding: 10px 0;
  caret-color: var(--blood);
}
.code__input::placeholder { color: var(--bone-dim); letter-spacing: 0.5em; }
.code__line {
  display: block; width: 100%; height: 1px; background: #2a1d1b;
  position: relative; overflow: hidden;
}
.code__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--blood); transform: scaleX(0); transform-origin: center;
  transition: transform 0.5s ease;
}
.code:focus-within .code__line::after { transform: scaleX(1); }

/* respuesta a un código inválido (por ahora, todos) */
.code.denied { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}