/* ── Retro-futuristic / synthwave overlay theme ───────────────────────── */
:root {
  --neon-pink:  #ff2d95;
  --neon-cyan:  #06f7ff;
  --neon-violet:#b14bff;
  --ink:        #0a0420;
  --ink-2:      #150a33;
  --grid:       rgba(177, 75, 255, 0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: #eafcff;
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}

canvas { display: block; }

/* Overlay sits above the WebGL canvas until VR / preview starts */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* A centred flex child that grows TALLER than the viewport overflows equally
     top and bottom, and the overflow is unreachable — no scrolling can get to
     it. That made the Enter/Preview buttons unclickable on a short window once
     the visit-together fields expanded the panel. `safe center` centres while
     there is room and falls back to start-alignment when there isn't; the plain
     `center` above it is the fallback for anything that doesn't know `safe`. */
  justify-content: center;
  justify-content: safe center;
  overflow-y: auto;
  gap: 18px;
  padding: 24px;
  /* The fallback until the painting arrives (and if it never does): the same
     sunset, in four stops, so the page never opens on a flat colour. */
  background: linear-gradient(180deg, #1d1a4a 0%, #4b2d6e 18%, #b3456d 36%, #f0784a 50%, #3a2750 62%, #100f20 100%);
  z-index: 10;
  transition: opacity .5s ease;
}
#overlay.hidden { opacity: 0; pointer-events: none; }

/* THE CITY'S PICTURE: the view up Panacea Lake at sunset (SkylinePainting.js),
   the same painting that hangs behind the desk at Panacea Studios. It covers
   the window, anchored on the falls and the Main Street arch, and fades in once
   it is painted so the fallback gradient never flashes under it. */
#skyline {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 60%;
  z-index: -1; opacity: 0; transition: opacity .6s ease;
}
#skyline.ready { opacity: 1; }

/* The panel is the name and the ways in, and nothing else: a small dark card
   over the lake, so the picture does the talking. */
#panel {
  width: min(440px, 100%);
  background: rgba(16, 12, 34, 0.62);
  border: 1px solid rgba(255, 210, 122, 0.4);
  border-radius: 16px;
  padding: 26px 28px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  text-align: center;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  letter-spacing: 12px;
  font-weight: 900;
  color: #ffd27a;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 0 30px rgba(255,190,110,0.35);
}
.tagline {
  margin: 4px 0 22px; color: #f4ecd8; font-family: Georgia, serif; font-style: italic;
  font-size: 18px; letter-spacing: 2px; text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
#panel #actions { justify-content: center; }
#panel #mp { text-align: left; }

#dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 16px;
  border: 2px dashed rgba(6,247,255,0.5);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .1s;
  text-align: center;
}
#dropzone strong { font-size: 18px; color: var(--neon-cyan); letter-spacing: 2px; }
#dropzone span { font-size: 12px; color: #9fb8c8; }
#dropzone .hint { color: #6f7f96; }
#dropzone.drag { border-color: var(--neon-pink); background: rgba(255,45,149,0.08); transform: scale(1.01); }

#exhibitList {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}
#exhibitList li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(6,247,255,0.06);
  border: 1px solid rgba(6,247,255,0.15);
  font-size: 13px;
}
#exhibitList li .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink); flex: 0 0 auto; }
#exhibitList li .name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#exhibitList li .meta { color: #7c8aa0; font-size: 11px; }
#exhibitList li.loading .dot { background: var(--neon-violet); box-shadow: 0 0 10px var(--neon-violet); animation: pulse 1s infinite; }
#exhibitList li.error .dot { background: #ff5252; box-shadow: 0 0 10px #ff5252; }
#exhibitList li.warn .dot { background: #ffc24b; box-shadow: 0 0 10px #ffc24b; }
#exhibitList li.warn .meta { color: #ffc24b; }
@keyframes pulse { 50% { opacity: .3; } }

#actions { display: flex; gap: 12px; margin-top: 18px; }
button {
  flex: 1;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .08s, box-shadow .2s, opacity .2s;
}
#enterVR { background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet)); box-shadow: 0 0 24px rgba(255,45,149,0.5); }
#previewBtn { background: linear-gradient(90deg, #1b2a4a, #243a66); box-shadow: 0 0 18px rgba(6,247,255,0.25); }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; }

#status { margin: 14px 0 0; font-size: 12px; color: #8fa3b8; min-height: 16px; }

/* The audio report from the last visit (AudioReport.js), as ONE button: the
   recording goes on the clipboard to be sent on, and nothing of it is shown.
   The textarea is the execCommand fallback's source and is kept off screen.
   The button is a solid amber with dark lettering — the browser's default grey
   under this sheet's white button text made the word COPY unreadable. */
#audioReport { margin: 12px 0 0; }
#audioReport[hidden] { display: none; }
#audioReport .reportBtns { display: flex; gap: 8px; }
#audioReport .reportBtns button { flex: 1 1 0; min-width: 0; }
#audioReport button.perfReport { padding: 11px 16px; font-size: 13px; color: #06201c; background: linear-gradient(90deg, #7ee8d0, #5cc8e8); box-shadow: 0 0 16px rgba(110,220,220,0.32); }
#audioReport button.copyReport { padding: 11px 16px; font-size: 13px; color: #1a1206; background: linear-gradient(90deg, #ffd166, #ffb347); box-shadow: 0 0 16px rgba(255,190,90,0.35); }
#audioReport textarea.report { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
#audioReport .said { margin-top: 6px; font-size: 11px; color: #8fd3c7; min-height: 14px; text-align: center; }

/* Visit-together panel. Collapsed to one line until switched on, so the entry
   screen stays about entering. */
#mp { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(6,247,255,0.16); }
#mpToggleRow { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #cdeffd; cursor: pointer; }
#mpToggleRow input { width: 16px; height: 16px; accent-color: var(--neon-pink); cursor: pointer; }
#mpFields { display: none; gap: 8px; margin-top: 10px; }
#mp.on #mpFields { display: flex; flex-wrap: wrap; }
#mpFields input {
  flex: 1 1 128px;
  min-width: 0;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  color: #eaf6ff;
  background: rgba(8,14,28,0.85);
  border: 1px solid rgba(6,247,255,0.22);
  border-radius: 8px;
}
#mpFields input:focus { outline: none; border-color: var(--neon-pink); }
#mpFields input::placeholder { color: #6f7f96; }
#mpHint { display: none; margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: #8fa3b8; }
#mp.on #mpHint { display: block; }
#mpHint code { background: rgba(6,247,255,0.1); padding: 1px 5px; border-radius: 4px; color: #cdeffd; }

/* Live presence readout, shown in-world on the playbar during a session. */
#netPill {
  display: none; align-items: center; gap: 7px;
  padding: 7px 13px; font-size: 12px; letter-spacing: 1px;
  color: #cdeffd; background: rgba(8,14,28,0.8);
  border: 1px solid rgba(6,247,255,0.28); border-radius: 999px;
}
#netPill.show { display: inline-flex; }
#netPill .dot { width: 8px; height: 8px; border-radius: 50%; background: #6f7f96; }
#netPill.live .dot { background: #3ee08a; box-shadow: 0 0 10px #3ee08a; }
#netPill.connecting .dot, #netPill.retrying .dot { background: #ffc24b; box-shadow: 0 0 10px #ffc24b; animation: pulse 1.1s infinite; }

#help { margin-top: 14px; font-size: 13px; color: #a9b6c8; }
#help summary { cursor: pointer; color: var(--neon-cyan); letter-spacing: 1px; }
#help ol { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
#help code { background: rgba(6,247,255,0.1); padding: 1px 5px; border-radius: 4px; color: #cdeffd; }

/* ── The entry screen: one centred panel over the painting ─────────────────
   The attraction posters that used to fill a gallery beside it hang on HOME's
   walls now (point at a frame and pull the trigger), which is where somebody
   who has been to the places would want them. */
#entry {
  display: flex;
  justify-content: center;
  width: 100%;
  /* In the sky, not over the falls: the middle of the picture is the view up
     the lake, and the panel is the one thing on the page that may not cover it. */
  margin: max(0px, 4vh) 0 auto;
}

/* The developer drawer — hidden unless ?dev=1 or Ctrl/Cmd+Shift+D. */
#dev { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255,45,149,0.4); }
#dev[hidden] { display: none; }
#dev h2 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: 2px;
  color: var(--neon-pink); text-transform: uppercase;
}
.devhint { margin: 10px 0 0; font-size: 11px; color: #6f7f96; letter-spacing: .5px; }
.guidekey { display: flex; gap: 6px; margin-top: 8px; }
.guidekey input { flex: 1; min-width: 0; background: rgba(6,247,255,0.06); border: 1px solid rgba(6,247,255,0.25); color: #cdeffd; border-radius: 6px; padding: 5px 8px; font: 12px monospace; }
.guidekey button { background: rgba(6,247,255,0.12); border: 1px solid rgba(6,247,255,0.3); color: #cdeffd; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.devhint code { background: rgba(6,247,255,0.1); padding: 1px 5px; border-radius: 4px; color: #cdeffd; }

@media (max-width: 520px) {
  h1 { font-size: 40px; letter-spacing: 8px; }
}

/* In-VR toast / message rendered to DOM before session (debug aid) */
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(12,6,38,0.9);
  border: 1px solid rgba(6,247,255,0.4);
  color: #eafcff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 20;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
#toast.show { opacity: 1; }

/* Floating preview controls (Reset / Smash Demo) */
#playbar {
  position: fixed;
  left: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
  z-index: 15;
  transition: opacity .3s;
}
#playbar.hidden { opacity: 0; pointer-events: none; }
#playbar button {
  padding: 11px 16px;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  color: #eafcff;
  background: rgba(12, 6, 38, 0.82);
  border: 1px solid rgba(6, 247, 255, 0.4);
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .08s, box-shadow .2s, background .2s;
}
#playbar button:hover { background: rgba(255, 45, 149, 0.18); box-shadow: 0 0 18px rgba(255, 45, 149, 0.35); transform: translateY(-1px); }
#playbar button:active { transform: translateY(1px); }

/* ── Photo gallery (save / name / share the polaroids) ───────────────────── */
#photoToggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 16;
  padding: 11px 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #eafcff;
  background: rgba(12, 6, 38, 0.82);
  border: 1px solid rgba(6, 247, 255, 0.4);
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .08s, box-shadow .2s, background .2s;
}
#photoToggle:hover { background: rgba(255, 45, 149, 0.18); box-shadow: 0 0 18px rgba(255, 45, 149, 0.35); transform: translateY(-1px); }
#photoToggle.hidden { display: none; }
#photoToggle #photoCount {
  display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px;
  border-radius: 9px; background: var(--neon-pink); color: #fff; font-size: 12px; text-align: center;
}
@keyframes pgPulse { 0% { box-shadow: 0 0 0 0 rgba(255,45,149,.5); } 100% { box-shadow: 0 0 0 14px rgba(255,45,149,0); } }
#photoToggle.pg-pulse { animation: pgPulse .6s ease-out; }

#photoGallery {
  position: fixed;
  right: 18px; bottom: 66px;
  width: 340px; max-height: 72vh;
  display: flex; flex-direction: column;
  z-index: 16;
  background: rgba(12, 6, 38, 0.92);
  border: 1px solid rgba(6, 247, 255, 0.4);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  overflow: hidden;
}
#photoGallery.hidden { display: none; }
#photoGallery .pg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid rgba(6,247,255,0.18);
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--neon-cyan);
}
#photoGallery .pg-close {
  background: none; border: none; color: #9fb8c8; font-size: 16px; cursor: pointer; line-height: 1;
}
#photoGallery .pg-close:hover { color: var(--neon-pink); }
#photoGallery .pg-list { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
#photoGallery .pg-empty { margin: 0; padding: 18px; color: #7c8aa0; font-size: 12px; text-align: center; }
.pg-item {
  display: flex; gap: 10px;
  background: rgba(6, 247, 255, 0.05);
  border: 1px solid rgba(6, 247, 255, 0.14);
  border-radius: 10px; padding: 8px;
}
.pg-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; background: #05070b; flex: 0 0 auto; }
.pg-meta { display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 auto; min-width: 0; gap: 8px; }
.pg-name {
  width: 100%; box-sizing: border-box;
  padding: 6px 8px; font-size: 12px; color: #eafcff;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(6,247,255,0.25); border-radius: 6px;
}
.pg-name:focus { outline: none; border-color: var(--neon-pink); }
.pg-vidtag { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--neon-pink); }
.pg-check { flex: 0 0 auto; align-self: center; width: 18px; height: 18px; accent-color: var(--neon-cyan); cursor: pointer; }
.pg-vid { width: 104px !important; height: auto; }
.pg-del { flex: 0 0 auto; border-color: rgba(255, 90, 90, 0.5); }
.pg-del:hover { background: rgba(255, 70, 70, 0.2); box-shadow: 0 0 12px rgba(255, 70, 70, 0.3); }
#photoGallery .pg-head { flex-wrap: wrap; gap: 6px; }
#photoGallery .pg-head strong { flex: 1 1 100%; }
#photoGallery .pg-head .pg-btn { flex: 1 1 auto; }
.pg-actions { display: flex; gap: 6px; }
.pg-btn {
  flex: 1 1 auto; padding: 6px 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: #eafcff; background: rgba(12, 6, 38, 0.7);
  border: 1px solid rgba(6, 247, 255, 0.35); border-radius: 7px; cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.pg-btn:hover { background: rgba(6, 247, 255, 0.16); }
.pg-btn.pg-share { border-color: rgba(255, 45, 149, 0.5); }
.pg-btn.pg-share:hover { background: rgba(255, 45, 149, 0.2); box-shadow: 0 0 12px rgba(255,45,149,0.3); }

/* The build stamp, after whatever #status is saying. One word, dim, always
   there: the app ships through a service worker, so "still on the previous
   version" is the first thing to rule out on any report that does not
   reproduce — and it should not take a console to find out. */
#status::after {
  content: ' · build ' attr(data-build);
  color: #5d6a80;
  letter-spacing: .5px;
}