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

:root {
  --ink: #14121f;
  --ink-raised: #1c1a2b;
  --panel-line: #322e46;
  --paper: #f3f0e8;
  --paper-dim: #b9b4ac;
  --amber: #e8a33d;
  --amber-dim: #a9762b;
  --teal: #5c9aa1;
  --danger: #c65b4e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top, #1b1830 0%, var(--ink) 55%),
    var(--ink);
  color: var(--paper);
  font-family: 'Space Mono', ui-monospace, monospace;
  line-height: 1.6;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.display {
  font-family: 'Fraunces', Georgia, serif;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

.eyebrow {
  color: var(--amber-dim);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}

h1.title {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 600;
  margin: 0 0 1.75rem;
  color: var(--paper);
}

.lede {
  color: var(--paper-dim);
  max-width: 62ch;
  font-size: 0.98rem;
}

.seal {
  border: 1px solid var(--panel-line);
  background: var(--ink-raised);
  border-radius: 3px;
  padding: 1.5rem 1.6rem;
  margin: 1.6rem 0;
}

.seal h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.7rem;
  color: var(--teal);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.seal h2 .n {
  font-family: 'Space Mono', monospace;
  color: var(--amber);
  font-size: 0.85rem;
}

.seal p { margin: 0.5rem 0; font-size: 0.95rem; }

.cipher {
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: var(--amber);
  background: rgba(0,0,0,0.25);
  padding: 0.6rem 0.9rem;
  border-radius: 3px;
  display: inline-block;
  margin: 0.4rem 0;
  overflow-x: auto;
  max-width: 100%;
}

.grid-table {
  border-collapse: collapse;
  margin: 0.7rem 0;
  font-size: 0.9rem;
}
.grid-table th, .grid-table td {
  border: 1px solid var(--panel-line);
  width: 2.1rem;
  height: 2.1rem;
  text-align: center;
  color: var(--paper-dim);
}
.grid-table th { color: var(--amber-dim); font-weight: 400; }

.coords {
  color: var(--teal);
  letter-spacing: 0.04em;
}

.cta-row {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--panel-line);
}

a.enter {
  display: inline-block;
  color: var(--ink);
  background: var(--amber);
  padding: 0.75rem 1.4rem;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}
a.enter:hover { background: #f0b654; }
a.enter:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.warning {
  color: var(--danger);
  font-size: 0.82rem;
  margin-top: 0.9rem;
}

/* --- password page --- */

.pin-panel {
  max-width: 420px;
  margin: 12vh auto 0;
  padding: 0 1.5rem;
  text-align: center;
}

.pin-panel h1 {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.pin-panel .sub {
  color: var(--paper-dim);
  font-size: 0.85rem;
  margin-bottom: 2.2rem;
}

#pin-input {
  width: 100%;
  background: var(--ink-raised);
  border: 1px solid var(--panel-line);
  color: var(--paper);
  font-family: 'Space Mono', monospace;
  font-size: 1.6rem;
  letter-spacing: 0.5em;
  text-align: center;
  padding: 0.9rem 0 0.9rem 0.5em;
  border-radius: 3px;
}

#submit-pin {
  margin-top: 1.2rem;
  width: 100%;
  background: var(--amber);
  color: var(--ink);
  border: none;
  font-weight: 700;
  font-family: 'Space Mono', monospace;
  padding: 0.85rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.95rem;
}
#submit-pin:disabled { opacity: 0.5; cursor: default; }

#status {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  min-height: 1.4em;
}
#status.ok { color: #7cb896; }
#status.bad { color: var(--danger); }

.shake { animation: shake 0.4s; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

#burn-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  color: var(--danger);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Space Mono', monospace;
  z-index: 10;
  text-align: center;
  padding: 1.5rem;
}
#burn-overlay pre {
  font-size: 0.8rem;
  color: #7a2f27;
  text-align: left;
  max-height: 40vh;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
#burn-overlay .final {
  font-size: 1.3rem;
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  .shake { animation: none; }
}

/* success sequence */
#success-overlay{position:fixed;inset:0;background:#0a0e0c;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:1.5rem;z-index:20;}
#success-overlay .glow{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(124,184,150,.35) 0%,rgba(10,14,12,0) 60%);animation:pulseglow 2.2s ease-in-out infinite;}
#success-overlay .content{position:relative;opacity:0;transform:scale(.85);animation:scalein .7s ease-out forwards;}
#success-overlay h1{font-family:'Fraunces',serif;font-size:clamp(2.2rem,7vw,3.4rem);color:#7cb896;margin:0 0 1rem;letter-spacing:.02em;}
#success-overlay p{color:var(--paper-dim);font-size:.95rem;max-width:46ch;}
@keyframes pulseglow{0%,100%{opacity:.5;}50%{opacity:1;}}
@keyframes scalein{to{opacity:1;transform:scale(1);}}

/* destroy collapse */
#burn-overlay{position:fixed;inset:0;background:#000;color:var(--danger);display:none;align-items:center;justify-content:center;flex-direction:column;font-family:'Space Mono',monospace;z-index:20;text-align:center;padding:1.5rem;overflow:hidden;}
#burn-overlay pre{font-size:.8rem;color:#e08a7c;text-align:left;max-height:50vh;overflow:hidden;margin-bottom:1.5rem;white-space:pre-wrap;word-break:break-word;}
#burn-overlay .final{font-size:1.3rem;color:var(--danger);letter-spacing:.05em;}
#burn-overlay .collapse-wrap{transition:transform 1.1s cubic-bezier(.6,0,.9,1), opacity 1.1s ease-in;position:relative;z-index:2;}
#burn-overlay .collapse-wrap.collapsing{transform:scale(0);opacity:0;}

#burn-overlay .scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0px,rgba(255,255,255,.04) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:1;}
#burn-overlay .noise-flash{position:absolute;inset:0;background:var(--danger);opacity:0;pointer-events:none;z-index:1;mix-blend-mode:screen;transition:opacity .08s linear;}
#burn-overlay.glitching .collapse-wrap{animation:glitchJitter .12s steps(2) infinite;}
#burn-overlay.glitching pre{text-shadow:2px 0 #ff3b3b,-2px 0 #3bd6ff;}
@keyframes glitchJitter{
  0%,100%{transform:translate(0,0);}
  25%{transform:translate(-3px,1px);}
  50%{transform:translate(3px,-2px);}
  75%{transform:translate(-2px,-1px);}
}
@media (prefers-reduced-motion:reduce){
  #burn-overlay.glitching .collapse-wrap{animation:none;}
}

/* permanent black gate, shown instantly if already destroyed */
#destroyed-gate{position:fixed;inset:0;background:#000;z-index:9999;}