:root {
  color-scheme: dark;
  --paper: #f0e8d8;
  --muted: #b2c4c7;
  --gold: #e6bd7c;
  --night: #10202b;
  font-family: Arial, Helvetica, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
  background: #172b3c;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
canvas#world {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  touch-action: none;
}
.topbar {
  position: fixed;
  z-index: 2;
  inset: 26px 32px auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.topbar a,
.topbar button {
  pointer-events: auto;
}
.back {
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 9px 0;
}
.brand {
  text-align: right;
  color: var(--paper);
}
.brand strong {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.5px;
}
.brand span {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  color: #c2d0d1;
  margin-top: 8px;
}
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse, transparent 52%, #08172350 100%);
}
#welcome {
  cursor: pointer;
  position: fixed;
  z-index: 3;
  left: 6vw;
  bottom: 13vh;
  width: 390px;
  max-width: 87vw;
  color: var(--paper);
  transition:
    opacity 0.6s,
    transform 0.6s;
  text-shadow: 0 2px 24px #061320;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}
#welcome h1 {
  font:
    400 clamp(42px, 5vw, 72px)/0.99 Georgia,
    serif;
  letter-spacing: -2.8px;
  margin: 18px 0 22px;
}
#welcome p {
  font-size: 15px;
  line-height: 1.7;
  color: #d0dad9;
  max-width: 300px;
  margin: 0 0 25px;
}
#enter {
  border: 1px solid #e2bf8577;
  background: #172c35b8;
  color: var(--paper);
  padding: 15px 23px;
  font-size: 12px;
  letter-spacing: 2px;
  backdrop-filter: blur(12px);
}
#enter:hover {
  background: #c69b55;
  color: #10202b;
}
#enter span {
  padding-left: 30px;
}
#welcome.hidden {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}
.bottom {
  position: fixed;
  z-index: 3;
  inset: auto 32px 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  color: var(--muted);
  pointer-events: none;
}
.location {
  font-size: 11px;
  letter-spacing: 2px;
}
.location strong {
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--paper);
  display: block;
  margin-bottom: 7px;
  font-weight: 400;
}
.controls {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.controls button {
  border: 1px solid #a9c0ca40;
  background: #10232e99;
  color: var(--paper);
  padding: 12px 15px;
  font-size: 11px;
  letter-spacing: 1.2px;
  backdrop-filter: blur(12px);
}
.controls button:hover {
  background: #294451;
}
.instructions {
  position: fixed;
  bottom: 29px;
  left: 50%;
  transform: translateX(-50%);
  color: #c5d1d3;
  font-size: 11px;
  letter-spacing: 0.6px;
  pointer-events: none;
  white-space: nowrap;
}
.instructions kbd {
  font: inherit;
  color: #f0e8d8;
  border: 1px solid #c1d0d344;
  padding: 3px 5px;
  margin-right: 4px;
}
#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #fff8dfb8;
  box-shadow: 0 0 9px #15202f;
  pointer-events: none;
  display: none;
}
body.exploring #crosshair {
  display: block;
}
#prompt {
  position: fixed;
  z-index: 4;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  padding: 13px 20px;
  background: #0e202ee0;
  border: 1px solid #e2bf8566;
  color: var(--paper);
  font-size: 14px;
  display: none;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}
#prompt.visible {
  display: block;
}
#prompt b {
  color: var(--gold);
  margin-right: 12px;
  font-weight: 400;
}
dialog {
  color: var(--paper);
  border: 1px solid #9fb6bf40;
  background: #152a35;
  padding: 0;
  width: min(780px, calc(100% - 36px));
  max-height: 84dvh;
  box-shadow: 0 40px 100px #0008;
}
dialog::backdrop {
  background: #08141ec9;
  backdrop-filter: blur(7px);
}
.dialog-inner {
  padding: clamp(25px, 5vw, 55px);
}
.close {
  float: right;
  border: 1px solid #a9c0ca40;
  background: transparent;
  color: var(--paper);
  height: 34px;
  width: 34px;
  font-size: 22px;
  margin: -9px -9px 10px 15px;
}
dialog h2 {
  font:
    400 clamp(27px, 4vw, 42px)/1.13 Georgia,
    serif;
  letter-spacing: -0.7px;
  margin: 20px 0;
}
#pMeta {
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  color: var(--gold);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 26px;
}
#pBody p {
  font:
    16px/1.85 Georgia,
    serif;
  color: #d6dcd7;
}
#pShots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 28px;
}
#pShots:empty {
  display: none;
}
figure {
  margin: 0;
}
figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
figcaption {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 8px;
}
.choice {
  display: block;
  width: 100%;
  border: 1px solid #8ea7b04d;
  background: #ffffff06;
  color: var(--paper);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  padding: 13px 17px;
  margin: 9px 0;
}
.choice:hover {
  background: #ffffff10;
  border-color: var(--gold);
}
#mapDialog {
  width: min(670px, calc(100% - 28px));
}
#mapCanvas {
  width: 100%;
  height: auto;
  display: block;
}
#mapDialog p {
  color: var(--muted);
  font-size: 13px;
  margin: 12px 0 0;
}
#loading {
  position: fixed;
  z-index: 20;
  inset: 0;
  background: #172b3c;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--paper);
  transition: opacity 0.5s;
}
#loading strong {
  font:
    34px Georgia,
    serif;
}
#loading span {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-top: 20px;
}
#loading.gone {
  opacity: 0;
  pointer-events: none;
}
#error {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  background: #172b3c;
  color: var(--paper);
  place-content: center;
  text-align: center;
  padding: 30px;
}
#error p {
  max-width: 460px;
  line-height: 1.7;
}
#error a {
  color: var(--gold);
}
#stick {
  display: none;
  position: fixed;
  width: 96px;
  height: 96px;
  border: 1px solid #fff5;
  background: #ffffff09;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
}
#stick i {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid #fff7;
  background: #fff3;
  border-radius: 50%;
  position: absolute;
  left: 32px;
  top: 32px;
}
#touchHint {
  display: none;
}
#welcome #dragHint {
  font-size: 12px;
  letter-spacing: 0.3px;
  margin-top: 15px;
  color: #d3d8be;
}
#welcome #dragHint,
#welcome #touchHint {
  height: 60px;
  margin: 15px 0 0;
  line-height: 1.6;
}
#world:focus-visible {
  outline: none;
}
body.exploring #world {
  cursor: default;
}
body.exploring #world:active {
  cursor: default;
}
@media (pointer: coarse) {
  body:not([data-input="mouse"]) #welcome #dragHint {
    display: none;
  }
  body:not([data-input="mouse"]) #welcome #touchHint {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    margin: 15px 0 0;
  }
}
body[data-input="touch"] #lookButton {
  display: none;
}
body[data-input="mouse"] #lookButton {
  display: inline-block;
}
/* A field journal rather than a resort brochure. */
:root {
  --paper: #eee5cb;
  --muted: #bdc6b2;
  --gold: #d6bc7b;
  --night: #1e2b24;
}
.brand strong {
  font-style: italic;
}
#welcome h1 {
  font-style: italic;
  letter-spacing: -2px;
}
dialog {
  background: #29362d;
  border-color: #9a99745c;
}
.controls button,
#enter {
  background: #223228bf;
  border-color: #d5c39852;
}
.instructions {
  bottom: 78px;
  font-size: 12px;
  opacity: 0.82;
}
@media (max-width: 800px) {
  #lookButton {
    display: none;
  }
  .instructions {
    display: none;
  }
  .topbar {
    inset: 22px;
  }
  .bottom {
    inset: auto 22px 22px;
  }
  .brand strong {
    font-size: 20px;
  }
  #welcome {
    bottom: 20vh;
    left: 7vw;
  }
  #welcome h1 {
    font-size: 56px;
  }
  .location {
    font-size: 10px;
  }
  .location strong {
    font-size: 12px;
  }
  .controls button {
    padding: 12px;
    font-size: 10px;
    white-space: nowrap;
  }
  .location > span {
    display: none;
  }
  #pShots {
    grid-template-columns: 1fr;
  }
  #prompt {
    bottom: 24%;
    font-size: 12px;
    max-width: 92%;
    white-space: normal;
    text-align: center;
  }
  .brand span {
    font-size: 9px;
    letter-spacing: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

body.looking #world, body.looking #world:active { cursor: none; }
body:has(dialog[open]) #crosshair { display: none; }
.destination-map { width: 100%; height: auto; border: 1px solid #73634a; cursor: pointer; margin: 1rem 0; }
.destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.destinations button { text-align: left; padding: .8rem; color: #e5ddc5; background: #334238; border: 1px solid #78806a; font: inherit; cursor: pointer; }
.destinations button:hover, .destinations button:focus-visible { background: #526049; outline: 2px solid #d4b777; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.travel-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.travel-layout .destinations { margin: 0; gap: .4rem; }
.travel-layout .destinations button { padding: .6rem; font-size: 14px; min-height: 46px; }
.travel-layout .destination-map { margin: 0; }
#pBody details { margin-top: 1.2rem; }
#pBody summary { cursor: pointer; color: #dec699; }
@media(max-width: 650px) { .travel-layout { grid-template-columns: 1fr; } }
@media(max-width: 520px) { .destinations { grid-template-columns: 1fr; } }
@media(max-width: 650px) {
  .bottom { flex-direction: column; align-items: stretch; gap: 6px; }
  .location strong { margin-bottom: 0; }
  .controls { justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
  .controls button { padding: 10px 9px; font-size: 9px; letter-spacing: 0.7px; }
}

/* Weather changes the scene without a location/status overlay. */
.bottom { justify-content: flex-end; }

/* Phone safe areas and controls that work without a welcome gate. */
.topbar { top:max(16px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); }
.back { min-height:44px; display:flex; align-items:center; padding:10px; background:#17291ed9; border-radius:4px; }
.bottom { bottom:max(16px,env(safe-area-inset-bottom)); }
.controls button,.close { min-width:44px; min-height:44px; }
.close { position:sticky; top:0; z-index:2; background:#29362d; }
dialog { overscroll-behavior:contain; overflow-y:auto; }
dialog a { overflow-wrap:anywhere; }
#pShots img { max-width:100%; height:auto; aspect-ratio:auto; object-fit:contain; }
#pShots:has(> :only-child) { grid-template-columns:1fr; max-width:496px; margin-inline:auto; }
#jumpButton,.touch-instructions { display:none; }
body[data-input="touch"] #lookButton { display:none; }
body[data-input="touch"] .instructions { display:none; }
body[data-input="touch"] #jumpButton { display:block; position:fixed; z-index:3; right:max(20px,env(safe-area-inset-right)); bottom:calc(90px + env(safe-area-inset-bottom)); min-height:48px; min-width:64px; color:var(--paper); border:1px solid #d5c39880; background:#223228e8; border-radius:8px; }
body[data-input="touch"] .touch-instructions { display:flex; justify-content:space-between; position:fixed; inset:auto 18px calc(153px + env(safe-area-inset-bottom)); color:#fff; font-size:12px; text-shadow:0 1px 4px #000; pointer-events:none; }
body:has(dialog[open]) #jumpButton,body:has(dialog[open]) .touch-instructions { display:none; }
body[data-input="touch"] #prompt b { display:none; }
@media(max-width:600px) {
  body[data-input="mouse"] #lookButton { display:none; }
  .brand { display:none; }
  .bottom { left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); }
  .controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .controls button { font-size:10px; padding:10px 5px; letter-spacing:.3px; }
  dialog { width:calc(100% - 20px); max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .dialog-inner { padding:20px; }
  #prompt { bottom:calc(205px + env(safe-area-inset-bottom)); max-width:calc(100% - 32px); }
}
@media(max-height:500px) and (orientation:landscape) { .touch-instructions { visibility:hidden; } #prompt { bottom:85px; } }

#loading[hidden] { display: none; }