@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap");

:root {
  --forest: #102a23;
  --forest-deep: #081b17;
  --forest-mid: #24614f;
  --gold: #f4d996;
  --cream: #fbfaf6;
  --paper: #f4f0e6;
  --ink: #14211d;
  --muted: #5c6964;
  --line: rgba(20,33,29,.15);
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: var(--forest-deep); font: 400 16px/1.5 var(--sans); }
button, input, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 3px solid #d9a94d; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 14px; border-radius: 100px; color: var(--ink); background: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.explorer { position: relative; width: 100%; height: 100%; overflow: hidden; }
.pano-shell, #pano { position: absolute; inset: 0; width: 100%; height: 100%; }
.viewer-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: white; background: var(--forest-deep); }
.viewer-loading img { width: 100px; margin-bottom: 18px; }
.viewer-loading p { color: rgba(255,255,255,.68); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }

.explorer-header {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 16px;
  right: 16px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 200px minmax(220px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 8px 10px 8px 18px;
  color: white;
  background: rgba(8,27,23,.84);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
  box-shadow: 0 12px 42px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
}
.explorer-brand { display: flex; align-items: center; gap: 10px; }
.explorer-brand img { width: 36px; height: 36px; }
.explorer-brand span { display: flex; flex-direction: column; font-size: .58rem; line-height: 1.05; letter-spacing: .15em; text-transform: uppercase; }
.explorer-brand strong { font-size: .78rem; letter-spacing: .09em; }
.current-place {
  min-width: 0;
  padding: 0 22px;
  text-align: left;
  color: white;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
}
.current-place span { display: block; overflow: hidden; color: var(--gold); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.current-place strong { display: block; overflow: hidden; margin-top: 2px; font: 500 1rem var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; gap: 3px; }
.header-actions button, .header-actions a {
  width: 72px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  color: rgba(255,255,255,.82);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.header-actions button:hover, .header-actions a:hover { color: white; background: rgba(255,255,255,.1); }
.header-actions span { font-size: 1.15rem; line-height: 1; }
.header-actions b { font-size: .54rem; font-weight: 600; }

.viewer-actions {
  position: fixed;
  z-index: 80;
  right: 18px;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.viewer-actions button {
  width: 54px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  color: white;
  background: rgba(8,27,23,.76);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.viewer-actions span { font-size: 1.05rem; }
.viewer-actions b { font-size: .52rem; font-weight: 600; }

.panel {
  position: fixed;
  z-index: 220;
  top: 0;
  bottom: 0;
  width: min(520px, 100vw);
  background: var(--cream);
  box-shadow: 0 0 80px rgba(0,0,0,.36);
  transition: transform .36s cubic-bezier(.2,.8,.2,1), visibility .36s;
}
.panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.panel__header {
  min-height: 124px;
  padding: 28px 30px 20px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.panel__header p { margin: 0 0 4px; color: var(--forest-mid); font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.panel__header h2 { margin: 0; font: 600 2rem/1.05 var(--serif); }
.close-panel, .close-postcard {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.close-panel:hover, .close-postcard:hover { color: white; background: var(--forest); }
.close-panel--light { position: absolute; z-index: 3; top: 18px; right: 18px; color: white; border-color: rgba(255,255,255,.5); background: rgba(8,27,23,.45); }

.search-panel { left: 0; overflow: hidden; transform: translateX(0); }
.search-panel[aria-hidden="true"] { transform: translateX(-105%); }
.search-box { position: relative; margin: 20px 24px 12px; }
.search-box input { width: 100%; min-height: 50px; padding: 0 44px 0 16px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.search-box span { position: absolute; right: 16px; top: 13px; color: var(--forest-mid); }
.filter-row { padding: 0 24px 16px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-row button { flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); background: transparent; font-size: .68rem; font-weight: 600; cursor: pointer; }
.filter-row button[aria-pressed="true"] { color: white; background: var(--forest); border-color: var(--forest); }
.nearest-story { width: calc(100% - 48px); min-height: 62px; margin: 0 24px 12px; padding: 10px 14px; display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; text-align: left; border: 1px solid rgba(36,97,79,.28); border-radius: 6px; color: var(--forest); background: #edf1eb; cursor: pointer; }
.nearest-story > span { grid-row: 1 / 3; align-self: center; color: var(--forest-mid); font-size: 1.25rem; }
.nearest-story strong { font-size: .7rem; }
.nearest-story small { color: var(--muted); font-size: .6rem; }
.scene-list { height: calc(100% - 300px); padding: 0 15px 24px 24px; overflow: auto; }
.scene-list__group { margin: 20px 0 8px; color: var(--forest-mid); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.scene-item { width: 100%; display: grid; grid-template-columns: 64px 1fr auto; gap: 13px; align-items: center; min-height: 76px; padding: 7px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }
.scene-item:hover, .scene-item[aria-current="true"] { background: #edf1eb; }
.scene-item img { width: 64px; height: 58px; border-radius: 4px; object-fit: cover; }
.scene-item span { min-width: 0; }
.scene-item strong { display: block; overflow: hidden; font-size: .78rem; line-height: 1.3; text-overflow: ellipsis; }
.scene-item small { color: var(--muted); font-size: .62rem; }
.scene-item b { color: var(--forest-mid); font-size: .9rem; }
.empty-results { padding: 44px 20px; color: var(--muted); text-align: center; }

.story-panel { right: 0; display: grid; grid-template-rows: 250px minmax(0, 1fr) 68px; transform: translateX(0); }
.story-panel[aria-hidden="true"] { transform: translateX(105%); }
.story-hero { position: relative; overflow: hidden; color: white; background: var(--forest); }
.story-hero > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: saturate(.82); }
.story-hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,27,23,.94), rgba(8,27,23,.08)); }
.story-hero > div:last-child { position: absolute; left: 28px; right: 70px; bottom: 22px; }
.story-hero p { margin: 0 0 4px; color: var(--gold); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.story-hero h2 { margin: 0; font: 600 2rem/1.05 var(--serif); }
.story-hero span { color: rgba(255,255,255,.68); font-size: .65rem; }
.story-scroll { padding: 30px 28px 40px; overflow-y: auto; overscroll-behavior: contain; }
.story-intro { margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 1rem; }
.story-content { color: #293832; }
.story-content h2, .story-content h3, .story-content h4 { margin: 30px 0 12px; color: var(--ink); font: 600 1.55rem/1.1 var(--serif); }
.story-content p { margin: 0 0 18px; }
.story-content ul, .story-content ol { padding-left: 22px; }
.story-content li { margin-bottom: 7px; }
.story-content img { width: auto; max-width: 100% !important; max-height: 460px; margin: 22px auto 8px !important; border-radius: 4px; }
.story-content small, .story-content i { color: var(--muted) !important; }
.story-content [style] { color: inherit !important; max-width: 100% !important; }
.story-loading { color: var(--muted); font-style: italic; }
.story-source { margin-top: 34px; padding: 24px; background: var(--paper); border-left: 3px solid #d9a94d; }
.story-source p { margin: 0 0 7px; color: var(--forest-mid); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.story-source a { display: inline-flex; gap: 6px; color: var(--forest-mid); font-weight: 700; border-bottom: 1px solid rgba(36,97,79,.28); }
.story-source small { display: block; margin-top: 12px; color: var(--muted); font-size: .68rem; }
.field-note-editor { margin-top: 22px; }
.field-note-editor label { display: block; margin-bottom: 7px; font-size: .7rem; font-weight: 700; }
.field-note-editor textarea { width: 100%; padding: 12px; resize: vertical; border: 1px solid var(--line); border-radius: 5px; background: white; }
.field-note-editor span { display: block; margin-top: 4px; color: var(--muted); font-size: .62rem; text-align: right; }
.story-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 24px; }
.story-actions a, .story-actions button { min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--forest); border-radius: 100px; font-size: .75rem; font-weight: 700; cursor: pointer; }
.story-actions .primary-action { color: white; background: var(--forest); }
.story-actions button { background: transparent; }
.story-actions #story-postcard { grid-column: 1 / -1; }
.story-nav { display: grid; grid-template-columns: 116px 1fr 116px; align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--line); background: white; }
.story-nav button { width: 116px; min-height: 44px; padding: 0 20px; display: flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 100px; background: transparent; font-size: .7rem; font-weight: 700; cursor: pointer; }
.story-nav button:hover { color: white; background: var(--forest); }
.story-nav > span { color: var(--muted); font-size: .64rem; text-align: center; }

.map-panel { left: 50%; width: min(1000px, calc(100vw - 64px)); height: calc(100% - 64px); top: 32px; bottom: auto; border-radius: 10px; overflow: hidden; transform: translateX(-50%); }
.map-panel[aria-hidden="true"] { transform: translate(-50%, 110%); }
.panel__header--map { min-height: 104px; }
.map-panel iframe { width: 100%; height: calc(100% - 140px); border: 0; background: #b9d2d2; }
.map-disclosure { height: 36px; margin: 0; padding: 9px 18px; color: var(--muted); background: var(--paper); font-size: .6rem; text-align: center; }

.passport-panel { left: 0; overflow-y: auto; transform: translateX(0); }
.passport-panel[aria-hidden="true"] { transform: translateX(-105%); }
.passport-progress { margin: 26px; padding: 22px; display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center; color: white; background: var(--forest); border-radius: 7px; }
.progress-ring { width: 105px; height: 105px; display: grid; place-content: center; border: 7px solid rgba(255,255,255,.18); border-top-color: var(--gold); border-radius: 50%; text-align: center; }
.progress-ring strong { font: 600 2rem/1 var(--serif); }
.progress-ring span { color: rgba(255,255,255,.6); font-size: .55rem; }
.passport-progress h3 { margin: 0 0 7px; font: 600 1.35rem var(--serif); }
.passport-progress p { margin: 0; color: rgba(255,255,255,.7); font-size: .7rem; }
.quest-list { padding: 0 26px 20px; display: grid; gap: 10px; }
.quest-card { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.quest-stamp { width: 54px; height: 54px; display: grid; place-content: center; border: 2px dashed rgba(36,97,79,.32); border-radius: 50%; color: var(--forest-mid); font-size: .64rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.quest-card--complete .quest-stamp { color: white; background: var(--forest-mid); border-style: solid; transform: rotate(-5deg); }
.quest-card h3 { margin: 0; font: 600 1rem var(--serif); }
.quest-card p { margin: 4px 0 8px; color: var(--muted); font-size: .68rem; }
.quest-meter { height: 5px; overflow: hidden; border-radius: 100px; background: #e6e7e1; }
.quest-meter span { display: block; height: 100%; background: #d9a94d; }
.quest-card small { display: block; margin-top: 5px; color: var(--forest-mid); font-size: .58rem; font-weight: 700; }
.passport-tools { padding: 0 26px 34px; display: grid; gap: 8px; }
.passport-tools button { min-height: 44px; border: 1px solid var(--line); border-radius: 100px; background: transparent; font-size: .7rem; font-weight: 700; cursor: pointer; }
.passport-tools button:first-child { color: white; background: var(--forest); border-color: var(--forest); }

.bottom-nav { display: none; }

.audio-dock {
  position: fixed;
  z-index: 180;
  left: 50%;
  bottom: 18px;
  width: min(720px, calc(100vw - 36px));
  min-height: 72px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 48px minmax(170px, 1fr) 110px 40px 40px 36px;
  gap: 8px;
  align-items: center;
  color: white;
  background: rgba(8,27,23,.94);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
.audio-dock[hidden] { display: none; }
.audio-dock button { height: 38px; color: white; background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; cursor: pointer; }
.audio-dock__play { width: 46px; height: 46px !important; color: var(--forest-deep) !important; background: var(--gold) !important; border-color: var(--gold) !important; font-weight: 800; }
.audio-dock__meta { min-width: 0; }
.audio-dock__meta span { display: block; overflow: hidden; color: var(--gold); font-size: .52rem; font-weight: 700; letter-spacing: .09em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.audio-dock__meta strong { display: block; overflow: hidden; margin-top: 3px; font: 500 .9rem var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.audio-dock__progress { display: grid; gap: 5px; }
.audio-dock__progress > span { color: rgba(255,255,255,.6); font-size: .58rem; text-align: right; }
.audio-dock__progress i { height: 3px; overflow: hidden; border-radius: 100px; background: linear-gradient(90deg, var(--gold) var(--audio-progress, 0%), rgba(255,255,255,.18) 0); }

.postcard-modal { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3,13,10,.76); backdrop-filter: blur(12px); }
.postcard-modal[aria-hidden="true"] { display: none; }
.postcard-dialog { position: relative; width: min(700px, 100%); max-height: 92vh; padding: 30px; overflow-y: auto; border-radius: 9px; background: var(--cream); box-shadow: 0 40px 100px rgba(0,0,0,.46); }
.close-postcard { position: absolute; top: 16px; right: 16px; }
.postcard-dialog > p { margin: 0; color: var(--forest-mid); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.postcard-dialog h2 { margin: 4px 50px 20px 0; font: 600 2rem var(--serif); }
.postcard-preview { min-height: 280px; display: grid; place-items: center; overflow: hidden; color: white; background: var(--forest-deep); border-radius: 5px; }
.postcard-preview canvas { width: 100%; height: auto; }
.postcard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.postcard-actions button { min-height: 46px; border: 1px solid var(--forest); border-radius: 100px; background: transparent; font-weight: 700; cursor: pointer; }
.postcard-actions button:first-child { color: white; background: var(--forest); }
.postcard-dialog > small { display: block; margin-top: 12px; color: var(--muted); font-size: .64rem; text-align: center; }

@media (max-width: 720px) {
  .explorer-header {
    top: 8px; left: 8px; right: 8px;
    min-height: 58px;
    grid-template-columns: 42px 1fr 40px;
    gap: 8px;
    padding: 7px;
  }
  .explorer-brand img { width: 34px; height: 34px; }
  .explorer-brand span { display: none; }
  .current-place { padding: 0 10px; }
  .current-place strong { font-size: .86rem; }
  .header-actions button, .header-actions a { display: none; }
  .header-actions a:last-child { width: 38px; min-height: 38px; display: flex; }
  .header-actions a:last-child b { display: none; }
  .header-actions a:last-child span { font-size: 1.5rem; }
  .viewer-actions { top: 77px; right: 9px; }
  .viewer-actions button { width: 46px; min-height: 46px; }
  .viewer-actions button b { display: none; }
  .panel { bottom: 64px; width: 100vw; }
  .panel__header { min-height: 106px; padding: 22px 20px 16px; }
  .panel__header h2 { font-size: 1.7rem; }
  .search-box { margin-left: 16px; margin-right: 16px; }
  .filter-row { padding-left: 16px; padding-right: 16px; }
  .nearest-story { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
  .scene-list { padding-left: 16px; height: calc(100% - 282px); }
  .story-panel { grid-template-rows: 220px minmax(0, 1fr) 64px; }
  .story-hero > div:last-child { left: 20px; bottom: 18px; }
  .story-hero h2 { font-size: 1.65rem; }
  .story-scroll { padding: 24px 20px 32px; }
  .story-nav { grid-template-columns: 106px 1fr 106px; padding: 9px 12px; }
  .story-nav button { width: 106px; min-height: 42px; padding: 0 14px; }
  .map-panel { left: 0; top: 0; bottom: 64px; width: 100vw; height: auto; border-radius: 0; transform: none; }
  .map-panel[aria-hidden="true"] { transform: translateY(110%); }
  .map-panel iframe { height: calc(100% - 148px); }
  .map-disclosure { height: 44px; padding: 6px 12px; }
  .passport-progress { margin: 18px; grid-template-columns: 88px 1fr; }
  .progress-ring { width: 85px; height: 85px; }
  .quest-list, .passport-tools { padding-left: 18px; padding-right: 18px; }
  .bottom-nav {
    position: fixed;
    z-index: 200;
    left: 0; right: 0; bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: rgba(255,255,255,.72);
    background: rgba(8,27,23,.97);
    border-top: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(18px);
  }
  .audio-dock {
    left: 8px;
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: auto;
    min-height: 64px;
    grid-template-columns: 44px minmax(0, 1fr) 34px 34px 30px;
    transform: none;
  }
  .audio-dock__progress { display: none; }
  .audio-dock button { height: 34px; }
  .audio-dock__play { width: 42px; height: 42px !important; }
  .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: inherit; background: transparent; border: 0; font-size: .58rem; font-weight: 600; }
  .bottom-nav span { color: var(--gold); font-size: 1.2rem; line-height: 1; }
  .postcard-dialog { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}