:root{--ink:#2b1d12;--parch:#f3e4c6;--parch2:#e7d2a8;--gold:#c8962a;--gold2:#ffd56b;--ok:#4a7a3a;--danger:#9c3321}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui;color:var(--ink);background:#2a2320;line-height:1.65}
a{color:#6b3f14;font-weight:bold;text-decoration:none}a:hover{color:var(--danger)}
.nav{position:fixed;top:0;left:0;width:100%;z-index:50;background:rgba(20,14,8,.9);padding:.7rem 1rem}
.nav ul{list-style:none;display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap}
.nav a{color:var(--parch)}.nav a:hover,.nav a[aria-current=page]{color:var(--gold2)}
.nav-spacer{height:58px}
@media (max-width:640px){
  .nav ul{gap:.6rem .9rem;font-size:.92em}
  .nav-spacer{height:96px}
}
.wrap{max-width:900px;margin:0 auto;padding:0 16px 60px}
.panel{background:linear-gradient(135deg,var(--parch),var(--parch2));border:3px solid #8b5e2a;
  border-radius:14px;padding:28px;margin:26px auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.panel h1{color:#6b3f14;margin:.1em 0 .3em}.panel h2{color:#6b3f14;margin:1em 0 .4em}
.tag{display:inline-block;background:var(--gold);color:#2b1d12;border-radius:20px;padding:3px 12px;font-size:.8em;font-weight:bold}
.btn{display:inline-block;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2b1d12;
  border:2px solid #6b3f14;border-radius:8px;padding:11px 22px;font-weight:bold;cursor:pointer;margin:6px 8px 0 0}
.btn.ghost{background:rgba(243,228,198,.85)}
.step{background:rgba(255,255,255,.5);border-left:5px solid var(--gold);padding:12px 16px;border-radius:6px;margin:12px 0}
.step h3{color:#6b3f14;margin-bottom:4px}
pre{background:#2b1d12;color:var(--gold2);padding:12px;border-radius:6px;overflow:auto;font-size:.82em;margin:10px 0}
code{background:#e7d2a8;padding:1px 6px;border-radius:4px}
.flag{font-family:monospace;background:#2b1d12;color:var(--gold2);padding:3px 8px;border-radius:5px}
.tool{display:inline-block;background:#2b1d12;color:var(--gold2);border-radius:6px;padding:2px 10px;font-size:.85em;font-weight:bold;margin:2px}
.hero-art{text-align:center;margin:16px 0}
.hero-art img{max-width:320px;width:100%;border-radius:10px;border:3px solid #8b5e2a;
  box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* full-bleed room scene at the top of a gate page */
.room-hero{position:relative;width:100%;height:82vh;min-height:420px;max-height:760px;
  overflow:hidden;background:#161a20}
.room-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%}
.room-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 20px 34px;
  text-align:center;color:var(--parch)}
.room-overlay .tag{margin-bottom:10px}
.room-overlay h1{color:var(--gold2);font-size:2em;margin:.1em 0 .3em;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}
.room-overlay p{max-width:640px;margin:0 auto;text-shadow:0 1px 6px rgba(0,0,0,.7)}
@media (max-width:640px){
  .room-hero{height:62vh}
  .room-overlay h1{font-size:1.5em}
}
/* room-hero with no background art yet - swap for an <img> later,
   same markup/overlay structure as a filled-in room */
.room-hero.placeholder{background:linear-gradient(160deg,#241c14,#161a20 60%,#1c130c)}
.room-hero.placeholder::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px)}
.room-hero .artnote{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.72em;color:#b89a6a;background:rgba(20,14,8,.6);padding:3px 10px;border-radius:10px;
  letter-spacing:.03em}

/* the computer / "scrying terminal": a clickable prop standing in a room
   scene that drops the player onto the real challenge machine.
   Position each instance with inline left/bottom (or top) percentages. */
.computer{position:absolute;z-index:3;cursor:pointer;width:9%;min-width:64px;max-width:130px;
  transform:translate(-50%,0);transition:filter .2s ease, transform .2s ease;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));text-align:center;text-decoration:none}
.computer .screen{width:100%;aspect-ratio:4/3;background:linear-gradient(180deg,#152218,#0a130a);
  border:3px solid #4a3418;border-radius:4px;box-shadow:inset 0 0 14px rgba(90,220,140,.55),0 0 0 2px #6b3f14;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.computer .screen::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(90,220,140,.08) 0px,rgba(90,220,140,.08) 1px,transparent 1px,transparent 3px)}
.computer .glyph{color:#7dffb0;font-size:1.3em;text-shadow:0 0 6px #5fffa0;z-index:1;animation:computer-blink 1.6s steps(2) infinite}
.computer .stand{width:34%;height:16%;background:#3a2a14;margin:0 auto;border-radius:0 0 3px 3px}
.computer .label{display:block;margin-top:6px;color:#f3e4c6;font-size:.72em;font-weight:bold;
  background:rgba(20,14,8,.7);border-radius:10px;padding:3px 9px;opacity:0;transition:opacity .2s ease;
  white-space:nowrap}
.computer:hover,.computer:focus-visible{transform:translate(-50%,0) scale(1.1)}
.computer:hover .screen,.computer:focus-visible .screen{
  box-shadow:inset 0 0 22px rgba(120,255,170,.9),0 0 18px rgba(120,255,170,.65),0 0 0 2px #ffd56b}
.computer:hover .label,.computer:focus-visible .label{opacity:1}
@keyframes computer-blink{50%{opacity:.3}}
.computer.disabled{cursor:not-allowed}
.computer.disabled .screen{box-shadow:inset 0 0 8px rgba(255,255,255,.12),0 0 0 2px #6b3f14;filter:grayscale(.7) opacity(.75)}
.computer.disabled .glyph{animation:none;color:#7a7a7a;text-shadow:none}

/* placeholder image slot */
.imgslot{border:2px dashed #b06b2a;background:repeating-linear-gradient(45deg,#efe0bd,#efe0bd 10px,#e7d2a8 10px,#e7d2a8 20px);
  border-radius:10px;min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;
  color:#7a5a30;font-style:italic;padding:16px;margin:12px 0}
.map svg{width:100%;height:auto;background:#fff;border-radius:6px;margin:10px 0}
.key{font-family:monospace;font-size:.8em;word-break:break-all;color:#5b2d0c}
.muted{color:#6b5a44;font-size:.9em}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:100}
.modal.open{display:block}
.mbox{background:linear-gradient(135deg,#f5e6d3,#e8d4b8);border:3px solid #8b4513;max-width:600px;margin:6% auto;border-radius:12px;padding:32px;position:relative;
  max-height:85vh;overflow:auto}
.close{position:absolute;top:10px;right:16px;font-size:28px;border:0;background:none;cursor:pointer;color:#8b4513;z-index:1}

/* diary prop: a clickable book standing in a room, opens the study modal */
.diary{position:absolute;z-index:3;cursor:pointer;width:7%;min-width:52px;max-width:100px;
  transform:translate(-50%,0);transition:filter .2s ease, transform .2s ease;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));text-align:center;text-decoration:none}
.diary{width:9%;max-width:140px}
.diary .book{display:block;width:100%}
.diary .book img{display:block;width:100%;pointer-events:none;user-select:none}
.diary .label{display:block;margin-top:6px;color:#f3e4c6;font-size:.72em;font-weight:bold;
  background:rgba(20,14,8,.7);border-radius:10px;padding:3px 9px;opacity:0;transition:opacity .2s ease;
  white-space:nowrap}
.diary:hover,.diary:focus-visible{transform:translate(-50%,0) scale(1.1)}
.diary:hover,.diary:focus-visible{filter:drop-shadow(0 0 14px rgba(255,210,90,.95)) drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.diary:hover .label,.diary:focus-visible .label{opacity:1}

/* mimic chest: a clickable decorative prop standing in a room, same
   footprint as the diary prop but with an idle reddish "breathing" glow
   instead of gold — it's a monster, not a book */
.mimic{position:absolute;z-index:3;cursor:pointer;width:9%;min-width:60px;max-width:150px;
  transform:translate(-50%,0);transition:filter .2s ease, transform .2s ease;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(200,40,40,.35));
  animation:mimic-breathe 3.2s ease-in-out infinite;text-decoration:none}
.mimic img{display:block;width:100%;pointer-events:none;user-select:none}
.mimic:hover,.mimic:focus-visible{
  animation-play-state:paused;
  transform:translate(-50%,0) scale(1.08);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(220,60,40,.75))}
@keyframes mimic-breathe{
  0%,100%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(200,40,40,.35))}
  50%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(200,40,40,.55))}
}

/* vault door cutout: a real feature of the room art itself (not a standing
   prop) made clickable — sized/positioned as a box over the door in the
   background image, glows on hover like the courtyard doors do. */
.vaultdoor{position:absolute;cursor:pointer;border-radius:50%;
  transition:filter .2s ease, transform .2s ease;
  filter:drop-shadow(0 0 10px rgba(255,210,90,.55)) drop-shadow(0 0 22px rgba(255,210,90,.3));
  animation:vaultdoor-pulse 2.4s ease-in-out infinite}
.vaultdoor:hover,.vaultdoor:focus-visible{
  animation:none;
  filter:drop-shadow(0 0 20px rgba(255,210,90,.95)) drop-shadow(0 0 40px rgba(255,210,90,.6));
  transform:scale(1.06)}
@keyframes vaultdoor-pulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(255,210,90,.55)) drop-shadow(0 0 22px rgba(255,210,90,.3))}
  50%{filter:drop-shadow(0 0 16px rgba(255,210,90,.8)) drop-shadow(0 0 30px rgba(255,210,90,.45))}
}

/* a real door image, laid into a doorway already painted in a room's art —
   no idle glow; it only lights up, in plain torchlight yellow, when shined
   upon (hovered/focused) */
.door-overlay{position:absolute;cursor:pointer;
  transition:filter .2s ease, transform .2s ease}
.door-overlay img{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.door-overlay:hover,.door-overlay:focus-visible{
  transform:scale(1.035);
  filter:drop-shadow(0 0 26px rgba(255,210,90,.95)) drop-shadow(0 0 50px rgba(255,210,90,.6))}

/* a photo crop taken straight from the room's own art and laid back
   exactly where it came from — same hover-only glow treatment */
.door-crop{position:absolute;cursor:pointer;
  transition:filter .2s ease, transform .2s ease}
.door-crop img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.door-crop:hover,.door-crop:focus-visible{
  transform:scale(1.035);
  filter:drop-shadow(0 0 26px rgba(255,210,90,.95)) drop-shadow(0 0 50px rgba(255,210,90,.6))
}

/* scroll prop: a sealed scroll standing/propped in a room, opens a
   single-page popup (metadata, notes, whatever the room needs) */
.scroll{position:absolute;z-index:3;cursor:pointer;width:6%;min-width:46px;max-width:90px;
  transform:translate(-50%,0);transition:filter .2s ease, transform .2s ease;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));text-align:center;text-decoration:none}
.scroll .icon{display:block;width:100%;aspect-ratio:1/1.3;border-radius:6px;
  background:linear-gradient(180deg,#f3e4c6,#d8bd86);border:2px solid #8b5e2a;
  display:flex;align-items:center;justify-content:center;font-size:1.6em;
  box-shadow:inset 0 0 10px rgba(107,63,20,.35)}
.scroll .label{display:block;margin-top:6px;color:#f3e4c6;font-size:.72em;font-weight:bold;
  background:rgba(20,14,8,.7);border-radius:10px;padding:3px 9px;opacity:0;transition:opacity .2s ease;
  white-space:nowrap}
.scroll:hover,.scroll:focus-visible{transform:translate(-50%,0) scale(1.1)}
.scroll:hover .icon,.scroll:focus-visible .icon{
  box-shadow:inset 0 0 10px rgba(107,63,20,.35),0 0 14px rgba(255,210,90,.85)}
.scroll:hover .label,.scroll:focus-visible .label{opacity:1}
.scroll-box{max-width:620px}
.scroll-content pre{white-space:pre-wrap;word-break:break-all;text-align:left}

/* in-page browser window for terminals */
.webwin{position:fixed;inset:5% 4%;z-index:101;display:flex;flex-direction:column;
  background:#141820;border:4px solid #6b3f14;border-radius:16px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.7)}
.webwin-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#1e140a;
  border-bottom:2px solid #6b3f14;flex:none}
.webwin-bar .dots{display:flex;gap:7px}
.webwin-bar .dots i{width:12px;height:12px;border-radius:50%;background:#7a4a12}
.webwin-bar .url{flex:1;min-width:0;background:#07110a;border:1px solid #2c5a2c;border-radius:8px;
  padding:7px 12px;color:#7dff9a;font:12px/1.2 Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.webwin-bar .newtab{color:#f3e4c6;font-size:.8em;font-weight:bold;text-decoration:none;white-space:nowrap;
  background:#2b1d12;border:1px solid #6b3f14;border-radius:8px;padding:8px 12px}
.webwin-bar .newtab:hover{color:#ffd56b}
.webwin-close{border:0;background:none;color:#f3e4c6;font-size:30px;line-height:1;cursor:pointer;padding:0 4px}
.webwin-close:hover{color:#ffd56b}
.webwin iframe{flex:1;width:100%;border:0;background:#141820}

/* round "login" button laid over a vault door's hub: glowing ring + blinking lock.
   colour comes from --glow (r,g,b); position/size are set per page. */
.vaultlock{--glow:255,225,130;aspect-ratio:1;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;font-size:clamp(.9em,1.6vw,1.6em);
  background:radial-gradient(circle,rgba(var(--glow),.28) 0%,rgba(var(--glow),.10) 65%,rgba(var(--glow),0) 100%);
  animation:lockpulse 2.4s ease-in-out infinite}
.vaultlock:hover,.vaultlock:focus-visible{animation:none;
  filter:drop-shadow(0 0 20px rgba(var(--glow),.95)) drop-shadow(0 0 40px rgba(var(--glow),.6))}
.vaultlock .lockicon{filter:drop-shadow(0 0 4px rgba(var(--glow),.9))}
@keyframes lockpulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(var(--glow),.55)) drop-shadow(0 0 22px rgba(var(--glow),.3))}
  50%{filter:drop-shadow(0 0 16px rgba(var(--glow),.8)) drop-shadow(0 0 30px rgba(var(--glow),.45))}
}
@keyframes lockblink{0%,100%{opacity:1}50%{opacity:.15}}

/* metadata scroll popup: parchment art with the sample XML written on it */
.scrollpop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);container-type:inline-size;aspect-ratio:1024/559;
  width:min(92vw,calc(88vh*1024/559));filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.scrollpop>img{position:absolute;inset:0;width:100%;height:100%;user-select:none;pointer-events:none}
.scrollpop-close{position:absolute;top:6%;right:5%;z-index:2;border:0;background:none;cursor:pointer;
  font-size:3.6cqw;line-height:1;color:#5a3210;text-shadow:0 0 4px rgba(255,235,190,.8)}
.scrollpop-text{position:absolute;left:15%;right:15%;top:11%;bottom:11%;overflow:hidden;color:#3a2410;
  font-family:'Caveat',cursive;font-size:2.4cqw;line-height:1.2}
.scrollpop-text h2{font-family:'Caveat',cursive;font-weight:700;font-size:3.6cqw;color:#5a3210;margin:0}
.scrollpop-text p{margin:0 0 .4em}
.scrollpop-text pre{font-family:monospace;font-size:1.3cqw;line-height:1.3;margin:0;padding:0;background:none;
  border:0;box-shadow:none;overflow:visible;white-space:pre-wrap;word-break:break-all;color:#3a2410}