:root {
  --ink: #07080a;
  --stone: #12141a;
  --iron: #23272e;
  --steel: #3a404b;
  --bone: #c9cdd4;
  --mute: #6b7280;
  --brass: #c89b4d;
  --denied: #c0463f;
  --light: #ffd9a0;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background:
    radial-gradient(ellipse 70% 50% at 50% 42%, #14171d 0%, transparent 70%),
    var(--ink);
  color: var(--bone);
  font-family: var(--serif);
  overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between;
  padding: 14px 20px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--mute);
}

.scene {
  position: relative; z-index: 1;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 20px 40px;
  gap: 22px;
}

/* ---------- Frame & room ---------- */
.frame {
  --w: min(300px, 70vw);
  position: relative;
  width: var(--w);
  aspect-ratio: 3 / 5;
  perspective: 1100px;
  border: 10px solid var(--iron);
  border-bottom-width: 12px;
  border-radius: 90px 90px 4px 4px / 70px 70px 4px 4px;
  background: #000;
  box-shadow:
    0 0 0 2px #0b0c10,
    0 0 60px 6px rgba(120, 140, 170, .10),
    inset 0 0 30px #000;
  transition: box-shadow 1.2s ease;
}

.room {
  position: absolute; inset: 0;
  border-radius: 80px 80px 0 0 / 60px 60px 0 0;
  overflow: hidden;
  background: #020203;
}
.beam {
  position: absolute; left: 50%; bottom: -10%;
  width: 140%; height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 45% 70% at 50% 85%, rgba(255,217,160,.95), rgba(200,155,77,.35) 45%, transparent 75%);
  opacity: 0; transition: opacity 1.6s ease .3s;
}

/* ---------- Door ---------- */
.door {
  position: absolute; inset: 0;
  padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(90deg, #191c22, #1f232a 40%, #181b20);
  border-radius: 74px 74px 0 0 / 54px 54px 0 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.9s cubic-bezier(.6, .05, .25, 1), box-shadow .4s;
  box-shadow: inset 0 0 0 1px #2c313a, inset 0 -40px 60px rgba(0,0,0,.45);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.door:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }

.plank { position: absolute; top: 0; bottom: 0; width: 25%; border-right: 1px solid #0c0d10; }
.p1 { left: 0; } .p2 { left: 25%; } .p3 { left: 50%; } .p4 { left: 75%; border-right: 0; }
.plank::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 9px);
}

.strap { position: absolute; left: 0; right: 0; height: 14px; background: linear-gradient(#2b3038, #1a1d22); border-block: 1px solid #0a0b0e; }
.s1 { top: 26%; } .s2 { top: 74%; }
.hinge { position: absolute; left: -2px; width: 26px; height: 30px; background: #2b3038; border-radius: 0 6px 6px 0; border: 1px solid #0a0b0e; }
.h1 { top: calc(26% - 8px); } .h2 { top: calc(74% - 8px); }

/* ---------- Lock ---------- */
.lock {
  position: absolute; right: 14%; top: 46%;
  width: 20%; max-width: 64px; color: var(--steel);
  transition: transform 1s ease, opacity .9s ease .5s;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.6));
}
.lock svg { width: 100%; height: auto; overflow: visible; }
.lock .body { fill: #2a2e36; stroke: #4a505c; stroke-width: 1.5; }
.lock .eye { fill: #0a0b0e; transition: fill .3s; }
.lock .slot { fill: #0a0b0e; }
.lock .shackle { transition: transform .8s cubic-bezier(.4,1.4,.5,1); transform-origin: 48px 38px; }

.lock.pulse .body { stroke: var(--denied); }
.lock.pulse .eye { fill: var(--denied); }
.lock.pulse { animation: lockflash .6s ease; }
@keyframes lockflash {
  0%, 100% { filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
  40% { filter: drop-shadow(0 0 14px rgba(192,70,63,.9)); }
}

/* ---------- Door idle + interaction ---------- */
@media (hover: hover) {
  .door:hover { box-shadow: inset 0 0 0 1px #3a404b, inset 0 -40px 60px rgba(0,0,0,.45), 0 0 30px rgba(200,155,77,.12); }
  .frame:has(.door:hover) { transform: translateY(-1px); }
  .door:hover:not(.opened) { animation: tremble .18s linear infinite; }
}
@keyframes tremble { 0%,100% { translate: 0 0; } 50% { translate: .6px 0; } }

.door.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* ---------- Opened state ---------- */
.frame.is-open { box-shadow: 0 0 0 2px #0b0c10, 0 0 90px 14px rgba(255,200,130,.22), inset 0 0 30px #000; }
.frame.is-open .beam { opacity: 1; }
.door.opened { transform: rotateY(-76deg); cursor: default; }
.lock.unlocked .shackle { transform: translateY(-9px) rotate(-38deg); }
.lock.unlocked .eye { fill: var(--brass); }
.lock.unlocked .body { stroke: var(--brass); }
.lock.gone { opacity: 0; transform: translateY(18px); }

/* ---------- Text ---------- */
.whisper {
  margin: 0; max-width: 28ch; text-align: center;
  font-style: italic; font-size: clamp(17px, 4.4vw, 21px); line-height: 1.5;
  color: #8d939e; min-height: 3em;
  opacity: 0; transition: opacity 1.4s ease;
}
.whisper.show { opacity: 1; }

.status {
  margin: 0; min-height: 1.4em;
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em;
  color: var(--denied); opacity: 0; transition: opacity .25s;
}
.status.on { opacity: 1; }
.status.granted { color: var(--brass); }

/* ---------- Flag panel ---------- */
.flag-panel {
  width: min(520px, 100%);
  border: 1px solid #3a2f1a;
  background: linear-gradient(#14110a, #0c0a06);
  border-radius: 6px;
  padding: 18px 18px 16px;
  box-shadow: 0 0 40px rgba(200,155,77,.12);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 1s ease, transform 1s ease;
}
.flag-panel.show { opacity: 1; transform: none; pointer-events: auto; }
.flag-panel h2 { margin: 0 0 10px; font: 500 13px/1 var(--mono); letter-spacing: .14em; color: var(--brass); }
.flag-row { display: flex; gap: 10px; align-items: stretch; }
.flag {
  flex: 1; min-width: 0; margin: 0;
  padding: 12px 14px; background: #060504; border: 1px solid #2b2414; border-radius: 4px;
  font-family: var(--mono); font-size: clamp(13px, 3.6vw, 17px); color: var(--light);
  overflow-wrap: anywhere; user-select: all;
}
.copy {
  font: 500 13px var(--mono); color: var(--ink); background: var(--brass);
  border: 0; border-radius: 4px; padding: 0 16px; cursor: pointer;
}
.copy:hover { filter: brightness(1.1); }
.copy:focus-visible { outline: 2px solid var(--light); outline-offset: 2px; }

/* ---------- 404 ---------- */
.plain { display: grid; place-items: center; }
.lost { display: grid; gap: 18px; justify-items: center; padding: 24px; }
.back { font-family: var(--mono); font-size: 13px; color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--steel); padding-bottom: 2px; }
.back:hover { color: var(--bone); }

@media (max-height: 640px) { .frame { --w: min(210px, 50vw); } .scene { gap: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .door, .beam, .lock, .lock .shackle, .whisper, .flag-panel { transition-duration: .01s !important; transition-delay: 0s !important; }
  .door.shake, .lock.pulse, .door:hover { animation: none !important; }
}