/* SHARED DOOR NAVIGATION — every room's wayfinding bar used to be a row
   of plain pill links ("Map · Entry Hall · Next Room →"). Doors turn the
   same three links into actual doors, each themed to match the room
   they're standing in — the maze is supposed to feel like a maze, not a
   breadcrumb trail. One shared component (structure + CSS custom
   properties), themed per room by adding a class, same way one shared
   flicker/toggle mechanic gets reused with a new coat of paint from room
   to room throughout the rest of the site.

   Loaded on every page, right after reset.css. */

/* NOT a footer, and not a shrunken corner icon either — both were tried
   and both read as UI floating disconnected from the room. This is
   sized like actual furniture (full-size doors, same as the Entry
   Hall's own row) and placed in normal document flow standing directly
   on a room's floor, the same way the doors/rack/loungers/cabinets in
   every bespoke room already stand on theirs. It is NOT a self-
   contained component you can drop anywhere: whatever room includes it
   is responsible for putting it right above that room's own floor/
   baseboard element so its base actually meets a surface, the same
   way every other piece of furniture in this building does. */
.room-signage {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2.5rem;
  flex-wrap: wrap;
  width: fit-content;
  max-width: min(94vw, 640px);
  margin: 2.5rem auto 0;
}

/* ---- the door itself ---- */

.nav-door {
  --door-bg: #6b6048;
  --door-bg2: #4a4230;
  --door-frame: #2e2818;
  --door-knob: #d8c078;
  --door-glow: transparent;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  cursor: pointer;
}

/* the wall this door is set into — every door gets one, whether it's
   standing in the fixed-position days' old spot or built into a room's
   own furniture. A door with nothing behind it reads as a sticker
   floating over the scene; a plastered, molded, baseboarded panel
   behind it reads as an actual doorway. Toned from the door's own
   --door-bg/--door-frame so a brass door gets a brass-dark wall and a
   neon one gets a neon-dark wall, instead of one flat gray everywhere. */
.nav-door::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -14px -18px -10px -18px;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--door-bg) 30%, #221f19 70%) 0%,
    color-mix(in oklch, var(--door-bg) 16%, #131110 84%) 100%
  );
  border: 1px solid color-mix(in oklch, var(--door-frame) 55%, #000 45%);
  border-radius: 6px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05), 0 8px 18px rgba(0, 0, 0, 0.35);
}
/* the baseboard — where the wall segment actually meets a floor */
.nav-door::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -18px;
  right: -18px;
  bottom: -10px;
  height: 7px;
  background: color-mix(in oklch, var(--door-frame) 65%, #000 35%);
  border-radius: 0 0 6px 6px;
}

.nav-door-shape {
  width: 42px;
  height: 66px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(160deg, var(--door-bg), var(--door-bg2));
  border: 2px solid var(--door-frame);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 3px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 0 18px 0 var(--door-glow);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  overflow: hidden;
}

/* a raised panel line, the way a real paneled door reads even at this
   size — two inset grooves rather than a flat rectangle */
.nav-door-shape::before {
  content: '';
  position: absolute;
  inset: 8px 6px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.nav-door-knob {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--door-knob);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%);
}

.nav-door-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: inherit;
  opacity: 0.75;
  max-width: 9ch;
  line-height: 1.25;
  transition: opacity 0.25s ease;
}

.nav-door:hover .nav-door-shape,
.nav-door:focus-visible .nav-door-shape {
  transform: translateY(-4px);
  filter: brightness(1.15);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 0 28px 2px var(--door-glow);
}
.nav-door:hover .nav-door-label,
.nav-door:focus-visible .nav-door-label { opacity: 1; }

.nav-door:focus-visible .nav-door-shape {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .nav-door-shape { width: 36px; height: 56px; }
  .nav-door-label { font-size: 0.55rem; }
}

/* ---- the map plaque — not a door, an actual map ---- */
/* Every building like this has one of these bolted up somewhere: a
   laminated "you are here" placard, not a doorway. It never themed
   itself to the room the way the doors do — it's the same printed
   document wherever you find it — so it gets one fixed paper/metal
   look everywhere instead of --door-* theme variables. */
.wall-map {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.wall-map-plate {
  position: relative;
  width: 46px;
  height: 60px;
  background: linear-gradient(160deg, #f2ecd8, #ddd3b4);
  border: 2px solid #7a6f52;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* the curled corner, same trick as the Back Office's wall calendar */
.wall-map-plate::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, transparent 50%, #c8bc94 50%);
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.2);
}
.wall-map-svg {
  position: absolute;
  inset: 0;
  padding: 5px;
}
.wall-map:hover .wall-map-plate,
.wall-map:focus-visible .wall-map-plate {
  transform: translateY(-4px);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.wall-map:hover .nav-door-label,
.wall-map:focus-visible .nav-door-label { opacity: 1; }
.wall-map:focus-visible .wall-map-plate {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .wall-map-plate { width: 40px; height: 52px; }
}

/* ---------------------------------------------------------------- */
/* THEMES — color/material only. Applied as a second class alongside
   .nav-door, e.g. class="nav-door theme-neon-cyan". Pick whichever reads
   closest to the room's own palette; a handful of rooms also add a
   shape modifier below for a door that shouldn't just be a rectangle. */

.nav-door.theme-fluorescent {
  --door-bg: #d8d2be; --door-bg2: #a8a290; --door-frame: #5a5442; --door-knob: #8a7a3a;
}
.nav-door.theme-brass {
  --door-bg: #7a6238; --door-bg2: #3a2e18; --door-frame: #1a140a; --door-knob: #e8c878;
  --door-glow: rgba(184, 147, 90, 0.4);
}
.nav-door.theme-chrome {
  --door-bg: #c8ccd2; --door-bg2: #6a6e76; --door-frame: #2a2c30; --door-knob: #2fe0ff;
  --door-glow: rgba(47, 224, 255, 0.25);
}
.nav-door.theme-wood {
  --door-bg: #8a6236; --door-bg2: #4a3218; --door-frame: #2a1e10; --door-knob: #d8b878;
}
.nav-door.theme-organic {
  --door-bg: #4a1f5c; --door-bg2: #1a0a2e; --door-frame: #ff2fd6; --door-knob: #ffe62f;
  --door-glow: rgba(255, 47, 214, 0.4);
}
.nav-door.theme-industrial {
  --door-bg: #9a9484; --door-bg2: #6b6458; --door-frame: #302c22; --door-knob: #3fff6a;
  --door-glow: rgba(63, 255, 106, 0.25);
}
.nav-door.theme-glass {
  --door-bg: #1a3a4a; --door-bg2: #0a1a24; --door-frame: #2fe0ff; --door-knob: #8ef4ff;
  --door-glow: rgba(47, 224, 255, 0.35);
}
.nav-door.theme-paper {
  --door-bg: #7a6b5a; --door-bg2: #4a3f34; --door-frame: #2a1f2e; --door-knob: #e8dcc0;
}
.nav-door.theme-neon-pink {
  --door-bg: #3a0a2e; --door-bg2: #14040e; --door-frame: #ff2fd6; --door-knob: #ffe62f;
  --door-glow: rgba(255, 47, 214, 0.5);
}
.nav-door.theme-neon-cyan {
  --door-bg: #0a2a3a; --door-bg2: #030e14; --door-frame: #2fe0ff; --door-knob: #ff2fd6;
  --door-glow: rgba(47, 224, 255, 0.5);
}
.nav-door.theme-neon-purple {
  --door-bg: #2a0a4a; --door-bg2: #0e0320; --door-frame: #b23cff; --door-knob: #2fe0ff;
  --door-glow: rgba(178, 60, 255, 0.5);
}
.nav-door.theme-neon-yellow {
  --door-bg: #3a3208; --door-bg2: #161202; --door-frame: #ffe62f; --door-knob: #ff2fd6;
  --door-glow: rgba(255, 230, 47, 0.4);
}
.nav-door.theme-pattern {
  --door-bg: #8a7a5c; --door-bg2: #5a4e3a; --door-frame: #2e2818; --door-knob: #e8dcc0;
}
.nav-door.theme-void {
  --door-bg: #221828; --door-bg2: #0a060e; --door-frame: #4a3a5a; --door-knob: #b23cff;
  --door-glow: rgba(178, 60, 255, 0.3);
}
.nav-door.theme-cyber {
  --door-bg: #0e0a1c; --door-bg2: #050308; --door-frame: #ff2fd6; --door-knob: #2fe0ff;
  --door-glow: rgba(47, 224, 255, 0.55);
  animation: door-cyber-flicker 6s steps(14) infinite;
}
@keyframes door-cyber-flicker {
  0%, 100% { filter: brightness(1); }
  4% { filter: brightness(0.7); }
  5% { filter: brightness(1.1); }
  6% { filter: brightness(1); }
  71% { filter: brightness(1); }
  72% { filter: brightness(0.6); }
  74% { filter: brightness(1); }
}

/* ---------------------------------------------------------------- */
/* SHAPES — silhouette modifiers for rooms where a plain rectangle
   undersells the room (a vault door, a sliding elevator door, a
   porthole). Combine with a theme class for color. */

/* an arched top, for rooms with a more ornate/ceremonial feel */
.nav-door.shape-arch .nav-door-shape {
  border-radius: 50% 50% 3px 3px / 34% 34% 3px 3px;
}

/* a heavy round hatch, riveted rim, small center wheel — the vault */
.nav-door.shape-vault .nav-door-shape {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border-width: 3px;
}
.nav-door.shape-vault .nav-door-shape::before {
  inset: 6px;
  border-radius: 50%;
}
.nav-door.shape-vault .nav-door-shape::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle, var(--door-frame) 1.4px, transparent 1.6px);
  background-size: 12px 12px;
  background-position: center;
  opacity: 0.5;
  pointer-events: none;
}
.nav-door.shape-vault .nav-door-knob {
  left: 50%;
  top: 50%;
  right: auto;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--door-frame), 0 0 4px 1px rgba(0, 0, 0, 0.5);
}

/* two panels with a visible center seam — the elevator */
.nav-door.shape-sliding .nav-door-shape {
  background: linear-gradient(90deg, var(--door-bg) 0 49.5%, var(--door-frame) 49.5% 50.5%, var(--door-bg2) 50.5% 100%);
}
.nav-door.shape-sliding .nav-door-shape::before { inset: 8px 5px; }
.nav-door.shape-sliding .nav-door-knob {
  right: auto;
  left: 45%;
  width: 3px;
  height: 10px;
  border-radius: 2px;
}
.nav-door.shape-sliding .nav-door-knob::after {
  content: '';
  position: absolute;
  left: 6px;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--door-knob);
}

/* a round porthole window instead of a door — the aquarium */
.nav-door.shape-round .nav-door-shape {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border-width: 4px;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 0 18px 0 var(--door-glow);
}
.nav-door.shape-round .nav-door-shape::before {
  inset: 6px;
  border-radius: 50%;
}
.nav-door.shape-round .nav-door-knob { display: none; }