/* THE MAP — posted near every exit, per code. not to scale. not helpful. */

:root {
  --mp-paper: #f0ece1;
  --mp-ink: #1a1a1a;
  --mp-red: #c81e1e;
  --mp-line: #8a8478;
}

body.map-page {
  background: var(--mp-paper);
  color: var(--mp-ink);
  min-height: 100vh;
  font-family: "Courier New", monospace;
  padding: 3rem 1.25rem 6rem;
}

.map-frame {
  max-width: 1000px;
  margin: 0 auto;
  border: 4px solid var(--mp-ink);
  background: #fff;
  padding: 2rem 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.map-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 3px solid var(--mp-ink);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.map-head h1 {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.map-head .stamp {
  border: 2px solid var(--mp-red);
  color: var(--mp-red);
  padding: 0.3rem 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  white-space: nowrap;
}
.map-head .not-to-scale {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
  text-align: right;
}

/* one wing = one horizontal scrolling strip, same mechanism as the
   Hallway room itself — the map inherits the building's own habit of
   making you scroll sideways to get anywhere */
.wing {
  margin-bottom: 2.5rem;
}
.wing .wing-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 0.6rem;
}
.wing-track {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  gap: 0;
}

.node {
  flex: 0 0 auto;
  border: 2px solid var(--mp-ink);
  background: var(--mp-paper);
  padding: 0.6rem 0.9rem;
  font-size: 0.7rem;
  text-align: center;
  min-width: 100px;
  position: relative;
  text-decoration: none;
  color: var(--mp-ink);
  transition: background 0.15s ease;
}
.node:hover {
  background: #fff9e0;
}
.node.here {
  border-color: var(--mp-red);
  border-width: 3px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.node.ghost {
  border-style: dashed;
  opacity: 0.7;
}

.connector {
  flex: 0 0 34px;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--mp-line) 0 6px, transparent 6px 10px);
  position: relative;
}
.connector::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--mp-line);
}

/* the star and caption live inside the box now, stacked in normal flow —
   the wing-track needs overflow-x: auto to scroll, and per spec that
   forces overflow-y to auto as well, so anything hanging outside a
   node's own box in that row gets silently clipped. keep it in-flow. */
.here .star {
  font-size: 0.9rem;
  color: var(--mp-red);
  line-height: 1;
}
.here .caption {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--mp-red);
  white-space: nowrap;
}

/* the vault: off on its own, unlabeled on purpose, same as the door */
.vault-branch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.vault-branch .connector {
  background: repeating-linear-gradient(to right, var(--mp-red) 0 5px, transparent 5px 9px);
}
.vault-branch .connector::after { border-left-color: var(--mp-red); }
.node.vault-node {
  border-color: var(--mp-red);
  color: var(--mp-red);
}

/* the callout — the one honest note on an otherwise deceptive document */
.callout {
  margin: 2rem 0;
  border: 2px dashed var(--mp-red);
  padding: 0.9rem 1.1rem;
  font-size: 0.75rem;
  color: var(--mp-red);
  max-width: 46ch;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-top: 2px solid var(--mp-ink);
  padding-top: 1.25rem;
  font-size: 0.65rem;
}
.legend .key {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.legend .swatch {
  width: 18px;
  height: 18px;
  border: 2px solid var(--mp-ink);
  flex: 0 0 auto;
}
.legend .swatch.here-swatch { border-color: var(--mp-red); border-width: 3px; }
.legend .swatch.vault-swatch { border: 2px dashed var(--mp-red); }

.map-foot {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--mp-line);
  font-size: 0.6rem;
  opacity: 0.68;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* a barcode nobody will ever scan */
.barcode {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
}
.barcode span {
  display: block;
  width: 2px;
  background: var(--mp-ink);
}
.barcode span:nth-child(3n) { height: 100%; }
.barcode span:nth-child(3n+1) { height: 60%; }
.barcode span:nth-child(3n+2) { height: 85%; }

.map-page .wayfinding a {
  color: var(--mp-ink);
  border-color: var(--mp-ink);
}