:root {
  --bg: #0e0d0b;
  --fg: #ebe5d6;
  --dim: #9d978a;
  --faint: #2a2823;
  --acid: #c8ff3d;
  --font: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acid); }

/* "back to the lobby" link used on every exhibit page */
.lobby-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(14, 13, 11, 0.85);
  color: var(--dim);
  font-size: 15px;
  text-decoration: none;
}
.lobby-link:hover { color: var(--acid); }

/* walking between rooms (assets/rooms.js): pages fade up on arrival, and a veil
   drops before you leave, so a room change isn't a hard cut */
@media (prefers-reduced-motion: no-preference) {
  body { animation: cz-enter 0.4s ease-out; }
}
@keyframes cz-enter { from { opacity: 0; } }
.veil {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: end center;
  padding-bottom: 28px;
  background: #000;
  color: var(--dim);
  font: 14px var(--font);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
}
.veil.on { opacity: 1; pointer-events: auto; }

/* the rooms on either side: hover the edge of the screen and they slide in */
.edge {
  position: fixed;
  top: 50%;
  z-index: 999;
  padding: 10px 14px;
  border: 1px solid var(--faint);
  background: rgba(14, 13, 11, 0.92);
  color: var(--dim);
  font: 14px var(--font);
  text-decoration: none;
  white-space: nowrap;
  pointer-events: none;
  transition: transform 0.25s, color 0.2s;
}
.edge.left { left: 0; border-left: 0; border-radius: 0 8px 8px 0; transform: translate(-110%, -50%); }
.edge.right { right: 0; border-right: 0; border-radius: 8px 0 0 8px; transform: translate(110%, -50%); }
.edge.show { transform: translate(0, -50%); pointer-events: auto; }
.edge:hover { color: var(--acid); }

/* "rooms" menu next to the lobby link (built by assets/rooms.js) */
.rooms-btn {
  position: fixed;
  top: 12px;
  left: 100px;
  z-index: 1000;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 13, 11, 0.85);
  color: var(--dim);
  font: 15px var(--font);
  cursor: pointer;
}
.rooms-btn:hover, .rooms-btn.on { color: var(--acid); }
.rooms-panel {
  position: fixed;
  top: 48px;
  left: 12px;
  z-index: 1001;
  width: min(620px, calc(100vw - 24px));
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--faint);
  border-radius: 12px;
  background: rgba(14, 13, 11, 0.97);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  color: var(--fg);
  font: 14px/1.45 var(--font);
  text-align: left;
}
.rooms-panel[hidden] { display: none; }
.rooms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 18px; }
.rooms-item {
  display: block;
  padding: 5px 4px;
  border-radius: 4px;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.rooms-item:hover, a.rooms-item:focus-visible { background: #1d1c19; color: var(--acid); outline: none; }
.rooms-item.here { color: var(--acid); }
.rooms-item.defunct { color: #57534a; cursor: not-allowed; }
/* a small mark in front of rooms you've already been in. every row keeps the space for it,
   so the numbers line up either way. */
.rooms-num::before, .exhibits .num::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  opacity: 0.7;
  vertical-align: middle;
}
.rooms-item.seen .rooms-num::before, .exhibits .seen .num::before { background: var(--acid); }
.rooms-keys { flex-basis: 100%; margin-top: 4px; color: #6a655a; font-size: 12px; }
.rooms-item.defunct .rooms-name { text-decoration: line-through; }
.rooms-num { color: var(--dim); }
.rooms-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--faint);
}
.rooms-foot a { color: var(--dim); text-decoration: none; }
.rooms-foot a:hover { color: var(--acid); }
@media (max-width: 520px) {
  .rooms-grid { grid-template-columns: 1fr; }
}