/* ---------------------------------------------------------------
   Venue map section for the draft passport.
   Loads after landing/styles-night.css and borrows its tokens, so the
   plan sits in the same midnight-navy and ice-blue world as the card
   the six mission placeholders used to fill.
   --------------------------------------------------------------- */

.venue-page {
  --page-width: 30rem;
}

@media (min-width: 56rem) {
  .venue-page {
    --page-width: 44rem;
  }
}

/* ---------- Card that held the six mission tiles ---------- */

.venue {
  position: relative;
  display: grid;
  gap: 0.85rem;
  margin-top: 0.55rem;
  padding: 1.5rem 0.95rem 1.05rem;
  border: 1.5px solid rgba(166, 204, 250, 0.42);
  border-radius: 1.5rem;
  background:
    radial-gradient(112% 58% at 50% -10%, rgba(86, 143, 210, 0.24) 0%, rgba(8, 18, 34, 0) 62%),
    linear-gradient(180deg, #0c1c33 0%, #091426 56%, #060d1a 100%);
  box-shadow:
    0 1.8rem 3.6rem rgba(0, 2, 6, 0.72),
    0 0.5rem 1.2rem rgba(0, 2, 6, 0.5),
    0 0 0 1px rgba(126, 180, 240, 0.12),
    0 0 2.6rem rgba(52, 118, 190, 0.18),
    inset 0 1px 0 rgba(190, 222, 255, 0.14);
}

.venue__title {
  margin: 0;
  color: #eef5ff;
  font-family: var(--display);
  font-size: clamp(1.5rem, 7vw, 2.05rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-align: center;
  text-wrap: balance;
}

.venue__title em {
  font-weight: 400;
}

.venue__lede {
  margin: 0.3rem auto 0;
  max-width: 26rem;
  color: var(--ice-dim);
  font-family: var(--body);
  font-size: clamp(0.84rem, 3.5vw, 0.95rem);
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

/* The bar the mission grid used to sit under. */
.venue__head .progress {
  margin: 0.75rem 0 0.15rem;
}

/* ---------- Plan ---------- */

.map-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(150, 196, 246, 0.30);
  border-radius: 1.1rem;
  background:
    radial-gradient(120% 115% at 46% 0%, rgba(19, 34, 58, 0.85), rgba(5, 9, 16, 0.94) 64%),
    #04070d;
  box-shadow:
    0 1rem 2rem rgba(0, 3, 8, 0.55),
    inset 0 0 5rem rgba(4, 9, 18, 0.9);
  overflow: hidden;
  isolation: isolate;
}

.map-frame {
  position: relative;
  display: block;
  aspect-ratio: 778 / 592;
  min-height: 0;
}

#map {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

.map-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.55rem 0.45rem 0.85rem;
  border-bottom: 1px solid rgba(150, 196, 246, 0.1);
  background: linear-gradient(180deg, rgba(13, 27, 46, 0.85), rgba(8, 16, 28, 0.35));
}

.map-meta {
  margin: 0;
  color: rgba(124, 150, 184, 0.75);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-tools {
  display: flex;
  flex: none;
  gap: 0.28rem;
  padding: 0.24rem;
  border: 1px solid rgba(150, 196, 246, 0.2);
  border-radius: 0.7rem;
  background: rgba(8, 16, 28, 0.6);
}

.tool {
  appearance: none;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--ice-dim);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

.tool--wide {
  width: auto;
  padding: 0 0.7rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tool:hover {
  background: rgba(159, 220, 255, 0.12);
  color: var(--ice);
}

.tool[aria-pressed="true"] {
  border-color: rgba(159, 220, 255, 0.45);
  background: rgba(159, 220, 255, 0.16);
  color: var(--cyan);
}

.tool:focus-visible {
  outline: 2px solid #bfe4ff;
  outline-offset: 2px;
}

.map-hint {
  position: absolute;
  bottom: 0.55rem;
  left: 0.85rem;
  z-index: 4;
  margin: 0;
  pointer-events: none;
  color: rgba(147, 174, 210, 0.85);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.noscript {
  margin: 0;
  padding: 0 0.9rem 0.9rem;
  color: var(--ice-dim);
  font-size: 0.8rem;
}

/* ---------- The drawing ---------- */

.room-shape {
  fill: rgba(9, 20, 36, 0.92);
  stroke: rgba(176, 206, 242, 0.46);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition:
    fill 200ms ease,
    stroke 200ms ease,
    stroke-width 200ms ease,
    filter 200ms ease,
    opacity 200ms ease;
}

.room {
  cursor: pointer;
  outline: none;
}

.room--bright .room-shape {
  stroke: rgba(232, 244, 255, 0.72);
}

/* Ticked off in the popup. */
.room--done .room-shape {
  fill: rgba(16, 58, 74, 0.9);
  stroke: rgba(140, 226, 232, 0.5);
}

.room--done .room-label {
  fill: rgba(190, 240, 244, 0.78);
}

/* The next space to visit: the only one that shimmers. */
.room--next .room-shape {
  fill: rgba(22, 62, 98, 0.78);
  stroke: #e8f6ff;
  stroke-width: 2;
  animation: room-next 2.6s ease-in-out infinite;
}

.room--next .room-label {
  fill: #ffffff;
}

@keyframes room-next {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(159, 220, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(159, 220, 255, 0.95));
  }
}

.room:hover .room-shape,
.room:focus-visible .room-shape {
  fill: rgba(30, 74, 118, 0.82);
  stroke: #bfe4ff;
  stroke-width: 1.9;
  filter: drop-shadow(0 0 12px rgba(120, 190, 250, 0.5));
}

.room.is-active .room-shape {
  fill: rgba(40, 96, 148, 0.88);
  stroke: #eaf6ff;
  stroke-width: 2.1;
  filter: drop-shadow(0 0 16px rgba(150, 214, 255, 0.55));
}

#map.has-selection .room:not(.is-active) .room-shape {
  opacity: 0.4;
}

.room-label {
  fill: var(--ice-2);
  font-family: var(--body);
  font-weight: 500;
  letter-spacing: 0.06em;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(5, 10, 18, 0.92);
  stroke-width: 4.5px;
  stroke-linejoin: round;
  transition:
    fill 200ms ease,
    opacity 200ms ease;
}

.room-label.is-active {
  fill: #ffffff;
}

#map.has-selection .room-label:not(.is-active) {
  opacity: 0.45;
}

.room-caption {
  fill: rgba(180, 204, 232, 0.82);
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  pointer-events: none;
  transition: fill 200ms ease;
}

.room-caption.is-active {
  fill: var(--cyan);
}

/* Route — always drawn */

.route-line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.8;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  opacity: 0.92;
  animation: route-flow 4.6s linear infinite;
}

.route-glow {
  fill: none;
  stroke: rgba(111, 192, 242, 0.55);
  stroke-width: 5.5;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  opacity: 0.18;
  filter: blur(2px);
  animation: route-flow 4.6s linear infinite;
}

@keyframes route-flow {
  to {
    stroke-dashoffset: -48;
  }
}

.route-arrow path {
  fill: none;
  stroke: #cdefff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Entrance and exit */

.mark-pill {
  fill: rgba(31, 108, 166, 0.94);
  stroke: rgba(176, 224, 255, 0.85);
  stroke-width: 1;
  filter: drop-shadow(0 0 12px rgba(120, 190, 250, 0.5));
}

.mark-text {
  fill: #f2fbff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mark-chevron {
  fill: none;
  stroke: #cdefff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(120, 190, 250, 0.8));
}

/* ---------- Pinned space, under the plan ---------- */

.space-readout {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.62rem 0.9rem 0.7rem;
  border-top: 1px solid rgba(150, 196, 246, 0.16);
  background: linear-gradient(180deg, rgba(9, 20, 36, 0.35), rgba(5, 11, 20, 0.72));
}

.space-readout__id {
  min-width: 2.1ch;
  color: var(--cyan);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 1.6rem rgba(120, 190, 250, 0.45);
}

.space-readout__text {
  min-width: 0;
}

.space-readout h3 {
  margin: 0;
  color: #eef5ff;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.space-readout p {
  margin: 0.14rem 0 0;
  color: var(--ice-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

/* ---------- Room popup ---------- */

.room-popup {
  width: min(21.5rem, calc(100vw - 1.4rem));
  max-height: min(36rem, 86svh);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1.5px solid rgba(166, 204, 250, 0.45);
  border-radius: 1.25rem;
  background:
    radial-gradient(120% 62% at 50% 0%, rgba(86, 143, 210, 0.26), rgba(8, 18, 34, 0) 64%),
    linear-gradient(180deg, #0c1c33 0%, #091426 58%, #060d1a 100%);
  color: var(--ice);
  box-shadow:
    0 2rem 4rem rgba(0, 2, 6, 0.8),
    0 0 0 1px rgba(126, 180, 240, 0.12),
    inset 0 1px 0 rgba(190, 222, 255, 0.14);
}

.room-popup::backdrop {
  background: rgba(2, 5, 11, 0.66);
  backdrop-filter: blur(3px);
}

.room-popup__form {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: 1.15rem 1rem 1rem;
}

.room-popup__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ice-dim);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.room-popup__close:hover {
  background: rgba(159, 220, 255, 0.12);
  color: var(--ice);
}

.room-popup__close:focus-visible {
  outline: 2px solid #bfe4ff;
  outline-offset: 2px;
}

.room-popup__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-right: 1.8rem;
}

.room-popup__id {
  min-width: 2.2ch;
  color: var(--cyan);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 1.4rem rgba(120, 190, 250, 0.45);
}

.room-popup__names {
  min-width: 0;
}

.room-popup__names h3 {
  margin: 0;
  color: #eef5ff;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.room-popup__names p {
  margin: 0.2rem 0 0;
  color: var(--ice-muted);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.room-popup__text {
  margin: 0;
  color: var(--ice-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.room-popup__mission {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem 0.75rem;
  border: 1px solid rgba(159, 220, 255, 0.32);
  border-radius: 0.8rem;
  background: linear-gradient(160deg, rgba(63, 183, 255, 0.14), rgba(9, 20, 36, 0.4) 60%);
}

.room-popup__mission[hidden] {
  display: none;
}

.room-popup__mission-label {
  margin: 0;
  color: var(--cyan);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.room-popup__mission-title {
  margin: 0;
  color: #eef5ff;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
}

.room-popup__mission-task {
  margin: 0;
  color: var(--ice-dim);
  font-size: 0.78rem;
  line-height: 1.45;
}

.room-popup__action {
  justify-self: start;
  margin-top: 0.25rem;
  padding: 0.5rem 0.85rem;
  border: 1.5px solid #42729f;
  border-radius: 0.6rem;
  background: linear-gradient(180deg, #0d1d31 0%, #050c16 100%);
  color: #cfe7ff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.room-popup__action:hover:not(:disabled) {
  border-color: #7cc4f5;
  color: #f2fbff;
  box-shadow: 0 0 0.9rem rgba(80, 160, 220, 0.35);
}

.room-popup__action:disabled {
  border-color: rgba(159, 220, 255, 0.55);
  background: rgba(159, 220, 255, 0.14);
  color: var(--cyan);
  cursor: default;
}

.room-popup__action:focus-visible {
  outline: 2px solid #bfe4ff;
  outline-offset: 2px;
}

.room-popup__tick {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.35rem;
  color: var(--ice-2);
  font-size: 0.84rem;
  cursor: pointer;
}

.room-popup__tick input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 1.5px solid rgba(166, 204, 250, 0.55);
  border-radius: 0.32rem;
  background: rgba(8, 16, 28, 0.85);
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}

.room-popup__tick input::before {
  content: "";
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid #041018;
  border-bottom: 2px solid #041018;
  transform: rotate(-45deg) translate(0.02rem, -0.04rem);
  opacity: 0;
}

.room-popup__tick input:checked {
  border-color: var(--cyan);
  background: var(--cyan);
}

.room-popup__tick input:checked::before {
  opacity: 1;
}

.room-popup__tick input:focus-visible {
  outline: 2px solid #bfe4ff;
  outline-offset: 2px;
}

.room-popup__status {
  min-height: 1.1rem;
  margin: 0;
  color: var(--cyan-mid);
  font-size: 0.72rem;
  line-height: 1.4;
}

/* ---------- Phones: bigger numbers on the plan ---------- */

@media (max-width: 40rem) {
  .map-meta {
    display: none;
  }

  .map-bar {
    justify-content: flex-end;
  }

  .room-label {
    font-size: 20px;
  }

  .room-caption {
    font-size: 11px;
  }
}

@media (max-width: 30rem) {
  .room-label {
    font-size: 24px;
  }

  .map-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-line,
  .route-glow,
  .room--next .room-shape {
    animation: none;
  }

  .room--next .room-shape {
    filter: drop-shadow(0 0 10px rgba(159, 220, 255, 0.7));
  }

  .room-shape,
  .room-label,
  .tool,
  .room-popup__action {
    transition: none;
  }
}