:root {
  --bg: #000; --fg: #d8d8d8; --dim: #7a7a7a; --link: #4fd16b; --border: #555;
  --room: #fff; --lair: #ff5a5a; --shop: #ffd23f; --npc: #e07bff; --cmd: #4fd1d1;
  --vert: #9fb7ff; --line: #4d4d4d; --req: #ff9f3f; --jump: #4fd1d1; --away: #4fd16b;
  --hl: #2a4d8f;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 16px; background: var(--bg); color: var(--fg);
  font: 14px/1.45 Tahoma, Verdana, system-ui, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { color: #ff4040; font-size: 20px; margin: 4px 0; font-weight: normal; }
h2 { font-size: 14px; color: #ff9f3f; border-bottom: 1px solid var(--border); padding-bottom: 2px; margin: 20px 0 6px; }
.dim { color: var(--dim); }
.near { font-size: 12px; max-width: 120ch; }
code { color: #fff; background: #1a1a1a; padding: 0 3px; border-radius: 2px; font-size: 12px; }
table { border-collapse: collapse; font-size: 12px; }
td, th { padding: 2px 8px 2px 0; vertical-align: top; text-align: left; }
th { color: var(--dim); font-weight: normal; }
td.num { text-align: right; }
td.sym { font-family: ui-monospace, Consolas, "DejaVu Sans Mono", monospace; font-weight: bold; text-align: center; }
.maps { overflow-x: auto; }
.prow { display: flex; gap: 1ch; align-items: flex-start; width: max-content; }
pre.panel { font: 14px/1.15 ui-monospace, Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  margin: 0 0 4px; color: var(--line); }
pre.panel a, pre.panel span { color: inherit; }
pre.panel a:hover { text-decoration: none; background: var(--hl); }
.border { color: var(--border); }
.frame { color: #ff4040; }
.line { color: var(--line); }
.room { color: var(--room) !important; font-weight: bold; }
.room.vert { color: var(--vert) !important; }
.room.shop { color: var(--shop) !important; }
.room.npc { color: var(--npc) !important; }
.room.cmd { color: var(--cmd) !important; }
.room.lair:not(.shop):not(.npc):not(.cmd) { color: var(--lair) !important; }
.room.shop.lair, .room.npc.lair, .room.cmd.lair { text-decoration: underline var(--lair) 2px; }
.req { color: var(--req) !important; font-weight: bold; }
.jump { color: var(--jump) !important; font-weight: bold; }
.away { color: var(--away) !important; font-weight: bold; }
.reqd { text-decoration: underline; }
.key td:first-child { font-family: ui-monospace, Consolas, monospace; font-weight: bold; white-space: pre; }
.room:target, .room.hl { background: var(--hl); outline: 1px solid #fff; animation: blink 1s 3; }
@keyframes blink { 50% { background: #ff0; color: #000 !important; } }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; gap: 16px; align-items: center;
  margin: -16px -16px 12px; padding: 8px 16px; background: #000e; border-bottom: 1px solid var(--border);
  backdrop-filter: blur(4px); }
.topbar .home { color: #ff4040; white-space: nowrap; }
.search { position: relative; flex: 1; max-width: 640px; }
#find { width: 100%; padding: 6px 8px; background: #111; color: var(--fg); border: 1px solid var(--border); font: inherit; }
#find:focus { outline: none; border-color: var(--link); }
#hits { position: absolute; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none;
  max-height: 60vh; overflow: auto; background: #0d0d0d; border: 1px solid var(--border); font-size: 12px;
  box-shadow: 0 4px 24px #000c; }
#hits li { padding: 2px 10px; }
#hits li.on { background: var(--hl); }
[id] { scroll-margin-top: 60px; }
#info { position: fixed; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow: auto;
  background: #0d0d0d; border: 1px solid var(--border); padding: 10px 12px; font-size: 12px; box-shadow: 0 4px 24px #000c; }
#info h3 { margin: 0 0 4px; font-size: 14px; color: #fff; }
#info .x { float: right; cursor: pointer; color: var(--dim); }
main { display: block; }
#info .lair { color: var(--lair); }
#info .mob { border-bottom: 1px dotted var(--dim); cursor: help; }